/* =========================================================================
   ARTIS VALORISATION, REFONTE : LA PAGE D'OFFRE A 490 EUR (offre-490.css)
   Adresse definitive : /evaluation-fonds-de-commerce. Apres offre.css.
   Installee le 30/09/2026 depuis l'essai g-offre-490.css, sans changement
   de regle ; les noms de fichiers cites dans les commentaires suivent.
   Reference du systeme : REFONTE-GABARIT.md.
   ------------------------------------------------------------------------- */

/* =========================================================================
   ESSAI G. LA PAGE D'OFFRE A 490 EUR (_essai-offre-490.html)
   Se pose apres socle.css et scene.css (jetons, barre, scene, deroulement f2-,
   questions, appel final et pied f3-), rapport-vitrine.css (le lecteur
   d'extraits) et offre.css (en-tete, plaque du prix, chiffres,
   bulle de la mission, onglets, barre au telephone : communs aux trois
   pages d'offre). Ici, ce qui n'appartient qu'a cette page : prefixe
   g490-, ou scope sous .g490.
   Roles des fonds (clarte du 30/09/2026) :
   - scene : en-tete, deroulement, « avant d'evaluer », appel final ;
   - bulles blanches sur la scene : plaque du prix, mission, etapes, garde,
     fiches ;
   - papier d'Artis #F6F7FA : ce que le rapport examine et le lecteur,
     l'exemple chiffre, les questions et les lectures. Plus aucune bande
     marine sur cette page (le marine reste a « Le contenu du rapport »,
     accueil et page 990).
   Mobile d'abord pour les mesures : 393 px, gouttieres de 20 px, cibles de
   44 px, texte courant de 16 px au moins.
   ------------------------------------------------------------------------- */

.g490{
  --g490-papier:#F6F7FA;
  --g490-texte-blanc:#26324a;   /* texte courant sur blanc (12,6:1) */
  --g490-courbe:cubic-bezier(.23,1,.32,1);
}

/* ---------- 1. LES BANDES ------------------------------------------------------ */
.g490-entete{ display:grid; justify-items:start; gap:0; margin-bottom:56px; }
.g490-entete .f-etiquette{ margin-bottom:28px; }
.g490-entete .f-chapo{ margin-top:16px; line-height:1.4; }
.g490-entete .f-titre-section{ max-width:900px; }
.g490-entete--centre{ justify-items:center; text-align:center; }
.g490-rapport{ padding:var(--f-bande-haut) 0 var(--f-entre-bande); }
@media (max-width: 760px){
  .g490-entete{ margin-bottom:32px; }
  .g490-entete .f-etiquette{ margin-bottom:16px; }
  /* Audit telephone du 8 octobre (09/10/2026, lot 2) : la bande de
     « Ce que le rapport examine » s'ouvre a 64 px au lieu de 100 et se
     ferme a 64 au lieu de 120. L'en-tete centre de « Avant d'evaluer ou
     de ceder un fonds » passe au fer a gauche, comme les autres titres de
     section de la page. */
  .g490-rapport{ padding:64px 0 64px; }
  .g490-entete--centre{ justify-items:start; text-align:start; }
}

