/* ========================================================================= ARTIS VALORISATION, REFONTE : LE SOCLE (socle.css) Charge par toutes les pages, en premier. Tire le 30/09/2026 de f-page.css, la feuille de l'accueil en verre (essais F et G, valides par Raphael) : les polices (DM Sans servie en local, Bodoni pour le seul nom Artis Valorisation), les jetons, la remise a zero, le conteneur de 1360 px, les boutons, la barre et son menu, le nom et le pied, les elements qu'ajoute artis.js (bandeau de consentement, barre d'appel, retour en haut) et les utilitaires. Ensuite : scene.css pour les pages a scene (accueil et trois pages d'offre), pages.css pour toutes les autres. artis.css et fonts.css (Libre Franklin) ne sont plus charges. Chaque regle garde son texte et son ordre d'origine ; les commentaires sont ceux de l'essai et disent d'ou vient chaque valeur. Reference du systeme : REFONTE-GABARIT.md, a la racine du depot. ------------------------------------------------------------------------- */ /* ========================================================================= 1. POLICES : DM SANS, SON REPLI, LE BODONI DU SEUL NOM ------------------------------------------------------------------------- */ /* ========================================================================= DM SANS (30/09/2026) Paquet @fontsource-variable/dm-sans 5.3.0, licence OFL-1.1 (assets/fonts/OFL-DM-Sans.txt). Fichiers « wght » : axe de graisse 100 a 1000, taille optique figee a 14. C'est l'instance que sert la reference (Google Fonts) : « The future of » a 72/500/-2.16px y mesure 409,25 px, nos fichiers donnent 409,25 px ; l'instance opsz automatique en donne 361,31. Latin et latin etendu, droit et italique (l'italique ne sert qu'aux valeurs interpolees de la matrice des planches). Servis d'ici : la CSP n'autorise que font-src 'self'. Le fichier latin droit est precharge dans la tete des six pages d'essai. Graisses et reglages, releves sur la reference le 30/09/2026 (styles calcules a 1440 et 393) et transposes a nos niveaux : titre de couverture 72/72 (40/42) 500 -0.03em = reference titre de section 48/52,8 (28) 500 -0.03em = reference titre de carte 36, 28 (24, 20) 500 -0.03em = reference chiffres, prix grands 500 -0.03em reference : +48 %, 72/500 chapeau 20/24 (18) 400 -0.03em reference : 300 texte courant 16/19,2 400 -0.03em reference : 300 boutons 16/1 (14) 400 -0.03em reference : 300 etiquettes 12/1 500 +0.3em, capitales = reference Aucune graisse au-dessus de 500, la plus forte de la reference : les 600 de l'essai (prix, noms d'offre, mots mis en avant, petites capitales) passent a 500, titres des planches du rapport compris (en 600, DM Sans renvoyait « Groupe Montvalier » sur deux lignes a 375). Seuls les chiffres et intitules des tableaux des planches (planches.css) gardent leurs 600 : ils reproduisent les pages du rapport, denses. Les etiquettes qui ouvrent un bloc prennent l'espacement de la reference (0.3em) ; les pastilles et les petites capitales des lignes de chiffres gardent le leur. Pourquoi 400 et non 300 pour le texte : la table de lisibilite APCA (apca-w3 0.1.9, fontMatrixAscend) demande Lc 125 pour du 300 a 16 px, Lc 105 a 18 px, Lc 95 a 20 px ; nos meilleurs couples plafonnent a Lc 107 (blanc sur la scene la plus sombre), l'encre sur le papier fait 99, l'encre-2 86, le blanc sur les moments clairs de la scene 78 a 87. Le 300 ne passe donc nulle part a 16 px, ni au telephone a 18 px ; le 400 demande Lc 90 a 16 px et 75 a 18 px. Mesure du trait : DM Sans 400 a un fut de 84 unites (1,34 px a 16 px), celui du Libre Franklin 400 d'avant (84,6) ; le 300 descend a 70 (1,12 px). Chiffres tabulaires : ni DM Sans ni le Libre Franklin servi n'ont de fonction tnum ; les font-variant-numeric:tabular-nums restent en place, sans effet, comme avant. Repli : « DM Sans repli », Arial local recale sur DM Sans (largeur +4,2 %, jambages 992/310), pour que la page ne saute pas quand la police arrive ; puis les polices systeme. ------------------------------------------------------------------------- */ @font-face{ font-family:"DM Sans"; font-style:normal; font-weight:100 1000; font-display:swap; src:url(../fonts/dm-sans-latin-ext-wght-normal.woff2) format("woff2"); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face{ font-family:"DM Sans"; font-style:normal; font-weight:100 1000; font-display:swap; src:url(../fonts/dm-sans-latin-wght-normal.woff2) format("woff2"); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face{ font-family:"DM Sans"; font-style:italic; font-weight:100 1000; font-display:swap; src:url(../fonts/dm-sans-latin-ext-wght-italic.woff2) format("woff2"); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face{ font-family:"DM Sans"; font-style:italic; font-weight:100 1000; font-display:swap; src:url(../fonts/dm-sans-latin-wght-italic.woff2) format("woff2"); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face{ font-family:"DM Sans repli"; src:local("Arial"), local("ArialMT"), local("Helvetica"), local("Helvetica Neue"); size-adjust:104.2%; ascent-override:95.2%; descent-override:29.8%; line-gap-override:0%; } /* Le nom Artis Valorisation, et lui seul (30/09/2026) : la declaration Bodoni vient de assets/fonts/fonts.css, que les pages d'essai ne chargent plus (il declarait aussi Libre Franklin, que l'essai n'emploie plus). Face reduite aux dix-huit signes du nom. */ @font-face{ font-family:"Bodoni Logotype"; font-style:normal; font-weight:400 900; font-display:swap; src:url(../fonts/BodoniModa-400-logotype.woff2) format("woff2"); } /* DM Sans (30/09/2026) : les vides (traits du burger, jauges, pistes) sont en italique par defaut ; WebKit telechargeait pour eux la face italique (40 Ko) sur chaque page. Elle ne sert qu'aux valeurs interpolees des planches. */ i:empty{ font-style:normal; } /* ========================================================================= 2. JETONS ------------------------------------------------------------------------- */ :root{ /* --- Scene 3D (scene-state : background, fog, lumiere, materiaux) ----- */ --f-scene-fond: #000735; /* fond WebGL, brouillard = fond */ --f-scene-lumiere: #10004a; /* couleur de la lumiere principale, intensite 25 */ --f-scene-lisere: #a5edee; /* sheenColor : le lisere turquoise des disques */ --f-scene-speculaire:#aad4f6; /* specularColor : le reflet bleu clair */ /* Ce que l'oeil voit de la scene a chaque moment (pixels, mediane) */ --f-scene-nuit: #05051c; /* face du disque sombre, couverture */ --f-scene-centre: #121835; /* centre vide de la couverture */ --f-scene-bas: #090d23; /* bas de couverture */ --f-scene-strie: #354c6d; /* strie eclairee, haut gauche de couverture */ --f-scene-acier: #65768d; /* moment clair (partenaires, 2700 px) */ --f-scene-acier-2: #455f83; /* meme moment, cote droit */ --f-scene-brume: #5c6c81; /* haut des services */ --f-scene-profond: #090f27; /* services, zone sombre */ --f-scene-marine: #101934; /* benefices */ --f-scene-turquoise: #729dae; /* haut de l'appel final */ --f-scene-gris: #6f8095; /* milieu de l'appel final */ --f-scene-sol: #101d33; /* sol sous le pied de page */ /* --- Fonds pleins -------------------------------------------------------- */ /* Bandes sombres (.f-bande--marine, contenu du rapport) : le bleu du rapport, Pantone #15253E, celui de l'accueil depuis le 04/10/2026 au soir, sur toutes les pages (#03021b jusque-la). */ --f-aplat: #15253E; /* Voiles poses sous le texte, sur la scene et sur le bleu (04/10/2026, point 12) : le bleu du rapport assombri de moitie, en composantes pour rgba(var(--f-voile), a). Remplace le marine de la nuit (0,7,53 ; 5,12,54) et l'ardoise (18,26,58), qui teintaient de violet. */ --f-voile: 10,20,36; --f-noir: #000000; /* bouton sombre, carte de prix mise en avant */ --f-blanc: #ffffff; /* bouton clair, carte chiffre mise en avant */ --f-cadre-produit:#100f14; /* fond du tableau de bord dans le panneau (pixels) */ /* --- Verre (fond + flou), tous sans bord ni ombre dans la reference ----- */ --f-verre-barre: rgba(255,255,255,.06); --f-flou-barre: 9px; /* barre de navigation */ --f-verre-panneau: rgba(255,255,255,.08); --f-flou-panneau: 25px; /* grand panneau produit */ --f-verre-carte: rgba(255,255,255,.06); --f-flou-carte: 30px; /* cartes sur la scene */ --f-verre-bouton: rgba(255,255,255,.10); --f-flou-bouton: 20px; /* bouton verre */ --f-flou-temoin: 10px; /* cartes temoignage (sur aplat) */ /* Rendu observe (pixels) : ce que donne le verre selon le fond */ --f-vu-barre-scene: #1c2237; /* barre sur la couverture */ --f-vu-barre-aplat: #121128; /* barre et carte 6 % sur l'aplat */ --f-vu-panneau: #222843; /* panneau 8 % sur scene sombre */ --f-vu-carte-scene: #191f37; /* carte 6 % sur scene sombre */ --f-vu-bouton-verre: #202438; /* bouton verre sur couverture */ /* --- Textes (styles.css, variables de couleur) -------------------------- */ --f-texte: #ffffff; /* sur la scene */ --f-texte-aplat: #f2eeee; /* sur les bandes opaques */ --f-texte-nom: #ebe9e5; /* logotype de la barre */ --f-texte-sombre: #000000; /* sur bouton et carte blanche */ --f-attenue-70: rgba(255,255,255,.70); /* #ffffffb3 */ --f-attenue-50: rgba(255,255,255,.50); /* #ffffff80 */ --f-attenue-40: rgba(255,255,255,.40); /* numero 01, 02 ; traits du burger */ --f-attenue-20: rgba(255,255,255,.20); /* numero 03, #ffffff33 */ --f-filet-clair: #ffffff; /* filet sous l'en-tete de la carte noire */ --f-filet-sombre: #000000; /* filet des cartes sur aplat (quasi invisible) */ --f-lisere: #002FA7; /* Artis : lisere de 3 px en haut de page */ /* --- Typographie --------------------------------------------------------- */ --f-police: "DM Sans", "DM Sans repli", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --f-police-nom: "Bodoni Logotype", "Didot", "Bodoni MT", "Times New Roman", serif; --f-g-texte: 400; /* DM Sans 300 dans la reference ; 400 ici, voir le bloc DM SANS */ --f-g-titre: 500; /* DM Sans 500 */ --f-serre: -0.03em; /* -0.48px a 16, -1.44px a 48, -2.16px a 72 */ --f-espace-etiquette: 0.3em; /* 3.6px a 12 */ /* Echelle ordinateur (1440) puis telephone (393), taille / interligne */ --f-t-affiche: 72px; --f-l-affiche: 1; /* titre de couverture et d'appel final */ --f-t-section: 48px; --f-l-section: 1.1; /* titre de section */ --f-t-carte-l: 36px; --f-l-carte-l: 1.15; /* titre de carte large (services) */ --f-t-carte: 28px; --f-l-carte: 1.2; /* titre de carte (fonctionnalites, prix) */ --f-t-chiffre: 72px; --f-l-chiffre: 1; /* grand chiffre de carte */ --f-t-prix: 48px; --f-t-prix-unite: 32px; --f-t-chapo: 20px; --f-l-chapo: 1.2; /* paragraphe d'en-tete ; 1.3 en carte (26px) */ --f-t-texte: 16px; --f-l-texte: 1.2; /* texte de carte, liste */ --f-l-long: 1.45; /* Artis : paragraphes de plus de trois lignes */ --f-t-etiquette:12px; --f-t-bouton: 16px; --f-t-nom: 24px; /* logotype barre */ /* --- Mesures ------------------------------------------------------------- */ --f-largeur: 1360px; /* 1440 moins deux gouttieres */ --f-gouttiere: 40px; --f-r-bouton: 8px; --f-r-carte: 8px; --f-r-panneau: 12px; /* grand panneau, cartes logo, rangees de fonctionnalite */ --f-r-burger: 10px; --f-h-bouton: 48px; --f-h-barre: 60px; --f-pad-bouton: 16px 16px 16px 24px; /* avec pastille fleche ; 16px 24px sans */ --f-pad-panneau:32px; --f-pad-carte: 32px; /* cartes services, chiffres, prix, temoignages */ --f-pad-carte-image:20px;/* cartes a image (fonctionnalites) */ --f-ecart-grille:24px; /* entre cartes */ --f-ecart-logos: 8px; --f-ecart-etiquette:40px;/* haut de l'etiquette au titre : 12 + 40 */ --f-ecart-titre-texte:12px; --f-ecart-titre-contenu:80px; --f-ecart-boutons: 24px; /* texte puis rangee de boutons */ --f-ecart-entre-boutons:4px; --f-bande-haut: 200px; /* bande opaque qui entre */ --f-bande-bas: 60px; /* bande opaque qui continue */ --f-souffle: 240px; /* scene visible entre deux blocs */ --f-entre-duos: 200px; /* d'un duo collant au suivant (Services -> Benefits) */ --f-entre-bande:200px; /* d'une section a l'autre dans une bande (temoignages -> prix) */ --f-tete-bande: 40px; /* du bord de bande a l'etiquette (60 + 40) */ --f-avant-demo: 487px; /* scene entre la couverture et le panneau produit (1390 - 903) */ --f-souffle-clair:40vh; /* scene claire apres le panneau produit (reference : 940 ; retouche finale : un ecran vide, ramene a 40 % de la fenetre) */ --f-rang-hauteur:630px; /* rangee de fonctionnalite */ --f-rang-ecart: 90px; --f-colle-haut: 120px; /* colonne de titre collante (position:sticky;top:120px) */ --f-ombre: none; /* aucune ombre, sauf le menu mobile : 0 10px 20px #0000000d */ /* --- Mouvement (ui-state.json, scrollAnimations) ------------------------- */ --f-entree-echelle: .8; /* rangees de fonctionnalite : scale .8 -> 1 */ --f-entree-duree: 600ms; --f-entree-courbe: cubic-bezier(0, 0, .58, 1); /* easeOut */ /* --- G, deuxieme passe ---------------------------------------------------- */ --g-azur: #7FB0E8; /* seconde ligne du titre, chiffres de couverture (artis.css, --azur sur marine) */ --g-klein: #002FA7; /* bleu Klein d'Artis : accents des cartes blanches */ --g-encre: #0B1D36; /* navy d'Artis : texte sur les cartes blanches (16,8:1) */ --g-gris: #505a6b; /* texte second sur blanc (7,0:1) */ --g-trait: #e2e6ee; /* filets et contour sur blanc */ /* --- Clarte (30/09/2026) : les zones sombres passent en blanc ------------ Demande de Raphael : « toutes les zones, encadrements, sections sur fond noir passent en blanc ; on laisse le fond interactif comme il est ». Papier d'Artis pour les bandes, blanc pour les bulles ; encres mesurees (sur #FFFFFF / #F6F7FA / #EEF1F6) : encre 16,9 / 15,8 / 14,9:1, encre-2 8,9 / 8,3 / 7,9:1, encre-3 6,0 / 5,6 / 5,3:1. */ --f-papier: #F6F7FA; /* bandes claires (papier d'Artis) */ --f-papier-2: #EEF1F6; /* cadre en creux dans une bulle blanche */ --f-encre-2: #3E4A5F; /* texte second sur blanc */ --f-encre-3: #5A6478; /* etiquettes, notes, mentions */ --f-filet-encre: rgba(11,29,54,.10); --f-r-bulle: 16px; /* Une bulle posee sur la scene : une ombre marine, large et douce ; sur le papier, une ombre a peine, avec un filet. */ --f-ombre-bulle: 0 1px 2px rgba(0,7,53,.14), 0 22px 56px rgba(0,7,53,.34); --f-ombre-douce: 0 1px 2px rgba(11,29,54,.05), 0 12px 32px rgba(11,29,54,.07); } @media (max-width: 760px){ :root{ --f-gouttiere: 20px; /* 09/10/2026, audit telephone du 8 octobre (lot 7, constat 210) : une echelle de titres, 38 px a 393 px et 34 px sous 380 px (40 / 42 avant), celle de --k-t-affiche sur le bleu (pages.css 1). Au telephone, ce jeton ne porte plus que les titres d'appel final, que scene.css 10 pose a 34 px : les titres de couverture ont chacun la taille que leur famille a mesuree (accueil.css 16, offre.css, p-methode.css, p-calculateur.css, p-valorisation.css). */ --f-t-affiche: 38px; --f-l-affiche: 1.05; --f-t-section: 28px; --f-l-section: 1.1; /* 28 / 30.8 */ --f-t-carte-l: 24px; --f-l-carte-l: 1.15; /* 24 / 27.6 */ --f-t-carte: 20px; --f-l-carte: 1.3; /* 20 / 26 */ --f-t-chiffre: 40px; --f-t-prix: 28px; --f-t-prix-unite: 20px; --f-t-chapo: 18px; /* Clarte : 11 dans la reference, 12 pour l'iPhone. 09/10/2026, audit telephone du 8 octobre (lots 1 et 6, constats 16, 83 et 174) : 13 px et un interlettrage de .22em (3,6 px a 12 px devenus 2,9 px a 13 px), sur toutes les pages, pied compris. Ce sont les valeurs que la famille de la methodologie posait deja sur son main (p-methode.css) : elles coincident. */ --f-t-etiquette: 13px; --f-espace-etiquette: .22em; --f-t-bouton: 14px; --f-pad-bouton: 12px 16px 12px 24px; --f-pad-panneau: 20px; /* 04/10/2026, point 1 de Raphael (aerer au telephone) : 24 px en haut et en bas, 22 sur les cotes (20 partout avant), comme les bulles du bleu (pages.css 14). */ --f-pad-carte: 24px 22px; /* 24px pour les temoignages */ --f-ecart-grille: 20px; /* 09/10/2026, audit telephone du 8 octobre (lot 7, constat 213) : un seul rayon de bulle au telephone, 20 px, celui des bulles du bleu (--k-r-bulle), au lieu de 16 px sur la scene. Les ombres restent celles de chaque famille. */ --f-r-bulle: 20px; /* Meme audit (lots 1, 2 et 6) : deux boutons empiles ou cote a cote s'ecartent de 8 px (4 avant), pour que deux cibles de 44 px ne se touchent pas. Les familles posaient deja 8 ou 10 px sur leurs rangees de boutons. */ --f-ecart-entre-boutons: 8px; --f-ecart-etiquette: 24px; --f-ecart-titre-contenu: 40px; /* Meme audit (lots 6 et 7, constats 62, 191 et 214) : la scene vide entre deux sections passait de 120 a 400 px. Les familles ont resserre chacune leurs pages (accueil.css 16, offre*.css, p-methode.css, p-calculateur.css). Les jetons communs prennent les valeurs de la methodologie, 64 px pour le souffle, la bande qui entre et l'ecart entre deux duos (120, 100 et 120 px avant). Mesure du jour, WebKit 393 : aucune des huit pages a scene ne bouge d'un pixel, toutes surchargent ces jetons la ou elles s'en servent. Ils valent pour une page a scene a venir. */ --f-bande-haut: 64px; --f-souffle: 64px; --f-entre-duos: 64px; --f-entre-bande: 120px; --f-tete-bande: 20px; --f-avant-demo: 320px; --f-souffle-clair: 40vh; /* reference : 901 ; retouche finale : 40 % de la fenetre */ --f-colle-haut: 0px; /* plus de colonne collante : tout s'empile */ } } /* ========================================================================= 3. LE CONTENEUR DE 1360 PX ------------------------------------------------------------------------- */ .f-conteneur{ width:min(100% - 2*var(--f-gouttiere), var(--f-largeur)); margin-inline:auto; } /* ========================================================================= 4. LES BOUTONS ------------------------------------------------------------------------- */ /* Boutons */ .f-bouton{ display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:var(--f-h-bouton); padding:var(--f-pad-bouton); border-radius:var(--f-r-bouton); border:0; font:var(--f-g-texte) var(--f-t-bouton)/1 var(--f-police); letter-spacing:var(--f-serre); text-decoration:none; cursor:pointer; transition:background-color .2s, color .2s; } /* Clarte : sur la scene, le bouton blanc porte l'encre d'Artis au lieu du noir. */ .f-bouton-clair{ background:var(--f-bouton-plein-fond, var(--f-blanc)); color:var(--f-bouton-plein-texte, var(--g-encre)); } /* Clarte : le bouton sombre prend l'encre d'Artis (#0B1D36) au lieu du noir. */ .f-bouton-sombre{ background:var(--g-encre); color:var(--f-blanc); } .f-bouton-verre{ background:var(--f-verre-bouton); color:var(--f-texte); padding:16px 24px; box-shadow:var(--f-bouton-verre-bord, none); -webkit-backdrop-filter:blur(var(--f-flou-bouton)); backdrop-filter:blur(var(--f-flou-bouton)); } .f-bouton-plein{ display:flex; width:100%; } /* Pastille fleche 20 px : cercle blanc sur bouton sombre, noir sur bouton clair */ .f-pastille{ width:20px; height:20px; border-radius:50%; display:grid; place-items:center; flex:none; margin-block:-2px; } .f-bouton-sombre .f-pastille{ background:var(--f-blanc); color:var(--g-encre); } .f-bouton-verre .f-pastille{ background:var(--f-pastille-verre, var(--f-blanc)); color:var(--f-pastille-verre-fleche, var(--f-noir)); } .f-bouton-clair .f-pastille{ background:var(--f-bouton-plein-texte, var(--g-encre)); color:var(--f-bouton-plein-fond, var(--f-blanc)); } .f-pastille svg{ width:12px; height:12px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; } .f-boutons{ display:flex; flex-wrap:wrap; gap:var(--f-ecart-entre-boutons); margin-top:var(--f-ecart-boutons); margin-bottom:0; } /* Survol : la reference n'en montre aucun (transition:all sans changement mesure). Proposition Artis, discrete, a valider : */ @media (hover:hover){ .f-bouton-clair:hover{ background:var(--f-bouton-plein-survol, #e9ebf0); } .f-bouton-sombre:hover{ background:#162c4f; } .f-bouton-verre:hover{ background:rgba(255,255,255,.16); } } /* Clarte : les cartes des etapes, de l'interlocuteur et de la confidentialite sont blanches, les bulles des offres azur laiteux (plus de fond marine sous le verre). */ /* Bouton de verre sur la scene (4,1:1 sur le disque clair de la couverture au telephone sans le fond marine) ; sur une surface claire, un contour (--f-bouton-verre-fond, --f-bouton-verre-bord). */ .f-bouton-verre{ background:var(--f-bouton-verre-fond, linear-gradient(var(--f-verre-bouton), var(--f-verre-bouton)), rgba(0,7,53,.30)); } @media (hover:hover){ .f-bouton-verre:hover{ background:var(--f-bouton-verre-survol, linear-gradient(rgba(255,255,255,.16), rgba(255,255,255,.16)), rgba(0,7,53,.30)); } } /* ========================================================================= 5. LES BOUTONS AU TELEPHONE ------------------------------------------------------------------------- */ @media (max-width: 760px){ .f-boutons .f-bouton{ flex:1 1 0; } } /* ========================================================================= 6. REMISE A ZERO ET LIEN D'EVITEMENT ------------------------------------------------------------------------- */ /* Une seule remise a zero des boites pour toute la page : les mesures de la reference sont bord a bord (rangee 630 = image 582 + 2 x 24). */ *, *::before, *::after{ box-sizing:border-box; } html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; scroll-padding-top:100px; } /* html n'a pas de fond : celui du corps passe sur le canevas, sous la scene fixe (z-index -1). Un fond sur html repeindrait le corps par-dessus. */ body{ margin:0; min-height:100%; } img{ max-width:100%; } .f-page ::selection{ background:#a5edee; color:#000735; } .f-page :focus-visible{ outline:2px solid var(--f-texte); outline-offset:3px; } [hidden]{ display:none !important; } /* Lien d'evitement */ .skip{ position:absolute; left:16px; top:-100px; z-index:200; background:var(--f-blanc); color:var(--f-noir); padding:15px 18px; border-radius:var(--f-r-bouton); font:500 14px/1 var(--f-police); letter-spacing:0; text-decoration:none; transition:top .2s var(--f-entree-courbe); } .skip:focus{ top:16px; } /* Depuis le 09/10/2026 (demande de Raphael : « un gros bouton inutile, aller au contenu »), le retour en haut (artis.js, retourHaut) ne rend le focus au lien d'evitement qu'au clavier, ou il se montre. Au doigt ou a la souris, il pose le focus sans bruit en haut de la page, sans passer par le lien. Safari sur iPhone tenait pour visible le focus que le script posait sur le lien apres le toucher, et la regle qui suit ne le cachait donc pas : il couvrait le nom de la barre. Elle reste pour tout autre focus pose par un script apres un clic, le lien ne se montrant qu'au clavier (focus-visible). Un navigateur sans :focus-visible ignore cette regle et le montre. */ .skip:focus:not(:focus-visible){ top:-100px; } /* ========================================================================= 7. LA BARRE ET LE MENU ------------------------------------------------------------------------- */ /* --- La barre --------------------------------------------------------------- Reference : nom a gauche (x 40), sans pilule, pilule de verre a droite (6 %, flou 9, rayon 8, 60 de haut), liens en 16, bouton noir a pastille. Fixe sur toute la page, au verre de la reference sur toute la scene. */ .f-barre{ position:fixed; top:20px; left:0; right:0; z-index:50; pointer-events:none; } .f-barre-corps{ display:flex; align-items:center; justify-content:space-between; gap:24px; height:var(--f-h-barre); } .f-barre-corps > *{ pointer-events:auto; } .f-marque{ position:relative; z-index:2; display:inline-flex; align-items:center; height:var(--f-h-barre); margin-left:-14px; padding:0 14px; border-radius:var(--f-r-carte); text-decoration:none; color:var(--f-texte-nom); transition:background-color .3s var(--f-entree-courbe), color .2s; } .f-marque .lt-main{ font-family:var(--f-police-nom); font-weight:400; font-size:21px; line-height:1; letter-spacing:.24em; text-transform:uppercase; white-space:nowrap; color:inherit; } .f-marque .lt-main b{ font-weight:700; } /* Clarte : sur une bande claire (papier, schema), la barre prend un verre blanc et l'encre, au lieu de la plaque sombre (socle.js pose .f-barre--claire tant qu'une bande claire est sous la barre). */ .f-barre.f-barre--claire .f-marque, .f-barre.f-barre--dense .f-marque{ background:rgba(255,255,255,.92); color:var(--g-encre); box-shadow:inset 0 0 0 1px var(--f-filet-encre); -webkit-backdrop-filter:blur(var(--f-flou-barre)); backdrop-filter:blur(var(--f-flou-barre)); } @media (min-width: 1181px){ .f-barre.f-barre--claire .f-liens, .f-barre.f-barre--dense .f-liens{ background:rgba(255,255,255,.92); box-shadow:inset 0 0 0 1px var(--f-filet-encre); } .f-barre.f-barre--claire .f-liens a:not(.f-bouton), .f-barre.f-barre--dense .f-liens a:not(.f-bouton){ color:var(--g-encre); } .f-barre.f-barre--claire :focus-visible, .f-barre.f-barre--dense :focus-visible{ outline-color:var(--g-klein); } } .f-liens{ list-style:none; margin:0; padding:0; } .f-liens a:not(.f-bouton){ color:var(--f-texte); text-decoration:none; font-size:16px; line-height:1; } /* Le lien de la page courante (aria-current), souligne : regle des pages interieures (pages.css), etendue a toutes les pages. Les essais de l'accueil et des offres n'en portaient pas. */ .f-liens a[aria-current="page"]{ text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:6px; } /* Ordinateur large : la pilule */ @media (min-width: 1181px){ .f-burger{ display:none; } .f-liens{ display:flex; align-items:center; gap:28px; height:var(--f-h-barre); padding:0 6px 0 32px; background:var(--f-verre-barre); border-radius:var(--f-r-carte); -webkit-backdrop-filter:blur(var(--f-flou-barre)); backdrop-filter:blur(var(--f-flou-barre)); transition:background-color .3s var(--f-entree-courbe); } .f-liens a:not(.f-bouton){ display:inline-flex; align-items:center; min-height:44px; position:relative; } .f-liens a:not(.f-bouton)::after{ content:""; position:absolute; left:0; right:0; bottom:10px; height:1px; background:currentColor; transform:scaleX(0); transform-origin:left; transition:transform .25s var(--f-entree-courbe); } .f-liens a:not(.f-bouton):hover::after{ transform:scaleX(1); } .f-liens-contact .f-bouton{ padding:14px 14px 14px 20px; } } /* Tablette et telephone : le burger, puis une carte blanche pleine largeur (reference : m_menu.png), liens et bouton a l'encre. Clarte (demande 1) : le carre noir de la reference devient une plaque blanche a 92 %, barres a l'encre #0B1D36 (16:1) ; ouvert, sur la carte blanche du menu, un creux de papier. */ @media (max-width: 1180px){ .f-burger{ position:relative; z-index:3; display:grid; place-content:center; gap:6px; width:44px; height:44px; padding:0; border:0; border-radius:var(--f-r-burger); cursor:pointer; background:rgba(255,255,255,.92); box-shadow:inset 0 0 0 1px var(--f-filet-encre), 0 6px 18px rgba(0,7,53,.18); -webkit-backdrop-filter:blur(var(--f-flou-barre)); backdrop-filter:blur(var(--f-flou-barre)); } .f-burger i{ display:block; width:18px; height:2px; border-radius:1px; background:var(--g-encre); transition:transform .25s var(--f-entree-courbe); } .f-barre--ouverte .f-burger{ background:var(--f-papier-2); box-shadow:none; } .f-barre--ouverte .f-burger i:first-child{ transform:translateY(4px) rotate(45deg); } .f-barre--ouverte .f-burger i:last-child{ transform:translateY(-4px) rotate(-45deg); } .f-menu{ position:fixed; z-index:1; top:8px; left:8px; right:8px; padding:84px 20px 24px; border-radius:var(--f-r-carte); background:var(--f-blanc); box-shadow:0 10px 20px #0000000d; visibility:hidden; opacity:0; transform:translateY(-8px); transition:opacity .2s var(--f-entree-courbe), transform .2s var(--f-entree-courbe), visibility 0s .2s; } .f-barre--ouverte .f-menu{ visibility:visible; opacity:1; transform:none; transition-delay:0s; } .f-barre.f-barre--ouverte .f-marque{ color:var(--g-encre); background:transparent; box-shadow:none; -webkit-backdrop-filter:none; backdrop-filter:none; } .f-liens{ display:grid; background:none !important; } .f-liens a:not(.f-bouton){ display:flex; align-items:center; min-height:46px; color:var(--g-encre); } .f-liens-contact{ margin-top:16px; } .no-js .f-menu{ position:static; visibility:visible; opacity:1; transform:none; } } @media (max-width: 760px){ .f-barre{ top:16px; } .f-marque .lt-main{ font-size:16px; letter-spacing:.2em; } .f-marque{ height:48px; margin-left:-10px; padding:0 10px; } .f-barre-corps{ height:48px; } } @media (max-width: 360px){ .f-marque .lt-main{ font-size:14px; letter-spacing:.16em; } } /* --- Le nom et le menu au telephone : deux bulles de verre clair -------- Demande de Raphael (04/10/2026) : « des bulles transparentes, un peu design, et pas simplement des bulles blanches ». Sous 761 px, sur toutes les pages (scene et bleu), le nom et le bouton du menu sont deux bulles de verre, une capsule et un rond de 44 px. Historique. Le 04/10, un verre fume a 52 % qui devenait laiteux (blanc a 64 %, encre marine) sur une surface claire : bulles blanches sur les deux tiers des positions, et laiteuses sur des fonds sombres. Le 05/10, un seul verre teinte du bleu de nuit d'Artis (8,22,60) a 76 %, encre blanche, le meme partout : lisible (7,6:1 au pire), mais presque plein. 06/10/2026, demande de Raphael : les bulles doivent etre « vraiment transparentes », avec « cet effet bulle de verre ». Le verre devient clair : aucune teinte de base, flou de 24 px, saturation 1,4, reflet blanc en haut (26 % fondu a 6 %), lisere de blanc a 18 %, ombre marine legere, encre blanche a ombre fine. Ce qui est dessous se voit, flou. Pour que le nom et les traits restent lisibles, verre.js lit ce qui passe sous les bulles et choisit l'encre : blanche sur un fond sombre, marine sur un fond clair (.f-sur-clair, ou le verre prend un reflet blanc plus franc et un lisere marine). Le verre ne devient jamais une plaque. Seul un voile (--f-bulle-voile, de 0 a 0,72, marine sous l'encre blanche, blanc sous la marine, 0,12 au moins sous la marine) monte la ou le contraste manquerait, et seulement de ce qu'il faut. Mesure du 06/10/2026, 46 pages, une position par demi ecran (929 positions, Chrome 393 x 852, flou rendu) : 5,6:1 au pire pour le nom, 6,1:1 pour les traits, voile moyen 0,13, verre au plus clair sur 829 positions. Le retour en haut (section 10) garde le verre teinte du 05/10 : ses variables restent sur :root, celles du verre clair sont posees sur la barre seule. Les feuilles des familles (scene.css 15, pages.css 4, offre.css) posent leurs plaques sur le nom et le menu avec des poids allant jusqu'a 0,6,0 : les proprietes du verre sont donc posees ici une seule fois, avec !important, par des variables (--f-bulle-*). Menu ouvert, rien ne change : dessins de socle.css (scene) et pages.css (bleu). */ @media (max-width: 760px){ /* Sur :root, le verre teinte du retour en haut (section 10). */ :root{ --f-bulle-fond: rgba(8,22,60,.76); --f-bulle-reflet: linear-gradient(180deg, rgba(255,255,255,.17), rgba(255,255,255,.04) 40%, rgba(255,255,255,0) 56%), radial-gradient(130% 110% at 50% 140%, rgba(127,176,232,.42), rgba(127,176,232,0) 60%); --f-bulle-encre: var(--f-blanc); --f-bulle-bord: inset 0 0 0 1px rgba(255,255,255,.14), inset 0 1px 0 rgba(255,255,255,.30), inset 0 -1px 0 rgba(127,176,232,.22), 0 1px 2px rgba(0,7,53,.22), 0 10px 28px rgba(0,7,53,.26); } /* Sur la barre, le verre clair du nom et du menu. verre.js pose le voile en style en ligne sur la barre, et .f-sur-clair. */ .f-barre{ --f-bulle-voile: 0; --f-bulle-fond: rgba(8,22,60,var(--f-bulle-voile)); --f-bulle-reflet: linear-gradient(180deg, rgba(255,255,255,.26), rgba(255,255,255,.10) 30%, rgba(255,255,255,.06) 50%, rgba(255,255,255,.06) 80%, rgba(255,255,255,.11)); --f-bulle-encre: var(--f-blanc); --f-bulle-bord: inset 0 0 0 1px rgba(255,255,255,.18), inset 0 1px 0 rgba(255,255,255,.45), inset 0 -1px 0 rgba(255,255,255,.08), 0 1px 2px rgba(0,7,53,.14), 0 8px 24px rgba(0,7,53,.18); --f-bulle-flou: blur(24px) saturate(1.4); --f-bulle-ombre-texte: 0 1px 1px rgba(0,7,53,.22); } .f-barre.f-sur-clair{ --f-bulle-fond: rgba(255,255,255,var(--f-bulle-voile)); --f-bulle-reflet: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.12) 30%, rgba(255,255,255,0) 50%); --f-bulle-encre: var(--g-encre); --f-bulle-bord: inset 0 0 0 1px rgba(11,29,54,.08), inset 0 1px 0 rgba(255,255,255,.9), inset 0 -10px 16px -12px rgba(11,29,54,.14), 0 1px 2px rgba(11,29,54,.08), 0 8px 24px rgba(11,29,54,.14); --f-bulle-ombre-texte: none; } .f-barre:not(.f-barre--ouverte) .f-marque, .f-barre:not(.f-barre--ouverte) .f-burger{ background-color:var(--f-bulle-fond) !important; background-image:var(--f-bulle-reflet) !important; color:var(--f-bulle-encre) !important; box-shadow:var(--f-bulle-bord) !important; -webkit-backdrop-filter:var(--f-bulle-flou) !important; backdrop-filter:var(--f-bulle-flou) !important; transition:background-color .3s var(--f-entree-courbe), color .25s, box-shadow .3s; } .f-barre:not(.f-barre--ouverte) .f-marque{ text-shadow:var(--f-bulle-ombre-texte); } .f-barre .f-barre-corps{ height:44px; gap:12px; } .f-barre .f-marque{ height:44px; margin-left:0; padding:0 16px; border-radius:22px; } .f-barre .f-burger{ width:44px; height:44px; border-radius:50%; } .f-barre:not(.f-barre--ouverte) .f-burger i{ background:currentColor; } /* Focus au clavier : deux anneaux hors de la bulle, marine contre elle (2 px, lisible sur le blanc) puis blanc (2 px, lisible sur la scene et le bleu). Le Klein pose en dedans du burger (scene.css 6) ne se voyait pas sur le verre. */ .f-barre:not(.f-barre--ouverte) .f-marque:focus-visible, .f-barre:not(.f-barre--ouverte) .f-burger:focus-visible{ outline:2px solid var(--f-blanc) !important; outline-offset:2px !important; box-shadow:var(--f-bulle-bord), 0 0 0 2px var(--g-encre) !important; } } /* Sans flou d'arriere-plan (navigateur ancien), le texte de dessous se lirait a travers le verre, et verre.js ne lit rien : le verre de la barre et celui du retour en haut s'epaississent, encre blanche. */ @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ @media (max-width: 760px){ :root{ --f-bulle-fond:rgba(8,22,60,.92); } .f-barre{ --f-bulle-voile:.92; } } } /* Transparence reduite demandee par le systeme : verre.js ne lit rien, le verre est presque plein, encre blanche. */ @media (max-width: 760px) and (prefers-reduced-transparency: reduce){ :root{ --f-bulle-fond:rgba(8,22,60,.94); } .f-barre{ --f-bulle-voile:.94; } } @media (max-width: 360px){ .f-barre .f-marque{ padding:0 13px; } } /* --- Le menu ouvert au telephone (09/10/2026) --------------------------- Audit telephone du 8 octobre (lot 2, constat 194, majeur, reproduit dans Chromium et WebKit) : menu ouvert, une tape hors du panneau fermait bien le menu (socle.js et pages.js ferment sur un clic dehors), mais le clic suivait aussi le lien dessous : sur l'accueil, la bulle Fonds de commerce chargeait /evaluation-fonds-de-commerce. La page defilait aussi sous le panneau. Sous 761 px, un voile d'encre a 40 % couvre l'ecran sous le panneau (.f-barre::before, fixe, sous le menu, le nom et le bouton du menu dans la barre) : la tape dehors tombe sur lui, le gestionnaire de socle.js ou pages.js ferme le menu et aucun lien ne part. La barre passe au-dessus de la barre d'appel du bas (z-index 95 contre 90). Reprise du meme jour : le voile couvrait aussi la barre d'appel, qui s'assombrissait, et une tape sur elle fermait le menu au lieu d'ouvrir la demande de contact. Raphael a refuse tout changement de la barre d'appel, de son dessin comme de son comportement : quand elle est montree (.on, hors bandeau de consentement), le voile s'arrete a son bord haut (--f-cta-h, hauteur posee par artis.js, 72 px, 101 sur les offres) et le panneau du menu se borne a 8 px au-dessus d'elle : elle reste claire et, menu ouvert, suit son lien, comme avant ce chantier. Seconde passe telephone (09/10/2026, delegation de Raphael, point E9) : la barre des trois offres mesure maintenant 72 px elle aussi au telephone, la mention de TVA passant a droite du bouton (offre.css 9). Le voile et le panneau suivent --f-cta-h, mesure : rien a changer ici. Le bandeau de consentement (120) reste au-dessus de tout. La page ne defile plus tant que le menu est ouvert (html et body en overflow hidden, par :has, sans script). Le panneau prend le rayon des bulles (20 px, 8 avant, constat 213) et defile dans la hauteur de l'ecran s'il la depasse. Constat 231 : le menu avait deux dessins selon la page. Sur le bleu (pages.css 4), le bouton de fermeture etait un rond d'encre a croix blanche et le bouton de contact prenait toute la largeur. Sur la scene, un rond gris clair a croix d'encre et un bouton de 221 px. Au telephone, les deux familles prennent le dessin du bleu, avec un anneau de focus Klein autour du rond (l'anneau blanc du bleu ne se voyait pas sur la carte blanche). */ @media (max-width: 760px){ .f-barre::before{ content:""; position:fixed; inset:0; z-index:0; background:rgba(11,29,54,.4); opacity:0; visibility:hidden; pointer-events:none; -webkit-tap-highlight-color:transparent; transition:opacity .2s var(--f-entree-courbe), visibility 0s linear .2s; } .f-barre.f-barre--ouverte{ z-index:95; } .f-barre.f-barre--ouverte::before{ opacity:1; visibility:visible; pointer-events:auto; touch-action:none; transition-delay:0s; } html:has(.f-barre--ouverte), html:has(.f-barre--ouverte) body{ overflow:hidden; } .f-barre .f-menu{ border-radius:var(--f-r-bulle); max-height:calc(100svh - 16px); overflow-y:auto; overscroll-behavior:contain; } .f-barre.f-barre--ouverte .f-burger{ background:var(--g-encre); color:var(--f-blanc); box-shadow:none; } .f-barre.f-barre--ouverte .f-burger i{ background:currentColor; } .f-barre.f-barre--ouverte .f-burger:focus-visible{ outline:2px solid var(--g-klein); outline-offset:2px; } .f-barre .f-liens-contact .f-bouton{ width:100%; } } /* La barre d'appel hors du voile (reprise du 09/10/2026, voir plus haut). Elle n'est jamais montree sous 521 px de haut (section 10). */ @media (max-width: 760px) and (min-height: 521px){ body.has-cta-mobile:not(.consent-open):has(> .cta-mobile.on) .f-barre::before{ bottom:var(--f-cta-h, 72px); } body.has-cta-mobile:not(.consent-open):has(> .cta-mobile.on) .f-barre .f-menu{ max-height:calc(100svh - 16px - var(--f-cta-h, 72px)); } } /* Telephone couche, plus large que 760 px (paysage, 852 x 393 sur iPhone 15) : l'audit telephone du 8 octobre (lot 7, constats 181 et 204) proposait d'y reprendre la barre et le menu du telephone. Ce n'est pas fait : la regle du chantier (09/10/2026) veut qu'a 761 px et au-dela rien ne change, et un bloc pose le meme jour sous (hover: none) et (pointer: coarse) changeait la barre, le menu et le bandeau d'un telephone tenu en paysage. Il est retire. A decider par Raphael. */ /* ========================================================================= 8. LE NOM ET LE PIED ------------------------------------------------------------------------- */ /* Le nom au pied : Bodoni 24 #ebe9e5 (jeton de la reference), en capitales espacees comme le logotype d'Artis. */ .f-nom{ font:400 var(--f-t-nom)/1 var(--f-police-nom); color:var(--f-texte-nom); letter-spacing:.24em; text-transform:uppercase; text-decoration:none; white-space:nowrap; } @media (max-width: 760px){ .f-nom{ font-size:20px; letter-spacing:.2em; } } /* ---------- PIED ------------------------------------------------------- */ /* Reference (dx_12321) : pas de fond, le pied se pose sur la face sombre du grand disque, juste sous son horizon ; nom et adresse en bas a gauche, colonnes a droite, 200 px en tout. Artis a dix-huit liens au lieu de huit : « Le site » se replie en deux sous-colonnes, en 14 px au pas de 24 ; la mention legale tient une ligne. Hauteur visee : 260 px au plus a 1440. */ .f3-pied{ padding:24px 0 20px; color:var(--f-texte); } /* Scene H : en paysage, le moteur remonte le disque pour que le pied, page en bas, tombe sur sa face sombre ; mais pendant que le pied entre, le disque le suit avec un temps de retard, et ses liens passent sur le fond clair de l'appel (3,2:1). En portrait, la scene s'arrete avant l'horizon (0,487 : sphere montante, fond clair). Dans les deux cas, un voile #000735 a 60 % sous le pied garde ses textes sur du sombre. */ .f3-pied{ background:linear-gradient(to bottom, rgba(0,7,53,0), rgba(0,7,53,.6) 40px); } .f3-pied-grille{ display:grid; grid-template-columns:minmax(0,1fr) auto auto auto; column-gap:48px; align-items:end; } .f3-pied-nom{ display:flex; flex-direction:column; gap:12px; } .f3-pied-nom .logotype{ display:block; line-height:1; } .f3-pied-nom .f-nom{ display:inline-block; } .f3-pied-nom .f-nom b{ font-weight:700; } .f3-pied-nom p{ margin:0; max-width:380px; font-size:14px; line-height:20px; letter-spacing:0; color:var(--f-attenue-80, rgba(255,255,255,.8)); } .f3-pied-col{ align-self:start; } .f3-pied-col h3{ margin:0 0 12px; font-size:16px; line-height:20px; font-weight:var(--f-g-titre); letter-spacing:var(--f-serre); } .f3-pied-col ul{ list-style:none; margin:0; padding:0; column-gap:28px; } .f3-pied-col li{ break-inside:avoid; } .f3-pied-col:nth-child(2) ul{ columns:2; } .f3-pied-col a, .f3-pied-col .foot-bouton{ display:inline-flex; align-items:center; min-height:24px; color:var(--f-texte); text-decoration:none; font:var(--f-g-texte) 14px/1.2 var(--f-police); letter-spacing:0; white-space:nowrap; } .f3-pied-col .foot-bouton{ background:none; border:0; padding:0; cursor:pointer; text-align:left; } .f3-pied-note{ margin:0; font-size:14px; line-height:24px; color:var(--f-attenue-70); } .f3-pied-base{ margin-top:20px; display:flex; flex-wrap:wrap; justify-content:space-between; gap:4px 32px; font-size:14px; line-height:20px; letter-spacing:0; color:var(--f-attenue-70); } .f3-pied a:focus-visible, .f3-pied button:focus-visible{ outline:2px solid var(--f-texte); outline-offset:3px; border-radius:2px; } @media (hover:hover){ .f3-pied-col a:hover, .f3-pied-col .foot-bouton:hover{ text-decoration:underline; text-underline-offset:3px; } } /* Tablette : le nom passe au-dessus des colonnes. */ @media (max-width: 1240px){ .f3-pied-grille{ grid-template-columns:repeat(3, auto); justify-content:space-between; row-gap:28px; } .f3-pied-nom{ grid-column:1 / -1; align-self:start; } } /* Retouche finale : de 761 a 1000 px, les trois colonnes (liens du site sur deux colonnes, adresse en insecable) debordaient de 99 px a 768. Deux colonnes, le contact dessous, et les liens du site sur une seule. */ @media (min-width: 761px) and (max-width: 1000px){ .f3-pied-grille{ grid-template-columns:repeat(2, auto); justify-content:start; column-gap:72px; } .f3-pied-col:nth-child(2) ul{ columns:1; } .f3-pied-col:nth-child(2){ grid-row:2 / span 2; } } /* ========================================================================= 9. LE PIED AU TELEPHONE ET AU TOUCHER ------------------------------------------------------------------------- */ /* Clarte, correctifs du jury : cibles de 44 px dans le pied au telephone et sur les ecrans tactiles (regle d'Artis, reprise de pages.css) ; les liens etaient a 26 px. */ @media (max-width: 760px), (pointer: coarse){ .f3-pied-col a, .f3-pied-col .foot-bouton{ display:flex; align-items:center; min-height:44px; } .f3-pied-col h3{ margin-bottom:0; } } /* Le pied au telephone (04/10/2026, demande de Raphael : « un pied de page adapte au format telephone »). Avant : deux longues colonnes de liens au pas de 44 px (neuf liens a gauche, quinze lignes a droite), l'intitule « Contact » perdu au milieu de la seconde, 760 px de liste monotone. Maintenant, dans l'ordre du balisage : le nom (proportionne a la largeur, les trois quarts du conteneur environ) et sa presentation ; puis chaque rubrique sur toute la largeur, sous un filet, avec son intitule en etiquette (12 px, capitales espacees, comme les etiquettes du site) et ses liens sur deux colonnes qui se lisent de haut en bas, comme les deux sous-colonnes de « Le site » a l'ordinateur (Le site : cinq et quatre liens, Vos donnees : la confidentialite et les cookies, puis les textes juridiques), le contact sur une colonne ; enfin, sous un filet, le droit d'auteur et la mention legale. Liens de 15 px, cibles de 44 px, longs libelles sur deux lignes equilibrees. Aucun lien ni texte retire ou ajoute. Environ 900 px a 393 (760 avant, en deux colonnes paralleles de quinze lignes). Les surcharges du telephone de pages.css (11) ont le poids 0,1,0 a 0,2,1 : ces regles prennent un cran de plus (.f3-pied devant). Le pied de l'ordinateur et de la tablette ne change pas. 09/10/2026, audit telephone du 8 octobre (lots 1 et 4, constats 10, 46, 94, 130 et 149) : le pied faisait 888 px a 393 (1,35 ecran de Safari sur iPhone 15, 1,6 a 320 px) pour dix-huit liens. Les rangees de liens et l'air autour se resserrent, aucun lien ni texte ne bouge de rubrique ni n'est replie : rangees de 40 px au lieu de 44 (le lien garde une boite de 44 px, qui deborde de 2 px sur ses voisines par une marge negative, pour que la regle des cibles de 44 px tienne), liens en 14 px au lieu de 15 (les longs libelles passent moins souvent sur deux lignes), intitules en etiquette de 13 px (jeton de la section 2), 28 px au lieu de 40 en haut du pied, 20 au lieu de 28 sous le nom, 14 et 8 px au lieu de 16 et 12 autour de chaque rubrique. La liste du contact passe en grille d'une colonne : une liste en bloc aurait fusionne les marges negatives de ses liens. Les audits proposaient 36 a 40 px : 40 garde le pas le plus proche des 44 px du reste du site. */ @media (max-width: 760px){ footer.f3-pied{ padding:28px 0 24px; } .f3-pied .f3-pied-grille{ display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:none; column-gap:0; row-gap:0; align-items:start; } .f3-pied .f3-pied-nom{ grid-column:1 / -1; grid-row:auto; gap:12px; margin:0 0 20px; } .f3-pied .f3-pied-nom .f-nom{ font-size:clamp(15px, 4.7vw, 19px); letter-spacing:.2em; } .f3-pied .f3-pied-nom p{ max-width:30em; font-size:14px; line-height:21px; color:rgba(255,255,255,.86); } .f3-pied .f3-pied-col, .f3-pied .f3-pied-col:nth-child(2), .f3-pied .f3-pied-col--contact{ grid-column:1 / -1; grid-row:auto; margin:0 0 8px; padding-top:14px; border-top:1px solid rgba(255,255,255,.16); } .f3-pied .f3-pied-col h3{ margin:0 0 2px; font-size:var(--f-t-etiquette); line-height:18px; font-weight:var(--f-g-titre); letter-spacing:var(--f-espace-etiquette); text-transform:uppercase; color:rgba(255,255,255,.78); } .f3-pied .f3-pied-col ul, .f3-pied .f3-pied-col:nth-child(2) ul, .f3-pied .f3-pied-col:nth-child(3) ul{ columns:auto; display:grid; grid-auto-flow:column; grid-template-columns:repeat(2, minmax(0,1fr)); grid-template-rows:repeat(3, auto); column-gap:20px; align-items:center; } /* Les rangees s'alignent d'une colonne a l'autre ; la lecture descend la premiere colonne puis la seconde. Neuf liens dans « Le site » (cinq rangees), six dans « Vos donnees » (trois) : un lien de plus demande de changer le nombre de rangees ici. */ .f3-pied .f3-pied-col:nth-child(2) ul{ grid-template-rows:repeat(5, auto); } .f3-pied .f3-pied-col--contact ul{ grid-auto-flow:row; grid-template-columns:minmax(0,1fr); grid-template-rows:none; } .f3-pied .f3-pied-col li > a, .f3-pied .f3-pied-col .foot-bouton{ display:flex; align-items:center; min-height:44px; margin-block:-2px; padding:4px 0; font-size:14px; line-height:1.25; letter-spacing:-0.01em; color:var(--f-texte); white-space:normal; overflow-wrap:normal; text-wrap:balance; } .f3-pied .f3-pied-col--contact li > a{ white-space:nowrap; } .f3-pied .f3-pied-note{ margin:2px 0 0; font-size:14px; line-height:20px; color:rgba(255,255,255,.86); } .f3-pied .f3-pied-base{ margin-top:6px; padding-top:14px; border-top:1px solid rgba(255,255,255,.16); flex-direction:column; gap:4px; font-size:13px; line-height:18px; color:rgba(255,255,255,.86); } } /* Petits telephones : les colonnes de 130 px gardent leurs libelles sur deux lignes au plus ; l'adresse electronique passe a 14 px pour tenir sur une ligne. Depuis le 09/10/2026, tous les liens du pied sont en 14 px au telephone (plus haut) : la taille redite ici ne change rien. */ @media (max-width: 380px){ .f3-pied .f3-pied-col ul, .f3-pied .f3-pied-col:nth-child(2) ul, .f3-pied .f3-pied-col:nth-child(3) ul{ column-gap:14px; } .f3-pied .f3-pied-col li > a, .f3-pied .f3-pied-col .foot-bouton{ font-size:14px; } } /* ========================================================================= 10. LES ELEMENTS QU'AJOUTE artis.js ------------------------------------------------------------------------- */ .consent-bar{ /* Une carte de verre flottante, comme les cartes de la scene : 6 % de blanc, flou 30, rayon 8, pad 20 ; 480 px au plus, a 20 px du bas et de la droite. Sous le verre, un fond marine a 80 % (60 % avant la scene H : sur les moments clairs de la scene H et sur une planche blanche qui defile dessous, le texte a 80 % tombait a 3,8:1 ; il passe au-dessus de 7:1). */ position:fixed; right:20px; bottom:calc(20px + env(safe-area-inset-bottom, 0px)); z-index:120; display:none; width:min(480px, calc(100% - 40px)); padding:20px; border-radius:var(--f-r-panneau); /* Clarte : une bulle blanche, comme les autres (le verre marine d'avant assombrissait tout le bas de l'ecran au premier chargement). */ background:var(--f-blanc); box-shadow:var(--f-ombre-bulle), inset 0 0 0 1px var(--f-filet-encre); color:var(--g-encre); opacity:0; transform:translateY(12px); transition:opacity .3s var(--f-entree-courbe), transform .3s var(--f-entree-courbe); } .consent-bar.on{ display:block; } .consent-bar.shown{ opacity:1; transform:none; } .consent-inner{ display:grid; gap:14px; } .consent-bar p{ margin:0; font-size:13px; line-height:1.35; letter-spacing:0; color:var(--f-encre-2); } .consent-bar a{ color:var(--g-encre); text-decoration:underline; text-underline-offset:3px; } .consent-actions{ display:grid; grid-template-columns:1fr 1fr; gap:var(--f-ecart-entre-boutons); } .consent-actions .btn{ min-height:44px; padding:0 16px; border:0; border-radius:var(--f-r-bouton); cursor:pointer; font:var(--f-g-texte) 14px/1 var(--f-police); letter-spacing:var(--f-serre); white-space:nowrap; } .consent-actions [data-consent="non"]{ background:var(--f-blanc); color:var(--g-encre); box-shadow:inset 0 0 0 1px rgba(11,29,54,.22); } .consent-actions [data-consent="oui"]{ background:var(--g-encre); color:var(--f-blanc); } .consent-bar :focus-visible{ outline:2px solid var(--g-klein); outline-offset:2px; } /* Le bandeau au telephone (09/10/2026, audit telephone du 8 octobre, constats 6, 89, 92, 164 et 185, dont trois majeurs). Il faisait 228 px a 393 px (35 % de l'ecran de Safari sur iPhone 15, 46 % a 320 px), une carte blanche a 20 px des bords posee sur les bulles blanches, et couvrait le champ e-mail du formulaire de contact. Sous 761 px : - Decision de Raphael (D4) : la deuxieme phrase (signaux sans cookie) est repliee, span .consent-repli pose par artis.js. La premiere phrase, « Refuser n'empeche ni la navigation ni l'envoi d'une demande de contact. » et « En savoir plus » restent visibles, le texte complet reste sur /confidentialite#cookies. - Une feuille du bas, pleine largeur, collee au bas de l'ecran (et a la zone sure), coins de 20 px en haut, filet d'encre de 1 px en haut pour la detacher des bulles blanches, texte sur 32 px de plus. - Les deux boutons gardent 44 px et s'ecartent de 10 px (4 avant). Mesure du 09/10/2026, identique dans WebKit et Chromium : 172 px a 393 et 375 px (20 % de 852 px, 26 % des 659 px de Safari sur iPhone 15, 35 % avant), 189 px a 320 px (33 %, 46 % avant), 137 px de 537 a 760 px. Table complete dans accueil.css 5, qui reserve sa place sur l'accueil a la premiere visite. Depuis la seconde passe telephone du 09/10/2026 (delegation de Raphael, accueil.css 17, E6), cette reserve ne vaut plus qu'au-dela de 760 px : au telephone, le bandeau se pose par-dessus la couverture de l'accueil, comme sur les autres pages. */ @media (max-width: 760px){ .consent-bar{ left:0; right:0; bottom:0; width:auto; padding:14px 20px calc(14px + env(safe-area-inset-bottom, 0px)); border-radius:var(--f-r-bulle) var(--f-r-bulle) 0 0; box-shadow:0 -1px 0 var(--f-filet-encre), 0 -10px 30px rgba(0,7,53,.18); } .consent-inner{ gap:12px; } .consent-repli{ display:none; } .consent-actions{ gap:10px; } } /* Le bandeau sur un ecran bas (10/10/2026, audit UI/UX du 9 octobre, point A01). A la premiere visite, sur 600 px de haut ou moins (Safari sur iPhone SE, 375 x 548, et 320 x 568), le bandeau prenait le tiers de l'ecran, et la couverture de l'accueil devait se serrer pour tenir « Echanger sur votre projet » 8 px au-dessus de lui (accueil.css 18, point 4). La feuille se resserre de 12 a 15 px, sans rien retirer : 10 px en haut et en bas au lieu de 14 (la zone sure reste en plus), interligne de 1,3 au lieu de 1,35, 10 px entre le texte et les boutons au lieu de 12. Le texte, sa taille de 13 px, le lien « En savoir plus » et les deux boutons de 44 px, cote a cote et de meme largeur, ne changent pas. Hauteurs mesurees le 10/10/2026, les memes dans WebKit et Chromium, sur 600 px de haut ou moins (au-dessus, entre parentheses, inchangees) : 125 px de 537 a 760 px de large (137), 142 de 411 a 536 (154), 158 de 345 a 410 (172), 175 de 301 a 344 (189), 192 de 260 a 300 (207). L'estimation de accueil.css 5 (--f-consent-estime, premiere visite de l'accueil) doit suivre cette table, paliers de hauteur compris. Le paysage tactile (bloc suivant) garde son dessin, resserre a son tour (reprise du 10/10/2026, plus bas). A la premiere visite de l'accueil, le premier bouton garde 8,6 px d'air au moins au-dessus du bandeau a 320 x 568 (8,8), 375 x 548 (20,9), 320 x 560 et 390 x 520 (8,8 et 8,6, contre 4 et 2,5 avant). La reprise du meme jour y ajoute les paliers du titre de la couverture (accueil.css 18, point 5). */ @media (max-width: 760px) and (max-height: 600px){ .consent-bar{ padding-top:10px; padding-bottom:calc(10px + env(safe-area-inset-bottom, 0px)); } .consent-inner{ gap:10px; } .consent-bar p{ line-height:1.3; } } /* Telephone couche (paysage, moins de 521 px de haut, ecran tactile sans survol, de 560 a 760 px de large, 667 x 375 sur iPhone SE) : meme audit, lot 7 (constats 6, 164 et 185). Feuille du bas pleine largeur, texte a gauche et boutons a droite, deuxieme phrase repliee (D4) : 112 px a 667 x 375 (158 avant), 129 px a 568 x 320 (176 avant), 94 px a 740 x 360. Garde de 560 px de large au moins : un telephone tenu debout dont la fenetre passe sous 521 px de haut (clavier ouvert dans certains navigateurs Android) garde la feuille du telephone. Borne a 760 px le 09/10/2026, reprise du meme jour : sans borne haute, le bandeau d'un telephone tenu en paysage plus large (852 x 393, 932 x 430) changeait aussi, ce que la regle du chantier exclut au-dela de 760 px. Reprise du 10/10/2026 (audit UI/UX du 9 octobre, point A01) : en paysage, a la premiere visite de l'accueil, le bandeau couvrait tout le premier bouton de la couverture (73,5 px sous son bord a 667 x 375, 88 px a 734 x 343, Safari sur iPhone 15 tenu en paysage). La feuille se resserre comme celle des ecrans bas du portrait, sans rien retirer : 10 px en haut et en bas au lieu de 12 (la zone sure reste en plus), interligne de 1,3 au lieu de 1,35. Le texte, sa taille de 13 px, « En savoir plus » et les deux boutons de 44 px, cote a cote et de meme largeur, a droite du texte, ne changent pas. Hauteurs mesurees le 10/10/2026, les memes dans WebKit et Chromium (avant entre parentheses) : 88 px de 677 a 760 px de large (94), 104 de 611 a 676 (112), 121 de 567 a 610 (129), 138 de 560 a 566 (147). L'estimation de accueil.css 5 suit. La couverture de l'accueil se resserre en face (accueil.css 18, point 6). */ @media (hover: none) and (pointer: coarse) and (max-height: 520px) and (min-width: 560px) and (max-width: 760px){ .consent-bar{ left:0; right:0; bottom:0; width:auto; padding:10px 24px calc(10px + env(safe-area-inset-bottom, 0px)); border-radius:20px 20px 0 0; box-shadow:0 -1px 0 var(--f-filet-encre), 0 -10px 30px rgba(0,7,53,.18); } .consent-inner{ grid-template-columns:minmax(0,1fr) auto; align-items:center; row-gap:12px; column-gap:24px; } .consent-actions{ grid-template-columns:repeat(2, minmax(112px, auto)); gap:10px; } .consent-bar p{ line-height:1.3; } } .cta-mobile{ position:fixed; left:0; right:0; bottom:0; z-index:90; display:none; padding:12px var(--f-gouttiere) calc(12px + env(safe-area-inset-bottom, 0px)); /* Clarte : barre blanche, bouton a l'encre. */ background:rgba(255,255,255,.94); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); box-shadow:0 -1px 0 var(--f-filet-encre), 0 -10px 30px rgba(0,7,53,.18); transform:translateY(110%); transition:transform .3s var(--f-entree-courbe), visibility 0s linear .3s; } .cta-mobile.on{ transform:none; transition-delay:0s; } /* Audit du 03/10 (A11Y-2) : retiree (sans .on), la barre restait tabulable sous le bas de l'ecran. Cachee aussi au clavier, une fois sa sortie finie (visibility suit la glissade de .3 s), visible des le debut de l'entree. */ .cta-mobile:not(.on){ visibility:hidden; } .cta-mobile .btn{ display:flex; align-items:center; justify-content:center; width:100%; min-height:var(--f-h-bouton); border-radius:var(--f-r-bouton); background:var(--g-encre); color:var(--f-blanc); text-decoration:none; font:var(--f-g-texte) var(--f-t-bouton)/1 var(--f-police); letter-spacing:var(--f-serre); } @media (max-width: 860px){ body.has-cta-mobile .cta-mobile{ display:block; } /* La barre d'appel se retire devant le pied (artis.js, 04/10/2026), qui porte lui-meme « Echanger sur votre projet » : la place qu'on lui gardait sous la mention legale (72 px, 101 sur les offres, offre.css) restait vide en bas de page. Le pied garde sa marge basse ; la classe redoublee passe au-dessus de la regle des offres (0,3,1). Depuis la seconde passe telephone du 09/10/2026, la barre des offres fait 72 px au telephone (offre.css 9) et 98 de 761 a 860 px. */ body.has-cta-mobile footer.f3-pied.f3-pied{ padding-bottom:calc(24px + env(safe-area-inset-bottom, 0px)); } } @media (max-height: 520px){ body.has-cta-mobile .cta-mobile{ display:none; } } body.consent-open .cta-mobile{ display:none !important; } .to-top{ position:fixed; right:24px; bottom:24px; z-index:40; width:44px; height:44px; padding:0; border:0; border-radius:var(--f-r-bouton); background:var(--f-verre-bouton); color:var(--f-texte); cursor:pointer; -webkit-backdrop-filter:blur(var(--f-flou-bouton)); backdrop-filter:blur(var(--f-flou-bouton)); box-shadow:none; display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transform:translateY(8px); visibility:hidden; transition:opacity .2s var(--f-entree-courbe), transform .2s var(--f-entree-courbe), background-color .2s, visibility 0s linear .2s; } /* Cachee (sans .on), la fleche sort de l'ordre de tabulation et de l'arbre d'accessibilite une fois son fondu fini (05/10/2026 : elle restait focalisable, invisible, en bas a droite). Visible des le debut de son entree. Tenue au clavier, elle reste montree tant qu'elle a le focus. */ .to-top.on, .to-top:focus-visible{ opacity:1; pointer-events:auto; transform:none; visibility:visible; transition-delay:0s; } .to-top svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; } @media (hover:hover){ .to-top:hover{ background:rgba(255,255,255,.16); } } /* G : sur la bande claire du schema et sur les cartes blanches des offres, le verre blanc du bouton disparaissait ; il prend le marine de la barre d'appel mobile (socle.js pose la classe). */ .g-bas-clair .to-top{ background:rgba(3,2,27,.72); } @media (hover:hover){ .g-bas-clair .to-top:hover{ background:rgba(3,2,27,.86); } } /* Le retour en haut au telephone (04/10/2026, demande de Raphael : « une petite fleche pour remonter tout en haut, qui n'apparait que quand on fait le geste de remonter »). Il etait cache sous 761 px. artis.js le cree desormais sur toutes les pages au telephone et ne le montre que pendant le geste de remonter (48 px, apres le premier ecran) ; il se retire apres un vrai defilement vers le bas, dans le haut de la page et devant le pied (artis.js, retourHaut). Une bulle de verre ronde, du verre teinte du 05/10/2026 (section 7, variables --f-bulle-* de :root), que la barre a quitte le 06/10 pour un verre clair : la fleche blanche du retour en haut n'a pas de lecture du fond et doit se lire sur une carte blanche. Sur toutes les pages, les fonds marine que posaient les familles (offre.css, pages.css, p-calculateur.css, rgba(10,20,36,.62) et rgba(11,29,54,.72)) passent sous le !important de la couleur et de l'image de fond, comme les plaques des familles sous les bulles de la barre. Au-dessus de la barre d'appel quand elle est la (sa hauteur, --f-cta-h, est posee par artis.js : 72 px, 101 sur les offres), a 16 px du bas sinon ; retire tant que le bandeau de consentement est ouvert. Les regles du bas de socle.css et offre.css (92 et 121 px, poids 0,3,1) sont surchargees ici par !important sur la seule propriete bottom. Depuis la seconde passe telephone du 09/10/2026 (delegation de Raphael), la barre des offres fait 72 px au telephone elle aussi (offre.css 9) : la fleche suit la hauteur mesuree, sans autre regle. */ @media (max-width: 760px){ /* Au-dessus de la barre d'appel par defaut, en bas quand elle est retiree : un navigateur sans :has garde la place de la barre et ne la recouvre jamais. */ :root{ --f-haut-bas:calc(16px + env(safe-area-inset-bottom, 0px)); } body.has-cta-mobile{ --f-haut-bas:calc(var(--f-cta-h, 72px) + 12px); } body.has-cta-mobile:has(> .cta-mobile:not(.on)){ --f-haut-bas:calc(16px + env(safe-area-inset-bottom, 0px)); } .to-top{ display:flex; right:var(--k-gouttiere, var(--f-gouttiere)); bottom:var(--f-haut-bas) !important; width:44px; height:44px; border-radius:50%; color:var(--f-bulle-encre); background-color:var(--f-bulle-fond) !important; background-image:var(--f-bulle-reflet) !important; box-shadow:var(--f-bulle-bord); -webkit-backdrop-filter:blur(20px) saturate(1.8); backdrop-filter:blur(20px) saturate(1.8); transition:opacity .2s var(--f-entree-courbe), transform .2s var(--f-entree-courbe), bottom .3s var(--f-entree-courbe), visibility 0s linear .2s; } .to-top svg{ width:20px; height:20px; stroke-width:1.8; } /* Focus au clavier : les deux anneaux des bulles de la barre. */ body .to-top:focus-visible{ outline:2px solid var(--f-blanc); outline-offset:2px; box-shadow:var(--f-bulle-bord), 0 0 0 2px var(--g-encre); } body.consent-open .to-top{ opacity:0; pointer-events:none; visibility:hidden; } } /* Telephone couche (moins de 521 px de haut) : la barre d'appel n'y est pas montree (plus haut), le retour en haut reste en bas. */ @media (max-width: 760px) and (max-height: 520px){ body.has-cta-mobile{ --f-haut-bas:calc(16px + env(safe-area-inset-bottom, 0px)); } } /* La fleche monte et descend par translate, et non plus par bottom (10/10/2026, audit UI/UX du 9 octobre, observation faite en mesurant le point A16 sur les offres). Quand la barre d'appel venait ou partait, la fleche glissait de 68 px en animant bottom : Chromium comptait ce glissement comme un decalage de mise en page (CLS 0,0035 en remontant une offre), et chaque image recalculait la mise en page. Desormais, bottom reste a 16 px du bas (zone sure en plus) et la propriete translate porte l'ecart avec la place voulue (--f-haut-bas, plus haut), dans la meme duree de 300 ms et sur la meme courbe. Au repos, la fleche est au meme pixel qu'avant (84 px du bas avec la barre d'appel, 16 px sans elle, a 393 x 852). transform reste aux fondus d'entree et de sortie. Un navigateur sans translate (Safari avant 14.1) garde l'animation de bottom. Mesure du 10/10/2026, Chromium, 393 x 852, en remontant l'offre Entreprise, l'accueil et un article : decalage du a la fleche de 0,0026 avant, 0 apres. */ @supports (translate: 0 0){ @media (max-width: 760px){ :root{ --f-haut-repos:calc(16px + env(safe-area-inset-bottom, 0px)); } .to-top{ bottom:var(--f-haut-repos) !important; translate:0 calc(var(--f-haut-repos) - var(--f-haut-bas)); transition:opacity .2s var(--f-entree-courbe), transform .2s var(--f-entree-courbe), translate .3s var(--f-entree-courbe), visibility 0s linear .2s; } } } /* Au bout de la page, le bouton se poserait sur la ligne des mentions. Socle (30/09/2026) : la place n'est laissee que si le bouton existe (artis.js ne le cree que sur les pages de trois ecrans ou plus) ; les pages courtes et les modeles sans artis.js gardent leur ligne entiere. Depuis le 05/10/2026, le bouton se retire quand le pied arrive a sa hauteur (artis.js) : cette place ne sert plus que pendant ses 0,2 s de fondu et quand il garde le focus du clavier. */ @media (min-width: 761px){ body:has(.to-top) .f3-pied-base{ padding-right:64px; } } @media (max-width: 860px) and (min-height: 521px){ body.has-cta-mobile .to-top{ bottom:calc(92px + env(safe-area-inset-bottom, 0px)); } /* Audit du 03/10 (A11Y-2) : au clavier, le focus s'arretait sous la barre d'appel (72 px) ; le defilement garde 84 px libres en bas, 113 sur les offres, ou offre.js y ajoute le prix et la TVA (101 px, voir offre.css). Seconde passe telephone (09/10/2026, delegation de Raphael) : sous 761 px, offre.css 9 ramene les offres a 84 px, leur barre y mesurant 72 px. Les 113 px ne valent plus que de 761 a 860 px (barre de 98 px). */ html:has(body.has-cta-mobile){ scroll-padding-bottom:calc(84px + env(safe-area-inset-bottom, 0px)); } html:has(body.go-page.has-cta-mobile){ scroll-padding-bottom:calc(113px + env(safe-area-inset-bottom, 0px)); } } /* Le focus jamais cache au telephone (10/10/2026, audit UI/UX du 9 octobre, point A10, WCAG 2.4.11). Quand le clavier ou une ancre amene un element dans l'ecran, le navigateur laisse libres en haut le scroll-padding-top et en bas le scroll-padding-bottom de html. - En haut, la barre fixe occupe de 16 a 60 px (bulles de 44 px). Le scroll-padding-top de html, 100 px sur les pages a scene (section 6) et 96 px sur le bleu (pages.css), la couvre deja avec 36 a 40 px d'air. Il ne change pas : les marges des ancres des familles (scroll-margin-top, de -80 a 110 px) sont calees sur lui. Les bulles de la barre ne changent pas (dessin de Raphael). - En bas, la barre d'appel : sa hauteur mesuree (--f-cta-h, artis.js, zone sure comprise) plus 12 px, au lieu des 84 px ecrits plus haut. C'est la meme valeur tant que la barre fait 72 px. Les offres gardent leur regle de offre.css 9, de meme valeur. - Tant que le bandeau de consentement est ouvert, la barre d'appel est retiree et le bandeau couvre le bas de l'ecran (94 a 207 px) : la place gardee en bas devient sa hauteur mesuree (--f-consent-h, posee par socle.js sur les pages a scene, par pages.js sur le bleu) plus 12 px, sur toutes les pages. La regle passe en !important au-dessus de celle des offres (offre.css 9, poids plus fort). Au bout de la page, rien ne defile plus : les derniers liens du pied (le telephone, l'adresse electronique) restaient sous le bandeau. Le corps gagne donc en bas, tant que le bandeau est ouvert, la hauteur du bandeau : ce vide est toujours sous lui, et disparait a la reponse. Mesure du 10/10/2026, premiere visite, dix pages parcourues au clavier (accueil, deux offres, calculateur, methodologie, contact, analyses, un article, mentions legales, rapport d'exemple) : elements focalises entierement caches par le bandeau, 124 avant et aucun apres a 375 x 548 (Chromium), 250 avant et aucun apres a 393 x 659 (WebKit). Apres refus, aucun a 393 x 852, avant comme apres. */ @media screen and (max-width: 760px) and (min-height: 521px){ html:has(body.has-cta-mobile){ scroll-padding-bottom:calc(var(--f-cta-h, calc(72px + env(safe-area-inset-bottom, 0px))) + 12px); } } @media screen and (max-width: 760px){ html:has(body.consent-open){ scroll-padding-bottom:calc(var(--f-consent-h, 0px) + 12px) !important; } body.consent-open{ padding-bottom:var(--f-consent-h, 0px); } } /* La jauge de lecture d'artis.js doublait le lisere Klein du haut de page ; la reference n'en a pas : neutralisee dans l'essai. */ .jauge-lecture{ display:none !important; } .sigle{ -webkit-hyphens:manual; hyphens:manual; } /* Utilitaire (socle, 30/09/2026) : texte lu par les lecteurs d'ecran, cache a l'ecran. Le nom est celui d'artis.css, que les pages emploient deja. */ .sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } /* « HT » a cote d'un prix affiche en grand (SAS du 2 octobre 2026, prix hors taxes) : en petit, sur la ligne de base du montant, sans le serrage des chiffres. L'insecable est dans la balise : elle suit la taille du HT. */ .prix-ht{ font-size:max(12px, .4em); font-weight:500; letter-spacing:.02em; white-space:nowrap; } /* « A partir de » au-dessus d'un prix affiche en grand (offre du 3 octobre 2026 : 490 et 890 euros HT sont des prix de depart). Meme famille que .prix-ht : petit, 500, sans le serrage des chiffres, couleur du montant. Sur sa propre ligne (bloc), au-dessus du montant, dans le meme element : la ligne du montant garde sa hauteur (celle de son element), seule la ligne du « A partir de » s'ajoute au-dessus. L'espace finale de la balise ne se voit pas (fin de ligne) ; elle garde « A partir de 490 euros HT » d'un seul tenant pour la lecture et la copie.

A partir de 490 € HT

(dans la page, « A » porte son accent). Taille : un cinquieme du montant, entre 13 et 22 px. Mesures du 03/10/2026 : 13 px dans les bulles des honoraires (montant de 34 a 48 px), sur les cartes de /valorisation (26 a 64) et les bulles de la couverture de l'accueil (40 a 64) ; 19 a 22 px sur les plaques des offres (80 a 136) ; 14 a 16 px sur les cartes de l'accueil, reglees plus bas. L'ecart sous la ligne (.2em de sa taille) s'ajoute au blanc que les chiffres laissent deja au-dessus d'eux (interligne de .92 a 1). */ .prix-dep{ display:block; margin:0 0 .2em; font-size:clamp(13px, .2em, 22px); line-height:1.2; font-weight:500; letter-spacing:.02em; white-space:nowrap; } /* Cartes de l'accueil (accueil.css 11 et 12, montant 80 px, 64 au telephone) : la ligne mesure 24 px (16/20 et 4 dessous ; 14/18 et 4 au telephone). Au-dela de 1100 px, les trois cartes partagent leurs rangees et leurs noms s'alignent sous les prix : « Sur devis », sans « A partir de », descend d'autant (76 + 24 = 100 px dans les trois cartes). Sous 1101 px, les cartes s'empilent : pas de marge. */ .g-carte-prix .prix-dep{ margin-bottom:4px; font-size:16px; line-height:20px; } @media (min-width: 1101px){ .g-carte-prix--mot{ padding-top:24px; } } @media (max-width: 760px){ .g-carte-prix .prix-dep{ font-size:14px; line-height:18px; } } /* Bulles de la couverture de l'accueil (accueil.css 10) : au large, les trois rangees prennent la meme hauteur ; la ligne se serre (13/15 et 2 dessous) pour que la colonne ne monte que de 17 px. */ .g-bulle-montant .prix-dep{ margin-bottom:2px; line-height:15px; } /* ========================================================================= 11. MOUVEMENT REDUIT ET IMPRESSION ------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce){ .f-nom, .f-liens, .f-menu, .f-burger i, .consent-bar, .cta-mobile, .to-top, .skip, .f-barre::before{ transition:none !important; } } @media print{ .f-burger, .consent-bar, .cta-mobile, .to-top, .jauge-lecture{ display:none !important; } .f-barre{ position:static; } } /* ========================================================================= 12. PETITS TELEPHONES, SOUS 360 PX ------------------------------------------------------------------------- */ /* Petits telephones, sous 360 px (30/09/2026, passage au DM Sans, plus large que le Libre Franklin) : le titre de section en 26 garde « Voir le travail avant de prendre contact » sur deux lignes dans sa bulle de 240 px ; l'etiquette de couverture en .16em tient chaque moitie sur une ligne (319 px en .3em pour 280 de large). */ @media (max-width: 359px){ :root{ --f-t-section:26px; } } /* 09/10/2026, audit telephone du 8 octobre : les etiquettes passent a 13 px (section 2). De 320 a 359 px, leur interlettrage descend a .16em pour qu'une etiquette qui tenait sur une ligne en 12 px y tienne encore (« Prix signe, prix encaisse » dans une bulle de 252 px a 320 px), et le titre d'appel final suit l'echelle des titres, 34 px sous 380 px. */ @media (max-width: 379px){ :root{ --f-t-affiche:34px; } } @media (max-width: 359px){ :root{ --f-espace-etiquette:.16em; } } /* ========================================================================= 13. LE TEXTE COURANT AU TELEPHONE : INTERLIGNE, JUSTIFICATION, CESURE ------------------------------------------------------------------------- */ /* Demande de Raphael du 04/10/2026 (points 1 et 4) : au telephone, aerer le texte, et justifier les paragraphes la ou c'est utile et propre, en surveillant les blancs entre les mots. Une regle commune a toutes les pages, posee ici une fois, plutot que dans chaque feuille de famille. Les selecteurs sont sans poids (:where) : une feuille de famille qui aligne un texte a gauche ou au centre garde la main. 1. L'interligne du texte courant de
(paragraphes, points des listes redigees, definitions) : la taille du texte plus 9,6 px (0,6 rem), soit 25,6 px a 16 px, 24,6 px a 15 px, 27,6 px a 18 px. Les familles posaient ces interlignes une a une, avec des poids differents : !important les remplace toutes, sur ce seul ensemble. Il ne touche ni les titres et ce qui en tient lieu, ni les notes, legendes, mentions et sources, ni les tableaux, formulaires, navigation, planches du rapport et couverture de l'accueil. 2. La justification, sur un ecran tactile, seulement la ou les blancs restent propres : aux largeurs des telephones courants, aucune ligne justifiee ne garde un blanc de plus d'environ 3,5 espaces (15 px a 16 px). Mesure par script du 05/10/2026, 46 pages, blanc le plus large de chaque ligne, derniere ligne exclue, rapporte a l'espace normale de sa police, par la methode des lignes : position des debuts de mots de la ligne justifiee, puis du meme bloc passe au fer a gauche, l'ecart divise par le nombre d'espaces de la ligne. (Les rectangles des mots, que WebKit arrondit au pixel, sous-estimaient ses blancs d'environ 1 px.) Dans Chromium, la cesure francaise est emulee : cesures conditionnelles aux points du dictionnaire de macOS, celui de WebKit, car le Chromium de test, sous macOS, coupe selon des motifs anglais (« comm-erce », « etabliss-ement »), la ou Chrome pour Android coupe en francais. Les deux moteurs donnent alors les memes coupures, a quelques lignes pres. Avec la regle precedente (tout le texte courant justifie, sauf exceptions), 806 paragraphes de deux lignes et plus etaient justifies, et 89 (WebKit, 393 px), 114 (Chrome 393) et 64 (Chrome 430) gardaient une ligne au-dessus de 3,5 espaces, jusqu'a 28, 41 et 46 px. Aucun reglage ne les tient : ni une cesure plus permissive (hyphenate-limit-chars 4 2 2, sans limite de lignes coupees), ni un espacement des mots resserre (pire), ni text-wrap:pretty (deux a huit fois plus de paragraphes au-dessus). Dans une colonne de 38 a 40 signes, un blanc trop large tombe dans 10 a 15 % des paragraphes de chaque famille de texte courant, sans famille epargnee. La regle ne justifie donc plus que les familles mesurees sous le seuil, nommees une a une : une famille nouvelle reste au fer a gauche tant qu'elle n'a pas ete mesuree. Une famille qui ouvre un blanc de plus de 4 espaces a une largeur courante (390 a 440 px, WebKit et Chrome) reste aussi au fer a gauche : les etapes (.f2-etape-texte, 5,9 espaces a 390 dans WebKit), le chapo de la mission des offres (.om-chapo, 5,7 a 400 et 402), les cas de l'offre sur devis (.gd-cas-texte, 4,9 a 390), les chapos d'appel (.f3-appel-chapo, 4,5 a 412 et 414), les points de lecture du calculateur (4,8 a 414). Sont justifies : les chapos des pages a scene (.f-chapo, dont, sur la methodologie, ceux des duos collants de l'etape 04 et des ajustements), les chapos des analyses (.k-lede), les resumes des cartes d'analyse (jusqu'a 639 px, 2c), les accroches, points, fiches et textes courts des offres, le paiement de la commande, les lignes et la liste de la methodologie. Restent au fer a gauche : le corps des analyses (bulles, depliants, reponses, lignes, sections, listes, chapos .k-chapo, ouvertures), le texte long des pages a scene (.f-texte), les cartes de la methodologie et d'A propos (.ms-texte), les lignes du calculateur, les listes des offres, le chapo du rapport de l'offre sur devis (.gd-rapport-chapo : 4,2 et 4,5 espaces depuis que « Montvalier » ne se coupe plus) et, comme avant, les titres et ce qui en tient lieu, les notes, legendes, mentions et sources, les chutes, les blocs centres, les avis des clients, les trois pages juridiques, le schema et le cadre du rapport, la couverture de l'accueil (justifiee a la main, accueil.css 2). Une page ne melange pas les deux alignements dans une meme famille : - Un paragraphe qui contient un lien reste au fer a gauche (un lien souligne s'etirerait en long trait dans une ligne justifiee), de meme un nom en .f2-insecable ou un nom de cookie en code, et avec lui toute sa famille sur la page : les six chapos de l'etude de cas, les deux cartes de l'accueil (le fondateur, les documents), les chapos des situations de l'offre sur devis. Pour une famille de paragraphes enfants (.go-panneau > p...), seuls comptent les paragraphes sans classe : un lien de fiche ou une aide n'en sont pas. - Une analyse dont l'exemple chiffre est un tableau (pacte Dutreil, plus-value, prix de vente : section ex-h) garde ses chapos au fer a gauche. Leurs hypotheses alignent des montants, et une espace insecable s'etire comme une espace de mot : « 850 000 € » se lisait en deux nombres (13 px pour une espace de 4,3 px, WebKit 428). Plus aucun separateur de milliers n'est dans un bloc justifie. Entre un nombre et son unite (« 78 k€ », « 4,8 M€ »), l'espace insecable peut encore s'elargir, jusqu'a 2,6 espaces. Une espace fine insecable (U+202F) ne s'etire pas : si le HTML la prend un jour pour les milliers, cette exception peut tomber. - L'accueil et la methodologie ne justifient leurs chapos qu'a partir de 390 px (2b) : ceux de la demonstration (6 espaces a 360 et 366 px) et des duos collants de la methodologie (4 a 5,5 espaces de 360 a 384 px) n'y tiennent pas avant. - L'offre Entreprise garde ses chapos au fer a gauche : celui de son exemple (« Un cas fictif, le groupe Montvalier ») ouvre 3,9 espaces a 402 px et 4,3 de 405 a 411 px, dans les deux moteurs. Apres, a 393 px : 84 paragraphes de deux lignes et plus justifies sur 1 456 (5,8 %), mediane de 2,2 espaces. Blanc le plus large aux largeurs courantes, WebKit puis Chrome : 3,04 et 3,05 a 360 px, 3,20 et 3,19 a 375, 3,28 et 3,26 a 384, 3,59 et 5,08 a 390, 3,56 et 3,54 a 393, 3,70 et 3,74 a 402, 3,40 et 3,42 a 412, 3,50 et 3,52 a 414, 3,26 et 3,25 a 428, 3,35 et 3,35 a 430, 3,26 et 3,82 a 440. Le 5,08 de Chrome a 390 px tient a un seul chapo (valorisation fiscale : Chrome n'y coupe pas « l'eva-luation » comme WebKit), a une largeur qui est surtout celle des iPhone, ou tout navigateur est WebKit. Balayage de 358 a 444 px au pixel pres, et de 360 a 760 px tous les 4 px, dans les deux moteurs : au-dessus de 4 espaces, seulement ce chapo dans Chrome a 390 et 391 px, le chapo du calculateur a 425 et 426 px (4,1 espaces, 17 px) et l'accroche de l'offre sur devis a 484 px (4,1). A partir de 360 px (2a), les familles qui tiennent aussi de 360 a 389 px : les chapos simples des pages a scene (hors accueil, methodologie et offre Entreprise) et les textes courts des offres (13 paragraphes, 3,45 espaces au plus de 360 a 389 px dans les deux moteurs). Les autres attendent 390 px (2b) : a 360 et 375, 7 a 9 % de leurs paragraphes passaient 3,5 espaces (jusqu'a 6 espaces, 25 px), les chapos des analyses compris. Sous 360 px, tout reste au fer a gauche. Une fenetre etroite d'ordinateur (pointeur fin) aussi : Chrome pour Mac y coupe les mots selon des motifs anglais. 3. La cesure francaise (lang="fr" sur chaque page) : mots de cinq lettres au moins, deux lettres au moins avant la coupure, trois apres (hyphenate-limit-chars, et ses equivalents WebKit), trois lignes coupees de suite au plus (hyphenate-limit-lines : WebKit, Chrome ne la lit pas). Les noms propres ne se coupent jamais (voir plus bas). 4. Le dernier mot du paragraphe. Chrome ne coupe jamais le dernier mot d'un paragraphe (« s'additionnent pas / mecaniquement. »), WebKit le coupe. Un point d'ancrage vide et sans largeur, pose apres le texte (::after en inline-block de 0 px), suffit pour que Chrome le traite comme les autres mots. Mesure avec la cesure francaise : sans lui, dans Chrome, 6 paragraphes passaient 3,5 espaces a 393 px (6,3 espaces, 25 px au plus, sur l'avant-derniere ligne), 5 a 412 px (30 px) et 4 a 428 px (34 px), contre 1, 0 et 0 avec lui. Il ne change ni la hauteur ni le nombre des lignes, et WebKit n'en tient pas compte. La contrepartie est celle de WebKit : la derniere ligne peut n'etre que la fin d'un mot coupe (« rete-/nues. »), ce que la typographie francaise evite. C'est le cas de 7 paragraphes sur 84 dans WebKit a 393 px (8 dans Chrome), et de 0 a 12 selon la largeur, 5 en moyenne de 360 a 760 px, dans les deux moteurs. Aucun des deux ne lit hyphenate-limit-last. Proteger le dernier mot (le prendre dans un span en hyphens:manual, dans le HTML ou par script) supprimerait ces fins de mot, mais rouvrirait les blancs dans les deux moteurs : 6 paragraphes au-dessus de 3,5 espaces a 393 px dans WebKit, 25 px au plus. Un espace et une espace sans chasse (" \200B") ajoutaient parfois une ligne : ecartes. 5. Le retour a la ligne simple (text-wrap:wrap, avec !important : les familles posent pretty sur leurs paragraphes), pour tout le texte courant sous 760 px, justifie ou non, hors des blocs centres, quel que soit le pointeur : une fenetre d'ordinateur de moins de 760 px prend la mise en page du telephone, et le retour simple avec elle. Seule la justification demande un ecran tactile. Au-dessus de 760 px, rien ne change. Dans une ligne justifiee, le mode pretty elargit les blancs (mediane de 2,3 espaces avec wrap, 4,7 avec pretty dans WebKit, Safari 26, 104 px au plus). Au fer a gauche, Safari 26 reequilibre tout le paragraphe et laisse un cinquieme de la bulle vide a droite : avec wrap, le texte va au bout de sa bulle (point 5 de Raphael). 6. Les notes et legendes sous 760 px vont au bout de leur bulle, quel que soit le pointeur : retour a la ligne simple, au lieu de pretty ou balance, qui raccourcissaient leurs lignes (la legende d'un grand chiffre perd aussi sa mesure de 30 em sous 760 px : pages.css, p-methode.css). Note du 09/10/2026 (audit telephone du 8 octobre, constats 15, 50, 66, 98, 122, 138, 150 et 163) : les chapos ne sont plus justifies au telephone. Dans une colonne de 353 px, leurs blancs montaient a 3 ou 4 espaces et la cesure coupait des mots dans le premier ecran (« rap- port », « entre-prise », « proce-dure »). Les familles les avaient deja remis au fer a gauche dans leurs feuilles (accueil.css, offre.css, p-methode.css, p-calculateur.css, p-analyses.css, p-contact.css). La regle commune les retire de ses listes : .f-chapo (2a, et sur l'accueil et la methodologie 2b), les chapos de la demonstration (.f1-demo-chapo), les accroches des offres (.go-accroche, masquees au telephone depuis la decision D3), les chapos des analyses (.k-lede, 2b), les resumes des cartes d'analyse (.k-carte-article-resume, 2c) et le paiement de la commande (.p-payer > p, 2a, 3,05 espaces dans Chromium). Ils sont au fer a gauche sans cesure automatique, la protection .nom-propre reste. Ne restent justifies que des textes courts dans les cartes blanches : points et temps de l'offre Fonds de commerce, blocs de l'offre Entreprise, fiches et savoir des offres, une carte de l'accueil, lignes et liste de la methodologie. Les mesures ci-dessus (84 paragraphes justifies a 393 px) datent d'avant cette note. Les exclusions qui citent encore ces familles dans les :not() n'ont plus d'effet et restent en place. */ @media (max-width: 760px){ :where(main) :where(p, blockquote):where(:not( [class*="titre"], [class*="etiquette"], [class*="kicker"], [class*="-nom"], [class*="chiffre"], [class*="prix"], [class*="montant"], [class*="citation"], [class*="legende"], [class*="note"], [class*="mention"], [class*="aide"], [class*="source"], [class*="rassur"], [class*="tva"], [class*="seuil"], [class*="delai"], [class*="formule"], [class*="calcul"], [class*="bouton"], [class*="erreur"], [class*="attente"], [class*="indice"], [class*="courant"], [class*="phrase"], [class*="chute"], [class*="lien"], [class*="-lib"], [class*="-mot"], [class*="-val"], [class*="-tete"], [class*="compteur"], [class*="etat"], [class*="signature"], [class*="socle"], .k-meta, .k-bulle-no, .kl-coord, :is(td, th, caption, button, label, summary, figcaption, nav, form, [role="dialog"], .r-planches, .pl, .gs, .g-rapport-cadre, .f-cadre-produit, .f-couv, .k-liens, .p-qui) * )), :where(main) :where(.k-liste, .pc-points, .gd-savoir-points, .g490-liste) > li, :where(main) :where(.g990-methode-dl) > dd, :where(main) :where(.k-lecture, .k-section-corps, .k-depli-corps, .k-ligne-corps, .k-prose, .k-question, .f3-reponse, .k-encadre) :where(ul, ol):where(:not(.k-liens, nav *)) > li{ line-height:calc(1em + .6rem) !important; } /* Point 5 : le texte courant au fer a gauche va au bout de sa bulle, sauf les blocs centres, qui gardent leur equilibre (dont les duos collants, centres partout sauf sur la methodologie, ou leurs chapos suivent les autres chapos de la page). */ :where(main) :where(p, blockquote):where(:not( [class*="titre"], [class*="etiquette"], [class*="kicker"], [class*="-nom"], [class*="chiffre"], [class*="prix"], [class*="montant"], [class*="citation"], [class*="legende"], [class*="note"], [class*="mention"], [class*="aide"], [class*="source"], [class*="rassur"], [class*="tva"], [class*="seuil"], [class*="delai"], [class*="formule"], [class*="calcul"], [class*="bouton"], [class*="erreur"], [class*="attente"], [class*="indice"], [class*="courant"], [class*="phrase"], [class*="chute"], [class*="lien"], [class*="-lib"], [class*="-mot"], [class*="-val"], [class*="-tete"], [class*="compteur"], [class*="etat"], [class*="signature"], [class*="socle"], .k-meta, .k-bulle-no, .kl-coord, :is(td, th, caption, button, label, summary, figcaption, nav, form, [role="dialog"], .r-planches, .pl, .gs, .g-rapport-cadre, .f-cadre-produit, .f-couv, .k-liens, .p-qui, [class*="centre"], .f2-colle:not(.ms-methode *), .p-merci) * )), :where(main) :where(.k-liste, .pc-points, .gd-savoir-points, .g490-liste) > li, :where(main) :where(.g990-methode-dl) > dd, :where(main) :where(.k-lecture, .k-section-corps, .k-depli-corps, .k-ligne-corps, .k-prose, .k-question, .f3-reponse, .k-encadre) :where(ul, ol):where(:not(.k-liens, nav *)) > li{ text-wrap:wrap !important; } } /* 2a. A partir de 360 px : les familles qui tiennent aussi a 360 et a 375 px (textes courts des offres). Les chapos simples des pages a scene et le paiement de la commande en sont sortis le 09/10/2026, voir la note de la section 13. L'accueil et la methodologie n'y sont pas : leurs autres chapos (demonstration, duos collants) ne se justifient qu'a partir de 390 px, et une page ne melange pas les deux alignements dans une meme famille (2b). L'offre Entreprise non plus : le chapo de son exemple (« Un cas fictif, le groupe Montvalier ») ouvre 3,9 espaces a 402 px et 4,3 de 405 a 411 px, et ses autres chapos le suivent. */ @media (min-width: 360px) and (max-width: 760px) and (pointer: coarse){ :where(main) :where( .gd-savoir-lead, .g490-temps-texte, .go-panneau > p, .g990-bloc-texte > p ):where(:not( [class*="titre"], [class*="etiquette"], [class*="kicker"], [class*="-nom"], [class*="chiffre"], [class*="prix"], [class*="montant"], [class*="citation"], [class*="legende"], [class*="note"], [class*="mention"], [class*="aide"], [class*="source"], [class*="rassur"], [class*="tva"], [class*="seuil"], [class*="delai"], [class*="formule"], [class*="calcul"], [class*="bouton"], [class*="erreur"], [class*="attente"], [class*="indice"], [class*="courant"], [class*="phrase"], [class*="chute"], [class*="lien"], [class*="-lib"], [class*="-mot"], [class*="-val"], [class*="-tete"], [class*="compteur"], [class*="etat"], [class*="signature"], [class*="socle"], .f2-etape-texte, .f3-appel-chapo, .om-chapo, .gd-rapport-chapo, .f1-demo-chapo, .f2-chapo-carte, .k-meta, .k-bulle-no, .kl-coord, .go-cout-texte, :is(td, th, caption, button, label, summary, figcaption, nav, form, [role="dialog"], figure, blockquote, [class*="centre"], .f2-colle, .f-couv, .p-merci, .r-planches, .pl, .gs, .g-rapport-cadre, .f-cadre-produit, .k-liens, .p-qui, .g990-savoir-tete, .g990-prixvaleur, [class*="p-etapes"], .kl-couv, .kl-lecture, .k-prose, .k-encadre, .f-accueil, .ms-methode) *, :has(.f2-insecable, code, a), main:has(.f-chapo:not([class*="f1-"], [class*="f2-"], [class*="f3-"], .om-chapo, .gd-rapport-chapo) :is(a, code, .f2-insecable)) .f-chapo:not([class*="f1-"], [class*="f2-"], [class*="f3-"], .om-chapo, .gd-rapport-chapo), main:has(.gd-savoir-lead :is(a, code, .f2-insecable)) .gd-savoir-lead, main:has(.g490-temps-texte :is(a, code, .f2-insecable)) .g490-temps-texte, main:has(.go-panneau > p:not([class]) :is(a, code, .f2-insecable)) .go-panneau > p:not([class]), main:has(.g990-bloc-texte > p:not([class]) :is(a, code, .f2-insecable)) .g990-bloc-texte > p:not([class]), main:has(.p-payer > p:not([class]) :is(a, code, .f2-insecable)) .p-payer > p:not([class]), main:has(.g990-exemple-entete > .f-chapo) .f-chapo )){ text-align:justify; text-align-last:left; text-justify:inter-word; -webkit-hyphens:auto; hyphens:auto; hyphenate-limit-chars:5 2 3; -webkit-hyphenate-limit-before:2; -webkit-hyphenate-limit-after:3; -webkit-hyphenate-limit-lines:3; hyphenate-limit-lines:3; text-wrap:wrap !important; } /* Point 4 : l'ancrage de fin, sur toutes les familles justifiees (sans effet la ou le texte n'est ni justifie ni coupe, de 360 a 389 px, et sur les membres d'une famille laissee au fer a gauche). */ :where(main) :where( .gd-savoir-lead, .g490-temps-texte, .go-panneau > p, .g990-bloc-texte > p, .g490-point > p, .k-ligne > p, .pm-liste-depli > li, .f2-chapo-carte ):where(:not( [class*="titre"], [class*="etiquette"], [class*="kicker"], [class*="-nom"], [class*="chiffre"], [class*="prix"], [class*="montant"], [class*="citation"], [class*="legende"], [class*="note"], [class*="mention"], [class*="aide"], [class*="source"], [class*="rassur"], [class*="tva"], [class*="seuil"], [class*="delai"], [class*="formule"], [class*="calcul"], [class*="bouton"], [class*="erreur"], [class*="attente"], [class*="indice"], [class*="courant"], [class*="phrase"], [class*="chute"], [class*="lien"], [class*="-lib"], [class*="-mot"], [class*="-val"], [class*="-tete"], [class*="compteur"], [class*="etat"], [class*="signature"], [class*="socle"], .f2-etape-texte, .f3-appel-chapo, .om-chapo, .gd-rapport-chapo, .k-meta, .k-bulle-no, .kl-coord, .go-cout-texte, :is(td, th, caption, button, label, summary, figcaption, nav, form, [role="dialog"], figure, blockquote, [class*="centre"], .f2-colle, .f-couv, .p-merci, .r-planches, .pl, .gs, .g-rapport-cadre, .f-cadre-produit, .k-liens, .p-qui, .g990-savoir-tete, .g990-prixvaleur, [class*="p-etapes"], .kl-couv, .kl-lecture, .k-prose, .k-encadre) *, :has(.f2-insecable, code, a) ))::after{ content:""; display:inline-block; width:0; height:0; } } /* 2b. A partir de 390 px : les familles qui ne tiennent qu'a partir de 393 px (points des offres, lignes et listes de la methodologie, chapo des cartes de l'accueil). Les chapos des analyses, les accroches des offres, le chapo de la demonstration, les chapos simples de l'accueil et ceux de la methodologie en sont sortis le 09/10/2026 (note de la section 13). */ @media (min-width: 390px) and (max-width: 760px) and (pointer: coarse){ :where(main) :where( .g490-point > p, .k-ligne > p, .pm-liste-depli > li, .f2-chapo-carte ):where(:not( [class*="titre"], [class*="etiquette"], [class*="kicker"], [class*="-nom"], [class*="chiffre"], [class*="prix"], [class*="montant"], [class*="citation"], [class*="legende"], [class*="note"], [class*="mention"], [class*="aide"], [class*="source"], [class*="rassur"], [class*="tva"], [class*="seuil"], [class*="delai"], [class*="formule"], [class*="calcul"], [class*="bouton"], [class*="erreur"], [class*="attente"], [class*="indice"], [class*="courant"], [class*="phrase"], [class*="chute"], [class*="lien"], [class*="-lib"], [class*="-mot"], [class*="-val"], [class*="-tete"], [class*="compteur"], [class*="etat"], [class*="signature"], [class*="socle"], .f2-etape-texte, .f3-appel-chapo, .om-chapo, .gd-rapport-chapo, .k-meta, .k-bulle-no, .kl-coord, .go-cout-texte, :is(td, th, caption, button, label, summary, figcaption, nav, form, [role="dialog"], figure, blockquote, [class*="centre"], .f2-colle, .f-couv, .p-merci, .r-planches, .pl, .gs, .g-rapport-cadre, .f-cadre-produit, .k-liens, .p-qui, .g990-savoir-tete, .g990-prixvaleur, [class*="p-etapes"], .kl-couv, .kl-lecture, .k-prose, .k-encadre) *, :has(.f2-insecable, code, a), main:has(.k-lede :is(a, code, .f2-insecable)) .k-lede, main:has(.go-accroche :is(a, code, .f2-insecable)) .go-accroche, main:has(.g490-point > p:not([class]) :is(a, code, .f2-insecable)) .g490-point > p:not([class]), main:has(.k-ligne > p:not([class]) :is(a, code, .f2-insecable)) .k-ligne > p:not([class]), main:has(.pm-liste-depli > li:not([class]) :is(a, code, .f2-insecable)) .pm-liste-depli > li:not([class]), main:has(.f1-demo-chapo :is(a, code, .f2-insecable)) .f1-demo-chapo, main:has(.f2-chapo-carte :is(a, code, .f2-insecable)) .f2-chapo-carte, main:has(.f-chapo:not([class*="f1-"], [class*="f2-"], [class*="f3-"], .om-chapo, .gd-rapport-chapo) :is(a, code, .f2-insecable)) .f-chapo:not([class*="f1-"], [class*="f2-"], [class*="f3-"], .om-chapo, .gd-rapport-chapo), main:has([aria-labelledby="ex-h"] .k-tableau) .k-lede )){ text-align:justify; text-align-last:left; text-justify:inter-word; -webkit-hyphens:auto; hyphens:auto; hyphenate-limit-chars:5 2 3; -webkit-hyphenate-limit-before:2; -webkit-hyphenate-limit-after:3; -webkit-hyphenate-limit-lines:3; hyphenate-limit-lines:3; text-wrap:wrap !important; } } /* 2c. De 390 a 639 px, jusqu'au 09/10/2026 : les resumes des cartes d'analyse, justifies. Depuis l'audit telephone du 8 octobre, ils sont au fer a gauche (voir la note du 09/10/2026, plus haut). */ @media (max-width: 760px){ :where(main) :where([class*="note"], [class*="legende"], figcaption):where(:not(.p-merci *)){ text-wrap:wrap !important; } } /* Les noms propres ne se coupent jamais (05/10/2026) : la cesure ne distingue pas un nom propre d'un nom commun (« Ar-tis », « Montau-ban », « Inter-fimo », « Dut-reil »). Dans le texte de
, chaque nom propre est pris dans un span.nom-propre, pose par script sur les 46 pages, sans changer un mot : la cesure automatique s'y arrete, le retour a la ligne reste permis aux espaces et au trait d'union du nom (« Rodriguez-/Ginestet »). */ .nom-propre{ -webkit-hyphens:manual; hyphens:manual; }