/* =========================================================================
   ARTIS VALORISATION, REFONTE : LE CALCULATEUR (p-calculateur.css)
   /calculateur passe sur la scene le 02/10/2026 (critiques 4 et 5 de
   Raphael : « garder le fond qui bouge... et le meme style que la page
   d'accueil » ; « le calculateur le plus intuitif possible... la page doit
   convertir le plus possible »). Chargee apres socle.css, scene.css et
   accueil.css, qu'elle ne modifie pas : pages.css n'est plus chargee, ses
   surcharges de la barre et du pied auraient change la barre de l'accueil.
   Classes pc- seulement, et le bloc des honoraires ecrit par
   outils/construire-offre.py (classes k- et pv-), habille ici pour la bande
   marine.
   Rythme de l'accueil : la tete et le resultat sur la scene, en bulles
   blanches ; la lecture sur la scene, en duo collant ; les limites dans une
   bande claire ; l'evaluation sur dossier dans la bande marine du contenu
   du rapport ; le pied sur la scene.
   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.
   ------------------------------------------------------------------------- */

/* =========================================================================
   1. LA PAGE
   ------------------------------------------------------------------------- */
.pc-page{
  --pc-r:20px;                 /* rayon des bulles du gabarit */
  --pc-texte:#26324a;          /* texte courant sur blanc (12,6:1), celui des offres */
  --pc-teinte:#edf1fa;         /* fond des champs (Klein 9,4:1 dessus) */
  --pc-trait-champ:#7d8aa0;    /* trait bas des champs : 3,4:1 sur la teinte (critere 1.4.11) */
  --pc-rouge:#A8321C;          /* erreur : 6,7:1 sur blanc, 5,9:1 sur son fond */
  --pc-courbe:cubic-bezier(.23,1,.32,1);
}
.pc-page [id]{ scroll-margin-top:100px; }
.pc-page h2, .pc-page h3{ text-wrap:balance; }
/* Le retour en haut d'artis.js : verre marine, comme sur les offres, lisible
   sur la scene, les bulles et les bandes. */
.pc-page .to-top{ background:rgba(var(--f-voile),.62); }
@media (hover:hover){ .pc-page .to-top:hover{ background:rgba(var(--f-voile),.78); } }

/* =========================================================================
   2. LA TETE : LE TITRE SUR LA SCENE, LE CALCULATEUR A COTE
   Ordinateur : la composition de la couverture de l'accueil et de
   /methodologie (critique 4, « le meme style que la page d'accueil ») : le
   titre en bas a gauche, la scene libre au-dessus, la bulle a droite. Le
   formulaire, plus haut que l'ecran a 1 280 x 800 et a 1 024 x 768,
   descend sous le pli : le titre colle alors au bas de la fenetre (sticky
   bottom), au lieu de s'aligner sur le bas de la bulle, qui l'aurait mis
   hors de l'ecran. Des que le bas de la bulle remonte dans la fenetre, le
   titre reprend sa place, aligne sur lui.
   Tablette et telephone : le titre, puis le formulaire. Le formulaire est
   au premier ecran a 1 440 x 900 comme au telephone (sous le chapo).
   ------------------------------------------------------------------------- */
.pc-tete{ position:relative; padding:136px 0 0; overflow-x:clip; }
.pc-tete-grille{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,640px);
  column-gap:72px; align-items:start;
}
.pc-tete-texte{ position:sticky; bottom:40px; align-self:end; isolation:isolate; max-width:600px; }
/* Voile d'ardoise profonde sous la colonne de texte (regle des voiles du
   gabarit, section 4) : radial, plein au centre, fondu a rien, sans bord ;
   la scene reste claire autour. Ses debords a gauche sont coupes par la
   section (overflow-x:clip). */
.pc-tete-texte::before{
  content:""; position:absolute; z-index:-1; inset:-170px -140px -96px -120px; pointer-events:none;
  background:radial-gradient(closest-side, rgba(var(--f-voile),.5) 0, rgba(var(--f-voile),.48) 60%, rgba(var(--f-voile),.22) 82%, rgba(var(--f-voile),0));
}
/* Le voile monte de 170 px : le fil d'Ariane, en haut de colonne, tombait
   dans son fondu (« Accueil », 14 px, 4,2:1 a 1 280 sur la scene vivante).
   Regle 2 des voiles : la colonne collante est positionnee, le voile se
   peignait sur le haut de la bulle du formulaire a 1 024 et 1 280 (aides
   de 14 px a 4,3:1 au lieu de 6:1) ; les bulles passent au-dessus. */
.pc-calc, .pc-resultat{ position:relative; z-index:1; }

/* Le fil d'Ariane : liens de 44 px de haut au toucher, sans grandir la
   ligne (marges negatives). */
.pc-fil{
  list-style:none; margin:-12px 0 16px; padding:0; display:flex; flex-wrap:wrap; align-items:center;
  font-size:14px; line-height:1.2; letter-spacing:0; color:var(--f-texte);
}
.pc-fil li{ display:flex; align-items:center; }
.pc-fil li + li::before{ content:"/"; margin:0 10px; opacity:.8; }
.pc-fil a{
  display:inline-flex; align-items:center; min-height:44px; color:var(--f-texte);
  text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:4px;
}
@media (hover:hover){ .pc-fil a:hover{ text-decoration-thickness:2px; } }

.pc-sur{ margin:0 0 24px; line-height:1.4; }
.pc-h1{ font-size:clamp(40px, 4.4vw, 64px); line-height:1.04; text-wrap:balance; }
.pc-accent{ display:block; color:var(--f-azur-scene, var(--g-azur)); }
.pc-chapo{ margin-top:28px; max-width:560px; line-height:1.4; }

/* =========================================================================
   3. LES BULLES BLANCHES SUR LA SCENE
   Rayon 20, ombre marine de scene.css (--f-ombre-bulle) ; f-carte-blanche
   dans le balisage donne les jetons d'encre et le verre dense de la barre
   quand la bulle passe dessous (socle.js).
   ------------------------------------------------------------------------- */
.pc-bulle{
  background:var(--f-blanc); color:var(--g-encre);
  border-radius:var(--pc-r); box-shadow:var(--f-ombre-bulle);
  padding:40px; letter-spacing:-0.01em;
}
.pc-bulle :focus-visible{ outline:2px solid var(--g-klein); outline-offset:2px; }