/* Les huit points : cartes blanches de meme hauteur, sans numero. */
.g490-points{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px; }
.g490-point{
  display:flex; flex-direction:column; gap:12px; margin:0;
  padding:28px 24px; border-radius:14px; color:var(--g-encre);
  box-shadow:var(--f-ombre-douce), inset 0 0 0 1px var(--f-filet-encre);
  letter-spacing:-0.01em;
}
/* Sur le papier, le filet Klein des cartes du contenu du rapport (990). */
.g490-point::before{ content:""; width:32px; height:3px; border-radius:2px; background:var(--g-klein); margin-bottom:4px; }
.g490-point h3{ margin:0; font-size:20px; line-height:1.25; font-weight:500; letter-spacing:var(--f-serre); }
.g490-point p{ margin:0; font-size:16px; line-height:1.5; color:var(--f-encre-2); text-wrap:pretty; }
@media (max-width: 1100px){ .g490-points{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width: 760px){
  .g490-points{ grid-template-columns:minmax(0,1fr); gap:10px; }
  .g490-point{ padding:20px; gap:8px; }
  .g490-point h3{ font-size:18px; }
}

/* ---------- 2. LE LECTEUR D'EXTRAITS ------------------------------------------
   Le composant commun (rapport-vitrine.css, offre.css), dans la bande :
   l'avertissement et le bouton au-dessus, le cadre dessous. */
.g490-planches{ margin-top:140px; }
.g490-planches-tete{ margin-bottom:0; }
.g490-planches-tete .f-chapo{ line-height:1.4; color:var(--f-encre-2); }
.g490-planches-tete .f-etiquette{ display:block; margin-bottom:24px; }
/* Le cadre a la largeur qu'il a dans le panneau des pages 990 et sur devis :
   la planche y mesure 920 px a 1440, comme chez elles. */
.g490 .go-rapport-cadre{ max-width:1296px; margin-inline:auto; }
@media (max-width: 760px){
  .g490-planches{ margin-top:56px; }   /* 80 jusqu'au 09/10/2026 (audit telephone, vides) */
  .g490-planches-tete{ gap:20px; }
  .g490-planches-tete .f-boutons .f-bouton{ width:100%; }
}

/* ---------- 3. L'EXEMPLE CHIFFRE : bande claire ----------------------------------
   f-carte-blanche sur la section : la barre prend son verre dense au-dessus
   (socle.js), et les anneaux de focus passent au noir. */
.g490 .g490-clair{ background:var(--g490-papier); color:var(--g-encre); padding:120px 0 128px; }
.g490-entete--clair .f-titre-section{ color:var(--g-encre); }
.g490-entete--clair .f-chapo{ color:var(--g490-texte-blanc); max-width:720px; }
.g490-schema{ display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:20px; align-items:stretch; }
.g490-temps-colonne{ display:grid; gap:20px; grid-template-rows:auto 1fr; }
/* Les deux colonnes finissent ensemble : la carte des retraitements prend la
   hauteur de la colonne de droite, et ses cinq pas se repartissent dans
   cette hauteur au lieu de laisser un vide blanc sous la cascade. */
.g490-temps--cascade{ display:flex; flex-direction:column; }
.g490-temps--cascade .g490-cascade{ flex:1 1 auto; align-content:space-between; }
.g490-temps{
  margin:0; padding:32px; border-radius:16px; background:var(--f-blanc);
  box-shadow:0 1px 0 rgba(11,29,54,.04), 0 0 0 1px var(--g-trait);
}
.g490-temps-tete{
  display:flex; align-items:center; gap:10px; margin:0 0 24px;
  font-size:13px; line-height:1; font-weight:500; letter-spacing:var(--f-espace-etiquette); text-transform:uppercase; color:var(--g-klein);
}
.g490-temps-no{
  display:grid; place-items:center; width:26px; height:26px; border-radius:50%;
  background:var(--g-klein); color:var(--f-blanc); font-size:13px; letter-spacing:0;
}
.g490-temps-texte{ margin:20px 0 0; font-size:16px; line-height:1.5; color:var(--g490-texte-blanc); text-wrap:pretty; }
.g490-temps-texte strong{ font-weight:500; color:var(--g-encre); }

/* La cascade : chaque pas sur une rangee (nom et note / piste / montant).
   Echelle : 0 a 90 k€. Le fantome montre le niveau atteint avant le pas. */
.g490-cascade{ list-style:none; margin:0; padding:0; display:grid; gap:18px; }
.g490-pas{
  --g490-echelle:90;
  display:grid; grid-template-columns:minmax(0,240px) minmax(0,1fr) 136px;
  grid-template-areas:"nom piste val" "note piste val";
  column-gap:20px; row-gap:2px; align-items:center;
}
.g490-pas-nom{ grid-area:nom; margin:0; font-size:16px; line-height:1.3; font-weight:500; align-self:end; }
.g490-pas-note{ grid-area:note; margin:0; font-size:16px; line-height:1.35; color:var(--g-gris); align-self:start; }
.g490-pas-val{ grid-area:val; margin:0; font-size:17px; line-height:1.25; font-weight:500; text-align:right; font-variant-numeric:tabular-nums; }
.g490-piste{ grid-area:piste; position:relative; height:32px; border-radius:6px; }
.g490-barre, .g490-fantome{
  position:absolute; top:0; bottom:0; border-radius:5px;
  left:calc(var(--de) / var(--g490-echelle) * 100%);
  width:calc((var(--a) - var(--de)) / var(--g490-echelle) * 100%);
  transform-origin:left center;
  transition:transform .6s var(--g490-courbe), opacity .4s;
}
.g490-fantome{ left:0; width:calc(var(--de) / var(--g490-echelle) * 100%); background:#e3e8f0; }
.g490-pas--total .g490-barre{ background:var(--g-encre); }
.g490-pas--normatif .g490-barre{ background:var(--g-klein); }
.g490-pas--normatif .g490-pas-nom, .g490-pas--normatif .g490-pas-val{ color:var(--g-klein); }
.g490-pas--plus .g490-barre{ background:var(--g-azur); }
.g490-pas--moins .g490-barre{ background:repeating-linear-gradient(135deg, #9aa8bd 0 2px, #d5dce7 2px 7px); box-shadow:inset 0 0 0 1px #9aa8bd; }
.g490-pas--moins .g490-pas-val{ color:var(--g-gris); }
.g490-pas--normatif{ padding-top:18px; border-top:1px solid var(--g-trait); }
/* Entree : les barres s'allongent, une fois, pas a pas (offre-490.js pose
   .g490-cascade--attente tant que le schema est sous la fenetre). */
.g490-cascade--attente .g490-barre{ transform:scaleX(0); }
.g490-cascade--attente .g490-fantome{ opacity:0; }
.g490-cascade .g490-pas:nth-child(2) .g490-barre{ transition-delay:.12s; }
.g490-cascade .g490-pas:nth-child(3) .g490-barre{ transition-delay:.24s; }
.g490-cascade .g490-pas:nth-child(4) .g490-barre{ transition-delay:.36s; }
.g490-cascade .g490-pas:nth-child(5) .g490-barre{ transition-delay:.48s; }

/* La fourchette : un axe gradue, dessine d'apres la bande des planches de
   prospection (fourchette en tres grand, barre en degrade entre les deux
   bornes, valeurs au-dessus, graduations fines dessous). Bulle blanche et
   axe Klein : le marine reste au « contenu du rapport ».
   L'echelle va de 200 a 400 k€ et non de 0 : partie de 0, la barre ne
   couvrait que 42 % de la largeur et, a 320 px, les trois valeurs se
   chevauchaient (51 px d'ecart pour des etiquettes de 56 px). La barre est
   flottante, sa longueur ne se compare a rien : l'echelle tronquee ne
   trompe pas, et la premiere graduation dit ou elle commence.
   Une position se calcule une fois : --v dans l'echelle --min/--max. */
/* La bulle est le conteneur de requete : la fourchette et les graduations
   se reglent sur sa largeur, pas sur celle de l'ecran. De 761 a 1 100 px,
   les deux bulles se partagent la rangee : a 768, la bulle n'a que 270 px
   de contenu pour un ecran large, et une taille en vw (60 px) coupait
   « 210 a 378 k€ » sur deux lignes (bulle de 383 a 467 px de haut). */
.g490-temps--fourchette{ container:fourchette / inline-size; }
/* Taille : celle de l'ecran (11vw, 40 a 60 px) tant qu'elle tient, plafonnee
   a 16cqi : le texte mesure 5,58 em, il occupe alors au plus 90 % de la
   bulle. Telephone et ordinateur gardent leur taille (43 px a 393, 60 px a
   1 440) ; de 761 a 890 px, elle descend a 43 a 53 px, sur une ligne. La
   premiere declaration sert aux navigateurs sans unites de conteneur. */
.g490-fourchette-val{ margin:0; font-size:clamp(40px, 11vw, 60px); font-size:clamp(40px, min(11vw, 16cqi), 60px); line-height:1; font-weight:500; letter-spacing:var(--f-serre); color:var(--g-encre); font-variant-numeric:tabular-nums; }
@supports not (font-size:1cqi){
  @media (min-width: 761px) and (max-width: 1199px){ .g490-fourchette-val{ font-size:44px; } }
}
.g490-fourchette-val span{ color:var(--g-klein); }
.g490-axe{
  --min:200; --max:400;
  display:block; margin:30px 0 0;
}
/* --x se declare sur chaque element qui porte --v : une propriete
   personnalisee se resout la ou elle est ecrite, et --v n'existe pas sur
   .g490-axe. */
.g490-axe [style*="--v"]{ --x:calc((var(--v) - var(--min)) / (var(--max) - var(--min)) * 100%); }
/* Les valeurs au-dessus de leur point, comme les bornes de la planche ; le
   multiple dessous, en gris, avant la barre. Les bornes s'alignent sur le
   bout de la barre (a 5 % du bord, centree, 210 k€ sortirait de la carte),
   la valeur centrale se centre sur son repere. */
.g490-axe-reperes{ position:relative; display:block; height:42px; }
.g490-axe-point{ position:absolute; bottom:0; left:var(--x); display:flex; flex-direction:column; gap:3px; transform:translateX(-50%); align-items:center; }
/* Montants en 500, la graisse la plus forte du gabarit (600 auparavant) ;
   la hierarchie avec les multiples tient par la taille (18 contre 15 px) et
   la couleur (encre ou Klein contre gris). */
.g490-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; }
.g490-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; }
.g490-axe-point--bas{ transform:translateX(-2px); align-items:flex-start; }
.g490-axe-point--haut{ left:auto; right:calc(100% - var(--x)); transform:translateX(2px); align-items:flex-end; }
.g490-axe-point--centre b{ color:var(--g-klein); }
/* La trace : un filet d'axe sur toute la largeur, la barre posee dessus.
   Elle passe au-dessus des graduations : leurs traits ne se voient qu'hors
   de la barre, comme sur la planche, au lieu de la rayer. */
.g490-axe-trace{ position:relative; z-index:1; display:block; height:34px; }
.g490-axe-trace::before{ content:""; position:absolute; left:0; right:0; top:50%; height:1px; background:#7d8aa0; }
.g490-axe-barre{
  position:absolute; top:50%; height:14px; margin-top:-7px; border-radius:7px;
  left:calc((var(--de) - var(--min)) / (var(--max) - var(--min)) * 100%);
  width:calc((var(--a) - var(--de)) / (var(--max) - var(--min)) * 100%);
  background:linear-gradient(90deg, #d7e2f2, var(--g-azur));
}
/* Bornes : deux traits encre aux bouts de la barre, pour que les extremites
   se lisent au-dela du degrade clair (le degrade seul tombe a 1,4:1). */
.g490-axe-borne{ position:absolute; top:7px; bottom:7px; left:var(--x); width:2px; margin-left:-1px; border-radius:1px; background:var(--g-encre); }
/* La valeur centrale : une epingle Klein, du multiple jusqu'a la barre, et
   une pastille cerclee de blanc, le seul accent fort du graphique. Le trait
   s'arrete au centre : prolonge dessous, il touchait la graduation 300. */
.g490-axe-centre{ position:absolute; top:0; bottom:50%; left:var(--x); width:2px; margin-left:-1px; background:var(--g-klein); }
.g490-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); }
/* Graduations : une echelle, pas une donnee. Petites, grises, un trait fin
   sous l'axe ; la premiere et la derniere s'alignent sur les bords. */
.g490-axe-graduations{ position:relative; display:block; height:28px; margin-top:-17px; }
.g490-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;
}
.g490-axe-graduations span::before{ content:""; position:absolute; top:0; left:50%; width:1px; height:6px; margin-left:-.5px; background:#7d8aa0; }
.g490-axe-graduations span:first-child{ transform:none; }
.g490-axe-graduations span:first-child::before{ left:0; margin-left:0; }
.g490-axe-graduations span:last-child{ transform:translateX(-100%); }
.g490-axe-graduations span:last-child::before{ left:auto; right:0; margin-left:0; }
/* Sur un axe etroit, 250 et 350 gardent leur trait mais perdent leur
   chiffre : a 320 px, « 350 » touchait « 400 k€ » ; a 768 px (bulle de
   270 px de contenu), ils n'etaient qu'a 9 px l'un de l'autre. Sous 300 px
   d'axe, l'ecart tombe sous 16 px : la regle suit la bulle (761 a 827 px,
   telephones de moins de 376 px) ; la requete d'ecran reste pour les
   navigateurs sans requetes de conteneur. */
@media (max-width: 360px){
  .g490-axe-graduations .g490-axe-mineure{ visibility:hidden; }
  .g490-axe-graduations .g490-axe-mineure::before{ visibility:visible; }
}
@container fourchette (max-width: 299.98px){
  .g490-axe-graduations .g490-axe-mineure{ visibility:hidden; }
  .g490-axe-graduations .g490-axe-mineure::before{ visibility:visible; }
}

.g490-lecture-val{ margin:0; font-size:64px; line-height:1; font-weight:500; letter-spacing:var(--f-serre); color:var(--g-klein); font-variant-numeric:tabular-nums; }
.g490-mention{ margin:28px 0 0; font-size:16px; line-height:1.45; color:var(--g-gris); }
.g490-mention a{ color:var(--g-klein); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; }
@media (hover:hover){ .g490-mention a:hover{ text-decoration-thickness:2px; } }

@media (max-width: 1100px){
  .g490-schema{ grid-template-columns:minmax(0,1fr); }
  .g490-temps-colonne{ grid-template-columns:repeat(2, minmax(0,1fr)); grid-template-rows:none; }
}
@media (max-width: 760px){
  /* Audit telephone du 8 octobre (09/10/2026, vides) : la bande suit
     celle du rapport, sur le meme papier, 48 px en haut et 64 en bas au
     lieu de 72 et 80. */
  .g490 .g490-clair{ padding:48px 0 64px; }
  .g490-temps{ padding:22px 18px; }
  .g490-temps-colonne{ grid-template-columns:minmax(0,1fr); gap:12px; }
  .g490-schema{ gap:12px; }
  .g490-pas{ grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"nom val" "piste piste" "note note"; row-gap:8px; column-gap:12px; }
  .g490-pas-nom{ align-self:baseline; }
  .g490-pas-val{ align-self:baseline; font-size:16px; }
  .g490-piste{ height:24px; }
  .g490-pas-note{ font-size:16px; }
  .g490-cascade{ gap:22px; }
  .g490-lecture-val{ font-size:52px; }
}

/* ---------- 4. LE DEROULEMENT -------------------------------------------------- */
.g490-deroulement{ padding-top:var(--f-souffle); }

/* ---------- 5. CE QU'IL FAUT SAVOIR : bulles blanches sur la scene sombre ------ */
.g490-savoir{ padding:var(--f-entre-duos) 0 var(--f-souffle); }
/* Audit telephone du 8 octobre (09/10/2026, lot 2, vides) : sur la scene,
   56 px entre les honoraires, le deroulement, « Avant d'evaluer » et la
   bande des questions, au lieu de 120 a chaque passage. */
@media (max-width: 760px){
  .g490-deroulement{ padding-top:56px; }
  .g490-savoir{ padding:56px 0; }
}
.g490-savoir .g490-entete .f-titre-section{ max-width:820px; }
/* Les six fiches : sans script, l'une sous l'autre ; avec offre.js, une a
   la fois sous le rail d'onglets (offre.css). Une colonne de
   lecture de 880 px au plus, centree. */
.g490-savoir-grille{ max-width:880px; margin:0 auto; }
.g490-fiche{
  display:block; margin:0 0 24px;
  padding:44px 48px 40px; border-radius:18px; color:var(--g-encre);
  box-shadow:0 24px 64px rgba(0,0,0,.35), 0 2px 6px rgba(0,0,0,.18);
  letter-spacing:-0.01em;
}
.g490-fiche h3{ margin:0 0 16px; font-size:26px; line-height:1.18; font-weight:500; letter-spacing:var(--f-serre); }
.g490-fiche p{ margin:14px 0 0; font-size:17px; line-height:1.55; color:var(--g490-texte-blanc); text-wrap:pretty; }
.g490-fiche h3 + p{ margin-top:0; }
.g490-liste{ list-style:none; margin:16px 0 0; padding:0; display:grid; gap:10px; }
.g490-liste li{ position:relative; padding-left:22px; font-size:17px; line-height:1.5; color:var(--g490-texte-blanc); }
.g490-liste li::before{ content:""; position:absolute; left:2px; top:.62em; width:7px; height:7px; border-radius:2px; background:var(--g-klein); }
.g490-liste--titree{ gap:14px; }
.g490-liste--titree strong{ font-weight:500; color:var(--g-encre); }
.g490-fiche h3 + .g490-liste{ margin-top:0; }
.g490-fiche p.g490-fiche-chute{ margin-top:20px; padding-top:18px; border-top:1px solid var(--g-trait); font-size:18px; line-height:1.45; font-weight:500; color:var(--g-encre); }
.g490-exergue{ margin:22px 0 0; padding:4px 0 4px 20px; border-left:3px solid var(--g-klein); }
.g490-fiche .g490-exergue p{ margin:0; font-size:20px; line-height:1.4; font-weight:500; color:var(--g-encre); letter-spacing:-0.015em; }
.go-onglets-vivant .g490-fiche{ margin-bottom:0; }
.g490-savoir .go-onglets{ max-width:1200px; margin-inline:auto; }
/* Au telephone, le rail defile d'un bord de l'ecran a l'autre, comme sur
   les deux autres pages (offre.css) : la marge centree ne s'y
   applique pas. */
@media (max-width: 760px){ .g490-savoir .go-onglets{ max-width:none; margin-inline:calc(-1 * var(--f-gouttiere)); } }
.g490-fiche-lien{ margin-top:18px !important; }
.g490-fiche-lien a, .g490-source{ font-size:16px; }
.g490-fiche-lien a{ display:inline-flex; align-items:center; min-height:44px; color:var(--g-klein); font-weight:500; text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; }
@media (hover:hover){ .g490-fiche-lien a:hover{ text-decoration-thickness:2px; } }

/* Le marche : deux chiffres, source dessous */
.g490-marche{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:16px; margin:0; }
.g490-marche div{ display:flex; flex-direction:column-reverse; gap:6px; padding:18px 18px 16px; border-radius:12px; background:var(--g490-papier); }
.g490-marche dd{ margin:0; font-size:38px; line-height:1; font-weight:500; letter-spacing:var(--f-serre); color:var(--g-klein); white-space:nowrap; font-variant-numeric:tabular-nums; }
.g490-marche dt{ font-size:16px; line-height:1.3; color:var(--g-gris); }
.g490-fiche p.g490-marche-an{ margin-top:10px; font-size:16px; font-weight:500; color:var(--g-encre); }
.g490-fiche p.g490-source{ margin-top:16px; font-size:16px; line-height:1.4; color:var(--g-gris); }

@media (max-width: 760px){
  .g490-fiche{ padding:24px 20px; border-radius:14px; margin-bottom:12px; }
  .g490-fiche h3{ font-size:22px; }
  .g490-fiche p, .g490-liste li{ font-size:16px; }
  .g490-fiche .g490-exergue p{ font-size:18px; }
  .g490-marche{ grid-template-columns:minmax(0,1fr); gap:8px; }
  .g490-marche dd{ font-size:34px; }
}

/* ---------- 6. QUESTIONS ET LECTURES (bande de papier) ------------------------
   « A lire ensuite » : le modele commun (.go-lectures, offre.css). */
.g490 .g490-faq{ padding-top:var(--f-bande-haut); }

/* ---------- 7. MOUVEMENT REDUIT ET IMPRESSION ------------------------------------ */
@media (prefers-reduced-motion: reduce){
  .g490-barre, .g490-fantome{ transition:none !important; }
  .g490-cascade--attente .g490-barre{ transform:none; }
  .g490-cascade--attente .g490-fantome{ opacity:1; }
}
@media print{
  .g490-cascade--attente .g490-barre{ transform:none; }
}

/* Tablette (761 a 1100 px) : l'en-tete du lecteur s'empile, comme ceux des
   pages 990 et sur devis. En 1fr 544px, la colonne du bouton tombait a
   104 px a 768 et « Consulter un exemple de rapport » passait sur 5 lignes. */
@media (max-width: 1100px) and (min-width: 761px){
  .g490-planches-tete{ grid-template-columns:minmax(0,1fr); gap:24px; align-items:start; }
}

/* ---------- 8. TELEPHONE, SECONDE PASSE (09/10/2026, delegation de Raphael) -----
   Sous 760 px seulement. Au-dessus, rien ne change. Trois blocs d'affilee
   montraient le contenu du rapport (la planche vivante de la mission, les
   six cartes puis le lecteur d'extraits, l'exemple chiffre) : 9,5 ecrans
   avant les honoraires.
   - Ce que le rapport examine : les six cartes deviennent une liste a
     filets, sans fond ni ombre ni trait Klein, memes textes (titre en
     18 px, texte en 16 px). Le cadre du lecteur d'extraits est masque.
     L'etiquette, le bouton « Consulter un exemple de rapport » et
     l'avertissement sur le cas fictif restent. offre.js ne monte pas les
     planches dans le cadre masque (section 1).
   - Un exemple chiffre : le chapo devient le bouton qui deplie les trois
     cartes et la ligne de source (offre.js, section 4), ferme au
     chargement. Le bouton garde la voix du chapo (taille, couleur,
     graisse) dans la rangee blanche des depliants (offre.css 9). Ferme,
     la bande se ferme 56 px sous le bouton (l'ecart de l'en-tete et 24 px)
     au lieu de 96.
   - Reprise du meme jour : le texte de la liste passe au fer a gauche,
     sans cesure automatique (socle.css 2b le justifiait, comme dans les
     cartes). Sans fond, la liste se lit comme du texte courant, et la
     justification y creusait des trous (« remunera-tion », « mul-tiple »),
     ceux que la premiere passe a retires des chapos. Les regles portent
     sur l'ecran seul (screen) : imprimee depuis un ordinateur, sur A4 ou
     Letter (boite de 718 a 739 px), la page garde ses cartes, son lecteur
     et son exemple chiffre ouvert, comme avant. */
@media screen and (max-width: 760px){
  .g490-points{ gap:0; border-top:1px solid var(--f-filet-encre); }
  .g490 .g490-point.f-carte-blanche{ padding:16px 0 18px; gap:6px; border-radius:0; background:none; box-shadow:none; border-bottom:1px solid var(--f-filet-encre); }
  .g490 .g490-point.f-carte-blanche > p{ text-align:left; -webkit-hyphens:manual; hyphens:manual; }
  .g490-point::before{ display:none; }
  .g490 .go-rapport-cadre{ display:none; }

  .g490-entete .g490-exemple-bouton{
    font:inherit; letter-spacing:inherit; color:inherit;
    min-height:64px; padding:14px 14px 14px 18px;
  }
  .g490-exemple-bouton .go-bascule-nom{ text-wrap:pretty; }
  .g490-exemple--ferme .g490-schema, .g490-exemple--ferme .g490-mention{ display:none; }
  .g490 .g490-clair.g490-exemple--ferme{ padding-bottom:24px; }
}