/* =========================================================================
   ARTIS VALORISATION, REFONTE : CE QUE LES TROIS PAGES D'OFFRE PARTAGENT (offre.css)
   Classes go-. Apres socle.css, scene.css et rapport-vitrine.css, avant la
   feuille propre de chaque offre.
   Installee le 30/09/2026 depuis l'essai g-offre-commun.css, sans changement
   de regle ; les noms de fichiers cites dans les commentaires suivent.
   Reference du systeme : REFONTE-GABARIT.md.
   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.
   ------------------------------------------------------------------------- */

/* =========================================================================
   ESSAI G. LES TROIS PAGES D'OFFRE : CE QU'ELLES PARTAGENT (offre.css)
   _essai-offre-490.html, _essai-offre-990.html, _essai-offre-sur-devis.html.
   Se charge apres socle.css et scene.css (et rapport-vitrine.css), avant la feuille propre a
   chaque page (offre-490.css, offre-990.css, offre-sur-devis.css).
   Corrections du jury du 29/09/2026 : les trois pages parlent la meme
   langue. Une seule plaque de prix, un seul jeu de chiffres, une seule
   bulle blanche pour la mission, un seul lecteur d'extraits, un seul
   composant d'onglets, une seule barre au telephone.
   Classes go- seulement (et quelques reglages scopes sous .go-page).
   Mobile d'abord pour les mesures : 393 px, cibles de 44 px, texte de 16 px
   au moins (etiquettes en capitales exceptees, 12 px comme la reference).
   ------------------------------------------------------------------------- */

.go-page{
  --go-papier:#F6F7FA;
  --go-texte-blanc:#26324a;   /* texte courant sur blanc (12,6:1) */
  --go-r-bulle:20px;
  --go-courbe:cubic-bezier(.23,1,.32,1);
  --go-prix:64px;             /* le prix de la plaque, le meme sur les trois pages (136 px jusqu'au 04/10/2026, voir UI05 plus bas) */
}
.go-page [id]{ scroll-margin-top:100px; }
.go-page h2, .go-page h3{ text-wrap:balance; }
.go-invisible{
  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;
}

/* =========================================================================
   1. L'EN-TETE
   Le bloc texte se dissout (display:contents) : ses enfants et la plaque du
   prix sont places sur une seule grille. Ordinateur : texte a gauche,
   plaque a droite, posee sur le bas du texte. Telephone : le prix vient
   juste apres le titre.
   ------------------------------------------------------------------------- */
.go-tete{
  position:relative; min-height:clamp(640px, 100svh, 1040px);
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:134px 0 88px;
}
/* Retouches 5 (30/09/2026) : 150 -> 134 en haut (54 px sous la barre, qui
   finit a 80) et, plus bas, .go-temoin 88 -> 40 px au-dessus et 32 -> 28 px
   dedans : a 1440 x 900, le retour de dirigeant des pages 490 et 990 tient
   entier sous le pli, signature comprise. */
.go-tete-grille{
  display:grid; grid-template-columns:minmax(0,1fr) 460px;
  grid-template-rows:auto auto auto auto 1fr; column-gap:72px; align-items:start;
}
.go-tete-texte{ display:contents; }
.go-tete-texte > *{ grid-column:1; max-width:820px; }
.go-sur{ grid-row:1; margin-bottom:28px; }
.go-h1{ grid-row:2; font-size:clamp(40px, 4.4vw, 64px); line-height:1.04; }
.go-h1 .l2{ display:block; color:var(--f-azur-scene, var(--g-azur)); }   /* bicolore, comme la couverture de l'accueil ; azur pale de la scene d'aube (scene.css) */
.go-chapo{ grid-row:3; margin-top:28px; max-width:640px; line-height:1.4; }
.go-accroche{
  grid-row:4; margin:24px 0 0; max-width:600px; padding-left:18px;
  border-left:2px solid var(--g-azur);
  font-size:20px; line-height:1.4; letter-spacing:var(--f-serre); color:rgba(255,255,255,.92); text-wrap:pretty;
}

/* Les chiffres : le composant commun de socle.css et scene.css (.g-chiffres, clarte du
   30/09/2026 : chiffres alignes a droite, libelle court, condition en petit
   dessous, .g-chiffre-precision), sans aucun style propre. Ici, seulement
   sa place dans la grille de l'en-tete. */
.go-chiffres.g-chiffres{ grid-row:5; margin-top:36px; }
/* Un pas regulier (jury du 30/09/2026) : la rangee « 52 », sans condition,
   faisait 48 px, les deux autres 67 ; toutes les rangees prennent la
   hauteur de la plus haute, les chiffres tombent a intervalles egaux. */
.go-chiffres.g-chiffres{ grid-auto-rows:1fr; }
/* Aube (01/10/2026) : la scene de la tete est claire (fond moyen rgb
   107,117,144 sous les chiffres a 1 440). Sans voile, l'accent azur du
   titre et les chiffres tombaient a 2,0:1, l'accroche et les conditions
   en petit a 3,0:1. En paysage, un voile doux d'ardoise profonde
   (#121a3a, celui de la couverture de l'accueil) sous la colonne de
   texte, sans bord, fondu avant la plaque du prix. Le portrait a deja le
   sien (scene.css, section 15).
   Le centre du voile est a 56 % de la hauteur, et non a 64 % : plus bas,
   le surtitre en 12 px, en haut de colonne, tombait dans le fondu (4,4:1
   sur l'offre a 990 a 1 440, 4,3:1 a 1 280) et l'accent azur du titre a
   3,0:1 a 1 024. Remonte et un peu plus haut (74 % au lieu de 62), il les
   couvre : surtitre au-dessus de 5:1, accent a 4,3:1 au pire ; la page ne
   perd que 2 % de clarte moyenne.
   Ambiance intermediaire (02/10/2026) : sur la scene plus sombre, le voile
   s'allege d'un cinquieme, comme celui de la couverture de l'accueil (56,
   48, 18 % devenus 45, 38, 14 %) : surtitre 5,5:1 au pire (12 px, 1 280 et 1 440). */
@media (min-aspect-ratio: 11/10){
  .go-tete{ isolation:isolate; }
  .go-tete::before{
    content:""; position:absolute; z-index:-1; inset:0; pointer-events:none;
    background:radial-gradient(62% 74% at 24% 56%, rgba(var(--f-voile),.45) 0, rgba(var(--f-voile),.38) 48%, rgba(var(--f-voile),.14) 78%, rgba(var(--f-voile),0) 100%);
  }
}

/* La plaque du prix (clarte, demandes 1 et 6) : une bulle blanche sur la
   scene, comme les bulles d'offre de l'accueil. Trois niveaux seulement :
   le prix, tres gros, a l'encre ; le mot cle (Fonds de commerce, Entreprise,
   Groupes et situations particulieres) en 600 ; tout le reste recule
   (seuil, delai, TVA, rassurance : petits, encre-3). .f-clair (socle.css et scene.css)
   donne les jetons d'encre : bouton plein a l'encre, bouton de verre en
   contour, pastilles inversees. */
.go-plaque{
  grid-column:2; grid-row:1 / -1; align-self:end;
  display:flex; flex-direction:column;
  padding:28px 32px 26px; border-radius:var(--go-r-bulle);
  background:var(--f-blanc); color:var(--g-encre); box-shadow:var(--f-ombre-bulle);
  letter-spacing:-0.01em;
}
.go-plaque-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;
}
.go-prix{
  margin:20px 0 8px; font-size:var(--go-prix); line-height:.92; font-weight:var(--f-g-titre);
  letter-spacing:var(--f-serre); white-space:nowrap; font-variant-numeric:tabular-nums; color:var(--g-encre);
}
/* « Sur devis » : en bleu Klein, comme la bulle de l'accueil, et plus petit
   que les montants (deux mots au lieu de trois signes). */
.go-prix--mot{ font-size:calc(var(--go-prix) * .62); line-height:1; letter-spacing:var(--f-serre); white-space:normal; color:var(--g-klein); }
/* SAS du 2 octobre 2026 : le montant porte « HT », en petit (.3em). Pour que
   « 490 € HT » tienne dans la plaque a toutes les largeurs, le prix suit
   aussi la largeur interieure de la plaque (29,5 % : « 890 € HT » mesure
   3,31 fois la taille du prix, comme tout montant a trois chiffres) ; --go-prix reste le plafond. */