/* =========================================================================
   4. LE FORMULAIRE
   Trois questions numerotees, une par ligne, de grands champs (56 px, texte
   de 20 px : l'iPhone ne zoome pas au-dessus de 16), l'unite dans le champ,
   l'echo de la saisie en euros sous le champ, puis l'aide en une ligne,
   l'erreur sous son champ, en rouge, avec le trait du champ.
   ------------------------------------------------------------------------- */
.pc-form{ display:grid; gap:28px; container:pcform / inline-size; }
.pc-champ{ display:grid; gap:8px; min-width:0; }
.pc-label{
  display:flex; flex-wrap:wrap; align-items:center; column-gap:12px; row-gap:6px;
  font-size:18px; line-height:1.3; font-weight:500; letter-spacing:-0.01em; color:var(--g-encre);
}
.pc-label--petit{ font-size:16px; }
.pc-no{
  display:grid; place-items:center; flex:none; width:28px; height:28px; border-radius:50%;
  background:var(--g-klein); color:var(--f-blanc); font-size:14px; line-height:1; letter-spacing:0;
}
.pc-facultatif{
  display:inline-block; padding:4px 9px; border-radius:999px; background:#eef1f6;
  font-size:13px; line-height:1.1; font-weight:400; letter-spacing:0; color:var(--f-encre-3);
}

.pc-saisie, .pc-select{ position:relative; }
.pc-saisie input, .pc-select select{
  display:block; width:100%; height:56px; margin:0; border:0; border-radius:12px;
  background:var(--pc-teinte); box-shadow:inset 0 -2px 0 var(--pc-trait-champ);
  font:500 20px/1.2 var(--f-police); letter-spacing:-0.01em; color:var(--g-encre);
  font-variant-numeric:tabular-nums; -webkit-appearance:none; appearance:none;
  transition:box-shadow .2s var(--pc-courbe), background-color .2s var(--pc-courbe);
}
.pc-saisie input{ padding:0 56px 0 16px; }
/* Le placeholder est un exemple : plus leger que la valeur, lisible (encre-3
   sur la teinte, 5,3:1). */
.pc-saisie input::placeholder{ color:var(--f-encre-3); opacity:1; font-weight:400; }
.pc-unite{
  position:absolute; right:16px; top:50%; transform:translateY(-50%); pointer-events:none;
  font-size:16px; line-height:1; font-weight:500; color:var(--f-encre-3);
}
/* La liste : 18 px pour tenir les noms longs sur une ligne a 320 px ; la
   fleche dessinee en CSS (pas d'image : la CSP n'autorise que 'self'). */
