/* ========================================================================= ARTIS VALORISATION, REFONTE : L'ACCUEIL SEUL (accueil.css) Apres socle.css et scene.css, avant rapport-vitrine.css et schema.css. Tire le 30/09/2026 de f-page.css (essais F et G) : tout ce qui ne sert qu'a l'accueil (couverture et bulles d'offre, demonstration, contenu du rapport, interlocuteur, confidentialite, avis, offre en cartes marine, reperes du pied de section). Chaque regle garde son texte et son ordre d'origine. ------------------------------------------------------------------------- */ /* ========================================================================= 1. BULLES, SURFACES CLAIRES ET BANDES ------------------------------------------------------------------------- */ .f-carte-aplat{ background:var(--f-blanc); } .f-bande--suit{ padding-top:var(--f-bande-bas); } /* Demande de Raphael du 04/10/2026 (soir) : le fond de l'accueil se rapproche du bleu du rapport, Pantone #15253E (rgb 21,37,62). La scene (WebGL ou image fixe) ne change pas : un voile fixe, peint juste au-dessus d'elle (meme couche, -1, plus loin dans le document) et sous tout le contenu, la tire vers ce bleu, plus gris et moins violet. Le bleu moyen du haut de la couverture (rgb 17,23,50, Chrome WebGL 1 440 x 900) devient 21,37,62 ; les reflets clairs bougent a peine. La bande sombre « Le contenu du rapport » prend le bleu du rapport. Les voiles de la couverture (section 13) passent du marine rgb 5,12,54 au bleu du rapport assombri de moitie (rgb 10,20,36) : le texte se pose sur la meme teinte que le fond. Depuis le 04/10/2026 (point 12 de Raphael : la couleur de l'accueil sur toutes les pages), ces trois reglages valent pour toutes les pages a scene et sont dans scene.css, section 1 : --f-aplat, --f-voile (que --g-voile-couv reprend, section 13) et le voile fixe (.f-page::after). Ils ne sont plus repetes ici. */ /* ========================================================================= 2. GRILLES, DUO COLLANT, RANGEES, LISTES ------------------------------------------------------------------------- */ .f-grille-4{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--f-ecart-grille); } /* Rangee de fonctionnalite : 1360 x 630, image 656 d'un cote, texte de l'autre, alternees */ .f-rang{ display:grid; grid-template-columns:1fr 1fr; align-items:center; min-height:var(--f-rang-hauteur); padding:24px; border-radius:var(--f-r-panneau); background:var(--f-aplat); } .f-rang + .f-rang{ margin-top:var(--f-rang-ecart); } .f-rang--miroir > :first-child{ order:2; } .f-rang-texte{ padding:24px; display:flex; flex-direction:column; gap:12px; max-width:548px; } .f-rang-image{ position:relative; border-radius:var(--f-r-carte); overflow:hidden; } .f-rang-image .f-numero{ position:absolute; top:24px; left:24px; } /* ========================================================================= 3. ENTREE (SEUL MOUVEMENT HORS SCENE) ------------------------------------------------------------------------- */ /* Entree : seul mouvement de la reference hors scene. Le contenu est visible sans script ; la classe .f-anime est posee par le script, puis retiree. */ .js .f-entree.f-anime{ transform:scale(var(--f-entree-echelle)); } .f-entree{ transition:transform var(--f-entree-duree) var(--f-entree-courbe); } @media (prefers-reduced-motion: reduce){ .f-entree, .js .f-entree.f-anime{ transform:none; transition:none; } } /* ========================================================================= 4. TELEPHONE : TOUT S'EMPILE ------------------------------------------------------------------------- */ @media (max-width: 760px){ .f-rang, .f-grille-4{ grid-template-columns:1fr; } /* relative : meme place que static, et le voile du deroulement s'y accroche */ .f-rang{ min-height:0; padding:20px; gap:24px; } .f-rang--miroir > :first-child{ order:0; } .f-rang-texte{ padding:0; } } /* ========================================================================= 5. LA COUVERTURE ------------------------------------------------------------------------- */ /* --- La couverture ------------------------------------------------------------ Reference (d_00_0) : titre 72/72 500 en bas a gauche (x 40) ; colonne de droite posee sur le bas, boutons en ligne de 812 a 860 (40 px sous les boutons), largeur auto, 4 px d'ecart. Ici la colonne fait 560 px a partir de x 840 (les deux libelles font environ 550 px) et porte, au-dessus des boutons, la plaque des trois offres. La section tient un ecran ; la plaque la suit dans le document (.f-couv-suite) et, sur ordinateur, vient se poser dans la colonne de droite, 24 px au-dessus des boutons. */ .f-couv{ position:relative; min-height:clamp(620px, 100svh, 1100px); --g-voile-couv:var(--f-voile, 10,20,36); /* voiles sous le texte, section 13 (04/10/2026 : le bleu du rapport assombri, scene.css 1) */ display:flex; flex-direction:column; justify-content:flex-end; } .f-couv-grille{ display:grid; grid-template-columns:minmax(0,1fr) 560px; grid-template-areas:"texte boutons"; column-gap:24px; align-items:end; padding:140px 0 var(--f-couv-bas, 40px); } .f-couv-texte{ grid-area:texte; } .f-couv-boutons{ grid-area:boutons; margin-top:0; flex-wrap:nowrap; } .f-couv-boutons .f-bouton{ flex:0 0 auto; white-space:nowrap; } .f-couv-etiquette{ margin-bottom:28px; } .f-couv-titre{ max-width:760px; font-size:min(var(--f-t-affiche), 5vw); text-wrap:balance; } /* Brief editorial du 04/10/2026 (section 7, UI04) : « Evaluer votre entreprise. Eclairer vos decisions. », une phrase par ligne au large ; puis l'introduction, les trois reperes (a la place des chiffres 4, 52 et 5) et, sous les boutons, la reassurance. Le titre suit la largeur de sa colonne (cqi), 64 px au plus (H1 de 60 a 68 px au bureau, section 20). Raphael, 04/10/2026 (soir) : « Valoriser votre entreprise. » remplace « Evaluer votre entreprise. ». La premiere phrase mesure 11,3 fois la taille du titre (10,7 avant) : 8,3cqi au lieu de 8,8 garde la meme marge, la phrase occupe 94 % de la colonne au plus. */ .f-couv-texte{ container-type:inline-size; } .f-couv-titre{ line-height:1.06; } .f-couv-intro{ margin-top:24px; max-width:600px; font-size:var(--f-t-chapo); line-height:1.45; color:var(--f-texte); } /* Demande de Raphael du 04/10/2026 (soir) : l'introduction est justifiee, sans grands blancs entre les mots. Trois reglages, mesures dans Chromium (ecart le plus large entre deux mots, hors derniere ligne ; une espace normale fait 4,4 px a 20 px) : - des cesures choisies, en ­ dans le texte (index.html), aux coupures du francais, trois lettres au moins de chaque cote. hyphens:manual : seules celles-la servent, le meme rendu dans tous les navigateurs, avec ou sans dictionnaire. Le jeu de coupures a ete retenu par essais, de 320 a 440 px : « entreprise », dernier mot, ne se coupe pas (sinon « prise. » seul sur la derniere ligne), ni « activite » ; - le retour a la ligne simple (text-wrap:wrap) : le mode « pretty » de .f-chapo reequilibre les dernieres lignes et elargissait les blancs des precedentes (19 px a 393, 13 au plus sans lui) ; - 572 px de large au plus, au lieu de 600 : les quatre lignes se remplissent sans couper un mot (8 px au plus ; 14 a 600 px). Entre 1 200 et 1 271 px, la colonne est plus etroite (536 a 571 px) : 10 px au plus, avec une cesure. Telephone (17 px, espace de 4,5 px) : 13 px au plus aux largeurs courantes (320, 360, 375, 390, 393, 412, 414, 430 px), contre 35 px a 320 sans cesures. La derniere ligne reste au fer a gauche. */ .f-couv-intro{ max-width:572px; text-align:justify; text-align-last:left; text-justify:inter-word; -webkit-hyphens:manual; hyphens:manual; text-wrap:wrap; } .f-couv-reperes{ list-style:none; margin:24px 0 0; padding:0; display:grid; gap:8px; } .f-couv-reperes li{ display:grid; grid-template-columns:18px minmax(0,1fr); column-gap:10px; font-size:17px; line-height:1.35; font-weight:500; letter-spacing:var(--f-serre); color:var(--f-texte); } /* La coche des cartes d'offre (.g-carte-inclus, scene.css 13), a l'azur de la scene */ .f-couv-reperes li::before{ content:""; justify-self:center; width:10px; height:5px; margin-top:.42em; border-left:2px solid var(--f-azur-scene, var(--g-azur)); border-bottom:2px solid var(--f-azur-scene, var(--g-azur)); transform:rotate(-45deg); } /* 10/10/2026, demande de Raphael : les trois reperes deviennent les trois piliers de la construction du rapport (index.html), a toutes les largeurs. text-wrap:balance equilibre les lignes d'un repere coupe au telephone, la ou le retour simple laissait un mot seul sur la derniere ligne. Sur une ligne (ordinateur, tablette), rien ne change. Une espace insecable tient « jour ouvre » dans la phrase sous les boutons, qui laissait « ouvre. » seul sur sa ligne de 412 a 454 px : « Reponse sous un / jour ouvre. ». 11/10/2026, texte des points donne par Raphael, mot pour mot : « Analyse de votre entreprise et de son marche », « Valorisation sur comptes retraites, selon des methodes adaptees », « Recommandations pour renforcer la valeur de votre entreprise ». Releve de 240 a 540 px de large, le meme dans WebKit et Chromium de 296 a 540 : le premier tient sur une ligne des 391 px (« Analyse de votre entreprise / et de son marche » en dessous), le deuxieme des 529 px (« Valorisation sur comptes retraites, / selon des methodes adaptees » de 296 a 528), le troisieme des 510 px (« Recommandations pour renforcer / la valeur de votre entreprise » de 294 a 509). Aucune ligne n'y finit sur « de », « des » ou « la », aucun mot n'est seul. Les espaces insecables (index.html, « de son marche », « des methodes adaptees », « la valeur », « de votre entreprise ») ne changent rien a ces coupes. Elles tiennent la fin des points quand le navigateur n'equilibre pas (Safari avant 17.5) : le retour simple y laissait « marche », « adaptees » ou « entreprise » seuls, ou une ligne finie sur « de », « des » ou « la », de 296 a 528 px. Il donne desormais « Analyse de votre entreprise et / de son marche » de 296 a 390 px et « Valorisation sur comptes retraites, selon / des methodes adaptees » de 352 a 528, les autres coupes etant celles de balance. Sous 296 px, le deuxieme repere passe sur trois lignes, et les deux moteurs coupent parfois a des mots differents, avec le meme nombre de lignes. Au-dessus de 540 px, chaque point tient sur une ligne (releve de 541 a 1 600 px, WebKit et Chromium). */ .f-couv-reperes li{ text-wrap:balance; } .f-couv-boutons .f-couv-rassure{ flex:1 0 100%; margin:8px 0 0; font-size:14px; line-height:1.4; letter-spacing:0; color:var(--f-texte); } /* Clarte, demande 5 : « Revelez la valeur de votre entreprise », « la valeur » en azur (#7FB0E8, la valeur claire du site calibree pour le marine ; 7,6:1 sur #121835, 8,4:1 sur #05051c). */ /* Aube (01/10/2026) : la scene est plus claire ; l'accent prend l'azur pale de la scene (--f-azur-scene, scene.css), pose sur le voile d'ardoise de la couverture (section 13). Bleu profond (03/10/2026) : cet azur revient aux trois quarts vers celui du site de depart (#88B6EB, scene.css). */ /* 04/10/2026 : plus de white-space:nowrap. « Eclairer vos decisions. » (accueil) et « pour votre projet ? » (/valorisation) passent sur deux lignes au telephone. */ .f-couv-accent{ color:var(--f-azur-scene, var(--g-azur)); } /* La plaque des offres, dans la colonne de droite (ordinateur) */ @media (min-width: 1200px){ .f-couv-bloc{ display:grid; } .f-couv-bloc > *{ grid-area:1 / 1; } /* 04/10/2026 : la reassurance (une ligne de 14 px, sa plaque et 8 px dessus, 34 px) s'ajoute sous les boutons : la plaque monte d'autant. */ .f-couv-suite{ align-self:end; display:flex; justify-content:flex-end; pointer-events:none; margin-bottom:calc(var(--f-couv-bas, 40px) + var(--f-h-bouton) + 24px + 34px); } .f-couv-offres{ width:560px; pointer-events:auto; } .f-couv-titre{ font-size:min(64px, 8.3cqi); } } /* Au-dessus du telephone, les deux boutons en ligne et la reassurance dessous, a la largeur de son texte, sur la plaque marine de l'ancienne mention de TVA (section 13) : a 1 440, l'arete claire du verre la croise. */ @media (min-width: 761px){ .f-couv-boutons{ display:grid; grid-template-columns:auto auto; justify-content:start; } .f-couv-boutons .f-couv-rassure{ grid-column:1 / -1; justify-self:start; width:fit-content; margin-left:-8px; padding:3px 8px; border-radius:6px; background:rgba(var(--f-voile),.40); } } /* Les bulles des offres : voir le bloc G, plus bas. */ /* Ecran d'ordinateur court */ @media (max-height: 760px) and (min-width: 761px){ .f-couv-grille{ padding-top:110px; } .f-couv-titre{ font-size:min(56px, 8.3cqi); } .f-couv-etiquette{ margin-bottom:20px; } } /* Entre 761 et 1199 px : une colonne, les boutons sous le texte ; la plaque suit la section, en trois colonnes, sur la scene. */ @media (max-width: 1199px){ .f-couv-grille{ grid-template-columns:minmax(0,1fr); grid-template-areas:"texte" "boutons"; row-gap:32px; } .f-couv-boutons{ justify-self:start; } .f-couv-titre{ font-size:clamp(40px, 6.4vw, 64px); } .f-couv-suite{ margin-top:8px; } } /* Telephone. Brief du 04/10/2026 (UI04) : le titre commencait vers 470 px sous le haut de l'ecran, la section tenant tout le premier ecran (100svh) et calant son contenu en bas. Elle suit desormais son texte : aucune hauteur imposee, le contenu part sous la barre (88 px), et la plaque des offres vient juste apres, sur la scene, qui reste visible autour. Le bas garde --f-couv-bas (bandeau de consentement). Sur l'accueil, depuis le 09/10/2026 (audit telephone du 8 octobre), le haut de la grille est a 80 px et le titre a 36 px quelle que soit la hauteur de la fenetre : section 16. Ces valeurs restent celles de /valorisation et du calculateur, qui chargent aussi cette feuille. Sur l'accueil, depuis le 09/10/2026 (soir, demande de Raphael), a 540 px de large et moins, la couverture reprend la hauteur de la petite fenetre, moins une lisiere de la premiere bulle : section 18. Depuis le 10/10/2026 (demande de Raphael), elle s'y lit de haut en bas, l'etiquette juste sous la barre et trois espaces egaux jusqu'aux boutons (section 18, points 2 et 3). */ @media (max-width: 760px){ .f-couv{ min-height:0; justify-content:flex-start; } .f-couv-grille{ display:flex; flex-direction:column; row-gap:0; padding:88px 0 var(--f-couv-bas, 24px); } /* La grille aligne ses enfants en bas (align-items:end) ; en colonne flexible, cela les cale a droite. La colonne de texte ne tenait la gouttiere que parce que la precision des 5 jours ouvres, longue, la faisait aussi large que l'ecran ; sans elle (01/10/2026), elle glissait de 34 px vers la droite (WebKit 393). Etiree comme les boutons, elle s'aligne sur le nom de la barre et la gouttiere. */ .f-couv-texte{ align-self:stretch; } .f-couv-etiquette{ margin-bottom:14px; line-height:1.4; } .f-couv-etiquette span{ display:block; } .f-couv-titre{ font-size:clamp(34px, 10.2vw, 40px); line-height:1.06; } /* Le chapo de la couverture n'est plus affiche au telephone (06/10/2026, demande de Raphael, « sur la page d'accueil on enleve » le paragraphe « Artis analyse vos comptes »). Il reste dans la page, pour la tablette, l'ordinateur et les moteurs de recherche. Les reperes suivent le titre, a 24 px. */ .f-couv-intro{ display:none; } .f-couv-reperes{ margin-top:24px; gap:6px; } .f-couv-reperes li{ font-size:16px; } .f-couv-boutons{ flex-direction:column; flex-wrap:nowrap; gap:8px; margin-top:22px; align-self:stretch; } .f-couv-boutons .f-bouton{ width:100%; } .f-couv-boutons .f-couv-rassure{ flex:none; margin-top:4px; } .f-couv-suite{ margin-top:0; } } /* Fenetre basse : sur l'accueil, la section 16 l'emporte (une seule couverture a toute hauteur, 09/10/2026). */ @media (max-width: 760px) and (max-height: 700px){ .f-couv-grille{ padding-top:80px; } .f-couv-titre{ font-size:34px; } } /* Tant que le bandeau de consentement est ouvert, le contenu de la couverture remonte de sa hauteur (--f-consent-h, posee par socle.js) : le bandeau ne cache plus les boutons. */ body.consent-open{ --f-couv-bas:calc(var(--f-consent-h, 0px) + 44px); } /* Premiere visite (VIS-1, 03/10/2026) : le bandeau s'ouvrait apres le premier rendu (artis.js, a DOMContentLoaded) et toute la couverture remontait d'environ 250 px au telephone (CLS 0,21 a 0,34 de 320 a 412, 0,12 a 1440). html.consent-attendu, posee par le script de tete d'index.html quand aucun choix n'est enregistre, reserve sa place des le premier rendu. Tant que le bandeau n'est pas mesure (--f-consent-h, socle.js), sa hauteur est estimee : hauteurs relevees le 03/10/2026, identiques dans Chromium et WebKit, pour le texte du bandeau d'artis.js (une ligne de 17,55 px de plus a chaque palier). Si ce texte change, refaire le releve. Releve refait le 09/10/2026 (audit telephone du 8 octobre, socle.css 10) : sous 761 px, le bandeau est une feuille du bas pleine largeur, sa deuxieme phrase repliee (decision D4). Hauteurs mesurees largeur par largeur de 280 a 760 px, puis en paysage tactile (moins de 521 px de haut, 560 px de large au moins, comme socle.css 10) de 560 a 760 px, identiques dans Chromium et WebKit. Au-dela de 760 px, le bandeau ne change pas (203 px), en paysage tactile comme a la souris (les paliers de 761 a 1 000 px sont retires le meme jour, regle du chantier). La table suit le bandeau du socle : refaire ce releve a chaque changement de son texte ou de son dessin au telephone. Depuis la seconde passe du 09/10/2026 (section 17, E6), l'accueil ne garde plus de reserve sous 761 px : les paliers du telephone ne servent plus qu'a la verification VIS-1 du script de tete d'index.html, qui compare le bandeau mesure a cette estimation. Depuis la reprise du 09/10/2026 au soir (section 18, point 0), a 540 px et moins, ils servent aussi a la garde de la premiere visite, le temps que socle.js mesure le bandeau. 10/10/2026, audit UI/UX du 9 octobre, point A01 (reprise) : le bandeau se resserre sur 600 px de haut ou moins et en paysage tactile (socle.css 10). La table n'avait pas suivi ces paliers : sur un ecran bas, l'estimation gardait la hauteur d'avant (189 px au lieu de 175 a 320 x 568), la couverture se serrait d'abord trop, puis descendait de 14 px quand la mesure arrivait, et le script de tete ecrivait son avertissement VIS-1. Paliers de hauteur ajoutes, valeurs arrondies comme celles de socle.js, mesurees le 10/10/2026 largeur par largeur, les memes dans WebKit et Chromium : 125, 142, 158, 175 et 192 px sur 600 px de haut ou moins, 88, 104, 121 et 138 px en paysage tactile. */ html.consent-attendu{ --f-consent-estime:203px; } @media (max-width: 760px){ html.consent-attendu{ --f-consent-estime:137px; } } @media (max-width: 536.98px){ html.consent-attendu{ --f-consent-estime:154px; } } @media (max-width: 410.98px){ html.consent-attendu{ --f-consent-estime:172px; } } @media (max-width: 344.98px){ html.consent-attendu{ --f-consent-estime:189px; } } @media (max-width: 300.98px){ html.consent-attendu{ --f-consent-estime:207px; } } @media (max-width: 760px) and (max-height: 600px){ html.consent-attendu{ --f-consent-estime:125px; } } @media (max-width: 536.98px) and (max-height: 600px){ html.consent-attendu{ --f-consent-estime:142px; } } @media (max-width: 410.98px) and (max-height: 600px){ html.consent-attendu{ --f-consent-estime:158px; } } @media (max-width: 344.98px) and (max-height: 600px){ html.consent-attendu{ --f-consent-estime:175px; } } @media (max-width: 300.98px) and (max-height: 600px){ html.consent-attendu{ --f-consent-estime:192px; } } @media (hover: none) and (pointer: coarse) and (max-height: 520px) and (min-width: 560px) and (max-width: 760px){ html.consent-attendu{ --f-consent-estime:88px; } } @media (hover: none) and (pointer: coarse) and (max-height: 520px) and (min-width: 560px) and (max-width: 676.98px){ html.consent-attendu{ --f-consent-estime:104px; } } @media (hover: none) and (pointer: coarse) and (max-height: 520px) and (min-width: 560px) and (max-width: 610.98px){ html.consent-attendu{ --f-consent-estime:121px; } } @media (hover: none) and (pointer: coarse) and (max-height: 520px) and (min-width: 560px) and (max-width: 566.98px){ html.consent-attendu{ --f-consent-estime:138px; } } html.consent-attendu body{ --f-couv-bas:calc(var(--f-consent-h, var(--f-consent-estime)) + 44px); } /* ========================================================================= 6. GROUPE 1 : DEMONSTRATION, CONCEPTION, CONTENU DU RAPPORT ------------------------------------------------------------------------- */ /* --- Commun ---------------------------------------------------------------- */ /* Dans les bandes, l'etiquette tombe 40 px sous le pad de la bande (3705 = 3465 + 200 + 40 ; 4677 = 4577 + 60 + 40), 20 au telephone. */ .f1-bande-corps{ padding-top:var(--f-tete-bande); } #demonstration, #conception, #contenu-du-rapport{ scroll-margin-top:100px; } .f1-demo :focus-visible, .f1-contenu :focus-visible{ outline:2px solid var(--f-texte); outline-offset:3px; border-radius:var(--f-r-bouton); } /* --- 1. La demonstration : le grand panneau de verre ---------------------- */ /* Avant le panneau, 487 px de scene (haut du panneau a 1390, comme la reference) ; apres, le moment clair : 40 % de la fenetre de scene (un ecran entier avant la retouche finale, qui allongeait la page sans rien dire). Aucun contenu. */ .f1-demo{ margin-top:var(--f-avant-demo); padding-bottom:var(--f-souffle-clair); } /* Brief du 04/10/2026 (sections 19 et 20, UI04) : le vide avant la demonstration se reduit (487 px au bureau, 320 au telephone, sans contenu) ; la scene reste visible entre la couverture et le panneau. */ .f1-demo{ margin-top:clamp(96px, 14vh, 160px); } /* La legende permanente du cas fictif, dans l'en-tete du cadre : « Groupe Montvalier. Cas fictif presente a titre d'illustration. », en phrase et non plus en etiquette capitale (rapport-vitrine.css la dessinait ainsi). */ .g-rapport--accueil .g-rapport-note{ margin-left:0; font-size:15px; line-height:1.3; font-weight:400; letter-spacing:0; text-transform:none; color:var(--f-attenue-70); } /* Titre, boutons et chapo ; le cadre suit a 40 px (gap du panneau) : boutons 1604 + 48 = 1652, cadre a 1692. */ .f1-demo-entete{ margin-bottom:0; } .f1-demo-entete .f-titre-section{ max-width:600px; } /* 552 dans la reference */ /* Bouton verre a pastille : meme pad que le bouton clair */ .f1-bouton-verre-pastille{ padding:var(--f-pad-bouton); } /* G : le cadre du produit et ses onglets sont dans rapport-vitrine.css. */ /* Entree : fondu du panneau, pose par frag-1.js seulement (voir la), rien sans script ni en mouvement reduit. */ .f1-demo-panneau{ transition:opacity 600ms var(--f-entree-courbe); } .js .f1-demo.f1-voile .f1-demo-panneau{ opacity:0; } /* --- 2. La conception du rapport : G, bande claire, dans schema.css ----- */ /* --- 3. Le contenu du rapport : rangees alternees ------------------------- */ /* Etiquette 12 + 40 puis titre (5029 -> 5081), texte a 12, bouton a 40 */ /* Retouche finale : plus de chiffre romain au-dessus du titre (demande de Raphael) ; l'alternance image et texte porte seule le rythme. */ .f1-rang .f-titre-section{ max-width:520px; } .f1-rang .f-texte{ max-width:500px; } /* G : l'image seule, sans le cadre #100f14 ni son numero ; une ombre douce la detache de l'aplat. */ .f1-rang-image{ align-self:center; display:grid; place-items:center; overflow:visible; background:none; } .f1-rang-image img{ display:block; width:100%; height:auto; max-width:600px; border-radius:6px; box-shadow:0 24px 60px rgba(0,0,0,.45), 0 4px 14px rgba(0,0,0,.30); } /* V : texte seul, sans hauteur imposee */ .f1-rang--seul{ min-height:0; grid-template-columns:minmax(0,1fr); } .f1-rang-boutons{ margin-top:28px; } .f1-lien{ color:inherit; text-decoration:underline; text-decoration-color:var(--f-attenue-50); text-decoration-thickness:1px; text-underline-offset:3px; } @media (hover:hover){ .f1-lien:hover{ text-decoration-color:currentColor; } } /* --- Tablette : les en-tetes en deux colonnes passent en une --------------- */ @media (max-width: 1100px) and (min-width: 761px){ .f1-demo-entete, .f1-contenu-entete{ grid-template-columns:minmax(0,1fr); gap:24px; align-items:start; } } /* --- Telephone (393) ------------------------------------------------------- Les marges, les bandes et les rangees de l'accueil au telephone sont reprises le 09/10/2026 dans la section 16 (audit telephone du 8 octobre). */ @media (max-width: 760px){ .f1-demo{ margin-top:64px; } .f1-demo-entete{ gap:24px; } .f1-demo-boutons .f-bouton{ flex:1 1 auto; } /* chacun sa ligne si besoin */ .f1-rang .f-etiquette{ margin-bottom:12px; } .f1-rang-image{ order:-1; } .f1-rang-image img{ max-height:none; box-shadow:0 14px 36px rgba(0,0,0,.45), 0 3px 10px rgba(0,0,0,.30); } .f1-rang-boutons{ margin-top:16px; } } /* ========================================================================= 7. GROUPE 2 : DEROULEMENT, INTERLOCUTEUR, CONFIDENTIALITE, AVIS ------------------------------------------------------------------------- */ .f2-interlocuteur, .f2-confidentialite{ margin-top:var(--f2-entre); } /* --- Carte blanche (Benefits, +48 %) -------------------------------------- Fond #ffffff, texte #000000, 250 de haut, pad 32. Le flou de .f-carte n'a pas d'effet sous un fond opaque : on le coupe (economie GPU sur iPhone). */ .f2-carte-blanche{ min-height:0; -webkit-backdrop-filter:none; backdrop-filter:none; } .f2-chapo-carte{ max-width:none; line-height:1.3; } /* 20/26 dans les cartes de la reference */ .f2-chapo-carte.f-long{ line-height:var(--f-l-long); } .f2-boutons-bas{ margin-top:auto; margin-bottom:0; } /* --- Cartes de confidentialite (Benefits, cartes de verre 6 %) ------------ */ .f2-carte-conf{ min-height:0; } /* clarte : la bulle blanche suit son texte (250 px laissaient un creux blanc) */ .f2-texte-carte{ max-width:none; } /* Bouton verre a long libelle : il peut passer sur deux lignes au telephone sans deborder (le jeton .f-bouton est en line-height 1, sans retour). */ .f2-bouton-long{ text-align:left; line-height:1.2; } .f2-bouton-long > span:first-child{ min-width:0; } /* --- Avis (Testimonials) -------------------------------------------------- Bande #03021b, 200 px d'entree, en-tete centre, cartes a fond d'aplat (invisibles dans la bande), pad 32, signature en haut, citation en bas. Pas d'etiquette au-dessus du titre : l'accueil n'en a pas. Pas d'avatar : la signature commence au bord de la carte. */ .f2-avis{ position:relative; } /* Quatre colonnes a partir de 1200 px, deux en dessous, une au telephone (f-jetons.css). Les cartes ont un fond opaque : pas de flou. */ /* Clarte, correctifs du jury : a 1440, quatre colonnes donnaient des citations de 20 px sur 22 signes par ligne ; deux sur deux au-dessus de 760 px (60 signes environ), grille bornee a 1120 px. */ @media (min-width:761px){ .f2-avis-grille{ grid-template-columns:repeat(2,minmax(0,1fr)); max-width:1120px; margin-inline:auto; } } .f2-avis-carte{ margin:0; min-height:0; color:var(--f-texte-aplat); -webkit-backdrop-filter:none; backdrop-filter:none; } /* Citation : 20/26 (reference : 20 px, interligne 26). Clarte : elle ne se cale plus en bas de carte (margin:auto decalait les hauts de citation d'une carte a l'autre) ; elle suit la signature a l'ecart fixe de la carte (gap de 24). */ .f2-avis-carte{ justify-content:flex-start; } .f2-avis-carte > p{ margin:0; font-size:var(--f-t-chapo); line-height:1.3; letter-spacing:var(--f-serre); text-wrap:pretty; } /* Signature : en haut, sans toucher a l'ordre du balisage (la citation reste lue en premier). Les virgules de la source sont des noeuds de texte : la taille nulle les efface a l'ecran (les lecteurs d'ecran les lisent), chaque segment reprend sa taille et passe a la ligne. Nom 20/26, fonction et chiffre d'affaires en etiquette (12, 500, capitales, 0,3 em), comme « CFO, GLOBAL BANK » sous « Jane Doe ». */ .f2-avis-carte .avis-sig{ order:-1; display:flex; flex-direction:column; align-items:flex-start; gap:8px; font-size:0; line-height:0; letter-spacing:0; } .f2-avis-carte .avis-seg{ font-size:var(--f-t-etiquette); line-height:1.35; font-weight:500; letter-spacing:var(--f-espace-etiquette); text-transform:uppercase; } .f2-avis-carte .avis-seg:first-child{ font-size:var(--f-t-chapo); line-height:1.3; letter-spacing:var(--f-serre); text-transform:none; margin-bottom:-3px; /* nom a 20/26 puis etiquette 5 px dessous, comme la reference */ } .f2-avis-carte .avis-seg b{ font-weight:var(--f-g-texte); } @media (max-width:760px){ .f2-carte-blanche, .f2-carte-conf{ min-height:0; } .f2-chapo-carte{ line-height:1.3; } .f2-chapo-carte.f-long{ line-height:1.4; } .f2-avis-carte{ min-height:0; padding:24px; } .f2-avis-carte > p{ line-height:1.3; } .f2-avis-carte .avis-seg{ font-size:12px; } /* 11 dans la reference : 12 pour lire la fonction et le chiffre */ .f2-avis-carte .avis-seg:first-child{ font-size:var(--f-t-chapo); } } /* ========================================================================= 8. GROUPE 3 : L'OFFRE, LES QUESTIONS, L'APPEL FINAL ------------------------------------------------------------------------- */ /* Boites : les jetons ne posent pas de remise a zero ; sans elle, un bouton pleine largeur deborde de sa carte de ses marges internes. */ /* ---------- L'OFFRE ---------------------------------------------------- */ .f3-offre{ padding-top:calc(var(--f-bande-bas) + var(--f3-tete-bande)); } /* Intro d'Artis (la reference n'en a pas) : deux phrases, une par ligne. */ .f3-intro{ max-width:none; } .f3-intro span{ display:block; } /* Les cartes : voir le bloc G, plus bas. */ /* Socle. Clarte, correctifs du jury : une seule ligne sous les trois cartes (TVA, premier echange, lien vers le detail), au lieu d'un titre, de trois puces et de trois lignes de conditions. Texte en 15/400 encre-2, lien en 15/500 encre souligne ; au telephone, les trois segments passent chacun a la ligne, centres. 02/10/2026 (critique 2 de Raphael, un seul bouton pour voir l'offre) : le lien vers le detail est retire, chaque carte mene a sa page d'offre ; restent la TVA et le premier echange. Les regles .f3-socle-lien restent tant que outils/construire-offre.py ecrit encore ce lien. */ p.f3-socle{ margin:40px auto 0; max-width:none; display:flex; flex-wrap:wrap; justify-content:center; align-items:center; column-gap:20px; row-gap:4px; text-align:center; font-size:15px; line-height:1.4; letter-spacing:0; color:var(--f-encre-2); } .f3-socle-lien{ display:inline-flex; align-items:center; gap:6px; min-height:44px; font-weight:500; color:var(--g-encre); text-decoration:underline; text-decoration-color:rgba(11,29,54,.3); text-decoration-thickness:1px; text-underline-offset:4px; } .f3-socle-lien:focus-visible{ outline:2px solid var(--g-klein); outline-offset:2px; border-radius:4px; } @media (hover:hover){ .f3-socle-lien:hover{ text-decoration-color:currentColor; } .f3-socle-lien:hover .g-carte-fleche{ transform:translateX(3px); } } @media (max-width: 760px){ p.f3-socle{ flex-direction:column; margin-top:28px; font-size:14px; } } /* ---------- L'APPEL FINAL : LA NOTE SOUS LE BOUTON -------------------- Brief du 04/10/2026 : un seul bouton, puis « Premier echange sans engagement. Reponse sous un jour ouvre. » (voiles de scene.css). */ .f3-appel-note{ margin:16px 0 0; font-size:15px; line-height:1.4; letter-spacing:0; color:var(--f-texte); } /* ---------- REPERES PAR SECTEUR, SUR LE PAPIER ------------------------- */ /* Clarte, correctifs du jury : la liste quitte la bande marine du contenu du rapport et vient sous les questions. Meme composant (.f1-reperes), repeint a l'encre : filets d'encre a 12 %, pastille encre a fleche blanche, largeur de la liste des questions. Depuis le 05/10/2026, cette liste fait 760 px (scene.css 9, la mesure de la reponse) : les reperes la suivent, et le titre prend 180 px au lieu de 220, pour que le plus long lien (« Evaluer une entreprise du batiment... ») tienne sur une ligne. */ .f3-reperes{ max-width:760px; margin:var(--f-rang-ecart) auto 0; padding:0; grid-template-columns:minmax(0,180px) minmax(0,1fr); gap:32px; } .f3-reperes .f-titre-carte{ font-size:20px; line-height:1.3; font-weight:500; letter-spacing:var(--f-serre); color:var(--g-encre); } .f3-reperes ul{ border-top-color:rgba(11,29,54,.12); } .f3-reperes li{ border-bottom-color:rgba(11,29,54,.12); } .f3-reperes a{ min-height:56px; padding:12px 0; font-size:17px; line-height:1.3; color:var(--g-encre); } .f3-reperes .f-pastille{ width:28px; height:28px; background:var(--g-encre); color:var(--f-blanc); } .f3-reperes a:focus-visible{ outline:2px solid var(--g-klein); outline-offset:2px; border-radius:4px; } @media (max-width: 760px){ .f3-reperes{ grid-template-columns:minmax(0,1fr); gap:12px; margin-top:60px; } .f3-reperes a{ font-size:16px; } } /* ========================================================================= 9. GROUPE 3 AU TELEPHONE ------------------------------------------------------------------------- */ /* ---------- TELEPHONE -------------------------------------------------- */ @media (max-width: 760px){ /* Offre : cartes empilees, pad 20, prix 28 (jetons). */ .f3-intro span{ display:inline; } } /* ========================================================================= 10. LES TROIS BULLES D'OFFRE DE LA COUVERTURE ------------------------------------------------------------------------- */ /* --- Les trois bulles d'offre de la couverture ------------------------------ Clarte, demandes 1 et 6 : trois bulles claires sur la scene. Seuls le prix (56/600, 500 en DM Sans) et le mot cle (20/600, 500 en DM Sans) restent ; le seuil de chiffre d'affaires est retire (retouches 4, 30/09/2026), la TVA passe sous les bulles. Offre du 03/10/2026 : 490 et 890 euros HT sont des prix de depart, « A partir de » en petit au-dessus du montant (.prix-dep, socle.css), et la mention du prix exact suit celle de la TVA sous les bulles. Toute la bulle est la cible du lien (::after de l'ancre du nom) ; la pastille est un signe, hors de l'arbre d'accessibilite. Ordinateur : une bulle horizontale (prix | nom | pastille), les trois colonnes partagees par sous-grille : prix, noms et pastilles s'alignent d'une bulle a l'autre. Tablette : trois colonnes ; telephone : empilees. Retouches 5 (30/09/2026), demande de Raphael : les bulles grandissent un peu (prix 56 -> 64, « Sur devis » 38 -> 44, nom 20 -> 22, marges 18 -> 22 ; memes proportions aux ecrans bas, en tablette et au telephone) et chaque nom porte dessous « Valorisation » en tres petit (.g-bulle-sous : 12 px en capitales espacees, comme les etiquettes ; encre #495A70, 5,6:1 sur #D9E7F8). Les regles .g-bulle ne servent qu'a l'accueil : pages d'offre et prototypes ne bougent pas. Reprise (meme jour) : grandies ainsi, les bulles montaient de 72 px au-dessus du surtitre de gauche (la colonne est calee en bas). Au large, le prix garde 64 px mais la bulle se resserre : marges 14 px en haut et en bas, 8 px entre bulles, nom sur 1,1 et « Valorisation » 3 px dessous. Le haut de la colonne revient a la hauteur du surtitre. En tablette, « Valorisation » se pose au bas de chaque bulle, a la meme hauteur dans les trois. */ /* Brief editorial du 04/10/2026 (UI05 et UI09). L'objet de la mission passe avant le prix : chaque bulle se lit nom, perimetre, honoraires, fleche, dans l'ordre du balisage. Le nom grandit (24 px au bureau), le prix recule (36 px au lieu de 64), « A partir de » et « HT » restent lisibles (13 px au moins). « Valorisation » sous le nom cede la place a la ligne de perimetre (#495A70 sur #D9E7F8, 5,6:1). Ordinateur : nom | prix | pastille, colonnes partagees par sous-grille ; tablette : trois bulles en ligne, nom et pastille en haut, prix dessous ; telephone : la meme bulle, empilees. UI09 : le lien du nom avait 24 px de haut a 390 ; il prend 10 px de marge interne en haut et en bas (45 px et plus), repris par une marge negative : la bulle ne bouge pas. Toute la bulle reste la cible (::after du lien), sans lien imbrique. */ /* Demande de Raphael du 04/10/2026 (soir) : « A partir de » cale a droite au-dessus du montant, et « HT » en tres petit a cote, ne faisaient pas propre. Le prix passe sous le perimetre, aligne a gauche comme le nom, et se lit d'une traite sur une seule ligne de base : « A partir de 490 euros HT ». « A partir de » et « HT » prennent l'encre du perimetre (#495A70, 5,6:1 sur #D9E7F8), le montant reste a l'encre et recule a 28 px, sous le nom (24 px). La pastille se centre sur la hauteur de la bulle. Le nom a toute la largeur : « Groupes et situations particulieres » tient sur une ligne au large. Plus de sous-grille : chaque bulle a ses deux colonnes, de meme largeur d'une bulle a l'autre. */ .g-bulles{ list-style:none; margin:0; padding:0; display:grid; gap:8px; grid-template-columns:minmax(0,1fr); } .g-bulle{ position:relative; display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"nom voir" "prix voir"; column-gap:20px; row-gap:10px; padding:14px 20px 15px 24px; border-radius:var(--f-r-bulle); /* Retouches 4 (30/09/2026) : azur laiteux au lieu du blanc, a la demande de Raphael. #D9E7F8 est l'azur #7FB0E8 a 30 % sur blanc. Mesure sur la scene (Chrome 1440, 393) : encre 13,1:1, Klein 8,5:1, pastille 13,3:1. */ --g-bulle-fond:#D9E7F8; background:var(--g-bulle-fond); box-shadow:var(--f-ombre-bulle); transition:transform .16s var(--f-entree-courbe), box-shadow .2s var(--f-entree-courbe); } /* Demande de Raphael du 04/10/2026 (« les bulles de l'offre un peu transparentes », telephone et ordinateur) : l'azur laiteux devient un verre clair, plus plein en haut (86 %) qu'en bas (76 %), la scene passe dessous. Un lisere blanc d'un pixel et un reflet sur l'arete du haut dessinent le verre ; l'ombre des bulles reste. Pas de flou ici, a dessein : le nav des bulles s'efface sous la barre par son opacite (data-f-efface, socle.js), et un parent a opacite reduite coupe le backdrop-filter de ses enfants (Chrome) : le flou tombait d'un coup des le debut de l'effacement, les traits de la scene apparaissaient nets dans la bulle (mesure : 3,8 niveaux d'ecart moyen, 21 au plus). Les cartes de /valorisation, qui ne s'effacent pas, et la plaque des offres, qui s'efface par sa propre opacite, gardent leur flou. Le texte second passe de #495A70 a #2A3850 : sur le verre, au pire de la scene (le plus sombre), #495A70 serait sous 4,5:1. Mesure de la reprise du 04/10/2026 (2e centile des pixels, texte masque, cinq positions de defilement par bulle, Chrome WebGL 320, 393, 768, 1 024 et 1 440, WebKit iPhone 15 et SE, scene vivante puis image fixe en mouvement reduit, valeurs arrondies vers le bas) : texte second 5,6:1 au pire (« HT », 14 px, 768), « Sur devis » 5,4:1, noms et montants 8,3:1. */ .g-bulle{ background:linear-gradient(170deg, rgba(240,246,253,.86) 0%, rgba(222,235,250,.81) 46%, rgba(208,225,247,.76) 100%); 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); } .g-bulle-nom{ grid-area:nom; align-self:end; margin:0; font-size:24px; line-height:1.15; font-weight:500; letter-spacing:var(--f-serre); text-wrap:balance; } .g-bulle-nom a{ display:inline-block; padding:10px 0; margin:-10px 0; color:var(--g-encre); text-decoration:none; outline:none; } .g-bulle-nom a::after{ content:""; position:absolute; inset:0; border-radius:var(--f-r-bulle); } .g-bulle-sous{ display:block; margin-top:4px; font-size:14px; line-height:1.35; font-weight:400; letter-spacing:0; text-transform:none; color:#2A3850; text-wrap:pretty; } .g-bulle-prix{ grid-area:prix; align-self:start; margin:0; text-align:left; } .g-bulle-montant{ display:block; font-size:28px; line-height:1; font-weight:500; letter-spacing:var(--f-serre); white-space:nowrap; font-variant-numeric:tabular-nums; color:var(--g-encre); } .g-bulle-montant--mot{ color:var(--g-klein); } /* « A partir de » dans la ligne du montant (socle.css le pose en bloc au-dessus, ailleurs), et « HT » a la meme taille : 14 px, 500. Cette regle, chargee apres socle.css et de meme poids, remplace aussi sa regle .g-bulle-montant .prix-dep (marge de 2 px, ligne de 15 px), qui ne sert plus. */ .g-bulle-montant .prix-dep, .g-bulle-montant .prix-ht{ display:inline; margin:0; font-size:14px; line-height:1; font-weight:500; letter-spacing:.01em; color:#2A3850; } .g-bulle-voir{ grid-area:voir; align-self:center; margin:0; display:grid; place-items:center; } .g-bulle-voir .f-pastille{ width:40px; height:40px; margin:0; background:var(--g-encre); color:var(--f-blanc); transition:transform .2s var(--f-entree-courbe), background-color .2s; } .g-bulle-voir .f-pastille svg{ width:16px; height:16px; } .g-bulle:has(a:focus-visible){ outline:2px solid var(--f-blanc); outline-offset:3px; } .g-bulle:active{ transform:scale(.99); } @media (hover:hover){ .g-bulle:hover .f-pastille{ transform:translateX(3px); background:var(--g-klein); } } .g-bulles-tva{ margin:10px 0 0; font-size:13px; line-height:1.3; letter-spacing:0; color:var(--f-texte); text-align:right; } /* Ecran d'ordinateur bas : les bulles se resserrent au-dessus des boutons. */ @media (min-width: 1200px) and (max-height: 860px){ .g-bulle{ padding-top:11px; padding-bottom:12px; row-gap:8px; } .g-bulle-nom{ font-size:22px; } .g-bulle-montant{ font-size:26px; } } @media (min-width: 1200px) and (max-height: 760px){ .g-bulle{ padding:8px 18px 9px 22px; row-gap:6px; } .g-bulle-nom{ font-size:20px; } .g-bulle-sous{ margin-top:2px; font-size:13px; } .g-bulle-montant{ font-size:24px; } .g-bulle-montant .prix-dep, .g-bulle-montant .prix-ht{ font-size:13px; } } /* Tablette : trois bulles en ligne, sous la couverture ; nom et pastille sur la premiere rangee, prix dessous, rangees partagees. « A partir de » passe au-dessus du montant si la bulle est trop etroite (768). */ @media (max-width: 1199px){ .g-bulles{ grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px; } .g-bulle{ grid-template-rows:1fr auto; grid-template-areas:"nom voir" "prix prix"; row-gap:16px; column-gap:12px; padding:20px 18px 20px 22px; } .g-bulle-nom{ align-self:start; font-size:22px; } .g-bulle-prix{ align-self:end; } .g-bulle-voir{ align-self:start; } .g-bulle-montant{ white-space:normal; line-height:1.15; } .g-bulles-tva{ text-align:left; } @supports (grid-template-rows: subgrid){ .g-bulle{ grid-row:span 2; grid-template-rows:subgrid; } } } /* Telephone : empilees, la pastille revient au milieu de la bulle. */ @media (max-width: 760px){ .g-bulles{ grid-template-columns:minmax(0,1fr); gap:10px; } .g-bulle{ grid-row:auto; grid-template-rows:auto auto; grid-template-areas:"nom voir" "prix voir"; row-gap:10px; padding:18px 18px 18px 20px; } .g-bulle-nom{ align-self:end; font-size:22px; } .g-bulle-prix{ align-self:start; } .g-bulle-voir{ align-self:center; } .g-bulle-montant{ font-size:26px; white-space:nowrap; line-height:1; } .g-bulles-tva{ font-size:13px; margin-top:12px; } } /* ========================================================================= 11. LES CARTES DES OFFRES ------------------------------------------------------------------------- */ /* --- La section des offres : une bulle par offre, sur le papier ------------ (Accueil : bleu fonce depuis les retouches 4, bloc plus bas.) Clarte, demande 6 (septembre) : le prix en 80 px ressortait avant le nom. Brief editorial du 04/10/2026 (UI05) : l'objet de la mission passe avant le prix. L'ecran suit l'ordre du balisage ecrit par outils/construire-offre.py : nom (26 px), perimetre (16 px), honoraires (40 px au bureau, 34 au telephone, cale au bas de l'en-tete), puis les prestations, toutes visibles depuis le 04/10/2026 (data/tarifs.json, inclus_visibles), le conseil en dernier, et l'appel. Les regles du depliant (details) restent pour une offre qui en aurait un. Sur ordinateur, les trois rangees (en-tete, liste, actions) sont partagees par sous-grille. */ .g-grille{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:24px; isolation:isolate; } .g-carte{ position:relative; display:flex; flex-direction:column; gap:28px; min-width:0; margin:0; padding:32px 32px 28px; border-radius:var(--f-r-bulle); background:var(--f-blanc); color:var(--g-encre); box-shadow:var(--f-ombre-douce), inset 0 0 0 1px var(--f-filet-encre); letter-spacing:-0.01em; } .g-carte-tete{ display:flex; flex-direction:column; padding-bottom:24px; border-bottom:1px solid var(--g-trait); } .g-carte-etiquette{ order:0; align-self:flex-start; margin:0 0 20px; 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; } .g-carte-etiquette--avant{ background:#e8eefb; color:var(--g-klein); } .g-carte-prix{ order:2; margin:20px 0 0; font-size:40px; line-height:1; font-weight:500; letter-spacing:var(--f-serre); white-space:nowrap; font-variant-numeric:tabular-nums; color:var(--g-encre); } .g-carte-prix--mot{ font-size:32px; letter-spacing:var(--f-serre); line-height:1.1; } .g-carte-nom{ order:0; margin:0; font-size:26px; line-height:1.15; font-weight:500; letter-spacing:var(--f-serre); text-wrap:balance; } .g-carte-seuil{ order:1; margin:8px 0 0; font-size:16px; line-height:1.4; letter-spacing:0; color:var(--f-encre-3); text-wrap:pretty; } .g-carte-tva, .g-carte-mention{ order:4; margin:8px 0 0; font-size:12px; line-height:1.3; letter-spacing:0; color:var(--f-encre-3); } .g-carte-mention{ font-size:14px; font-weight:500; color:var(--f-encre-2); } .g-carte-inclus li.g-carte-cle{ font-weight:500; color:var(--g-encre); } /* le conseil sur la valeur */ .g-carte-liste{ display:grid; gap:10px; align-content:start; } .g-carte-plus > summary{ list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:8px; min-height:44px; font-size:14px; line-height:1.2; font-weight:500; letter-spacing:0; color:var(--g-klein); border-radius:6px; -webkit-tap-highlight-color:transparent; } .g-carte-plus > summary::-webkit-details-marker{ display:none; } .g-carte-plus > summary::marker{ content:""; } .g-carte-plus > summary::after{ content:""; width:7px; height:7px; margin-top:-3px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg); transition:transform .2s var(--f-entree-courbe); } .g-carte-plus[open] > summary::after{ transform:rotate(-135deg); margin-top:3px; } .g-carte-plus[open] > summary{ margin-bottom:6px; } @media (hover:hover){ .g-carte-plus > summary:hover{ text-decoration:underline; text-underline-offset:3px; } } .g-carte-actions{ margin-top:auto; display:grid; gap:8px; } .g-carte-btn{ width:100%; background:var(--g-encre); color:var(--f-blanc); font-size:16px; transition:background-color .2s, transform .16s var(--f-entree-courbe); } .g-carte-btn .f-pastille{ background:var(--f-blanc); color:var(--g-encre); } .g-carte-lien{ display:flex; align-items:center; justify-content:center; gap:8px; min-height:48px; padding:12px 16px; border-radius:var(--f-r-bouton); border:1px solid var(--g-trait); color:var(--g-encre); text-decoration:none; font-size:16px; line-height:1.2; font-weight:500; text-align:center; transition:background-color .2s, border-color .2s, transform .16s var(--f-entree-courbe); } .g-carte-fleche{ display:grid; place-items:center; width:16px; height:16px; flex:none; transition:transform .2s var(--f-entree-courbe); } .g-carte-fleche svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; } .g-carte-btn:active, .g-carte-lien:active{ transform:scale(.98); } .g-carte :focus-visible{ outline:2px solid var(--g-klein); outline-offset:3px; } @media (hover:hover){ .g-carte-btn:hover{ background:#162c4f; } .g-carte-lien:hover{ background:#f3f5f9; border-color:#cfd6e2; } .g-carte-lien:hover .g-carte-fleche{ transform:translateX(3px); } } /* La mise en avant : « Sur devis » en bleu Klein */ .g-carte--avant{ box-shadow:var(--f-ombre-douce), inset 0 0 0 1.5px rgba(0,47,167,.35); } .g-carte--avant .g-carte-prix{ color:var(--g-klein); } .g-carte--avant .g-carte-btn{ background:var(--g-klein); } .g-carte--avant .g-carte-btn .f-pastille{ color:var(--g-klein); } @media (hover:hover){ .g-carte--avant .g-carte-btn:hover{ background:#0039c7; } } @media (min-width: 1101px){ @supports (grid-template-rows: subgrid){ .g-carte{ display:grid; grid-row:span 3; grid-template-rows:subgrid; row-gap:24px; } .g-carte-tete{ align-self:stretch; justify-content:flex-start; } .g-carte-actions{ align-self:end; } /* 04/10/2026 : les honoraires se calent au bas de l'en-tete, a la meme hauteur dans les trois cartes, quel que soit le nombre de lignes du nom et du perimetre. */ .g-carte-prix{ margin-top:auto; padding-top:20px; } } } /* Tablette : trois colonnes de 300 px ecraseraient prix et listes ; on empile. */ @media (max-width: 1100px) and (min-width: 761px){ .g-grille{ grid-template-columns:minmax(0,1fr); max-width:600px; margin-inline:auto; } } @media (max-width: 760px){ .g-grille{ grid-template-columns:minmax(0,1fr); gap:16px; } .g-carte{ padding:24px 20px 20px; gap:20px; border-radius:14px; } .g-carte-etiquette{ margin-bottom:16px; } .g-carte-prix{ font-size:34px; margin-top:16px; } .g-carte-prix--mot{ font-size:28px; } .g-carte-nom{ font-size:24px; } .g-carte-tete{ padding-bottom:20px; } } @media (prefers-reduced-motion: reduce){ .g-carte-plus > summary::after{ transition:none; } } /* ========================================================================= 12. L'ACCUEIL : LES TROIS CARTES EN BLEU FONCE ------------------------------------------------------------------------- */ /* --- Accueil : les trois cartes de l'offre en bleu fonce ------------------- Retouches 4 (30/09/2026), demande de Raphael : la section est sur fond clair, les cartes repassent en bleu fonce. Marine d'Artis (--g-encre, #0B1D36), texte clair ; le prix reste tres gros. Scope .f3-offre : les pages d'offre, qui reprennent .g-carte-inclus, ne bougent pas. Mesures sur #0B1D36 : blanc 16,9:1 ; texte second (blanc a 82 %) 11,6:1 ; seuil (blanc a 72 %) 9,2:1 ; azur #7FB0E8 (Sur devis, coches, « autres points inclus », anneau de focus) 7,5:1 ; le papier autour 15,8:1. */ .f3-offre .g-carte{ --g-carte-fond:var(--g-encre); --g-carte-trait:rgba(255,255,255,.16); background:var(--g-carte-fond); color:var(--f-blanc); box-shadow:0 1px 2px rgba(11,29,54,.12), 0 18px 44px rgba(11,29,54,.20); } /* Demande de Raphael du 04/10/2026 (bulles de l'offre un peu transparentes) : le marine devient un verre fume, 84 % en haut, 92 % en bas, avec un lisere blanc a 12 % et un reflet sur l'arete du haut. La bande de papier, opaque, est seule dessous : la transparence s'y lit en un marine qui s'eclaircit vers le haut ; pas de flou, il n'aurait rien a flouter. Mesure de la reprise du 04/10/2026, au pire (2e centile, 320 a 1 440, WebKit iPhone 15 et SE, arrondi vers le bas) : blanc 8,4:1, seuil (blanc a 72 %) 5,5:1, prestations (blanc a 82 %) 7,2:1, azur de « Sur devis » 4,1:1 (28 a 32 px, seuil 3:1). */ .f3-offre .g-carte{ background:linear-gradient(165deg, rgba(26,48,82,.84) 0%, rgba(11,29,54,.88) 52%, rgba(11,29,54,.92) 100%); box-shadow:inset 0 0 0 1px rgba(255,255,255,.12), inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(11,29,54,.12), 0 18px 44px rgba(11,29,54,.20); } .f3-offre .g-carte-tete{ border-bottom-color:var(--g-carte-trait); } .f3-offre .g-carte-prix, .f3-offre .g-carte-nom{ color:var(--f-blanc); } .f3-offre .g-carte-prix--mot{ color:var(--g-azur); } /* « Sur devis » (32 px, 28 au telephone) : sans le jeton de socle.css qui l'abaissait sous la ligne « A partir de » des deux autres cartes (le prix etait alors en tete de carte) ; il suit le perimetre comme les montants. */ .f3-offre .g-carte-prix--mot{ line-height:1.1; padding-top:0; } @media (min-width: 1101px){ @supports (grid-template-rows: subgrid){ .f3-offre .g-carte-prix--mot{ padding-top:20px; } } } .f3-offre .g-carte-seuil{ color:rgba(255,255,255,.72); } .f3-offre .g-carte-mention{ color:rgba(255,255,255,.82); } .f3-offre .g-carte-inclus li{ color:rgba(255,255,255,.82); } .f3-offre .g-carte-inclus li::before{ border-color:var(--g-azur); } .f3-offre .g-carte-inclus li.g-carte-cle{ color:var(--f-blanc); } .f3-offre .g-carte-plus > summary{ color:var(--g-azur); } .f3-offre .g-carte-btn{ background:var(--f-blanc); color:var(--g-encre); } .f3-offre .g-carte-btn .f-pastille{ background:var(--g-encre); color:var(--f-blanc); } .f3-offre .g-carte-lien{ border-color:rgba(255,255,255,.40); color:var(--f-blanc); } /* Contour du lien secondaire : blanc a 40 % sur #0B1D36 = 3,7:1 (seuil 3:1 de WCAG 1.4.11 pour un bord d'element d'interface ; 32 % donnait 2,9:1). */ .f3-offre .g-carte :focus-visible{ outline-color:var(--g-azur); } @media (hover:hover){ .f3-offre .g-carte-btn:hover{ background:#E3ECF8; } .f3-offre .g-carte-lien:hover{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.56); } } /* 320 px (WebKit) : « Echanger sur votre projet » passait sur deux lignes dans un bouton de 240 px ; un peu moins de marge et 15 px le tiennent. Depuis le 02/10, le bouton dit « Voir l'offre » ; la regle reste pour le cas ou le generateur remettrait l'ancien libelle. */ @media (max-width: 359px){ .f3-offre .g-carte-btn{ padding-left:16px; padding-right:12px; font-size:15px; } } /* ========================================================================= 13. SCENE H : CONTRASTE SUR LES MOMENTS CLAIRS ------------------------------------------------------------------------- */ .g-bulles-tva{ color:var(--f-texte); } @media (max-width: 1199px){ /* sous les bulles, a gauche, sur le disque clair : une plaque marine (4,2:1 sans) */ .g-bulles-tva{ width:fit-content; margin-left:-8px; padding:3px 8px; border-radius:6px; background:rgba(var(--f-voile),.40); } } /* Au-dela de 1 200 px, a droite sous les bulles : la meme plaque depuis l'offre du 03/10/2026. Avec la mention du prix exact, la ligne passe a deux et traverse l'arete claire du verre : sans plaque, 3,8:1 a 1 920, 3,9:1 a 1 366 et 4,2:1 a 1 440 (centile 98 du fond, scene vivante), contre plus de 13:1 pour la seule mention de TVA, qui restait a droite de l'arete. La plaque s'arrete au bord droit des bulles : sur deux lignes, elle prend leur largeur. */ @media (min-width: 1200px){ .g-bulles-tva{ width:fit-content; margin-left:auto; padding:3px 8px; border-radius:6px; background:rgba(var(--f-voile),.40); } } @media (max-aspect-ratio: 1099/1000){ .f-couv{ isolation:isolate; } .f-couv::before{ content:""; position:absolute; z-index:-1; inset:0; pointer-events:none; background:radial-gradient(120% 55% at 30% 62%, rgba(var(--g-voile-couv),.36) 40%, rgba(var(--g-voile-couv),0) 85%); } } /* Accueil, 04/10/2026 (soir) : le voile prend le bleu du rapport assombri (section 1), moins sombre que le marine. A 36 %, « Eclairer vos decisions. » (azur, 34 a 40 px) tombait a 2,8:1 au pire sur l'image fixe (360 x 780). A 50 % : 3,05:1 a 360, 3,4 a 390, 3,7 a 430, et les lignes blanches au-dessus de 5,8:1. */ @media (max-aspect-ratio: 1099/1000){ .f-accueil .f-couv::before{ background:radial-gradient(120% 55% at 30% 62%, rgba(var(--g-voile-couv),.5) 40%, rgba(var(--g-voile-couv),0) 85%); } } /* Petits telephones (04/10/2026, mesure de la mission couleurs, 2e centile des pixels) : jusqu'a 380 px, « Eclairer vos decisions. » passe sur la face eclairee du disque, au-dessus du plein du voile, et tombait sous 3:1 (2,64:1 a 320, 2,71:1 iPhone SE, 2,80:1 a 360, scene vivante ; 2,84:1 a 320 sur l'image fixe). Meme voile, meme dose, centre remonte de 62 a 55 % et hauteur de 55 a 60 % : 3,61, 3,72, 3,73 et 3,84:1. La clarte moyenne de l'ecran de couverture baisse de 3 a 7 % a ces largeurs seulement ; le contraste prime. */ @media (max-aspect-ratio: 1099/1000) and (max-width: 380px){ .f-accueil .f-couv::before{ background:radial-gradient(120% 60% at 30% 55%, rgba(var(--g-voile-couv),.5) 40%, rgba(var(--g-voile-couv),0) 85%); } } /* Aube : ce voile de portrait passe du marine a 45 % a l'ardoise profonde a 36 %, comme celui du paysage ; marine, il gardait au telephone une couverture plus sombre que le reste de la scene (mesure WebKit 393 : pire ligne a 6,0:1 avant, voir SP/refonte/aube/). */ /* Image fixe en portrait (mouvement reduit, sans WebGL, avant la toile) : l'image ne bouge pas, et son arete claire passe sous le texte de la couverture. Sur un telephone haut (Chrome 393 x 852), « la valeur » y tombait a 2,9:1 et « methodes croisees » a 4,0:1 au pire. Un second voile, a 20 %, sous la colonne de texte, seulement tant que la toile n'est pas prete : il s'efface avec le meme fondu que celui de l'image (scene.css, section 5), la scene vivante n'en a pas besoin. Sans :has, il reste pose : le contraste prime sur la clarte. */ @media (max-aspect-ratio: 1099/1000){ .f-couv::after{ content:""; position:absolute; z-index:-1; inset:0; pointer-events:none; background:radial-gradient(120% 50% at 30% 66%, rgba(var(--g-voile-couv),.2) 45%, rgba(var(--g-voile-couv),0) 88%); transition:opacity 700ms cubic-bezier(.2,.7,.2,1); } .f-page:has(> .f-scene.h-scene--pret) .f-couv::after{ opacity:0; } } /* Aube (01/10/2026) : en paysage aussi, la couverture est claire (fond moyen rgb 110,120,150 sous le texte, luminance 0,19 a 0,21 a 1 440). Sans voile, « la valeur » et les chiffres 4, 52, 5 en azur tombaient a 1,7 et 2,2:1, le surtitre et les libelles blancs a 3,9 et 4,3:1. Un voile doux d'ardoise profonde (#121a3a, la couleur du voile du deroulement) sous la colonne de texte, large et sans bord, fondu avant les bulles : la scene reste claire autour, le texte se pose sur une ombre. Ambiance intermediaire (02/10/2026) : la scene a fonce de moitie vers la nuit, le voile pesait trop et noircissait le bas gauche. Allege d'un cinquieme (50, 42, 16 % devenus 40, 34, 13 %) : au pire du defilement, « la valeur » 4,6:1 (72 px, 1 440), surtitre 6,5:1 (12 px, 1 024). Bleu profond (03/10/2026) : la scene fonce aux trois quarts vers la nuit ; les voiles de la couverture gardent leur dessin et prennent la couleur rgba(5,12,54), aux trois quarts vers le marine (scene.css, section 1). */ @media (min-aspect-ratio: 11/10){ .f-couv{ isolation:isolate; } .f-couv::before{ content:""; position:absolute; z-index:-1; inset:0; pointer-events:none; background:radial-gradient(62% 58% at 22% 74%, rgba(var(--g-voile-couv),.4) 0, rgba(var(--g-voile-couv),.34) 45%, rgba(var(--g-voile-couv),.13) 75%, rgba(var(--g-voile-couv),0) 100%); } } /* Une colonne (tablette couchee, 1 024) : le texte monte plus haut, le surtitre sortait du voile (4,1:1) ; le voile monte avec lui. */ @media (min-aspect-ratio: 11/10) and (max-width: 1199px){ .f-couv::before{ background:radial-gradient(72% 66% at 28% 66%, rgba(var(--g-voile-couv),.4) 0, rgba(var(--g-voile-couv),.34) 48%, rgba(var(--g-voile-couv),.13) 76%, rgba(var(--g-voile-couv),0) 100%); } } /* ========================================================================= 14. MOUVEMENT REDUIT ET IMPRESSION ------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce){ .g-bulle, .g-bulle-voir .f-pastille, .g-carte-btn, .g-carte-lien, .g-carte-fleche{ transition:none !important; } } /* Transparence reduite (reglage du systeme) : les bulles et les cartes de l'offre reprennent leur fond plein d'avant le verre. */ @media (prefers-reduced-transparency: reduce){ .g-bulle{ background:var(--g-bulle-fond); } .f3-offre .g-carte{ background:var(--g-carte-fond); } } @media print{ .f-couv{ min-height:0; } .f-entree, .f1-demo-panneau{ transform:none !important; opacity:1 !important; } } /* ========================================================================= 15. PETITS TELEPHONES, SOUS 360 PX ------------------------------------------------------------------------- */ @media (max-width: 359px){ .f-couv-etiquette{ letter-spacing:.16em; } } /* ========================================================================= 16. L'ACCUEIL AU TELEPHONE, AUDIT DU 8 OCTOBRE 2026 ------------------------------------------------------------------------- */ /* Audit telephone du 8 octobre 2026 (AUDIT-TELEPHONE-2026-10-09.md, lot 1), mis en oeuvre le 09/10/2026. Sur iPhone 15 dans Safari, l'accueil faisait 28,7 ecrans de 659 px, dont cinq ecrans de vide herite du bureau (marges de 120 px, bandes de 100 px, souffle de 40 % de la fenetre sous la demonstration). Tout ce bloc est sous 760 px et borne a l'accueil (.f-accueil) : cette feuille sert aussi /valorisation et /calculateur, qui ne bougent pas, et rien ne change a 761 px et au-dela. Aucun texte n'est masque ici. Les deux decisions de Raphael qui touchent cette feuille sont la remontee de « Votre interlocuteur » (D2, juste dessous) et, dans schema.css (section 9), le repli des piliers de la conception (D1). Restaient visibles ce jour-la, par decision : les quatre images du contenu du rapport, les dix onglets et le chapo de la demonstration, le second bouton de la couverture, les quatre retours, les prestations des cartes d'offre, les reperes par secteur. La barre d'appel du bas n'est pas touchee. Le meme jour, la seconde passe (delegation de Raphael, section 17) masque les quatre images, les dix onglets et le chapo de la demonstration, replie deux des quatre retours et les prestations des cartes, met les titres de section au fer a gauche et retire la reserve du bandeau de consentement. Le second bouton de la couverture et les reperes par secteur ne changent pas. Les regles ci-dessous restent, la section 17 vient apres elles et les complete. */ @media (max-width: 760px){ /* --- D2. « Votre interlocuteur » juste apres la demonstration ---------- Decision de Raphael (audit telephone du 8 octobre, D2) : la question « qui vais-je avoir ? » arrivait a l'ecran 17,4. Le balisage garde son ordre (bureau, moteurs de recherche, lecteurs d'ecran), seul l'ordre d'affichage change, par order dans une colonne flexible. Mesure avant de poser order : la colonne flexible seule laisse chaque section a la meme place au pixel pres (aucune marge ne fusionnait entre les sections). Les reperes de la scene suivent les positions rendues (scene.js les trie par hauteur). Celui de l'interlocuteur (benef@haut:0.2), qui ferait rejouer la scene en arriere entre la demonstration et la conception, est mis de cote au telephone par schema.js (section en fin de fichier). L'ordre du clavier suit le balisage, comme le veut order : le bouton « Decouvrir son parcours » se rejoint apres le deroulement, a sa place d'origine. 10/10/2026, audit UI/UX du 9 octobre, point A04 : plus de order. Le clavier et le lecteur d'ecran suivaient le balisage, donc lisaient l'interlocuteur apres la conception, le contenu du rapport et le deroulement, la ou l'ecran le montre juste apres la demonstration. schema.js deplace desormais le noeud lui-meme, juste apres la demonstration, a l'ecran de 760 px et moins, et le remet a sa place au-dela (matchMedia, suivi au changement) : l'ordre lu est celui de l'ecran. Sans script, la section reste a sa place d'origine, apres le deroulement. La colonne flexible reste : chaque section garde sa marge propre (aucune fusion de marges entre sections ni avec leurs enfants), et la page est la meme au pixel pres qu'avec order. */ .f-accueil main{ display:flex; flex-direction:column; } /* --- Couverture -------------------------------------------------------- Une seule couverture quelle que soit la hauteur de la fenetre : la regle (max-height: 700px) de la section 5 faisait passer le titre de 34 a 40 px quand Safari replie ses barres (659 puis 745 px de haut), 69 px de saut sous le doigt. Le titre prend 36 px sur 1,05, la plus grande taille ou « Eclairer vos decisions. » tient sur une ligne a 393 px (trois lignes, 113 px), 34 px de 375 a 389 px et 32 px de 360 a 374 px, toujours sur trois lignes. Sous 360 px, quatre lignes en 32 px. Le titre gagnant 6 px a 659 px de haut, le bouton « Echanger sur votre projet » passait de 2 px au-dessus du bandeau de consentement (228 px, premiere visite) a 4 px dessous. Le haut de la grille passe a 76 px pour toutes les hauteurs (80 ou 88 avant), l'etiquette a 12 px du titre (14), les reperes a 16 px du titre (24) et les boutons a 16 px des reperes (22). Mesure de la reprise du meme jour, a la premiere visite (bandeau ouvert, WebKit et Chromium) : a 393 x 659, le bandeau commence 89 px sous le premier bouton et 33 px sous le second (il couvrait ce second bouton avant), mais coupe encore a mi-hauteur la ligne « Premier echange sans engagement » (466 a 505 px, bandeau a 487). A 375 x 667, 48 px sous le second bouton, la meme ligne coupee. A 320 x 568, le premier bouton reste couvert sur 40 px (161 avant). Degager cette ligne demanderait une couverture plus courte a ces hauteurs : fait par la seconde passe du meme jour (section 17, E6). */ .f-accueil .f-couv-grille{ padding-top:76px; } .f-accueil .f-couv-etiquette{ margin-bottom:12px; } .f-accueil .f-couv-titre{ font-size:36px; line-height:1.05; } .f-accueil .f-couv-reperes{ margin-top:16px; } .f-accueil .f-couv-boutons{ margin-top:16px; } /* --- Demonstration ----------------------------------------------------- Le souffle clair sous le panneau (40 % de la fenetre, 264 px a 659, 341 a 852) passe a 32 px : « Votre interlocuteur » suit, sur la scene, 48 px plus bas. Le chapo quitte la justification (ecarts de 8 px entre deux mots pour une espace de 4,2 px), au fer a gauche, sans cesure automatique. La seconde passe le masque (section 17, E4). Les deux boutons empiles s'ecartent de 8 px au lieu de 4. Les onglets, que cette premiere passe ecartait aussi de 8 px, sont masques par la seconde (rapport-vitrine.css, section 7). Sous 390 px, « Estimer un premier ordre de grandeur » passe sur deux lignes (les deux libelles sous 360 px), serrees en interligne 1 : 1,2 et le fer a gauche, comme le bouton long de la confidentialite (.f2-bouton-long), 58 px de haut au lieu de 52. Sur une ligne, rien ne bouge. */ .f-accueil #demonstration{ padding-bottom:32px; } .f-accueil .f1-demo-chapo{ text-align:left; text-align-last:auto; -webkit-hyphens:manual; hyphens:manual; } .f-accueil .f1-demo-boutons{ gap:8px; } .f-accueil .f1-demo-boutons .f-bouton{ line-height:1.2; text-align:left; } /* --- Interlocuteur, deroulement, confidentialite : 48 px de scene ------ Les marges de 120 px entre deux duos passent a 48 px, et l'en-tete centre d'un duo se pose a 20 px de sa carte au lieu de 40. */ .f-accueil #interlocuteur, .f-accueil #deroulement, .f-accueil #confidentialite{ margin-top:48px; } .f-accueil .f-duo-colle > .f2-colle{ margin-bottom:20px; } /* --- Le contenu du rapport --------------------------------------------- Bande de 56 px en haut et en bas (avant, 120 px jusqu'a l'etiquette et 100 px sous le bouton). Les rangees perdent leur marge interne de 20 px (leur fond est celui de la bande), 48 px entre deux rangees au lieu de 130, 20 px entre une image et son titre : l'image se lit avec son texte, pas avec le precedent. Les quatre images restaient (decision de Raphael, masquees depuis par la seconde passe, section 17) et prenaient la largeur que rend la marge interne, 32 px de plus : 282 px de large au lieu de 250 a 393 px, 268 au lieu de 236 a 375 px, 224 au lieu de 192 a 320 px (mesure WebKit de la reprise du 09/10/2026, hauteur dans la meme proportion). Le chapo quitte la justification (13 px entre deux mots sur « conclusion de valeur, les travaux qui la »). Le bouton « Consulter la methodologie » prend la largeur de la colonne comme les autres boutons de la page. Ses 38 px mesures par l'audit venaient de l'echelle d'entree (.f-entree, 0,8) avant l'arrivee a l'ecran : il fait bien 48 px. */ .f-accueil #contenu-du-rapport{ padding-top:56px; padding-bottom:56px; } .f-accueil .f1-bande-corps{ padding-top:0; } .f-accueil #contenu-du-rapport .f-chapo{ text-align:left; text-align-last:auto; -webkit-hyphens:manual; hyphens:manual; } .f-accueil .f1-rang{ padding:0; gap:20px; } .f-accueil .f1-rang + .f1-rang{ margin-top:48px; } .f-accueil .f1-rang-boutons{ margin-top:20px; } .f-accueil .f1-rang-boutons .f-bouton{ width:100%; } /* --- Le deroulement : quatre rangs dans une seule bulle ----------------- Quatre cartes de 194 px separees de 20 px deviennent quatre rangs d'une meme bulle blanche, separes d'un filet d'encre, le texte inchange. L'audit proposait des rangs sans fond, poses sur la scene. La bulle est gardee parce que la scene du deroulement est son moment clair (etat deroul, scene.css 8) et qu'elle bouge : l'encre sur blanc reste a 16,9:1 quel que soit l'instant. Titre en 20 px, texte en 16 px, etiquette d'etape inchangee. */ .f-accueil .f2-deroulement .f-duo-colle > .f-pile{ gap:0; padding:4px 22px; border-radius:var(--f-r-bulle); background:var(--f-blanc); box-shadow:var(--f-ombre-bulle); } .f-accueil .f2-etape{ padding:18px 0 20px; gap:8px; border-radius:0; background:none; box-shadow:none; } .f-accueil .f2-etape + .f2-etape{ border-top:1px solid var(--f-filet-encre); } .f-accueil .f2-etape .f-titre-carte-l{ font-size:20px; line-height:1.25; } .f-accueil .f2-etape-texte{ font-size:16px; line-height:1.45; } /* --- Retours de dirigeants ----------------------------------------------- Les quatre retours restaient visibles (deux sont replies depuis la seconde passe, section 17). La bande commence a 48 px de la confidentialite et a 56 px de son titre (120 et 100 avant), et finit 48 px sous la derniere carte (60). Cartes en 20 px de marge interne. Fonction et chiffre d'affaires en 13 px, espaces de 0,12 em au lieu de 0,3 : a 393 px, chaque ligne de signature tient sur une ligne, sauf la plus longue fonction (« production industrielle d'aluminium »), sur deux. Avant, trois signatures sur quatre en prenaient deux. */ .f-accueil #avis{ margin-top:48px; padding-top:56px; padding-bottom:48px; } .f-accueil .f2-avis-carte{ padding:20px; } .f-accueil .f2-avis-carte .avis-seg{ font-size:13px; letter-spacing:.12em; } .f-accueil .f2-avis-carte .avis-seg:first-child{ font-size:var(--f-t-chapo); letter-spacing:var(--f-serre); } /* --- L'offre, les questions, l'appel final -------------------------------- Les trois cartes gardaient leurs cinq prestations (decision de Raphael, repliees depuis la seconde passe, section 17), 16 px entre leurs blocs au lieu de 20, prix en 30 px au lieu de 34. Dans la bande de papier, d'une section a la suivante, 96 px (48 et 48) au lieu de 120 a 140 : du dernier retour a « L'offre » (60 et 80 avant), de la mention de TVA a « Vos questions » (60 et 60). Le bas des questions passe a 56 px (100), les reperes a 32 px des questions (60), en rangees de 48 px (56). L'appel final : 64 px de scene au-dessus du titre et 72 px sous la note (120 et 160). */ .f-accueil #offre{ padding-top:48px; padding-bottom:48px; } .f-accueil .f3-offre .g-carte{ gap:16px; } .f-accueil .f3-offre .g-carte-prix{ font-size:30px; } .f-accueil .f3-offre .g-carte-prix--mot{ font-size:28px; } .f-accueil #faq{ padding-top:48px; padding-bottom:56px; } .f-accueil .f3-reperes{ margin-top:32px; } .f-accueil .f3-reperes a{ min-height:48px; } .f-accueil .f3-appel{ padding:64px 0 72px; } } /* Titre de la couverture sous 390 px : la plus grande taille qui garde « Eclairer vos decisions. » sur une ligne (mesure WebKit, de 320 a 430 px). */ @media (max-width: 389.98px){ .f-accueil .f-couv-titre{ font-size:34px; } } @media (max-width: 374.98px){ .f-accueil .f-couv-titre{ font-size:32px; } } /* L'impression garde l'ordre d'avant le point A04 (reprise du 10/10/2026). Le order de D2 portait sur (max-width: 760px), sans screen : imprimee depuis un ordinateur, sur A4 ou Letter (une boite de page de 718 a 739 px), la page placait « Votre interlocuteur » apres la demonstration. schema.js ne deplace le noeud qu'a l'ecran : sans ces trois regles, le document imprime le donnait a sa place du balisage, apres le deroulement. Elles rendent l'ordre imprime d'avant, que le noeud ait ete deplace ou non (imprimee depuis le telephone, la page sort dans le meme ordre). Sur le papier, l'ordre lu ne compte pas. */ @media print and (max-width: 760px){ .f-accueil main > *{ order:2; } .f-accueil main > .f-couv-bloc, .f-accueil main > #demonstration{ order:0; } .f-accueil main > #interlocuteur{ order:1; } } /* ========================================================================= 17. L'ACCUEIL AU TELEPHONE, SECONDE PASSE DU 9 OCTOBRE 2026 ------------------------------------------------------------------------- */ /* Seconde passe telephone, delegation de Raphael (09/10/2026 : « fais ce qui te semble etre le mieux pour faciliter les conversions »). Les masquages et replis que l'audit du 8 octobre proposait pour l'accueil (lot 1, decisions 3 a 6) et que la premiere passe avait laisses en l'etat. Tout est sous 760 px et borne a l'accueil (.f-accueil) : /valorisation et /calculateur, qui chargent cette feuille, ne bougent pas, et rien ne change a 761 px et au-dela. Les regles portent sur l'ecran seul (screen) : imprimee depuis un ordinateur, sur A4 ou Letter (une boite de page de 718 a 739 px), la page garde les quatre retours, les prestations des cartes et ses images, sans les boutons de repli, comme avant cette passe (reprise du meme jour). Rien n'est retire du balisage : ce qui est masque ou replie reste dans la page, pour la tablette, l'ordinateur et les moteurs de recherche. Les boutons de repli sont poses par schema.js (fin du fichier) a l'ecran de 760 px et moins, et retires au-dela : sans script, tout reste visible. Les dix onglets de la demonstration sont masques dans rapport-vitrine.css (section 7). */ @media screen and (max-width: 760px){ /* --- E1. Le contenu du rapport, sans ses quatre images ------------------ Les quatre planches y etaient rendues a 282 px de large : leur texte faisait 3 a 4 px, et la demonstration vient d'en montrer une en grand, lisible. Les cinq textes restent, a 32 px l'un de l'autre au lieu de 48 (ils ne sont plus separes par une image). Images en chargement paresseux et masquees : elles ne se telechargent plus au telephone. */ .f-accueil .f1-rang-image{ display:none; } .f-accueil .f1-rang + .f1-rang{ margin-top:32px; } /* --- E4. La demonstration, sans son chapo ------------------------------- Le titre, les deux boutons, puis la planche vivante avec son titre et ses deux fleches. Le chapo redisait ce que montre la planche juste dessous. Les dix onglets numerotes sont masques dans rapport-vitrine.css (section 7). */ .f-accueil .f1-demo-chapo{ display:none; } /* --- E5. Les titres de section au fer a gauche -------------------------- Au telephone, les titres de l'accueil etaient centres (conception, deroulement, interlocuteur, confidentialite, retours, offre, questions) alors que ceux des autres pages, et ici ceux de la demonstration, du contenu du rapport et de l'appel final, sont au fer a gauche, comme les cartes qui suivent. Etiquette, titre et chapo passent a gauche. La phrase de conclusion de la conception et les deux phrases sous les cartes d'offre (TVA, lettre de mission) suivent. Le voile sous les titres des duos (scene.css 8) garde son dessin : il deborde de 120 px de chaque cote de la colonne et couvre toujours l'etiquette, le titre et le chapo. Mesure sur la scene vivante (Chromium, 393 x 852, titre au quart, a la moitie et aux trois quarts de l'ecran) : 7,2:1 au pire pixel du fond pour le deroulement, l'interlocuteur et la confidentialite (6,7:1 centres). */ .f-accueil .f2-colle{ align-items:flex-start; text-align:left; } .f-accueil .f-entete-centre, .f-accueil .gs-entete{ justify-items:start; text-align:left; } .f-accueil .gs-conclusion{ margin-left:0; text-align:left; } .f-accueil p.f3-socle{ align-items:flex-start; text-align:left; } /* --- E6. Plus de reserve pour le bandeau de consentement ---------------- Depuis le 03/10/2026 (VIS-1), la couverture gardait sous ses boutons la hauteur du bandeau plus 44 px, a la premiere visite, pour que le bandeau ne cache pas les boutons. Au telephone, la couverture part du haut de l'ecran (section 5) : cette reserve ne remontait plus rien, elle ajoutait 216 px de scene vide entre la phrase « Premier echange sans engagement » et les bulles d'offre (175 px visibles au-dessus du bandeau a 393 x 852). Elle est retiree au telephone : les bulles suivent la couverture comme aux visites suivantes, et rien ne bouge quand le bandeau s'ouvre ou se ferme (il est pose par-dessus, comme sur les autres pages). Au-dela de 760 px, la reserve reste. Reste la hauteur : a 393 x 659 (Safari sur iPhone 15), le bandeau replie (172 px) commence a 487 px et la phrase « Premier echange sans engagement. Reponse sous un jour ouvre. » finissait a 505 px, sa seconde ligne sous le bandeau. La couverture se resserre donc de 26 px pour toutes les hauteurs (une seule couverture, section 16) : haut de la grille a 72 px au lieu de 76, etiquette en interligne 1,3 et a 10 px du titre, reperes a 12 px du titre et a 4 px l'un de l'autre en interligne 1,3, boutons a 12 px des reperes, phrase en interligne 1,3. Le titre, les boutons et leur ecart ne changent pas. Le soir du meme jour (demande de Raphael, section 18), a 540 px de large et moins, ces ecarts serres ne restent que la ou la hauteur manque : ailleurs, la couverture reprend la hauteur de l'ecran et ses ecarts grandissent. A la premiere visite, elle y garde de nouveau la place du bandeau, prise dans son propre vide sans changer la hauteur de la page, et reprend sa respiration quand il se ferme (section 18, point 0). Depuis le 10/10/2026, a 540 px et moins, les trois ecarts du texte sont des blocs vides de la colonne (section 18, point 3), avec ces valeurs serrees pour minimum, et l'interligne serre des reperes est 1,2 (point 1). */ html.consent-attendu body.f-accueil, body.f-accueil.consent-open{ --f-couv-bas:24px; } .f-accueil .f-couv-grille{ padding-top:72px; } .f-accueil .f-couv-etiquette{ margin-bottom:10px; line-height:1.3; } .f-accueil .f-couv-reperes{ margin-top:12px; gap:4px; } .f-accueil .f-couv-reperes li{ line-height:1.3; } .f-accueil .f-couv-boutons{ margin-top:12px; } .f-accueil .f-couv-boutons .f-couv-rassure{ line-height:1.3; } } /* --- Le bouton de repli de l'accueil (E2, E3) ------------------------------- Pose par schema.js. Un vrai bouton (aria-expanded, aria-controls), au dessin de l'accordeon des piliers (schema.css 9) : le libelle, puis un rond de papier de 32 px et un chevron bleu Klein de 2 px, vers le bas ferme, vers le haut ouvert. 44 px de haut au moins. schema.js ne le pose qu'a l'ecran de 760 px et moins et le retire au-dela. La regle qui le masque hors de ces largeurs reste par prudence. */ .fa-repli{ display:none; } @media screen and (max-width: 760px){ .f-accueil .fa-repli{ display:flex; align-items:center; justify-content:space-between; gap:16px; width:100%; min-height:44px; margin:0; padding:0; border:0; border-radius:0; background:none; font:inherit; font-size:16px; line-height:1.3; font-weight:500; letter-spacing:var(--f-serre); color:inherit; text-align:left; cursor:pointer; -webkit-tap-highlight-color:transparent; } .f-accueil .fa-repli-rond{ position:relative; flex:none; width:32px; height:32px; border-radius:50%; background:#F1F2F6; } .f-accueil .fa-repli-rond::after{ content:""; position:absolute; left:12px; top:50%; width:8px; height:8px; margin-top:-6px; border-right:2px solid var(--g-klein, #002FA7); border-bottom:2px solid var(--g-klein, #002FA7); transform:rotate(45deg); transition:transform .2s ease, margin-top .2s ease; } .f-accueil .fa-repli[aria-expanded="true"] .fa-repli-rond::after{ transform:rotate(-135deg); margin-top:-2px; } .f-accueil .fa-repli:focus-visible{ outline:2px solid var(--g-klein, #002FA7); outline-offset:3px; } @media (hover:hover){ .f-accueil .fa-repli:hover .fa-repli-rond{ background:#E6EBF7; } } /* --- E2. Deux retours de dirigeants, puis les deux autres --------------- Les deux premiers retours restent visibles. Les deux autres se replient derriere « Lire les deux autres retours », une bulle blanche de la taille des cartes, sous la seconde : le toucher les montre a leur place, et le bouton disparait (schema.js donne le focus au troisieme retour). Les quatre restent dans la page. Libelle en 16 px, comme celui des cartes d'offre : il tient sur une ligne jusqu'a 320 px. */ .f-accueil .f2-avis--replie .f2-avis-carte:nth-child(n+3){ display:none; } .f-accueil .fa-repli--bulle{ margin-top:20px; min-height:56px; padding:12px 16px 12px 20px; border-radius:20px; background:var(--f-blanc); color:var(--g-encre); box-shadow:0 1px 2px rgba(11,29,54,.05), 0 12px 32px rgba(11,29,54,.07), inset 0 0 0 1px rgba(11,29,54,.10); } /* --- E3. Les cartes d'offre : ce que comprend chacune, replie ----------- Chaque carte garde son nom, son perimetre, son prix et « Voir l'offre ». Ses cinq prestations se replient sous « Ce que comprend l'offre », ferme au chargement. Sur le verre marine de la carte, le libelle est blanc (au moins 8,4:1, section 12) et le rond de papier garde son chevron Klein (9,5:1 sur le papier). Le lecteur d'ecran entend le nom de l'offre apres le libelle (texte masque, comme pour « Voir l'offre »). */ .f-accueil .g-carte--replie > .g-carte-liste{ display:none; } .f-accueil .f3-offre .fa-repli--carte{ border-radius:8px; color:var(--f-blanc); } /* Anneau de focus a l'azur, comme les autres commandes de la carte (section 12) : le Klein ne se lirait pas sur le marine. Le rayon de 8 px ne sert qu'a l'anneau, le bouton n'a pas de fond. */ .f-accueil .f3-offre .fa-repli--carte:focus-visible{ outline-color:var(--g-azur); } } @media (prefers-reduced-motion: reduce){ .fa-repli-rond::after{ transition:none !important; } } /* ========================================================================= 18. L'ACCUEIL AU TELEPHONE : LE PREMIER ECRAN RESPIRE ------------------------------------------------------------------------- */ /* Demande de Raphael du 09/10/2026 (soir) : « sur la premiere page, tu aeres plus, il faut que la premiere bulle d'offre ne se voie a peine sur un ecran de telephone normal, alors que la on voit les deux premieres bulles tellement c'est serre ». Depuis la seconde passe du meme jour (section 17, E6), la couverture finissait a 503 px du haut quelle que soit la hauteur de l'ecran : a 393 x 659 (Safari sur iPhone 15, barres affichees), la premiere bulle entiere et l'arete de la seconde, les deux en entier a 430 x 739 (Pro Max) et au-dela. Tout ce bloc porte sur l'ecran de 540 px de large et moins, borne a l'accueil : les telephones tenus debout (320 a 440 px). Rien ne change au-dela, ni a l'impression, ni sur /valorisation et /calculateur, qui chargent aussi cette feuille. La reprise du meme soir a abaisse la borne de 760 a 540 px. De 541 a 760 px, une tablette tenue debout (iPad mini, 744 x 1 133, tablettes Android de 600 a 760 px) ou une fenetre d'ordinateur etroite recoit la mise en page du telephone : la couverture y prenait tout l'ecran, avec 460 px de scene vide au-dessus du texte et une seule bulle visible au lieu des trois. Elle y reste serree (section 17), comme avant ce soir. Seconde demande de Raphael, le 10/10/2026, vue sur son iPhone : « il faut "valorisation d'entreprise et de fonds de commerce" en dessous de Artis Valorisation, ensuite un espace, ensuite valoriser votre entreprise, ensuite espace, ensuite les 3 points, ensuite espace, ensuite echanger sur votre projet », puis la premiere bulle d'offre. La couverture se lit desormais de haut en bas (points 2 et 3) : l'etiquette juste sous les bulles de la barre, puis trois espaces egaux entre l'etiquette, le titre, les reperes et le groupe des boutons. Avant, le vide allait sous la barre et au-dessus des boutons, le bloc de texte cale en bas (l'etiquette a 48 px sous la barre a 393 x 659, a 178 px a 393 x 852). Le meme jour, les reperes deviennent les trois piliers du rapport (index.html et section 5), le deuxieme sur deux lignes au telephone, et le lisere Klein du haut de page quitte le telephone (scene.css 1). Les valeurs relevees plus bas sont celles du 10/10/2026, sauf quand une date dit le contraire. La cible : sur l'ecran qu'a le visiteur, barres du navigateur affichees (la petite fenetre, svh), le haut de la premiere bulle est a 48 px du bas (--fa-lisiere). On y lit l'arete du verre et le nom « Fonds de commerce », assez pour dire que la page continue, et la seconde bulle ne se voit plus. La grille de la couverture prend donc au moins la hauteur de la petite fenetre, moins cette lisiere (moins aussi, jusqu'au 10/10/2026, les 3 px du lisere Klein, que le telephone n'a plus). svh ne change pas quand Safari replie ses barres : rien ne saute sous le doigt (jamais dvh, qui suivrait les barres). Sans svh (Safari avant 15.4), 100vh. La place (--fa-place) se compte depuis svh, moins la hauteur de la couverture serree (--fa-serre). Releve du 11/10/2026, avec le texte des points donne par Raphael, pixel par pixel de 240 a 540 px de large, fenetre ramenee a zero (--fa-ecran:0px), le meme dans WebKit et Chromium, arrondi au pixel au-dessus : 440 px de 529 a 540 px (chaque point sur une ligne), 459 de 510 a 528 (le deuxieme point sur deux lignes), 478 de 455 a 509 (le troisieme aussi), 496 de 449 a 454 (phrase sur deux lignes), 534 de 391 a 448 (titre sur trois lignes), 553 a 390 (le premier point sur deux lignes), 547 de 375 a 389, 541 de 351 a 374, 574 de 326 a 350 (titre sur quatre lignes), 567 de 296 a 325, 585 de 294 a 295, 603 de 280 a 293, 620 de 270 a 279, 638 de 266 a 269, 655 de 251 a 265, 673 de 244 a 250, 707 en dessous. --fa-lignes compte les lignes des points a chaque palier. Le releve du 10/10/2026, avec les points d'alors, allait de 440 a 671 px, celui du 09/10/2026 de 444 a 669 px. Avec ces points plus longs, la couverture serree ne tient plus dans 548 px de haut a 375 px de large ni dans 568 px a 320 px : la bulle n'y depasse plus que de 1 a 2 px (40 et 37,5 px avant). Une valeur trop forte retarde les points 1 et 2 et, a la premiere visite, serre la couverture plus qu'il ne faut. Une valeur trop faible pousserait la bulle, de 30 px au plus. Si le texte de la couverture change, refaire ce releve. La place se donne dans cet ordre. 0. La garde du bandeau, a la premiere visite (reprise du meme soir). Le bandeau de consentement, feuille du bas de 137 a 207 px de haut (socle.css 10), se pose sur le bas de l'ecran. La premiere version de ce bloc ne tenait que le premier bouton au-dessus de lui, et son bord tombait sur le second : 8,6 px du bouton visibles de 345 a 410 px de large, 26,2 px de 411 a 440, le libelle « Consulter un exemple de rapport » coupe au milieu de ses lettres, et la phrase « Premier echange sans engagement » dessous. Avant ce soir, toute la couverture se voyait au-dessus du bandeau. Tant qu'il est ouvert (html.consent-attendu, posee par le script de tete d'index.html avant le premier rendu, ou body.consent-open), le bas de la grille garde donc la hauteur du bandeau moins la lisiere (--fa-reserve, sur --f-consent-h que mesure socle.js, ou sur l'estimation de la section 5 avant la mesure), prise avant tout le reste : la phrase finit 32 px au-dessus du bandeau, comme elle finit 32 px au-dessus de la bulle quand il n'est pas la. La garde se prend dans le vide de la couverture. La bulle reste a sa place, sous le bandeau, et la page garde sa hauteur. Quand la place manque, la garde prend ce qu'il y a, et la couverture est la couverture serree, a la meme hauteur (depuis le 10/10/2026, les ecarts rendent encore de quoi tenir la phrase 8 px au-dessus du bandeau, point 4). A la reponse, le bandeau s'efface en 300 ms (socle.css 10) et la couverture reprend sa respiration dans le meme temps, sur la meme courbe (transition des marges, des ecarts et des hauteurs minimales des blocs vides, plus bas) : le texte descend, les boutons vont vers le pouce. Rien ne bouge au chargement, la classe etant posee avant le premier rendu. En mouvement reduit, la couverture passe d'un coup. Le deplacement suit le geste du visiteur et ne compte pas dans le CLS. Il joue aussi quand « Gerer mes cookies », au pied, rouvre le bandeau, la couverture etant alors loin au-dessus de l'ecran. 1. Sous le premier bouton, puis les reperes. Les deux ecarts sous ce bouton (jusqu'au second, puis jusqu'a la phrase) passent de 8 a 12 px sur les 8 premiers pixels libres, puis le bas de la grille (de la phrase a la bulle) de 24 a 32 px sur les 8 suivants (--fa-pied). La premiere version le montait a 44 et 62 px sous 345 et 301 px de large, pour tenir le premier bouton au-dessus du bandeau. La garde le fait desormais, et il reste a 32 px a toutes les largeurs. Depuis le 10/10/2026, viennent ensuite l'ecart entre les reperes, de 4 a 8 px sur les 8 pixels suivants (le deuxieme repere a deux lignes, 4 px ne le detachaient plus de ses voisins), puis leur interligne, de 1,2 a 1,3 sur les 6,4 d'apres. La couverture serree prend cet interligne de 1,2 pour que l'iPhone SE (375 x 548) garde une lisiere de 40 px malgre la ligne de plus des reperes (33 px a 1,3). 2. Le haut (10/10/2026). La grille commence a 72 px du haut, 12 px sous les bulles de la barre (elles finissent a 60 px). Un bloc vide de 8 px au plus (::before de la grille, flex-grow de 1000, servi avant les trois espaces) porte cet ecart a 20 px des que la place le permet, et il n'en bouge plus : l'etiquette se lit comme le sous-titre du nom de la barre. Avant, la grille commencait a 72 puis 96 px du haut, et le reste allait aussi sous la barre. 3. Les trois espaces (10/10/2026). L'etiquette, le titre, les reperes et le groupe des boutons sont les enfants directs de la colonne flexible : .f-couv-texte passe en display:contents (un simple div, sans role, rien ne change pour les lecteurs d'ecran), et la grille devient le conteneur des unites cqi du titre (point 5), de la meme largeur. Entre eux, trois blocs vides (::before et ::after de .f-couv-texte, ::after de la grille, places par order, sans toucher au balisage ni a l'ordre de lecture) se partagent le reste a parts egales. Le moteur fait le partage (flex-basis, flex-grow, min-height et max-height), sans releve : il suit au pixel la hauteur reelle du texte. Le groupe des boutons reste serre (12 px entre les deux boutons, 16 px jusqu'a la phrase), il se lit d'un bloc. Egaux a l'oeil, et non a la boite (reprise du soir du meme jour) : le demi-interligne de l'etiquette et du titre s'ajoute aux deux premiers espaces, et le haut des reperes au deuxieme, quand le bouton est un aplat qui part du bord de sa boite. A boites egales, le troisieme espace paraissait plus court de 7 a 9 px (39, 41 et 32 px a l'encre a 393 x 659), et de 8 px dans la couverture serree (19, 21 et 12). Le premier bloc part donc de 1 px (flex-basis) et le troisieme de 8 px, et leurs bornes suivent : 9, 8 et 17 px au moins, la couverture serree, dont les espaces gardent leurs 34 px en tout (10, 12 et 12 avant, section 17, E6), si bien que --fa-serre ne change pas (releve refait au pixel, le meme). Au plus, 97, 96 et 104 px (--fa-ecart-max, plus les memes 1 et 8 px). Au-dela, sur un ecran tres haut, le surplus reste sous la phrase, au-dessus de la bulle : des espaces plus grands auraient detache l'etiquette du titre et le titre des reperes. La borne etait de 72 px au premier passage : la phrase finissait alors a 101 px de la bulle a 393 x 852 et a 181 px a 430 x 932, un trou sous des espaces de 72 px. A 96 px, le surplus ne parait qu'au-dela de 864 px de petite fenetre (de 393 a 430 px de large), et reste a peine plus grand que les espaces (100 px a 430 x 932). Les blocs vides du 09/10/2026 (::before sous la barre, ::after de 80 px au plus au-dessus des boutons) et le pas commun des ecarts (--fa-air, 66 px) sont remplaces. Mesures apres refus, les memes dans WebKit et Chromium, a l'encre (capture moins capture au texte cache, du bas d'un texte au haut du suivant, a 1,5 px pres d'un espace a l'autre) : l'etiquette 20 px sous la barre partout ou la place le permet, trois espaces de 37 a 38 px a 393 x 659 (16, 24 et 49 px en boite le 09/10/2026), 38 a 40 a 390 x 664, 34 a 36 a 360 x 640, 41 a 43 a 375 x 667, 63 a 65 a 430 x 739, 77 a 78 a 412 x 780, 101 a 102 a 393 x 852, ou la phrase finit a 32 px de la bulle (112 avant le 10/10/2026), 105 a 106 a 412 x 915 et 430 x 932, avec 83 et 100 px sous la phrase. Couverture serree, 17 a 18 px a l'encre a 375 x 548 et 320 x 568. Sur un balayage de 300 a 540 px de large et de 480 a 1 000 px de haut (21 largeurs, 21 hauteurs, WebKit et Chromium, mouvement reduit), la seconde bulle ne se voit jamais, et la premiere est a 48 px du bas des que la couverture serree tient. La ou elle ne tient pas, rien n'est ajoute, et la bulle la suit : 40 px a 375 x 548 (48 avant), 37,5 a 320 x 568 (44 avant), sous l'ecran a 320 x 480. Le surplus sous la phrase ne depasse 140 px que sur une petite fenetre de 896 px de haut et plus, jusqu'a 245 px a 540 x 1 000, des tailles sans telephone reel. 4. Le premier bouton au-dessus du bandeau (10/10/2026, audit UI/UX du 9 octobre, point A01). Sur les ecrans bas, meme la couverture serree ne tenait pas au-dessus du bandeau ouvert : a 320 x 568, il couvrait 16,8 px de « Echanger sur votre projet », et a 375 x 548 (Safari sur iPhone SE) le bouton ne gardait que 7,6 px d'air. Tant que le bandeau est ouvert, et la seulement, --fa-manque dit ce qu'il manque pour que le bas de ce bouton finisse 8 px au-dessus du bandeau (plus 1 px pour l'arrondi de la mesure du bandeau). Le bas du bouton dans la couverture serree se deduit de --fa-serre, moins --fa-sous-b1 (le second bouton, ses deux ecarts, la phrase et le bas de la grille : 128,3 px quand la phrase tient sur deux lignes, de 270 a 454 px de large, 110,1 px au-dela, 146,5 px sous 270 px, ou elle en prend trois, releve du 10/10/2026, le meme dans WebKit et Chromium, arrondi vers le bas). Le premier releve du 10/10/2026 donnait 125,4 et 107,2 px, 3 px sous la mesure, du cote prudent. Ce manque, 24 px au plus, se prend sur les ecarts du texte, tous au meme pas : le haut de la grille de 72 a 64 px, les trois espaces de 9, 8 et 17 px a 5, 4 et 13 (de 10, 12 et 12 a 6, 8 et 8 avant la reprise du soir, point 3, la somme est la meme), l'ecart entre les reperes de 4 a 2 px. Il etait de 28,8 px au plus jusqu'au soir du 10/10/2026, quand l'interligne des reperes passait encore de 1,3 a 1,2 : la couverture serree l'a desormais a 1,2 (point 1). La grille perd la meme hauteur, la bulle suit, toujours sous le bandeau. Aucun texte n'est retire. Au-dela de ces 24 px, le titre se reduit (point 5). Depuis le soir du 10/10/2026, le manque vise aussi la phrase « Premier echange sans engagement. Reponse sous un jour ouvre. », 8 px au-dessus du bandeau (--fa-brut-note), la ou 24 px y suffisent : avec les nouveaux reperes, sa seconde ligne passait 3,7 px sous le bord du bandeau a 393 x 659. Plus haut que 24 px, la phrase ne peut pas tenir, le manque reste celui du bouton, et les ecarts ne se serrent pas pour rien. Mesures a la premiere visite, avec le bandeau resserre des ecrans bas (socle.css 10), les memes dans WebKit et Chromium a 0,1 px pres, air sous le bouton (avant ce soir entre parentheses) : 9,2 px a 320 x 568 (8,8), 9,9 a 375 x 548 (20,9), 9,8 a 320 x 548 (8,8), 9,6 a 375 x 500 (8,9), 9,6 a 390 x 500 (8,6). Air sous la phrase : 9,3 px a 393 x 659 (8,3), 390 x 664 (13,3) et 360 x 640 (1,3), 10,3 a 375 x 667, 31,8 a 430 x 739 et 412 x 780, 32,3 a 393 x 852. Mesures refaites a la reprise du soir (point 3), au dixieme de pixel pres les memes. Le manque ne joue qu'a la premiere visite (html.consent-attendu) : quand « Gerer mes cookies » rouvre le bandeau, la couverture est loin au-dessus de l'ecran, et la page ne change plus de hauteur sous les yeux (reprise du meme jour). Reliquat visuel a 375 x 548 : entre le bouton et le bandeau paraissent les 13 px du haut du second bouton, sans son libelle, que le bandeau couvrait avant. A la reponse, la couverture reprend ses ecarts dans les 300 ms de l'effacement du bandeau (transition) et finit au pixel pres ou elle finit aux visites suivantes. Bandeau ferme, aux visites suivantes, rien ne change (le manque est nul). L'interligne des reperes s'ecrit en em (1.2em), le meme rendu que 1,2 au pixel pres dans les deux moteurs, pour que la transition le suive. Le bandeau lui-meme est celui du socle (socle.css 10) : si sa hauteur change au telephone, refaire le releve de la section 5. 5. Les paliers du titre (reprise du 10/10/2026, meme point A01). Sur les ecrans plus bas, les ecarts ne suffisent pas. Ce qui manque encore (--fa-exces) se prend sur la taille du titre, la seule qui reste, tant que le bandeau est ouvert et a la premiere visite seulement. Le titre prend la plus grande taille qui rend ce manque, parmi trois facons de le couper, chaque phrase gardant sa ligne a elle (la coupure du balisage reste) : - le meme nombre de lignes, plus petit (--fa-tl : 2 lignes de 449 a 540 px de large, 3 de 351 a 448, 4 en dessous, le plus petit nombre de lignes de chaque bande, pour ne jamais compter trop), - sur trois lignes, « Eclairer vos decisions. » tenant sur une (10cqi, la phrase mesure 9,7 fois la taille du titre), - sur deux lignes, une par phrase (8,5cqi, la premiere mesure 11,4 fois la taille du titre). Une taille qui gagne une ligne rend plus que le manque. Pour que le reste n'aille pas sous le bouton, ou il decouvrait le haut du second bouton sans son libelle (18 px a 390 x 480), la grille garde a la premiere visite la hauteur de la couverture serree, moins ce que les ecarts et le titre doivent rendre (--fa-tenue, --fa-serre moins 1 px pour l'arrondi du releve) : le reste revient aux blocs vides de la colonne, au-dessus du bouton (points 2 et 3), et le bouton finit 8 px au-dessus du bandeau. Hors de la premiere visite, --fa-tenue est nulle et la hauteur minimale est celle des visites suivantes. 22 px au plus petit depuis le soir du 10/10/2026 (24 avant : la ligne de plus des reperes demandait ces 4 px a 320 x 480). Bandeau ferme, le manque est nul et le titre garde sa taille du telephone (section 16), au pixel pres. A la reponse, il la reprend en 300 ms, avec les ecarts. Mesures du soir du 10/10/2026, les memes dans WebKit et Chromium, air sous le bouton et taille du titre (avant ce soir entre parentheses) : 9,7 px a 320 x 500 (8,8), titre de 23,8 px sur deux lignes, 9,7 a 320 x 480 (9,7), 23,8 px, 9,7 a 310 x 480 (couvert de 3,3), 9,8 a 300 x 520 (0,6), 9,6 a 390 x 480 (9,5), 29,8 px, 10,5 a 430 x 480 (10,4), 33,2 px. Restent couverts, faute de place meme a 22 px : le bas du bouton de 11,3 px a 320 x 454 (Safari sur le premier iPhone SE, barres affichees, 4 px avant ce soir, 130,8 px avant le point A01), de 0,2 px a 300 x 500 (19 avant) et de 46,2 a 300 x 454 (65,4 avant). 6. Le paysage (reprise du 10/10/2026, meme point A01). Telephone tenu en paysage, de 560 a 760 px de large et 520 px de haut au plus, ecran tactile (la requete du bandeau du paysage, socle.css 10) : la couverture n'y respire pas (les points 0 a 5 ne jouent que debout, sur 540 px de large au plus), et le bandeau couvrait tout le premier bouton, de 73,5 px a 667 x 375 (iPhone SE), 88 a 734 x 343 (Safari sur iPhone 15), 146 a 568 x 320. A la premiere visite, bandeau ouvert, la couverture se serre d'un coup, sans rien retirer : l'etiquette sur une ligne (elle tient des 510 px de colonne), le haut de la grille a 64 px, l'etiquette a 6 px du titre, les reperes a 4 px du titre, en rangs (cote a cote quand ils tiennent, a 24 px l'un de l'autre, en interligne 1,1), les boutons a 4 px des reperes. Ce qui manque encore pour 8 px d'air se prend sur le titre, toujours sur deux lignes (--fp-exces, de 36 a 22 px). --fp-b1 est le bas du premier bouton dans cette couverture, titre a 36 px : 271,3 px, releve du soir du 10/10/2026, le meme dans WebKit et Chromium de 560 a 760 px de large. Avec les nouveaux reperes, plus longs, ils prennent trois rangs au lieu de deux : les ecarts des reperes et des boutons passent de 8 a 4 px, leur interligne de 1,2 a 1,1 et le plus petit titre de 24 a 22 px, pour que le bouton garde ses 8 px d'air la ou il les avait (267,9 px avant, avec le lisere). Le bandeau du paysage se resserre lui aussi (socle.css 10, de 94 a 88 px a 734 px de large). Mesures du soir du 10/10/2026, les memes dans WebKit et Chromium, air sous le bouton et taille du titre : 8,6 px a 667 x 375 (31,6 px), 9,5 a 734 x 343 (24 px), 9,5 a 726 x 340 et 750 x 340 (22,5 px), 8,6 a 640 x 360 (24,4 px), 55,2 a 736 x 414 (36 px, le second bouton entier au-dessus du bandeau). Restent couverts, a 22 px : 4,4 px du bouton a 712 x 325 (iPhone 12 et 13 mini) et 724 x 325 (5,2 avant ce soir), 21,4 a 756 x 308 (Pixel 9, Chrome, 22,2), 26,3 a 658 x 320 (27,1), 43,2 a 568 x 320 (premier iPhone SE, 43,9), contre 106 a 146 px avant le point A01. Y tenir le bouton demanderait de poser les boutons a cote du texte ou de couper le texte du bandeau. A la reponse, les ecarts et le titre reprennent leur valeur en 300 ms, l'etiquette et les reperes leurs lignes d'un coup, et la couverture est celle des visites suivantes au pixel pres. Sur la scene vivante (Chromium WebGL, centile 98 du fond sous chaque ligne, texte masque), a la premiere visite, le texte de la couverture serree (points 4 a 6) garde au pire 5,4:1 pour « Eclairer vos decisions. » (393 x 852, 5,6 avant ce soir), 5,5:1 a 430 x 739, 5,7:1 a 393 x 659 et 390 x 480, 11,1:1 pour l'etiquette et 13,2:1 pour les reperes, au-dessus du bandeau (releve de la reprise du soir, point 3). 7. Les reperes au plus etroit (10/10/2026). Sous 326 px de large, les reperes passent de 16 a 15 px : « Analyse macro et microeconomique » tient alors sur une ligne de 310 a 325 px (320 px, premier iPhone SE), et « Conseils pour augmenter la valeur » de 294 a 309. La couverture serree y perd 24 px, et la lisiere de 320 x 568 passe de 13,5 a 37,5 px. Mesures du 09/10/2026, les memes dans WebKit et Chromium, fenetre de la hauteur de la petite fenetre, haut de la premiere bulle compte depuis le bas de l'ecran, avant puis apres : 393 x 659 (Safari sur iPhone 15) 156 puis 48 px, 390 x 664 161 puis 48, 430 x 739 (Safari sur Pro Max) 236 puis 48, 412 x 780 (Chrome sur Android) 277 puis 48, 360 x 640 150 puis 48, 393 x 852 (plein ecran) 349 puis 48. La seconde bulle se voyait sur ces six ecrans, elle ne se voit plus. A 375 x 548 (Safari sur iPhone SE), 51 puis 48 px : la couverture serree y tient a 3 px pres, le rythme ne bouge presque pas. A 320 x 568, 44 px, rien ne change. Le 10/10/2026, les memes 48 px sur ces six ecrans (point 3). A la premiere visite, mesures de la reprise du 09/10/2026 (balayage de 240 a 760 px de large, 53 largeurs, et de 480 a 1 133 px de haut, 21 hauteurs, Chromium, puis WebKit sur 17 largeurs et 12 hauteurs, les memes) : aucun bouton ni la phrase n'est coupe par le bandeau la ou rien ne l'etait avant ce soir-la, et chaque mesure est celle d'avant a 0,8 px pres (arrondi de --fa-serre). La phrase finissait au-dessus du bandeau de 8,3 px a 393 x 659, 13,3 a 390 x 664, 1,3 a 360 x 640 (1,9 avant), 31,8 a 430 x 739 et 412 x 780, 32,3 a 393 x 852 (pour le 10/10/2026, point 4). Restaient coupes, les ecrans ou meme la couverture serree ne tient pas au-dessus du bandeau, par exemple 320 x 568 et 375 x 548, que le point 4 a repris. Au-dela de 540 px, la page etait la meme au pixel pres qu'avant le 09/10/2026 au soir a 541 x 960, 600 x 960, 744 x 1 133, 760 x 1 000, en paysage tactile a 667 x 375 et 740 x 360, a 761 x 1 000, 1 024 x 1 366 et 1 440 x 900 (Chromium, mouvement reduit, scene coupee, page entiere, premiere visite et apres refus), et dans WebKit a 600, 744 et 1 024 px. Le 10/10/2026, ce bloc ne change rien au-dela de 540 px hors du paysage a la premiere visite (point 6) : de 541 a 760 px, seuls les nouveaux reperes et l'air de la section 19 changent la page, et a 761 px et au-dela, les reperes seuls (recette, --admis=/). Les regles de ce bloc ne touchent ni /valorisation, ni /calculateur, ni /evaluation-pme, au telephone non plus. Ces pages ne changent au telephone que du lisere Klein, retire le meme jour (scene.css 1) : leur contenu remonte de 3 px. Sur la scene vivante (Chromium WebGL), le 09/10/2026, le texte de la couverture gardait son contraste apres la reponse au bandeau (« Eclairer vos decisions. » 6,2:1 au pire, 6,3 avant, sur les huit ecrans), l'effacement sous la barre et le voile du telephone suivaient les nouvelles positions, et le verre de la barre gardait au pire 6,8:1 pour le nom et 7,4:1 pour les traits sur la couverture (6,4 et 6,2 avant, 393 x 852, une position tous les 50 px). Releve de la reprise du soir du 10/10/2026, apres refus, en haut de page puis 40 px plus bas (centile 98 du fond sous chaque ligne, texte masque, huit ecrans de 320 x 568 a 430 x 932) : « Eclairer vos decisions. » 5,5:1 au pire a 430 x 932 et 5,6 a 412 x 915, le titre devant un arc plus clair de la scene, 5,9 a 393 x 852 (6,5 le 09/10/2026, 5,6 au premier passage du 10/10/2026, le titre plus haut de 20 px), 6,0 a 6,5 ailleurs, au-dessus des 4,5:1 du texte courant et des 3:1 du gros texte, l'etiquette 11,1:1 au moins, les reperes 13,4:1, la phrase 13,2:1. Reste connu : de 415 a 540 px de large, ou le perimetre de la premiere bulle tient sur une ligne, le haut du rond de sa fleche entre de 6,9 px dans la lisiere (7,9 avant que l'interligne du perimetre passe a 1,5, section 19, 6), un arc sombre a droite du nom. Une lisiere de 40 px le cacherait, mais le nom toucherait alors le bas de l'ecran (1,8 px sous sa ligne de base) : elle reste a 48 px, et le rond dit que la bulle se touche. */ @media screen and (max-width: 540px){ .f-accueil{ --fa-lisiere:48px; --fa-ecran:100vh; --fa-serre:440px; --fa-pied:8px; --fa-ecart-max:96px; --fa-reserve:0px; --fa-place:calc(var(--fa-ecran) - var(--fa-lisiere) - var(--fa-serre)); --fa-garde:clamp(0px, var(--fa-place), var(--fa-reserve)); --fa-libre:calc(var(--fa-place) - var(--fa-garde)); --fa-sous-b1:110.1px; --fa-manque:0px; --fa-exces:0px; --fa-tenue:0px; --fa-cache:0px; --fa-titre:36px; --fa-tl:2; --fa-lignes:3; --fa-m-ecarts:min(var(--fa-manque), 24px); --fa-m-lignes:max(0px, var(--fa-manque) - 24px); } @supports (height:100svh){ .f-accueil{ --fa-ecran:100svh; } } html.consent-attendu body.f-accueil, body.f-accueil.consent-open{ --fa-reserve:max(0px, var(--f-consent-h, var(--f-consent-estime, 0px)) - var(--fa-lisiere)); } html.consent-attendu body.f-accueil{ --fa-brut:calc(var(--fa-serre) - var(--fa-sous-b1) + 9px + var(--f-consent-h, var(--f-consent-estime, 0px)) - var(--fa-ecran)); --fa-brut-note:calc(var(--fa-serre) - var(--f-couv-bas, 24px) + 9px + var(--f-consent-h, var(--f-consent-estime, 0px)) - var(--fa-ecran)); --fa-plafond:calc(24px + var(--fa-lignes) * 1.6px); --fa-manque:clamp(0px, max(var(--fa-brut), var(--fa-brut-note) - max(0px, var(--fa-brut-note) - var(--fa-plafond)) * 1000), var(--fa-plafond)); --fa-exces:max(0px, var(--fa-brut) - var(--fa-plafond)); --fa-tenue:calc(var(--fa-serre) - 1px); --fa-cache:max(0px, min(var(--fa-sous-b1) - 82px - var(--fa-brut-note), (var(--fa-brut-note) - var(--fa-plafond)) * 1000)); } .f-accueil .f-couv-titre{ font-size:clamp(22px, max(calc(var(--fa-titre) - var(--fa-exces) / (1.05 * var(--fa-tl))), min(10cqi, calc((var(--fa-titre) * var(--fa-tl) - var(--fa-exces) / 1.05) / 3)), min(8.5cqi, calc((var(--fa-titre) * var(--fa-tl) - var(--fa-exces) / 1.05) / 2))), var(--fa-titre)); } .f-accueil .f-couv-grille{ container-type:inline-size; align-items:stretch; min-height:calc(max(var(--fa-ecran) - var(--fa-lisiere), var(--fa-tenue)) - var(--fa-manque) - var(--fa-exces)); padding-top:calc(72px - var(--fa-m-ecarts) * 8 / 24); padding-bottom:calc(var(--f-couv-bas, 24px) + max(0px, var(--fa-garde) - var(--fa-cache)) + clamp(0px, var(--fa-libre) - 8px, var(--fa-pied))); } .f-accueil .f-couv-texte{ display:contents; } .f-accueil .f-couv-etiquette{ order:1; margin-bottom:0; } .f-accueil .f-couv-titre, .f-accueil .f-couv-intro{ order:3; } .f-accueil .f-couv-reperes{ order:5; margin-top:0; gap:calc(4px + clamp(0px, (var(--fa-libre) - 16px) / 2, 4px) - var(--fa-m-ecarts) * 2 / 24); } .f-accueil .f-couv-reperes li{ line-height:calc(1.2em + clamp(0px, (var(--fa-libre) - 24px) / var(--fa-lignes), 1.6px) - var(--fa-m-lignes) / var(--fa-lignes)); } .f-accueil .f-couv-boutons{ order:7; margin-top:0; gap:calc(8px + clamp(0px, var(--fa-libre), 8px) / 2); } .f-accueil .f-couv-grille::before, .f-accueil .f-couv-texte::before, .f-accueil .f-couv-texte::after, .f-accueil .f-couv-grille::after{ content:""; flex:1 1 0; pointer-events:none; } .f-accueil .f-couv-grille::before{ order:0; flex-grow:1000; min-height:0; max-height:8px; } .f-accueil .f-couv-texte::before{ order:2; flex-basis:1px; min-height:calc(9px - var(--fa-m-ecarts) * 4 / 24); max-height:calc(var(--fa-ecart-max) + 1px); } .f-accueil .f-couv-texte::after{ order:4; min-height:calc(8px - var(--fa-m-ecarts) * 4 / 24); max-height:var(--fa-ecart-max); } .f-accueil .f-couv-grille::after{ order:6; flex-basis:8px; min-height:calc(17px - var(--fa-m-ecarts) * 4 / 24); max-height:calc(var(--fa-ecart-max) + 8px); } } /* La couverture suit le bandeau qui s'efface (point 0, plus haut) : 300 ms et la courbe du bandeau (socle.css 10). Depuis le 10/10/2026 (point 4), la hauteur minimale et l'interligne des reperes suivent aussi, et, le soir du meme jour, la hauteur minimale des trois blocs vides (point 3), qui remplacent les marges du texte. */ @media screen and (max-width: 540px) and (prefers-reduced-motion: no-preference){ .f-accueil .f-couv-grille{ transition:padding .3s var(--f-entree-courbe), min-height .3s var(--f-entree-courbe); } .f-accueil .f-couv-texte::before, .f-accueil .f-couv-texte::after, .f-accueil .f-couv-grille::after{ transition:min-height .3s var(--f-entree-courbe); } .f-accueil .f-couv-reperes, .f-accueil .f-couv-boutons{ transition:gap .3s var(--f-entree-courbe); } .f-accueil .f-couv-reperes li{ transition:line-height .3s var(--f-entree-courbe); } .f-accueil .f-couv-titre{ transition:font-size .3s var(--f-entree-courbe); } } @media screen and (max-width: 325.98px){ .f-accueil .f-couv-reperes li{ font-size:15px; } } @media screen and (max-width: 528.98px){ .f-accueil{ --fa-serre:459px; --fa-lignes:4; } } @media screen and (max-width: 509.98px){ .f-accueil{ --fa-serre:478px; --fa-lignes:5; } } @media screen and (max-width: 454.98px){ .f-accueil{ --fa-serre:496px; --fa-sous-b1:128.3px; } } @media screen and (max-width: 448.98px){ .f-accueil{ --fa-serre:534px; --fa-tl:3; } } @media screen and (max-width: 390.98px){ .f-accueil{ --fa-serre:553px; --fa-lignes:6; } } @media screen and (max-width: 389.98px){ .f-accueil{ --fa-serre:547px; --fa-titre:34px; } } @media screen and (max-width: 374.98px){ .f-accueil{ --fa-serre:541px; --fa-titre:32px; } } @media screen and (max-width: 350.98px){ .f-accueil{ --fa-serre:574px; --fa-tl:4; } } @media screen and (max-width: 325.98px){ .f-accueil{ --fa-serre:567px; } } @media screen and (max-width: 295.98px){ .f-accueil{ --fa-serre:585px; --fa-lignes:7; } } @media screen and (max-width: 293.98px){ .f-accueil{ --fa-serre:603px; --fa-lignes:8; } } @media screen and (max-width: 279.98px){ .f-accueil{ --fa-serre:620px; } } @media screen and (max-width: 269.98px){ .f-accueil{ --fa-serre:638px; --fa-sous-b1:146.5px; } } @media screen and (max-width: 265.98px){ .f-accueil{ --fa-serre:655px; } } @media screen and (max-width: 250.98px){ .f-accueil{ --fa-serre:673px; --fa-lignes:9; } } @media screen and (max-width: 243.98px){ .f-accueil{ --fa-serre:707px; } } /* Le paysage a la premiere visite (point 6, plus haut). Meme requete que le bandeau du paysage tactile (socle.css 10). Tout est sous html.consent-attendu, posee avant le premier rendu et retiree a la reponse : aux visites suivantes, et quand « Gerer mes cookies » rouvre le bandeau, la couverture est celle d'avant. --fp-b1 est le bas du premier bouton dans la couverture serree, titre a 36 px (271,3 px, releve du soir du 10/10/2026, le meme dans WebKit et Chromium de 560 a 760 px de large : etiquette sur une ligne, titre sur deux, reperes sur trois rangs, 267,9 px au premier releve, avec deux rangs et le lisere). */ @media screen and (hover: none) and (pointer: coarse) and (max-height: 520px) and (min-width: 560px) and (max-width: 760px){ .f-accueil{ --fp-ecran:100vh; --fp-b1:271.3px; --fp-exces:0px; } @supports (height:100svh){ .f-accueil{ --fp-ecran:100svh; } } html.consent-attendu body.f-accueil{ --fp-exces:max(0px, var(--fp-b1) + 9px + var(--f-consent-h, var(--f-consent-estime, 0px)) - var(--fp-ecran)); } html.consent-attendu body.f-accueil .f-couv-grille{ padding-top:64px; } html.consent-attendu body.f-accueil .f-couv-etiquette{ margin-bottom:6px; } html.consent-attendu body.f-accueil .f-couv-etiquette span{ display:inline; } html.consent-attendu body.f-accueil .f-couv-titre{ font-size:clamp(22px, calc(36px - var(--fp-exces) / 2.1), 36px); } html.consent-attendu body.f-accueil .f-couv-reperes{ display:flex; flex-wrap:wrap; column-gap:24px; row-gap:0; margin-top:4px; } html.consent-attendu body.f-accueil .f-couv-reperes li{ line-height:1.1; } html.consent-attendu body.f-accueil .f-couv-boutons{ margin-top:4px; } } /* A la reponse, les ecarts et le titre reprennent leur valeur en 300 ms, avec le bandeau qui s'efface, comme au portrait. L'etiquette et les reperes changent de rang d'un coup. */ @media screen and (hover: none) and (pointer: coarse) and (max-height: 520px) and (min-width: 560px) and (max-width: 760px) and (prefers-reduced-motion: no-preference){ .f-accueil .f-couv-grille{ transition:padding .3s var(--f-entree-courbe); } .f-accueil .f-couv-etiquette{ transition:margin .3s var(--f-entree-courbe); } .f-accueil .f-couv-reperes, .f-accueil .f-couv-boutons{ transition:margin .3s var(--f-entree-courbe); } .f-accueil .f-couv-reperes li{ transition:line-height .3s var(--f-entree-courbe); } .f-accueil .f-couv-titre{ transition:font-size .3s var(--f-entree-courbe); } } /* ========================================================================= 19. L'ACCUEIL AU TELEPHONE : ENCORE UN PEU D'AIR (10/10/2026) ------------------------------------------------------------------------- */ /* Demande de Raphael du 10/10/2026, l'accueil vu sur son iPhone : « ok c'est bien aere mais il faudrait encore un petit peu et ce sera bien ». La couverture est dans la section 18. Sous elle, une meme regle d'un bout a l'autre de la page, ecart par ecart (avant entre parentheses) : 1. Entre deux sections qui changent de sujet, 72 px de scene : des bulles d'offre a la demonstration (64), de l'interlocuteur a la conception, du contenu du rapport au deroulement, du deroulement a la confidentialite et de la confidentialite aux retours (48). L'interlocuteur garde 48 px apres les 32 du bas de la demonstration, 80 en tout. Du bord d'une bande a son contenu, 72 px (56) : conception, contenu du rapport, retours. Dans la bande de papier continue des retours, de l'offre et des questions, 56 px de chaque cote (48), 112 d'une section a l'autre : 64 et 64 y faisaient un trou au-dessus de « Vos questions », qui n'a pas d'etiquette. Le bas des questions, 72 px (56). L'appel final, 80 px au-dessus du titre et 88 sous la note (64 et 72). 2. Entre blocs proches, 48 px : d'un en-tete a sa grille (40), dans la demonstration, la conception, le contenu du rapport, les retours, l'offre et les questions, du dernier pilier a la phrase de conclusion (32), entre deux rangs du contenu du rapport (32), des questions aux reperes par secteur (32). 3. D'un titre de section a son contenu, 28 px : titres collants du deroulement, de l'interlocuteur et de la confidentialite (20), boutons de la demonstration et de l'appel final (24), bouton du contenu du rapport (20). D'un titre a son chapo, 16 px (12), et 20 dans l'appel final (16), du titre des reperes par secteur a leur liste (12). Le chapo du contenu du rapport, que la grille de son en-tete posait a 40 px du titre, revient a 16 comme les autres. 4. Entre cartes ou bulles empilees, 16 px : bulles d'offre de la couverture (10), piliers de la conception (12, schema.css 10), questions (8). Les cartes d'offre y etaient deja, les retours gardent 20 px. 5. Dans les bulles blanches serrees, 4 px de plus : panneau de la demonstration (20, son cadre suit, rapport-vitrine.css 9), cartes de l'interlocuteur et de la confidentialite (28 et 24 au lieu de 24 et 22, 28 entre leurs blocs au lieu de 24), bulle du deroulement (24 de cote, ses etapes 22 et 24 au lieu de 18 et 20, 10 du titre au texte au lieu de 8), retours (24), cartes d'offre (28, 24 et 24 au lieu de 24, 20 et 20, 24 entre leurs blocs au lieu de 16), questions (20 au lieu de 18), tetes des piliers (schema.css 10), liens des reperes par secteur (14 au lieu de 12). 6. L'interligne des paragraphes, 1,5 au moins : perimetres et prestations des cartes d'offre, phrases sous les cartes et note de l'appel final (1,4), cellules et notes des piliers (1,45), chapo de la conception (1,2, la bande .gs echappe a l'interligne de lecture du socle, socle.css 13 : il en prend la valeur). A la reprise du meme soir, aussi les perimetres des bulles d'offre de la couverture (1,35), sur deux lignes sous 415 px de large, et les liens des reperes par secteur (1,3), sur deux lignes de 360 a 430 px, le premier sur trois a 320 px. La phrase de conclusion de la conception, en 20 px et en graisse 500, centree et equilibree comme un titre, passe de 1,3 a 1,4, comme les questions de la FAQ, qui sont des titres, gardent le leur (1,3). La planche de la demonstration ne change pas de largeur : son cadre reprend --f-pad-panneau dans ses marges negatives (rapport-vitrine.css 8), et la reserve de rapport-vitrine.js reste juste. Mesures du 10/10/2026, consentement refuse, Chromium (393 x 852, 393 x 659, 320 x 568) : la hauteur sans aucun contenu, de la premiere bulle d'offre au pied, passe de 3 395 a 4 096 px a 393 x 852 (plus 20,6 %), de 3 588 a 4 289 a 393 x 659 (plus 19,5 %), de 3 711 a 4 416 a 320 x 568 (plus 19 %). Les 36 ecarts touches, mesures de bloc a bloc, passent de 1 366 a 1 678 px a 393 px de large (plus 22,8 %). La page passe de 11 459 a 12 301 px a 393 x 852 et de 12 143 a 12 901 px a 320 x 568 (mesures de la reprise du soir, interlignes du point 6 compris). Aucun decalage a la descente (recette). Tout est a l'ecran de 760 px et moins (screen), borne a l'accueil : /valorisation et /calculateur, qui chargent cette feuille, l'impression et la page a 761 px et au-dela ne changent pas. */ @media screen and (max-width: 760px){ .f-accueil .g-bulles{ gap:16px; } .f-accueil .g-bulle-sous{ line-height:1.5; } .f-accueil .f1-demo{ margin-top:72px; } .f-accueil .f1-demo-panneau{ --f-pad-panneau:24px; gap:48px; } .f-accueil .f1-demo-boutons{ margin-top:28px; } .f-accueil #deroulement, .f-accueil #confidentialite{ margin-top:72px; } .f-accueil .f-duo-colle > .f2-colle{ margin-bottom:28px; } .f-accueil .f2-chapo-colle{ margin-top:16px; } .f-accueil .f2-carte-blanche, .f-accueil .f2-carte-conf{ padding:28px 24px; gap:28px; } .f-accueil #contenu-du-rapport{ padding-top:72px; padding-bottom:72px; } .f-accueil .f1-contenu-entete{ gap:16px; margin-bottom:48px; } .f-accueil .f1-rang + .f1-rang{ margin-top:48px; } .f-accueil .f1-rang .f-rang-texte{ gap:16px; } .f-accueil .f1-rang-boutons{ margin-top:28px; } .f-accueil .f2-deroulement .f-duo-colle > .f-pile{ padding:4px 24px; } .f-accueil .f2-etape{ padding:22px 0 24px; gap:10px; } /* Les bandes de papier jointes (retours, offre, questions) : 32 px en bas et 40 px en haut, pour que le passage d'un sujet a l'autre fasse 72 px d'encre a encre comme ailleurs (112 px avec 56 + 56, 11/10/2026). */ .f-accueil #avis{ margin-top:72px; padding-top:72px; padding-bottom:32px; } .f-accueil .f2-avis-carte{ padding:24px; } .f-accueil .f-entete-centre{ margin-bottom:48px; } .f-accueil #offre{ padding-top:40px; padding-bottom:32px; } .f-accueil .f-entete-centre .f-chapo{ margin-top:16px; } .f-accueil .f3-offre .g-carte{ padding:28px 24px 24px; gap:24px; } .f-accueil .f3-offre .g-carte-seuil{ line-height:1.5; } .f-accueil .f3-offre .g-carte-inclus li{ line-height:1.5; } .f-accueil p.f3-socle{ margin-top:32px; line-height:1.5; } .f-accueil #faq{ padding-top:40px; padding-bottom:72px; } .f-accueil .f3-faq-liste{ gap:16px; } .f-accueil .f3-question > summary{ padding:20px; } .f-accueil .f3-reperes{ margin-top:48px; gap:16px; } .f-accueil .f3-reperes a{ padding:14px 0; line-height:1.5; } .f-accueil .f3-appel{ padding:80px 0 88px; } .f-accueil .f3-appel-chapo{ margin-top:20px; } .f-accueil .f3-appel .f-boutons{ margin-top:28px; } .f-accueil .f3-appel-note{ line-height:1.5; } }