.go-plaque{ container-type:inline-size; }
.go-prix:not(.go-prix--mot){ font-size:min(var(--go-prix), 29.5cqi); }
.go-prix .prix-ht{ font-size:.3em; }
.go-plaque-mot{ margin:0; font-size:28px; line-height:1.15; font-weight:500; letter-spacing:var(--f-serre); color:var(--g-encre); text-wrap:balance; }
.go-seuil{ margin:8px 0 0; font-size:16px; line-height:1.4; font-weight:400; letter-spacing:0; color:var(--f-encre-2); text-wrap:pretty; }
.go-delai{ margin:6px 0 0; font-size:14px; line-height:1.4; letter-spacing:0; color:var(--f-encre-3); text-wrap:pretty; }
.go-tva{ margin:14px 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); }
.go-plaque-boutons{ flex-direction:column; gap:8px; margin-top:20px; }
/* UI05 du brief editorial du 04/10/2026 : l'objet de la mission avant le
   prix. Dans la plaque, le nom de l'offre et son perimetre passent en tete,
   puis l'etiquette Honoraires, le prix (64 px au plus, et non plus 136) et
   la TVA. Seul l'ordre visuel change : le balisage, donc la lecture d'un
   lecteur d'ecran, garde l'ordre d'origine. Au telephone, l'introduction
   passe avant la plaque (ordre de .go-tete-texte, plus haut). */
.go-plaque-mot{ order:-2; }
.go-plaque .go-seuil{ order:-1; margin-bottom:18px; }
.go-plaque .go-prix{ margin:14px 0 6px; }
.go-plaque-boutons .f-bouton{ width:100%; }
.go-plaque .f-bouton-verre{ -webkit-backdrop-filter:none; backdrop-filter:none; }
@media (hover:hover){ .go-plaque .f-bouton-verre:hover{ background:rgba(11,29,54,.05); } }
.go-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; }
.go-plaque :focus-visible{ outline:2px solid var(--g-klein); outline-offset:3px; }
/* En portrait, socle.css et scene.css pose un voile marine a 55 % sous les plaques de
   verre (body .go-plaque, .go-temoin) : les bulles blanches
   l'enlevent, au meme poids, comme socle.css et scene.css le prevoit. */
body .go-plaque, body .go-temoin, body .go-garde{ background-image:none; }
/* La plaque en verre (demande de Raphael du 04/10/2026 : les bulles de
   l'offre un peu transparentes, telephone et ordinateur). Le verre des
   cartes de /valorisation (p-valorisation.css 3 quater) : fond azur a 76 %,
   voile blanc vers l'arete du haut (86 % en haut, 79 % au milieu), flou
   de la scene avive dessous, lisere blanc d'un pixel et reflet du haut.
   .go-page .go-plaque passe devant body .go-plaque (voile du portrait de
   scene.css 15, remise a zero juste au-dessus). La plaque s'efface sous la
   barre par sa propre opacite (data-f-efface) : le flou tient pendant
   l'effacement (mesure : ecart de 1,1 niveau, celui de l'opacite).
   Sur le verre, le texte second (perimetre, delai, TVA, rassurance) passe
   a #2A3850 : l'encre-2 et l'encre-3 tombaient sous 4,5:1 au pire de la
   scene. L'etiquette Honoraires devient une pastille de verre blanc, et
   le contour du bouton de verre se renforce (encre a 32 %).
   Mesure de la reprise du 04/10/2026 (2e centile des pixels, texte masque,
   cinq positions de defilement par plaque, Chrome WebGL 320, 393, 768,
   1 024 et 1 440, WebKit iPhone 15 et SE, scene vivante puis image fixe
   en mouvement reduit ; WebKit sans flou, le pire cas ; arrondi vers le
   bas) : texte second 5,5:1 au pire (« Premier echange sans engagement »,
   13 px, 1 440), encre 8,1:1, montants 8,8:1, « Sur devis » au Klein
   5,6:1. */