.pc-select select{ padding:0 48px 0 16px; font-size:18px; text-overflow:ellipsis; cursor:pointer; }
.pc-select select:has(option[value=""]:checked){ color:var(--f-encre-3); font-weight:400; }
.pc-select::after{
  content:""; position:absolute; right:22px; top:50%; width:9px; height:9px; margin-top:-7px; pointer-events:none;
  border-right:2px solid var(--g-encre); border-bottom:2px solid var(--g-encre); transform:rotate(45deg);
}
.pc-saisie input:focus, .pc-select select:focus{ background:var(--f-blanc); box-shadow:inset 0 -2px 0 var(--g-klein), inset 0 0 0 1px rgba(0,47,167,.35); outline:none; }
.pc-saisie input:focus-visible, .pc-select select:focus-visible{ outline:2px solid var(--g-klein); outline-offset:2px; }
@media (hover:hover){
  .pc-saisie input:hover:not(:focus), .pc-select select:hover:not(:focus){ background:#e4eaf7; }
}
.pc-invalide input, .pc-invalide select{ background:#fbeeea; box-shadow:inset 0 -2px 0 var(--pc-rouge); }
/* Le champ fautif recoit le focus : son trait reste rouge sous l'anneau. */
.pc-invalide input:focus, .pc-invalide select:focus{ background:var(--f-blanc); box-shadow:inset 0 -2px 0 var(--pc-rouge), inset 0 0 0 1px rgba(168,50,28,.35); }

.pc-erreur{ margin:0; font-size:15px; line-height:1.4; letter-spacing:0; color:var(--pc-rouge); text-wrap:pretty; }
.pc-erreur:empty{ display:none; }
.pc-erreur a{ color:var(--g-klein); font-weight:500; text-decoration:underline; text-underline-offset:3px; }
.pc-aide{ margin:0; font-size:14px; line-height:1.45; letter-spacing:0; color:var(--f-encre-3); text-wrap:pretty; }
.pc-aide a{ color:var(--g-klein); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; }
/* L'echo du montant en euros (audit UI/UX du 9 octobre, point A13,
   10/10/2026), ecrit par le script de la page a chaque frappe :
   « = 325 000 € » juste sous le champ, en 14 px (13 au telephone, comme
   les aides), gris des aides et chiffres tabulaires, en 500 pour se lire
   comme une valeur et non comme une consigne. Vide, il ne prend aucune
   place : rien ne bouge au chargement. Un tres grand montant passe a la
   ligne au lieu de deborder de la bulle. Il remplace l'echo d'avant, qui
   prenait la place de l'aide (.pc-aide--echo, en Klein). */
.pc-echo{
  margin:-2px 0 0; font-size:14px; line-height:1.4; font-weight:500; letter-spacing:0;
  color:var(--f-encre-3); font-variant-numeric:tabular-nums; overflow-wrap:anywhere;
}
.pc-echo:empty{ display:none; }
.pc-aide--large{ margin-top:2px; }
@media (hover:hover){ .pc-aide a:hover, .pc-erreur a:hover{ text-decoration-thickness:2px; } }

/* « Je ne connais pas mon EBITDA » : un lien de 44 px, et les deux montants
   du compte de resultat dans un creux de papier, cote a cote si la place
   le permet. */
.pc-lien{
  justify-self:start; display:inline-flex; align-items:center; min-height:44px; margin:-6px 0 -8px; padding:0;
  border:0; background:none; cursor:pointer; -webkit-tap-highlight-color:transparent;
  font:500 15px/1.3 var(--f-police); letter-spacing:0; color:var(--g-klein);
  text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:4px;
}
.pc-lien[aria-expanded="true"]{ text-decoration:none; }
@media (hover:hover){ .pc-lien:hover{ text-decoration-thickness:2px; } }
.pc-ebitda{ display:grid; gap:14px; padding:16px; border-radius:12px; background:var(--f-papier); }
.pc-ebitda .pc-saisie input{ height:52px; font-size:18px; background:var(--f-blanc); }
/* Cote a cote, un libelle sur deux lignes decalait son champ : la ligne
   du libelle prend la hauteur libre, les deux champs s'alignent. */
.pc-ebitda .pc-champ{ grid-template-rows:1fr auto; }
.pc-ebitda .pc-label{ align-self:end; }
@container pcform (min-width: 520px){
  .pc-ebitda{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .pc-ebitda .pc-aide--large{ grid-column:1 / -1; }
  /* Cote a cote, l'echo d'un seul des deux champs (A13) allongeait sa
     colonne : la ligne du libelle de l'autre champ prenait la hauteur
     gagnee et son champ descendait. Des qu'un des deux echos s'ecrit, les
     deux tiennent leur ligne, vide ou non : les champs restent alignes. */
  .pc-ebitda:has(.pc-echo:not(:empty)) .pc-echo{ display:block; min-height:1.4em; }
}

/* La dette et la tresorerie, repliees : un seul geste pour les ouvrir. */
.pc-affiner{ border-top:1px solid var(--g-trait); border-bottom:1px solid var(--g-trait); }
.pc-affiner > summary{
  list-style:none; cursor:pointer; -webkit-tap-highlight-color:transparent;
  display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:16px; row-gap:2px; align-items:center;
  min-height:64px; padding:12px 0;
}
.pc-affiner > summary::-webkit-details-marker{ display:none; }
.pc-affiner > summary::marker{ content:""; }
.pc-affiner-titre{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; font-size:17px; line-height:1.3; font-weight:500; color:var(--g-encre); }
.pc-affiner-sous{ grid-column:1; font-size:14px; line-height:1.35; letter-spacing:0; color:var(--f-encre-3); }
.pc-affiner > summary .pc-plus{ grid-column:2; grid-row:1 / span 2; }
.pc-affiner-corps{ display:grid; gap:12px; padding:4px 0 20px; }
.pc-paire{ display:grid; gap:20px; }
@container pcform (min-width: 480px){
  .pc-paire{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  /* Cote a cote, la colonne la plus courte etait etiree a la hauteur de
     l'autre et ses lignes se partageaient le surplus : le champ de la
     tresorerie descendait de 7 px quand l'aide de la dette passait sur
     deux lignes, de 15 px avec l'echo d'un seul des deux montants (audit
     UI/UX du 9 octobre, point A13, 10/10/2026). Des qu'un echo s'ecrit,
     les deux tiennent leur ligne et les lignes partent du haut : les
     champs, les echos et les aides restent alignes. Tant qu'aucun echo
     n'est ecrit, la paire reste celle d'avant, decalage de 7 px compris
     (reprise du meme jour : a 761 px et plus, rien d'autre que l'echo ne
     change). */
  .pc-paire:has(.pc-echo:not(:empty)) .pc-champ{ align-content:start; }
  .pc-paire:has(.pc-echo:not(:empty)) .pc-echo{ display:block; min-height:1.4em; }
}

/* Le plus des depliants : rond de teinte, deux traits Klein ; ouvert, le
   trait vertical se couche (celui des offres, offre.css .go-plus). */
.pc-plus{ position:relative; flex:none; width:32px; height:32px; border-radius:50%; background:#e8eefb; }
.pc-plus::before, .pc-plus::after{
  content:""; position:absolute; left:50%; top:50%; width:12px; height:1.5px; margin:-.75px 0 0 -6px;
  background:var(--g-klein); border-radius:1px; transition:transform .24s var(--pc-courbe);
}
.pc-plus::after{ transform:rotate(90deg); }
details[open] > summary .pc-plus::after{ transform:rotate(0deg); }
@media (hover:hover){ summary:hover .pc-plus{ background:#dbe5fa; } }

.pc-actions{ display:grid; gap:10px; }
.pc-calculer{ width:100%; min-height:56px; font-size:17px; }
.pc-calculer:active{ transform:scale(.99); }
.pc-note-calc{ margin:0; font-size:14px; line-height:1.4; letter-spacing:0; text-align:center; color:var(--f-encre-3); }

/* =========================================================================
   5. LE RESULTAT
   La fourchette (sept colonnes) et la suite (cinq), cote a cote ; empilees
   sous 900 px. La fourchette reprend le dessin de « La fourchette » de
   l'offre a 490 EUR (offre-490.css) : valeurs en tres grand, bornes en
   Klein ; un axe gradue, la barre en degrade #d7e2f2 vers l'azur entre les
   bornes, deux traits d'encre aux bouts, l'epingle Klein de la valeur
   centrale. Ici l'echelle n'est pas fixe : le script donne a chaque repere
   sa position (--x, en %).
   ------------------------------------------------------------------------- */
.pc-resultat{ padding:96px 0 0; }
/* Apres le calcul, le resultat vient sous la barre : html porte deja un
   scroll-padding de 100 px (socle.css) ; la marge negative retire le pad de
   la section, la bulle tombe a 116 px du haut, sous la barre (80 px). */
.pc-page #calcRes{ scroll-margin-top:-80px; }
.pc-resultat-grille{ display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:20px; align-items:start; }
.pc-fourchette{ container:pcf / inline-size; }
.pc-res-titre{
  display:flex; align-items:center; gap:10px; margin:0 0 28px; outline-offset:6px;
  font-size:13px; line-height:1.2; font-weight:500; letter-spacing:var(--f-espace-etiquette); text-transform:uppercase; color:var(--g-klein);
}
/* Le titre recoit le focus par le script apres le calcul. Pas d'anneau au
   clic ; au clavier (Entree), un anneau Klein arrondi qui epouse l'intitule
   au lieu du cadre noir rectangulaire des bulles blanches (.f-carte-blanche
   de scene.css, plus specifique, d'ou .pc-page). */
.pc-res-titre{ width:fit-content; max-width:100%; }
.pc-page .pc-res-titre:focus{ outline:none; }
.pc-page .pc-res-titre:focus-visible{ outline:2px solid var(--g-klein); outline-offset:4px; border-radius:4px; }
.pc-res-titre::before{
  content:""; flex:none; width:10px; height:10px; border-radius:50%;
  background:var(--g-klein); box-shadow:0 0 0 4px #e8eefb;
}
.pc-res-legende{ margin:0 0 8px; font-size:16px; line-height:1.3; letter-spacing:0; color:var(--f-encre-2); }
/* Taille : celle de la bulle (container), 32 a 60 px ; les bornes ne se
   coupent pas, la ligne se coupe au « a ». */
.pc-fourchette-val{
  margin:0; font-size:clamp(32px, 9cqi, 60px); line-height:1.08; font-weight:500;
  letter-spacing:var(--f-serre); color:var(--g-encre); font-variant-numeric:tabular-nums;
}
@supports not (font-size:1cqi){ .pc-fourchette-val{ font-size:clamp(32px, 4vw, 56px); } }
.pc-fourchette-val span{ color:var(--g-klein); white-space:nowrap; }

.pc-axe{ display:block; margin:32px 0 0; }
.pc-axe-reperes{ position:relative; display:block; height:42px; transition:height .2s var(--pc-courbe); }
.pc-axe-point{
  position:absolute; bottom:0; left:var(--x); display:flex; flex-direction:column; align-items:center; gap:3px;
  transform:translateX(-50%);
}
.pc-axe-point b{ font-size:18px; line-height:1.1; font-weight:500; color:var(--g-encre); white-space:nowrap; font-variant-numeric:tabular-nums; }
.pc-axe-point i{ font-style:normal; font-size:15px; line-height:1.1; color:var(--g-gris); white-space:nowrap; font-variant-numeric:tabular-nums; }
.pc-axe-point--bas{ transform:translateX(-2px); align-items:flex-start; }
.pc-axe-point--haut{ left:auto; right:calc(100% - var(--x)); transform:translateX(2px); align-items:flex-end; }
.pc-axe-point--centre b{ color:var(--g-klein); }
/* La valeur centrale toucherait une borne (median proche du haut, axe
   etroit) : elle monte d'un etage, au-dessus des bornes. Le script en
   decide en mesurant. */
.pc-axe--etage .pc-axe-reperes{ height:88px; }
.pc-axe--etage .pc-axe-point--centre{ bottom:46px; }
/* Les deux bornes se toucheraient (fourchette etroite, axe etroit) :
   chacune s'ecrit du cote exterieur de son trait, retenue au bord de
   l'axe. Le script pose la position, la feuille l'alignement. */
.pc-axe--dehors .pc-axe-point--bas{ align-items:flex-end; }
.pc-axe--dehors .pc-axe-point--haut{ align-items:flex-start; }
.pc-axe-trace{ position:relative; z-index:1; display:block; height:34px; }
.pc-axe-trace::before{ content:""; position:absolute; left:0; right:0; top:50%; height:1px; background:#7d8aa0; }
.pc-axe-barre{
  position:absolute; top:50%; height:14px; margin-top:-7px; border-radius:7px;
  left:var(--de); width:calc(var(--a) - var(--de));
  background:linear-gradient(90deg, #d7e2f2, var(--g-azur));
}
.pc-axe-borne{ position:absolute; top:7px; bottom:7px; left:var(--x); width:2px; margin-left:-1px; border-radius:1px; background:var(--g-encre); }
.pc-axe-centre{ position:absolute; top:0; bottom:50%; left:var(--x); width:2px; margin-left:-1px; background:var(--g-klein); }
.pc-axe-centre::after{
  content:""; position:absolute; top:100%; left:50%; width:14px; height:14px; margin:-7px 0 0 -7px; border-radius:50%;
  background:var(--g-klein); box-shadow:0 0 0 3px var(--f-blanc);
}
.pc-axe-graduations{ position:relative; display:block; height:28px; margin-top:-17px; }
.pc-axe-graduations span{
  position:absolute; top:0; left:var(--x); transform:translateX(-50%); padding-top:12px;
  font-size:14px; line-height:1; color:var(--g-gris); white-space:nowrap; font-variant-numeric:tabular-nums;
}
.pc-axe-graduations span::before{ content:""; position:absolute; top:0; left:50%; width:1px; height:6px; margin-left:-.5px; background:#7d8aa0; }
.pc-axe-graduations span:first-child{ transform:none; }
.pc-axe-graduations span:first-child::before{ left:0; margin-left:0; }
.pc-axe-graduations span:last-child{ transform:translateX(-100%); }
.pc-axe-graduations span:last-child::before{ left:auto; right:0; margin-left:0; }
/* Axe etroit : une graduation sur deux garde son trait et perd son chiffre
   (comme 250 et 350 sur l'offre a 490 EUR, sous 300 px d'axe). */
@container pcf (max-width: 459.98px){
  .pc-axe-graduations .pc-axe-mineure{ visibility:hidden; }
  .pc-axe-graduations .pc-axe-mineure::before{ visibility:visible; }
}

.pc-res-texte{ margin:24px 0 0; font-size:16px; line-height:1.5; letter-spacing:0; color:var(--pc-texte); text-wrap:pretty; }
.pc-res-marge{ margin-top:6px; }
.pc-res-marge:empty{ display:none; }
/* La valeur des titres, dans un creux de papier : un second chiffre, plus
   petit, a l'encre (la fourchette garde seule le Klein). */
.pc-titres{ margin-top:24px; padding:20px 22px; border-radius:12px; background:var(--f-papier-2); }
.pc-titres-val{
  margin:0; font-size:clamp(24px, 6cqi, 36px); line-height:1.1; font-weight:500;
  letter-spacing:var(--f-serre); color:var(--g-encre); font-variant-numeric:tabular-nums;
}
.pc-titres .pc-res-texte{ margin-top:10px; font-size:15px; }

/* L'avertissement : court et visible ; le detail se deplie, sans rien en
   retirer. */
.pc-avert{ margin-top:28px; padding-top:20px; border-top:1px solid var(--g-trait); }
.pc-avert-court{ margin:0; font-size:15px; line-height:1.45; letter-spacing:0; color:var(--f-encre-2); font-weight:500; }
.pc-avert-detail{ margin-top:4px; }
.pc-avert-detail > summary{
  list-style:none; cursor:pointer; -webkit-tap-highlight-color:transparent;
  display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:48px;
  font-size:15px; line-height:1.3; font-weight:500; letter-spacing:0; color:var(--g-klein);
}
.pc-avert-detail > summary::-webkit-details-marker{ display:none; }
.pc-avert-detail > summary::marker{ content:""; }
.pc-avert-corps{ display:grid; gap:10px; padding:4px 0 2px; }
.pc-avert-corps p{ margin:0; font-size:15px; line-height:1.5; letter-spacing:0; color:var(--pc-texte); text-wrap:pretty; }
.pc-avert-corps a{ color:var(--g-klein); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; }

/* La suite : la plaque de prix des offres (offre.css, .go-plaque), une
   seule offre, celle que le visiteur choisit selon ce qu'il evalue (offre
   du 03/10/2026), un seul bouton plein. Le prix de depart porte
   « A partir de » au-dessus du montant (.prix-dep de socle.css : un
   cinquieme du montant, 14 px ici) ; « Sur devis » n'en a pas. */
.pc-suite{ display:flex; flex-direction:column; padding:32px; container:pcs / inline-size; }
.pc-suite-etiquette{
  align-self:flex-start; margin:0; padding:6px 10px; border-radius:999px; background:#eef1f6; color:var(--f-encre-3);
  font-size:12px; line-height:1; font-weight:500; letter-spacing:.2em; text-transform:uppercase;
}
.pc-suite-titre{ margin:18px 0 0; font-size:24px; line-height:1.2; font-weight:500; letter-spacing:var(--f-serre); color:var(--g-encre); }
.pc-plaque{ margin-top:22px; padding-top:20px; border-top:1px solid var(--g-trait); }
.pc-plaque-prix{
  margin:0; font-size:72px; line-height:.95; font-weight:500; letter-spacing:var(--f-serre);
  color:var(--g-encre); white-space:nowrap; font-variant-numeric:tabular-nums;
}
.pc-plaque-prix--mot{ font-size:48px; line-height:1; color:var(--g-klein); }
.pc-plaque-nom{ margin:12px 0 0; font-size:22px; line-height:1.2; font-weight:500; letter-spacing:var(--f-serre); color:var(--g-encre); }
.pc-plaque-pour{ margin:6px 0 0; font-size:16px; line-height:1.4; letter-spacing:0; color:var(--f-encre-2); }
.pc-suite-texte{ margin:16px 0 0; font-size:16px; line-height:1.5; letter-spacing:0; color:var(--pc-texte); text-wrap:pretty; }
/* Le texte de l'offre choisie reste vide tant qu'aucune n'est choisie (brief du 04/10/2026). */
.pc-suite-texte:empty{ display:none; }
.pc-tva{ margin:16px 0 0; padding-top:14px; border-top:1px solid var(--f-filet-encre); font-size:13px; line-height:1.35; letter-spacing:0; color:var(--f-encre-3); }
.pc-suite-boutons{ flex-direction:column; gap:8px; margin-top:20px; }
.pc-suite-boutons .f-bouton{ width:100%; min-height:52px; flex:none; }
.pc-bouton-contour{ background:transparent; color:var(--g-encre); box-shadow:inset 0 0 0 1px rgba(11,29,54,.22); padding:16px 24px; }
@media (hover:hover){ .pc-bouton-contour:hover{ background:rgba(11,29,54,.05); } }
.pc-rassure{ margin:12px 0 0; font-size:13px; line-height:1.35; letter-spacing:0; color:var(--f-encre-3); text-align:center; text-wrap:balance; }

/* Ce que le visiteur evalue, en un geste : un fonds de commerce, une
   entreprise, un groupe ou un cas particulier (data-offre 490, 890,
   devis). Le chiffre d'affaires ne choisit plus l'offre. */
.pc-nature{ margin-top:22px; padding-top:20px; border-top:1px solid var(--g-trait); }
.pc-nature-q{ margin:0 0 10px; font-size:16px; line-height:1.3; font-weight:500; color:var(--g-encre); }
.pc-nature-choix{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:6px; }
.pc-nature-bouton{
  min-height:48px; margin:0; padding:8px 10px; border:0; border-radius:10px; cursor:pointer;
  background:#eef1f6; color:var(--g-encre); -webkit-tap-highlight-color:transparent;
  font:500 15px/1.2 var(--f-police); letter-spacing:-0.01em; text-align:center;
  transition:background-color .2s var(--pc-courbe), color .2s var(--pc-courbe), transform .16s var(--pc-courbe);
}
@media (hover:hover){ .pc-nature-bouton:not([aria-pressed="true"]):hover{ background:#e2e8f3; } }
.pc-nature-bouton[aria-pressed="true"]{ background:var(--g-klein); color:var(--f-blanc); }
.pc-nature-bouton:active{ transform:scale(.97); }

/* =========================================================================
   6. COMMENT LIRE CETTE FOURCHETTE : le duo collant du deroulement
   (scene.css, .f2-section : colonne collante et son voile, pile de cartes).
   ------------------------------------------------------------------------- */
.pc-lire{ margin-top:var(--f-souffle); padding-bottom:var(--f-souffle); }
.pc-carte{ gap:16px; }
.pc-citation{
  margin:0; font-size:clamp(26px, 2.3vw, 34px); line-height:1.2; font-weight:500; letter-spacing:var(--f-serre);
  color:var(--g-encre); text-wrap:balance;
}
.pc-citation-suite{ color:var(--g-klein); }
.pc-carte-texte{ margin:0; font-size:16px; line-height:1.5; letter-spacing:0; color:var(--pc-texte); text-wrap:pretty; }
.pc-carte-note{ margin:0; font-size:15px; line-height:1.5; letter-spacing:0; color:var(--f-encre-3); text-wrap:pretty; }
.pc-carte a, .pc-ligne a, .pc-points a{ color:var(--g-klein); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; }
@media (hover:hover){ .pc-carte a:hover{ text-decoration-thickness:2px; } }
.pc-carte :focus-visible{ outline:2px solid var(--g-klein); outline-offset:2px; border-radius:4px; }

/* =========================================================================
   7. LES LIMITES : bande claire (papier d'Artis)
   Les cartes y prennent l'ombre douce et le filet de scene.css.
   ------------------------------------------------------------------------- */
.pc-limites{ padding:120px 0 128px; }
.pc-bande-tete{ margin-bottom:48px; }
.pc-bande-tete .f-etiquette{ color:var(--f-encre-3); margin-bottom:28px; }
.pc-limites-grille{ display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:20px; align-items:start; }
.pc-lignes{ gap:0; padding-top:12px; padding-bottom:12px; }
.pc-ligne{ border-bottom:1px solid var(--g-trait); }
.pc-ligne:last-child{ border-bottom:0; }
.pc-ligne > summary{
  list-style:none; cursor:pointer; -webkit-tap-highlight-color:transparent;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  min-height:64px; padding:12px 0;
  font-size:18px; line-height:1.3; font-weight:500; letter-spacing:-0.01em; color:var(--g-encre);
}
.pc-ligne > summary::-webkit-details-marker{ display:none; }
.pc-ligne > summary::marker{ content:""; }
.pc-ligne > p{ margin:0; padding:0 48px 20px 0; font-size:16px; line-height:1.55; letter-spacing:0; color:var(--pc-texte); text-wrap:pretty; }
.pc-ligne :focus-visible, .pc-affiner :focus-visible, .pc-avert-detail :focus-visible{ outline:2px solid var(--g-klein); outline-offset:2px; border-radius:6px; }
/* Trois points de lecture : numeros Klein, filets fins (la liste numerotee
   du gabarit, .k-liste--num). */
.pc-points{ list-style:none; counter-reset:pc; margin:0; padding:0; display:grid; }
.pc-points li{
  counter-increment:pc; display:grid; grid-template-columns:36px minmax(0,1fr); column-gap:8px;
  padding:16px 0; border-top:1px solid var(--g-trait);
  font-size:16px; line-height:1.5; letter-spacing:0; color:var(--pc-texte); text-wrap:pretty;
}
.pc-points li:first-child{ border-top:0; padding-top:4px; }
.pc-points li::before{ content:counter(pc, decimal-leading-zero); font-size:14px; line-height:1.7; font-weight:500; color:var(--g-klein); }

/* =========================================================================
   8. UNE EVALUATION SUR VOTRE DOSSIER : la bande marine
   Celle du « contenu du rapport » de l'accueil (.f-bande--marine) : la
   planche de synthese en rangee (accueil.css, .f-rang), puis le rapport
   complet et les honoraires, puis « Pour aller plus loin » (.f1-reperes de
   scene.css, filets et pastilles blancs).
   ------------------------------------------------------------------------- */
.pc-dossier{ padding:120px 0; }
.pc-dossier-tete{ margin-bottom:24px; }
.pc-dossier-tete .f-chapo{ line-height:1.4; color:var(--f-texte); }
.pc-dossier-tete .f-etiquette{ margin-bottom:28px; }
.pc-rang{ min-height:0; padding:24px 0; }
.pc-rang .f-rang-texte{ padding-left:0; }
.pc-dossier-suite{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,600px); gap:40px 72px; align-items:center; margin-top:72px;
}
.pc-complet .f-titre-carte{ color:var(--f-texte); }
.pc-complet .f-texte{ margin-top:16px; max-width:560px; color:var(--f-texte-aplat); }
.pc-complet .f-boutons{ margin-top:28px; }
.pc-complet-note{ margin:20px 0 0; font-size:15px; line-height:1.5; letter-spacing:0; color:rgba(255,255,255,.78); }
.pc-complet-note a{ color:var(--f-texte); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; }
@media (hover:hover){ .pc-complet-note a:hover{ text-decoration-thickness:2px; } }
.pc-dossier :focus-visible{ outline:2px solid var(--f-texte); outline-offset:3px; border-radius:4px; }

/* La bulle des honoraires (bloc ecrit par outils/construire-offre.py,
   classes k- et pv- des pages sur le bleu) : une bulle blanche, les trois
   montants en lignes, la mention de TVA et le bouton en pied. */
.pc-dossier .pv-honoraires{
  margin:0; padding:32px; border-radius:var(--pc-r); background:var(--f-blanc); color:var(--g-encre);
  letter-spacing:-0.01em;
}
.pc-dossier .pv-honoraires :focus-visible{ outline-color:var(--g-klein); }
.pc-dossier .k-bulle-etiquette{
  margin:0 0 8px; font-size:12px; line-height:1.3; font-weight:500; letter-spacing:var(--f-espace-etiquette);
  text-transform:uppercase; color:var(--f-encre-3);
}
.pc-dossier .k-offre-prix{ list-style:none; margin:0; padding:0; display:grid; }
.pc-dossier .k-offre-prix li{
  display:grid; grid-template-columns:150px minmax(0,1fr); column-gap:20px; align-items:baseline;
  padding:16px 0; border-top:1px solid var(--g-trait);
}
.pc-dossier .k-offre-prix li:first-child{ border-top:0; }
.pc-dossier .k-offre-montant{ font-size:40px; line-height:1; font-weight:500; letter-spacing:var(--f-serre); color:var(--g-encre); white-space:nowrap; font-variant-numeric:tabular-nums; }
.pc-dossier .k-offre-montant--mot{ font-size:26px; color:var(--g-klein); }
.pc-dossier .k-offre-pour{ font-size:15px; line-height:1.4; letter-spacing:0; color:var(--f-encre-2); }
.pc-dossier .k-offre-pour b{ display:block; margin-bottom:2px; font-size:17px; font-weight:500; letter-spacing:-0.01em; color:var(--g-encre); }
.pc-dossier .pv-honoraires-pied{ margin-top:4px; padding-top:16px; border-top:1px solid var(--g-trait); }
.pc-dossier .k-bulle-note{ margin:0; font-size:13px; line-height:1.4; letter-spacing:0; color:var(--f-encre-3); }
.pc-dossier .pv-boutons-bulle{ margin-top:16px; }

.pc-lectures{ margin-top:120px; padding:0; }
.pc-lectures a > span:first-child{ min-width:0; text-wrap:pretty; }
.pc-lectures .f-pastille{ flex:none; }

/* Apres la bande marine, l'appel final de l'accueil (.f3-appel, scene.css)
   porte lui-meme le souffle de scene (260 px au-dessus du titre) : plus de
   marge sous main, qui laissait 240 px de scene vide avant l'arc du pied. */

/* =========================================================================
   9. TABLETTE
   ------------------------------------------------------------------------- */
@media (max-width: 1199px){
  .pc-tete-grille{ grid-template-columns:minmax(0,1fr) minmax(0,560px); column-gap:48px; }
  .pc-dossier-suite{ grid-template-columns:minmax(0,1fr); }
  .pc-dossier .pv-honoraires{ max-width:720px; }
}
/* Une colonne : le titre, puis le calculateur, pleine largeur jusqu'a
   720 px. Le titre ne colle plus. */
@media (max-width: 1023px){
  .pc-tete{ padding-top:128px; }
  .pc-tete-grille{ grid-template-columns:minmax(0,1fr); row-gap:40px; }
  .pc-tete-texte{ position:relative; bottom:auto; align-self:start; max-width:720px; }
  .pc-calc{ max-width:720px; }
}
@media (max-width: 1100px) and (min-width: 761px){
  .pc-dossier-tete{ grid-template-columns:minmax(0,1fr); gap:24px; align-items:start; }
}
@media (max-width: 899px){
  .pc-resultat-grille, .pc-limites-grille{ grid-template-columns:minmax(0,1fr); }
  .pc-resultat-grille{ max-width:720px; }
}

/* =========================================================================
   10. TELEPHONE
   ------------------------------------------------------------------------- */
@media (max-width: 760px){
  .pc-tete{ padding-top:104px; }
  .pc-tete-grille{ row-gap:28px; }
  /* Le voile, en portrait : plein sous tout le texte, fondu au-dessus et
     dessous, et pas plus large que l'ecran (regle 1 des voiles). */
  .pc-tete-texte::before{
    inset:-40px calc(-1 * var(--f-gouttiere)) -32px;
    background:radial-gradient(130% 80% at 40% 50%, rgba(var(--f-voile),.46) 0, rgba(var(--f-voile),.42) 55%, rgba(var(--f-voile),.16) 82%, rgba(var(--f-voile),0) 100%);
  }
  .pc-fil{ margin:-12px 0 8px; }
  .pc-sur{ margin-bottom:16px; }
  .pc-h1{ font-size:clamp(32px, 9vw, 40px); line-height:1.06; }
  .pc-chapo{ margin-top:18px; }

  .pc-bulle{ padding:24px 18px 20px; border-radius:16px; }
  .pc-form{ gap:24px; }
  .pc-label{ font-size:17px; column-gap:10px; }
  .pc-label--petit{ font-size:16px; }
  .pc-lien{ font-size:16px; }
  .pc-ebitda{ padding:14px 12px; }

  .pc-resultat{ padding-top:64px; }
  .pc-page #calcRes{ scroll-margin-top:-48px; }
  .pc-resultat-grille{ gap:12px; }
  .pc-suite{ padding:24px 18px 20px; }
  .pc-plaque-prix{ font-size:64px; }
  .pc-plaque-prix--mot{ font-size:44px; }
  .pc-suite-titre{ font-size:22px; }

  .pc-limites{ padding:72px 0 80px; }
  .pc-bande-tete{ margin-bottom:28px; }
  .pc-bande-tete .f-etiquette, .pc-dossier-tete .f-etiquette{ margin-bottom:16px; }
  .pc-limites-grille{ gap:12px; }
  .pc-ligne > summary{ font-size:17px; min-height:60px; }
  .pc-ligne > p{ padding-right:0; }

  .pc-dossier{ padding:72px 0 80px; }
  .pc-rang{ padding:24px 0 0; gap:20px; }
  .pc-dossier-suite{ margin-top:48px; gap:32px; }
  .pc-dossier .pv-honoraires{ padding:24px 18px 20px; border-radius:16px; }
  .pc-dossier .k-offre-prix li{ grid-template-columns:minmax(0,1fr); row-gap:6px; padding:14px 0; }
  .pc-dossier .k-offre-montant{ font-size:36px; }
  .pc-dossier .k-offre-montant--mot{ font-size:26px; }
  .pc-dossier .pv-boutons-bulle .f-bouton{ flex:1 1 100%; }
  .pc-complet .f-boutons .f-bouton{ flex:1 1 100%; }
  .pc-lectures{ margin-top:72px; }
}
/* Petits telephones : les trois choix s'empilent, la liste garde sa
   fleche et son texte. */
@media (max-width: 359px){
  .pc-nature-choix{ grid-template-columns:minmax(0,1fr); }
  .pc-res-titre, .pc-suite-etiquette{ letter-spacing:.12em; }
  .pc-select select{ font-size:17px; padding-left:12px; }
  .pc-saisie input{ padding-left:12px; }
  .pc-plaque-prix{ font-size:56px; }
}
/* Les trois choix cote a cote tant que chacun garde au moins 136 px : en
   dessous (bulle de moins de 420 px de contenu, de 900 a 1199 px d'ecran
   et au telephone), « Un groupe ou un cas particulier » passait sur trois
   lignes ; ils s'empilent, un par ligne. */
@container pcs (max-width: 420px){
  .pc-nature-choix{ grid-template-columns:minmax(0,1fr); }
}

/* =========================================================================
   11. MOUVEMENT REDUIT ET IMPRESSION
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  .pc-plus::before, .pc-plus::after, .pc-nature-bouton, .pc-axe-reperes,
  .pc-saisie input, .pc-select select{ transition:none !important; }
  .pc-nature-bouton:active, .pc-calculer:active{ transform:none; }
}
@media print{
  .pc-tete-texte{ position:static; }
  .pc-tete-texte::before{ display:none; }
  .pc-affiner-corps, .pc-avert-corps{ display:grid !important; }
}

/* =========================================================================
   12. 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 62, 63, 70, 71, 75 a 77, 83,
   175, 214 et 218). Tout le contenu reste affiche a sa place, rien n'est
   masque, replie ni deplace : seuls changent les espacements, les tailles
   et les alignements. C'etait la premiere passe. La seconde passe,
   section 13, masque la planche du dossier et deplace les honoraires et
   le lien du referentiel. A partir de 761 px, rien ne change. Les jetons sont
   poses sur main : le pied et le bandeau de consentement restent ceux des
   autres pages.
   ------------------------------------------------------------------------- */
@media (max-width: 760px){
  /* Le rythme (constats 62 et 214) : scene de 64 px entre deux blocs au
     lieu de 120 (avant et apres la lecture de la fourchette), bandes des
     limites et du dossier en 64 px en haut et en bas au lieu de 72 et 80,
     appel final en 72 et 96 px au lieu de 120 et 160. */
  .pc-page main{ --f-souffle:64px; }
  .pc-limites{ padding:64px 0; }
  .pc-dossier{ padding:64px 0; }
  .pc-page .f3-appel{ padding:72px 0 96px; }

  /* Les etiquettes en capitales en 13 px et 0,22 em (constat 83), celle
     des honoraires comprise. Les boutons empiles a 8 px l'un de l'autre
     au lieu de 4 (constat 175). */
  .pc-page main{ --f-t-etiquette:13px; --f-espace-etiquette:.22em; --f-ecart-entre-boutons:8px; }
  .pc-dossier .k-bulle-etiquette{ font-size:13px; }

  /* Les chapos (constat 63) : le chapo de la tete, premier texte lu par
     un visiteur venu d'une annonce, et celui du dossier, justifies sur
     353 px, ouvraient des blancs de 9 et 10 px pour une espace de 4,3 px
     et coupaient « indica-tif », « carac-teristiques », « d'en-treprise ».
     Tous les chapos de la page au fer a gauche, sans cesure automatique,
     en 17 px sur 1,5 (l'interligne de socle.css, section 13, est pose
     avec !important : battu de meme, sur ces seuls chapos). */
  .pc-page main{ --f-t-chapo:17px; }
  .pc-page main .f-chapo{
    text-align:left; text-align-last:auto; -webkit-hyphens:manual; hyphens:manual;
    line-height:1.5 !important;
  }

  /* « Comment lire cette fourchette ? » (constat 71) : le titre et le
     chapo etaient centres (le dessin des duos de l'accueil), seuls de la
     page. Au fer a gauche, comme le formulaire et les autres sections. */
  .pc-lire .f2-colle{ align-items:flex-start; text-align:left; }

  /* Le titre de l'appel final (constat 70) : cinq lignes de 40 px (210 px
     de haut), six a 375 et a 320 px, le plus haut du site. L'audit
     proposait 32 px pour quatre lignes : mesure faite, la phrase garde
     cinq lignes a 32 px comme a 34 px (« valeur de votre entreprise, » ne
     tient pas sur une ligne de 353 px). 34 px, la taille que le lot 7 de
     l'audit vise pour tous les appels finaux, sur l'interligne des titres
     d'affiche : cinq lignes et 178 px a 393 et a 375 px, six et 214 px a
     320 px. Le bouton remonte de 40 a 82 px selon l'ecran. */
  .pc-page .f3-appel-titre{ font-size:34px; }

  /* Le formulaire (constat 76). Les aides sous les champs en 13 px. Le
     sommaire replie de la dette et de la tresorerie occupait 136 px : le
     titre sur deux lignes, la pastille « facultatif » seule sur une
     troisieme, la precision dessous. Le titre se compose en ligne, la
     pastille suit son dernier mot. La precision reste visible, dessous.
     La description ne passe pas dans le contenu deplie : elle serait
     masquee tant que le sommaire est ferme. */
  .pc-aide{ font-size:13px; }
  .pc-affiner > summary{ min-height:56px; padding:10px 0; }
  .pc-affiner-titre{ display:block; }
  .pc-affiner-titre .pc-facultatif{ margin-left:4px; vertical-align:1px; }

  /* Le fil d'Ariane (constat 218) : celui des autres pages (.k-fil de
     pages.css, repris sur la scene par p-methode.css) en 13 px, sans
     soulignement, separateurs a 8 px, la page courante a 86 % de blanc.
     Les liens gardent leurs 44 px au toucher. */
  .pc-fil{ font-size:13px; line-height:20px; letter-spacing:.02em; color:rgba(255,255,255,.86); }
  .pc-fil li + li::before{ margin:0 8px; opacity:.7; }
  .pc-fil a{ text-decoration:none; }
}
/* L'erreur au toucher (constat 77) : un champ fautif qui recoit le focus
   portait a la fois son trait rouge et l'anneau de focus Klein de 2 px,
   un double cadre lourd. Au doigt, sur un champ en erreur, le trait rouge
   et le fond blanc du champ actif suffisent a le designer. Avec une souris,
   ou au-dela de 760 px, l'anneau reste. Le message global (#calcErr) est deja
   hors de l'ecran (.sr-only) : seul le message sous le champ se lit. */
@media (max-width: 760px) and (pointer: coarse){
  .pc-saisie input[aria-invalid="true"]:focus-visible, .pc-select select[aria-invalid="true"]:focus-visible{ outline:none; }
}

/* =========================================================================
   13. TELEPHONE : LA SECONDE PASSE
   Seconde passe telephone, delegation de Raphael (09/10/2026, audit du
   8 octobre, constats 69, 75 et 76), sous 760 px seulement. A partir de
   761 px, rien ne change.
   - La planche de la bande « Une evaluation sur votre dossier » (constat
     69) : la synthese du cas fictif, dessinee a 1 200 px, affichee a
     353 px, son texte a 3 px. Elle est masquee, elle reste dans la page.
     « Une fourchette de valeur expliquee » et son texte restent, le lien
     « parcourir un exemple complet » aussi, plus bas.
   - Les honoraires (constat 75), la reponse attendue apres un resultat,
     passent juste apres « Une fourchette de valeur expliquee », avant « Le
     rapport complet, methode par methode ». 32 px au-dessus de la bulle
     au lieu de 48 : elle suit un texte de deux lignes, non plus la
     planche. Depuis l'audit UI/UX du 9 octobre (point A04, 10/10/2026),
     ce n'est plus un order de la grille, qui laissait le clavier et le
     lecteur d'ecran lire la bulle apres le rapport complet : le script en
     fin de calculateur.html deplace le noeud lui-meme (voir la section
     14). Le fichier source (bloc OFFRE ecrit par
     outils/construire-offre.py) ne change pas.
   - Le lien du referentiel sectoriel (constat 76) : l'aide du secteur
     passe sous le bouton « Calculer » (script en fin de calculateur.html,
     le noeud est deplace) et prend le dessin de la note qui la precede,
     centree, en 13 px comme les autres aides.
   - 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 planche, ses
     honoraires et son aide a leur place, comme avant.
   ------------------------------------------------------------------------- */
@media screen and (max-width: 760px){
  .pc-dossier .pc-rang .f1-rang-image{ display:none; }
  .pc-dossier .pc-dossier-suite{ margin-top:32px; }
  .pc-actions > .pc-aide{ text-align:center; }
}

/* =========================================================================
   14. L'AUDIT UI/UX DU 9 OCTOBRE 2026 (10/10/2026)
   - Point A04, l'ordre de lecture. A 760 px et moins, la bulle des
     honoraires passe avant « Le rapport complet, methode par methode »
     par un deplacement du noeud (script en fin de calculateur.html,
     matchMedia suivi au changement), et non plus par order (section 13).
     Le clavier et le lecteur d'ecran suivent l'ordre vu. A 761 px et
     plus, le noeud revient exactement a sa place d'origine, apres le
     rapport complet, dans la meme grille. Sans script, la bulle reste a sa
     place du balisage, apres le rapport complet. Le focus et les
     identifiants ne bougent pas. Aucune regle ici : la mise en page est
     celle de la grille d'une colonne, la meme qu'avec order.
   - Point A13, l'echo des montants (section 4) : 13 px au telephone,
     comme les aides de la section 12.
   ------------------------------------------------------------------------- */
@media (max-width: 760px){
  .pc-echo{ font-size:13px; }
}