/* ========================================================================= ARTIS VALORISATION, REFONTE : LES PAGES INTERIEURES (pages.css) Toutes les pages hors accueil et pages d'offre, /valorisation comprise : fond bleu fixe, sans animation, et bulles blanches qui portent les idees principales. Chargee apres socle.css, avant la feuille de famille (p-*.css). Tiree le 30/09/2026 de k-pages.css, la feuille des deux prototypes de la piste K (_essai-page-methodologie.html, _essai-page-analyse.html), valides par Raphael : - les copies des regles f- (barre, boutons, pied) que k-pages.css portait faute de charger f-page.css sont retirees : socle.css les donne ; - ce qui differe volontairement sur le bleu reste ici, en surcharges limitees a ces pages : verre marine de la barre, barre claire sur les bulles, burger de verre, encre des boutons, pied ; - les deux images de la scene, inlinees en base64 dans l'essai, sont devenues assets/img/verre-paysage.webp et verre-portrait.webp. Les composants ajoutes pour les autres familles (formulaire, lecture longue, tableau chiffre, fil d'Ariane, filtres, dialogue, signature, sources, avis, resultat de calculateur) sont a la fin, section 12. Reference du systeme : REFONTE-GABARIT.md, a la racine du depot. ------------------------------------------------------------------------- */ /* ========================================================================= 1. JETONS DES PAGES INTERIEURES ------------------------------------------------------------------------- */ :root{ /* --- Les bleus de l'accueil (04/10/2026, point 12 de Raphael : « la couleur de l'accueil doit etre la meme sur les autres pages ») ------ Jusque-la, le fond bleu (#1b3159, #213a66, #172b4f, reflet #2f4f84) etait plus clair et plus sature que l'accueil, et virait au bleu roi a cote de lui. L'accueil, depuis le 04/10 au soir, tire sa scene vers le bleu du rapport, Pantone #15253E (accueil.css, puis scene.css). Les bleus du fond fixe sont maintenant ceux que l'on mesure a l'ecran sur l'accueil (Chrome WebGL 1 440 x 900, scene vivante et son voile, mediane des pixels de fond) : haut de la couverture #1d2f49, milieu #182a43, bas #13233a, eclat du verre #2b4060. Les anciens jetons gardent leurs noms. Contrastes (couleurs pleines) : blanc 13,5, 14,4 et 15,8:1, blanc a 80 % 9,2:1 au pire, azur #88B6EB 6,3:1 au pire (4,9:1 sur l'eclat). */ --k-nuit: #0a1424; /* sous l'image de tete : le voile, bleu du rapport assombri */ --k-fond-1: #1d2f49; /* haut du fond fixe */ --k-fond-2: #182a43; /* milieu : blanc 14,4:1, azur 6,8:1 */ --k-fond-3: #13233a; /* bas */ --k-lumiere: #2b4060; /* reflet fixe, haut droit (blanc 10,4:1) */ --k-ombre: #0f1c30; /* ombre fixe, bas gauche */ --k-marine: #15253E; /* bande sombre du contenu du rapport, celle de l'accueil */ /* Voile sous le texte (couverture, pied) : le bleu du rapport assombri de moitie, celui des voiles de la couverture de l'accueil (rgb 10,20,36), et non plus le marine de la nuit (0,7,53), qui posait des taches violettes sur ces bleus. */ --k-voile: var(--f-voile, 10,20,36); --k-blanc: #ffffff; --k-noir: #000000; --k-encre: #0B1D36; /* texte sur blanc, 16,8:1 */ --k-gris: #4f596a; /* texte second sur blanc, 7,1:1 */ --k-klein: #002FA7; /* accent sur blanc, 9,6:1 */ /* accent sur le bleu et sur la bande : l'azur des titres de l'accueil (--f-azur-scene, scene.css), et non plus #7FB0E8, depuis le 04/10/2026 */ --k-azur: #88B6EB; --k-clair: #4F8BE0; /* bleu clair sur blanc (barres), 3,4:1 */ --k-teinte: #edf1fa; /* fond des puces sur blanc (Klein 8,7:1) */ --k-trait: #e2e6ee; /* filets sur blanc */ --k-attenue: rgba(255,255,255,.80); /* texte second sur bleu (8:1) */ /* --- Typographie ------------------------------------------------------ */ --k-serre: -0.03em; /* Echelle, telephone d'abord ; les clamp() atteignent la taille ordinateur a 1440 */ --k-t-affiche: clamp(38px, 3.2vw + 26px, 76px); /* 38 a 393, 72 a 1440 */ --k-t-section: clamp(28px, 1.9vw + 21px, 48px); --k-t-chiffre: clamp(56px, 4vw + 42px, 104px); --k-t-bulle: clamp(20px, .5vw + 18px, 26px); --k-t-chapo: clamp(18px, .3vw + 17px, 21px); --k-t-texte: 16px; --k-t-petit: 14px; --k-t-etiquette:12px; /* --- Mesures ---------------------------------------------------------- */ --k-largeur: 1360px; /* celle du socle : 1440 moins deux gouttieres de 40 */ --k-gouttiere: 20px; --k-ecart: 12px; /* entre bulles */ --k-section: 72px; /* entre sections */ --k-r-bulle: 20px; --k-r-petit: 12px; --k-pad-bulle: 24px 22px; --k-courbe: cubic-bezier(.2,.7,.2,1); /* --- Surcharge du socle : l'encre remplace le noir --------------------- Encre des boutons sombres, du lien d'evitement et du burger ouvert : celle de l'accueil sur ses surfaces claires, et non le noir pur de la reference (socle.css : --f-noir #000000). */ --f-noir:#0B1D36; --k-encre-survol: #162c4f; /* Verre de la barre sur le bleu : marine a 45 %, celui de l'accueil sur la scene claire. Quand une bulle blanche passe sous la barre, pages.js pose .f-barre--claire : verre blanc et encre, comme sur les bandes claires de l'accueil. Sans script, marine a 70 % partout (6,4:1 au pire, sur blanc). */ --k-verre-barre: rgba(11,29,54,.45); --k-verre-clair: rgba(255,255,255,.86); --k-filet-encre: rgba(11,29,54,.14); } @media (min-width: 761px){ :root{ --k-gouttiere:40px; --k-ecart:20px; --k-section:120px; --k-pad-bulle:32px; } } .no-js{ --k-verre-barre: rgba(11,29,54,.70); } @media (max-width: 360px){ :root{ --k-gouttiere:16px; --k-pad-bulle:20px 18px; } } /* 09/10/2026, audit telephone du 8 octobre (lot 7, constats 174, 210 et 230). Les etiquettes du bleu passent a 13 px (12 avant), comme celles de la scene (socle.css 2), avec le meme interlettrage de .22em (section 6, 8 et 12, plus bas). Sous 380 px, le grand titre du bleu passe a 34 px : le plancher de 38 px du clamp donnait aux petits ecrans un titre plus gros que celui de la scene (cinq lignes et 194 px a 320 px). Les articles ont leur propre taille (p-analyses.css 15a), qui l'emporte. */ @media (max-width: 760px){ :root{ --k-t-etiquette:13px; } } @media (max-width: 379px){ :root{ --k-t-affiche:34px; } } /* ========================================================================= 2. LA PAGE SUR LE BLEU ------------------------------------------------------------------------- */ /* Surcharges du socle : la barre des pages interieures est plus basse (scroll-padding de 96 au lieu de 100), et les svg ne debordent pas. */ html{ scroll-padding-top:96px; } svg{ max-width:100%; } .k-page{ margin:0; color:var(--f-texte); background:var(--k-fond-2); font:400 var(--k-t-texte)/1.5 var(--f-police); letter-spacing:var(--k-serre); -webkit-font-smoothing:antialiased; font-variant-numeric:tabular-nums; border-top:3px solid var(--f-lisere); } /* Le telephone sans lisere (10/10/2026, demande de Raphael, citee dans scene.css 1) : sous 761 px, a l'ecran, le corps n'a plus sa bordure Klein de 3 px, comme sur la scene. La barre, fixe, ne bouge pas. Le contenu remonte de 3 px, et l'image de la couverture, qui part du haut de la section au telephone (section 6, constat 217), part du haut de l'ecran. A 761 px et au-dela, le lisere reste (l'impression le retirait deja). */ @media screen and (max-width: 760px){ .k-page{ border-top:0; } } .k-page ::selection{ background:#a5edee; color:#000735; } .k-page :focus-visible{ outline:2px solid var(--f-texte); outline-offset:3px; } .k-bulle :focus-visible, .k-page .f-barre--ouverte .f-menu :focus-visible{ outline-color:var(--k-klein); } .k-conteneur{ width:min(100% - 2*var(--k-gouttiere), var(--k-largeur)); margin-inline:auto; } /* ========================================================================= 3. LE FOND FIXE Aucune animation : un degrade vertical dans les bleus de l'accueil, un eclat fixe en haut a droite et une ombre en bas a gauche. Fixe : le contenu glisse dessus. Sans grain (04/10/2026, demande de Raphael : « il y a des petits picots sur le fond des pages ») : la tuile grain.webp, posee ici a 6 % en lumiere crue, est retiree. Les degrades s'arretent en transparent de la meme couleur (et non en noir transparent) : aucun gris dans le fondu. ------------------------------------------------------------------------- */ .k-fond{ position:fixed; inset:0; z-index:-2; pointer-events:none; background: radial-gradient(90% 55% at 88% 0%, var(--k-lumiere) 0%, rgba(43,64,96,0) 70%), radial-gradient(70% 45% at 0% 100%, var(--k-ombre) 0%, rgba(15,28,48,0) 70%), linear-gradient(180deg, var(--k-fond-1) 0%, var(--k-fond-2) 45%, var(--k-fond-3) 100%); } /* ========================================================================= 4. LA BARRE SUR LE BLEU (surcharges du socle) Meme balisage et memes regles que l'accueil (socle.css), verre teinte partout : le nom, la pilule et le burger prennent le verre marine a 45 % sur le bleu, puis ensemble le verre blanc et l'encre quand une bulle blanche passe sous la barre (.f-barre--claire, pose par pages.js). Le burger n'est plus une plaque blanche : il prend le verre du nom, puis l'encre quand le menu est ouvert. ------------------------------------------------------------------------- */ .f-marque{ flex:0 1 auto; min-width:0; background:var(--k-verre-barre); -webkit-backdrop-filter:blur(var(--f-flou-barre)); backdrop-filter:blur(var(--f-flou-barre)); transition:background-color .3s var(--f-entree-courbe), color .2s, box-shadow .3s; } .f-barre.f-barre--claire .f-marque{ background:var(--k-verre-clair); color:var(--k-encre); box-shadow:inset 0 0 0 1px var(--k-filet-encre); } @media (min-width: 1181px){ .f-liens{ background:var(--k-verre-barre); transition:background-color .3s var(--f-entree-courbe), box-shadow .3s; } .f-barre.f-barre--claire .f-liens{ background:var(--k-verre-clair); box-shadow:inset 0 0 0 1px var(--k-filet-encre); } } @media (max-width: 1180px){ .f-burger{ flex:none; box-shadow:none; background:var(--k-verre-barre); color:var(--f-texte); transition:background-color .3s var(--f-entree-courbe), color .2s, box-shadow .3s; } .f-burger i{ background:currentColor; } .f-barre.f-barre--claire .f-burger{ background:var(--k-verre-clair); color:var(--k-encre); box-shadow:inset 0 0 0 1px var(--k-filet-encre); } .f-barre.f-barre--ouverte .f-burger{ background:var(--k-encre); color:var(--f-blanc); box-shadow:none; } /* Menu ouvert sur une bulle : le nom quitte le verre clair, comme sans bulle (la regle du socle vient avant celle de la barre claire ci-dessus, elle est redite ici pour garder l'ordre des prototypes). */ .f-barre.f-barre--ouverte .f-marque{ color:var(--f-noir); background:transparent; box-shadow:none; -webkit-backdrop-filter:none; backdrop-filter:none; } .f-menu{ max-height:calc(100svh - 16px); overflow-y:auto; } .f-liens-contact .f-bouton{ width:100%; } } @media (max-width: 760px){ .f-barre-corps{ gap:12px; } } /* 320 a 360 px : a 14 px et .16em, nom (242 px) + burger + ecart debordaient de la gouttiere de 20 px. Nom en 13 px, .13em : 205 px. 09/10/2026, audit telephone du 8 octobre (lot 7, constat 215) : depuis les bulles de verre du 04/10 (socle.css 7, rembourrage de 13 px sous 361 px), le nom en 14 px et .16em tient dans la barre : 222 px a 20 px du bord sur la scene, 318 px avec le bouton du menu a 320 px. La barre du bleu prend les memes valeurs que celle de la scene, nom en 14 px et .16em, bulle a 20 px du bord (la gouttiere de la scene, --f-gouttiere), au lieu de 13 px, .13em et 16 px : la barre ne change plus de taille ni de place en passant d'une page a l'autre. Le contenu garde sa gouttiere de 16 px. */ @media (max-width: 360px){ .f-barre .f-marque .lt-main{ font-size:14px; letter-spacing:.16em; } .f-barre > .k-conteneur{ width:min(100% - 2*var(--f-gouttiere), var(--k-largeur)); } } /* ========================================================================= 5. LES BOUTONS (surcharges du socle) Interligne de 1,15 et texte cale a gauche : un long libelle passe sur deux lignes sans se serrer ; un leger enfoncement au clic. Au telephone, les boutons gardent leur largeur (le socle les etire a parts egales). ------------------------------------------------------------------------- */ .f-bouton{ line-height:1.15; text-align:left; } .f-bouton:active{ transform:scale(.98); } @media (max-width: 760px){ .f-boutons .f-bouton{ flex:0 1 auto; } } /* ========================================================================= 6. COUVERTURE : l'image fixe de la scene, le titre, la bulle-sommaire ------------------------------------------------------------------------- */ .k-couv{ position:relative; isolation:isolate; padding:112px 0 8px; } .k-couv::before{ content:""; position:absolute; z-index:-1; left:0; right:0; top:-3px; height:min(100%, 980px); background:var(--k-nuit) url("../img/verre-portrait.webp") 50% 0 / cover no-repeat; -webkit-mask-image:linear-gradient(#000 55%, rgba(0,0,0,0) 100%); mask-image:linear-gradient(#000 55%, rgba(0,0,0,0) 100%); } @media (min-aspect-ratio: 11/10){ .k-couv::before{ background-image:url("../img/verre-paysage.webp"); background-position:50% 30%; } } /* Voile sous le texte : l'image claire derriere le chapo (blanc 5,3:1 sans voile au pire point, 7:1 avec). Depuis le 04/10/2026, l'image est reteinte aux bleus de l'accueil, plus sombre, et les voiles gardent leur dessin et leur dose, dans la couleur des voiles de l'accueil (--k-voile, section 1) au lieu du marine de la nuit. */ .k-couv::after{ content:""; position:absolute; z-index:-1; left:0; right:0; top:0; height:min(100%, 980px); pointer-events:none; background:radial-gradient(90% 70% at 20% 70%, rgba(var(--k-voile),.35) 0%, rgba(var(--k-voile),0) 75%); -webkit-mask-image:linear-gradient(#000 55%, rgba(0,0,0,0) 100%); mask-image:linear-gradient(#000 55%, rgba(0,0,0,0) 100%); } /* Paysage (socle, 30/09/2026) : les lames claires de verre-paysage.webp passent sous le fil d'Ariane de 1024 a 1200 px ; la page courante (13 px, blanc a 80 %) y tombait a 3,4:1 sur quinze articles. Un voile marine lateral s'ajoute au voile radial : 30 % a gauche, 22 % au milieu, nul aux 70 %. Mesure (5e centile des pixels sous les glyphes, 1024 a 1440) : fil 4,9:1 au pire, titre azur 3,4:1 au pire. Un voile haut de 240 px ne suffisait pas : le fil des articles est a 190 px et plus du haut. Les familles qui redessinent leur voile (contact, legal, valorisation) gardent le leur ; une variante qui remplace ce fond (.k-couv--voile de p-analyses.css) doit reprendre la couche laterale. */ @media (min-aspect-ratio: 11/10){ .k-couv::after{ background:radial-gradient(90% 70% at 20% 70%, rgba(var(--k-voile),.35) 0%, rgba(var(--k-voile),0) 75%), linear-gradient(90deg, rgba(var(--k-voile),.30) 0%, rgba(var(--k-voile),.22) 45%, rgba(var(--k-voile),0) 70%); } } /* Portrait : la sphere eclairee tombe derriere le titre (azur 2,3:1 a 320 px sans voile). Voile marine a 45 % des le premier quart : azur 4,7:1. 04/10/2026 : l'image reteinte est plus sombre, la sphere ne s'eclaire plus ; a 45 %, le haut des pages sur le bleu restait bien plus sombre que le haut de l'accueil au telephone. Le voile passe a 30 % (8 % en haut). Mesure dans le compte rendu du 04/10/2026 (mission couleurs). */ @media (max-aspect-ratio: 1099/1000){ .k-couv::after{ background:linear-gradient(rgba(var(--k-voile),.08) 0%, rgba(var(--k-voile),.30) 22%, rgba(var(--k-voile),.30) 100%); } } .k-couv-grille{ display:grid; gap:28px; align-items:end; } .k-fil{ margin:0 0 10px; padding:0; list-style:none; display:flex; flex-wrap:wrap; gap:4px 0; font-size:13px; line-height:20px; letter-spacing:.02em; color:var(--k-attenue); } .k-fil li + li::before{ content:"/"; margin:0 8px; opacity:.7; } .k-fil{ margin-top:-10px; } .k-fil a{ color:var(--f-texte); text-decoration:none; display:inline-flex; align-items:center; min-height:44px; min-width:44px; } .k-fil li[aria-current]{ display:inline-flex; align-items:center; min-height:44px; } .k-fil a:hover{ text-decoration:underline; text-underline-offset:3px; } .k-etiquette{ display:block; margin:0 0 20px; font-size:var(--k-t-etiquette); line-height:1.3; font-weight:500; letter-spacing:.3em; text-transform:uppercase; color:var(--f-texte); } .k-ligne-bloc{ display:block; } .k-titre-affiche{ margin:0; font-size:var(--k-t-affiche); line-height:1.02; font-weight:500; letter-spacing:var(--k-serre); text-wrap:balance; } .k-azur{ color:var(--k-azur); } .k-insec{ white-space:nowrap; } .k-chapo{ margin:20px 0 0; max-width:34em; font-size:var(--k-t-chapo); line-height:1.4; letter-spacing:var(--f-serre); text-wrap:pretty; } .k-meta{ margin:18px 0 0; padding:0; list-style:none; display:flex; flex-wrap:wrap; gap:6px 18px; font-size:var(--k-t-petit); line-height:20px; letter-spacing:0; color:var(--k-attenue); } .k-meta{ align-items:center; } .k-meta a{ color:var(--f-texte); text-underline-offset:3px; display:inline-flex; align-items:center; min-height:44px; } @media (min-width: 1000px){ .k-couv{ padding:200px 0 24px; min-height:min(92svh, 900px); display:flex; align-items:flex-end; } .k-couv-grille{ grid-template-columns:minmax(0,1fr) 420px; gap:64px; } } /* La tete des pages sur le bleu au telephone (09/10/2026, audit telephone du 8 octobre, lot 7) : - Constat 220 : le premier texte tombait a 105 px du haut sur le bleu (fil d'Ariane), a 95 ou 97 px sur la methodologie, A propos et le calculateur. La couverture part a 104 px au lieu de 112 : le fil tombe a 97 px, comme sur la scene. Le rapport d'exemple garde sa propre valeur (88 px, p-rapport.css 13), qui fait entrer le bouton de telechargement dans le premier ecran. - Constat 217 : le lisere Klein de 3 px du haut de page (bordure du corps) etait recouvert par l'image de la couverture, posee 3 px plus haut que la section (top:-3px). Au telephone, l'image part du haut de la section et le lisere se voyait, comme sur la scene. Depuis le 10/10/2026 (demande de Raphael, section 2), le telephone n'a plus de lisere ni de bordure : la section, et son image, partent du haut de l'ecran, et le fil d'Ariane tombe a 94 px au lieu de 97, comme sur la scene. - Constat 112 (et demande de la famille du contact) : le fil d'Ariane passe de 13 a 14 px, interligne 1,4, ses liens gardent 44 px. Sauf le fil coupe des articles (.k-fil--coupe, section 12e), qui reste a 13 px : en 14 px, la page courante passait aux points de suspension sur 13 articles a 393 px au lieu de 6. - Constats 83 et 174 : etiquettes de 13 px (section 1) et interlettrage de .22em au lieu de .3em, celui de la scene (en fin de feuille, section 14, apres les regles qu'il surcharge). */ @media (max-width: 760px){ .k-couv{ padding-top:104px; } .k-couv::before{ top:0; } .k-fil:not(.k-fil--coupe){ font-size:14px; line-height:1.4; } } /* Couverture courte (socle, 30/09/2026) : une seule hauteur pour les pages dont la couverture n'est qu'un titre (calculateur, valorisation, contact, commande, depot, merci, 404, pages legales, liste des analyses). Quatre feuilles de famille la redefinissaient (152, 168, 176 et 184 px) : a 1440, le fil et le titre sautaient d'une page a l'autre. Au telephone, la couverture de base vaut pour toutes. */ @media (min-width: 1000px){ .k-couv.k-couv--courte{ display:block; min-height:0; padding:176px 0 16px; } } /* ========================================================================= 7. SECTIONS SUR LE BLEU ------------------------------------------------------------------------- */ .k-section{ padding-top:var(--k-section); } .k-tete{ display:grid; gap:14px; margin-bottom:28px; max-width:760px; } .k-tete .k-etiquette{ margin:0; } .k-numero{ font-size:var(--k-t-etiquette); font-weight:500; letter-spacing:.28em; color:var(--k-azur); margin-right:10px; } .k-titre-section{ margin:0; font-size:var(--k-t-section); line-height:1.08; font-weight:500; letter-spacing:-0.03em; text-wrap:balance; } .k-lede{ margin:0; max-width:36em; font-size:var(--k-t-chapo); line-height:1.4; letter-spacing:var(--f-serre); color:var(--f-texte); text-wrap:pretty; } @media (min-width: 761px){ .k-tete{ margin-bottom:40px; gap:18px; } } /* Grille des bulles : une colonne au telephone, douze a partir de 900 px */ .k-grille{ display:grid; gap:var(--k-ecart); grid-template-columns:minmax(0,1fr); align-items:start; } .k-grille--etire{ align-items:stretch; } @media (min-width: 640px){ .k-grille--2{ grid-template-columns:repeat(2, minmax(0,1fr)); } } @media (min-width: 900px){ .k-grille{ grid-template-columns:repeat(12, minmax(0,1fr)); } .k-c3{ grid-column:span 3; } .k-c4{ grid-column:span 4; } .k-c5{ grid-column:span 5; } .k-c6{ grid-column:span 6; } .k-c7{ grid-column:span 7; } .k-c8{ grid-column:span 8; } .k-c12{ grid-column:1 / -1; } } /* ========================================================================= 8. LA BULLE BLANCHE ET SES VARIANTES ------------------------------------------------------------------------- */ .k-bulle{ position:relative; min-width:0; background:var(--k-blanc); color:var(--k-encre); border-radius:var(--k-r-bulle); padding:var(--k-pad-bulle); display:flex; flex-direction:column; gap:12px; } .k-bulle > *{ margin:0; } .k-bulle-etiquette{ display:flex; align-items:center; gap:10px; font-size:var(--k-t-etiquette); line-height:1.3; font-weight:500; letter-spacing:.3em; text-transform:uppercase; color:var(--k-klein); } .k-bulle-titre{ font-size:var(--k-t-bulle); line-height:1.2; font-weight:500; letter-spacing:var(--k-serre); text-wrap:balance; } /* Le texte va jusqu'au bord de sa bulle (04/10/2026, point 5 de Raphael : « les textes doivent aller au bout des cases, sinon ca fait du vide ») : plus de mesure en em dans une bulle (44 et 48 em laissaient jusqu'a 650 px de blanc a droite des bulles larges). La mesure se tient par la largeur de la bulle (section 14). */ .k-bulle-texte{ font-size:var(--k-t-texte); line-height:1.5; color:var(--k-encre); text-wrap:pretty; } .k-bulle-note{ font-size:var(--k-t-petit); line-height:1.45; color:var(--k-gris); letter-spacing:0; text-wrap:pretty; } .k-bulle a:not(.f-bouton){ color:var(--k-klein); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; } .k-bulle a:not(.f-bouton):hover{ text-decoration-thickness:2px; } /* Puce : approche, sens d'un retraitement */ .k-puce{ display:inline-flex; align-items:center; gap:6px; align-self:flex-start; min-height:28px; padding:4px 12px; border-radius:999px; background:var(--k-teinte); color:var(--k-klein); font-size:13px; line-height:1.2; font-weight:500; letter-spacing:0; white-space:nowrap; } .k-puce svg{ width:14px; height:14px; flex:none; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; } /* Bulle chiffree : un nombre, une ligne. Le nombre est le message. */ .k-chiffre{ display:block; font-size:var(--k-t-chiffre); line-height:.95; font-weight:500; letter-spacing:var(--k-serre); color:var(--k-klein); white-space:nowrap; font-variant-numeric:tabular-nums lining-nums; } .k-chiffre--long{ font-size:clamp(44px, 2vw + 36px, 68px); letter-spacing:var(--k-serre); } .k-chiffre-unite{ font-size:.5em; letter-spacing:var(--k-serre); margin-left:.12em; } .k-chiffre-legende{ font-size:18px; line-height:1.35; font-weight:500; letter-spacing:var(--f-serre); color:var(--k-encre); text-wrap:balance; max-width:30em; } /* Au telephone, la legende va au bout de sa bulle (05/10/2026) : ni mesure de 30 em, ni balance (socle.css 13 la passe en retour a la ligne simple). */ @media (max-width: 760px){ .k-chiffre-legende{ max-width:none; } } .k-calcul{ display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px; font-size:15px; line-height:1.4; color:var(--k-gris); letter-spacing:0; } .k-calcul b{ font-weight:500; color:var(--k-encre); } /* En-tete de bulle : numero a gauche, puce a droite */ .k-bulle-tete{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px 12px; } .k-bulle-no{ font-size:13px; line-height:1; font-weight:500; letter-spacing:.08em; color:var(--k-klein); } /* Effets chiffres dans une bulle : le cas a gauche, la valeur a droite */ .k-effet{ list-style:none; margin:0; padding:0; display:grid; } .k-effet li{ display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:4px 16px; padding:12px 0; border-top:1px solid var(--k-trait); } .k-effet-cas{ font-size:15px; line-height:1.4; color:var(--k-encre); letter-spacing:0; } .k-effet-val{ font-size:24px; line-height:1.1; font-weight:500; color:var(--k-klein); white-space:nowrap; text-align:right; letter-spacing:var(--k-serre); } .k-effet-val small{ display:block; margin-bottom:2px; font-size:13px; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--k-gris); } @media (max-width: 400px){ .k-effet li{ grid-template-columns:minmax(0,1fr); } .k-effet-val{ text-align:left; } } /* Bulle citation : une phrase, grande */ .k-bulle--citation{ padding-block:32px; } .k-citation{ margin:0; font-size:clamp(24px, 1.6vw + 18px, 40px); line-height:1.15; font-weight:500; letter-spacing:-0.03em; text-wrap:balance; } .k-citation-suite{ color:var(--k-klein); } @media (min-width: 761px){ .k-bulle--citation{ padding:48px; } } /* Liste dans une bulle : filets fins, pas de puces */ .k-liste{ list-style:none; margin:0; padding:0; display:grid; } .k-liste > li{ padding:12px 0; border-top:1px solid var(--k-trait); font-size:var(--k-t-texte); line-height:1.4; } .k-liste > li:first-child{ border-top:0; padding-top:4px; } .k-liste > li:last-child{ padding-bottom:0; } .k-liste strong{ font-weight:500; } .k-liste--num{ counter-reset:k; } .k-liste--num > li{ display:grid; grid-template-columns:32px minmax(0,1fr); counter-increment:k; } .k-liste--num > li::before{ content:counter(k, decimal-leading-zero); font-size:13px; font-weight:500; color:var(--k-klein); line-height:1.6; letter-spacing:.06em; } /* Depliant dans une bulle (detail d'un retraitement, formule) */ .k-depli{ border-top:1px solid var(--k-trait); margin-top:auto; } .k-depli > summary{ list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:44px; padding-top:8px; font-size:15px; line-height:1.3; font-weight:500; color:var(--k-klein); letter-spacing:0; } .k-depli > summary::-webkit-details-marker{ display:none; } .k-depli > summary::after{ content:""; width:8px; height:8px; flex:none; margin-right:6px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:translateY(-2px) rotate(45deg); transition:transform .2s var(--k-courbe); } .k-depli[open] > summary::after{ transform:translateY(2px) rotate(-135deg); } .k-depli-corps{ padding:4px 0 2px; display:grid; gap:10px; font-size:15px; line-height:1.5; color:var(--k-encre); } .k-depli-corps p{ margin:0; } .k-formule{ margin:0; padding:14px 16px; border-radius:var(--k-r-petit); background:var(--k-teinte); font-size:14px; line-height:1.55; letter-spacing:0; color:var(--k-encre); } .k-formule span{ display:block; } .k-formule span + span{ padding-left:1.2em; } /* Accordeon de lignes (sept retraitements) : le nom et le sens visibles, le reste replie */ .k-lignes{ display:grid; } .k-ligne{ border-top:1px solid var(--k-trait); } .k-ligne:first-child{ border-top:0; } .k-ligne > summary{ list-style:none; cursor:pointer; display:grid; grid-template-columns:minmax(0,1fr) auto 16px; align-items:center; gap:6px 12px; min-height:56px; padding:8px 0; font-size:var(--k-t-texte); line-height:1.3; font-weight:500; } .k-ligne > summary::-webkit-details-marker{ display:none; } .k-ligne > summary::after{ content:""; width:8px; height:8px; justify-self:center; border-right:2px solid var(--k-klein); border-bottom:2px solid var(--k-klein); transform:translateY(-2px) rotate(45deg); transition:transform .2s var(--k-courbe); } .k-ligne[open] > summary::after{ transform:translateY(2px) rotate(-135deg); } .k-ligne p{ margin:0 0 14px; font-size:15px; line-height:1.5; color:var(--k-gris); letter-spacing:0; } @media (max-width: 420px){ .k-ligne > summary{ grid-template-columns:minmax(0,1fr) 16px; } .k-ligne > summary .k-puce{ grid-column:1; grid-row:2; justify-self:start; } .k-ligne > summary::after{ grid-column:2; grid-row:1 / span 2; } } /* Note A a D (incertitudes) */ .k-notes{ display:flex; gap:8px; margin:4px 0; } .k-notes span{ display:grid; place-items:center; width:48px; height:48px; border-radius:var(--k-r-petit); background:var(--k-teinte); color:var(--k-klein); font-size:20px; font-weight:500; } /* Aucune lettre mise en avant : la note depend du dossier, la page n'en suggere aucune. */ /* Sommaire : la premiere bulle de la page */ .k-sommaire{ gap:4px; padding-block:18px; } .k-sommaire .k-bulle-etiquette{ margin-bottom:6px; } .k-sommaire ol{ list-style:none; margin:0; padding:0; display:grid; } .k-sommaire li + li{ border-top:1px solid var(--k-trait); } .k-sommaire a{ display:grid; grid-template-columns:34px minmax(0,1fr) 20px; align-items:center; gap:8px; min-height:48px; color:var(--k-encre) !important; text-decoration:none !important; font-size:16px; line-height:1.25; font-weight:500; } .k-sommaire a span:first-child{ font-size:13px; font-weight:500; letter-spacing:.06em; color:var(--k-klein); } .k-sommaire a .f-pastille{ background:var(--k-teinte); color:var(--k-klein); transition:transform .2s var(--k-courbe), background-color .2s; } @media (hover:hover){ .k-sommaire a:hover .f-pastille{ transform:translateX(3px); background:var(--k-klein); color:var(--k-blanc); } } /* Lien-bulle (a lire ensuite) */ .k-lien-bulle{ display:grid; grid-template-columns:minmax(0,1fr) 20px; align-items:center; gap:16px; min-height:64px; padding:16px 22px; border-radius:var(--k-r-petit); background:var(--k-blanc); color:var(--k-encre); text-decoration:none; font-size:16px; line-height:1.3; font-weight:500; transition:transform .2s var(--k-courbe); } /* Socle (30/09/2026) : la pastille se decale de 3 px au survol, comme celles du sommaire et des cartes d'article. */ .k-lien-bulle .f-pastille{ background:var(--k-teinte); color:var(--k-klein); transition:transform .2s var(--k-courbe), background-color .2s; } .k-lien-bulle:focus-visible{ outline-color:var(--f-texte); } @media (hover:hover){ .k-lien-bulle:hover .f-pastille{ background:var(--k-klein); color:var(--k-blanc); transform:translateX(3px); } } .k-lien-bulle:active{ transform:scale(.99); } /* Questions frequentes : une bulle par question */ .k-faq{ display:grid; gap:8px; } .k-question{ background:var(--k-blanc); color:var(--k-encre); border-radius:var(--k-r-petit); } .k-question > summary{ list-style:none; cursor:pointer; display:grid; grid-template-columns:minmax(0,1fr) 16px; align-items:center; gap:16px; min-height:64px; padding:16px 22px; font-size:17px; line-height:1.3; font-weight:500; } .k-question > summary::-webkit-details-marker{ display:none; } .k-question > summary::after{ content:""; width:9px; height:9px; justify-self:center; border-right:2px solid var(--k-klein); border-bottom:2px solid var(--k-klein); transform:translateY(-2px) rotate(45deg); transition:transform .2s var(--k-courbe); } .k-question[open] > summary::after{ transform:translateY(2px) rotate(-135deg); } .k-question p{ margin:0; padding:0 22px 20px; font-size:16px; line-height:1.5; color:var(--k-gris); } /* Socle (30/09/2026) : un lien dans une reponse prenait le bleu du navigateur (#0000EE) ; il prend celui des liens des bulles. */ .k-question a{ color:var(--k-klein); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; } .k-question a:hover{ text-decoration-thickness:2px; } .k-question :focus-visible{ outline-color:var(--k-klein); outline-offset:-2px; border-radius:var(--k-r-petit); } /* ========================================================================= 9. BANDE MARINE : reservee au seul « contenu du rapport » (les planches de l'exemple de rapport), comme sur l'accueil. Le pont de valeur et la cascade de retraitements, qui y passaient, sont maintenant dans une grande bulle blanche : plus aucune zone sombre au milieu d'une page. Depuis le 04/10/2026, la bande prend le bleu du rapport (#15253E, --k-marine), comme celle de l'accueil, au lieu du marine #03021b : texte #f2eeee 13,3:1, azur 7,3:1. ------------------------------------------------------------------------- */ .k-bande{ margin-top:var(--k-section); padding:64px 0; background:var(--k-marine); color:#f2eeee; } /* Les blancs attenues de la bande, comme sur celle de l'accueil (scene.css, .f-bande--marine) : a 50 %, les numeros des extraits tombaient de 5,3 a 4,9:1 sur le bleu du rapport ; a 62 %, 6,7:1. */ .k-bande{ --f-attenue-50:rgba(255,255,255,.62); --f-attenue-40:rgba(255,255,255,.62); } .k-bande .k-lede{ color:#f2eeee; } .k-bande a{ color:var(--f-texte); text-underline-offset:3px; } @media (min-width: 761px){ .k-bande{ padding:104px 0; } } /* --- Pont de valeur, dans une bulle blanche (schema, sans chiffres) -------- Barres pleines en Klein (les deux valeurs), bleu clair #4F8BE0 pour ce qui s'ajoute (3,4:1 sur blanc), pointille Klein pour ce qui se retranche : le sens est aussi dans le libelle (« moins », « plus »). */ .k-pont{ list-style:none; margin:0; padding:0; display:grid; gap:14px; } .k-pont li{ display:grid; grid-template-columns:minmax(0,1fr); gap:6px; } .k-pont-nom{ font-size:15px; line-height:1.3; letter-spacing:0; color:var(--k-encre); } .k-pont-nom b{ font-weight:500; } .k-pont-piste{ position:relative; height:14px; border-radius:7px; background:var(--k-teinte); } .k-pont-barre{ position:absolute; top:0; bottom:0; border-radius:7px; background:var(--k-clair); } .k-pont-barre--moins{ background:var(--k-blanc); border:1.5px dashed var(--k-klein); } .k-pont-barre--total{ background:var(--k-klein); } @media (min-width: 761px){ .k-pont li{ grid-template-columns:236px minmax(0,1fr); align-items:center; gap:24px; } .k-pont-piste{ height:18px; border-radius:9px; } } .k-postes{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px; } .k-postes li{ padding:8px 14px; border-radius:999px; background:var(--k-teinte); color:var(--k-encre); font-size:14px; line-height:1.3; letter-spacing:0; } /* --- Cascade de retraitements (exemple chiffre), dans une bulle blanche ---- Un vrai tableau ; barres de part et d'autre d'un axe commun : a droite, pleine, en plus ; a gauche, en pointille, en moins. */ .k-cascade{ width:100%; border-collapse:collapse; } .k-cascade caption{ text-align:left; padding:0 0 12px; font-size:var(--k-t-petit); line-height:1.45; color:var(--k-gris); letter-spacing:0; } .k-cascade th, .k-cascade td{ padding:0; text-align:left; font-weight:400; vertical-align:middle; } .k-cascade tr{ display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"nom val" "barre barre" "com com"; gap:6px 16px; padding:14px 0; border-top:1px solid var(--k-trait); } .k-cascade .k-cascade-nom{ grid-area:nom; font-size:16px; line-height:1.3; font-weight:500; color:var(--k-encre); } .k-cascade .k-cascade-val{ grid-area:val; font-size:16px; line-height:1.3; font-weight:500; white-space:nowrap; text-align:right; color:var(--k-encre); } .k-cascade .k-cascade-val small{ display:block; font-size:13px; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--k-klein); } .k-cascade .k-cascade-barre{ grid-area:barre; } .k-cascade .k-cascade-com{ grid-area:com; font-size:14px; line-height:1.4; color:var(--k-gris); letter-spacing:0; } .k-axe{ position:relative; height:12px; } .k-axe::before{ content:""; position:absolute; left:50%; top:-4px; bottom:-4px; width:1px; background:rgba(11,29,54,.35); } .k-axe i{ position:absolute; top:0; bottom:0; border-radius:6px; } .k-axe .k-plus{ left:50%; background:var(--k-clair); } .k-axe .k-moins{ right:50%; background:transparent; border:1.5px dashed var(--k-klein); } .k-cascade tr.k-cascade-total{ border-top:1px solid var(--k-encre); } .k-cascade tr.k-cascade-total:first-child{ border-top:0; } .k-cascade tr.k-cascade-total .k-cascade-nom, .k-cascade tr.k-cascade-total .k-cascade-val{ font-size:20px; letter-spacing:var(--f-serre); } .k-cascade tr.k-cascade-total:last-child .k-cascade-val{ color:var(--k-klein); } @media (min-width: 900px){ .k-cascade tr{ grid-template-columns:300px minmax(0,1fr) 150px; grid-template-areas:"nom barre val" "com barre val"; column-gap:32px; align-items:center; } .k-cascade .k-cascade-com{ align-self:start; } } /* Chiffres du resultat, sous la cascade */ .k-resultat{ display:grid; gap:var(--k-ecart); } @media (min-width: 761px){ .k-resultat{ grid-template-columns:repeat(2, minmax(0,1fr)); } } /* ========================================================================= 10. OFFRE (une bulle, trois montants), APPEL FINAL ------------------------------------------------------------------------- */ .k-offre-prix{ list-style:none; margin:4px 0 0; padding:0; display:grid; } .k-offre-prix li{ display:grid; grid-template-columns:128px minmax(0,1fr); align-items:baseline; gap:4px 16px; padding:14px 0; border-top:1px solid var(--k-trait); } @media (min-width: 761px){ .k-offre-prix li{ grid-template-columns:184px minmax(0,1fr); gap:4px 24px; } } .k-offre-prix li:first-child{ border-top:0; padding-top:0; } .k-offre-montant{ font-size:clamp(34px, 1.6vw + 28px, 48px); line-height:1; font-weight:500; letter-spacing:var(--k-serre); color:var(--k-encre); white-space:nowrap; } .k-offre-montant--mot{ font-size:clamp(26px, 1vw + 22px, 36px); letter-spacing:-0.03em; } .k-offre-pour{ font-size:15px; line-height:1.35; color:var(--k-gris); letter-spacing:0; } .k-offre-pour b{ display:block; font-weight:500; color:var(--k-encre); font-size:16px; } @media (max-width: 400px){ .k-offre-prix li{ grid-template-columns:minmax(0,1fr); } } .k-appel{ padding:var(--k-section) 0 calc(var(--k-section) + 16px); } .k-appel .k-titre-affiche{ font-size:clamp(34px, 2.6vw + 24px, 64px); max-width:15em; } .k-appel .f-boutons .f-bouton{ flex:0 1 auto; } @media (max-width: 760px){ .k-appel .f-boutons .f-bouton{ flex:1 1 100%; } } /* ========================================================================= 11. LE PIED SUR LE BLEU (surcharges du socle) Meme balisage que l'accueil. Sur le bleu : un voile marine un peu plus doux (55 % a 48 px), des textes seconds a 80 % de blanc, un conteneur de pages interieures, et des cibles de 44 px au toucher sans changer la mise en page sur ordinateur. ------------------------------------------------------------------------- */ /* 04/10/2026 : le voile prend la couleur des voiles de l'accueil (--k-voile). */ .f3-pied{ padding:32px 0 24px; background:linear-gradient(to bottom, rgba(var(--k-voile),0), rgba(var(--k-voile),.55) 48px); } .f3-pied .k-conteneur{ width:min(100% - 2*var(--k-gouttiere), 1360px); } .f3-pied-note{ color:rgba(255,255,255,.8); } .f3-pied-base{ color:rgba(255,255,255,.8); } .f3-pied a:focus-visible, .f3-pied button:focus-visible{ border-radius:0; } @media (max-width: 760px){ .f3-pied{ padding:32px 0 20px; } .f3-pied-note{ color:var(--f-texte); } .f3-pied-base{ color:var(--f-texte); } } /* Ecrans tactiles larges : la cible de 44 px, sans passer les liens en bloc. */ @media (min-width: 761px) and (pointer: coarse){ .f3-pied-col a, .f3-pied-col .foot-bouton{ display:inline-flex; } } /* Sous 380 px, le socle passe les deux colonnes en 1fr / 1,2fr et laisse les liens se couper n'importe ou ; les pages interieures gardent leur mise en page du telephone jusqu'a 360 px, puis la leur (ci-dessous). */ @media (max-width: 380px){ .f3-pied-grille{ grid-template-columns:auto minmax(0,1fr); column-gap:14px; } .f3-pied-col a, .f3-pied-col .foot-bouton{ white-space:nowrap; overflow-wrap:normal; padding-block:0; } } /* 320 px : les deux colonnes de liens en 13 px (Conditions generales de vente, 157 px ; Echanger sur votre projet) tenaient juste ; le nom du pied en 18 px .2em faisait 300 px. */ @media (max-width: 360px){ .f3-pied-nom .f-nom{ font-size:15px; letter-spacing:.16em; } .f3-pied-grille{ column-gap:10px; } .f3-pied-col a, .f3-pied-col .foot-bouton{ font-size:12.5px; white-space:normal; } } /* DM Sans (30/09/2026) : a 375, l'adresse de contact en 13 px sortait de 3 px de sa colonne ; en 12,5 px, comme a 320, elle tient sur une ligne. */ @media (min-width: 361px) and (max-width: 400px){ .f3-pied-col a[href^="mailto:"]{ font-size:12.5px; } } /* ========================================================================= 12. LES COMPOSANTS DES AUTRES FAMILLES (socle du 30/09/2026) Ce que les deux prototypes ne couvraient pas, dessine dans leur systeme : bulles blanches sur le bleu, rayon 20 (12 pour les petites), aucune ombre ni filet autour, DM Sans, encre #0B1D36, accent Klein #002FA7, azur #88B6EB sur le bleu (#7FB0E8 jusqu'au 04/10/2026). Page de demonstration : _essai-composants.html. Les classes existantes que pilotent artis.js et les scripts des pages (dr-champ, dr-champ-erreur, dr-case, dr-piege, dr-erreur, dr-attente, dr-mention, aide, facultatif, rv-fond, rv-boite, rv-fermer...) sont habillees telles quelles : les pages gardent leurs id, name et classes. Contrastes (calcules, formule WCAG, couleurs pleines) : encre 16,9:1, gris 7,1:1 et Klein 10,7:1 sur blanc ; rouge d'erreur #A8321C (celui du site) 6,7:1 sur blanc et 5,9:1 sur son fond ; trait bas des champs 3,7:1 sur la teinte (critere 1.4.11) ; texte du champ 14,9:1 sur la teinte. ------------------------------------------------------------------------- */ :root{ --k-erreur: #A8321C; /* le rouge d'erreur du site (artis.css) */ --k-erreur-fond: rgba(168,50,28,.08); --k-champ-fond: var(--k-teinte); /* #edf1fa */ --k-champ-trait: rgba(11,29,54,.55); /* trait bas des champs, 3,7:1 sur la teinte */ --k-mesure: 34em; /* lecture longue : 68 signes par ligne environ */ } /* --- 12a. La grande bulle ------------------------------------------------ Une bulle qui porte un formulaire, une lecture longue ou un tableau : plus d'air que la bulle d'idee. */ .k-bulle--large{ padding:28px 22px; gap:20px; } @media (min-width: 761px){ .k-bulle--large{ padding:48px 56px; gap:24px; } } @media (max-width: 360px){ .k-bulle--large{ padding:24px 18px; } } /* --- 12b. Le formulaire ----------------------------------------------------
dans une .k-bulle--large (ou dans la fenetre de dialogue). Une colonne ; deux a partir de 761 px pour les champs marques .k-demi. Les libelles au-dessus, l'aide dessous, l'erreur sous l'aide. Champs pleins de la teinte, trait bas a 3,7:1, focus Klein. */ .k-formulaire{ display:grid; gap:22px; margin:0; color:var(--k-encre); letter-spacing:0; } .k-formulaire > *{ margin:0; } .k-formulaire :focus-visible{ outline:2px solid var(--k-klein); outline-offset:2px; } @media (min-width: 761px){ .k-formulaire--deux{ grid-template-columns:repeat(2, minmax(0,1fr)); column-gap:24px; } .k-formulaire--deux > *{ grid-column:1 / -1; } .k-formulaire--deux > .k-demi{ grid-column:auto; } } .k-formulaire .dr-champ, .k-champ{ display:grid; gap:8px; align-content:start; min-width:0; } .k-formulaire .dr-champ > label, .k-champ > label, .k-formulaire legend{ font-size:15px; line-height:1.35; font-weight:500; color:var(--k-encre); letter-spacing:0; } .k-formulaire .facultatif{ font-weight:400; color:var(--k-gris); } .k-formulaire input:is([type="text"],[type="email"],[type="tel"],[type="number"],[type="url"],[type="search"],[type="password"],[type="date"]), .k-formulaire select, .k-formulaire textarea{ display:block; width:100%; min-width:0; min-height:52px; margin:0; padding:14px 16px; border:0; border-radius:var(--k-r-petit) var(--k-r-petit) 4px 4px; background:var(--k-champ-fond); color:var(--k-encre); box-shadow:inset 0 -1.5px 0 var(--k-champ-trait); font:400 16px/1.4 var(--f-police); letter-spacing:0; -webkit-appearance:none; appearance:none; transition:background-color .2s var(--k-courbe), box-shadow .2s var(--k-courbe); } .k-formulaire textarea{ min-height:128px; resize:vertical; } .k-formulaire select{ padding-right:48px; cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1.5l6 6 6-6' fill='none' stroke='%23002FA7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 18px center; background-size:14px 9px; } .k-formulaire ::placeholder{ color:var(--k-gris); opacity:1; } .k-formulaire input:is([type="text"],[type="email"],[type="tel"],[type="number"],[type="url"],[type="search"],[type="password"],[type="date"]):focus, .k-formulaire select:focus, .k-formulaire textarea:focus{ background-color:var(--k-blanc); box-shadow:inset 0 0 0 2px var(--k-klein); outline:none; } @media (hover:hover){ .k-formulaire input:is([type="text"],[type="email"],[type="tel"],[type="number"],[type="url"],[type="search"],[type="password"],[type="date"]):hover:not(:focus), .k-formulaire select:hover:not(:focus), .k-formulaire textarea:hover:not(:focus){ box-shadow:inset 0 -2px 0 var(--k-encre); } } .k-formulaire .aide, .k-aide{ display:block; font-size:14px; line-height:1.45; color:var(--k-gris); letter-spacing:0; text-wrap:pretty; } .k-formulaire .aide a, .k-aide a{ color:var(--k-klein); text-underline-offset:3px; } /* Erreurs : le texte sous le champ (rempli par le script de la page), le trait du champ en rouge, epaissi ; le message general dans un encart. */ .k-formulaire .dr-champ-erreur{ margin:0; font-size:14px; line-height:1.4; font-weight:500; color:var(--k-erreur); letter-spacing:0; } .k-formulaire .dr-champ-erreur:empty{ display:none; } .k-formulaire [aria-invalid="true"]:is(input, select, textarea){ box-shadow:inset 0 -2.5px 0 var(--k-erreur); } .k-formulaire [aria-invalid="true"]:is(input, select, textarea):focus{ box-shadow:inset 0 0 0 2px var(--k-erreur); } .k-formulaire .dr-case input[aria-invalid="true"]{ outline:2px solid var(--k-erreur); outline-offset:2px; } .k-formulaire .dr-case + .dr-champ-erreur{ margin-top:-16px; padding-left:34px; } .k-formulaire .dr-erreur, .k-message--erreur{ margin:0; padding:14px 16px; border-radius:var(--k-r-petit); background:var(--k-erreur-fond); color:var(--k-erreur); font-size:15px; line-height:1.45; font-weight:500; letter-spacing:0; } .k-formulaire .dr-erreur:empty{ display:none; } .k-message--succes{ display:grid; grid-template-columns:28px minmax(0,1fr); gap:12px; align-items:start; margin:0; padding:16px 18px; border-radius:var(--k-r-petit); background:var(--k-teinte); color:var(--k-encre); font-size:16px; line-height:1.45; letter-spacing:0; } .k-message--succes::before{ content:""; width:28px; height:28px; border-radius:50%; background:var(--k-klein) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='11' viewBox='0 0 14 11'%3E%3Cpath d='M1.5 5.5l3.8 3.8L12.5 1.8' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px 11px no-repeat; } .k-message--succes b{ display:block; font-weight:500; } .k-formulaire .dr-attente{ margin:0; font-size:14px; line-height:1.45; color:var(--k-gris); letter-spacing:0; } .k-formulaire .dr-mention{ margin:0; font-size:13px; line-height:1.5; color:var(--k-gris); letter-spacing:0; text-wrap:pretty; } .k-formulaire .dr-mention a, .k-formulaire .dr-case a{ color:var(--k-klein); text-underline-offset:3px; } .k-formulaire .dr-indice{ margin:-12px 0 0; font-size:13px; line-height:1.45; color:var(--k-gris); letter-spacing:0; } /* Le pot de miel : hors de l'ecran, jamais visible, jamais atteint au clavier. */ .dr-piege{ position:absolute !important; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden; } /* Cases a cocher et boutons radio : dessines, 22 px, dans une cible de 44. */ .k-formulaire .dr-case, .k-option{ display:grid; grid-template-columns:22px minmax(0,1fr); column-gap:12px; align-items:start; min-height:44px; padding:11px 0; cursor:pointer; font-size:15px; line-height:1.45; color:var(--k-encre); letter-spacing:0; } .k-formulaire .dr-case input, .k-option input{ -webkit-appearance:none; appearance:none; flex:none; width:22px; height:22px; margin:0; cursor:pointer; border-radius:6px; background:var(--k-blanc); box-shadow:inset 0 0 0 1.5px var(--k-champ-trait); transition:background-color .15s var(--k-courbe), box-shadow .15s var(--k-courbe); } .k-formulaire .dr-case input[type="radio"], .k-option input[type="radio"]{ border-radius:50%; } .k-formulaire .dr-case input:checked, .k-option input:checked{ background:var(--k-klein) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='11' viewBox='0 0 14 11'%3E%3Cpath d='M1.5 5.5l3.8 3.8L12.5 1.8' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px 10px no-repeat; box-shadow:none; } .k-formulaire .dr-case input[type="radio"]:checked, .k-option input[type="radio"]:checked{ background:var(--k-blanc); box-shadow:inset 0 0 0 1.5px var(--k-klein), inset 0 0 0 6px var(--k-blanc), inset 0 0 0 11px var(--k-klein); } .k-formulaire .dr-case input:focus-visible, .k-option input:focus-visible{ outline:2px solid var(--k-klein); outline-offset:3px; } .k-choix{ margin:0; padding:0; border:0; min-width:0; display:grid; gap:0; } .k-choix legend{ padding:0; margin:0 0 4px; } .k-choix--ligne{ grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); column-gap:16px; } .k-choix--ligne legend, .k-choix .aide, .k-choix .dr-champ-erreur{ grid-column:1 / -1; } /* Le champ de fichier : le bouton du navigateur prend l'allure d'un bouton clair ; la liste des fichiers retenus suit (ul.dp-liste ou .k-fichiers). */ .k-formulaire input[type="file"]{ display:block; width:100%; min-width:0; padding:10px; border-radius:var(--k-r-petit) var(--k-r-petit) 4px 4px; background:var(--k-champ-fond); box-shadow:inset 0 -1.5px 0 var(--k-champ-trait); font:400 15px/1.4 var(--f-police); color:var(--k-gris); letter-spacing:0; cursor:pointer; } .k-formulaire input[type="file"]::file-selector-button{ min-height:44px; margin-right:14px; padding:0 18px; border:0; border-radius:8px; cursor:pointer; background:var(--k-encre); color:var(--k-blanc); font:400 15px/1 var(--f-police); letter-spacing:var(--f-serre); } .k-formulaire input[type="file"]::-webkit-file-upload-button{ min-height:44px; margin-right:14px; padding:0 18px; border:0; border-radius:8px; cursor:pointer; background:var(--k-encre); color:var(--k-blanc); font:400 15px/1 var(--f-police); letter-spacing:var(--f-serre); } @media (hover:hover){ .k-formulaire input[type="file"]:hover::file-selector-button{ background:var(--k-encre-survol); } } .k-formulaire .dp-liste, .k-fichiers{ list-style:none; margin:0; padding:0; display:grid; gap:6px; } .k-formulaire .dp-liste:empty, .k-fichiers:empty{ display:none; } .k-formulaire .dp-liste li, .k-fichiers li{ display:flex; justify-content:space-between; gap:12px; padding:10px 14px; border-radius:10px; background:var(--k-teinte); font-size:14px; line-height:1.35; color:var(--k-encre); letter-spacing:0; overflow-wrap:anywhere; } /* Le bouton d'envoi : le bouton sombre du socle ; desactive pendant l'envoi (disabled) ou tant qu'une condition manque (aria-disabled). */ .k-formulaire .f-bouton{ justify-self:start; } @media (max-width: 760px){ .k-formulaire .f-bouton{ justify-self:stretch; justify-content:center; } } .k-page .f-bouton:disabled, .k-page .f-bouton[aria-disabled="true"]{ opacity:.45; cursor:not-allowed; transform:none; } @media (hover:hover){ .k-page .f-bouton-sombre:disabled:hover, .k-page .f-bouton-sombre[aria-disabled="true"]:hover{ background:var(--f-noir); } } /* --- 12c. La lecture longue (pages juridiques) ------------------------------ Une seule grande bulle blanche, le texte en entier, sans decoupe ; la mesure tenue a 68 signes environ ; titres h2 et h3, listes, tableaux, code. Le sommaire, s'il y en a un, est une .k-sommaire a cote ou au-dessus. */ .k-lecture{ display:block; font-size:17px; line-height:1.6; color:var(--k-encre); letter-spacing:0; } .k-lecture > *{ max-width:var(--k-mesure); } .k-lecture > .k-tableau-defile, .k-lecture > .k-tableau{ max-width:none; } .k-lecture p{ text-wrap:pretty; } .k-lecture > * + *{ margin-top:16px; } .k-lecture h2{ margin:48px 0 0; font-size:clamp(24px, .8vw + 20px, 30px); line-height:1.2; font-weight:500; letter-spacing:var(--k-serre); text-wrap:balance; scroll-margin-top:110px; } .k-lecture h3{ margin:32px 0 0; font-size:clamp(18px, .3vw + 17px, 20px); line-height:1.3; font-weight:500; letter-spacing:-0.01em; text-wrap:balance; scroll-margin-top:110px; } .k-lecture > h2:first-child, .k-lecture > h3:first-child{ margin-top:0; } .k-lecture h2 + *, .k-lecture h3 + *{ margin-top:12px; } .k-lecture strong, .k-lecture b{ font-weight:500; } .k-lecture a{ color:var(--k-klein); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; overflow-wrap:anywhere; } .k-lecture a:hover{ text-decoration-thickness:2px; } .k-lecture ul, .k-lecture ol{ margin-bottom:0; padding-left:0; list-style:none; display:grid; gap:8px; } .k-lecture ul > li{ position:relative; padding-left:22px; } .k-lecture ul > li::before{ content:""; position:absolute; left:2px; top:.72em; width:7px; height:7px; border-radius:50%; background:var(--k-klein); } .k-lecture ol{ counter-reset:k-l; } .k-lecture ol > li{ position:relative; padding-left:34px; counter-increment:k-l; } .k-lecture ol > li::before{ content:counter(k-l, decimal-leading-zero); position:absolute; left:0; top:.2em; font-size:13px; font-weight:500; letter-spacing:.06em; color:var(--k-klein); } .k-lecture code{ padding:1px 6px; border-radius:6px; background:var(--k-teinte); font:400 .88em/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; overflow-wrap:anywhere; } .k-lecture [id]{ scroll-margin-top:110px; } @media (max-width: 760px){ .k-lecture{ font-size:16px; } .k-lecture h2{ margin-top:40px; } } /* --- 12d. Le tableau chiffre ------------------------------------------------- Dans une bulle, un vrai . Au telephone il defile horizontalement dans sa bulle (.k-tableau-defile, tabindex="0", role="group", aria-label), jamais dans la page. Chiffres tabulaires cales a droite ; la valeur centrale en Klein ; un degrade de la teinte au bord droit dit qu'il reste des colonnes (il s'efface en fin de defilement). */ .k-tableau{ min-width:0; } .k-tableau-defile{ container-type:inline-size; max-width:100%; overflow-x:auto; overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch; border-radius:4px; background: linear-gradient(to left, var(--k-blanc) 40%, rgba(255,255,255,0)) right center / 32px 100% no-repeat local, linear-gradient(to left, var(--k-teinte), rgba(237,241,250,0)) right center / 20px 100% no-repeat scroll; } .k-tableau-defile:focus-visible{ outline:2px solid var(--k-klein); outline-offset:4px; } .k-tableau table, table.k-tableau-table{ width:100%; min-width:540px; border-collapse:collapse; font-size:15px; line-height:1.35; letter-spacing:0; color:var(--k-encre); font-variant-numeric:tabular-nums lining-nums; } /* Un tableau a deux colonnes tient dans la bulle au telephone : le plancher de 540 px le faisait defiler et cachait toute la colonne des valeurs (controle final du 03/10/2026, fiscalite du fonds et camping). */ .k-tableau table:not(:has(tr > :nth-child(3))){ min-width:0; } @media (max-width: 760px){ .k-tableau table:not(:has(tr > :nth-child(3))) :is(th, td){ white-space:normal; } } .k-tableau caption{ caption-side:top; max-width:100cqw; text-align:left; padding:0 0 12px; font-size:var(--k-t-petit); line-height:1.45; color:var(--k-gris); } .k-tableau th, .k-tableau td{ padding:12px 14px; text-align:left; vertical-align:baseline; } .k-tableau th:first-child, .k-tableau td:first-child{ padding-left:0; } .k-tableau th:last-child, .k-tableau td:last-child{ padding-right:0; } .k-tableau thead th{ padding-top:0; font-size:12px; line-height:1.3; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--k-gris); white-space:nowrap; border-bottom:1px solid var(--k-encre); } .k-tableau tbody tr + tr > *{ border-top:1px solid var(--k-trait); } .k-tableau tbody th{ font-weight:500; } .k-tableau .k-nombre, .k-tableau td.k-nombre, .k-tableau th.k-nombre{ text-align:right; white-space:nowrap; } .k-tableau strong{ font-weight:500; color:var(--k-klein); } .k-tableau tfoot td, .k-tableau tfoot th{ border-top:1px solid var(--k-encre); font-weight:500; } .k-tableau-note{ margin:0; font-size:var(--k-t-petit); line-height:1.45; color:var(--k-gris); letter-spacing:0; } /* --- 12e. Le fil d'Ariane ---------------------------------------------------- .k-fil (section 6, dans la couverture) : liens de 44 px de haut au toucher, la page courante en aria-current, le BreadcrumbList en JSON-LD a cote. Hors couverture (pages courtes, formulaires), .k-fil--seul le pose au-dessus du titre avec la meme marge que la couverture. Avec .k-fil--coupe, au telephone, une page courante au titre long se coupe par des points de suspension plutot que de passer a la ligne (sur option : les deux prototypes gardent leur fil tel quel). Audit du 03/10 (REND-3) : sans largeur propre, la page courante comptait son titre entier (299 a 319 px sur une ligne) dans la largeur minimale du fil, et la colonne de la couverture s'elargissait d'autant a 320 px (Chromium et WebKit) ; width:0 la ramene a 6em, la place restante de la ligne lui revient (flex). */ .k-fil--seul{ margin:0 0 8px; } @media (max-width: 760px){ .k-fil--coupe li[aria-current]{ flex:1 1 0; width:0; min-width:6em; display:block; overflow:hidden; line-height:44px; white-space:nowrap; text-overflow:ellipsis; } } /* --- 12f. Les filtres par theme (liste des analyses) --------------------------- Des pilules sur le bleu :