.go-page .go-plaque{
  background-color:rgba(214,229,248,.76);
  background-image:linear-gradient(170deg, rgba(255,255,255,.42) 0%, rgba(255,255,255,.12) 46%, rgba(255,255,255,0) 100%);
  -webkit-backdrop-filter:blur(18px) saturate(180%) brightness(1.1); backdrop-filter:blur(18px) saturate(180%) brightness(1.1);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.55), inset 0 1px 0 rgba(255,255,255,.9), var(--f-ombre-bulle);
}
.go-plaque .go-seuil, .go-plaque .go-delai, .go-plaque .go-tva, .go-plaque .go-rassure{ color:#2A3850; }
.go-plaque .go-tva{ border-top-color:rgba(11,29,54,.16); }
.go-plaque .go-plaque-etiquette{ background:rgba(255,255,255,.6); color:#2A3850; }
.go-plaque .f-bouton-verre{ --f-bouton-verre-bord:inset 0 0 0 1px rgba(11,29,54,.32); }
/* Transparence reduite (reglage du systeme) : la plaque blanche d'avant le
   verre, sans flou ; l'etiquette Honoraires reprend sa pastille grise, que
   le verre blanc a 60 % effacait sur le blanc. */
@media (prefers-reduced-transparency: reduce){
  .go-page .go-plaque{ background:var(--f-blanc); -webkit-backdrop-filter:none; backdrop-filter:none; }
  .go-plaque .go-plaque-etiquette{ background:#eef1f6; }
}

/* Le retour de dirigeant sous l'en-tete : un seul par page, meme composant
   et meme place sur les trois (490 Frederic B., 990 Jean-Pascal R., sur
   devis Stephane R., demande du 30/09/2026). */
/* Clarte : une bulle blanche, texte a l'encre. */
.go-temoin{
  margin:40px 0 0; padding:28px 36px; border-radius:var(--go-r-bulle); max-width:880px;
  background:var(--f-blanc); color:var(--g-encre); box-shadow:var(--f-ombre-bulle);
}
.go-temoin blockquote{ margin:0; }
.go-temoin blockquote p{ margin:0; font-size:22px; line-height:1.4; letter-spacing:-0.015em; text-wrap:pretty; }
.go-temoin-sig{ margin-top:20px; display:flex; flex-wrap:wrap; column-gap:12px; row-gap:4px; align-items:baseline; }
.go-temoin-sig b{ font-weight:var(--f-g-titre); font-size:18px; letter-spacing:var(--f-serre); }
.go-temoin-sig span{ font-size:12px; line-height:1.4; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--f-encre-3); }

@media (max-width: 1199px){
  .go-page{ --go-prix:60px; }
  .go-tete-grille{ grid-template-columns:minmax(0,1fr) 400px; column-gap:40px; }
}
@media (max-width: 960px){
  .go-tete{ min-height:0; padding-top:128px; }
  .go-tete-grille{ grid-template-columns:minmax(0,1fr); grid-template-rows:none; }
  .go-tete-texte > *, .go-plaque{ grid-column:1; grid-row:auto; }
  .go-sur{ order:1; } .go-h1{ order:2; } .go-chapo{ order:3; margin-top:28px; } .go-accroche{ order:3; }
  .go-plaque{ order:4; margin-top:32px; max-width:560px; } .go-chiffres.g-chiffres{ order:6; }
}
@media (max-width: 760px){
  /* DM Sans (30/09/2026) : plancher 80 et non plus 88. Au resserrement de
     la reference (-0.03em au lieu de -0.05em), un montant a trois chiffres en 88
     depassait de 8 px la marge interieure de la plaque a 320. */
  .go-page{ --go-prix:clamp(48px, 14vw, 56px); }
  /* Audit telephone du 8 octobre (09/10/2026, lot 2, vides) : 48 px sous
     le retour de dirigeant au lieu de 64, et la mission ne rouvre plus de
     fenetre de scene au-dessus de sa bande (offre.css 2) : du dernier mot
     du retour au premier de la bande, 24 + 48 + 56 px au lieu de 255. */
  .go-tete{ padding:104px 0 48px; }
  .go-sur{ margin-bottom:16px; line-height:1.4; }
  /* Titre equilibre (meme audit, lot 2, typographie) : « titres. »,
     « commerce. » et « particuliere. » ne restent plus seuls sur leur
     ligne, et 12 em bornent la mesure sur les grands telephones. La taille
     ne change pas. */
  .go-h1{ font-size:clamp(32px, 9vw, 40px); line-height:1.06; max-width:12em; text-wrap:balance; }
  .go-plaque{ margin-top:28px; padding:22px 20px 20px; border-radius:16px; }
  .go-prix{ margin-top:14px; }
  .go-seuil{ font-size:18px; }
  .go-plaque-mot{ font-size:24px; }
  .go-seuil{ font-size:16px; }
  .go-tva, .go-rassure{ font-size:14px; }
  .go-chapo{ margin-top:24px; }
  /* Decision D3 de Raphael (audit telephone du 8 octobre, 09/10/2026) :
     au telephone, l'accroche sous le titre est masquee, comme le
     paragraphe de couverture de l'accueil depuis le 6 octobre. Elle reste
     dans la page pour l'ordinateur et les moteurs de recherche. La plaque
     du prix remonte d'environ 160 px (voir section 8). */
  .go-accroche{ display:none; }
  .go-chiffres.g-chiffres{ margin-top:28px; }
  .go-temoin{ margin-top:48px; padding:24px 20px; border-radius:14px; }
  .go-temoin blockquote p{ font-size:18px; line-height:1.45; }
}

/* =========================================================================
   2. CE QUE COMPREND LA MISSION : une grande bulle blanche
   A gauche le titre, la phrase, les trois engagements communs ; a droite
   la liste a coches (g-carte-inclus, celle des cartes d'offre de l'accueil)
   et, s'il y en a un, le detail repliable.
   ------------------------------------------------------------------------- */
.go-mission{ padding:var(--f-souffle) 0 calc(var(--f-souffle) + 120px); }
.go-bulle{
  display:grid; grid-template-columns:minmax(0,5fr) minmax(0,6fr); column-gap:72px; align-items:start;
  padding:56px; border-radius:var(--go-r-bulle); color:var(--g-encre);
  box-shadow:0 30px 80px rgba(0,0,0,.40), 0 2px 8px rgba(0,0,0,.20);
  letter-spacing:-0.01em;
}
.go-bulle .f-etiquette{ display:block; margin-bottom:20px; color:var(--g-gris); }
.go-bulle-titre{ color:var(--g-encre); max-width:12ch; }
.go-bulle-texte{ margin:20px 0 0; font-size:20px; line-height:1.45; color:var(--go-texte-blanc); text-wrap:pretty; }
.go-commun{ list-style:none; margin:32px 0 0; padding:0; display:grid; gap:8px; }
.go-commun li{
  display:grid; grid-template-columns:22px minmax(0,1fr); column-gap:14px; align-items:start;
  padding:14px 16px; border-radius:12px; background:var(--go-papier);
  font-size:16px; line-height:1.4; color:var(--go-texte-blanc);
}
.go-commun svg{ width:20px; height:20px; margin-top:1px; fill:none; stroke:var(--g-klein); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.go-inclus{ gap:16px; }
.go-inclus li{ font-size:18px; line-height:1.4; }
.go-detail{ margin-top:28px; border-top:1px solid var(--g-trait); }
.go-detail > summary{
  list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:16px;
  min-height:56px; padding:14px 0 0; font-size:18px; line-height:1.3; font-weight:500; color:var(--g-klein);
  -webkit-tap-highlight-color:transparent;
}
.go-detail > summary::-webkit-details-marker{ display:none; }
.go-detail > summary::marker{ content:""; }
.go-plus{ position:relative; flex:none; width:32px; height:32px; border-radius:50%; background:#e8eefb; }
.go-plus::before, .go-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(--go-courbe);
}
.go-plus::after{ transform:rotate(90deg); }
.go-detail[open] .go-plus::after{ transform:rotate(0deg); }
.go-inclus--detail{ margin-top:18px; }
.go-inclus--detail li:last-child{ font-weight:400; color:var(--go-texte-blanc); }
.go-bulle :focus-visible{ outline:2px solid var(--g-klein); outline-offset:3px; border-radius:4px; }
@media (hover:hover){ .go-detail > summary:hover .go-plus{ background:#dbe5fa; } }

@media (max-width: 1100px){
  .go-bulle{ grid-template-columns:minmax(0,1fr); row-gap:36px; padding:44px 40px; }
}
@media (max-width: 760px){
  /* Audit telephone du 8 octobre (09/10/2026, lot 2, vides) : la bande
     marine part juste sous l'en-tete (sa marge de 48 px suffit) et la
     scene ne se montre plus que 48 px sous elle, au lieu de 96 et
     200 px. Avec la bande resserree (offre-mission.css 5), le vide entre
     la mission et la section suivante passe de 255 a 412 px a 112 a
     176 px selon la page. */
  .go-mission{ padding:0 0 48px; }
  .go-bulle{ padding:28px 20px 20px; border-radius:16px; row-gap:28px; }
  .go-bulle-texte{ font-size:18px; margin-top:16px; }
  .go-commun{ margin-top:24px; }
  .go-commun li{ padding:12px 14px; column-gap:12px; }
  .go-inclus{ gap:12px; }
  .go-inclus li{ font-size:17px; }
}

/* =========================================================================
   3. LE DEROULEMENT : les bulles f2 de l'accueil ; une note de verre sombre
   ferme la pile (pieces a fournir, garde-fou de l'offre).
   ------------------------------------------------------------------------- */
.go-etapes{ list-style:none; margin:0; padding:0; }
.go-garde{
  margin:0; padding:20px 24px; border-radius:var(--f-r-bulle);
  background:var(--f-blanc); box-shadow:var(--f-ombre-bulle); border-left:3px solid var(--g-klein);
  font-size:17px; line-height:1.45; color:var(--f-encre-2); text-wrap:pretty;
}
.go-garde a{ color:var(--g-klein); font-weight:500; text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; }
.go-garde :focus-visible{ outline:2px solid var(--g-klein); outline-offset:2px; }
@media (hover:hover){ .go-garde a:hover{ text-decoration-thickness:2px; } }
@media (max-width: 760px){ .go-garde{ padding:18px 20px; font-size:16px; } }
/* Audit telephone du 8 octobre (09/10/2026, lot 2, deroulement) : au
   telephone, les quatre cartes empilees (167 a 222 px chacune, 1,6 ecran
   pour 86 a 100 mots) deviennent une seule bulle blanche ou les etapes se
   suivent en rangs, separees d'un filet, comme la liste « Les etapes » de
   /commande : etiquette « Etape n » au Klein, titre de 18 px, texte de
   16 px. Les memes elements, dans le meme ordre. La bulle reprend le
   rayon et l'ombre des cartes. L'en-tete passe au fer a gauche comme les
   autres titres de section de la page (il etait centre, scene.css 8), et
   se rapproche de la bulle (20 px au lieu de 40, 32 sur Entreprise). */
@media (max-width: 760px){
  .go-page .f2-deroulement .f-duo-colle > .f-colle{ margin-bottom:20px; }
  .go-page .f2-deroulement .f2-colle{ align-items:flex-start; text-align:start; }
  .go-page .f2-deroulement .f-pile{
    gap:0; padding:4px 20px; border-radius:var(--f-r-bulle);
    background:var(--f-blanc); box-shadow:var(--f-ombre-bulle);
  }
  .go-page .f2-deroulement .f2-etape{
    gap:6px; padding:16px 0; border-radius:0; background:none; box-shadow:none;
  }
  .go-page .f2-deroulement .f2-etape + .f2-etape{ border-top:1px solid var(--f-filet-encre); }
  .go-page .f2-deroulement .f2-etape-n{ color:var(--g-klein); }
  .go-page .f2-deroulement .f2-etape .f-titre-carte-l{ font-size:18px; line-height:1.3; }
  .go-page .f2-deroulement .f2-etape-texte{ font-size:16px; }
}

/* =========================================================================
   3 BIS. CE QUI FAIT LE PRIX (offre du 03/10/2026)
   Pages a prix (fonds de commerce et entreprise) : deux prix de depart,
   justifies par le travail fait. Une section sur la scene, juste avant le
   deroulement ; l'en-tete en deux colonnes de la mission (f-entete-duo),
   sur le voile d'ardoise des titres poses sur la scene (section 4) ; trois
   bulles blanches (f-carte, celles des etapes) : le fonds de commerce,
   l'entreprise, ce qui fait varier le prix, toujours dans cet ordre (« une
   entreprise demande davantage » se lit contre le fonds). Chaque bulle :
   un filet court en tete (Klein pour l'offre de la page, gris pour les
   autres), le nom (lien vers l'autre offre, avec sa pastille), le texte,
   puis la chute (derniere phrase du texte de reference) posee en bas
   sous un filet : les trois chutes s'alignent. Celle de l'offre de la
   page est en Klein. Dessous, la mention de TVA.
   Trois colonnes au-dela de 1 100 px ; deux de 761 a 1 100 (la troisieme
   bulle en pleine largeur) ; une au telephone.
   Fonds de commerce : apres l'exemple chiffre (papier), la section prend
   le souffle de scene au-dessus ; le deroulement a le sien. Entreprise :
   apres la mission, dont le pied de section garde deja la scene ; le
   souffle passe dessous (offre-990.css).
   ------------------------------------------------------------------------- */
.go-cout{ padding:var(--f-souffle) 0 0; overflow-x:clip; }
/* Le voile sous l'en-tete et sous la mention de TVA. La section passe sur
   une partie claire de la scene vivante : le voile radial des titres de la
   section 4 (fondu aux bords) laissait l'etiquette de 12 px et le bout du
   chapo a 4,1:1 (95e centile, 1 024 et 393). Ici une bande d'ardoise
   profonde (#121a3a, celle des autres voiles), pleine a 60 % derriere le
   texte : une ellipse plus large que l'en-tete (demi-axes de 82 % de sa
   largeur et de 50 % de sa hauteur), pleine a 60 % sur le texte, fondue
   a rien en haut et en bas ; sur les cotes, un masque la fond sur la gouttiere (elle
   s'arrete au bord de l'ecran : rien ne defile). Une bande rectangulaire
   tenait le meme contraste mais se lisait en aplat a 1 440. */
.go-cout-tete, .go-cout-tva{ position:relative; isolation:isolate; }
.go-cout-tete::before, .go-cout-tva::before{
  content:""; position:absolute; z-index:-1; inset:-64px calc(-1 * var(--f-gouttiere)); pointer-events:none;
  background:radial-gradient(ellipse 82% 50% at 50% 50%, rgba(var(--f-voile),.64) 0, rgba(var(--f-voile),.6) 60%, rgba(var(--f-voile),.3) 82%, rgba(var(--f-voile),0) 100%);
  -webkit-mask-image:linear-gradient(to right, transparent 0, #000 var(--f-gouttiere), #000 calc(100% - var(--f-gouttiere)), transparent 100%);
  mask-image:linear-gradient(to right, transparent 0, #000 var(--f-gouttiere), #000 calc(100% - var(--f-gouttiere)), transparent 100%);
}
/* sous la mention, une ligne : la bande a sa largeur (et la gouttiere a
   gauche), fondue sur 24 px en haut et en bas */
.go-cout-tva{ width:fit-content; max-width:100%; }
.go-cout-tva::before{
  inset:-24px -48px -24px calc(-1 * var(--f-gouttiere));
  background:linear-gradient(to bottom, rgba(var(--f-voile),0) 0, rgba(var(--f-voile),.6) 24px, rgba(var(--f-voile),.6) calc(100% - 24px), rgba(var(--f-voile),0) 100%);
  -webkit-mask-image:linear-gradient(to right, transparent 0, #000 var(--f-gouttiere), #000 calc(100% - 48px), transparent 100%);
  mask-image:linear-gradient(to right, transparent 0, #000 var(--f-gouttiere), #000 calc(100% - 48px), transparent 100%);
}
.go-cout-tete .f-chapo{ line-height:1.4; }
.go-cout-grille{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:var(--f-ecart-grille);
}
.go-cout-carte{ gap:16px; letter-spacing:-0.01em; }
.go-cout-carte::before{ content:""; width:32px; height:3px; border-radius:2px; background:#c9d1de; }
.go-cout-carte--ici::before{ background:var(--g-klein); }
/* Le nom suit la largeur (22 a 28 px) : en 28 px, « Fonds de commerce »
   et sa pastille passaient sur deux lignes dans les bulles de 761 a 1 280 px. */
.go-cout-nom{
  margin:0; font-size:clamp(22px, 1.95vw, var(--f-t-carte)); line-height:var(--f-l-carte); font-weight:var(--f-g-titre);
  letter-spacing:var(--f-serre); color:var(--g-encre); text-wrap:balance;
}
.go-cout-nom a{
  display:inline-flex; align-items:center; gap:12px; min-height:44px; margin:-6px 0;
  color:inherit; text-decoration:none; -webkit-tap-highlight-color:transparent;
}
.go-cout-nom .f-pastille{
  width:24px; height:24px; margin:0; background:var(--g-encre); color:var(--f-blanc);
  transition:background-color .2s var(--go-courbe), transform .2s var(--go-courbe);
}
.go-cout-nom .f-pastille svg{ width:13px; height:13px; }
@media (hover:hover){
  .go-cout-nom a:hover{ text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:5px; }
  .go-cout-nom a:hover .f-pastille{ background:var(--g-klein); transform:translateX(3px); }
}
.go-cout-nom a:focus-visible{ outline:2px solid var(--g-klein); outline-offset:3px; border-radius:4px; }
.go-cout-texte{ margin:0; font-size:18px; line-height:1.45; color:var(--go-texte-blanc); text-wrap:pretty; }
.go-cout-chute{
  margin:auto 0 0; padding-top:16px; border-top:1px solid var(--g-trait);
  font-size:18px; line-height:1.4; font-weight:500; color:var(--g-encre); text-wrap:pretty;
}
.go-cout-carte--ici .go-cout-chute{ color:var(--g-klein); }
.go-cout-tva{ margin:24px 0 0; font-size:14px; line-height:1.45; letter-spacing:0; color:var(--f-texte); }
@media (max-width: 1100px){
  /* l'en-tete passe en une colonne, comme celui de la mission
     (offre-mission.css, .om-entete) : en 1fr 544px, le titre tenait un mot
     par ligne a 768 */
  .go-cout-tete{ grid-template-columns:minmax(0,1fr); gap:24px; align-items:start; }
  .go-cout-grille{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .go-cout-carte:last-child{ grid-column:1 / -1; }
}
@media (max-width: 760px){
  /* Audit telephone du 8 octobre (09/10/2026, lot 2, honoraires) : la
     section tenait 1 208 px pour 128 mots. 56 px au-dessus au lieu de
     120 (fonds de commerce, Entreprise dans offre-990.css), 20 px sous
     l'en-tete au lieu de 40, 12 px entre les bulles, et dans chaque
     bulle 18 px en haut et en bas, 8 px entre le nom, le texte et la
     chute, 10 px au-dessus de la chute. Le filet decoratif de tete est
     retire (il ne porte rien, la chute Klein marque l'offre de la page).
     Le texte et la mention de TVA ne changent pas. */
  .go-cout{ padding-top:56px; }
  .go-cout-tete{ gap:16px; margin-bottom:20px; }
  .go-cout-tete::before{ inset:-48px calc(-1 * var(--f-gouttiere)); }
  /* Le voile deborde de 48 px sous l'en-tete, et la premiere carte
     blanche n'est plus qu'a 20 px : son haut prenait un degrade gris
     (jusqu'a 80 niveaux, verification du 09/10/2026). Le bas du voile
     s'efface, rien sur ses 24 derniers pixels, fondu jusqu'a 48 px, en
     plus du fondu des cotes. Le texte de l'en-tete garde tout son voile. */
  .go-cout-tete::before{
    -webkit-mask-image:linear-gradient(to right, transparent 0, #000 var(--f-gouttiere), #000 calc(100% - var(--f-gouttiere)), transparent 100%), linear-gradient(to top, transparent 0, transparent 24px, #000 48px);
    -webkit-mask-composite:source-in;
    mask-image:linear-gradient(to right, transparent 0, #000 var(--f-gouttiere), #000 calc(100% - var(--f-gouttiere)), transparent 100%), linear-gradient(to top, transparent 0, transparent 24px, #000 48px);
    mask-composite:intersect;
  }
  .go-cout-nom{ font-size:var(--f-t-carte); }
  .go-cout-grille{ grid-template-columns:minmax(0,1fr); gap:12px; }
  .go-cout-carte:last-child{ grid-column:auto; }
  .go-cout-carte{ gap:8px; padding-block:18px; }
  .go-cout-carte::before{ display:none; }
  .go-cout-texte, .go-cout-chute{ font-size:17px; }
  .go-cout-chute{ padding-top:10px; }
  .go-cout-tva{ margin-top:20px; }
  /* Point 5 de Raphael (04/10/2026, le texte jusqu'au bord de la carte) :
     ces cartes gardent 20 px sur les cotes (et non les 22 px des autres
     cartes au telephone, socle.css), et leur texte revient a la ligne au
     plus loin (wrap, et non pretty, qui raccourcissait les premieres
     lignes pour equilibrer la derniere). Mesure du 05/10/2026, vide a
     droite de la plus longue ligne, cartes Fonds de commerce, Entreprise,
     Lettre de mission : iPhone 15 de 40, 35, 39 px a 1, 1, 32 ; Chrome
     393 de 31, 11, 28 a 1, 1, 32 ; Chrome 412 de 16, 17, 13 a 1, 8, 17 ;
     iPhone SE de 40, 11, 21 a 1, 6, 9. */
  .go-cout-carte{ padding-inline:20px; }
  .go-cout-texte{ text-wrap:wrap; }
}

/* =========================================================================
   3 TER. LA BULLE DU DEVIS (offre du 03/10/2026)
   Page sur devis, dans la bande des situations, sous le chapo : ce qui
   fait le prix d'un devis, et l'echelle des trois offres (fonds de
   commerce et entreprise a partir de leur prix de depart, liens vers leurs
   pages ; puis le devis, l'offre de la page, en Klein). Une bulle blanche
   sur le papier (f-carte, filet et ombre douce de scene.css) ; les rangees
   de l'echelle ont les filets et les pastilles de « A lire ensuite »
   (section 5 bis). Deux colonnes au-dela de 960 px, une en dessous.
   Remplace la ligne des forfaits (.gd-situations-forfaits, dont les regles
   d'offre-sur-devis.css restent sans usage).
   ------------------------------------------------------------------------- */
.go-devis{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,440px); column-gap:56px; row-gap:24px;
  align-items:center; max-width:1080px; margin:0 auto 56px; letter-spacing:-0.01em;
}
.go-devis-etiquette{
  margin:0 0 14px; font-size:12px; line-height:1; font-weight:500;
  letter-spacing:var(--f-espace-etiquette); text-transform:uppercase; color:var(--g-klein);
}
.go-devis-phrase{ margin:0; font-size:20px; line-height:1.45; color:var(--go-texte-blanc); text-wrap:pretty; }
.go-devis-echelle{ list-style:none; margin:0; padding:0; border-top:1px solid var(--f-filet-encre); }
.go-devis-echelle li{ border-bottom:1px solid var(--f-filet-encre); }
.go-devis-echelle a, .go-devis-ici{
  display:grid; grid-template-columns:minmax(0,1fr) auto 24px; column-gap:16px; align-items:center;
  min-height:56px; padding:12px 0; color:var(--g-encre); text-decoration:none; -webkit-tap-highlight-color:transparent;
}
.go-devis-nom{ font-size:17px; line-height:1.3; font-weight:500; text-wrap:balance; }
.go-devis-prix{ font-size:16px; line-height:1.3; color:var(--f-encre-2); white-space:nowrap; font-variant-numeric:tabular-nums; }
.go-devis-ici .go-devis-prix{ color:var(--g-klein); font-weight:500; }
.go-devis-echelle a::after{
  content:""; grid-column:3; width:24px; height:24px; border-radius:50%;
  background:var(--g-encre) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m10 7 5 5-5 5'/%3E%3C/svg%3E") center / 13px no-repeat;
  transition:background-color .2s var(--go-courbe), transform .2s var(--go-courbe);
}
@media (hover:hover){
  .go-devis-echelle a:hover .go-devis-nom{ text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:4px; }
  .go-devis-echelle a:hover::after{ background-color:var(--g-klein); transform:translateX(3px); }
}
.go-devis-echelle a:focus-visible{ outline:2px solid var(--g-klein); outline-offset:2px; border-radius:4px; }
.go-devis-tva{ grid-column:1 / -1; margin:0; font-size:13px; line-height:1.35; letter-spacing:0; color:var(--f-encre-3); }
@media (max-width: 960px){
  .go-devis{ grid-template-columns:minmax(0,1fr); max-width:640px; }
}
@media (max-width: 760px){
  .go-devis{ margin-bottom:40px; row-gap:20px; }
  .go-devis-phrase{ font-size:18px; }
  .go-devis-echelle a, .go-devis-ici{ column-gap:12px; }
  .go-devis-tva{ font-size:14px; }
}
/* Sous 481 px, le prix passe sous le nom, la pastille a droite des deux
   lignes : a 320, « a partir de 890 EUR HT » (insecable) ne laissait que
   52 px au nom, et « Entreprise » passait sous le prix. */
@media (max-width: 480px){
  .go-devis-echelle a, .go-devis-ici{ grid-template-columns:minmax(0,1fr) 24px; row-gap:2px; }
  .go-devis-nom{ grid-column:1; grid-row:1; }
  .go-devis-prix{ grid-column:1; grid-row:2; }
  .go-devis-echelle a::after{ grid-column:2; grid-row:1 / span 2; }
}

/* =========================================================================
   4. LE LECTEUR D'EXTRAITS (rapport-vitrine.css, composant de l'accueil G)
   Le meme sur les trois pages : onglets en rail a l'ordinateur, rangee de
   numeros au telephone (autant de colonnes que d'extraits, --go-n), le
   compteur « Extrait n sur N, page p du rapport » et la legende de
   l'accueil sous la planche.
   ------------------------------------------------------------------------- */
.go-rapport-cadre{ margin-top:48px; }
@media (max-width: 760px){
  /* 8 px entre les numeros (6 avant, audit telephone du 8 octobre,
     09/10/2026 : deux cibles voisines a 8 px au moins). */
  .go-rapport .g-rapport-onglets{ grid-template-columns:repeat(var(--go-n, 5), minmax(0,1fr)); gap:8px; }
  .go-rapport-cadre{ margin-top:32px; }
}
/* Les fleches repetees sous la legende (audit telephone du 8 octobre,
   09/10/2026, lot 2, lecteur d'extraits) : la planche fait 711 a
   1 270 px au telephone, et les fleches de la barre restaient au-dessus.
   Apres avoir lu un extrait, il fallait remonter pour passer au suivant.
   offre.js pose sous la legende une seconde paire, les memes boutons
   (memes noms accessibles, meme etat), qui ne se montre qu'au telephone.
   Un toucher ramene le haut du lecteur sous la barre. Rien de plus a lire. */
.go-fleches-bas{ display:none; }
@media (max-width: 760px){
  .g-rapport--vivant .go-fleches-bas{ display:flex; justify-content:flex-end; margin-top:16px; padding-inline:4px; }
}
/* La scene porte f-carte-blanche : temoin pour socle.js (verre dense de la
   barre au-dessus d'une planche blanche), sans son fond. */
.go-page .g-rapport-scene.f-carte-blanche{ background:transparent; color:inherit; }

/* Aube : sur la page a 490, « Avant d'evaluer ou de ceder un fonds » est
   pose sur la scene (pas de bande) et passe sur l'arete eclairee de la
   grande piece, plus claire depuis l'aube (rgb 151,169,196 : titre a
   2,4:1 a 1 440). Un voile doux d'ardoise sous le titre, comme celui des
   colonnes du deroulement. Les pages a 990 et sur devis ont une bande.
   Le voile deborde de la gouttiere, et pas plus : 40 px au-dela de 760 px,
   20 px au telephone. Fixe a 40 px, il depassait l'ecran de 20 px et la
   page defilait a l'horizontale (scrollWidth 413 pour 393, WebKit). */
.go-page [data-go-onglets]:not(.f-bande) > .f-conteneur > header{ position:relative; isolation:isolate; }
.go-page [data-go-onglets]:not(.f-bande) > .f-conteneur > header::before{
  content:""; position:absolute; z-index:-1; inset:-56px calc(-1 * var(--f-gouttiere)); pointer-events:none;
  background:radial-gradient(closest-side, rgba(var(--f-voile),.56) 0, rgba(var(--f-voile),.5) 50%, rgba(var(--f-voile),.2) 78%, rgba(var(--f-voile),0));
}
/* Au telephone (09/10/2026, verification de l'audit telephone du 8
   octobre) : l'en-tete n'est plus qu'a 32 px de l'accordeon, et les 56 px
   du voile sous lui grisaient la tete blanche « Fonds ou societe ». Le
   bas du voile s'efface, rien sur ses 24 derniers pixels, fondu jusqu'a
   56 px. Le titre garde tout son voile. */
@media (max-width: 760px){
  .go-page [data-go-onglets]:not(.f-bande) > .f-conteneur > header::before{
    -webkit-mask-image:linear-gradient(to top, transparent 0, transparent 24px, #000 56px);
    mask-image:linear-gradient(to top, transparent 0, transparent 24px, #000 56px);
  }
}

/* =========================================================================
   5. LES ONGLETS DE « CE QU'IL FAUT SAVOIR »
   Le motif des onglets 01 a 10 de l'accueil : rectangles arrondis (rayon
   des boutons), verre a 6 % au repos, blanc quand ils sont choisis. Un seul
   rail : a l'ordinateur, les onglets passent a la ligne et se centrent ; au
   telephone, ils tiennent sur une rangee qui defile au doigt. Sans script,
   les onglets restent caches et les panneaux se lisent a la suite.
   Variante --clair : sur le papier de la bande claire.
   ------------------------------------------------------------------------- */
.go-onglets{
  display:flex; flex-wrap:wrap; justify-content:center; gap:6px; margin:0 0 32px;
}
.go-onglets[hidden]{ display:none; }
.go-onglet{
  display:inline-flex; align-items:center; min-height:48px; margin:0; padding:12px 18px;
  border:0; border-radius:var(--f-r-bouton);
  /* Clarte : des pastilles blanches sur la scene, l'onglet choisi au bleu
     Klein (encre-2 sur blanc : 8,9:1 ; blanc sur Klein : 10,1:1). */
  background:var(--f-blanc); color:var(--f-encre-2); box-shadow:0 1px 2px rgba(0,7,53,.12);
  font:500 16px/1.25 var(--f-police); letter-spacing:-0.01em;
  text-align:left; cursor:pointer; white-space:nowrap; -webkit-tap-highlight-color:transparent;
  transition:background-color .2s var(--go-courbe), color .2s var(--go-courbe), transform .16s var(--go-courbe);
}
@media (hover:hover){ .go-onglet:not([aria-selected="true"]):hover{ background:#eef1f6; color:var(--g-encre); } }
.go-onglet[aria-selected="true"]{ background:var(--g-klein); color:var(--f-blanc); }
.go-onglet:active{ transform:scale(.97); }
.go-onglet:focus-visible{ outline:2px solid var(--f-blanc); outline-offset:2px; }

/* Variante --clair : sur le papier, un filet autour des pastilles. */
.go-onglets--clair .go-onglet{ box-shadow:inset 0 0 0 1px var(--f-filet-encre); }
.go-onglets--clair .go-onglet[aria-selected="true"]{ box-shadow:none; }
.go-onglets--clair .go-onglet:focus-visible{ outline-color:var(--g-klein); }

/* Avec le script : un panneau a la fois. */
.go-onglets-vivant .go-panneau:not(.go-panneau--on){ display:none; }
.go-onglets-vivant .go-panneau--on{ animation:go-apparait .24s var(--go-courbe); }
@keyframes go-apparait{ from{ opacity:0; } to{ opacity:1; } }

@media (max-width: 760px){
  /* Une rangee qui defile au doigt, du bord de l'ecran au bord de l'ecran,
     sans barre de defilement ; l'onglet choisi est ramene dans la vue. */
  .go-onglets{
    flex-wrap:nowrap; justify-content:flex-start; overflow-x:auto; overscroll-behavior-x:contain;
    margin:0 calc(-1 * var(--f-gouttiere)) 24px; padding:2px var(--f-gouttiere);
    scroll-padding-inline:var(--f-gouttiere); scroll-snap-type:x proximity; scrollbar-width:none;
  }
  .go-onglets::-webkit-scrollbar{ display:none; }
  .go-onglet{ flex:none; min-height:44px; padding:10px 16px; scroll-snap-align:start; }
}
/* Audit telephone du 8 octobre (09/10/2026, lot 2, « Ce qu'il faut
   savoir ») : le rail mesurait 713 a 952 px pour 393 px d'ecran, deux
   onglets visibles sur cinq ou six, sans indice. Au telephone, offre.js
   passe la section en accordeon (.go-accordeon) : le rail est retire,
   chaque panneau est precede d'un bouton qui porte le titre de son
   onglet (aria-expanded, aria-controls), le premier ouvert au
   chargement, les autres fermes et ouverts au toucher, sans fermer les
   autres. Aucun panneau n'est retire. Le bouton : une rangee blanche de
   56 px, le titre en 17 px, le rond de « Detail des prestations »
   (.go-plus) a droite, et un filet sur le papier (.go-onglets--clair).
   Reprise du meme jour (lot 7, un seul dessin de depliant au
   telephone) : dans ce rond, un chevron Klein qui se retourne a
   l'ouverture, comme les questions frequentes (scene.css 10) et les
   piliers de l'accueil (schema.css 9), au lieu du plus qui se couchait
   en moins. Au-dessus de 760 px, offre.js retire les boutons et rend les
   onglets : rien ne change. */
.go-acc{ display:none; }
@media (max-width: 760px){
  .go-accordeon .go-onglets{ display:none; }
  .go-accordeon .go-acc{
    display:flex; align-items:center; justify-content:space-between; gap:16px;
    width:100%; min-height:56px; margin:8px 0 0; padding:12px 14px 12px 20px;
    border:0; border-radius:var(--f-r-bulle); background:var(--f-blanc); color:var(--g-encre);
    box-shadow:0 1px 2px rgba(0,7,53,.12);
    font:500 17px/1.3 var(--f-police); letter-spacing:-0.01em; text-align:left;
    cursor:pointer; -webkit-tap-highlight-color:transparent;
  }
  .go-accordeon.f-bande .go-acc{ box-shadow:inset 0 0 0 1px var(--f-filet-encre); }
  .go-accordeon .go-acc:first-of-type{ margin-top:0; }
  .go-acc-nom{ min-width:0; text-wrap:balance; }
  .go-acc .go-plus::before{
    width:8px; height:8px; margin:-6px 0 0 -4px; border-radius:0; background:none;
    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;
  }
  .go-acc .go-plus::after{ display:none; }
  .go-acc[aria-expanded="true"] .go-plus::before{ transform:rotate(-135deg); margin-top:-2px; }
  .go-acc:focus-visible{ outline:2px solid var(--g-klein); outline-offset:2px; }
  .go-accordeon .go-panneau--on{ margin-top:12px; }
}
@media (max-width: 760px) and (hover:hover){ .go-acc:hover .go-plus{ background:#dbe5fa; } }

/* =========================================================================
   5 BIS. A LIRE ENSUITE : un seul modele sur les trois pages (celui de la
   990, jury du 30/09/2026) : sous les questions, dans la meme bande de
   papier, le titre a gauche et la liste a droite (f1-reperes, socle.css et scene.css),
   une seule colonne au telephone. Filets et pastilles a l'encre.
   ------------------------------------------------------------------------- */
.go-lectures{ margin-top:120px; }
.go-lectures ul{ border-top-color:var(--f-filet-encre); }
.go-lectures li{ border-bottom-color:var(--f-filet-encre); }
.go-lectures a{ color:var(--g-encre); }
.go-lectures a > span:first-child{ min-width:0; text-wrap:pretty; }
.go-lectures .f-pastille{ flex:none; background:var(--g-encre); color:var(--f-blanc); }
.go-lectures a:focus-visible{ outline:2px solid var(--g-klein); outline-offset:2px; border-radius:4px; }
/* 48 px au telephone (72 jusqu'au 09/10/2026, audit telephone du
   8 octobre, lot 2, vides). */
@media (max-width: 760px){ .go-lectures{ margin-top:48px; } }

/* =========================================================================
   6. LA BARRE, LE RETOUR EN HAUT, LA BARRE D'APPEL
   ------------------------------------------------------------------------- */
/* La barre (jury du 30/09/2026) : le verre blanc de l'accueil. La plaque
   marine a 86 % que cette feuille posait sur le nom au telephone est
   retiree : elle passait au gris translucide sur les bulles blanches.
   Le nom prend maintenant, comme a l'accueil (socle.css et scene.css), le verre blanc
   a 86 % et l'encre : en portrait des le haut de page, partout sur une
   surface blanche. socle.js ne pose le verre dense que sur les
   .f-carte-blanche ; offre.js pose .go-barre-blanche sur toutes les
   bulles blanches de la scene (etapes, panneau du lecteur, plaque...). Le
   burger reste celui de socle.css et scene.css (plaque blanche, barres a l'encre). */
.f-barre.go-barre-blanche:not(.f-barre--ouverte) .f-marque{
  background:rgba(255,255,255,.86); color:var(--g-encre);
  box-shadow:inset 0 0 0 1px var(--f-filet-encre);
  -webkit-backdrop-filter:blur(var(--f-flou-barre)); backdrop-filter:blur(var(--f-flou-barre));
}
@media (min-width: 1181px){
  .f-barre.go-barre-blanche .f-liens{ background:rgba(255,255,255,.86); box-shadow:inset 0 0 0 1px var(--f-filet-encre); }
  .f-barre.go-barre-blanche .f-liens a:not(.f-bouton){ color:var(--g-encre); }
  .f-barre.go-barre-blanche :focus-visible{ outline-color:var(--g-klein); }
}
/* socle.css et scene.css garde, pour les pages d'offre, le nom en blanc des le
   defilement (« a retirer quand la feuille des offres adopte le verre
   blanc ») : sur le verre blanc, l'encre l'emporte ici (meme poids, feuille
   chargee apres ; un cran de plus sur les surfaces blanches). */
@media (max-width: 1180px){
  .go-page .f-barre.f-barre--dense:not(.f-barre--ouverte) .f-marque.f-marque.f-marque,
  .go-page .f-barre.go-barre-blanche:not(.f-barre--ouverte) .f-marque.f-marque.f-marque{
    color:var(--g-encre); box-shadow:inset 0 0 0 1px var(--f-filet-encre);
  }
}
@media (max-width: 1180px) and (max-aspect-ratio: 1099/1000){
  .go-page .f-barre:not(.f-barre--ouverte) .f-marque.f-marque.f-marque{
    color:var(--g-encre); box-shadow:inset 0 0 0 1px var(--f-filet-encre);
  }
}

/* Le retour en haut d'artis.js : verre marine, lisible aussi sur les bandes
   claires et les cartes blanches. */
.go-page .to-top{ background:rgba(var(--f-voile),.62); }
@media (hover:hover){ .go-page .to-top:hover{ background:rgba(var(--f-voile),.78); } }

/* La barre d'appel d'artis.js, au telephone : offre.js y ajoute l'offre de
   la page (le lien vers le formulaire preselectionne) et son prix, avec la
   mention de TVA. */
.go-page .cta-mobile .btn{ justify-content:space-between; gap:12px; padding:0 20px; }
.go-cta-prix{ font-weight:500; white-space:nowrap; font-variant-numeric:tabular-nums; }
/* Offre du 03/10/2026 : « A partir de » en petit, au-dessus du montant et
   aligne sur lui a droite (body data-go-dep, offre.js), comme le span
   prix-dep des grands prix ; la barre garde sa hauteur (48 px). L'espace
   finale de la balise garde « A partir de 490 EUR HT » d'un seul tenant
   pour la lecture. */
.go-cta-prix{ text-align:right; }
.go-cta-dep{ display:block; margin:0 0 2px; font-size:12px; line-height:1.2; font-weight:500; letter-spacing:.02em; }
.go-cta-tva{ margin:8px 0 0; font-size:14px; line-height:1.3; letter-spacing:0; color:var(--f-encre-3); text-align:center; }
@media (max-width: 760px){ .go-cta-tva{ font-size:16px; } }
/* Seconde passe telephone (09/10/2026) : sous 760 px, la mention passe en
   12 px a droite du bouton et la barre revient a 72 px (section 9). Les
   101 px dont parle la note suivante sont ceux d'avant. De 761 a 860 px,
   la barre garde ses 98 px.
   Socle (30/09/2026) : avec la mention de TVA, la barre d'appel des offres
   mesure 101 px au telephone (98 de 761 a 860), et non les 72 que socle.css
   reserve sous le pied : en bas de page, la derniere ligne de la mention
   legale passait sous la barre (8 a 9 px), et le retour en haut la touchait.
   Meme ecart de 20 px que sur les autres pages. */
@media (max-width: 860px){
  body.go-page.has-cta-mobile .f3-pied{ padding-bottom:calc(20px + 101px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 860px) and (min-height: 521px){
  body.go-page.has-cta-mobile .to-top{ bottom:calc(121px + env(safe-area-inset-bottom, 0px)); }
}

/* La mention sous l'appel final */
/* Aube : blanc plein au lieu de 86 % ; sur l'appel final plus clair, la
   mention de 14 px tombait a 4,5:1 a 1 024 (990), et a 4,2:1 au
   telephone sur l'image fixe (mouvement reduit), ou elle passe sur la
   lueur du bas. Sa taille suffit a la faire reculer. */
.go-appel-note{ margin:20px 0 0; max-width:720px; font-size:14px; line-height:1.45; letter-spacing:0; color:var(--f-texte); }
/* Image fixe en portrait (mouvement reduit, sans WebGL, avant la toile) :
   l'arete claire du disque de l'image passe sous la fin de la mention, et
   « CGI. » tombait a 4,2:1 (Chrome 393 x 852 et WebKit iPhone 15, offre
   sur devis ; 7,2:1 avant l'aube). La scene vivante n'en a pas besoin
   (5,3:1). Un voile local d'ardoise profonde, comme celui de la couverture
   de l'accueil (.f-couv::after) : plein sous les deux lignes, fondu a rien
   20 px au-dessus (avant les boutons, qu'il ne doit pas assombrir) et
   28 px dessous ; sur les cotes, il s'arrete a la gouttiere, fondu sur sa
   largeur (regle 1 des voiles : il ne fait pas defiler la page). Il s'efface
   avec la toile ; sans :has, il reste : le contraste prime. */
@media (max-aspect-ratio: 1099/1000){
  .go-appel-note{ position:relative; }
  .go-appel-note::before{
    content:""; position:absolute; z-index:-1; pointer-events:none;
    inset:-20px calc(-1 * var(--f-gouttiere)) -28px;
    background:linear-gradient(to bottom, rgba(var(--f-voile),0) 0, rgba(var(--f-voile),.26) 20px, rgba(var(--f-voile),.26) calc(100% - 28px), rgba(var(--f-voile),0) 100%);
    -webkit-mask-image:linear-gradient(to right, transparent 0, #000 var(--f-gouttiere), #000 calc(100% - var(--f-gouttiere)), transparent 100%);
    mask-image:linear-gradient(to right, transparent 0, #000 var(--f-gouttiere), #000 calc(100% - var(--f-gouttiere)), transparent 100%);
    transition:opacity 700ms cubic-bezier(.2,.7,.2,1);
  }
  .f-page:has(> .f-scene.h-scene--pret) .go-appel-note::before{ opacity:0; }
}

/* =========================================================================
   7. MOUVEMENT REDUIT ET IMPRESSION
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  .go-plus::before, .go-plus::after, .go-onglet, .go-cout-nom .f-pastille, .go-devis-echelle a::after{ transition:none !important; }
  .go-onglet:active{ transform:none; }
  .go-onglets-vivant .go-panneau--on{ animation:none; }
}
@media print{
  .go-tete{ min-height:0; padding-top:40px; }
  .go-onglets{ display:none !important; }
  .go-onglets-vivant .go-panneau{ display:block !important; }
}

/* Sous 360 px : la plaque n'a que 240 px de large ; « Consulter un exemple
   de rapport » (201 px en DM Sans 14) laissait « rapport » seul a la ligne
   avec 24 px de marge de chaque cote. */
@media (max-width: 359px){
  .go-plaque .f-bouton-verre{ padding-inline:16px; }
}

/* =========================================================================
   8. TELEPHONE : L'AUDIT DU 8 OCTOBRE (09/10/2026)
   Ce qui suit vaut pour les trois offres, sous 760 px seulement. Au-dessus,
   rien ne change. Les ecarts propres a chaque page sont dans sa feuille
   (offre-490.css, offre-990.css, offre-sur-devis.css, offre-mission.css).
   Aucun texte n'est retire, sauf l'accroche (decision D3, section 1).
   ------------------------------------------------------------------------- */
@media (max-width: 760px){
  /* La plaque du prix (lot 2) : sur la scene vivante, la ligne de
     rassurance de 14 px, a #2A3850 sur le verre a 76 %, tombait a 3,6:1
     (Chromium 393, scene WebGL, 2e centile du fond, plaque a 25 % de
     l'ecran). Le verre passe a 92 % et la ligne a l'encre en 15 px,
     7,1:1 au pire, 11,4:1 ailleurs. La phrase de TVA passe de 6,1 a
     8,2:1. L'etiquette Honoraires perd sa pastille : une ligne de 12 px
     a l'aplomb du texte de la plaque. */
  .go-page .go-plaque{ background-color:rgba(214,229,248,.92); }
  .go-plaque .go-rassure{ font-size:15px; color:var(--g-encre); }
  .go-plaque .go-plaque-etiquette{ padding:0; background:none; }
  /* et la plaque se resserre d'un cran (24 px sous le titre au lieu de
     28, 14 px sous le perimetre au lieu de 18, 12 px autour du filet de
     la TVA au lieu de 14, 16 px avant les boutons au lieu de 20). Avec
     l'accroche masquee (section 1), mesure WebKit iPhone 15 en fenetre de
     Safari (393 x 659) : prix a 0,61 et 0,64 ecran, bouton de contact
     entier avant 0,97 ecran sur fonds de commerce et Entreprise (1,16 a
     1,26 avant). Sur devis, son haut entre a 0,96 ecran (1,20 avant). */
  .go-plaque{ margin-top:24px; }
  .go-plaque .go-seuil{ margin-bottom:14px; }
  .go-plaque .go-tva{ margin-top:12px; padding-top:12px; }
  .go-plaque-boutons{ margin-top:16px; }

  /* Les chapos au fer a gauche (lot 2, typographie) : justifies sur
     353 px, ils ouvraient des blancs de 12 a 13 px (trois espaces) et
     coupaient des mots courants. Les paragraphes des fiches de « Avant
     d'evaluer ou de ceder un fonds » (.go-panneau > p) suivent : mesures
     a 393 px, leurs blancs montaient a 3,2 et 4,2 espaces (Chromium et
     WebKit). Reprise du 09/10/2026 : les trois paragraphes du premier
     panneau d'Entreprise (« Le resultat d'abord, le multiple ensuite »,
     .g990-bloc-texte), poses sur le papier comme les fiches de fonds de
     commerce et non dans une bulle, restaient justifies avec cesure
     (« dimi-nuer », « ajuste-ment »), seuls de leur dispositif sur les
     trois offres : ils suivent. Les paragraphes courts des bulles
     blanches (points du rapport, cascade de l'exemple, 2,2 espaces au
     plus) restent justifies (socle.css, section 2). Les noms propres
     gardent leur protection (.nom-propre). */
  .go-page main .f-chapo,
  .go-page main .go-panneau > p,
  .go-page main .go-panneau .g990-bloc-texte > p{ text-align:left; text-align-last:auto; -webkit-hyphens:manual; hyphens:manual; }

  /* Les titres de section au fer a gauche (lot 2) : ils alternaient sans
     regle entre le centre et la gauche. Tous suivent maintenant la
     gauche, comme les bulles qui les suivent. Entre un en-tete de section
     et son contenu, 28 px au lieu de 40 (jeton du socle, redefini pour
     les seules pages d'offre). */
  .go-page{ --f-ecart-titre-contenu:28px; }
  .go-page .f-entete-centre{ justify-items:start; text-align:start; }

  /* Questions et lectures (lot 2, vides) : 64 px en haut et en bas de la
     bande de papier au lieu de 100. */
  .go-page .f3-faq.f-bande{ padding-top:64px; padding-bottom:64px; }

  /* L'appel final (lot 2) : 64 px au-dessus et 80 dessous au lieu de 120
     et 160, titre de 32 px (40 avant, trois lignes), 10 px entre les deux
     boutons empiles (4 avant). */
  .go-page .f3-appel{ padding:64px 0 80px; }
  .go-page .f3-appel-titre{ font-size:32px; line-height:1.08; }
  .go-page .f3-appel .f-boutons{ gap:10px; }
}
/* Transparence reduite (reglage du systeme) : la plaque reste blanche,
   comme au-dessus de 760 px (section 1). */
@media (max-width: 760px) and (prefers-reduced-transparency: reduce){
  .go-page .go-plaque{ background-color:var(--f-blanc); }
}

/* =========================================================================
   9. TELEPHONE, SECONDE PASSE (09/10/2026, delegation de Raphael)
   Raphael a delegue les decisions de contenu restees ouvertes apres
   l'audit du 8 octobre (« fais ce qui te semble etre le mieux pour
   faciliter les conversions »). Sous 760 px seulement. Au-dessus, rien ne
   change, ni l'image ni l'arbre d'accessibilite (offre.js ne pose ses
   boutons qu'au telephone et les retire au-dela).
   - Un seul dessin de depliant pour les replis ajoutes (.go-bascule,
     offre.js section 4) : la rangee blanche de 56 px des onglets en
     accordeon (section 5), un filet sur le papier, le libelle a gauche et
     le rond de 32 px a droite, chevron Klein vers le bas ferme, vers le
     haut ouvert, comme les piliers de l'accueil (schema.css 9). Chaque
     page l'ajuste a sa place (offre-490.css, offre-sur-devis.css).
   - Questions : quatre visibles, puis « Toutes les questions », qui
     montre les autres a leur place et disparait (le focus passe a la
     cinquieme). Sans script, toutes sont visibles.
   - A lire ensuite : quatre lectures. Aucune page n'a de lien vers toutes
     les analyses dans cette liste : les suivantes restent dans le HTML,
     masquees au telephone. Depuis le 10/10/2026 (audit UI/UX du
     9 octobre, point A05), elles se montrent sous « Toutes les
     lectures », comme les questions (voir plus bas).
   - La barre d'appel : 72 px au lieu de 101 (voir plus bas).
   Toutes les regles de cette section portent sur l'ecran seul (screen),
   et offre.js suit la meme requete (reprise du meme jour) : imprimee
   depuis un ordinateur, sur A4 ou Letter, la page a une boite de 718 a
   739 px et passait sous le seuil. Elle s'imprime comme avant, toutes
   les questions, l'exemple chiffre et les situations ouverts.
   ------------------------------------------------------------------------- */
@media screen and (max-width: 760px){
  .go-bascule{
    display:flex; align-items:center; justify-content:space-between; gap:16px;
    width:100%; min-height:56px; margin:0; padding:12px 14px 12px 20px;
    border:0; border-radius:var(--f-r-bulle); background:var(--f-blanc); color:var(--g-encre);
    box-shadow:inset 0 0 0 1px var(--f-filet-encre);
    font:500 17px/1.3 var(--f-police); letter-spacing:-0.01em; text-align:left;
    cursor:pointer; -webkit-tap-highlight-color:transparent;
  }
  .go-bascule-nom{ min-width:0; text-wrap:balance; }
  .go-bascule .go-plus::before{
    width:8px; height:8px; margin:-6px 0 0 -4px; border-radius:0; background:none;
    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;
  }
  .go-bascule .go-plus::after{ display:none; }
  .go-bascule[aria-expanded="true"] .go-plus::before{ transform:rotate(-135deg); margin-top:-2px; }
  /* L'anneau de focus au Klein, aussi dans une carte blanche (l'exemple
     chiffre, les situations) : la regle de scene.css qui y met l'anneau
     a l'encre (.f-page .f-carte-blanche :focus-visible, 0,3,0) passait
     devant la premiere. */
  .go-bascule:focus-visible,
  .f-page .f-carte-blanche .go-bascule:focus-visible{ outline:2px solid var(--g-klein); outline-offset:2px; }

  /* Les questions : le bouton prend la place de la cinquieme, au dessin
     des cartes de question (scene.css 10 : coins de 16 px), son libelle
     au Klein, pour qu'il ne se lise pas comme une question de plus. */
  .go-faq--court > .f3-question:nth-of-type(n+5){ display:none; }
  .f3-faq-liste > .go-tout{ border-radius:16px; padding-left:20px; color:var(--g-klein); box-shadow:var(--f-ombre-douce), inset 0 0 0 1px var(--f-filet-encre); }

  /* A lire ensuite : quatre lectures, puis « Toutes les lectures » (audit
     UI/UX du 9 octobre, point A05, 10/10/2026). Les suivantes etaient
     masquees ici sans moyen de les retrouver. Elles ne le sont plus que
     sous la classe que pose offre.js (section 4) avec son bouton, au
     dessin de « Toutes les questions » : sans script, toutes sont
     visibles. Le bouton suit la liste, a l'ecart de la grille de
     .f1-reperes (16 px, scene.css). */
  .go-lectures--court li:nth-child(n+5){ display:none; }
  .go-lectures > .go-tout{ border-radius:16px; padding-left:20px; color:var(--g-klein); box-shadow:var(--f-ombre-douce), inset 0 0 0 1px var(--f-filet-encre); }
}
@media screen and (max-width: 760px) and (hover:hover){ .go-bascule:hover .go-plus{ background:#dbe5fa; } }
@media screen and (max-width: 760px) and (prefers-reduced-motion: reduce){ .go-bascule .go-plus::before{ transition:none; } }

/* La barre d'appel des trois offres, au telephone : 72 px au lieu de 101.
   La ligne « Prix hors taxes, TVA de 20 %. » (offre.js, p.go-cta-tva,
   hors du lien) passait sous le bouton en 16 px : 29 px de plus, 15 % de
   l'ecran de l'iPhone 15 sur toute la page. Elle se pose maintenant en
   12 px a droite du bouton, sur deux lignes, juste apres le prix qui
   finit le bouton : le prix et sa mention restent cote a cote dans la
   barre, le balisage et le nom du lien ne changent pas. Pour lui faire
   place, le bouton se resserre (16 et 14 px de marge interieure, 10 px
   avant le prix) et son libelle passe sur deux lignes quand il le faut.
   Mesures Chromium et WebKit (393, 375, 320) : la barre fait 72 px, le
   bouton 48. La barre suit la regle de socle.css : rien sous 521 px de
   haut, rien tant que le bandeau de consentement est ouvert. Le retour en
   haut se pose au-dessus d'elle d'apres sa hauteur mesuree (--f-cta-h,
   artis.js), et le defilement au clavier garde 84 px libres au lieu de
   113 (meme poids que la regle de socle.css, feuille chargee apres). De
   761 a 860 px, la barre garde sa ligne de TVA sous le bouton (98 px). */
@media screen and (max-width: 760px) and (min-height: 521px){
  body.go-page.has-cta-mobile .cta-mobile{ display:flex; align-items:center; gap:10px; }
  html:has(body.go-page.has-cta-mobile){ scroll-padding-bottom:calc(84px + env(safe-area-inset-bottom, 0px)); }
}
@media screen and (max-width: 760px){
  .go-page .cta-mobile .btn{ flex:1 1 auto; min-width:0; gap:10px; padding:0 14px 0 16px; }
  .go-page .cta-mobile .btn > span:first-child{ min-width:0; line-height:1.2; text-align:left; text-wrap:balance; }
  .go-page .cta-mobile .go-cta-tva{
    flex:none; max-width:86px; margin:0;
    font-size:12px; line-height:1.3; text-align:left; text-wrap:wrap; color:var(--f-encre-2);
  }
}