/* ============================================================= WizeFile - Composants Construits sur les jetons de charte.css, a charger apres lui. Aucune couleur en dur ici : tout passe par une variable. ============================================================= */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; } /* La barre de defilement etait reglee DEUX FOIS dans ce fichier : ici et 3 290 lignes plus bas. Le second bloc gagnait sur toute la ligne, memes selecteurs, meme specificite, position plus basse : les six regles ecrites ici n ont jamais rien fait. Retirees le 20/08/2026. Une seule declaration survivait vraiment, celle posee sur "*", parce qu elle ne visait pas la meme chose que le "html" du bloc du bas : les barres des blocs qui defilent restaient de la couleur d avant pendant que celle de la page avait change. Elle est reprise en bas, avec la bonne couleur. Tout le reglage vit desormais au meme endroit, sous le titre "Barre de defilement, variante D". */ /* Fond de page, motif C choisi le 09/08/2026, couleurs au niveau 4 et points au niveau 2,5 sur l'echelle de "_fonds.html". Constat de depart : le fond etait un aplat unique, sans aucune texture, et les cartes s'en detachaient de 1.06 a 1.20 de contraste seulement. Sur un aplat, une carte flotte. Deux choses se superposent, et elles ne servent pas a la meme : - deux halos tres dilues, un violet a gauche et un lime a droite, les deux couleurs de la charte et rien d'autre. Ils se posent en haut de l'ecran, la ou le visiteur arrive, et s'eteignent avant le premier contenu ; - une grille de points d'un pixel tous les 22 px, qui donne un plan au reste de la page. Sans elle, tout ce qui est sous la ligne de flottaison retombait a l'aplat. Les trois forces vivent dans les variables ci-dessous, c'est le seul endroit a toucher pour les regler. Les niveaux se comparent en vraie page dans "_fonds.html". Ecrit en degrades CSS, donc : aucun fichier a telecharger, aucune requete, aucun octet. "background-attachment: fixed" garde les halos en haut de l'ecran et non en haut du document, sinon ils disparaissent des le premier defilement. "color-mix" fait le melange avec le fond a la place de nous : le fond suit donc le theme sans qu'aucune valeur soit ecrite deux fois. Un navigateur qui ne le connait pas ignore la declaration et retrouve l'aplat d'avant, ce qui ne casse rien. */ body { --fond-violet: 20%; /* force du halo violet, niveau 4 */ --fond-lime: 23%; /* force du halo lime, niveau 4 */ --fond-points: .5; /* force de la grille de points, niveau 2,5 */ background-color: var(--bg); background-image: radial-gradient(58% 40% at 10% 0%, color-mix(in srgb, var(--violet) var(--fond-violet), transparent) 0%, transparent 72%), radial-gradient(48% 36% at 92% 4%, color-mix(in srgb, var(--lime) var(--fond-lime), transparent) 0%, transparent 72%), radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--border-fort) calc(var(--fond-points) * 100%), transparent) 1px, transparent 0); background-size: auto, auto, 22px 22px; background-repeat: no-repeat, no-repeat, repeat; background-attachment: fixed, fixed, fixed; color: var(--ink); font-family: var(--f-texte); font-size: var(--t-m); line-height: 1.65; -webkit-font-smoothing: antialiased; min-height: 100vh; display: flex; flex-direction: column; } /* L'en-tete et le pied sont opaques et masqueraient les halos par un aplat net. Ils deviennent transparents pour les laisser passer. L'en-tete est colle en haut : sans le flou, le contenu qui defile dessous se lirait au travers. */ .entete { background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(10px); } h1, h2, h3, .titre { font-family: var(--f-titre); letter-spacing: -.02em; line-height: 1.2; } h1 { font-size: clamp(var(--t-2xl), 4.4vw, var(--t-4xl)); font-weight: 700; } h2 { font-size: clamp(var(--t-xl), 2.6vw, var(--t-2xl)); font-weight: 600; } h3 { font-size: var(--t-l); font-weight: 600; } p { text-wrap: pretty; } a { color: var(--violet); text-underline-offset: 3px; } a:hover { color: var(--violet-fonce); } /* IBM Plex Mono n'existe qu'en 500 et 600 sur le site : sans cette graisse par defaut, le navigateur en fabriquerait une fausse. */ /* overflow-wrap : une chaine technique sans espace (une charge de QR code wifi, une adresse) ne se coupe nulle part et poussait la page entiere en debordement horizontal sur telephone. */ .mono { font-family: var(--f-mono); font-weight: 500; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; } .discret { color: var(--ink-2); } .menu-fin { color: var(--ink-3); font-size: var(--t-xs); } :focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; border-radius: 4px; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* L'attribut hidden vaut "display: none" dans la feuille du navigateur, avec la meme specificite qu'une simple classe. Toute classe qui pose un display le battait donc, la feuille de l'auteur passant apres : ".reglages { display: flex }" rendait visible un bloc marque hidden. Concretement, chaque page d'outil affichait ses reglages avant meme qu'un fichier soit choisi. Le !important est ici le bon outil : un element marque hidden doit etre cache, sans exception. */ [hidden] { display: none !important; } .page { width: 100%; max-width: var(--page); margin-inline: auto; padding-inline: 24px; } .etroit { max-width: var(--etroit); margin-inline: auto; } .pile { display: flex; flex-direction: column; gap: var(--e-3); } .ligne { display: flex; gap: var(--e-3); flex-wrap: wrap; align-items: center; } /* Rythme des sections. Remplace les marges en dur qui vivaient dans les attributs style du HTML : le rythme du site entier se regle desormais ici, et non dans 29 fichiers un par un. */ .section { margin-top: var(--e-7); } .section > h2 { margin-bottom: var(--e-1); } .section > .menu-fin { margin-bottom: var(--e-4); } /* ---- En-tete -------------------------------------------------- */ .entete { border-bottom: 1px solid var(--border); background: var(--bg); position: sticky; top: 0; z-index: 20; /* ETAT DE DEPART EXPLICITE, pose le 25/08/2026 avec la transition de l arrondi (voir plus bas). Une transition ne peut interpoler que deux valeurs declarees : sans ce zero, l arrondi partait de la valeur initiale du navigateur et sautait quand meme. Le bord lateral est declare transparent pour la meme raison, la capsule posant le sien. */ border-radius: 0; border-inline: 1px solid transparent; } .entete > .page { display: flex; align-items: center; justify-content: space-between; /* RETRAIT VERTICAL RAMENE DE 16 A 6 PX LE 19/08/2026, a la demande : « réduit la hauteur de la barre sans réduire la taille du logo ». C est bien le retrait qui bouge et non le logo : a 56 px de logo, l en-tete faisait 89 px de haut, dont 32 de simple vide au-dessus et au-dessous. Elle tombe a 69 px sans qu un seul element ne retrecisse, le logo restant l element qui donne la hauteur. */ gap: 16px; padding-block: 6px; } /* Le "gap" ne vaut plus 10px ici, et c'est un vrai defaut corrige au renommage. ".marque" est une boite flex, et le nom y est ecrit en deux morceaux, "My" puis un qui porte le violet. Un noeud de texte dans une boite flex devient un element a part entiere : le "gap" s'appliquait donc AUSSI entre les deux moities du nom, qui se lisait « My WizeFile » en deux mots au lieu d'un. Le defaut est anterieur au renommage, la structure etant la meme, mais « My WizeFile » le rend faux : "WizeFile" est aussi le domaine, et le separer invite a le lire seul. Mesure au rendu, pas dans le code. Corrige sans toucher aux pages : le "gap" tombe a zero et l'ecart logo-texte passe sur le logo lui-meme. */ .marque { display: inline-flex; align-items: center; gap: 0; /* "--t-2xl" et non "--t-m" : voir la retouche du 19\08\2026 sur ".logo-marque", les deux vont ensemble et se remesurent ensemble. */ font-family: var(--f-titre); font-weight: 700; font-size: var(--t-2xl); letter-spacing: -.02em; color: var(--ink); text-decoration: none; } .marque > svg { margin-right: 10px; } .marque span { color: var(--violet); } /* ---- LES DESSINS NE SE SELECTIONNENT PLUS --------------------- Demande de Corentin du 01/09/2026 : « il faut faire en sorte de ne pas pouvoir selectionner les logos sur les differentes pages ». Sur telephone, un appui un peu long sur le pingouin de l en-tete ouvrait la selection du systeme, poignees bleues et menu « Copier / Partager », au lieu de suivre le lien. Le meme geste sur une image lance en plus le glisser-deposer sur ordinateur. Trois proprietes, et les trois sont necessaires : "user-select" coupe la selection du texte, "-webkit-touch-callout" coupe le menu long-appui d iOS, qui lui est independant, et "-webkit-user-drag" coupe le glisser. Elles ne visent QUE des dessins decoratifs : le texte de la page, lui, doit rester copiable, c est pour cela que la regle porte sur les images et non sur ".marque" entiere. Le mot « WizeFile » du logotype fait exception et reste selectionnable avec le reste du texte : c est du texte, pas un dessin. */ .logo-marque, .pastille-rgpd .cocarde, .mascotte-coin img, .hero-visuel { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-user-drag: none; } /* Le nom prend toute la largeur de sa ligne, les pastilles passent donc ensemble en dessous. Sans cette regle, la pose de la pastille « Bêta » cassait l'en-tete : le bloc ne fait que 201 px de large, les trois elements n'y tenaient pas, et « Bêta » partait seule sur une troisieme ligne pendant que « 100 % RGPD » restait collee au logo. Mesure au rendu : hauteur inchangee a 67 px, et les deux pastilles alignees au meme pixel. */ .ligne .marque { flex-basis: 100%; } /* MAIS SEULEMENT QUAND LA PLACE MANQUE. Le passage a la ligne ci-dessus etait pose sans condition, et il s appliquait donc aussi sur un grand ecran ou les trois elements tiennent largement. Mesure a 1 600 px le 18/08/2026 : l en-tete faisait 104 px de haut sur deux lignes, quand les captures du 13/08 la montrent sur une seule. Le seuil vient de la mesure et non d une valeur ronde choisie a l oeil : le nom et les deux pastilles demandent 289 px, la navigation 688, l ecart 16, soit 993 px de contenu. Sous 1 100 px de fenetre la page n en offre plus autant, et le passage a la ligne redevient le bon comportement. SEUIL REMESURE DEUX FOIS LE 19/08/2026, le logo ayant grandi deux fois. Il vaut 1 120 px, et cette valeur vient d un essai et non d un calcul : le calcul se trompait. Methode, a reprendre telle quelle si la marque rebouge. On force l en-tete sur une ligne, "flex-wrap: nowrap" et "flex-basis: auto" sur la marque, et on descend la fenetre jusqu a ce qu elle cesse de tenir. Mesures : a 1 120 px l en-tete fait 89 px, soit une ligne ; a 1 020 px elle fait 128 px MEME forcee, parce que c est alors la navigation qui se replie toute seule sur deux lignes. La limite est donc portee par la navigation, pas par la marque, et aucune addition de largeurs ne pouvait la donner. Le seuil precedent, 1 220 px, avait ete pose par une addition de ce genre. Il n etait pas dangereux, seulement trop prudent : entre 1 120 et 1 220 px l en-tete passait sur deux lignes alors qu elle tenait sur une. */ @media (min-width: 1120px) { .entete .ligne { flex-wrap: nowrap; } .entete .ligne .marque { flex-basis: auto; } } /* flex-wrap : sans lui, la barre de navigation refuse de passer a la ligne et sort de l ecran. Mesure sur "/outils/" a 375 px : elle s arretait a 479 px, soit 104 px hors champ, et la page se faisait pousser en defilement horizontal. Le defaut ne se voyait pas au controle precedent, qui portait sur les pages d outil. */ .nav { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; } /* AGRANDIE LE 20/08/2026, a la demande : « que ca s adapte bien a la taille du bandeau sans toucher les bords ». L en-tete fait 69 px et la marque, haute de 56, le remplissait a 6 px pres en haut comme en bas. La navigation, elle, plafonnait a 39 px pour le champ de recherche et 29 pour les liens : 15 a 20 px de vide de chaque cote, ce qui la faisait paraitre posee dans un bandeau trop grand pour elle. PREMIER JET TROP GENEREUX, corrige dans la foulee. Il montait AUSSI les corps de texte et la largeur du champ de recherche, et l en-tete n avait plus la place : il se repliait sur deux lignes, la bascule de theme tombait sous la ligne et la barre de filtres passait par-dessus. La lecon tient en une phrase : dans une barre horizontale, une HAUTEUR ne coute rien et une LARGEUR coute tout. Les corps de texte et la largeur du champ sont donc revenus a leur valeur d origine, seules les hauteurs montent, de 34-39 px a 40-42. Le bandeau se remplit sans que rien ne s allonge. */ .nav a { color: var(--ink-2); text-decoration: none; font-size: var(--t-s); } .nav a:hover { color: var(--ink); } /* Pastille "100 % local" : le seul endroit ou le lime parle. */ /* REPRISE DU 25/08/2026, a la demande : « j aimerais ameliorer le design de 100 % RGPD ». La pastille etait un aplat lime cercle d un trait lime, quand la pastille « populaire » porte un degrade depuis le 19/08 : la comparaison la faisait paraitre plate et un peu terne, alors qu elle porte l argument central du site. Quatre retouches, et aucune ne touche a la couleur de marque : 1. Le fond passe de l aplat au degrade "--degrade-rgpd", qui court de l ecusson vers le mot, dans le sens de lecture. Meme geste que la pastille « populaire », pour que les deux fassent famille. 2. Un filet clair d un pixel a l interieur du bord haut. C est ce qui donne le relief : sans lui, un degrade sur une pastille de 13 px se lit comme une salissure du fond. 3. Le retrait passe de 3-9 a 4-10 px et l interlettrage s ouvre de 2 centiemes de cadratin. Le texte est en chasse fixe et en capitales de fait, « 100 % RGPD » : serre, il se lisait comme un code, aere il se lit comme un label. 4. L ecusson passe de 13 a 14 px. Il porte le signe, il devait etre le plus grand des deux elements, il etait le plus petit. Ce qui NE bouge pas : "--lime-texte" pour les mots, "--lime-ligne" pour le bord. La regle du site veut que le lime ne dise qu une chose, et cette pastille est precisement l endroit ou il la dit. */ .pastille { display: inline-flex; align-items: center; gap: 6px; font-family: var(--f-mono); font-size: var(--t-xs); font-weight: 600; letter-spacing: .02em; color: var(--lime-texte); background: var(--degrade-rgpd); border: 1px solid var(--lime-ligne); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55); padding: 4px 10px; border-radius: var(--r-pill); white-space: nowrap; } /* En sombre, un filet blanc a 55 % eclaire la pastille au lieu de la detacher : il est ramene a un blanc tres dilue, juste de quoi poser le bord haut. */ [data-theme="dark"] .pastille { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07); } .pastille::before { /* RETOUCHE DU 18/08/2026, sur la capture d'avant l'incident. C'etait un simple rond de 6 px. La capture montre un ECUSSON A COCHE, qui dit la meme chose que le texte au lieu de faire un point decoratif : la garantie, pas une puce de liste. Dessine en fond, pas en emoji : les emojis ont ete retires du site le 09/08 parce qu'ils ne se dessinent pas pareil d'une machine a l'autre. La couleur est figee dans l'image, le lime du texte tenant sur les deux themes. */ content: ""; width: 14px; height: 14px; flex: none; background: var(--img-ecusson) center / contain no-repeat; } /* ---- LA MARQUE RGPD DE L EN-TETE ---- Demande du 29/08/2026 : « rgpd logo remplace la pastille rgpd dans le bandeau ». Elle remplace la gelule texte « 100 % RGPD » sur les soixante-trois pages, et devient CLIQUABLE VERS "/local/", comme annonce dans la premiere liste du 28/08 : « le logo sera cliquable pour atteindre la page ». 24 PX DE HAUT, SOUS LA GELULE QU ELLE REMPLACE. Posee d abord a 29, la hauteur exacte de l ancienne pastille texte, elle pesait trop lourd a cote du nom de marque : demande du 29/08/2026, « baisse un peu la taille du logo RGPD dans le bandeau ». Cinq pixels de moins la rangent derriere le logotype sans qu elle disparaisse. Le plafond reste les 29 px de la pastille « Beta », qui voisine : au-dela, la marque pousserait la barre du haut, et avec elle le premier ecran des soixante-trois pages. Les deux restent centrees sur la meme ligne, "align-items: center" s en charge. LE MOT RESTE DANS "alt", pas seulement dans le dessin : un lecteur d ecran doit entendre « 100 % RGPD », et le lien doit dire ou il mene. Le dessin porte le mot pour l oeil, l attribut pour le reste. PAS DE FILTRE EN THEME SOMBRE, contrairement aux mascottes : le remplissage de la marque est un vert tres pale qui se detache seul du fond sombre, la ou le corps bleu nuit du pingouin s y noyait. UN ZOOM, PAS UN DANDINEMENT, demande du 29/08/2026 : « on donne un mini zoom dezoom au RGPD quand on passe dessus ». Une rotation de sept degres sur un cartouche large le ferait paraitre decolle ; un grossissement de 6 % le fait respirer sans bouger de sa ligne. ALLER-RETOUR ET NON UN SIMPLE AGRANDISSEMENT : l animation revient a 1 en fin de cycle, c est le « zoom dezoom » demande. 1,6 s pour un cycle complet, soit 400 ms par quart : dans la fourchette des micro-interactions, qui veut 150 a 300 ms par mouvement simple. ELLE NE POUSSE RIEN. Le grossissement passe par "transform", qui ne recalcule aucune mise en page : la pastille « Beta » voisine ne bouge pas d un pixel. */ /* ═══ L IMAGE DEVIENT UN DESSIN, LE 01/09/2026 ═══════════════════ Demande de Corentin : « abandonner l image du logo RGPD pour un logo SVG maison, avec RGPD ecrit juste a cote en lime ». Piste 2 du banc "_sceau-rgpd.html", la cocarde pleine, retenue sans cerne. CE QUE L IMAGE COUTAIT. Un PNG de 237 x 72 et son repli WebP, deux fichiers et une requete pour 24 px de haut a l ecran. Surtout, un dessin FABRIQUE POUR LE FOND CLAIR et servi tel quel en sombre : la pastille etait le seul element de la barre a ne pas basculer avec le theme, et elle porte l argument central du site. POURQUOI LA COCARDE PLEINE ET NON LA COCARDE EN FILET. Les deux ont le meme trace, douze lobes entre 10 et 8,5 de rayon, calcules et non poses a l oeil. En filet elle est plus fine agrandie, mais a 20 px les lobes se referment et la forme se lit comme un simple rond : l en-tete est justement le seul endroit ou elle sert. A cette taille, un aplat se voit la ou un filet se perd. LA COCHE EST EVIDEE SUR "--bg" et non peinte d une seconde couleur. Une couleur de plus, c est une couleur a tenir dans les deux themes ; le vide, lui, suit le fond tout seul. LE MOT EST EN "--lime-texte" ET NON EN "--lime", et ce n est pas une liberte prise avec la demande. Le lime pur ne donne que 1,37 de contraste sur le fond clair, la charte l ecrit noir sur blanc : « RGPD » ecrit dedans serait decoratif et illisible. "--lime-texte" est le jeton prevu pour les MOTS, #43700C en clair et #B6EF5E en sombre, mesures a 6,4 et 9,1. C est bien du lime, c est le seul qui se lise. LE DESSIN N A PAS DE COULEUR A LUI. Il herite de celle du mot par "currentColor" : un seul jeton pour les deux, ils ne peuvent pas diverger a la premiere retouche. LA TYPOGRAPHIE EST CELLE DES PASTILLES DU SITE, mono 600 espace de 4 centiemes, la meme que « populaire » et « zero upload ». Le caractere machine convient au tampon, et il evite le doublon avec le logotype pose juste a cote, qui porte deja la police de titre. 13 PX ET NON "--t-xs". Le dessin vaut 1,55 fois le corps du texte, soit 20 px, la hauteur utile de l ancienne image. A 12 px il serait tombe a 18,6 et la pastille aurait maigri sans qu on l ait demande. Le palier telephone, lui, descend bien a 12. */ .pastille-rgpd { display: inline-flex; align-items: center; gap: 5px; flex: none; font-family: var(--f-mono); font-weight: 600; font-size: 13px; letter-spacing: .04em; white-space: nowrap; color: var(--lime-texte); text-decoration: none; border-radius: var(--r-pill); } .pastille-rgpd .cocarde { width: 1.55em; height: 1.55em; flex: none; transform-origin: 50% 50%; } /* Le survol assombrit le lime d un cran plutot que de poser une autre teinte : "--lime-trait" est le meme lime, juste assez fonce pour se distinguer de l etat au repos sans changer de couleur. */ .pastille-rgpd:hover, .pastille-rgpd:focus-visible { color: var(--lime-trait); } .pastille-rgpd:hover .cocarde, .pastille-rgpd:focus-visible .cocarde { animation: rgpd-zoom 1.6s ease-in-out infinite; } @keyframes rgpd-zoom { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } } @media (prefers-reduced-motion: reduce) { .pastille-rgpd:hover .cocarde, .pastille-rgpd:focus-visible .cocarde { animation: none; } } /* ---- Choix de la langue --------------------------------------- Menu deroulant bati sur
: il s'ouvre et se ferme sans JavaScript. Chaque entree est un vrai lien vers l'adresse equivalente dans l'autre langue, jamais un changement de texte par script, sinon Google n'indexe qu'une seule version. Ajouter une langue = ajouter un
  • et un drapeau au sprite. */ .drapeau { width: 18px; height: 12px; flex: none; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .18); } .langues { position: relative; } .langues > summary { display: inline-flex; align-items: center; gap: 7px; padding: 7px 8px 7px 9px; border-radius: var(--r-s); border: 1px solid var(--border); background: var(--surface); font-family: var(--f-mono); font-size: var(--t-xs); font-weight: 600; color: var(--ink); letter-spacing: .04em; cursor: pointer; user-select: none; list-style: none; } .langues > summary::-webkit-details-marker { display: none; } .langues > summary:hover { border-color: var(--border-fort); } .langues > summary .chevron { width: 11px; height: 11px; color: var(--ink-2); transition: transform .18s ease; } .langues[open] > summary .chevron { transform: rotate(180deg); } /* Un enfant en position absolue echappe au masquage automatique de
    . Sans cette ligne, le menu reste affiche fermé. */ .langues:not([open]) > ul { display: none; } .langues > ul { position: absolute; top: calc(100% + 6px); right: 0; z-index: 30; min-width: 168px; list-style: none; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); box-shadow: var(--ombre); padding: 5px; margin: 0; } .langues > ul a { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: var(--r-s); text-decoration: none; font-size: var(--t-s); font-weight: 500; color: var(--ink-2); white-space: nowrap; } .langues > ul a:hover { background: var(--surface-2); color: var(--ink); } /* Langue annoncee mais pas encore en ligne. Volontairement pas un lien : un menu qui mene a une page inexistante est un piege. */ /* Retouche du 20/08/2026, apres la traduction des badges. « EM BREVE » se cassait sur deux lignes et faisait grandir sa rangee, desalignant tout le menu. Trois causes, et deux etaient la avant la traduction sans que rien ne les revele : 1. Le "white-space: nowrap" existait sur ".langues > ul a", donc sur la seule ligne active, et pas ici. Tant que les cinq badges disaient « BIENTOT », un seul mot court, rien ne cassait jamais. La regle manquante ne se voyait pas, elle attendait un mot plus long. Elle est rétablie a l identique. 2. Le retrait valait "9px 14px" quand celui du lien vaut "8px 10px". Les rangees n etaient donc deja pas alignees entre elles, de 4 px a gauche, ce qui se voit des qu on le sait. Aligne sur le lien, seule reference qui vaille. 3. Les badges suivaient le nom de la langue et commencaient donc a cinq abscisses differentes. Ils sont pousses a droite par "margin-left: auto", exactement comme la pastille violette de la langue active juste en dessous : les six lignes du menu partagent desormais le meme bord droit. */ .langues > ul .bientot { display: flex; align-items: center; gap: 9px; padding: 8px 10px; font-size: var(--t-s); color: var(--ink-3); cursor: default; white-space: nowrap; } /* Bulle reduite le 20/08/2026 a la demande de Corentin. Le corps passe de "--t-xs" (12 px) a "--t-pastille" (10 px), et le retrait de "1px 7px" a "1px 6px". C est le jeton de la charte et non une taille inventee sur place : "--t-pastille" sert deja ailleurs pour ce meme role de bulle, et c est celui que l audit du 18/08 avait examine puis assume comme une decision de design plutot qu un defaut de lisibilite. Le badge n est pas du texte a lire mais une etiquette d etat, doublee par le fait que la ligne n est pas cliquable. */ .langues > ul .bientot b { margin-left: auto; flex: none; font-size: var(--t-pastille); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-3); border: 1px solid var(--border); border-radius: var(--r-pill); padding: 1px 6px; } .langues > ul a[aria-current="true"] { color: var(--ink); font-weight: 600; } .langues > ul a[aria-current="true"]::after { content: ""; margin-left: auto; width: 6px; height: 6px; border-radius: 50%; background: var(--violet); flex: none; } /* ---- Bascule clair / sombre ----------------------------------- */ .bascule { display: inline-grid; place-items: center; width: 40px; height: 40px; flex: none; border: 1px solid var(--border); border-radius: var(--r-s); background: var(--surface); color: var(--ink-2); cursor: pointer; } .bascule:hover { color: var(--ink); border-color: var(--border-fort); } .bascule svg { width: 17px; height: 17px; } .bascule .lune { display: none; } :root[data-theme="dark"] .bascule .lune { display: block; } :root[data-theme="dark"] .bascule .soleil { display: none; } /* LE BLOC "@media (prefers-color-scheme: dark)" QUI VIVAIT ICI EST RETIRE LE 01/09/2026, sur le defaut signale par Corentin : « le bouton de changement de theme bug sur telephone ». Il ne buguait pas, il DISAIT VRAI SUR UNE REGLE QUI N EXISTE PLUS. Le 11/08/2026, le sombre automatique a ete abandonne : le bloc "prefers-color-scheme" de "charte.css" est en commentaire et le sombre ne s applique plus que sur data-theme="dark", pose par ce bouton. Ces deux lignes-ci, elles, sont restees : sur un telephone REGLE EN SOMBRE et sans choix enregistre, elles allumaient la lune au-dessus d une page claire. Le defaut se voyait a l usage et non a la lecture. Le premier appui lisait le meme reglage systeme, en deduisait « on est en sombre », et posait donc « clair » : la page etait deja claire, seule l icone changeait. Il fallait DEUX appuis pour voir quoi que ce soit, et le premier passait pour un bouton casse. Voir la meme correction dans "commun.js", fonction "themeActuel" : les deux vont ensemble et une seule des deux n aurait rien reparee. */ /* ---- Titre de page d'outil ------------------------------------ */ /* Sur une page d'outil, le heros est l'outil, pas son titre. Le titre plafonnait a 44px et le bloc mangeait 170px avant meme la zone de depot, ce qui repoussait tout le reste hors de l'ecran. */ .chapo { text-align: center; padding-block: var(--e-5) var(--e-4); } .chapo h1 { margin-bottom: var(--e-2); font-size: clamp(var(--t-xl), 3vw, var(--t-3xl)); } .chapo h1 .accent { color: var(--violet); } .chapo p { color: var(--ink-2); max-width: 52ch; margin-inline: auto; font-size: var(--t-m); } /* ---- LA MASCOTTE DE COIN ---- Demande du 28/08/2026 : « le pingouin doit simplement rester pose en haut a droite de la page, sans animation. En revanche, il doit se dandiner, comme pour le logo, lorsqu on passe dessus. » REMPLACE LA MASCOTTE QUI SORTAIT DU TITRE DE "/local/", posee le 25/08/2026. Celle-la vivait dans une boite a "overflow: hidden" dont le bas tombait sur le titre : au repos elle n en montrait qu un cinquieme, et elle remontait au survol. Le mecanisme entier tombe avec la demande, y compris les 104 px que le bloc devait reserver au-dessus du titre pour lui faire de la place. C est ce retrait qui creusait l espace sous l en-tete collante, second point de la meme demande. MEME COMPOSANT POUR HUIT PAGES : "/local/", "/outils/", "/a-propos/", "/contact/", "/mentions-legales/", "/confidentialite/", "/conditions/" et "/consentement/". Elles n ont pas le meme dessin, elles ont la meme place et le meme geste. ELLE VOLE AU-DESSUS DE LA PAGE, ELLE N Y PREND PAS PLACE, troisieme demande du 28/08/2026 : « je ne veux pas que les pingouins empietent sur les pages, les pages doivent rester les memes, les pingouins sont des plus, sans chevaucher le texte bien sur ». Une version intermediaire portait ".chapo" a 188 px de haut pour loger le dessin. Elle a ete retiree : elle rallongeait huit pages pour un ornement. Il ne reste que la position absolue, qui ne coute rien a la mise en page. LA TAILLE EST DONC DICTEE PAR LA BANDE LIBRE, et par la plus etroite des huit. Bande mesuree du bas de l en-tete au haut du bloc suivant, le 28/08/2026 : a 1000 px a 1920 px /outils/ 84 94 <- commande /consentement/ 84 94 /local/ 116 126 /contact/ 132 142 et les trois pages legales /a-propos/ 188 198 elle porte un sous-titre "/OUTILS/" N A PAS DE PLACE EN HAUT, ET N EN AURA PAS. Son carrousel demarre au ras du titre et prend toute la largeur. Un releve des elements rencontres en descendant la colonne du dessin, le 28/08/2026, la trouve occupee sans interruption de 166 a 328 px : pastilles du carrousel, puis barre de filtres, puis les cartes. Aucune poche. Cette page ne bride donc plus les sept autres : son pingouin quitte le titre pour le bloc de conclusion, « Ce que tous ces outils ont en commun », 340 px de haut et 590 px de vide a sa droite. Voir ".contenu:has(> .mascotte-coin)" plus bas. RESTE "/local/" COMME PLAFOND, et il est plus genereux : sa bande vaut 116 px a 1000 et 126 a 1920. La boite suit donc la largeur de fenetre, comme la bande, qui grandit avec le titre jusqu au plafond de "--t-3xl" : 900 px boite 70 1000 px boite 80 1100 px boite 92 1300 px boite 116, plafonnee LA CROISSANCE DEMARRE TARD, "12vw - 40px" et non un simple "9vw", et c est mesure. A 900 px un simple pourcentage donnait 82 px, et le dessin mordait alors sur le panneau vert de "/consentement/" : cette page n a que 84 px de bande, et sa gouttiere droite est trop mince sous 1000 px pour qu il puisse deborder. La pente decalee tient le dessin dans la bande tant que la fenetre est etroite, et le laisse grandir des que la gouttiere s ouvre. ELLE PEND SOUS L EN-TETE AU LIEU D ETRE CENTREE. Centree sur un bloc de titre plus court qu elle, elle repasserait derriere la barre du haut. Accrochee a 8 px sous elle, elle deborde vers le bas, la ou les pages larges laissent une gouttiere : "/consentement/" en laisse 630 px a droite de son bloc etroit, "/local/" 470 a 1920. Le rapport de la boite est celui des fichiers, tenu par "aspect-ratio" : une seule mesure a regler. "z-index: 0" et non un rang superieur : le titre passe devant si la fenetre est etroite au point que les deux se rejoignent. SOUS 900 PX ELLE NE VOLE PLUS, ELLE SE POSE DANS LE FLUX. Premiere version : "display: none", comme le dessin du hero d accueil. Retire le 29/08/2026 apres l audit : la mascotte etait alors absente des huit pages sur telephone, c est-a-dire sur le support ou le trafic est le plus lourd, alors que sa raison d etre est l attachement. POURQUOI DANS LE FLUX ET NON EN VOL. Mesure du 29/08/2026 a 375 px sur "/local/" : l en-tete occupe 163 px, le titre passe a cinq lignes et ne laisse que 58 px de chaque cote. Il n y a pas de coin libre a occuper, quelle que soit la taille du dessin. C EST LE MOTIF DE ".mascotte-page", DEJA EN PLACE SUR "/404.html" ET "/maintenance.html" : centre, sous le texte, dans le flux. Il tient sur telephone depuis le 25/08 et n a rien casse. "display: inline-block" ET NON "block" : ".chapo" centre deja son contenu, et sur "/local/", qui porte deux dessins, le sceau et le pingouin se rangent alors cote a cote au lieu de s empiler. 96 PX ET NON 112 : deux dessins de 96 et leur ecart tiennent dans les 375 px du plus petit telephone courant, avec de la marge. */ .chapo { position: relative; } .mascotte-coin { display: inline-block; margin: var(--e-3) var(--e-2) 0; vertical-align: bottom; } .mascotte-coin img { display: block; width: auto; height: 96px; aspect-ratio: 320 / 310; object-fit: contain; transform-origin: 50% 92%; } /* Sur "/outils/" le dessin ferme le bloc des derniers outils, qui n est pas centre : sans cela il restait cale a gauche sous les pastilles, comme tombe la. Les marges automatiques sont annulees plus bas, ou il repasse en position absolue. */ .derniers > .mascotte-coin { display: block; } .derniers > .mascotte-coin img { margin-inline: auto; } /* Le pingouin propre a "/outils/", ecrit dans le titre de la page et reserve aux petits ecrans : voir le commentaire pose a cote de lui dans "outils/index.html". Un peu plus court que les autres, 84 px au lieu de 96, parce qu il s ajoute a un haut de page deja charge par le carrousel et la barre de filtres. */ .mascotte-outils img { height: 84px; } @media (min-width: 900px) { .mascotte-coin { display: block; position: absolute; z-index: 0; /* MEME RETRAIT DU BORD, meme raison : colle au bord du contenu, le dessin paraissait tombe la. Le "clamp" le rentre a 3 % de la fenetre, sans jamais depasser 48 px sur un tres grand ecran ni mordre sur le titre centre a 900. */ right: clamp(0px, 3vw, 48px); top: 8px; margin: 0; pointer-events: none; } /* LE SCEAU RGPD REPOND AU PINGOUIN DEPUIS L AUTRE BORD, demande du 29/08/2026 : « rgpd 2 s ajoute sur la page en miroir du pingouin sur la page pourquoi c est local ». Meme composant, meme hauteur, meme geste : seul le bord change. Le sceau est fabrique sur le meme calque de 320 x 310 que les mascottes, c est ce qui lui donne exactement la meme hauteur rendue sans regle a part. */ .mascotte-coin.a-gauche { right: auto; left: clamp(0px, 3vw, 48px); } /* ═══ LE PINGOUIN DE "/OUTILS/" REMONTE DANS LE TITRE, LE 01/09/2026, choix de Corentin, capture annotee a l appui : le vide a droite du titre entoure au feutre rouge. CELA REVIENT SUR LA NOTE DU 28/08, ET IL FAUT LE DIRE. Ce releve concluait que la colonne du dessin etait prise sans trou de 166 a 328 px par le carrousel puis la barre de filtres. Il mesurait la COLONNE ENTIERE, sur toute la hauteur du bloc, alors que le dessin n a besoin que de la bande comprise entre le bas de l en-tete et le haut des bulles. Cette bande existe : 145 px a 1920, et le dessin en demande 116. La conclusion d alors etait juste sur ce qu elle mesurait, et fausse sur ce qu on lui demandait. LE PLANCHER EST 1200 PX ET NON 900. Le titre est centre : c est la largeur laissee A SA DROITE qui compte, pas la largeur de la fenetre. Elle vaut 675 px a 1920, encore 190 a 1200, et devient nulle en dessous, le titre occupant alors toute la ligne. Sous 1200 px, le dessin reprend donc sa place dans le flux, sous le titre, comme sur telephone. D OU LA REGLE CI-DESSOUS, ET ELLE N EST PAS DECORATIVE. A partir de 900 px, ".mascotte-coin" passe en position absolue, calee en haut a droite du bloc de titre : sans cette remise dans le flux, le pingouin de "/outils/" serait venu se poser SUR son propre titre entre 900 et 1199 px. Un premier jet ecrivait simplement "display: none" ici, et la page n avait alors aucun pingouin sur toute cette tranche, verifie au rendu a 1100 px. LA HAUTEUR SUIT LA BANDE, ET NON LA FENETRE. Elle est bornee entre 86 et 116 px, la valeur haute etant celle du dessin des autres pages : au-dela il descendrait sur les bulles, en dessous de 86 il ne se lirait plus. */ .chapo > .mascotte-coin.mascotte-outils { position: static; display: inline-block; margin: var(--e-3) var(--e-2) 0; pointer-events: auto; } /* LA PAIRE DE "/local/" EST CENTREE SUR LA BANDE, PAS SUR LE BLOC DE TITRE, demande du 29/08/2026 : « centre-les aussi, parce que la ils sont dans le coin ». Ailleurs le dessin pend simplement sous l en-tete ; ici ils sont deux a se repondre et le decalage se voyait. LES 16 PX SONT MESURES, pas choisis. Le bloc de titre fait 84 px a 1000 et 94 au-dela de 1280, mais la bande libre jusqu a l emplacement publicitaire en fait 116 et 126 : trente-deux pixels de plus dans les deux cas, donc un centre seize pixels plus bas. Le meme nombre vaut aux deux largeurs, c est ce qui permet de l ecrire une fois. */ .chapo:has(> .mascotte-coin.a-gauche) .mascotte-coin { top: 50%; transform: translateY(calc(-50% + 16px)); } /* SUR "/outils/", LE DESSIN A QUITTE « VOS DERNIERS OUTILS » LE 01/09/2026, choix de Corentin, capture annotee a l appui : il remonte a droite du titre, la ou le vide etait entoure au feutre. TROIS EMPLACEMENTS AVAIENT ETE ESSAYES SUR CETTE PAGE, autant en garder la trace. Le titre d abord, ecarte le 28/08 sur un releve qui trouvait sa colonne occupee sans trou de 166 a 328 px. Le bloc de conclusion ensuite : il tenait, mais a 4037 px, soit 89 % de la page et cinq ecrans sous le pli. Restait « Vos derniers outils », retenu le 29/08. CE DERNIER AVAIT UN DEFAUT QUE LA MESURE NE POUVAIT PAS VOIR : le bloc n existe que si le visiteur a deja ouvert un outil. Sur une premiere visite, donc sur celles qui comptent, la page n avait aucun pingouin. Le releve du 28/08, lui, mesurait la colonne ENTIERE quand le dessin ne demande que la bande entre le bas de l en-tete et le haut des bulles. Cette bande existe, et c est la que le dessin vit desormais : voir le palier de 1200 px, plus bas. Les deux regles qui posaient la boite dans « Vos derniers outils » sont retirees avec l injection de "commun.js" qui les alimentait. */ /* UNE BOITE UNIQUE POUR LES CINQ DESSINS, demande du 28/08/2026 : « fais en sorte qu ils soient tous de la meme taille ». L EGALITE SE JOUE DANS LES FICHIERS, PAS ICI. Une premiere version posait une boite fixe sur des fichiers de proportions differentes : les boites etaient egales, les pingouins non. Mesure de la silhouette bleu nuit, celle que l oeil compare : 68 px pour le pingouin au panneau STOP contre 96 pour celui au courrier, un tiers d ecart, parce que le panneau leve beaucoup de vide au dessus de la tete. "preparer-coin.py" met donc les cinq fichiers a la meme echelle de CORPS, pieds poses sur le bas d un calque commun de 320 x 310. Les cinq images partagent des lors le meme format, et cette boite de 320 x 310, exactement leur rapport, les loge a l identique : le "object-fit" ne sert plus que de garde-fou. */ .mascotte-coin img { display: block; object-fit: contain; height: clamp(70px, 12vw - 40px, 112px); width: auto; aspect-ratio: 320 / 310; pointer-events: auto; /* Le dandinement pivote le dessin sur ses pattes, comme le logotype de l en-tete : le point d ancrage est le meme, 92 % de la hauteur. Ancre au centre, le pingouin paraitrait glisser. */ transform-origin: 50% 92%; } /* MEME ANIMATION QUE LE LOGOTYPE, "logo-dandine", et non une copie. La demande dit « comme pour le logo » : deux courbes voisines mais distinctes se verraient des qu on passe de l en-tete a la page. */ .mascotte-coin img:hover { animation: logo-dandine .9s ease-in-out infinite; } } /* ═══ LE PINGOUIN DE "/OUTILS/" A DROITE DU TITRE ════════════════ Pose le 01/09/2026, choix de Corentin sur capture annotee. POURQUOI UN PALIER A PART, ET PAS LE BLOC DE 900 PX. Le titre de cette page est centre : ce qui compte n est pas la largeur de la fenetre mais celle qui reste A SA DROITE. Elle vaut 675 px a 1920, encore 190 a 1200, et tombe a rien en dessous, le titre prenant alors toute la ligne. Sous 1200 px le dessin reprend donc sa place dans le flux, sous le titre, exactement comme sur telephone : c est la meme regle de base qui reprend la main, aucune n est dupliquee. LA HAUTEUR SUIT LA BANDE ET NON LA FENETRE. Elle est bornee entre 72 et 92 px, et ces deux nombres sont mesures, pas choisis. PREMIER JET A 116 PX, ET IL MORDAIT. La bande libre avait ete estimee a 145 px ; mesure au rendu a 1600 px, elle en fait 93, du bas de l en-tete a 69 au haut des bulles a 162. Le dessin descendait donc de 23 px sur le carrousel. L estimation partait de la hauteur du bloc de titre, la mesure part de ce qui se trouve REELLEMENT dessous. C est la deuxieme fois sur ce pingouin qu un calcul se trompe la ou une mesure tranche, voir la note du 28/08. La bande mesure 93 px a 1600 et 94 a 1920 : le plafond est pose a 86, ce qui laisse 8 px de garde dans les deux cas. Un premier reglage a 92 ne laissait que 2 px a 1920, ce qui n est pas une marge mais un hasard. Le plancher de 72 tient le dessin lisible a 1200, la ou le titre plus etroit se replie et remonte les bulles. "top: 0" ET NON LE CENTRAGE DE "/local/". Le bloc de titre est plus court que le dessin : centre, il repasserait sous l en-tete collee. Accroche en haut, il deborde vers le bas, dans la bande justement libre. Meme geste que sur les sept autres pages. Le pointeur traverse la boite, "pointer-events: none", mais pas l image : le dessin garde son dandinement au survol comme partout ailleurs, sans pour autant capturer le clic sur la bande vide qui l entoure. */ @media (min-width: 1200px) { .chapo > .mascotte-coin.mascotte-outils { display: block; position: absolute; z-index: 0; right: clamp(0px, 3vw, 48px); top: 0; margin: 0; pointer-events: none; } .chapo > .mascotte-coin.mascotte-outils img { height: clamp(72px, 8vw - 38px, 86px); } } @media (prefers-reduced-motion: reduce) { .mascotte-coin img:hover { animation: none; } } /* ---- LA MASCOTTE POSEE DANS UNE PAGE ---- Un dessin decoratif, centre, qui accompagne un passage sans rien ajouter a ce qu il dit. Sert sur "/contact/", "/404.html" et "/maintenance.html". LE FILTRE EN THEME SOMBRE N EST PAS UNE COQUETTERIE. Le corps de la mascotte est un bleu tres fonce, #18162B, fige dans l image : pose sur le fond sombre du site il disparait presque. Le meme piege est deja documente sur ".pingouin-hero", ou il avait ete regle par un jeton de couleur ; une image matricielle n offre pas cette prise, d ou un halo clair tres large qui la detache du fond sans la redessiner. */ .mascotte-page { text-align: center; margin-block: var(--e-4); } .mascotte-page img { width: 132px; height: auto; display: inline-block; } /* MEME DANDINEMENT AU SURVOL QUE LE LOGOTYPE, demande du 28/08/2026 pour le pingouin de "/404.html". Meme ancrage aux pattes et meme animation partagee que ".mascotte-coin". */ .mascotte-page img { transform-origin: 50% 92%; } .mascotte-page img:hover { animation: logo-dandine .9s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { .mascotte-page img:hover { animation: none; } } [data-theme="dark"] .mascotte-page img, [data-theme="dark"] .mascotte-coin img, [data-theme="dark"] .logo-marque, [data-theme="dark"] .lot-mascotte, [data-theme="dark"] .pingouin-hero-corps { filter: drop-shadow(0 0 1px rgba(236, 237, 232, .55)) drop-shadow(0 0 6px rgba(236, 237, 232, .28)); } /* ---- Hero d'accueil -------------------------------------------- Historique, pour ne pas refaire deux fois le meme aller-retour. Le 03/08 le hero passait en deux colonnes, avec a droite un panneau qui reproduisait l onglet reseau du navigateur et son zero requete. Corentin l a fait retirer : trop technique, il parlait a un developpeur et pas au visiteur qui veut compresser un PDF. Il restait donc, mesure le 09/08, un texte centre de 364 px de haut pose sur une bande de 1 672 px, un emplacement vide laisse dans le HTML, et surtout plus aucune image pour l argument unique du site. Le hero redevient donc deux colonnes, mais la colonne de droite ne reprend pas le panneau rejete. C est un dessin, pas une capture d ecran de developpeur : une fenetre de navigateur, le document dedans, un ecusson qui dit qu il y reste, et le nuage barre au dessus. Il se comprend sans savoir ce qu est une requete. Dessine a la main comme le reste du jeu d icones, donc aucun fichier, aucune requete. En dessous de 900 px il disparait : sur un telephone la place va au titre et au bouton, pas a une illustration. "aria-hidden" parce qu il ne dit rien que le texte ne dise deja. */ /* RETRAIT HAUT REDUIT DE MOITIE LE 25/08/2026, a la demande : « reduis de moitie l espace entre le bandeau en haut de page et le debut du heros ». Il passe de --e-8 a --e-6, soit 64 px a 32. Seul le retrait HAUT bouge : le bas separe le hero de la rangee de bulles et n a pas ete mis en cause. */ .hero { padding-block: var(--e-6) var(--e-7); display: grid; grid-template-columns: 1fr; gap: var(--e-7); align-items: center; text-align: center; } .hero h1 { margin-bottom: var(--e-4); max-width: 20ch; margin-inline: auto; } .hero h1 .accent { color: var(--violet); } /* ---- L APPAREIL DU HEROS -------------------------------------- Demande du 01/09/2026 : le titre nomme l appareil qui a le fichier sous la main, « votre telephone » ou « votre tablette » plutot que « votre ordinateur ». C est l argument entier du site, il porte mieux quand il designe la machine qu on tient. LE SEUIL N EST PAS UNE SIMPLE LARGEUR, et deux corrections en decoulent : 1. "pointer: coarse" d abord. Sans lui, une fenetre de navigateur reduite sur un ordinateur de bureau annoncait « votre telephone ». La largeur dit la place disponible, elle ne dit pas l appareil ; le mode de pointage, lui, distingue un doigt d une souris. 2. Le PLUS PETIT COTE ensuite, et non la largeur courante. Un telephone couche mesure 850 px de large : sur la seule largeur il serait passe pour une tablette a chaque rotation. La seconde condition du bloc telephone rattrape ce cas par la HAUTEUR, qui reste sous 520 px en paysage sur tous les formats courants. Le bloc tablette exige l inverse, au moins 520 px de haut, pour que les deux ne se recouvrent jamais. Le plafond de 1366 px du bloc tablette est la largeur d une tablette couchee de grand format. Au-dela, un ecran tactile est un ordinateur a dalle tactile, et « ordinateur » redevient le mot juste. Les deux mots non retenus sont en "display: none" et non masques a l oeil : un lecteur d ecran doit entendre UNE phrase, pas trois. */ .app-tel, .app-tab { display: none; } @media (pointer: coarse) and (max-width: 639px), (pointer: coarse) and (orientation: landscape) and (max-height: 519px) { .app-ord, .app-tab { display: none; } .app-tel { display: inline; } } @media (pointer: coarse) and (min-width: 640px) and (min-height: 520px) and (max-width: 1366px) { .app-ord, .app-tel { display: none; } .app-tab { display: inline; } } .hero .amorce { color: var(--ink-2); font-size: var(--t-l); max-width: 52ch; margin-inline: auto; } .hero .ligne { margin-top: var(--e-5); justify-content: center; } .hero-visuel { display: none; } @media (min-width: 900px) { .hero { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); text-align: left; } .hero h1, .hero .amorce { margin-inline: 0; } .hero .ligne { justify-content: flex-start; } .hero-visuel { display: block; width: 100%; height: auto; max-width: 440px; margin-inline: auto; } } /* Les couleurs du dessin passent par des classes et non par des valeurs ecrites dedans : il suit ainsi le theme comme le reste. */ .hero-visuel .v-surface { fill: var(--surface); } .hero-visuel .v-creux { fill: var(--surface-2); } .hero-visuel .v-trait { stroke: var(--border-fort); } .hero-visuel .v-faible { stroke: var(--ink-3); } .hero-visuel .v-violet { stroke: var(--violet); } .hero-visuel .v-violet-f{ fill: var(--violet); } .hero-visuel .v-doux { fill: var(--violet-doux); } .hero-visuel .v-lime { fill: var(--lime-doux); stroke: var(--lime-trait); } .hero-visuel .v-lime-t { stroke: var(--lime-texte); } .hero-visuel .v-alerte { stroke: var(--alerte); } .hero-visuel .v-fond { fill: var(--bg); } /* ---- La mascotte du heros -------------------------------------- Au repos il est ENTIEREMENT CACHE derriere la fenetre, et il en SORT par balayage quand la souris entre dans le dessin. Quatre choix qui se defendent : LE DECOUPAGE N'EN EST PAS UN. Le pingouin est peint avant la fenetre, dont le fond est opaque : tout ce qui descend sous le bord haut est couvert, sans masque ni "clip-path". Rien a tenir a jour le jour ou la fenetre change de taille. CACHE NE VEUT PAS DIRE ABSENT. Au repos le groupe est translate a 34 px SOUS son point de depart dans le dessin, soit 2 px de plus que la distance qui separe sa tete du bord de la fenetre : il disparait donc entierement derriere elle, sans "display: none" ni "visibility: hidden" qui casseraient la transition. LA SORTIE EST UNE TRANSLATION SEULE, jamais une hauteur ni un "top". Elle reste sur le fil de composition du navigateur et ne declenche aucun recalcul de mise en page, comme le dandinement du chargement dont elle reprend d'ailleurs l'esprit. LE RESSORT EST DANS LA COURBE, pas dans les images-cles. Le "cubic-bezier" depasse legerement 1 en fin de course, ce qui fait rebondir le pingouin de deux ou trois pixels au moment ou il arrive. Une animation aurait fait le meme effet en trois fois plus de lignes, et surtout elle ne saurait pas revenir en arriere quand la souris repart, la ou une transition le fait toute seule. CORRIGE LE 21/08/2026 : LA TETE SE COUPAIT AU REBOND. La cible de survol avait ete calee a 2 px du bord haut du "viewBox" en pensant au point d'ARRIVEE, sans compter que le "cubic-bezier" DEPASSE ce point avant de s'y stabiliser. Le rebond faisait donc passer la tete 2 a 3 px plus loin que prevu, plein dans la marge qu'il ne restait plus. Cible remontee de -30 a -26 px : la tete se pose desormais a 6 px du bord au repos et ne remonte qu'a 3 ou 4 au pic du rebond, toujours a l'interieur du "viewBox", 420 x 300. Au survol il sort a 62 px sur les 101 du dessin, soit le buste, le pouce leve et le haut du ventre. La duree est allongee par rapport a un simple picotement, .85 s, parce que le trajet fait plus que doubler : 60 px au lieu de 30, cache compris. */ .pingouin-hero { transform: translateY(34px); transition: transform .85s cubic-bezier(.34, 1.48, .5, 1); } .hero-visuel:hover .pingouin-hero, .hero-visuel:focus-within .pingouin-hero { transform: translateY(-26px); } /* CORRIGE LE 21/08/2026 : UN A-COUP ENTRE LA MONTEE ET LE DANDINEMENT. Deux fautes distinctes produisaient le meme symptome. LA PREMIERE : les images-cles partaient de "rotate(-2.6deg)", alors que le corps arrive de "rotate(0)" puisqu'aucune animation ne le fait tourner avant. Une animation CSS ne transitionne jamais vers sa propre image-cle de depart, elle y saute : le corps pivotait donc d'un coup de 2,6 deg des que le dandinement prenait la main. Les images-cles passent maintenant par 0 en 0 %, 50 % ET 100 %, si bien que le debut ET la fin de chaque boucle retombent exactement sur l'etat de repos, sans saut ni au demarrage ni a l'arret. LA SECONDE : le delai de 0,5 s demarrait le dandinement PENDANT la montee, encore en cours pour 0,35 s de plus (elle dure 0,85 s) : le corps se mettait a tourner alors qu'il n'avait pas fini de sortir, deux mouvements qui se genaient l'un l'autre. Le delai est porte a 0,85 s, pile la duree de la montee : le dandinement ne commence qu'une fois le pingouin arrive, jamais avant. */ .pingouin-hero-corps { transform-box: fill-box; transform-origin: 50% 100%; } .hero-visuel:hover .pingouin-hero-corps { animation: pg-hero-coucou 1.9s ease-in-out .85s infinite; } @keyframes pg-hero-coucou { 0%, 50%, 100% { transform: rotate(0); } 25% { transform: rotate(2.6deg); } 75% { transform: rotate(-2.6deg); } } @media (prefers-reduced-motion: reduce) { .pingouin-hero { transition: none; } .hero-visuel:hover .pingouin-hero-corps { animation: none; } } /* ---- Zone de depot -------------------------------------------- */ /* AGRANDIE LE 20/08/2026, a la demande : « les endroits de depot sur les outils, agrandis-les un peu ». Sept tailles comparees dans "_labo/depot-19aout.html", la D est retenue : un agrandissement HOMOTHETIQUE de 15 %. Le mot compte, c'est ce qui distingue cette piste des six autres. Elargir seule aurait aplati la zone, allonger seule l'aurait etiree : dans les deux cas le rapport change et il faut ensuite rattraper a l'oeil. Ici la largeur, les retraits, l'icone et les corps de texte grandissent tous du meme facteur, a un point pres. La zone garde donc exactement les proportions qu'elle avait, et il n'y a rien a rattraper. largeur 600 -> 690 x 1,15, portee par "--outil" retraits 44/28/26 -> 52/32/32 icone 42 -> 48, son dessin 20 -> 23 titre --t-l 20 -> --t-xl 24 sous --t-s 14 -> --t-m 17 Mesure dans la page : 600 x 290 avant, 690 x 328 apres. SOUS 640 PX RIEN NE CHANGE des retraits : la zone y occupe deja toute la largeur et son bloc dedie, plus bas dans ce fichier, garde ses 34/18/22. Seuls l'icone et les corps de texte y grandissent, ce qui est voulu : c'est la ou l'ecran est le plus petit qu'une cible de depot a le plus besoin d'etre lisible. */ .zone-enveloppe { position: relative; max-width: var(--outil); margin-inline: auto; } .depot { background: var(--surface); border: 1.5px dashed var(--champ-ligne); border-radius: var(--r-l); padding: 52px 32px 32px; text-align: center; cursor: pointer; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; } .depot:hover { border-color: var(--violet); transform: translateY(-2px); } .depot.survol { border-style: solid; border-color: var(--violet); box-shadow: 0 0 0 4px var(--violet-doux); } .depot.fini { border-style: solid; border-color: var(--lime-texte); } .depot-icone { width: 48px; height: 48px; margin: 0 auto 18px; display: grid; place-items: center; border-radius: var(--r); background: var(--violet-doux); color: var(--violet); } .depot-icone svg { width: 23px; height: 23px; } .depot h2 { font-size: var(--t-xl); margin-bottom: 4px; } .depot .sous { color: var(--ink-2); font-size: var(--t-m); margin-bottom: 24px; } .depot .limite { color: var(--ink-2); font-size: var(--t-xs); margin-top: 18px; } /* LA COLONNE DE TRAVAIL SUIT LA ZONE, depuis le 20/08/2026. La zone est passee a 690 pendant que les blocs poses dessous, reglages, liste des fichiers, bilan, apercu, restaient a 660 : ils sont empiles les uns sur les autres et ce decalage se voit. "--etroit" N'EST PAS TOUCHE, et c'est voulu. Ces 660 px ne sont pas une largeur de bloc, c'est la LARGEUR DE LECTURE du site, environ 70 signes par ligne, celle de ".contenu" et de toute la prose. La porter a 690 pour regler un alignement changerait la typographie de pages qui n'ont rien a voir. La regle vise donc les seuls ".etroit" qui SUIVENT une zone de depot dans la meme boite. Le combinateur est "~", frere general, pas un descendant : un ".etroit" range dans une
    de bas de page n'est pas un frere de la zone, il garde sa largeur de lecture. Verifie sur les 46 pages d'outil, les seuls blocs atteints sont ".reglages", ".pile", "#bilan", ".apercu-texte" et ".menu-fin", tous des blocs de travail, aucun de prose. Aucune page ne porte de ".etroit" AVANT sa zone de depot. */ .zone-enveloppe ~ .etroit { max-width: var(--outil); } /* L'etiquette signature, presente sur toutes les pages d'outil. Le cadenas etait un emoji, choix assume de Corentin le 03/08 : le dessin au trait rendait mal a cette taille, et l'emoji apportait sa propre couleur. Remplace le 09/08 par un cadenas dessine, en aplats de couleur et non au trait, ce qui repond au meme besoin sans les deux defauts de l'emoji : il changeait de forme selon la machine et ne suivait pas le theme. REVU LE 19/08/2026, a la demande : « le cadenas, on ne le voit pas ». Sept pistes comparees dans "_labo/cadenas-19aout.html", la 1 est retenue, c'est-a-dire le dessin en couleurs, garde tel quel. Deux choses seulement changent, et elles suffisent. IL PASSE DE 15 A 18 PX. C'est la vraie cause : trois couleurs, un laiton, un acier et un cerne, ne tiennent pas dans 15 px, elles s'y melangent. Un dessin en aplats a besoin de place la ou un dessin au trait s'en passe. L'etiquette grandit de 3 px avec lui, sans autre reglage : "align-items: center" la recentre toute seule. IL N'A PLUS QU'UN SEUL DESSIN. Il en avait deux, un par theme, du temps ou cette etiquette s'inversait de l'un a l'autre. Elle ne s'inverse plus depuis le passage au verre depoli, mais les deux dessins etaient restes : le meme cadenas n'avait donc pas la meme tete de jour et de nuit, sans que rien ne le justifie encore. La version cernee est gardee partout (Cf. "--img-cadenas" dans charte.css). */ /* L'ecart entre le cadenas et le texte est porte par une marge et non par "gap" : sous 640 px l'etiquette n'est plus un conteneur flex, et "gap" n'y produit plus rien. Une marge, elle, vaut dans les deux dispositions. */ /* REPRISE DU 19/08/2026, apres dix propositions comparees dans "_labo/etiquette-19aout.html" : la piste 5, verre depoli, avec les bords ronds de la piste 7, et le cadenas en couleurs conserve. ELLE PREND LA COULEUR DE L OUTIL. "--fam" est pose sur le
    de chaque page d outil par ".page.f-pdf" et ses quatre soeurs, plus haut dans ce fichier. L etiquette y puise donc directement : sur « Compresser un PDF » elle est violette, sur « Compresser une image » cyan, et ainsi de suite. Elle appartient a sa page au lieu d etre la meme partout. LE REPLI EST LE LIME, et il sert vraiment : la zone de depot du generateur de QR code n a pas de famille, pas plus que les pages sans outil. Sans repli, l etiquette y perdrait toute couleur. LE VERRE DEPOLI EST ABANDONNE LE 20/08/2026, apres mesure. Il tenait sur une transparence de 22 %, reglee a l oreille sur l idee qu au-dela le texte perdrait du contraste. La mesure a montre l inverse ET pire : le fond etait un melange de la MEME couleur que le texte, donc monter la transparence rapprochait les deux au lieu de les separer, et a 22 % le contraste tombait deja sous le seuil AA sur SIX des dix combinaisons famille-theme. Le pire cas, mesure en place et non sur la carte blanche, valait 3,39 pour 4,5 exiges. Piege dans le piege : l etiquette DEBORDE du coin de la zone, son fond reel n est donc pas la surface blanche mais le fond de page, plus sombre. Un seuil calcule sur la surface se trompait de plusieurs dixiemes. Les six pistes comparees dans "_labo/contraste-etiquette.html" se mesurent pour cette raison DANS la page, jamais par le calcul. L APLAT PLEIN EST RETENU. La teinte de famille en fond, une encre choisie par-dessus (Cf. "--fam-pdf-sur" et ses soeurs dans charte.css). Pire cas 5,02 en clair, 6,77 en sombre. C est la seule piste qui passe partout SANS renoncer a la couleur de l outil : la piste a encre unique montait a 14 mais faisait perdre a l etiquette son appartenance a sa page. CE QUE CELA COUTE, et il faut le dire : l etiquette pese plus. Elle ne se pose plus sur la zone comme une vignette translucide, elle s y affiche. C est le prix d une phrase qui doit rester lisible, et elle porte l argument central du site. L OMBRE PORTEE RESTE TOMBEE, et le cerne aussi : sur un aplat plein ils ne separent plus rien, la couleur suffit. */ /* L INCLINAISON PASSE PAR UNE VARIABLE, "--pente", depuis le 01/09/2026. Elle valait 6 degres ici et -3 sous 640 px, ecrits deux fois en dur dans deux "transform" concurrents. L etiquette recevant desormais une animation, chaque etat aurait du reecrire l angle de son palier : une valeur, trois endroits, et la promesse d en oublier un. La variable est declaree ici, redeclaree une seule fois dans le palier telephone, et tout le reste la lit. */ .etiquette { --pente: 6deg; position: absolute; top: -14px; right: -10px; z-index: 2; display: inline-flex; align-items: center; background: var(--fam, var(--lime)); color: var(--sur-fam, var(--sur-fam-repli)); border: 1px solid transparent; font-family: var(--f-mono); font-size: var(--t-xs); font-weight: 600; padding: 7px 12px; border-radius: var(--r-pill); transform: rotate(var(--pente)); box-shadow: none; transition: transform .25s ease; /* ---- ELLE FLOTTE, demande du 01/09/2026, reprise le meme jour. PREMIER JET : UN BALANCEMENT, 2,5 degres autour du coin haut gauche. Capture a l appui, Corentin l a trouve trop proche d un tremblement : « une meilleure animation, qu elle flotte legerement dans la page ». Un pivot de coin donne un mouvement de charniere, ce qui va bien a une flamme mais pas a quelque chose qui doit paraitre en apesanteur. LE FLOTTEMENT NE PIVOTE PLUS, IL DERIVE. L angle de base, "--pente", reste fixe pendant tout le cycle ; ce qui bouge est une translation, un leger va-et-vient vertical accompagne d un frisson horizontal deux fois plus faible, comme un objet leger pousse par un souffle d air plutot que par une charniere. La translation ne depend pas du point de pivot : le coin haut gauche, qui mord sur la zone de depot, reste l ancre de "--pente" sans qu il soit besoin d y toucher. QUATRE TEMPS INEGAUX ET NON DEUX SYMETRIQUES, meme logique que le dandinement de la flamme plus bas dans ce fichier : un aller-retour a deux temps se voit comme un metronome, une trajectoire a quatre temps se lit comme une derive. Le point haut n est pas au milieu du cycle mais aux deux tiers, ce qui laisse l etiquette redescendre plus longtemps qu elle ne monte, comme un objet qui flotte retombe plus qu il ne s eleve. LE CYCLE PASSE DE 4,2 A 6,4 S. « Legerement » commandait deja l amplitude, il commande maintenant aussi la vitesse : un objet qui flotte ne se depeche pas. Plus lent que tout le reste du site, y compris son propre premier jet. */ transform-origin: 0% 0%; animation: mtb-etiquette-flotte 6.4s ease-in-out infinite; } @keyframes mtb-etiquette-flotte { 0% { transform: rotate(var(--pente)) translate(0, 0); } 30% { transform: rotate(var(--pente)) translate(1px, -3px); } 65% { transform: rotate(var(--pente)) translate(-1.5px, -6px); } 85% { transform: rotate(var(--pente)) translate(-0.5px, -2px); } 100% { transform: rotate(var(--pente)) translate(0, 0); } } /* Meme coupure que pour les deux autres animations sans fin du site : ce qui ne s arrete jamais doit pouvoir etre arrete. */ @media (prefers-reduced-motion: reduce) { .etiquette { animation: none; } } /* "display: inline-block" est indispensable et non decoratif : sous 640 px l'etiquette repasse en "inline-block" (voir plus bas), elle n'est donc plus un conteneur flex et ce pseudo-element retombait en "inline". Une boite inline ignore width et height : le cadenas avait la bonne image de fond et zero pixel de cote, il ne s'affichait pas du tout sur telephone. */ .etiquette::before { content: ""; flex: none; display: inline-block; vertical-align: -4px; width: 18px; height: 18px; margin-right: 6px; background: var(--img-cadenas) center / contain no-repeat; } /* L ANIMATION EST COUPEE AU SURVOL, ET CE N EST PAS FACULTATIF : une animation en cours bat toute declaration "transform" ordinaire, le redressement au survol n aurait simplement pas eu lieu. Le geste y gagne du sens, l etiquette s arrete quand on la regarde. */ .zone-enveloppe:hover .etiquette { animation: none; transform: rotate(calc(var(--pente) - 4deg)) scale(1.04); } /* ---- Boutons -------------------------------------------------- */ /* "min-height: 44px" : c'est la taille minimale d'une cible tactile. Mesure du 09/08 sur la page catalogue en 375 px, 37 elements cliquables passaient sous 44 px de haut. En dessous, le doigt rate la cible et l'utilisateur croit que le site ne repond pas. */ .btn { font: inherit; font-size: var(--t-s); font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 22px; min-height: 44px; border-radius: var(--r-s); border: 1.5px solid transparent; cursor: pointer; background: var(--ink); color: var(--bg); transition: background .15s ease, color .15s ease, border-color .15s ease, transform .08s ease; text-decoration: none; white-space: nowrap; } .btn:hover { background: var(--violet); color: var(--sur-violet); } .btn:active { transform: scale(.97); } .btn svg { width: 16px; height: 16px; } /* Le bouton principal porte le corps de lecture et non la taille secondaire : c'est l'action que la page demande, elle ne peut pas etre ecrite plus petit que le texte qui l'entoure. Les dizaines de petits boutons d'action, eux, restent a la taille secondaire. */ .btn.principal { background: var(--violet); color: var(--sur-violet); font-size: var(--t-m); padding: 12px 26px; } .btn.principal:hover { background: var(--violet-fonce); } .btn.contour { background: transparent; color: var(--ink); border-color: var(--ink); } .btn.contour:hover { background: var(--ink); color: var(--bg); } .btn.discret { background: transparent; color: var(--ink-2); border-color: var(--border); font-weight: 500; } .btn.discret:hover { background: var(--surface-2); color: var(--ink); } .btn:disabled, .btn[aria-disabled="true"] { opacity: .45; pointer-events: none; } .btn.large { width: 100%; } /* ---- Champs --------------------------------------------------- */ .champ { display: flex; flex-direction: column; gap: 6px; min-width: 150px; } .champ label, .etiq { font-size: var(--t-s); font-weight: 600; color: var(--ink-2); } input[type=text], input[type=number], input[type=email], select, textarea { font: inherit; font-size: var(--t-s); width: 100%; color: var(--ink); background: var(--surface); border: 1px solid var(--champ-ligne); border-radius: var(--r-s); padding: 9px 12px; outline: none; transition: border-color .15s ease; } input:focus, select:focus, textarea:focus { border-color: var(--violet); } input[type=range] { width: 100%; accent-color: var(--violet); } input[type=checkbox], input[type=radio] { accent-color: var(--violet); width: 16px; height: 16px; } .reglages { display: flex; gap: 20px; flex-wrap: wrap; align-items: flex-end; padding: 16px; margin-block: 18px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); } /* Trois niveaux de compression plutot qu'un curseur technique. */ .niveaux { display: flex; gap: 8px; flex-wrap: wrap; } .niveaux input { position: absolute; opacity: 0; pointer-events: none; } .niveaux label { border: 1.5px solid var(--champ-ligne); border-radius: var(--r-s); padding: 9px 16px; cursor: pointer; font-size: var(--t-s); font-weight: 600; color: var(--ink-2); background: var(--surface); } .niveaux label:hover { border-color: var(--border-fort); color: var(--ink); } .niveaux input:checked + label { border-color: var(--violet); background: var(--violet-doux); color: var(--violet); } /* Repere pose sur l'option conseillee, dans l'esprit de l'etiquette "zero upload" mais en plus petit : il informe sans crier, et il ne doit pas devenir un argument commercial sur un choix technique. */ /* Signale le niveau conseille. Meme regle que la pastille "populaire" et meme correction, faite le 09/08/2026 sur signalement de Corentin : le jeton d exception --t-pastille avait ete cree la veille pour cette raison exacte, et n avait ete applique qu a un seul des deux composants. Ici la pastille etait restee a --t-xs, remonte a 12 px par la regle du plancher de D84, et mesurait 86 px pour un bouton de 93 : elle etait aussi large que ce qu elle signalait. Une pastille ne se lit pas, elle se remarque. */ .niveaux label[data-repere] { position: relative; } .niveaux label[data-repere]::after { content: attr(data-repere); position: absolute; top: -6px; right: -4px; background: var(--etiquette-fond); color: var(--etiquette-texte); font-family: var(--f-mono); font-size: var(--t-pastille); font-weight: 600; letter-spacing: 0; padding: 1px 6px; border-radius: var(--r-pill); white-space: nowrap; pointer-events: none; } .niveaux input:focus-visible + label { outline: 2px solid var(--violet); outline-offset: 3px; } /* ---- Resultat ------------------------------------------------- */ .resultat { display: flex; align-items: baseline; justify-content: center; gap: 12px; flex-wrap: wrap; } .poids { font-size: var(--t-xl); font-weight: 600; font-family: var(--f-mono); } .poids.avant { color: var(--ink-2); font-size: var(--t-l); text-decoration: line-through; text-decoration-color: var(--border-fort); } .poids.apres { color: var(--violet); } .gain { display: inline-block; margin-top: 10px; background: var(--violet-doux); color: var(--violet); font-family: var(--f-mono); font-size: var(--t-xs); font-weight: 600; padding: 4px 12px; border-radius: var(--r-pill); } /* Carte de fichier dans une liste de traitement par lots. */ .fichier { display: flex; align-items: center; gap: 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 12px 14px; } .fichier .nom { font-weight: 600; font-size: var(--t-m); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fichier .detail { font-size: var(--t-s); color: var(--ink-2); } .fichier .corps { flex: 1; min-width: 0; } /* Numero d'ordre, pour les outils ou l'ordre des fichiers compte. */ .fichier .poignee { flex: none; width: 22px; text-align: center; font-size: var(--t-xs); font-weight: 600; color: var(--ink-3); } .fichier .actions .btn { padding: 7px 12px; font-size: var(--t-s); } .fichier .actions .fleche { padding: 7px 9px; } .fichier .actions .fleche svg { width: 14px; height: 14px; } .progression { height: 6px; border-radius: var(--r-pill); background: var(--surface-2); overflow: hidden; } .progression > i { display: block; height: 100%; background: var(--violet); border-radius: inherit; transition: width .25s ease; } /* ---- Progression d'ensemble d'un lot, et sa mascotte ---------- Posee le 21/08/2026. Fabriquee par "MTB.outil" au premier fichier traite, jamais ecrite dans une page. Le bloc entier apparait UNE fois, au premier fichier traite, et reste jusqu'a ce que la liste soit videe. C'est un seul decalage de mise en page par lot, au moment ou le visiteur vient de lancer le traitement et ou la page bouge de toute facon. Le poser des la creation des cartes aurait ajoute 54 px de vide au-dessus des quarante et un outils qui n'affichent aucune progression. La toile a confettis DEBORDE vers le haut, elle ne reserve aucune place. C'est voulu : lui donner sa hauteur en flux aurait ajoute soixante-douze pixels de vide au-dessus de chaque liste. Elle ne recoit aucun clic, "pointer-events" est coupe. */ .lot-progression { position: relative; margin: 0 0 14px; } .lot-piste { position: relative; height: 34px; } .lot-confettis { position: absolute; left: 0; top: -72px; width: 100%; height: calc(100% + 72px); pointer-events: none; z-index: 2; } .lot-mascotte { position: absolute; bottom: 0; left: 0; width: 23px; height: 28px; /* "object-fit: contain" depuis le passage a "mascotte-course.png" le 30/08/2026 : ce dessin est presque carre (136 x 140) la ou la boite reste en portrait (23 x 28) heritee de l ancien SVG. Sans lui, l image aurait ete ecrasee de 15 % en largeur. */ object-fit: contain; transform-origin: 50% 92%; transition: left .25s ease; } /* DEPUIS LE 30/08/2026, PLUS AUCUN PINGOUIN NE PASSE PAR CES CLASSES. Le heros a rejoint le logotype de l en-tete et la mascotte de progression, tous les trois passes a "mascotte-logo.png" (le meme pingouin-outil que la vignette "Vos derniers outils") : leur couleur est figee dans le pixel, suit le halo blanc plus bas et non plus une variable de theme. Les classes "pg-corps/pg-ventre/pg-bec/ pg-oeil" et la variable "--pg-corps" restaient sans plus aucun dessin a colorer, elles sont retirees. */ /* Le dandinement est une rotation et une translation, jamais une largeur ni une hauteur : il reste sur le fil de composition et ne declenche aucun recalcul de mise en page. */ @keyframes pg-dandine { 0%, 100% { transform: rotate(-10deg) translateY(0); } 50% { transform: rotate(10deg) translateY(-3px); } } .lot-mascotte.marche { animation: pg-dandine .42s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { .lot-mascotte.marche { animation: none; } .lot-mascotte { transition: none; } } /* ---- Vignettes de page ---------------------------------------- Grille d'apercus, pour les outils qui montrent les pages d'un document. L'image garde un fond blanc en clair comme en sombre : c'est une page de papier, pas un element d'interface. */ .vignettes { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 14px; } .vignette { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 8px 8px 10px; text-align: center; transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease; } .vignette:hover { border-color: var(--violet-ligne); transform: translateY(-2px); box-shadow: var(--ombre-douce); } .vignette img { display: block; width: 100%; height: auto; background: #FFFFFF; border: 1px solid var(--border); border-radius: var(--r-s); } /* Cadre de hauteur fixe : une page qu'on fait pivoter a l'ecran ne doit pas faire sauter toute la grille. */ .vignette .cadre { display: flex; align-items: center; justify-content: center; min-height: 150px; } .vignette .cadre img { width: auto; max-width: 100%; max-height: 150px; transition: transform .2s ease, max-height .2s ease; } .vignette .rang { font-size: var(--t-s); font-weight: 600; margin-top: 8px; } .vignette .legende { font-size: var(--t-xs); color: var(--ink-3); font-family: var(--f-mono); } .vignette .actions { display: flex; justify-content: center; gap: 6px; margin-top: 8px; } .vignette .actions .btn { padding: 6px 10px; font-size: var(--t-s); } /* Page retenue, pour les outils de selection de pages. */ .vignette[role="checkbox"] { cursor: pointer; user-select: none; } .vignette[role="checkbox"]:focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; } .vignette.choisie { border-color: var(--violet); box-shadow: 0 0 0 1px var(--violet); } .vignette.choisie .rang { color: var(--violet); } .vignette.choisie .rang::after { content: ' ✓'; } /* ---- Zone de rendu d'un fichier ouvert ------------------------- Sert aux outils qui montrent un contenu plutot qu'ils ne le transforment : un document Word, un modele 3D, un QR code. */ .rendu { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 22px; } /* Document Word rendu a l'ecran. Fond papier dans les deux themes : c'est un document, pas un element d'interface. */ .document { background: #FFFFFF; color: #1A1C18; border: 1px solid var(--border); border-radius: var(--r); padding: clamp(20px, 4vw, 44px); max-width: 780px; margin-inline: auto; font-size: var(--t-m); line-height: 1.65; overflow-wrap: anywhere; } .document h2 { font-size: var(--t-xl); margin: 24px 0 8px; color: #10120F; } .document h3 { font-size: var(--t-l); margin: 20px 0 6px; color: #10120F; } .document h4 { font-size: var(--t-m); margin: 18px 0 6px; color: #3A3D36; } .document p { margin-bottom: 10px; } .document ul { margin: 0 0 12px 22px; list-style: disc; } .document li { margin-bottom: 4px; } .document img { max-width: 100%; height: auto; border-radius: 6px; margin: 10px 0; } .document a { color: #5B21B6; } .document table { border-collapse: collapse; width: 100%; margin: 12px 0; font-size: var(--t-s); } .document th, .document td { border: 1px solid #DDDFD8; padding: 7px 10px; text-align: left; vertical-align: top; } .document th { background: #F3F4F1; font-weight: 600; } .document th p:last-child, .document td p:last-child { margin-bottom: 0; } /* Feuille de calcul rendue a l'ecran. Fond papier dans les deux themes, comme le document Word : c'est un contenu, pas une interface. */ .feuilles { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; } .feuilles button { font: inherit; font-size: var(--t-s); cursor: pointer; background: var(--surface); color: var(--ink-2); border: 1px solid var(--border); border-radius: var(--r-pill); padding: 7px 14px; } .feuilles button:hover { border-color: var(--border-fort); color: var(--ink); } .feuilles button[aria-pressed="true"] { background: var(--violet); color: var(--sur-violet); border-color: var(--violet); } .tableur-cadre { overflow: auto; max-height: 70vh; border: 1px solid var(--border); border-radius: var(--r); background: #FFFFFF; } .tableur { border-collapse: collapse; font-size: var(--t-s); color: #1A1C18; } .tableur th, .tableur td { border: 1px solid #DDDFD8; padding: 5px 9px; white-space: nowrap; max-width: 380px; overflow: hidden; text-overflow: ellipsis; } .tableur td.nombre { text-align: right; font-family: var(--f-mono); font-variant-numeric: tabular-nums; } .tableur .repere { background: #F0F1EE; color: #6B6F65; font-weight: 600; font-size: var(--t-xs); text-align: center; position: sticky; top: 0; z-index: 1; } .tableur tr > .repere:first-child { left: 0; z-index: 2; } /* Diapositive. La taille du texte suit la largeur de la diapositive, pour que le rendu reste juste a toutes les tailles d'ecran. */ .diapos { display: flex; flex-direction: column; gap: 30px; } .diapo { container-type: size; position: relative; width: 100%; background: #FFFFFF; color: #1A1C18; border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; } .diapo-flux { position: absolute; inset: 6% 8%; display: flex; flex-direction: column; gap: .6em; } .diapo-texte { overflow: hidden; display: flex; flex-direction: column; justify-content: center; } .diapo-texte p { margin: 0 0 .35em; line-height: 1.25; text-wrap: pretty; } .diapo-texte p:last-child { margin-bottom: 0; } .diapo-texte p.puce { position: relative; padding-left: 1.1em; } .diapo-texte p.puce::before { content: '•'; position: absolute; left: 0; top: 0; font-size: var(--taille-puce, 1em); color: #55594F; } .diapo-image { display: flex; align-items: center; justify-content: center; } .diapo-image img { max-width: 100%; max-height: 100%; object-fit: contain; } .diapo-tableau { overflow: hidden; font-size: calc(14 / var(--largeur-pt) * 100cqw); } .diapo-tableau table { border-collapse: collapse; width: 100%; } .diapo-tableau th, .diapo-tableau td { border: 1px solid #DDDFD8; padding: .3em .5em; text-align: left; } .diapo-tableau th { background: #F3F4F1; font-weight: 600; } .diapo-absent { display: flex; align-items: center; justify-content: center; text-align: center; border: 1px dashed #CFD2C8; border-radius: 6px; color: #6B6F65; font-size: calc(13 / var(--largeur-pt) * 100cqw); } /* Numero et commentaires sous chaque diapositive. */ .diapo-pied { display: flex; justify-content: space-between; gap: 14px; margin-top: 8px; font-size: var(--t-xs); color: var(--ink-3); } .diapo-notes { margin-top: 10px; padding: 12px 15px; font-size: var(--t-s); color: var(--ink-2); background: var(--surface-2); border-radius: var(--r-s); white-space: pre-wrap; } /* Reglages avances, replies par defaut : ils ne doivent pas encombrer le chemin de celui qui veut juste un code noir sur blanc. */ .perso > summary { cursor: pointer; list-style: none; user-select: none; font-size: var(--t-s); font-weight: 600; color: var(--violet); display: inline-flex; align-items: center; gap: 6px; } .perso > summary::-webkit-details-marker { display: none; } .perso > summary::before { content: "+"; font-family: var(--f-mono); } .perso[open] > summary::before { content: "−"; } .perso input[type=color] { width: 100%; height: 34px; padding: 2px; border: 1px solid var(--champ-ligne); border-radius: var(--r-s); background: var(--surface); cursor: pointer; } .perso input[type=file] { font-size: var(--t-xs); color: var(--ink-2); } /* ---- Atelier QR code ------------------------------------------ Reglages a gauche, code a droite. Empiles, les deux poussaient l'outil a 854px de haut, soit un ecran entier, pendant que la moitie droite de la zone restait vide. */ .qr-atelier { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--e-5); align-items: start; } .qr-reglages { display: flex; flex-direction: column; gap: var(--e-4); min-width: 0; } .qr-sortie { display: grid; place-items: center; min-width: 240px; } .qr-sortie img, .qr-sortie canvas, .qr-sortie svg { max-width: 100%; height: auto; } #alerte:not(:empty) { margin-top: var(--e-3); } @media (max-width: 640px) { .qr-atelier { grid-template-columns: 1fr; } .qr-sortie { min-width: 0; } } /* Vue 3D. Le fond est peint par WebGL, pas par le CSS. */ .scene3d { display: block; width: 100%; height: clamp(300px, 55vh, 560px); border: 1px solid var(--border); border-radius: var(--r); cursor: grab; touch-action: none; transition: box-shadow .18s ease, border-color .18s ease; } .scene3d:active { cursor: grabbing; } /* Vue activee : la molette y zoome au lieu de faire defiler la page. Un liseré le dit, sinon le changement de comportement est invisible. */ .scene3d.actif { border-color: var(--violet); box-shadow: 0 0 0 3px var(--violet-doux); } /* Fiche de chiffres, sous un fichier ouvert. */ .chiffres { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; } .chiffre { background: var(--surface-2); border-radius: var(--r-s); padding: 12px 14px; } .chiffre .valeur { font-family: var(--f-mono); font-size: var(--t-l); font-weight: 600; } .chiffre .quoi { font-size: var(--t-xs); color: var(--ink-2); margin-top: 2px; } /* ---- Messages ------------------------------------------------- */ .message { border: 1px solid var(--border); background: var(--surface); border-radius: var(--r-s); padding: 12px 15px; font-size: var(--t-s); color: var(--ink-2); } .message b { color: var(--ink); } .message.local { border-color: var(--lime-ligne); background: var(--lime-doux); color: var(--lime-texte); } .message.alerte { border-color: var(--alerte-ligne); background: var(--alerte-doux); color: var(--alerte); } /* ---- Trous a combler avant publication ------------------------- Marque volontairement voyante : une page legale incomplete ne doit pas pouvoir partir en ligne sans qu'on le voie. */ .brouillon { border: 2px dashed var(--alerte-ligne); background: var(--alerte-doux); color: var(--alerte); border-radius: var(--r); padding: 14px 18px; font-size: var(--t-s); max-width: var(--etroit); margin: 0 auto 26px; } .brouillon b { color: var(--alerte); } .trou { background: var(--alerte-doux); color: var(--alerte); border: 1px solid var(--alerte-ligne); border-radius: var(--r-s); padding: 1px 7px; font-family: var(--f-mono); font-size: .92em; font-weight: 500; } /* ---- Cartes d'outils voisins ---------------------------------- */ /* auto-fill et non auto-fit. Avec auto-fit, une rangee incomplete voit ses cartes s'etirer pour combler le vide : la section a trois outils affichait des cartes de 308px quand la section juste en dessous en affichait de 228, sur 26 pages du site. auto-fill garde les colonnes vides, donc une carte fait la meme largeur partout. */ .grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: var(--e-3); } /* VARIANTE CENTREE, posee le 25/08/2026 pour "/404.html". Deux differences avec la grille ordinaire, et les deux comptent. "auto-fit" au lieu de "auto-fill" reduit a zero les pistes que personne n occupe, sans quoi les cartes resteraient calees a gauche d une page entierement centree. Une BORNE HAUTE de 300 px sur la piste, ensuite, sans laquelle les quatre cartes s etireraient sur toute la largeur : quatre pavés de 460 px de large pour trois mots chacun ne sont pas plus centres, ils sont juste enormes. Bornees, elles se groupent au milieu, ce que "justify-content" acheve. */ /* LE SELECTEUR PORTE LES DEUX CLASSES, ET C EST OBLIGATOIRE. Mesure du 25/08/2026 : ecrit ".grille-centree" seul, il ne s appliquait jamais. Huit regles media plus bas dans ce fichier fixent le nombre de colonnes de ".grille" par palier, de deux a huit ; a specificite egale, la derniere ecrite gagne, et elles gagnaient toutes. Doubler la classe suffit a passer devant sans avoir a deplacer quoi que ce soit ni a poser un "!important". */ /* SEULEMENT QUAND IL Y A DE LA PLACE A CENTRER. Mesure a 375 px : la colonne utile fait 327 px, la borne haute de 300 px rendait donc une carte de 300 px flanquee de 13 px de vide de chaque cote, quand la grille ordinaire lui donnait toute la largeur. Centrer un element seul sur sa ligne ne veut rien dire : sous 640 px la variante ne s applique pas et la grille reprend son comportement normal. */ @media (min-width: 640px) { .grille.grille-centree { grid-template-columns: repeat(auto-fit, minmax(230px, 300px)); justify-content: center; } } .carte { display: block; text-decoration: none; color: inherit; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: var(--e-4); transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease; } .carte:hover { border-color: var(--violet-ligne); transform: translateY(-2px); box-shadow: var(--ombre-douce); color: inherit; } .carte .titre { font-size: var(--t-m); font-weight: 600; margin-bottom: var(--e-1); } .carte p { font-size: var(--t-s); color: var(--ink-2); } /* ---- Carte d'outil -------------------------------------------- Une icone, un titre, une phrase. L'icone n'est pas une decoration : sur un catalogue de 18 entrees, elle est le seul moyen de retrouver un outil sans lire, et c'est ce qui manquait le plus au site. */ .outil { display: grid; grid-template-columns: auto 1fr; gap: var(--e-3); align-items: start; text-decoration: none; color: inherit; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: var(--e-4); transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease; } .outil:hover { border-color: var(--violet-ligne); transform: translateY(-2px); box-shadow: var(--ombre-douce); color: inherit; } /* La couleur du pave passe par deux variables locales plutot que par une regle par famille : une seule declaration de fond et une seule de survol suffisent alors pour les quatre, au lieu de huit. Les valeurs de repli gardent le violet si une carte n a pas encore sa classe de famille, ce qui evite toute icone sans couleur. */ .outil .ico { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: var(--r-s); background: var(--fam-doux, var(--violet-doux)); color: var(--fam, var(--violet)); transition: background .18s ease, color .18s ease; } /* Meme specificite que la regle ci-dessus, posee apres : c est ce qui lui permet de gagner. Une classe seule (.ico--pdf) perdrait. */ .outil .ico--pdf { --fam: var(--fam-pdf); --fam-doux: var(--fam-pdf-doux); } .outil .ico--conv { --fam: var(--fam-conv); --fam-doux: var(--fam-conv-doux); } .outil .ico--img { --fam: var(--fam-img); --fam-doux: var(--fam-img-doux); } .outil .ico--lire { --fam: var(--fam-lire); --fam-doux: var(--fam-lire-doux); } .outil .ico--enr { --fam: var(--fam-enr); --fam-doux: var(--fam-enr-doux); } /* Au survol, le pave prend la teinte pleine de sa propre famille. --sur-violet bascule deja avec le theme (blanc en clair, sombre en sombre), il convient donc aux quatre familles sans etre duplique. */ .outil:hover .ico { background: var(--fam, var(--violet)); color: var(--sur-violet); } /* RETOUCHE DU 19\08\2026, a la demande, ELARGIE LE MEME JOUR : EN THEME SOMBRE SEULEMENT, les traits des icones d outil passent au blanc, PARTOUT et non plus au seul survol. Les jetons employes jusqu ici sont tous des valeurs SOMBRES dans ce theme : "--surface" #1F211C pour la bulle, la tuile du catalogue et celle du bandeau, "--sur-violet" #16121F pour la tuile survolee. Or ces icones sont posees sur un aplat de famille VIF, violet clair, ambre ou cyan. Le trait s y lisait donc en creux, comme un trou sombre dans une pastille lumineuse, la ou tout le reste du theme sombre ecrit en clair sur du fonce. La specificite est prise au serieux ici : ".grille .outil .ico" et ".bandeau > .outil .ico" valent (0,3,0) et sont ecrites PLUS BAS dans ce fichier. Une regle en "[data-theme] .outil .ico" vaudrait (0,3,0) elle aussi et perdrait sur la position. Le ":root" ajoute le poids qui manque, (0,4,0), et le blanc gagne quelle que soit sa place dans le fichier. Le blanc est ecrit en dur et non pris a un jeton : aucun jeton de la charte ne vaut du blanc pur dans ce theme, "--ink" y est un gris casse a #ECEDE8. */ :root[data-theme="dark"] .outil .ico, :root[data-theme="dark"] .outil:hover .ico, :root[data-theme="dark"] .bulle .rond { color: #FFFFFF; } .outil .ico svg { width: 20px; height: 20px; } .outil .titre { display: block; font-size: var(--t-m); font-weight: 600; margin-bottom: var(--e-1); } .outil .txt { display: block; font-size: var(--t-s); color: var(--ink-2); line-height: 1.5; } /* ---- Arguments ------------------------------------------------- Volontairement different d'une carte d'outil : ni fond, ni bordure, un filet lime en tete. Un argument se lit, un outil se clique. Tant que les deux partageaient le meme composant, l'oeil ne pouvait pas distinguer ce qui etait cliquable de ce qui ne l'etait pas. C'est aussi le seul endroit de l'accueil ou le lime parle. */ /* "auto-fit" ET NON "auto-fill", change le 25/08/2026 a la demande : « centre sur la page les onglets de Ce que ca change, fais en sorte que ca prenne toute la place de l ecran ». La difference entre les deux tient en une ligne et elle est invisible tant que l ecran est etroit. "auto-fill" cree autant de colonnes de 230 px que la largeur en permet, MEME VIDES : a 1 920 px il en fabriquait huit pour quatre arguments, qui restaient donc plaques a gauche sur la moitie de la page. "auto-fit" reduit a zero les colonnes qu aucun element n occupe, et les quatre restantes se partagent toute la largeur. Le texte est centre dans sa colonne pour la meme raison : un filet de 2 px qui court sur 480 px avec trois mots cales a gauche dessous se lit comme un debut de ligne, pas comme un onglet. */ .arguments { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--e-5) var(--e-6); } .argument { padding-top: var(--e-4); border-top: 2px solid var(--lime-trait); text-align: center; } .argument .titre { font-size: var(--t-l); font-weight: 600; margin-bottom: var(--e-2); } .argument p { font-size: var(--t-s); color: var(--ink-2); } /* ---- Emplacement publicitaire --------------------------------- Jamais au-dessus de la zone de depot, jamais entre le depot du fichier et le resultat. */ /* Couleur et taille : --ink-3 sur --surface-2 ne donnait que 4.29 en clair et 4.12 en sombre, sous le seuil AA de 4.5, et l'etiquette tombait a 9px. Or la mention "publicite" doit rester lisible, c'est une obligation d'affichage, pas une legende decorative. */ /* Contour marque plutot que discret : le fond creuse ne se detache du fond de page qu'a 1.15 en clair, la zone n'existait pas visuellement. Or separer clairement le publicitaire de l'editorial n'est pas une coquetterie, c'est ce qu'on attend d'un site qui affiche de la publicite, et c'est d'autant plus vrai depuis que le bloc est remonte au-dessus de la ligne de flottaison. */ /* "max-width" pose le 09/08/2026. Le bloc n avait aucune largeur maximale : il prenait toute celle du conteneur, soit 1 672 px sur un ecran de 1920 pour 96 px de haut. Aucun format publicitaire reel ne fait cette taille, les formats servis par les regies sont le 728x90 et le 970x250. Le jour ou une regie est branchee, la banniere serait apparue perdue au milieu d un cadre gris demesure, et il aurait fallu refaire la mise en page des 23 pages concernees. Cale sur le 970 px du plus grand format, le cadre correspond enfin a ce qui viendra dedans. */ .pub { display: grid; place-items: center; min-height: 96px; margin-block: var(--e-6); max-width: 970px; margin-inline: auto; background: var(--surface-2); border: 1px solid var(--champ-ligne); border-radius: var(--r-s); color: var(--ink-2); font-size: var(--t-xs); position: relative; } .pub::before { content: "PUBLICITE"; position: absolute; top: 7px; left: 12px; font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: .06em; color: var(--ink-2); } /* LES EMPLACEMENTS SONT VISIBLES, RALLUMES LE 21/08/2026 A LA DEMANDE DE CORENTIN. Ils avaient ete masques la veille par une regle ".pub { display: none; }" posee ici meme, et ils le seront a nouveau sur simple demande : il suffit de reposer cette ligne, le balisage n'a jamais bouge. LES DEUX RAISONS DU MASQUAGE RESTENT VRAIES, elles sont ecrites ici pour que la question se repose au bon moment et non pour trancher a la place de qui decide. La premiere est d'apparence : un encadre vide portant le mot PUBLICITE dit au premier visiteur que le site n'est pas fini, et il occupe la meilleure place de la page pour ne rien montrer. LA SECONDE EST JURIDIQUE ET ELLE PESE PLUS LOURD. Les mentions legales et la politique de confidentialite affirment aujourd'hui que le site ne diffuse aucune publicite. Un emplacement affiche les contredit a l'oeil, meme vide. Le site part par ailleurs sous le regime de l'editeur NON PROFESSIONNEL, qui ne tient que tant qu'aucune activite commerciale n'est exercee. Le jour ou de vraies annonces tournent, ces deux textes et ce regime changent ensemble. TROISIEME POINT, POUR LE JOUR OU LES VRAIES ANNONCES ARRIVERONT : la CSP de "site/_headers" est "default-src 'self'" sans aucune exception externe, et elle bloquera AdSense net. */ /* ---- Contenu editorial ---------------------------------------- */ /* Cale a gauche sur la grille de la page, et non centre. Centre dans un conteneur large, son bord gauche ne tombait sur rien : les titres de l'editorial demarraient 156px a droite de tout le reste de la page, en-tete et pied compris, sur 28 pages sur 29. L'oeil le sent sans savoir le nommer, et c'est ce qui fait "amateur". */ /* Le bloc publicitaire, tant qu'il se trouvait juste avant, tenait lieu de separateur. Depuis qu'il est remonte en haut de page, l'editorial venait buter contre la section precedente : il porte donc son propre espace, au lieu de dependre d'un voisin. */ .contenu { max-width: var(--etroit); color: var(--ink-2); margin-top: var(--e-7); } .contenu h2 { color: var(--ink); margin: var(--e-6) 0 var(--e-2); } .contenu h2:first-child { margin-top: 0; } .contenu p { font-size: var(--t-m); margin-bottom: var(--e-3); } /* Deux colonnes au dela de 1 400 px. Mesure du 09/08 sur une page d outil affichee en 1920 px : ce bloc, qui est la partie la plus longue de la page, faisait 660 px de large et laissait 1 141 px de vide a sa droite, soit 68 % de l ecran, sur 26 pages sur 27. La largeur de lecture ne bouge pas, c est justement elle qu il ne faut pas toucher : au dela d environ 70 signes par ligne l oeil perd le debut de la ligne suivante. Ce qui change, c est le nombre de colonnes. Chaque colonne garde donc ses 660 px et la page se raccourcit de moitie. "columns" et non "grid" : le decoupage suit le fil du texte, aucun balisage a ajouter dans les 26 pages. "break-inside" empeche qu un titre finisse en bas d une colonne et son paragraphe en haut de la suivante. En dessous de 1 400 px, rien ne change. */ @media (min-width: 1400px) { /* La largeur maximale vaut deux colonnes de lecture plus la gouttiere, et pas "none". Premier essai fait sans elle : les colonnes prenaient 804 px chacune, soit 95 signes par ligne, et le defaut qu on voulait corriger etait remplace par un autre. */ .contenu { max-width: calc(var(--etroit) * 2 + var(--e-8)); columns: 2; column-gap: var(--e-8); } .contenu > * { break-inside: avoid; } .contenu h2 { break-after: avoid; } .contenu h2:first-child { margin-top: 0; } } /* ---- Pied de page --------------------------------------------- */ /* Respire davantage et se pose sur une surface distincte. Une seule ligne serree sur le fond de page donnait un pied famelique a un site dont l'argument central est la confiance : le pied est justement l'endroit ou on va chercher qui edite et a quelles conditions. */ /* "margin-top: auto" est ce qui plaque le pied en bas d'une page courte (la 404, la page de consentement) : il ne doit pas etre remplace par une marge fixe. L'air au-dessus vient donc du padding de "main". */ .pied { margin-top: auto; border-top: 1px solid var(--border); background: var(--surface-2); padding-block: var(--e-6); color: var(--ink-2); font-size: var(--t-xs); } main { padding-bottom: var(--e-8); } .pied > .page { display: flex; justify-content: space-between; gap: var(--e-4); flex-wrap: wrap; align-items: center; } .pied a { color: var(--ink-2); text-decoration: none; } .pied a:hover { color: var(--ink); text-decoration: underline; } .pied nav { display: flex; gap: 18px; flex-wrap: wrap; } /* ---- Banniere de consentement --------------------------------- Refuser doit couter exactement un clic, comme accepter. */ /* Format 1, le « bandeau bas », retenu par Corentin le 20/08/2026 apres comparaison des trois formats dans le banc "_labo/bandeau-consentement-20aout.html". Il prend toute la largeur et laisse la page lisible derriere lui. Le format 2, la fenetre centrale, rapporte davantage parce qu'il force la reponse, et c'est exactement pour ca qu'il a ete ecarte : le site vend le fait de ne rien exiger de personne, ouvrir sur un mur contredirait l'argument dans les trois premieres secondes. Ce qui change par rapport a l'etat precedent : le "max-width: 520px" et le "margin-inline: auto" en faisaient une carte etroite centree, ce qui n'etait aucun des trois formats. La largeur est desormais bornee de l'interieur, sur ".dedans", pour que le texte ne s'etire pas en une seule ligne illisible sur un ecran large. */ .consentement { position: fixed; inset: auto 16px 16px; z-index: 50; background: var(--surface); border: 1px solid var(--border-fort); border-radius: var(--r); box-shadow: var(--ombre); padding: 18px 20px; } .consentement .dedans { display: grid; grid-template-columns: 1fr auto; gap: 22px; align-items: center; max-width: 1200px; margin-inline: auto; } .consentement p { font-size: var(--t-s); color: var(--ink-2); margin: 0 0 10px; } .consentement .titre-cmp { display: block; font-size: var(--t-m); margin-bottom: 8px; } /* Le logo porte SEUL l'identite : le nom du site a ete retire du bandeau le 20/08. C'est le dessin du favicon, couleurs ecrites en dur et non prises aux jetons du theme, parce qu'un logo qui change de couleur avec le fond n'est plus un logo. */ .consentement .logo-cmp { width: 26px; height: 26px; display: block; margin-bottom: 10px; } /* La seule ligne que la plateforme de Google ne dira jamais toute seule : que les fichiers ne sont pas concernes. Le lime la porte, coherent avec la regle qui reserve cette couleur au traitement local. */ .consentement .rassure { color: var(--lime-texte); background: var(--lime-doux); border: 1px solid var(--lime-ligne); border-radius: var(--r-s); padding: 8px 11px; font-size: var(--t-xs); } /* "flex: 1" retire : il etirait les deux boutons sur toute la largeur de la carte etroite d'avant. Dans une barre pleine largeur, il les aurait rendus enormes. Les deux gardent en revanche la meme taille et le meme poids visuel, mettre « Accepter » en avant et « Refuser » en retrait etant un dark pattern sanctionne par la CNIL. */ .consentement .ligne { flex-wrap: wrap; align-items: center; } .consentement .ligne .btn { flex: none; } .consentement .gerer { font-size: var(--t-s); color: var(--ink-2); } /* Le rappel du droit de retrait passe SOUS la grille et non dedans : dans la colonne de gauche il allongeait le pave de texte, a droite il poussait les boutons. Il est secondaire, il se lit en dernier. */ .consentement .rappel-choix { margin: 12px auto 0; max-width: 1200px; font-size: var(--t-xs); color: var(--ink-2); } @media (max-width: 760px) { .consentement .dedans { grid-template-columns: 1fr; gap: 14px; } } /* ---- Repere d'ancre -------------------------------------------- Vingt pages d'outil renvoient vers "Comment le verifier en trente secondes". En arrivant, le visiteur tombe au milieu d'une page d'argumentaire et doit deviner lequel des passages repond a sa question. Le passage vise s'allume donc a l'arrivee, puis s'eteint tout seul : le temps de le reperer, pas plus. Le lime porte ce reperage, et c'est coherent avec la regle qui le reserve au traitement local : ce passage est precisement celui qui explique comment le verifier soi-meme. Fait en CSS seul, par la pseudo-classe ":target". Le reperage fonctionne donc meme si le JavaScript ne se charge pas. Le retrait sous l'en-tete evite que le titre passe dessous, la barre du haut etant collante. */ /* Le retrait interieur est repris en marge negative : le texte reste aligne sur le reste de la page, seul le surlignage deborde. Sans cette compensation, le passage se decalait de 18 px vers la droite, surligne ou non. */ .repere { padding: 14px 18px; margin-block: var(--e-6) var(--e-4); margin-inline: -18px; border-radius: var(--r); scroll-margin-top: 78px; background: transparent; box-shadow: 0 0 0 1px transparent; } .repere > :first-child { margin-top: 0; } .repere > :last-child { margin-bottom: 0; } /* ":target" couvre l'arrivee depuis une autre page, ".allume" le clic sur le meme lien alors qu'on est deja la, que le navigateur ne considere pas comme une navigation. */ .repere:target, .repere.allume { animation: repere-allume 4.5s ease-out both; } @keyframes repere-allume { 0%, 30% { background: var(--lime-doux); box-shadow: 0 0 0 1px var(--lime-ligne); } 100% { background: transparent; box-shadow: 0 0 0 1px transparent; } } /* ---- Mouvement reduit ----------------------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } /* L'animation disparait, le reperage doit rester : le passage vise garde son fond au lieu de clignoter puis de s'eteindre. */ .repere:target, .repere.allume { background: var(--lime-doux); box-shadow: 0 0 0 1px var(--lime-ligne); } } /* ---- Petits ecrans -------------------------------------------- */ @media (max-width: 640px) { .page { padding-inline: 18px; } /* La page ne garde que 18 px de marge : le surlignage se resserre pour ne pas venir coller au bord de l'ecran. */ .repere { padding-inline: 14px; margin-inline: -14px; } .nav { gap: 10px; } .nav a { font-size: var(--t-s); } /* Sur petit ecran, l'en-tete garde l'essentiel : les outils, la langue, le theme. Le reste reste accessible depuis le pied de page. La pastille part aussi : a 375px elle poussait "Tous les outils" sur trois lignes. Le message "100 % RGPD" est deja porte par le pied de page et par tout le contenu, il ne se perd pas. Selecteur qualifie volontairement : ".nav-secondaire" seul (0,1,0) etait ecrase plus bas par ".nav > a { display: inline-block }" (0,2,0), et le lien restait donc affiche sur telephone, contre l'intention ci-dessus. */ .nav > a.nav-secondaire { display: none; } .pastille { display: none; } .nav a { white-space: nowrap; } .entete > .page { padding-block: 11px; } /* PALIER TELEPHONE POUR LA MARQUE, pose le 19/08/2026 en meme temps que son agrandissement. A 56 px et 30 px de texte, l en-tete mesurait 175 px de haut a 375 px de fenetre, soit plus d un cinquieme d un ecran de 800, pour une barre qui reste collee et ne montre rien. Elle redescend donc a 40 px et "--t-xl", ce qui la laisse tout de meme bien au-dessus de son point de depart, 32 et "--t-m". La taille pleine reprend des 641 px. La taille passe par "--logo", que la regle de ".logo-marque" lit deja, et non par un "width" ecrit ici : les deux auraient la meme specificite, et celle du bas du fichier gagnerait sur la position. Mesure a l appui, le premier jet ecrivait "width: 40px" ici et le logo restait a 56. La marge, elle, est qualifiee par ".entete" pour passer devant. */ .entete { --logo: 40px; } .entete .logo-marque { margin-right: 11px; } .marque { font-size: var(--t-xl); } /* ═══ L EN-TETE PASSE DE TROIS RANGEES A DEUX, LE 01/09/2026 ═════ Corentin, capture a l appui : « la barre en entete est mal faite sur telephone ». Mesure a 393 px avant correction : 152 px de haut, en TROIS rangees, le logotype, le sceau RGPD seul sur sa ligne, puis la navigation. LA TROISIEME RANGEE VENAIT D UNE REGLE ECRITE POUR UN AUTRE PROBLEME. ".ligne .marque { flex-basis: 100% }", pose le 13/08 quand la pastille « Beta » a ete ajoutee, force le nom a prendre toute sa ligne pour que les deux pastilles passent ensemble dessous. Or sous 640 px « Beta » est justement masquee : il ne reste qu un sceau de 66 px a caser a cote d une marque de 151, dans 357 px utiles. Le renvoi a la ligne ne resout donc plus rien ici, il ne fait que couter une rangee entiere. Le seuil de 1 120 px plus haut fait deja l inverse sur grand ecran ; celui-ci fait de meme par le bas. Entre les deux, la ou « Beta » existe, la regle d origine reste en vigueur. Le retrait et l ecart se resserrent dans la foulee, 8 px au lieu de 11 et 16 : sur deux rangees ils comptent double. Mesure apres correction : 104 px, soit un tiers de moins. */ .entete .ligne { flex-wrap: nowrap; gap: 10px; } .entete .ligne .marque { flex-basis: auto; } /* Le corps du texte commande, le dessin suit : 12 px de mot pour 18,6 px de cocarde, contre 21 px pour l image d avant. */ .pastille-rgpd { font-size: var(--t-xs); } /* ═══ L EN-TETE PASSE A DEUX RANGEES, POSE LE 21/08/2026 ═══════ MESURE AVANT CORRECTION, a 320 px de fenetre : l en-tete faisait 229 px de haut, soit pres du tiers d un ecran de telephone, avant le moindre contenu. A 360 px, 175. Defaut ancien, verifie present a l identique dans la sauvegarde d avant la pose du pingouin, sur dix largeurs de 320 a 1100. LA CAUSE N ETAIT PAS UN MANQUE DE PLACE, C ETAIT SON PARTAGE. La barre est un "flex" a deux enfants sur une seule ligne : la marque et la navigation. A 320 px, une fois les 36 px de retrait retires, il reste 284 px utiles. La marque en prenait 145, la navigation heritait donc de 123 px pour cinq commandes qui en reclament 355. Elle se repliait en QUATRE rangees. LA NAVIGATION PREND DESORMAIS SA PROPRE LIGNE, pleine largeur. Elle passe de 123 a 284 px disponibles, sans que rien ne soit retire ni retreci. C est le meme espace, mieux partage. */ .entete > .page { flex-wrap: wrap; gap: 8px; padding-block: 8px; } .entete > .page > .nav { width: 100%; justify-content: flex-end; } /* LE SELECTEUR DE LANGUE PERD SES MOTS, PAS SA FONCTION. Il passe de 77 a 34 px en ne gardant que le drapeau. Le nom accessible est porte par son "aria-label", « Changer de langue, français actuellement », il ne perd donc rien pour qui n utilise pas ses yeux. Le "font-size: 0" efface le texte sans le retirer du document ; les deux dessins gardent leur taille propre, ils ne dependent pas de celle du texte. */ .langues > summary { font-size: 0; gap: 0; padding-inline: 9px; } .langues > summary .chevron { display: none; } .depot { padding: 34px 18px 22px; border-radius: var(--r); } .etiquette { --pente: -3deg; position: static; display: inline-block; margin-bottom: 14px; transform: rotate(var(--pente)); } /* Posee dans le flux, elle n a plus de coin a tenir : elle se balance autour de son centre. */ .etiquette { transform-origin: 50% 50%; } .zone-enveloppe:hover .etiquette { transform: rotate(var(--pente)) scale(1.04); } .btn { width: 100%; } .ligne .btn { width: auto; } .reglages { flex-direction: column; align-items: stretch; } /* ═══ LE PIED DE PAGE PASSE EN DEUX COLONNES, LE 01/09/2026 ═════ Corentin, capture a l appui : « dans le bandeau du bas, les differentes rubriques prennent trop de place et ne sont pas esthetiques ». LES DEUX REPROCHES ONT LA MEME CAUSE, un rang qui se replie. Les sept liens vivent dans un "flex" a retour a la ligne : chaque rangee se remplit jusqu au bord puis deborde, et comme les libelles vont de 7 a 24 signes, aucune rangee ne tombe au meme endroit que la precedente. D ou le bord en dents de scie de la capture. Le volume, lui, vient des 44 px de cible tactile posees plus bas : quatre rangees a 44, plus 18 px d ecart entre elles, font 230 px de pied pour sept liens. UNE GRILLE, ET LES DEUX PARTENT ENSEMBLE. Deux colonnes egales donnent quatre rangees dont les debuts s alignent, ce qui suffit a retirer les dents de scie ; l ecart de rangee tombe a zero, les liens etant deja separes par leur propre hauteur. 44 PX DEVIENNENT 40, ET CE N EST PAS UN RENONCEMENT. La norme applicable, WCAG 2.5.8, demande 24 px ; les 44 px du site viennent d une recommandation plus exigeante, tenue partout ailleurs. Ici deux colonnes de liens courts la rendent moins utile qu au milieu d une barre dense, et 40 px restent tres au-dessus du seuil. Mesure apres correction : 160 px au lieu de 230. LA LIGNE DE COPYRIGHT PASSE DESSOUS ET NON A COTE. En "flex" avec "space-between" elle occupait une rangee pour elle seule de toute facon ; declaree telle quelle, elle recoit un filet et devient une ligne de bas de page au lieu d un element qui a debordé. */ .pied { padding-block: var(--e-5); } /* "column-reverse" ET NON UN SIMPLE "block" : la ligne de copyright est ecrite AVANT la navigation dans le HTML, ce qui est le bon ordre pour un lecteur d ecran, mais a l oeil une mention legale en tete de pied ne fait que retarder les liens. L ordre visuel est donc inverse ici sans toucher au document. */ .pied > .page { display: flex; flex-direction: column-reverse; align-items: stretch; gap: 0; } .pied nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--e-3); } /* SELECTEUR QUALIFIE, meme piege que dans l en-tete : la regle des cibles tactiles, ".pied nav a { min-height: 44px }", vit en fin de fichier et gagne a poids egal. Il faut donc peser plus lourd qu elle, pas seulement ecrire apres. */ .pied > .page > nav a { min-height: 40px; padding-block: 0; } .pied > .page > span { display: block; margin-top: var(--e-3); padding-top: var(--e-3); border-top: 1px solid var(--border); color: var(--ink-3); } } /* ═══ LE PALIER DES TRES PETITS ECRANS, POSE LE 21/08/2026 ════════ 320 px n est pas un telephone exotique, c est aussi un ecran de 1280 grossi a 400 %. Cette largeur protege d abord la personne qui agrandit le texte, comme le rappelle le releve du 18/08/2026. A cette largeur, meme sur sa propre ligne, la navigation reclamait 312 px pour 284 disponibles. Vingt-huit px manquaient, et elle se repliait sur deux rangees. LE BOUTON D ACCES RAPIDE PARTAIT ICI, du 21/08 au 01/09/2026, comme la moins couteuse des quatre commandes. La place gagnee etait la bonne, la contrepartie ne l etait pas : voir la note suivante, qui la reprend autrement et rend le bouton. CE BLOC EST APRES CELUI DE 640 PX, ET CE N EST PAS UN DETAIL. Un premier jet l avait insere AU MILIEU, ce qui refermait le palier 640 trop tot : sept regles de telephone, dont « les boutons prennent toute la largeur », tombaient dans le palier 400 et ne s appliquaient plus entre 401 et 640 px. Le defaut ne se voyait pas a 320 ni a 700, seulement entre les deux. SELECTEUR QUALIFIE PAR ".entete", ET C EST TOUJOURS OBLIGATOIRE. Les regles de ce palier visent des composants dont le style est pose plus bas dans le fichier ; a poids egal, c est la plus basse qui gagne. Le piege est deja documente plus haut, a propos du logo, et il vaut pour les deux libelles du menu comme il valait pour le bouton a points. L ESPACEMENT TOMBE DE 10 A 8 PX pour la meme raison de place : a 10, la navigation tenait a deux pixels pres, ce qui n est pas une marge mais un hasard. A 8 elle dispose de douze pixels de reserve. */ /* ═══ LE BOUTON A POINTS REVIENT, LE 01/09/2026 ═══════════════════ Corentin : « sur la barre du haut on ne voit pas le carre qu avec des points qui ouvre le menu vers les outils principaux et les pages legales ». Il ne manquait pas par hasard : c est ce bloc qui le retirait sous 400 px, et le raisonnement ci-dessus tenait, les 28 px manquants etaient reels. IL MANQUAIT 28 PX, ON EN GAGNE 60 AILLEURS. Le libelle du menu passe de « Tous les outils » a « Outils » a cette largeur, ce qui libere plus du double de ce que le bouton coute. Les cinq commandes tiennent desormais sur une rangee a 320 px, mesure a 259 px pour 284 disponibles. Le choix est meilleur que le precedent parce qu il ne retire AUCUNE fonction : le bouton a points est la seule voie vers les pages legales depuis le haut de la page, alors que le mot « Tous » du libelle ne portait rien que le lien ne dise deja. Entre supprimer une commande et raccourcir un mot, on raccourcit le mot. */ @media (max-width: 400px) { .entete .btn-menu .menu-long { display: none; } .entete .btn-menu .menu-court { display: inline; } .entete .nav { gap: 8px; } } /* ═══ LE PALIER PAYSAGE, POSE LE 01/09/2026 ══════════════════════ Demande de Corentin : « il faut aussi verifier les modes vertical et horizontal ». Le vertical etait couvert par les paliers de 640 et de 400 px ; le paysage, lui, n etait couvert par rien, et il tombait dans un angle mort. POURQUOI UN ANGLE MORT. Un telephone couche mesure 850 px de large : toutes les regles de telephone du site sont ecrites sur la LARGEUR, elles s eteignent donc a la rotation. La page reprend la disposition d un ordinateur, logo de 56 px compris, dans une fenetre haute de 390 px. Mesure avant correction : l en-tete collee occupait 69 px, soit 18 % de la hauteur utile, avant le moindre contenu, et le hero ajoutait 96 px de retrait vertical. LE PALIER SE REGLE SUR LA HAUTEUR, PUISQUE C EST ELLE QUI MANQUE. Il ne touche a rien d autre : la largeur, elle, est confortable, et la disposition en une ligne reste la bonne. "pointer: coarse" ecarte les fenetres de bureau volontairement aplaties, ou le visiteur a choisi sa hauteur et n a pas besoin qu on la lui economise. Meme raisonnement que pour le mot du hero. Mesure apres correction : en-tete a 48 px, hero a 40 px de retrait, soit 77 px rendus au contenu, un cinquieme de l ecran. */ @media (pointer: coarse) and (orientation: landscape) and (max-height: 520px) { .entete { --logo: 36px; } .entete > .page { padding-block: 4px; gap: 12px; } .entete .logo-marque { margin-right: 10px; } .marque { font-size: var(--t-xl); } /* Sur 850 px de large les trois blocs tiennent largement sur une ligne : le renvoi de la marque n a plus lieu d etre, et il coutait ici une rangee entiere sur un ecran qui n en a que quatre. */ .entete .ligne { flex-wrap: nowrap; } .entete .ligne .marque { flex-basis: auto; } .marque { font-size: var(--t-l); } /* UNE LIGNE NE SUFFIT PAS A ELLE SEULE : a 740 px de large, la barre reclamait 770 px et se repliait quand meme, ce qui rendait tout le reste du palier inutile. Les memes trois economies que sur telephone debout la ramenent a 708. Elles sont deja jugees acceptables ailleurs : le lien « Pourquoi c est local » et la pastille « Beta » vivent aussi au pied de page, et le selecteur de langue garde son nom accessible complet. */ .nav > a.nav-secondaire { display: none; } .pastille { display: none; } .langues > summary { font-size: 0; gap: 0; padding-inline: 9px; } .langues > summary .chevron { display: none; } .entete .nav { gap: 14px; } .hero { padding-block: var(--e-4) var(--e-5); } .hero .ligne { margin-top: var(--e-4); } .chapo { padding-block: var(--e-4) var(--e-3); } .section { margin-top: var(--e-5); } /* Les 88 px retires etaient la hauteur de l en-tete d ordinateur. Elle en fait 48 ici, et le panneau peut donc descendre plus bas sans jamais sortir de l ecran. */ .panneau { max-height: calc(100vh - 56px); } } /* ============================================================= Lien d evitement Premier element focusable de chaque page, invisible tant qu il n a pas le focus. Au clavier, il evite de traverser les huit liens de l en-tete sur chacune des 26 pages avant d atteindre le contenu (WCAG 2.4.1, RGAA 12.7). Il n est pas masque par display:none ni visibility:hidden : ces deux proprietes le retireraient aussi de l ordre de tabulation, ce qui reviendrait a ne pas l avoir. ============================================================= */ .saut-contenu { position: absolute; left: -9999px; top: 0; z-index: 100; } .saut-contenu:focus { left: var(--e-4); top: var(--e-4); position: fixed; background: var(--violet); color: var(--sur-violet); padding: var(--e-3) var(--e-4); border-radius: var(--r-s); font-weight: 600; text-decoration: none; box-shadow: var(--ombre); } /* La cible du lien recoit tabindex="-1" pour etre focusable par programme. Sans cette regle, le navigateur y dessinerait un contour alors que l utilisateur n a fait que se deplacer. */ #contenu:focus { outline: none; } /* ============================================================= Hauteur minimale des cibles tactiles Les liens du pied de page et de la navigation faisaient 21 px de haut, sous les 24 px que demande WCAG 2.5.8. Sur un telephone, deux liens empiles a cette hauteur se touchent l un pour l autre. Le remede est un remplissage vertical, pas une police plus grosse : la taille du texte, elle, est deja juste. ============================================================= */ .pied nav a, .nav > a { display: inline-block; padding-block: 3px; } /* Le depliant de reglages est un controle autonome, pas un lien pose dans une phrase : les 24 px de WCAG 2.5.8 s appliquent. Il tombait a 23. Les liens en ligne dans un paragraphe, eux, restent exemptes par la norme, et les agrandir casserait l interligne du texte. */ .reglages summary, details:not(.langues) > summary { min-height: 24px; } /* ============================================================= TUILES DU CATALOGUE Decision du 08/08/2026, pistes 1, 5 et 8 de "_ludique.html", revue le 09/08/2026 apres l audit de web design. La carte horizontale etait devenue une tuile carree teintee, tout centre, avec un pave blanc de 60 px. Trois defauts mesures : 1. La carte ne se detachait plus. Remplie d une teinte et bordee de transparent, elle ne se distinguait du fond que par 1.06 a 1.20 de contraste selon la famille, et le pave blanc ne se distinguait de la carte que par 1.17 a 1.33 (1.04 en sombre). Choix de Corentin, option B : la teinte reste, mais la carte reprend un bord a la couleur de sa famille. C est le bord qui dessine une carte, pas le remplissage. Le pave blanc disparait, il ne servait qu a poser l icone et il ne se voyait pas : l icone se pose directement sur la teinte, ou elle a le contraste demande. 2. Le nom de l outil s affichait a 14 px, plus petit que le texte courant du site et a peine plus gros que sa propre description. Il passe a la taille des titres de carte. Rapport titre sur description, avant 1.08, apres 1.43. 3. Tout etait centre. Sur vingt cartes cela fait quarante bords en dents de scie et aucune colonne ou poser l oeil. Le centrage marche pour un bloc isole, il travaille contre une liste qu on parcourt. Le contenu passe a gauche. ============================================================= */ .grille .outil { /* Colonne calee a gauche. Le bloc de texte interne, qui vivait dans la deuxieme colonne de la grille, devient un simple bloc. */ display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; text-align: left; gap: var(--e-3); min-height: 210px; padding: var(--e-4); border-radius: var(--r-l); background: var(--fam-doux, var(--violet-doux)); border: 1px solid var(--fam, var(--violet)); } /* Le pave prend la teinte forte de la famille et l icone passe en blanc dessus. L ancien pave blanc sur carte teintee ne se voyait pas ; ici le contraste est celui de l encre de famille, mesure au minimum a 4.29 en clair et 4.83 en sombre. */ .grille .outil .ico { width: 48px; height: 48px; border-radius: var(--r); background: var(--fam, var(--violet)); color: var(--surface); transition: transform .2s ease, background .18s ease; } .grille .outil .ico svg { width: 26px; height: 26px; } .grille .outil .titre { font-size: var(--t-l); line-height: 1.25; margin-bottom: 0; } .grille .outil .txt { font-size: var(--t-s); line-height: 1.45; /* Plus de coupe a deux lignes. Elle tronquait 16 descriptions sur 20 pour rien : mesure faite en la retirant, aucune carte ne depasse, elles restent toutes a 210 px et il reste 16 px de marge dans la plus remplie. La grille egalise deja les hauteurs d une rangee, c est son travail. */ } /* Piste 8 : trois effets pour un seul geste, tous sous 200 ms. Avant, seule la carte se soulevait et rien ne repondait dedans. Le pave ne change plus de fond au survol : il porte desormais la teinte forte et l icone en blanc dessus, le repasser en surface rendrait l icone invisible pendant tout le survol. */ .grille .outil:hover { border-color: var(--fam, var(--violet)); transform: translateY(-3px); box-shadow: var(--ombre); } .grille .outil:hover .ico { transform: scale(1.08); } /* Les familles sont posees sur le lien par _labo/couleur-icones.js et alimentent le fond de la tuile comme la couleur de l icone. Elles etaient declarees ICI, en ".outil.f-xxx", avant que le bloc unique du bas du fichier ne les serve partout. Les six lignes ont ete retirees le 20/08/2026, elles ne faisaient plus que doubler ce bloc. L une d elles n etait pas un doublon et c est ce qui rendait le nettoyage dangereux : ".f-enr", sans ".outil" devant, etait la SEULE declaration de la cinquieme famille, le bloc du bas ne l ayant jamais recue. Elle vivait donc ici par accident, deux lignes au-dessus de son vrai doublon. Qui supprimait la mauvaise des deux faisait disparaitre la couleur des menus "enregistrer", c est-a-dire le defaut meme que le bloc du bas avait ete ecrit pour corriger. Elle l a rejoint. */ /* En dessous de 480 px, la tuile carree devient une ligne. Mesure du 09/08 a 375 px, la largeur de presque tous les telephones : la grille passait a une colonne et chaque tuile faisait 210 px de haut, soit 4 440 px a faire defiler pour vingt outils. Le meme catalogue chez iLovePDF tient en 2 680 px, parce que leur carte devient une ligne de 118 px. Le commentaire ci-dessous disait deja qu une tuile en une colonne n est plus une tuile mais une banniere. La bascule etait reglee a 480 px, donc aucun telephone courant n en profitait. Plutot que de descendre le seuil et de serrer deux tuiles dans 375 px, la tuile change de forme : l icone a gauche, le texte a droite. */ @media (max-width: 479px) { /* Trois colonnes : l icone, le texte, la pastille. La pastille etait posee en absolu sur l angle superieur droit de la tuile carree, ou il n y avait rien. Sur une ligne, ce meme angle est occupe par le nom de l outil, qu elle recouvrait. Elle reprend donc sa place dans le flux, dans une colonne a elle. */ .grille .outil { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; column-gap: var(--e-3); min-height: 0; padding: var(--e-3) var(--e-4); } /* Les trois places sont donnees explicitement. Sans la ligne, le placement automatique voyait la pastille occuper la colonne 3 de la premiere ligne, avancait son curseur au-dela, et renvoyait l icone et le texte a la ligne suivante : la carte passait de 89 a 148 px et la pastille se retrouvait seule sur son etage. */ .grille .outil > .pastille-etat { position: static; grid-column: 3; grid-row: 1; align-self: center; } .grille .outil > .ico { grid-column: 1; grid-row: 1; } .grille .outil > span:not(.ico):not(.pastille-etat) { grid-column: 2; grid-row: 1; } .grille .outil .titre { font-size: var(--t-m); } .grille .outil .txt { font-size: var(--t-s); /* Ici la coupe se justifie, et seulement ici : en ligne, la carte n a plus de hauteur fixe a remplir, une description de cinq lignes ferait une carte deux fois plus haute que sa voisine. */ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } } /* Trois colonnes des que la place le permet. La regle de grille existante reste la source, celle-ci ne fait que l elargir. */ @media (min-width: 480px) { .grille { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 720px) { .grille { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1020px) { .grille { grid-template-columns: repeat(4, 1fr); } } /* ============================================================= PASTILLE D ETAT Piste 3. Posee sur l angle d un bouton, en debordement, pour attirer l oeil sans decaler la ligne des boutons. ============================================================= */ /* La flamme etait un emoji ecrit dans le HTML des 25 pages. Elle est maintenant dessinee et posee par le CSS : le mot "populaire" reste seul dans le HTML, ce qui est aussi ce qu'un lecteur d'ecran doit entendre. Une flamme n'a rien a dire a voix haute. Une seule version pour les deux themes, l'orange tient sur le lime clair comme sur le lime sombre (Cf. "--img-flamme" dans charte.css). */ .pastille-etat { display: inline-flex; align-items: center; gap: 3px; font-family: var(--f-mono); font-size: var(--t-pastille); font-weight: 600; padding: 2px 7px; border-radius: var(--r-pill); letter-spacing: .02em; white-space: nowrap; /* Creme chaude, reprise de la pastille du hero (« --fond-flamme », 19/08/2026). Le lime disait « valide », or cette pastille ne valide rien : elle signale ce qui est POPULAIRE, et elle porte une flamme. Le fond la met du cote de ce qu'elle montre. */ background: var(--degrade-flamme); color: var(--flamme-texte); border: 1px solid var(--flamme-ligne); } /* Meme precaution que pour le cadenas : "inline-block" explicite, pour que la flamme garde ses dimensions meme si un jour la pastille cesse d'etre un conteneur flex. */ .pastille-etat::before { content: ""; flex: none; display: inline-block; vertical-align: -2px; width: 12px; height: 12px; background: var(--img-flamme) center / contain no-repeat; /* Le dandinement etait reserve a la pastille du hero. Il vaut pour toutes : une flamme immobile a cote d'une flamme qui bouge se remarque plus que les deux ensemble. Le pied reste cloue, c'est lui qui fait la difference entre un balancement et un tremblement. */ transform-origin: 50% 90%; animation: mtb-flamme 1.9s ease-in-out infinite; } .porte-pastille { position: relative; display: inline-flex; } .porte-pastille > .pastille-etat { position: absolute; top: -8px; right: -10px; z-index: 2; box-shadow: 0 2px 6px rgba(0, 0, 0, .18); } /* ============================================================= COMPTEUR D OUTILS Piste 6. « dix-sept outils » est un argument du site ; ecrit en toutes lettres au fil du texte, il se lisait a peine. ============================================================= */ .compteur { display: inline-flex; align-items: baseline; gap: 5px; font-family: var(--f-mono); font-size: var(--t-xs); font-weight: 600; background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--border); border-radius: var(--r-pill); padding: 3px 11px; margin-left: var(--e-3); vertical-align: middle; white-space: nowrap; } .compteur b { font-size: var(--t-m); color: var(--ink); } /* ============================================================= FILTRES PAR FAMILLE Piste 4. Les quatre familles ne servaient qu a titrer des sections ; en pilules elles deviennent une navigation. Sans JavaScript, aucun bouton n apparait et les sections en dur restent toutes visibles : la page ne perd rien. ============================================================= */ .filtres { display: flex; gap: var(--e-2); flex-wrap: wrap; margin-bottom: var(--e-5); } .filtre { font: inherit; font-size: var(--t-s); font-weight: 500; cursor: pointer; background: var(--surface); color: var(--ink-2); border: 1px solid var(--border-fort); border-radius: var(--r-pill); padding: 7px 16px; transition: background .16s ease, color .16s ease, border-color .16s ease; } .filtre:hover { border-color: var(--violet-ligne); color: var(--ink); } .filtre[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); } /* ============================================================= ZONE DE DEPOT QUI RESPIRE Piste 7. Le mouvement dit ou deposer sans l ecrire une fois de plus. ============================================================= */ .depot .depot-icone { animation: mtb-flotte 1.9s ease-in-out infinite; } @keyframes mtb-flotte { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } /* Pendant un glisser, le mouvement n a plus rien a indiquer. */ .depot.survol .depot-icone { animation: none; } /* Une animation en boucle qui ignore ce reglage systeme est un defaut d accessibilite, pas une decoration. Vaut aussi pour les tuiles. */ @media (prefers-reduced-motion: reduce) { .depot .depot-icone { animation: none; } .grille .outil, .grille .outil .ico { transition: none; } .grille .outil:hover { transform: none; } .grille .outil:hover .ico { transform: none; } } /* ============================================================= LA ZONE DE DEPOT PREND LA COULEUR DE SON OUTIL Demande de Corentin du 08/08/2026. Le catalogue distingue ses quatre familles par la couleur, mais en entrant dans un outil tout redevenait violet : la couleur s arretait a la porte. La zone de depot est le plus gros element de la page, c est donc elle qui porte le mieux cette continuite. La famille est declaree sur le
    par _labo/depot-famille.js. Les valeurs de repli gardent le violet, donc une page sans famille ne perd rien. Le generateur de QR code n a pas de zone de depot, il ne recoit aucun fichier : il est logiquement absent d ici. ============================================================= */ .page.f-pdf { --fam: var(--fam-pdf); --fam-doux: var(--fam-pdf-doux); } .page.f-conv { --fam: var(--fam-conv); --fam-doux: var(--fam-conv-doux); } .page.f-img { --fam: var(--fam-img); --fam-doux: var(--fam-img-doux); } .page.f-lire { --fam: var(--fam-lire); --fam-doux: var(--fam-lire-doux); } .page.f-enr { --fam: var(--fam-enr); --fam-doux: var(--fam-enr-doux); } .depot:hover { border-color: var(--fam, var(--violet)); } .depot.survol { border-color: var(--fam, var(--violet)); box-shadow: 0 0 0 4px var(--fam-doux, var(--violet-doux)); } .depot-icone { background: var(--fam-doux, var(--violet-doux)); color: var(--fam, var(--violet)); } /* Le bouton principal de la page d outil suit la meme famille, sinon un bouton violet sous une zone ambre trahirait la regle qu on vient de poser. La couleur du texte, elle, bascule deja avec le theme. */ .depot .btn.principal { background: var(--fam, var(--violet)); color: var(--sur-violet); } .depot .btn.principal:hover { filter: brightness(.92); } /* "fini" garde le lime : il ne dit pas quel outil a travaille, il dit que c est termine. C est un etat, pas une famille. */ .depot.fini { border-color: var(--lime-texte); } /* ============================================================= LES QUATRE FAMILLES, DECLAREES UNE FOIS POUR TOUTES Correction du 08/08/2026. Les couleurs de famille etaient declarees sur ".outil.f-pdf" et ".page.f-pdf", donc uniquement sur une carte et sur une page d outil. Les menus deroulants portaient bien leurs classes de famille, mais aucune regle ne leur donnait de valeur : "--fam" y restait indefinie, les fonds tombaient en transparent et les titres en gris. C est le defaut signale par Corentin. Une seule declaration, sans selecteur d element devant, sert donc desormais partout : cartes, tuiles, pages d outil et menus. ============================================================= */ .f-pdf { --fam: var(--fam-pdf); --fam-doux: var(--fam-pdf-doux); --sur-fam: var(--fam-pdf-sur); } .f-conv { --fam: var(--fam-conv); --fam-doux: var(--fam-conv-doux); --sur-fam: var(--fam-conv-sur); } .f-img { --fam: var(--fam-img); --fam-doux: var(--fam-img-doux); --sur-fam: var(--fam-img-sur); } .f-lire { --fam: var(--fam-lire); --fam-doux: var(--fam-lire-doux); --sur-fam: var(--fam-lire-sur); } .f-enr { --fam: var(--fam-enr); --fam-doux: var(--fam-enr-doux); --sur-fam: var(--fam-enr-sur); } /* ============================================================= LES DEUX MENUS DEROULANTS Decisions de Corentin du 08/08/2026. Les styles sont ceux de la page de comparaison "_colonnes.html", repris tels quels : c est sur eux que le choix a ete fait. - le bouton a neuf points, en haut a droite, ouvre la disposition B : une colonne encadree par famille, coiffee de son titre colore. Celle qui montre les vingt outils d un coup - le lien « Tous les outils » ouvre la disposition D : des colonnes typographiques, sans cadre ni carte, chaque famille titree et soulignee de sa couleur Les deux s ouvrent au survol, et aussi au focus : une ouverture au survol seul exclut le clavier et le tactile, ou le survol n existe pas. :focus-within couvre les deux, sans une ligne de script. ============================================================= */ .menu-deroulant { position: relative; display: inline-flex; } /* --- Les deux declencheurs --- */ .btn-grille { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; background: var(--surface); color: var(--ink-2); border: 1px solid var(--border-fort); border-radius: var(--r-s); cursor: pointer; transition: background .16s ease, color .16s ease; } .btn-grille svg { width: 19px; height: 19px; } .btn-grille:hover, .menu-deroulant:focus-within .btn-grille { background: var(--surface-2); color: var(--ink); } .btn-menu { display: inline-flex; align-items: center; gap: 5px; font: inherit; font-size: var(--t-s); color: var(--ink-2); background: none; border: 0; padding: 3px 0; cursor: pointer; text-decoration: none; } .btn-menu:hover, .menu-deroulant:focus-within .btn-menu { color: var(--ink); } .btn-menu .chevron { width: 11px; height: 11px; transition: transform .18s ease; } /* DEUX LIBELLES POUR UN SEUL BOUTON, poses le 01/09/2026. « Tous les outils » pese 121 px avec son chevron. Sous 400 px de fenetre, la barre de navigation en reclame 313 pour 284 disponibles, et c est ce manque de 29 px qui faisait disparaitre le bouton a points depuis le 21/08 (voir le palier des tres petits ecrans). « Outils » en pese 61 : les cinq commandes tiennent, et aucune n a besoin de partir. Le nom accessible complet reste porte par le lien, qui mene a la meme page. */ .btn-menu .menu-court { display: none; } .menu-deroulant:hover .btn-menu .chevron, .menu-deroulant:focus-within .btn-menu .chevron { transform: rotate(180deg); } /* --- Le panneau, commun aux deux --- */ .panneau { position: absolute; top: calc(100% + 10px); right: 0; z-index: 60; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-l); box-shadow: var(--ombre); padding: var(--e-4); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .16s ease, transform .16s ease, visibility .16s; } .menu-deroulant:hover > .panneau, .menu-deroulant:focus-within > .panneau { opacity: 1; visibility: visible; transform: translateY(0); } /* Zone tampon : sans elle, le menu se referme des que la souris traverse les 10 px qui separent le bouton du panneau. */ .panneau::before { content: ""; position: absolute; top: -12px; left: 0; right: 0; height: 12px; } /* --- Disposition B, style de "_colonnes.html" --- Seul style de menu du site depuis le 09/08/2026, sur demande de Corentin. Le menu "Tous les outils" portait la disposition D, titres soulignes et entrees sans carte ; les deux panneaux partagent desormais ce balisage et ces regles, ce qui evite d avoir a tenir deux composants identiques a la main. Les regles de l ancienne disposition D ne vivent plus ici : elles ont ete deplacees dans "_colonnes.html", la page de travail qui compare les quatre dispositions et qui seule s en sert encore. */ /* ---- LE PANNEAU D ACCES RAPIDE ---- Remplace le 20/08/2026 le panneau des familles, a la demande. CE QU IL REMPLACE ET POURQUOI. Le bouton en grille ouvrait le meme annuaire par famille que le menu « Tous les outils » juste a cote : deux commandes voisines pour le meme contenu, dont l une pesait 7,4 Ko repetes sur les 62 pages. Il ouvre desormais ce que l autre ne donne pas : les huit outils les plus demandes, et les pages du site qu on cherche quand on ne cherche pas un outil. LES HUIT OUTILS SONT CEUX QUI PORTENT LA PASTILLE « POPULAIRE » dans le catalogue, et c est volontairement la meme source : deux listes de « plus utilises » qui divergent seraient pires qu une seule. LEURS INTITULES SONT COMPLETS ICI, « Compresser un PDF » et non « Compresser ». Dans l ancien panneau la colonne portait la famille et le mot seul suffisait ; hors de sa colonne il ne dit plus de quoi il s agit. IL EST DEUX FOIS PLUS ETROIT que l annuaire, 520 px contre 860 : deux colonnes au lieu de quatre, et rien qui ne se lise d un coup d oeil. POIDS : 1,8 Ko contre 7,4, soit 350 Ko de moins sur l ensemble du site, et autant de moins a retelecharger a chaque page ouverte. */ /* ---- LE PANNEAU D ACCES RAPIDE, PISTE E ---- Choisi le 20/08/2026 apres mesure des cinq pistes de "_labo/panneau-20aout.html". Les vraies cartes du catalogue a gauche, les sept pages en flanc a droite. POURQUOI LE FLANC PLUTOT QUE L EMPILEMENT, et c est la mesure qui l a dit : cartes avec les pages EN DESSOUS, 890 px de haut, ne tient pas sous un ecran de 13 pouces. Les memes cartes avec les pages A COTE, 476 px. Le flanc ne fait pas gagner de la largeur, il fait gagner de la HAUTEUR, et la hauteur est la seule dimension qui elimine un menu deroulant. POUR MEMOIRE, LE PANNEAU PRECEDENT FAISAIT 482 PX DE HAUT. Celui-ci est donc plus court que lui tout en portant de vraies cartes. LA CARTE N EST PAS LA CARTE DU CATALOGUE, ET NE DOIT PAS L ETRE. Sur le catalogue, ".grille .outil" lui impose 210 px de haut, une colonne, un aplat de famille. Ici on veut une rangee courte. Le selecteur ".rapide-cartes .outil" a le meme poids que celui du catalogue et vit apres lui, c est ce qui lui permet de gagner. NE PAS renommer ce conteneur ".grille" : le banc l a fait par erreur le 20/08 et toutes ses mesures sont sorties fausses. */ /* IL COLLAIT LE BORD. Mesure a 1346 px : le panneau finissait a 10 px du bord de la fenetre, parce qu il herite du "right: 0" de ".panneau", cale sur le bord de ".page" dont la gouttiere ne fait que 10 px a cette largeur. Un menu qui touche le bord donne l impression d avoir ete pousse hors de l ecran. On lui rend une gouttiere a lui, sans toucher a la regle generale que les autres panneaux utilisent tres bien. */ .panneau-rapide { width: 800px; max-width: calc(100vw - 32px); right: var(--e-4); } /* PISTE T6 PLUS LE GRAS, choisie le 20/08/2026 dans "_labo/titres-panneau-20aout.html". Le trait ne traverse pas la colonne : il s arrete sous le mot, d ou le "display: inline-block" qui fait retomber la boite sur son contenu. L ENCRE PASSE DE --ink-3 A --ink. Ce n est pas une liberte prise sur le choix : un filet violet de 2 px sous un gris tres clair donne un titre que son propre soulignement ecrase. Le gras demande a etre vu, la couleur devait suivre. RESERVE DEJA DITE ET ASSUMEE : un mot souligne ressemble a un lien, or ces trois titres n en sont pas. Le soulignement est ici plus epais (2 px contre 1,5) et sans survol, ce qui est ce qui les distingue d un vrai lien pour qui essaie de cliquer. */ .rapide-deux h3 { display: inline-block; font-family: var(--f-mono); font-size: var(--t-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); margin: 0 0 var(--e-3); padding-bottom: 5px; border-bottom: 2px solid var(--violet); } .rapide-deux { display: grid; grid-template-columns: 1fr 210px; gap: var(--e-5); align-items: start; } /* "min-width: 0" et non un oubli : une colonne de grille vaut par defaut "min-width: auto", qui refuse de descendre sous la largeur de son contenu le plus long. Sans cette ligne, un titre d outil trop long pousse la colonne hors de son "1fr" et rouvre le defilement horizontal que "controle-css.js" ne verifie pas ici. */ .rapide-gauche { min-width: 0; } .rapide-cartes { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-2); } /* La phrase de description n est pas masquee ici, elle n est pas ecrite dans le balisage : inutile de l expedier 62 fois pour la cacher ensuite. La carte n a donc que son icone et son titre. */ .rapide-cartes .outil { display: grid; grid-template-columns: auto 1fr; gap: var(--e-3); align-items: center; min-height: 0; padding: var(--e-3); border-radius: var(--r); background: var(--surface); border: 1px solid var(--border); } .rapide-cartes .outil .titre { margin-bottom: 0; font-size: var(--t-s); } .rapide-cartes .outil .ico { width: 34px; height: 34px; } .rapide-cartes .outil .ico svg { width: 18px; height: 18px; } /* Le filet separe deux natures de contenu, il ne decore pas : a gauche ce que le site FAIT, a droite ce que le site EST. */ .rapide-flanc { border-left: 1px solid var(--border); padding-left: var(--e-5); } .rapide-flanc .rapide-pages + .rapide-pages { margin-top: var(--e-4); } .rapide-pages a { display: block; padding: 7px 0; font-size: var(--t-s); color: var(--ink); text-decoration: none; } .rapide-pages a:hover { color: var(--violet); } /* SOUS 900 PX le flanc repasse dessous, sans quoi la colonne de 210 px etrangle les cartes. Le seuil est mesure, pas choisi : a 880 px les titres a deux mots commencent a se couper. */ @media (max-width: 900px) { .rapide-deux { grid-template-columns: 1fr; } .rapide-flanc { border-left: 0; border-top: 1px solid var(--border); padding-left: 0; padding-top: var(--e-4); } .rapide-flanc { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-5); } .rapide-flanc .rapide-pages + .rapide-pages { margin-top: 0; } } @media (max-width: 560px) { .rapide-cartes { grid-template-columns: 1fr; } .rapide-flanc { grid-template-columns: 1fr; } } /* MEME GOUTTIERE QUE LE PANNEAU D ACCES RAPIDE, posee le 25/08/2026 a la demande : « la fenetre qui s ouvre est un petit peu trop collee a droite de l ecran ». Le panneau heritait du "right: 0" de ".panneau", cale sur le bord de ".page" : sur une fenetre etroite la gouttiere de la page est tout ce qui le separait du bord. La correction est celle deja retenue pour ".panneau-rapide" quelques jours plus tot, et les deux panneaux s alignent desormais. */ .panneau-annuaire { width: 860px; max-width: calc(100vw - 32px); right: var(--e-4); } .panneau-annuaire .colonnes { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--e-3); align-items: start; } .colonne-fam { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; } .colonne-fam > h3 { background: var(--fam-doux); color: var(--fam); font-family: var(--f-titre); font-size: var(--t-s); font-weight: 700; padding: 8px 12px; margin: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; } .colonne-fam > h3 b { font-family: var(--f-mono); font-size: var(--t-xs); font-weight: 600; opacity: .8; } .colonne-fam a { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-top: 1px solid var(--border); text-decoration: none; color: var(--ink); font-size: var(--t-s); line-height: 1.3; } .colonne-fam a:hover { background: var(--fam-doux); } .colonne-fam .ico-mini { width: 28px; height: 28px; flex: none; border-radius: var(--r-s); display: grid; place-items: center; background: var(--fam-doux); color: var(--fam); } .colonne-fam a:hover .ico-mini { background: var(--surface); } .colonne-fam .ico-mini svg { width: 16px; height: 16px; } /* Le pied de colonne, « Voir les 10 autres », pose le 29/08/2026 a la place du depliant. Raison du changement dans "_labo/poser-menus-et-bulles.js". Il ne porte PAS d icone, contrairement aux lignes au-dessus, et c est ce qui le distingue : les cinq premieres lignes mènent a un outil, celle-ci mene a une page. Un pictogramme de plus l aurait fait passer pour un sixieme outil. Il est centre et dans la couleur de la famille, comme le titre de la colonne, pour qu on lise d un coup a quelle colonne il appartient. */ .colonne-fam .voir-plus { justify-content: center; color: var(--fam); font-weight: 600; font-size: var(--t-xs); background: var(--fam-doux); } .colonne-fam .voir-plus b { font-family: var(--f-mono); font-weight: 700; } .colonne-fam .voir-plus:hover { background: var(--fam); color: var(--surface); } /* --- Pied commun --- */ .panneau-pied { margin-top: var(--e-4); padding-top: var(--e-3); border-top: 1px solid var(--border); } .panneau-pied a { display: block; text-align: center; font-weight: 600; font-size: var(--t-s); color: var(--violet); text-decoration: none; padding: 4px; } .panneau-pied a:hover { text-decoration: underline; } /* --- Petits ecrans --- La navigation passe sur plusieurs lignes et le declencheur se retrouve a gauche : un panneau ancre a sa droite partait alors a -111 px, un tiers hors ecran. En rendant le conteneur statique, le panneau s ancre sur l en-tete, deja positionne, et s etale dessous. */ @media (max-width: 900px) { .panneau-annuaire .colonnes { grid-template-columns: repeat(2, 1fr); } } /* Les deux panneaux sont larges (860 et 880 px) alors que leurs declencheurs ne sont pas au bord droit de la page : ancres sur leur bouton, ils sortaient de l ecran des 900 px pour le menu B et des 1280 px pour le menu D, mesure a l appui. Ils s ancrent donc sur le conteneur de l en-tete, pas sur leur bouton : leur bord droit tombe alors sur celui du contenu, aligne avec le reste du site, et ils ne peuvent plus deborder. */ .entete > .page { position: relative; } .menu-deroulant { position: static; } .panneau { max-width: calc(100vw - 32px); } /* ---- LE PANNEAU NE DESCEND PLUS SOUS LA FENETRE ---- Pose le 29/08/2026, avec le remplacement du depliant des colonnes. Il existait deja une butee, mais SEULEMENT en dessous de 520 px de large : sur un telephone le panneau se limitait a 72 % de la hauteur et defilait, sur un ordinateur il grandissait sans limite. C est ce qui rendait le depliant inutilisable : la colonne PDF ajoutait onze lignes, le panneau passait sous le bord de l ecran, et rien ne pouvait le faire remonter puisque c est la PAGE qui defile derriere. Le depliant est parti, la cause immediate avec lui. La butee reste parce que la CAUSE DE FOND, elle, ne depend pas du depliant : un panneau haut de 574 px tient dans une fenetre de 820, pas dans une de 620, et il en existe. Corriger le contenu sans poser la limite, c est attendre le prochain outil ajoute pour retrouver le meme defaut. Les 88 px retires sont la hauteur de l en-tete et sa marge. */ .panneau { max-height: calc(100vh - 88px); overflow-y: auto; } @media (max-width: 760px) { .panneau { top: calc(100% + 4px); left: var(--e-4); right: var(--e-4); width: auto; max-width: none; } } @media (max-width: 520px) { .panneau-annuaire .colonnes { grid-template-columns: 1fr; } .panneau { max-height: 72vh; overflow-y: auto; } } @media (prefers-reduced-motion: reduce) { .panneau, .btn-menu .chevron { transition: none; } } /* ============================================================= PAGE CATALOGUE : DISPOSITION A SANS LES GRANDS TITRES Decision de Corentin du 08/08/2026. Le tri est desormais affiche en permanence au-dessus de la grille. Garder en plus un grand titre par famille reviendrait a dire deux fois la meme chose, puisque la pilule active indique deja quelle famille on regarde. Les titres sont donc masques, mais restent dans le HTML : ils portent la structure de la page pour un moteur de recherche et pour un lecteur d ecran, qui eux ne voient pas le filtre actif. Les sections s enchainent alors sans rupture, et les vingt tuiles forment une grille continue. ============================================================= */ [data-sans-titres] .section > h2, [data-sans-titres] .section > .menu-fin { display: none; } /* Sans titre, l espace entre deux familles n a plus lieu d etre : la grille doit se lire comme une seule. */ [data-sans-titres] .section { margin-top: var(--e-3); } [data-sans-titres] .section:first-of-type { margin-top: 0; } /* ============================================================= LA BARRE DE FILTRES : ONGLETS SOULIGNES, TEINTES PAR FAMILLE Choix arrete le 19/08/2026 apres huit propositions comparees dans "_labo/filtres-19aout.html" : la piste 4, des onglets soulignes, et la couleur par famille de la piste 5. POURQUOI LA COULEUR PAR FAMILLE VAUT MIEUX QU UN VIOLET UNIQUE : le site code deja ses cinq familles en couleur, sur les bulles et sur les tuiles. Un filtre « Image » qui s allume en cyan annonce exactement ce que la grille va montrer ; le meme filtre en violet n annoncait que « selectionne ». Le filtre et son resultat parlent la meme langue. LA FENETRE FLOTTANTE DISPARAIT. Ces onglets ne s encadrent pas : c est un filet et un trait sous l actif, rien d autre. J avais deconseille cette piste en la proposant, par crainte qu elle ne se transpose pas dans l en-tete ; en grille de trois colonnes sur deux elle tient, et des libelles soulignes y sont meme plus sobres que six pilules cernees. La crainte etait infondee, la piste est bonne. La barre garde son voyage : posee sur la page, elle monte dans l en-tete au defilement. Voir le script de "outils/index.html". ============================================================= */ /* --- Les teintes, communes aux deux etats --- */ .filtres .filtre[data-f="tous"] { --fc: var(--ink); } .filtres .filtre[data-f="f-pdf"] { --fc: var(--fam-pdf); } .filtres .filtre[data-f="f-conv"] { --fc: var(--fam-conv); } .filtres .filtre[data-f="f-img"] { --fc: var(--fam-img); } .filtres .filtre[data-f="f-lire"] { --fc: var(--fam-lire); } .filtres .filtre[data-f="f-enr"] { --fc: var(--fam-enr); } /* --- La forme d onglet, commune aux deux etats --- */ .filtres .filtre { background: transparent; border: 0; border-bottom: 2px solid transparent; border-radius: 0; color: var(--ink-2); transition: color .16s ease, border-color .16s ease; } .filtres .filtre:hover { color: var(--fc, var(--ink)); } .filtres .filtre[aria-pressed="true"] { color: var(--fc); border-bottom-color: var(--fc); font-weight: 600; } /* Le focus clavier ne peut pas se contenter du soulignement, qui est deja le signe de l onglet ACTIF : les deux se confondraient. */ .filtres .filtre:focus-visible { outline: 2px solid var(--violet); outline-offset: -2px; border-radius: 4px; } /* --- 1. A sa place, sur la page --- */ [data-sans-titres] .filtres { display: flex; flex-wrap: nowrap; gap: 4px; width: 100%; max-width: 100%; overflow-x: auto; scrollbar-width: none; margin: 0 0 var(--e-5); padding: 0 2px; background: none; border: 0; border-bottom: 1px solid var(--border); border-radius: 0; box-shadow: none; } [data-sans-titres] .filtres::-webkit-scrollbar { display: none; } /* ═══ LA BARRE NE SE DEPLACE PLUS QUE SUR LE COTE, LE 01/09/2026 ═══ Corentin, capture a l appui : « on peut bouger les filtres vers le haut et le bas, il faut regler ca pour qu on puisse tourner que sur le cote ». LA CAUSE EST UN LIBELLE QUI SE COUPE EN DEUX. Les onglets sont des elements flex, donc retrecissables par defaut. Sur telephone, la regle des cibles tactiles leur donne 44 px de haut : la barre fait 44 px, mais « Ouvrir et lire », comprime, se coupe sur deux lignes et en reclame 62. Huit px de trop, et "overflow-x: auto" seul laisse le navigateur offrir AUSSI le defilement vertical de ce debordement. D ou la capture ou la premiere rangee d onglets est a moitie sortie par le haut. TROIS DECLARATIONS, CHACUNE POUR UNE RAISON DISTINCTE, et il faut les trois : - "flex: 0 0 auto" et "white-space: nowrap" retirent la cause : un onglet garde sa largeur naturelle et ne se coupe plus jamais ; - "overflow-y: hidden" retire l effet : meme si un jour un contenu depassait en hauteur, il n y aurait plus de prise verticale ; - "touch-action: pan-x" retire le geste : c est la seule des trois que le doigt sent vraiment, elle dit au navigateur de rendre le mouvement vertical a la PAGE au lieu de le consommer ici. Sans elle, un pouce un peu oblique sur la barre bloque le defilement de la page entiere, ce qui est le vrai desagrement. "overscroll-behavior-x: contain" est ajoute au passage, comme sur les deux bandeaux : arrive en butee, la barre ne doit pas declencher le geste de retour arriere du navigateur. */ [data-sans-titres] .filtres { overflow-y: hidden; overscroll-behavior-x: contain; touch-action: pan-x; align-items: stretch; } /* Le "-1px" fait mordre le trait de l onglet sur le filet du conteneur, sinon les deux se superposent en une bande de 3 px. */ [data-sans-titres] .filtres .filtre { padding: 11px 15px; margin-bottom: -1px; font-size: var(--t-s); flex: 0 0 auto; white-space: nowrap; } /* --- 2. Montee dans l en-tete : trois colonnes de deux --- */ .entete .filtres { flex: 0 0 auto; /* MARGE GAUCHE POSEE LE 25/08/2026, a la demande : « le mot feedback dans le bandeau est legerement trop proche du filtre image quand on scroll sur la page ». Une fois montee dans l en-tete, la barre de filtres n avait pour tout ecart que l espacement de ".entete > .page", 16 px, et sa premiere colonne tombait donc a 16 px du mot « Feedback ? » que la pastille Beta deplie au survol. Les 12 px ajoutes ici portent l ecart a 28 px, soit la valeur qui separe deja les blocs de l en-tete entre eux. Elle ne vaut QUE dans l en-tete : a sa place sur la page, la barre est seule sur sa ligne. */ margin: 0 0 0 var(--e-3); padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; width: auto; max-width: none; overflow: visible; /* Trois colonnes EGALES et non ajustees au contenu : sinon les deux rangees auraient des largeurs differentes et un bord droit en escalier. Les ecarts sont dissymetriques, celui de colonne ne coutant que de la largeur, dont il reste, quand celui de rangee s ajoute a une hauteur plafonnee par les 56 px du logo. */ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px 14px; align-content: center; } /* Pas de filet de conteneur ici : sur deux rangees, un trait sous la seule derniere se lirait comme une erreur. Seul le soulignement de l onglet actif subsiste. */ .entete .filtres .filtre { font-size: var(--t-xs); padding: 3px 6px; text-align: center; } /* --- L animation de passage --- */ /* Le noeud est REELLEMENT deplace d un parent a l autre : il n y a donc aucune transition possible entre les deux etats, un element ne « glisse » pas d une boite a une autre, il disparait d un cote et reapparait de l autre. Ce qui est anime, c est donc l ARRIVEE. Le sens du mouvement suit le voyage : en montant elle arrive par le bas, en redescendant par le haut. */ @keyframes mtb-filtres-monte { from { opacity: 0; transform: translateY(10px) scale(.96); } to { opacity: 1; transform: none; } } @keyframes mtb-filtres-descend { from { opacity: 0; transform: translateY(-10px) scale(.96); } to { opacity: 1; transform: none; } } .filtres.arrive-en-haut { animation: mtb-filtres-monte .26s cubic-bezier(.34, 1.36, .64, 1) both; } .filtres.arrive-en-bas { animation: mtb-filtres-descend .26s cubic-bezier(.34, 1.36, .64, 1) both; } @media (prefers-reduced-motion: reduce) { .filtres.arrive-en-haut, .filtres.arrive-en-bas { animation: none; } .filtres .filtre { transition: none; } } /* ============================================================= LARGEUR DU SITE SUR LES GRANDS ECRANS Remarque de Corentin du 08/08/2026 : « la taille du site ne s adapte pas a mon ecran et reste figee, ce qui fait plus vide ». Elle etait juste. Le conteneur etait bloque a 1180 px quelle que soit la fenetre : sur un ecran de 2560, cela laissait 1380 px de vide, soit plus de la moitie de l ecran. Il s elargit donc par paliers, mais deux regles ne bougent pas : 1. La largeur de LECTURE reste a --etroit. Au-dela d environ 70 signes par ligne, l oeil perd le debut de la ligne suivante : elargir le texte courant le rendrait moins lisible, pas plus. Seules les grilles profitent de la place gagnee. 2. Le nombre de colonnes suit la largeur. Sans cela, elargir le conteneur ne ferait qu etirer quatre tuiles au lieu d en montrer davantage, et le vide reviendrait a l interieur des tuiles au lieu d etre autour. ============================================================= */ /* LES PALIERS DE LARGEUR SONT RETIRES LE 19/08/2026, a la demande : « je veux que tout le site prenne tout l'écran ». Ils faisaient monter "--page" de 1 180 a 2 000 px par marches, mais chaque marche laissait par construction deux bandes vides sur les cotes, et ce sont ces bandes que la demande visait. "--page" vaut desormais 100 %, dans "charte.css". Seul le NOMBRE DE COLONNES reste par paliers, et il compte plus qu avant : le conteneur n ayant plus de plafond, sans ces paliers l elargissement n aurait fait qu etirer six tuiles au lieu d en montrer davantage, et le vide serait revenu A L INTERIEUR des tuiles au lieu d etre autour. */ @media (min-width: 1400px) { .grille { grid-template-columns: repeat(5, 1fr); } } @media (min-width: 1900px) { .grille { grid-template-columns: repeat(6, 1fr); } } @media (min-width: 2200px) { .grille { grid-template-columns: repeat(7, 1fr); } } @media (min-width: 2600px) { .grille { grid-template-columns: repeat(8, 1fr); } } /* ============================================================= « AUTRES OUTILS » EN BANDEAU GLISSANT Demande de Corentin du 08/08/2026, revue le meme jour. La section presente les autres outils dans un bandeau qui glisse horizontalement. Le defilement reste natif : molette, pave tactile, glisser au doigt et tabulation fonctionnent sans script. Les deux fleches ne font que s ajouter par-dessus, pour ceux qui cliquent. ============================================================= */ /* LES FLECHES VIVENT DANS UNE BANDE RESERVEE, PAS SUR LE CONTENU. Refait le 19/08/2026, apres un premier correctif insuffisant. Le premier essai ajoutait 46 px de rembourrage A LA RANGEE. Cela dégageait la premiere et la derniere tuile, et rien d autre : le rembourrage d un conteneur defilant appartient a son CONTENU, il ne vaut donc qu aux deux extremites de la course. Des qu on faisait defiler, les tuiles repassaient sous les fleches, et la fleche droite se posait sur une tuile elle-meme coupee par le bord. La bande est donc portee par l ENVELOPPE, qui ne defile pas. La fenetre de defilement commence apres elle, et plus aucune tuile ne peut passer dessous, a quelque position que ce soit. Les fleches se calent au bord de cette bande. */ .bandeau-enveloppe { position: relative; padding-inline: 46px; } .bandeau { display: grid; grid-auto-flow: column; /* 220 et non 200 depuis le 09/08/2026 : le nom de l outil est passe a la taille des titres de carte, et "Fusionner des PDF" se coupait en deux lignes dans 200 px. */ grid-auto-columns: 220px; gap: var(--e-3); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scroll-behavior: smooth; padding: 4px; margin-inline: -4px; /* La barre de defilement est masquee : deux fleches la remplacent, plus lisibles et coherentes avec le reste de l interface. Le defilement lui-meme n est pas desactive, seulement son indicateur. */ scrollbar-width: none; } .bandeau::-webkit-scrollbar { display: none; } /* Les cartes du bandeau prennent la meme forme que celles du catalogue. Sans cette regle elles gardaient la disposition en deux colonnes, icone a gauche et texte a droite : la pastille posee dans l angle tombait alors sur le nom de l outil et le masquait. C est le defaut signale par Corentin. */ /* Aligne sur la carte du catalogue le 09/08/2026 : meme bord de famille, meme pave teinte a icone blanche, meme alignement a gauche, meme taille de titre. Sans cette reprise, les deux composants se croisaient sur la meme page dans deux styles differents, l un centre et pale, l autre a gauche et borde. */ .bandeau > .outil { scroll-snap-align: start; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; text-align: left; gap: var(--e-3); min-height: 196px; padding: var(--e-4); border-radius: var(--r-l); background: var(--fam-doux, var(--violet-doux)); border: 1px solid var(--fam, var(--violet)); } .bandeau > .outil .ico { width: 48px; height: 48px; border-radius: var(--r); background: var(--fam, var(--violet)); color: var(--surface); transition: transform .2s ease; } .bandeau > .outil .ico svg { width: 26px; height: 26px; } .bandeau > .outil .titre { font-size: var(--t-l); line-height: 1.25; margin-bottom: 0; } /* La coupe reste ici, contrairement au catalogue : dans un bandeau qui defile, les cartes n ont pas de rangee commune pour egaliser leurs hauteurs, une description longue etirerait tout le bandeau. */ .bandeau > .outil .txt { font-size: var(--t-s); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .bandeau > .outil:hover { transform: translateY(-3px); box-shadow: var(--ombre); } .bandeau > .outil:hover .ico { transform: scale(1.08); } /* --- Les deux fleches --- */ .bandeau-fleche { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 38px; height: 38px; padding: 0; display: grid; place-items: center; background: var(--surface); color: var(--ink); border: 1px solid var(--border-fort); border-radius: 50%; box-shadow: var(--ombre-douce); cursor: pointer; transition: opacity .18s ease, background .16s ease; } .bandeau-fleche:hover { background: var(--surface-2); } /* Au bord de la bande reservee par ".bandeau-enveloppe", et non plus en debordement sur le contenu : c est ce debordement de 14 px qui posait les fleches sur les tuiles. */ .bandeau-fleche.gauche { left: 4px; } .bandeau-fleche.droite { right: 4px; } .bandeau-fleche svg { width: 17px; height: 17px; } /* Une fleche qui ne mene nulle part n est plus cliquable ni focusable. Elle reste EN REVANCHE VISIBLE depuis le 19/08/2026, a la demande : elle s effacait en butee, et la rangee au repos n en montrait donc qu une, ce qui laissait croire qu elle ne se parcourait que dans un sens. Le principe n a pas change, seule sa mise en oeuvre : "hidden" est devenu "disabled", ce qui retire le clic et le clavier tout en gardant la fleche a l ecran. Le retrait visuel est franc, 32 % d opacite : a 60 ou 70 % on ne distingue plus une fleche en butee d une fleche active, et la promesse d un bouton qui ne repond pas est pire que son absence. */ .bandeau-fleche[hidden] { display: none !important; } .bandeau-fleche[disabled] { opacity: .32; cursor: default; box-shadow: none; } .bandeau-fleche[disabled]:hover { background: var(--surface); } /* ═══ LES CARTES DU BANDEAU RETRECISSENT, LE 01/09/2026 ═══════════ Corentin, capture a l appui : « il faudrait que les cartes d outils sur le menu defilant soient plus petites pour s adapter a la taille de l ecran, pour que ce soit plus visuel ». CE QUI CLOCHAIT : LA CARTE AVAIT RETRECI, PAS SON TEXTE. Le palier de 560 px, pose plus tot, ramenait bien la colonne de 220 a 158 px, mais le titre restait a « --t-l », 20 px, la taille des titres de carte du CATALOGUE, ou une tuile fait 260 px de large. Dans 158, « Fusionner des PDF » se coupe en deux lignes et « Reorganiser un PDF » deborde. C est ce qu on voit sur la capture, et c est pour ca que la carte paraissait trop grande alors qu elle etait deja reduite. LE TITRE MENE, LE RESTE SUIT. Il descend a « --t-m », 17 px, qui reste au-dessus du texte courant du site et garde donc son rang de titre. La description passe de trois lignes a deux, l icone de 44 a 40 px, le retrait a 12 px : la carte tombe de 178 a 150 px de haut. DEUX CARTES ET DEMIE A L ECRAN AU LIEU D UNE ET DEMIE, a 393 px de fenetre. C est la vraie mesure de la demande : un bandeau qui defile doit montrer qu il continue, sinon rien ne dit qu il y a un au-dela. */ @media (max-width: 560px) { .bandeau { grid-auto-columns: 148px; } .bandeau > .outil { min-height: 150px; padding: var(--e-3); gap: var(--e-2); } .bandeau > .outil .ico { width: 40px; height: 40px; } .bandeau > .outil .ico svg { width: 21px; height: 21px; } .bandeau > .outil .titre { font-size: var(--t-m); } .bandeau > .outil .txt { font-size: var(--t-xs); -webkit-line-clamp: 2; } /* A cette largeur, une bande de 46 px de chaque cote coute plus du quart de la largeur utile : elle se resserre, et les fleches avec elle. */ .bandeau-enveloppe { padding-inline: 34px; } .bandeau-fleche.gauche { left: 0; } .bandeau-fleche.droite { right: 0; } } /* Un cran de plus sous 400 px, ou la reserve des fleches coute deja 68 des 284 px utiles : a 148 px de colonne il ne restait qu une carte et un tiers a l ecran, soit le defaut que le palier ci-dessus corrige, revenu par la largeur. */ @media (max-width: 400px) { .bandeau { grid-auto-columns: 124px; gap: 10px; } .bandeau > .outil .titre { font-size: var(--t-s); } /* La reserve des fleches redescend de 34 a 28 px de chaque cote. A 375 px de fenetre elle coutait 68 px sur 339 utiles, soit un cinquieme de la bande, et le bandeau ne montrait plus que deux cartes : le defaut meme que ce palier corrige, revenu par les marges. A 28 px la fleche mord de 5 px sur la premiere carte, ce qui est sans consequence, sa colonne gauche etant vide. */ .bandeau-enveloppe { padding-inline: 28px; } } @media (prefers-reduced-motion: reduce) { .bandeau { scroll-behavior: auto; } .bandeau > .outil, .bandeau > .outil .ico { transition: none; } .bandeau > .outil:hover { transform: none; } .bandeau > .outil:hover .ico { transform: none; } } /* ============================================================= PASTILLE « POPULAIRE » SUR UNE TUILE Posee dans l angle, en absolu : elle ne pousse rien, les tuiles d une meme rangee gardent donc la meme hauteur. ============================================================= */ .outil { position: relative; } .outil > .pastille-etat { position: absolute; top: 8px; right: 8px; z-index: 2; } /* ============================================================= CIBLES TACTILES Mesure du 09/08/2026 sur la page catalogue en 375 px : 37 elements cliquables passaient sous 44 px de haut, dont les liens des deux menus deroulants a 38 px et les liens de navigation a 27 px. 44 px est la taille minimale d une cible au doigt, en dessous on rate et on croit que le site ne repond pas. "pointer: coarse" limite la regle aux appareils ou l on pointe au doigt. A la souris, 38 px suffisent largement et depassent deja les 24 px exiges par WCAG 2.5.8 : grossir les menus sur un ordinateur aurait allonge un panneau qui montre vingt outils d un coup, pour resoudre un probleme qui n existe pas la. ============================================================= */ /* Place en fin de feuille a dessein : ces regles doivent battre les declarations de taille des composants concernes, qui vivent plus haut. A specificite egale, c est la derniere qui gagne. */ @media (pointer: coarse) { .nav a, .marque, .colonne-fam a, .panneau-pied a, .pied nav a, .langues summary, .filtre, .saut-contenu { min-height: 44px; display: flex; align-items: center; } .filtre { justify-content: center; } .btn-grille { width: 44px; height: 44px; } .bascule { width: 44px; height: 44px; } /* Le champ de recherche est une vraie cible au doigt : sous 900 px il est replie en bouton loupe, et c est en le touchant qu on l ouvre. Mesure a 39 px sans cette regle. Un input ne prend pas "display: flex" comme les liens ci-dessus, la hauteur se pose donc directement. */ .recherche-champ { min-height: 44px; } /* La bulle est deja haute par son rond de 56 px, mais son lien doit l etre aussi pour que la zone touchable couvre le libelle. */ .bulle { min-height: 44px; } .recherche-res { min-height: 44px; } .derniers .liste a { min-height: 44px; } } /* ============================================================= RECHERCHE, RANGEE DE BULLES, DERNIERS OUTILS, GESTES D ICONE Quatre pistes nees de l observation de Canva, validees par Corentin le 09/08/2026 apres la maquette "_canva.html". Mesure qui a decide de la premiere : sur l accueil en 1280 px, 4 outils sur 20 seulement etaient atteignables sans defiler, 1 seul sur telephone, et le site n avait aucune recherche. ============================================================= */ /* ---- 1. La recherche, dans l en-tete de toutes les pages ------ Le champ est cree par le script et jamais ecrit dans le HTML, comme les filtres du catalogue et les fleches du bandeau : sans JavaScript il n apparait pas, plutot que d offrir un champ mort. Le catalogue complet reste atteignable par le menu et le pied de page, qui eux sont ecrits en dur. */ .recherche { position: relative; display: flex; align-items: center; } .recherche-champ { font: inherit; font-size: var(--t-s); width: 190px; padding: 9px 12px 9px 34px; background: var(--surface); color: var(--ink); border: 1px solid var(--champ-ligne); border-radius: var(--r-pill); transition: width .2s ease, border-color .18s ease, box-shadow .18s ease; } .recherche-champ::placeholder { color: var(--ink-3); } .recherche-champ:focus { outline: none; width: 260px; border-color: var(--violet); box-shadow: 0 0 0 3px color-mix(in srgb, var(--violet) 20%, transparent); } .recherche .loupe { position: absolute; left: 11px; width: 16px; height: 16px; color: var(--ink-3); pointer-events: none; } /* Le panneau de resultats. Il se pose sous le champ et se borne a la fenetre pour ne jamais sortir de l ecran, meme quand le champ est pres du bord droit : c est le defaut trouve le 08/08 sur les deux autres panneaux, ancres sur un bouton qui n est pas au bord. */ .recherche-panneau { position: absolute; top: calc(100% + 8px); left: 0; z-index: 60; width: 340px; max-width: calc(100vw - 32px); background: var(--surface); border: 1px solid var(--border-fort); border-radius: var(--r); box-shadow: var(--ombre); padding: 6px; display: none; } .recherche-panneau[data-ouvert] { display: block; } .recherche-res { display: flex; align-items: center; gap: var(--e-3); padding: 8px 10px; border-radius: var(--r-s); text-decoration: none; color: var(--ink); } .recherche-res:hover, .recherche-res:focus-visible, .recherche-res[data-vise] { background: var(--fam-doux, var(--violet-doux)); outline: none; } .recherche-res .ico-mini { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--fam, var(--violet)); color: var(--surface); } .recherche-res .ico-mini svg { width: 17px; height: 17px; } .recherche-res b { font-weight: 600; font-size: var(--t-s); } /* Le mot qui a permis de trouver, quand il n est pas dans le nom. Il explique pourquoi "watermark" sort le filigrane, au lieu de laisser croire a un resultat tombe au hasard. */ .recherche-res .via { margin-left: auto; font-family: var(--f-mono); font-size: var(--t-xs); color: var(--ink-3); white-space: nowrap; } .recherche-rien { padding: 10px; font-size: var(--t-s); color: var(--ink-2); } .recherche-rien a { color: var(--violet); } /* Sous 900 px l en-tete n a plus la place d un champ ouvert : il se replie en bouton loupe, et s ouvre a la mise au point. */ @media (max-width: 900px) { .recherche-champ { width: 38px; padding-left: 34px; padding-right: 4px; cursor: pointer; } .recherche-champ::placeholder { color: transparent; } .recherche-champ:focus { width: min(300px, 52vw); padding-right: 12px; cursor: text; } .recherche-champ:focus::placeholder { color: var(--ink-3); } .recherche-panneau { left: auto; right: 0; width: min(340px, calc(100vw - 32px)); } } /* ---- 2. La rangee de bulles ----------------------------------- Une bande d acces rapide sous l en-tete, sur l accueil et sur la page catalogue. Ce sont de vrais liens ecrits dans le HTML, pas fabriques par le script : un moteur de recherche ne suit pas ce que JavaScript invente, et ces liens comptent pour le maillage. Contre Canva, qui donne une couleur pleine par outil : les quatre teintes de famille sont conservees. La couleur sert ici a reperer une famille, pas a decorer, c est la regle posee en D75. L encre de la bulle est --surface et non du blanc. En sombre les quatre teintes sont volontairement claires : du blanc y tombait entre 1.67 et 2.72 de contraste, sous le seuil de 3 exige pour un element non textuel. --surface bascule avec le theme et remonte le minimum mesure a 5.02. */ /* La rangee se conduit comme les bandeaux "autres outils" de D81 : meme enveloppe, memes deux fleches ajoutees par "commun.js", meme defilement natif. Demande de Corentin du 09/08/2026, "un menu qu on peut tourner pour voir tous les autres, sur le meme format que les menus dans les outils". Elle porte donc les vingt outils et non douze, les plus demandes en tete. Seule difference avec le bandeau d origine : la largeur d une colonne, 82 px pour une bulle contre 220 px pour une carte. */ .rangee-bulles { display: grid; grid-auto-flow: column; grid-auto-columns: 82px; gap: var(--e-4); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scroll-behavior: smooth; /* RETOUCHE DU 19\08\2026 : la rangee ne laissait que 4 px de marge laterale quand les deux fleches font 38 px et debordent encore de 14 px vers l exterieur. Elles se posaient donc sur la premiere et la derniere bulle, dont elles masquaient l icone. La rangee reserve desormais leur largeur de chaque cote, et "scroll-padding-inline" la reserve AUSSI au defilement : sans lui, une bulle amenee par les fleches ou par le clavier venait s arreter pile dessous. */ /* La reserve des fleches est portee par ".bandeau-enveloppe", pas ici : voir le commentaire pose sur cette classe. Il ne reste que les 4 px qui empechent le soulevement au survol d etre rogne. */ padding: var(--e-4) 4px; scrollbar-width: none; } .rangee-bulles::-webkit-scrollbar { display: none; } .bulle { scroll-snap-align: start; display: flex; flex-direction: column; align-items: center; gap: 7px; text-align: center; text-decoration: none; color: inherit; } .bulle .rond { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--fam, var(--violet)); color: var(--surface); box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--fam, var(--violet)) 70%, transparent); transition: transform .2s cubic-bezier(.34, 1.56, .64, 1), box-shadow .2s ease; } .bulle .rond svg { width: 27px; height: 27px; } .bulle .nom { font-size: var(--t-xs); line-height: 1.25; color: var(--ink-2); } .bulle:hover .rond, .bulle:focus-visible .rond { transform: translateY(-4px) scale(1.06); box-shadow: 0 12px 22px -10px color-mix(in srgb, var(--fam, var(--violet)) 80%, transparent); } .bulle:hover .nom, .bulle:focus-visible .nom { color: var(--ink); } .bulle:focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; border-radius: var(--r-s); } /* ---- 3. Vos derniers outils ----------------------------------- Les trois derniers outils ouverts, gardes dans le navigateur du visiteur. Le bloc est cree par le script, forcement : sans JavaScript il n y a pas de memoire a afficher. */ .derniers { margin-block: var(--e-5); } .derniers h2 { font-family: var(--f-titre); font-size: var(--t-l); margin-bottom: 2px; } .derniers .sous { font-size: var(--t-s); color: var(--ink-2); margin-bottom: var(--e-3); } .derniers .sous button { font: inherit; font-size: var(--t-s); color: var(--violet); background: none; border: none; padding: 0; cursor: pointer; text-decoration: underline; } .derniers .liste { display: flex; gap: var(--e-3); flex-wrap: wrap; } .derniers .liste a { display: flex; align-items: center; gap: 9px; text-decoration: none; color: var(--ink); font-size: var(--t-s); font-weight: 600; background: var(--fam-doux, var(--violet-doux)); border: 1px solid var(--fam, var(--violet)); border-radius: var(--r-pill); padding: 8px 16px 8px 10px; } .derniers .liste a svg { width: 18px; height: 18px; color: var(--fam, var(--violet)); } /* ---- 4. Un geste par verbe, au survol ------------------------- Le site agrandissait deja l icone de 8 % au survol (D77). Le geste dit maintenant ce que l outil fait. Les outils sont designes par leur adresse et non par une classe ajoutee dans le HTML : cela evite de repasser sur les 27 pages pour un effet purement visuel, et un outil renomme perd son geste au lieu d en garder un faux. Tout est coupe par prefers-reduced-motion, plus haut dans ce fichier, comme le reste des animations du site. */ .outil .ico svg { transition: transform .32s cubic-bezier(.34, 1.56, .64, 1); } /* Compresser : l icone s ecrase. */ .outil[href="/compresser-pdf/"]:hover .ico svg, .outil[href="/compresser-image/"]:hover .ico svg { transform: scaleY(.8) scaleX(1.08); } /* Pivoter : elle tourne. */ .outil[href="/pivoter-pdf/"]:hover .ico svg { transform: rotate(-16deg) scale(1.06); } /* Convertir : elle glisse vers sa cible. */ .outil[href="/pdf-en-images/"]:hover .ico svg, .outil[href="/images-en-pdf/"]:hover .ico svg, .outil[href="/pptx-en-pdf/"]:hover .ico svg, .outil[href="/convertir-image/"]:hover .ico svg { transform: translateX(5px) scale(1.05); } /* Ouvrir et lire : elle se souleve, comme un couvercle. */ .outil[href="/ouvrir-docx/"]:hover .ico svg, .outil[href="/ouvrir-xlsx/"]:hover .ico svg, .outil[href="/ouvrir-pptx/"]:hover .ico svg, .outil[href="/ouvrir-glb/"]:hover .ico svg, .outil[href="/decompresser-zip/"]:hover .ico svg { transform: translateY(-5px) scale(1.08); } /* Diviser ecarte, fusionner resserre : deux verbes opposes, deux gestes opposes. */ .outil[href="/diviser-pdf/"]:hover .ico svg { transform: scaleX(1.14); } .outil[href="/fusionner-pdf/"]:hover .ico svg { transform: scaleX(.88); } /* Redimensionner : elle grandit franchement, plus que les 8 % communs, sinon le geste ne se distingue pas de celui des autres. */ .outil[href="/redimensionner-image/"]:hover .ico svg { transform: scale(1.2); } /* Extraire sort une piece, supprimer en retire une. */ .outil[href="/extraire-pages-pdf/"]:hover .ico svg { transform: translateY(-4px) scale(1.06); } .outil[href="/supprimer-pages-pdf/"]:hover .ico svg { transform: scale(.88); } /* COMPLETE LE 19/08/2026, sur verification demandee. Le commentaire qui tenait cette place annoncait « les quatre outils restants » : il datait du temps ou le site en comptait vingt. Au controle, 35 des 52 outils n avaient aucun geste propre et se contentaient de l agrandissement commun. Les voici, ranges par verbe comme les precedents, et non un par un : c est le verbe qui porte le geste, deux outils qui font la meme chose bougent pareil. Le principe d origine tient toujours : aucun geste force. Chacun de ceux-ci se lit sans legende, sinon il n est pas ecrit. */ /* Convertir : elle glisse vers sa cible, comme les quatre premieres. */ .outil[href="/word-en-pdf/"]:hover .ico svg, .outil[href="/epub-en-pdf/"]:hover .ico svg, .outil[href="/xlsx-en-csv/"]:hover .ico svg, .outil[href="/pdf-en-texte/"]:hover .ico svg, .outil[href="/heic-en-jpg/"]:hover .ico svg, .outil[href="/png-en-jpg/"]:hover .ico svg, .outil[href="/jpg-en-png/"]:hover .ico svg, .outil[href="/jpg-en-webp/"]:hover .ico svg, .outil[href="/webp-en-jpg/"]:hover .ico svg, .outil[href="/webp-en-png/"]:hover .ico svg, .outil[href="/png-en-webp/"]:hover .ico svg, .outil[href="/convertir-3d/"]:hover .ico svg { transform: translateX(5px) scale(1.05); } /* Ouvrir : elle se souleve, comme les cinq autres « ouvrir ». */ .outil[href="/ouvrir-epub/"]:hover .ico svg { transform: translateY(-5px) scale(1.08); } /* Extraire : elle sort une piece, comme « extraire des pages ». */ .outil[href="/extraire-images-pdf/"]:hover .ico svg { transform: translateY(-4px) scale(1.06); } /* Pivoter : elle tourne, comme « pivoter un PDF ». */ .outil[href="/pivoter-image/"]:hover .ico svg { transform: rotate(-16deg) scale(1.06); } /* Rogner et recadrer : le cadre se resserre. L inverse exact de « redimensionner », qui grandit. */ .outil[href="/rogner-pdf/"]:hover .ico svg, .outil[href="/recadrer-image/"]:hover .ico svg { transform: scale(.86); } /* Signer : la main penche, comme un paraphe qu on pose. */ .outil[href="/signer-pdf/"]:hover .ico svg { transform: rotate(-9deg) scale(1.07); } /* Enregistrer : elle enfle une fois, comme un temoin qui s allume. Le seul groupe qui grandit sans se deplacer : capter, ce n est ni transformer ni deplacer, c est etre en marche. */ .outil[href="/dictaphone/"]:hover .ico svg, .outil[href="/enregistrer-ecran/"]:hover .ico svg, .outil[href="/enregistrer-camera/"]:hover .ico svg { transform: scale(1.16); } /* Fermer et proteger : elle se resserre franchement. */ .outil[href="/creer-zip/"]:hover .ico svg, .outil[href="/proteger-zip/"]:hover .ico svg { transform: scaleX(.82) scaleY(.94); } /* Deverrouiller : l inverse, elle s ouvre vers le haut. */ .outil[href="/deverrouiller-pdf/"]:hover .ico svg { transform: translateY(-4px) scaleY(1.1); } /* Nettoyer : elle s efface un peu, elle ne grandit pas. Un outil qui RETIRE quelque chose ne doit pas prendre plus de place au survol. */ .outil[href="/nettoyer-metadonnees-pdf/"]:hover .ico svg, .outil[href="/nettoyer-metadonnees-image/"]:hover .ico svg { transform: scale(.9) rotate(6deg); } /* Caviarder : elle s aplatit, comme une bande posee dessus. */ .outil[href="/caviarder-pdf/"]:hover .ico svg { transform: scaleY(.7) scaleX(1.06); } /* Filigrane : elle penche, comme un tampon pose de travers. */ .outil[href="/filigrane-pdf/"]:hover .ico svg, .outil[href="/filigrane-image/"]:hover .ico svg { transform: rotate(-12deg) scale(1.04); } /* Numeroter et poser N pages par feuille : elle se decale d un cran, le geste de ce qui se range en suite. */ .outil[href="/numeroter-pdf/"]:hover .ico svg, .outil[href="/pages-par-feuille/"]:hover .ico svg { transform: translate(3px, 3px) scale(1.05); } /* Reorganiser : elle bascule, deux pieces qui echangent leur place. */ .outil[href="/reorganiser-pdf/"]:hover .ico svg { transform: rotate(8deg) scaleX(-1); } /* Engendrer : elle apparait en tournant un peu. QR code, mot de passe et pseudo ne transforment rien, ils FABRIQUENT. */ .outil[href="/qr-code/"]:hover .ico svg, .outil[href="/generateur-mot-de-passe/"]:hover .ico svg, .outil[href="/generateur-pseudo/"]:hover .ico svg { transform: rotate(-6deg) scale(1.12); } /* ============================================================= CADRE DE RECADRAGE Ajoute le 09/08/2026 avec l outil « Recadrer une image ». Le cadre vit en pixels de l image d origine cote script, jamais en pixels d ecran : l apercu peut etre reduit ou la fenetre redimensionnee sans que le recadrage bouge. Ces regles ne font que le dessiner. ============================================================= */ .recadre-scene { position: relative; display: inline-block; max-width: 100%; line-height: 0; /* sinon l image laisse un bas blanc */ border-radius: var(--r); overflow: hidden; background: var(--surface-2); touch-action: none; /* le doigt tire le cadre, il ne fait pas defiler la page */ user-select: none; } .recadre-scene img { display: block; max-width: 100%; height: auto; } /* L exterieur du cadre est assombri par une ombre portee immense plutot que par quatre bandes posees autour : une seule declaration, et elle suit le cadre sans calcul. */ /* La bordure est blanche en dur, pas --surface : elle est posee sur la photo du visiteur et non sur le fond du site. En theme sombre --surface vaut un gris tres fonce, le cadre disparaissait alors sur toute image un peu sombre. Le blanc et l ombre exterieure le rendent visible sur n importe quelle image, claire comme foncee. */ .recadre-cadre { position: absolute; box-sizing: border-box; border: 2px solid #FFFFFF; box-shadow: 0 0 0 9999px rgba(0, 0, 0, .55); cursor: move; } .recadre-cadre:focus-visible { outline: 3px solid var(--violet); outline-offset: 2px; } /* Les tiers, reperes de composition. Traces en degrades pour ne coûter aucun element de plus. */ .recadre-cadre::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to right, transparent calc(33.33% - .5px), rgba(255,255,255,.45) calc(33.33% - .5px), rgba(255,255,255,.45) calc(33.33% + .5px), transparent calc(33.33% + .5px)), linear-gradient(to right, transparent calc(66.66% - .5px), rgba(255,255,255,.45) calc(66.66% - .5px), rgba(255,255,255,.45) calc(66.66% + .5px), transparent calc(66.66% + .5px)), linear-gradient(to bottom, transparent calc(33.33% - .5px), rgba(255,255,255,.45) calc(33.33% - .5px), rgba(255,255,255,.45) calc(33.33% + .5px), transparent calc(33.33% + .5px)), linear-gradient(to bottom, transparent calc(66.66% - .5px), rgba(255,255,255,.45) calc(66.66% - .5px), rgba(255,255,255,.45) calc(66.66% + .5px), transparent calc(66.66% + .5px)); } /* 22 px et non 12 : une poignee se prend au doigt. Elle deborde du cadre pour rester saisissable meme quand le cadre est minuscule. */ /* ═══ RENOMMEE EN ".poignee-cadre" LE 01/09/2026 ═════════════════ Defaut signale par Corentin sur "/images-en-pdf/", capture a l appui : le numero d ordre d un fichier se dessinait EN ROND BLANC CERNE DE VIOLET, par-dessus le nom du fichier. DEUX CLASSES ".poignee" SANS AUCUN RAPPORT COHABITAIENT. Celle-ci, les quatre coins qu on tire pour recadrer une image ; et ".fichier .poignee", le numero d ordre des listes de fichiers, ecrit par "outil.js" pour "/fusionner-pdf/" et "/images-en-pdf/". LA COLLISION NE PORTAIT QUE SUR CE QUE LA SECONDE NE DECLARE PAS, ce qui la rendait invisible a la relecture. ".fichier .poignee" pese plus lourd, (0,2,0) contre (0,1,0), et gagnait donc sur la largeur, la couleur et la graisse : ces trois-la etaient justes. Mais elle ne dit rien de "position", "background", "border", "border-radius" ni "z-index", et les cinq lui tombaient dessus depuis ici. "position: absolute" est celle qui se voit : le numero quittait le flux et se posait sur le nom. LE REMEDE EST LE RENOMMAGE, ET NON LA REDECLARATION. Ecrire "position: static; background: none; border: 0" dans ".fichier .poignee" aurait corrige la capture en laissant la collision en place, prete a resservir a la premiere propriete ajoutee ici. Deux objets differents ne doivent pas porter le meme nom. C est CE bloc qui est renomme et non l autre, parce qu il est local a un seul outil, quand ".fichier .poignee" est ecrit par "outil.js" pour tout le site. Le JS de "/recadrer-image/" lit "data-coin" et jamais la classe : le renommage ne touche que ce fichier et les quatre balises de la page. */ .poignee-cadre { position: absolute; width: 22px; height: 22px; background: #FFFFFF; border: 2px solid var(--violet); border-radius: 50%; z-index: 2; } .poignee-cadre.ht-g { left: -11px; top: -11px; cursor: nwse-resize; } .poignee-cadre.ht-d { right: -11px; top: -11px; cursor: nesw-resize; } .poignee-cadre.bs-g { left: -11px; bottom: -11px; cursor: nesw-resize; } .poignee-cadre.bs-d { right: -11px; bottom: -11px; cursor: nwse-resize; } .recadre-mesure { margin-top: var(--e-3); color: var(--ink-2); font-size: var(--t-s); } /* Apercu du filigrane. Le damier rappelle qu une image transparente le reste : sur un fond uni, un PNG a fond transparent aurait l air d avoir un fond blanc. */ .apercu-filigrane { display: block; max-width: 100%; height: auto; border-radius: var(--r); border: 1px solid var(--border); background-color: var(--surface); background-image: linear-gradient(45deg, var(--surface-2) 25%, transparent 25%), linear-gradient(-45deg, var(--surface-2) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--surface-2) 75%), linear-gradient(-45deg, transparent 75%, var(--surface-2) 75%); background-size: 16px 16px; background-position: 0 0, 0 8px, 8px -8px, -8px 0; } /* ---- Pastille « Bêta », TEMPORAIRE ----------------------------- Posée le 13/08/2026 pour signaler l'accès anticipé. À RETIRER dès que le site est stabilisé après la mise en ligne, avec "node _labo/pastille-beta.js --retirer --ecrire". Elle réutilise la forme de ".pastille" et n'en change que trois choses : la couleur, le fond, et l'écusson qu'elle n'a pas. Le violet en traitement doux, et pas le lime : la charte réserve le lime au signal « local », que porte la pastille voisine. Pas le rouge non plus, qui veut dire « quelque chose ne va pas » sur ce site (cf. D75) : une bêta n'est pas une panne. Le contour est renforcé pour la même raison que celui de ".pastille", et la mesure le confirme : "--violet-doux" ne se détache du fond de page que de 1,20 en thème clair, et "--violet-ligne" de 1,62. Ni le fond ni la bordure ne délimitaient donc la pastille, qui flottait. Le mélange à 70 % la ramène au-dessus du seuil de 3, mesuré à 4,31 en clair et 5,20 en sombre. L'écusson est retiré explicitement : ".pastille::before" le pose pour tout le monde, et un bouclier devant le mot « Bêta » ferait exactement la confusion qu'on cherche à éviter. */ .pastille-beta { color: var(--violet); background: var(--violet-doux); border-color: color-mix(in srgb, var(--violet) 70%, var(--violet-ligne)); } .pastille-beta::before { content: none; } /* ELLE EST DEVENUE UN LIEN le 19/08/2026, a la demande : elle mene a "/contact/", qui porte deja « Signaler une erreur, utilement » et « Proposer un outil ». Aucune page n a donc ete creee pour cela, une seconde page de retour aurait dedouble ce contenu. Trois choses a poser, qu un n avait pas besoin de dire : le soulignement, que le navigateur ajoute d office ; le curseur, pour qu on voie que c est cliquable avant de cliquer ; et un etat de survol, sans quoi rien ne distingue cette pastille des deux autres, qui elles ne menent nulle part. La couleur, elle, n a pas a etre reprise : ".pastille-beta" pese plus que le "a" de la charte et gagne deja. */ a.pastille-beta { text-decoration: none; cursor: pointer; } /* ---- L APPEL A AVIS ---- Ajoute le 20/08/2026, a la demande : signaler que la pastille « Beta » est cliquable. LE PROBLEME QU IL REGLE. Elle mene a "/contact/" depuis le 19/08 et rien ne le disait : une pastille ressemble a une etiquette, pas a un bouton. L intitule vivait dans un attribut "title", c est-a-dire nulle part pour qui ne survole pas, et nulle part du tout sur telephone. DEUX JETS RATES AVANT CELUI-CI, et les deux echecs disent la meme chose. Le premier glissait la fleche et la phrase A L INTERIEUR de la pastille, qui gonflait alors a 245 px et noyait le mot « Beta ». Le second les posait A COTE, en frere : la pastille reprenait sa taille mais l annotation occupait sa propre place dans la ligne, et sur la page des outils, ou la barre de filtres vient s installer dans le meme en-tete, il n y avait plus la place pour tout le monde. ELLE NE PREND DONC PLUS AUCUNE PLACE. "position: absolute" la sort du flux : elle flotte sous la pastille et ne peut plus, par construction, repousser quoi que ce soit. C est la seule forme qui tienne dans un en-tete dont le contenu change d une page a l autre. ELLE EST DANS LE LIEN, PAS A COTE. Hors du flux, l argument qui l avait fait sortir ne tient plus : un enfant absolu n ajoute ni largeur ni hauteur. La remettre dedans evite deux arrets au clavier vers la meme adresse, et le clic sur la fleche mene ou il doit. "aria-hidden" reste : lue seule, hors de son contexte visuel, « Feedback ? » ne menerait nulle part, et le lien porte deja son "title". LA FLECHE POINTE VERS LE HAUT ET LA GAUCHE, vers la pastille au- dessus d elle. Elle est tracee vers la droite, retournee puis inclinee : un seul trace a maintenir. ELLE DISPARAIT SOUS 1100 PX. Elle ne bouscule plus rien, le seuil ne protege donc plus la mise en page mais la lisibilite : en dessous, l en-tete se resserre et une annotation flottante viendrait se poser sur le contenu. */ a.pastille-beta { position: relative; } .appel-avis { display: none; position: absolute; /* Placement calcule, pas ajuste a l oeil. Dans un viewBox de 24 la pointe est en (5 - 5) : rendue a 16 px elle tombe a 3,33 du bord gauche du dessin et autant du bord haut. Les deux decalages retranchent cette avance, plus l ecart voulu avec la pastille. En pourcentage et non en pixels : le jour ou « Beta » se traduit et que la pilule change de largeur, la fleche suit son coin seule. */ /* LE "top" REMONTE DE 4 PX ET LE "padding-top" LES REND AU TEXTE. La zone sensible grandit donc vers le haut, le mot ne bouge pas d un pixel. CE QU IL FERME, mesure le 20/08/2026 apres la pose du pont : il restait un lisere d un pixel de haut entre le bord droit du pont et le bord haut de cette annotation, ou le survol retombait. Trois trajets de souris sur quatre etaient deja propres, le quatrieme ne l etait pas. */ top: calc(100% - 3px); padding-top: 4px; left: calc(100% - 5px); align-items: center; gap: 3px; font-family: var(--f-texte); font-size: 10.5px; font-weight: 600; letter-spacing: 0; color: var(--violet); white-space: nowrap; transition: color .18s ease, text-shadow .18s ease, filter .18s ease; } /* La queue du trace est en (22 - 13), soit 0,67 px sous le centre du dessin. Le "top" negatif la remonte au milieu optique du F, qui est lui-meme au-dessus du milieu de la ligne de texte : une capitale ne descend pas sous la ligne de base, son centre n est donc pas celui de la boite. */ .appel-avis svg { width: 16px; height: 16px; flex: none; position: relative; top: -2px; transition: filter .18s ease; } /* ---- L ANIMATION AU SURVOL ---- Demandee le 20/08/2026. Elle porte sur LA FLECHE et pas sur le mot : la fleche designe, le mot ne fait que nommer, et animer les deux ferait bouger une phrase que l on est en train de lire. LE MOUVEMENT SUIT L AXE DU DESSIN. La fleche pointe vers le haut a gauche, vers le coin bas-droit de la pastille : elle avance donc en diagonale dans cette direction, 2 px, puis revient. Un mouvement perpendiculaire a la pointe se lirait comme un tremblement. TROIS ALLERS-RETOURS ET NON UNE BOUCLE SANS FIN. Une invitation se fait une fois. Un clignotement perpetuel sous le curseur devient du bruit, et sur un element toujours a l ecran c est precisement ce que "prefers-reduced-motion" existe pour couper. */ /* ---- LE MOT « FEEDBACK ? » : SOULIGNEMENT ET VAGUE ---- Melange des pistes 4 et 5 de "_labo/animations-20aout.html", choisi le 20/08/2026. Les deux ne font pas double emploi parce qu elles ne disent pas la meme chose : LE SOULIGNEMENT DIT « CECI EST UN LIEN ». Il se tire de gauche a droite en 0,32 s et il RESTE. C est l information qui manquait a l origine, celle pour laquelle toute cette annotation existe. LA VAGUE DIT « VENEZ ». Elle boucle tant que la souris est la, chaque lettre montant 45 ms apres la precedente. Un geste qui s installe et un geste qui insiste : le premier informe une fois, le second entretient l invitation. LA PISTE 3, L ECARTEMENT DES LETTRES, EST GARDEE EN RESERVE a la demande. Pour la reprendre : remplacer "av-vague" par une animation sur "letter-spacing" de 0 a .06em sur ".av-mot", et retirer le decoupage en lettres, dont elle n a pas besoin. LES LETTRES SONT DES ET NON DES : dix balises par page fois 62 pages, le nom le plus court gagne 60 octets par page. Le style italique est neutralise juste en dessous. */ .av-mot { display: inline-block; position: relative; } .av-mot i { display: inline-block; font-style: normal; } /* Le trait se tire depuis la gauche et ne boucle pas : il s installe. "transform-origin: left" est ce qui fait la difference entre un trait qu on tire et un bloc qui apparait. */ .av-mot::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1.5px; background: currentColor; border-radius: 2px; transform: scaleX(0); transform-origin: left center; transition: transform .32s cubic-bezier(.4, 0, .2, 1); } a.pastille-beta:hover .av-mot::after, a.pastille-beta:focus-visible .av-mot::after { transform: scaleX(1); } @keyframes av-vague { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-2.5px); } } /* EN FORME LONGUE, ET C EST OBLIGATOIRE. La forme courte "animation:" REINITIALISE toutes les proprietes qu elle ne cite pas, retard compris. Cette regle etant plus specifique que les dix ".av-mot i:nth-child(n)" posees plus bas, elle ecrasait leur "animation-delay" et les dix lettres repartaient ensemble : plus une vague, un rebond. Mesure au survol force le 20/08 : 0s dix fois, la ou le repos annonce bien 0 a 405 ms. La forme longue ne touche pas au retard, qui reste celui des nth-child. */ a.pastille-beta:hover .av-mot i, a.pastille-beta:focus-visible .av-mot i { animation-name: av-vague; animation-duration: .78s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; } /* Le retard se pose ici et non dans le balisage : dix attributs "style" par page seraient dix fois le meme reglage expedie 62 fois. */ .av-mot i:nth-child(1) { animation-delay: 0ms; } .av-mot i:nth-child(2) { animation-delay: 45ms; } .av-mot i:nth-child(3) { animation-delay: 90ms; } .av-mot i:nth-child(4) { animation-delay: 135ms; } .av-mot i:nth-child(5) { animation-delay: 180ms; } .av-mot i:nth-child(6) { animation-delay: 225ms; } .av-mot i:nth-child(7) { animation-delay: 270ms; } .av-mot i:nth-child(8) { animation-delay: 315ms; } .av-mot i:nth-child(9) { animation-delay: 360ms; } .av-mot i:nth-child(10) { animation-delay: 405ms; } @keyframes designer { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-2px, -2px); } } a.pastille-beta:hover .appel-avis svg, a.pastille-beta:focus-visible .appel-avis svg { /* REGLE LE 20/08 : plus lente, et sans fin tant que la souris est la. Elle faisait trois allers-retours puis s arretait, ce qui laissait l annotation morte sous le curseur au moment ou la personne est justement en train de decider si elle clique. Une invitation qui s eteint pendant qu on hesite ne sert plus a rien. Le cycle passe de 0,42 a 0,62 s : le meme deplacement de 2 px etale sur une demi-fois plus de temps se lit comme un geste et non comme un tic. */ animation: designer .62s ease-in-out infinite; } /* ---- Le neon au survol ---- L annotation redevient sensible a la souris : elle est DANS le lien de la pastille, donc la survoler et la cliquer menent deja a "/contact/", sans ajouter ni arret au clavier ni seconde destination. "pointer-events" etait a "none" tant qu elle n etait qu un decor ; elle ne l est plus. Le halo est pose en "text-shadow" sur le mot et en "drop-shadow" sur le dessin : un filtre sur le conteneur flouterait le texte lui-meme au lieu de l entourer. Deux couches, une serree et une large, c est ce qui donne l impression de lueur plutot que d ombre. */ /* LE SURVOL EST SYMETRIQUE, et il doit l etre : les deux moities sont un seul lien vers une seule adresse. Survoler la phrase allumait deja la pastille, puisque la phrase vit dedans ; survoler la pastille n allumait pas la phrase, ce qui laissait croire a deux commandes distinctes. "a.pastille-beta:hover .appel-avis" ferme l ecart. */ a.pastille-beta:hover .appel-avis, a.pastille-beta:focus-visible .appel-avis { color: var(--violet-fonce); text-shadow: 0 0 4px color-mix(in srgb, var(--violet) 70%, transparent), 0 0 12px color-mix(in srgb, var(--violet) 45%, transparent); } a.pastille-beta:hover .appel-avis svg, a.pastille-beta:focus-visible .appel-avis svg { filter: drop-shadow(0 0 3px color-mix(in srgb, var(--violet) 70%, transparent)) drop-shadow(0 0 9px color-mix(in srgb, var(--violet) 45%, transparent)); } /* SEUIL PORTE DE 1 150 A 1 240 LE 21/08/2026, SUR MESURE. CE QUI N ALLAIT PAS. Le seuil precedent ne regardait qu une chose, le moment ou l en-tete cesse de se replier sur deux lignes, mesure a 1 150. Mais une fois l en-tete sur UNE seule ligne, l annotation flotte sous la pastille et s etend VERS LA DROITE, ou l attend le bord gauche de la navigation. Le repliement etait regle, la collision horizontale ne l etait pas : a 1 150 px l annotation mordait de 43 px sur « Tous les outils », et le chevauchement ne disparaissait qu a 1 193. COMMENT LE NOMBRE A ETE OBTENU, ET COMMENT LE REFAIRE. Ce n est plus une estimation. Neuf pages ont ete rendues de 1 150 a 1 500 px par pas de 10, en relevant l ecart entre le bord droit de l annotation et le bord gauche de la navigation, et en cherchant la premiere largeur ou cet ecart atteint 12 px. Reponse identique sur les neuf : 1 210 px. Le seuil est pose a 1 240, ce qui laisse 47 px de degagement au lieu de deux. POURQUOI 1 240 NE COUTE RIEN. Les largeurs de portable courantes sont 1 280, 1 366, 1 440, 1 512, 1 536 et 1 920. Toutes passent. Un seuil a 1 210 n aurait rien gagne en couverture et aurait rendu la marge dependante d une police de secours ou d un mot plus long. POURQUOI CE NOMBRE A DEJA ETE FAUX QUATRE FOIS, 1 240 puis 1 100, puis 1 240, puis 1 150 : il etait a chaque fois DEDUIT du comportement de l en-tete au lieu d etre MESURE sur la collision elle-meme. Une annotation hors du flux ne previent jamais qu elle recouvre son voisin, aucun controleur du projet ne lit un recouvrement, et l en-tete ne grandit pas d un pixel. Le defaut ne se voit qu a l oeil, sur une bande de 90 px de large. */ @media (min-width: 1240px) { .appel-avis { display: inline-flex; } /* ═══ CINQUIEME RECOUVREMENT, TROUVE ET MESURE LE 25/08/2026 ═══ Demande : « le mot Feedback ? dans le bandeau est legerement trop proche du filtre Image quand on scroll sur la page ». CE N ETAIT PAS « TROP PROCHE », C ETAIT UN RECOUVREMENT FRANC, et c est exactement le defaut que le commentaire ci-dessus decrit : une annotation hors du flux ne previent jamais qu elle recouvre son voisin. Mesure sur "/outils/" a 1 455 px, page defilee, barre de filtres montee dans l en-tete : le mot « Feedback ? » x 424,3 a 482,5 y 80,4 a 97,8 le filtre « Image » x 445,5 a 536,6 y 76,5 a 103,2 Soit 37 px de chevauchement horizontal et un recouvrement vertical complet. Le mot etait ECRIT PAR-DESSUS le filtre. POURQUOI DEPLACER LA BARRE NE REGLE RIEN. C etait le premier reflexe, et la mesure l a ecarte. L en-tete portant la barre de filtres est PLEINE : a 1 455 px il restait 22 px entre la barre et la navigation. Rendre les 37 px manquants au mot, plus un ecart lisible, demande d en trouver 49, qui n existent pas. Reserver l avancee du mot sur ".ligne" revient au meme, l espace pris est le meme espace. Et remonter le seuil de montee de la barre, mesure fait, l aurait porte de 1 450 a environ 1 570 px : la barre ne serait plus montee que sur les tres grands ecrans, pour sauver une annotation decorative. CE QUI CEDE EST DONC L ANNOTATION, et c est le bon arbitrage. Elle signale que la pastille « Beta » est cliquable ; la pastille, elle, ne bouge pas, reste cliquable et garde son "title". La barre de filtres, elle, EST la fonction de la page. Une seule des deux peut occuper cette bande de 90 px, ce sera celle qui sert. LE SELECTEUR VISE L ETAT, PAS LA PAGE. ":has(> .filtres)" ne vaut que pendant que la barre est effectivement montee dans l en-tete : sur "/outils/" en haut de page, et sur les 55 autres pages, le mot s affiche comme avant. */ .entete > .page:has(> .filtres) .appel-avis { display: none; } /* LE PONT DE SURVOL. Les trois morceaux sont un seul lien, ils doivent donc s allumer d un seul tenant, y compris PENDANT que la souris voyage de l un a l autre. CE QUI N ALLAIT PAS, mesure et non suppose : la pilule est arrondie et l annotation commence sous son coin bas-droit. Entre les deux subsiste un croissant qui appartient a la boite de la pilule mais PAS a sa forme arrondie, et le navigateur y rend le div parent. Sur un trajet du centre de la pastille vers le mot, 4 a 12 points sur 61 tombaient dans ce croissant : le halo s eteignait puis se rallumait en chemin, ce qui est exactement ce qui fait croire a deux commandes separees. LA REPARATION est une zone sensible et invisible, sans fond ni bordure, qui recouvre le croissant et rejoint l annotation. Elle ne dessine rien, elle ne fait que rendre le survol continu. ELLE VIT DANS CETTE MEDIA QUERY et pas ailleurs : sous 1 150 px l annotation est masquee, il n y a plus rien a relier, et le pont ne ferait qu agrandir la cible du lien sans raison. VERIFIE AVANT DE LA POSER : aucun autre lien, bouton ou champ ne traverse ce rectangle, elle n intercepte donc le clic de personne. A revoir si un element est ajoute a droite de la pastille dans l en-tete. */ a.pastille-beta::after { content: ""; position: absolute; top: 40%; left: 40%; right: -8px; bottom: -6px; } } @media (prefers-reduced-motion: reduce) { .appel-avis, .appel-avis svg, a.pastille-beta { transition: none; } a.pastille-beta:hover .appel-avis svg, a.pastille-beta:focus-visible .appel-avis svg { animation: none; } a.pastille-beta:hover .av-mot i, a.pastille-beta:focus-visible .av-mot i { animation: none; } .av-mot::after { transition: none; } } /* LE SURVOL DES DEUX MOITIES EST LE MEME EFFET, ET NON DEUX EFFETS. Defaut mesure le 20/08/2026, signale a l oeil avant de l etre a la mesure : « on dirait que c est independant ». Deux ecarts, et le second est le vrai. UN, LA DUREE. La pastille etait a "transition: all 0s" faute d en declarer une : son fond et sa bordure CLAQUAIENT quand le mot et la fleche fondaient en 0,18 s. Deux moities d un meme lien qui ne partent pas ensemble se lisent comme deux commandes. DEUX, LA NATURE. Plus grave, parce qu aucune duree ne l aurait rattrape : la pastille se REMPLISSAIT quand l annotation S ALLUMAIT. Un fond qui fonce et un halo ne sont pas le meme langage, les synchroniser au millieme n y change rien. Elle recoit donc le halo, en "box-shadow" parce qu elle a un fond : un "text-shadow" aurait fait baver le mot « Beta » sur sa propre pilule, la ou le halo doit entourer la forme. C est l equivalent exact du "drop-shadow" de la fleche, qui cerne son trace. LES TROIS VALEURS SONT REPRISES TELLES QUELLES de l annotation, 4 px a 70 % et 12 px a 45 %, plus le passage a "--violet-fonce". Elles ne sont pas rechoisies ici : c est leur identite qui fait que l oeil voit un seul objet s allumer, et les recalibrer separement rouvrirait le defaut sous une autre forme. */ a.pastille-beta { transition: color .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease; } a.pastille-beta:hover, a.pastille-beta:focus-visible { color: var(--violet-fonce); background: color-mix(in srgb, var(--violet) 18%, var(--violet-doux)); border-color: var(--violet); box-shadow: 0 0 4px color-mix(in srgb, var(--violet) 70%, transparent), 0 0 12px color-mix(in srgb, var(--violet) 45%, transparent); } /* ---- Le logo ------------------------------------------------- Ecrit en ligne dans chaque page plutot qu appele depuis un fichier : un serait une requete de plus par page, et surtout il ne suivrait pas le theme. Le violet et le lime sont ceux de la charte et basculent avec le reste du site. Restaure le 14/08/2026 apres l incident, trace d origine. */ /* RETOUCHE DU 19\08\2026, a la demande, EN DEUX TEMPS. D abord de 32 px et "--t-m" a 42 px et "--t-xl" : la marque etait le plus petit element d une en-tete qui porte par ailleurs un champ de recherche de 44 px de haut et deux pastilles, elle se lisait comme un detail alors qu elle est le point d entree du site. Puis, la marche etant jugee trop discrete, a 56 px et "--t-2xl". Le logo est desormais l element le plus haut de l en-tete, devant le champ de recherche et ses 44 px, ce qui est le rapport voulu : la marque domine, elle ne s aligne plus. Le retrait droit suit la meme progression, 10 puis 13 puis 16 px : un ecart fixe se serre a mesure que ce qu il separe grandit. */ /* MASCOTTE PINGOUIN, POSEE LE 21/08/2026. Elle remplace la fenetre de navigateur a la coche, retenue le 10/08 parmi sept pistes. LA BOITE RESTE CARREE, ET C EST LE POINT. Le dessin est en portrait, 130 sur 160. Son "viewBox" est elargi a 160 sur 160 en decalant l origine a -15 : le pingouin ne change pas, sa boite redevient carree, et la regle ci-dessous garde la MEME valeur en largeur et en hauteur. Les seuils de l en-tete, deja remesures deux fois le 19/08, ne bougent pas d un pixel. Consequence assumee : a hauteur egale le pingouin occupe environ 45 px de large la ou l ancien logo en prenait 56. Il paraitra donc un peu plus etroit, sans jamais grandir l en-tete. */ /* 30/08/2026 : LE DESSIN N EST PLUS UN SVG A BOITE CARREE MAIS UNE IMAGE, "mascotte-logo.png", 228 sur 280. Meme hauteur cible que la boite carree qu il remplace, mais la largeur suit desormais l image elle-meme : forcer les deux cotes a "--logo" aurait ecrase le dessin, plus large que haut n etant plus le cas ici. Consequence mesuree : a 56 px de haut le pingouin fait 45,6 px de large, soit la meme largeur, au dixieme de pixel pres, que l ancien SVG dans sa boite carree. Rien ne bouge donc dans l en-tete. */ .logo-marque { height: var(--logo, 56px); width: auto; flex: none; display: block; margin-right: 16px; } /* LE PINGOUIN DU LOGOTYPE SE DANDINE SUR PLACE AU SURVOL, demande de Corentin le 21/08/2026. Contrairement a la mascotte de la barre de progression, il ne se DEPLACE jamais : il pivote sur son propre centre, ancre a la meme hauteur que la boite carree du logotype, 92 % de sa hauteur, comme ".lot-mascotte". UNE ANIMATION DEDIEE, ET NON "pg-dandine" REUTILISEE. Elle passe par 0 en 0 %, 50 % ET 100 %, pour la meme raison qui a corrige le pingouin du hero le 21/08/2026 (D238) : "pg-dandine" part de "rotate(-10deg)" alors que le logo arrive de "rotate(0)", ce qui aurait saute d'un coup au survol au lieu d'ancrer le mouvement. Un angle plus modeste aussi, 7 deg contre 10 : le pingouin du hero est un dessin isole en pleine page, celui-ci vit a cote d'un nom de marque qu'il ne doit pas distraire. */ .logo-marque { transform-origin: 50% 92%; } .marque:hover .logo-marque, .marque:focus-visible .logo-marque { /* Duree portee de .68 a .9 s le 25/08/2026, a la demande : « baisse legerement la vitesse de rebond ». Un tiers plus lent, ce qui se sent sans que le mouvement devienne mou. L angle ne bouge pas : c est la vitesse qui etait en cause, pas l amplitude. */ animation: logo-dandine .9s ease-in-out infinite; } @keyframes logo-dandine { 0%, 50%, 100% { transform: rotate(0); } 25% { transform: rotate(7deg); } 75% { transform: rotate(-7deg); } } @media (prefers-reduced-motion: reduce) { .marque:hover .logo-marque, .marque:focus-visible .logo-marque { animation: none; } } /* ═══ La capsule d en-tete ═══════════════════════════════════════ Vue sur les captures du 13/08, decidee le 11/08 contre la maquette. Une carte arrondie qui se detache des bords AU DEFILEMENT, et pas avant : detachee des le premier pixel, elle mangerait la hauteur du hero, qui est l ecran le plus dispute du site. La classe est posee par "commun.js" au passage d une sentinelle, pas par un ecouteur de defilement : un ecouteur se declenche des centaines de fois par seconde pour un changement qui arrive une fois. La transition ne porte JAMAIS sur la hauteur : une hauteur animee decale tout le contenu sous l en-tete a chaque defilement, ce qui donne un tremblement. Mesure : hauteur identique a plat et en capsule, 104,2 px contre 105. ═══ POURQUOI L ARRONDI ET LE FOND NE SONT PAS ANIMES ═══ Ils l etaient au premier jet, et ils ne s appliquaient pas. La mesure disait « border-radius: 0px » et « background: le fond de page » alors que la regle etait juste, la specificite suffisante et le reste de la meme regle applique. La cause : UNE PROPRIETE EN COURS DE TRANSITION GARDE SA VALEUR DE DEPART tant que le navigateur ne compose pas d images. Dans un onglet en arriere-plan ou dans un rendu sans affichage, la transition ne demarre jamais et la valeur mesuree reste celle d avant. Le code etait bon et se mesurait faux. C est le meme piege que celui du 11/08, ou un onglet en arriere-plan gelait les animations et faisait accuser un outil qui fonctionnait. Il a coute trois heures ce jour-la. Ces deux proprietes ne sont donc plus animees : elles basculent d un coup, ce qui ne se voit pas a 18 px d arrondi, et surtout ce qui les rend MESURABLES. Une propriete qu on ne peut pas mesurer ne peut pas etre controlee, et sur ce site un controle vaut mieux qu un fondu de deux dixiemes de seconde. */ /* ═══ REPRISE DU 25/08/2026 ═══════════════════════════════════════ Demande : « ameliore la transition entre le bandeau fixe quand on est en haut de la page et le bandeau volant quand on scroll ». CE QUI N ALLAIT PAS. Trois proprietes glissaient en .22 s, la marge, la largeur et l ombre, pendant que l ARRONDI et le BORD basculaient d un coup. L oeil ne voit pas six proprietes, il voit une forme : une forme dont la largeur coulisse mais dont les coins s equerrent d un seul coup se lit comme un a-coup, pas comme un glissement. La partie animee ne faisait qu attirer l attention sur celle qui ne l etait pas. CE QUI CHANGE : 1. L arrondi et la couleur du bord rejoignent la transition. Ce sont eux qui dessinent la capsule ; les laisser dehors revenait a animer tout sauf l essentiel. 2. Une seule courbe pour tout, et une courbe qui DECELERE fort, cubic-bezier(.32, .72, 0, 1). Le "ease" par defaut freine mou et la capsule paraissait glisser jusqu a sa place ; celle-ci part vite et se pose, ce qui donne le meme mouvement qu un panneau qu on lache. 3. La duree passe de .22 a .3 s. A .22 s le trajet lateral, 16 px de chaque cote, se faisait plus vite que l oeil ne le suit. LE FOND RESTE HORS TRANSITION, ET C EST DELIBERE. La note ci-dessus explique pourquoi : une propriete en cours de transition garde sa valeur de depart tant que le navigateur ne compose pas d images, et le fond est celui qu on mesure pour verifier qu une capsule s est bien formee. Il bascule donc d un coup, ce qui ne se voit pas : "--surface" et "--bg" sont deux beiges voisins. L ARRONDI, LUI, PASSE EN TRANSITION EN CONNAISSANCE DE CAUSE. Il devient inmesurable dans un onglet en arriere-plan, exactement comme decrit plus haut. Aucun controleur vivant ne le lit : la seule mention de "data-capsule" hors de ce fichier et de "commun.js" vit dans des generateurs et des sauvegardes de "_labo". Si un controleur devait un jour le verifier, qu il lise la REGLE et non le style calcule, ou qu il mesure apres un defilement suivi de deux images. */ .entete { transition: box-shadow .3s cubic-bezier(.32, .72, 0, 1), margin .3s cubic-bezier(.32, .72, 0, 1), max-width .3s cubic-bezier(.32, .72, 0, 1), border-radius .3s cubic-bezier(.32, .72, 0, 1), border-color .3s cubic-bezier(.32, .72, 0, 1); } /* Le selecteur porte le NOM DE BALISE en plus de la classe, et ce n est pas de la coquetterie : deux regles anterieures visent deja « .entete » pour son fond, dont une avec un color-mix et un flou d arriere-plan. A specificite egale, la derniere ecrite gagne, et il a suffi d une retouche ailleurs dans le fichier pour que le fond et l arrondi ne passent plus. Mesure a l appui : la marge et l ombre s appliquaient, le fond et l arrondi non. Le fond est declare en « background-color » et non en « background » : c est la propriete que la transition anime, et melanger la forme courte et la forme longue laisse l une des deux sans effet. */ /* RETOUCHE DU 19\08\2026, a la demande : la capsule etait plafonnee a 1 240 px et paraissait courte des que l ecran depassait cette largeur, avec deux grandes bandes vides a ses cotes. Elle suit desormais la fenetre et ne garde qu une gouttiere fixe de 16 px de chaque cote. Le retrait haut passe de 10 a 16 px : a 10 px la capsule paraissait posee CONTRE le bord et non detachee de lui. */ header.entete[data-capsule] { /* Retrait haut ramene de 16 a 6 px le 19/08/2026, a la demande : « réduit l'espace entre le haut et la barre du haut ». Le "top" ci-dessous suit la meme valeur, c est lui qui tient l ecart une fois la barre collee. */ margin: 6px auto 0; /* "width: 100%" N EST PAS REDONDANT AVEC LE "max-width" QUI SUIT, et l oublier a coute la mesure. Le est une boite flex en colonne ; sur un enfant flex, une marge laterale "auto" DESACTIVE l etirement et fait retomber l element sur la largeur de son contenu. La capsule se calait donc a 1 060 px, la largeur de sa barre de navigation, au lieu des 1 238 px que le "max-width" autorisait : elle restait courte, exactement le defaut qu on voulait corriger. La largeur explicite lui rend l etirement, le "max-width" ne fait plus que menager les gouttieres. */ width: 100%; max-width: calc(100% - 32px); /* Une fois la barre COLLEE, c est "top" qui la place et non la marge : sans cette valeur elle revenait toucher le bord haut de la fenetre, la marge ne servant qu avant le collage. */ top: 6px; border-radius: var(--r-l); border: 1px solid var(--border); background-color: var(--surface); background-image: none; box-shadow: 0 6px 24px -8px rgba(16, 18, 15, .18), 0 2px 6px -2px rgba(16, 18, 15, .10); } [data-theme="dark"] header.entete[data-capsule] { box-shadow: 0 6px 24px -8px rgba(0, 0, 0, .55), 0 2px 6px -2px rgba(0, 0, 0, .4); } /* En capsule, le rembourrage interieur remplace la largeur de page : sans cela le contenu se colle aux bords arrondis. */ /* La capsule suivant desormais la fenetre, son contenu doit la suivre aussi : sans ce "max-width: none" le rang interieur restait plafonne a "--page" et la barre s etirait autour d un contenu centre, ce qui redonnait a l oeil les bandes vides qu on venait de supprimer. */ header.entete[data-capsule] > .page { padding-inline: 18px; max-width: none; } /* Sous 720 px, la capsule est desactivee. Mesure a 375 px : les 24 px de marge laterale coutent 6,4 % de la largeur utile sur un telephone, pour un effet qui ne se voit pas a cette taille. */ @media (max-width: 720px) { header.entete[data-capsule] { margin: 0; max-width: none; border-radius: 0; border-inline: 0; box-shadow: var(--ombre); } } @media (prefers-reduced-motion: reduce) { .entete { transition: none; } } /* ═══ La rangee de bulles qui boucle ═════════════════════════════ « Corentin l a precise de memoire : la rangee bouclait a l infini. » La liste est donc ecrite DEUX FOIS dans le HTML, la seconde copie marquee aria-hidden : un lecteur d ecran ne doit pas annoncer cinquante-deux outils en double. Le retour se fait par un saut de la moitie de la largeur, sans animation : a mi-parcours les deux copies sont identiques au pixel pres, donc le saut est invisible. Une boucle animee en CSS, elle, defilerait toute seule, ce qui empeche de lire les noms. */ .rangee-bulles .bulle[data-copie] { /* rien de visuel, marqueur seul */ } /* ═══ Le depliant des colonnes du menu ═══════════════════════════ Cinq entrees visibles au maximum par colonne, puis une ligne de depliage portant un badge « +10 » et le mot « autres ». Decision du 11/08, faite avec un
    et SANS UNE LIGNE de JavaScript : le navigateur sait deja ouvrir et fermer, gerer le clavier et annoncer l etat a un lecteur d ecran. */ .colonne-fam details > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 7px 10px; margin-top: 2px; border-radius: 9px; font-size: var(--t-s); color: var(--ink-2); } .colonne-fam details > summary::-webkit-details-marker { display: none; } .colonne-fam details > summary:hover, .colonne-fam details > summary:focus-visible { background: var(--fam-doux, var(--violet-doux)); color: var(--ink); outline: none; } /* Le badge est CERNE DE POINTILLES et non rempli, relevé sur la capture du 11/08. Le pointillé dit « il y en a d autres, repliés » là où un aplat aurait dit « voici une étiquette ». La nuance tient à peu de chose et elle se lit : c est le seul élément du menu qui annonce du contenu caché plutôt que du contenu. */ .colonne-fam details > summary b { display: inline-flex; align-items: center; min-height: 18px; padding: 1px 7px; border-radius: var(--r-pill); border: 1px dashed var(--fam, var(--violet)); background: none; color: var(--fam, var(--violet)); font: 600 var(--t-xs)/1.4 var(--f-mono); } /* Une fois déplié, le badge n annonce plus rien : il s efface. */ .colonne-fam details[open] > summary b { opacity: .45; } .colonne-fam details[open] > summary { color: var(--ink-3); } /* ═══ La pastille ronde du hero ══════════════════════════════════ Deux formes coexistent, et c est voulu, vu sur les captures : dans le HERO, sur le bouton « Compresser un PDF », un petit rond BLANC portant la seule flamme, en haut a droite, avec une ombre portee, et AUCUN TEXTE dans le CATALOGUE, sur les tuiles, une pilule verte portant la flamme ET le mot « populaire » Le rond du hero n a pas de texte parce qu il se pose sur un bouton dont le libelle porte deja le sens. Une pilule y ajouterait un second mot a lire pour rien, sur l element le plus regarde de la page. */ .porte-pastille .pastille-etat { width: 26px; height: 26px; padding: 0; border-radius: var(--r-pill); /* Degrade lime chaud vers ambre, et non plus la creme ni le blanc de "--surface" : voir "--degrade-flamme" dans la charte, variante 5 retenue le 19/08/2026. Le meme jeton que la pastille « populaire », pour que les deux ne divergent jamais. */ background: var(--degrade-flamme); /* RETOUCHE DU 19/08/2026, a la demande : le cerne passe du gris neutre a celui de la pastille « populaire ». Les deux portent la meme flamme sur le meme fond lime chaud, il n y avait plus de raison qu elles se cernent differemment, et le gris neutre etait la reponse a un probleme qui n existe plus : il avait ete pose le 18/08 parce que le cerne olive verdissait un disque BLANC de 26 px. Le disque n est plus blanc, c est le fond lime qui porte maintenant la teinte, et le cerne chaud l accompagne au lieu de la contredire. L ombre, elle, reste neutre. */ border: 1px solid var(--flamme-ligne); box-shadow: 0 2px 8px -2px var(--ombre-neutre); display: inline-flex; align-items: center; justify-content: center; font-size: 0; /* le mot reste lisible aux lecteurs d ecran */ overflow: hidden; } /* DEFAUT CORRIGE LE 18/08/2026, trouve au rendu et non a la relecture. Cette regle ecrivait « content: "\\1F525" », avec DEUX barres obliques inverses. En CSS, « \\ » est une barre echappee : la pastille du hero n affichait donc pas la flamme mais la chaine « \1F525 », en toutes lettres, sur l element le plus regarde de la page. Une barre de trop, et le defaut ne remonte comme aucune erreur nulle part. Le remede ne remet pas l emoji corrige : il rend la flamme DESSINEE du reste du site, celle que la regle generale ci-dessus pose deja (« --img-flamme »). Les emojis ont ete retires du HTML le 09/08, 45 occurrences, precisement parce qu ils ne se dessinent pas pareil d une machine a l autre. En reintroduire un ici aurait defait cette decision par la bande. On ne garde donc de cette regle que ce qu elle apportait vraiment : la taille et l animation. */ .porte-pastille .pastille-etat::before { width: 14px; height: 14px; vertical-align: 0; animation: mtb-flamme 1.9s ease-in-out infinite; transform-origin: 50% 90%; } /* « Corentin se souvient d une animation sur la flamme. » Elle respire plutot qu elle ne s agite : une flamme qui bouge trop attire l oeil en permanence et devient une gene, sur un element qui reste a l ecran tout le temps. Amplitude mesuree a 6 % d echelle et 2 degres, coupee par prefers-reduced-motion comme les deux autres animations du site. */ /* REPRISE DU 19/08/2026, a la demande : « il faut que les flammes se dandinent ». La version d avant RESPIRAIT : deux degres d amplitude et un souffle de 2,6 s, ce qui se lit comme une pulsation, pas comme une flamme. Une vraie flamme se DEHANCHE : elle part d un cote, se redresse en s etirant, repart de l autre, et son pied ne bouge pas. D ou les quatre temps impairs plutot que deux temps symetriques, et surtout le "transform-origin" a 50% 90% deja pose ci-dessus : c est lui qui cloue le pied et fait que le haut se balance seul. Amplitude portee de 2 a 5 degres, cycle de 2,6 a 1,9 s. On garde la coupure par "prefers-reduced-motion" : une animation sans fin sur un element toujours a l ecran doit pouvoir s arreter. */ @keyframes mtb-flamme { 0%, 100% { transform: rotate(0deg) scaleY(1) scaleX(1) translateX(0); } 22% { transform: rotate(-5deg) scaleY(1.08) scaleX(.95) translateX(-.6px); } 48% { transform: rotate(3.5deg) scaleY(.94) scaleX(1.05) translateX(.5px); } 74% { transform: rotate(-2.5deg) scaleY(1.05) scaleX(.98) translateX(-.3px); } } /* ---- LA BULLE « POPULAIRE » S ANIME AU SURVOL ---- Demande du 20/08/2026. DEUX ANIMATIONS INDEPENDANTES SE SUPERPOSENT ICI, et c est voulu : la FLAMME garde son dehanchement de 1,9 s qui tourne en permanence, sans rien savoir de la souris, tandis que la BULLE ENTIERE respire uniquement quand on la survole. Elles ne se genent pas parce qu elles portent sur deux elements differents, la pastille et son pseudo-element : deux "transform" empiles, chacun dans son repere. LE SOUFFLE EST CELUI QUI DORMAIT DANS UN COMMENTAIRE. Six pour cent d echelle et deux degres, valeurs relevees dans la note du 19/08 qui decrivait l ancienne animation « qui respire ». Elle avait ete remplacee sur la flamme parce qu une pulsation ne fait pas une flamme ; sur une BULLE, en revanche, respirer est exactement le bon geste, et le survol lui rend le caractere ponctuel qui lui manquait. DEUX DECLENCHEURS. La pastille elle-meme, et la carte d outil qui la porte : sur le catalogue la pastille est posee dans le coin de la carte, et viser un badge de 60 px pour le voir bouger serait un jeu d adresse. Survoler la carte suffit. */ @keyframes mtb-bulle-souffle { 0%, 100% { transform: scale(1) rotate(0deg); } 50% { transform: scale(1.06) rotate(-2deg); } } .outil:hover .pastille-etat, .pastille-etat:hover { animation: mtb-bulle-souffle 1.6s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { /* Elargi le 19/08 : la regle ne visait que la pastille du hero, or l'animation vaut maintenant pour toutes. Une coupure qui ne couvre pas tout ce qu'elle doit couvrir ne protege personne. */ .pastille-etat::before { animation: none; } .outil:hover .pastille-etat, .pastille-etat:hover { animation: none; } } /* ═══════════════════════════════════════════════════════════════ LES OUTILS REBATIS APRES L INCIDENT DU 13/08 Couche posee le 18/08/2026. DEFAUT TROUVE PAR UN CONTROLE ECRIT POUR L OCCASION, "_labo/classes-sans-style.js" : neuf pages d outil posaient trente et une classes dont AUCUNE n avait de regle. Leurs pages ont ete rebaties, leur habillage ne l a jamais ete. Rien ne remontait nulle part. Une classe inconnue n est pas une erreur pour un navigateur, c est un mot qu il ignore : les elements tombaient aux styles par defaut, ce qui donne des pages qui marchent et qui ne ressemblent a rien. Le controleur de fichiers verifie la structure, le banc fonctionnel le fichier produit, le banc de rendu ce qui se mesure a l ecran : aucun des trois ne compare le balisage aux regles. Seule mesure chiffree que le defaut laissait voir : les boutons de suggestion du generateur de pseudo tombaient a 21 px de haut, sous le seuil d accessibilite de 24. ═══════════════════════════════════════════════════════════════ */ /* ---- 1. La scene d un PDF : caviarder, rogner, signer ---------- Les trois outils montrent une page du document et laissent poser quelque chose dessus. Le cadre est en position relative et l image le remplit : tout ce qui se pose ensuite se place en POURCENTAGE, jamais en pixels, pour que le reperage tienne quelle que soit la taille d affichage de la page. C est ce qui permet de rendre au document des coordonnees justes. */ .scene-pdf { max-width: var(--etroit); margin: var(--e-5) auto 0; display: flex; flex-direction: column; gap: var(--e-3); } .scene-cadre { position: relative; align-self: center; max-width: 100%; line-height: 0; /* pas de blanc sous l image */ border: 1px solid var(--border-fort); border-radius: var(--r-s); overflow: hidden; background: var(--surface); box-shadow: var(--ombre-douce); } .scene-cadre img { display: block; max-width: 100%; height: auto; } /* Le caviardage se trace a la souris : le cadre doit dire qu on peut y dessiner, et le glissement ne doit pas selectionner l image. */ .scene-cadre.caviardage { cursor: crosshair; touch-action: none; user-select: none; } /* La zone masquee est NOIRE ET PLEINE, et c est le sens meme de l outil : le site redessine le document, le contenu couvert n existe plus dans le fichier produit. Le rectangle affiche ici n est pas le masque, c est son apercu. */ .zone-noire { position: absolute; background: #000; pointer-events: none; } /* Pendant le trace, tant que le bouton n est pas relache. */ .zone-noire.provisoire { background: rgba(0, 0, 0, .55); outline: 2px dashed #fff; outline-offset: -2px; } /* ---- Les champs de « creer un PDF a remplir », poses le 29/08/2026 ---- Ils ne sont PAS dessines comme les zones de caviardage, et c est voulu : une zone noire dit « ceci disparait », un champ dit « ceci s ecrira ici ». Le premier couvre, le second attend. Les rendre pareils aurait fait croire a un masquage sur un outil qui ne masque rien. Le fond est donc a peine teinte, la bordure pleine, et le cadre reste lisible sur un document sombre comme sur une page blanche. */ .zone-champ { position: absolute; background: color-mix(in srgb, var(--violet) 12%, transparent); border: 1.5px solid var(--violet); border-radius: 2px; pointer-events: none; box-sizing: border-box; } /* Une case a cocher se distingue d un champ de texte au premier coup d oeil : sans cela, on ne sait plus ce qu on a pose ou. Le lime est le seul autre signal du site, et "--lime-trait" est sa variante qui se voit dans les deux themes, contrairement au lime pur. */ .zone-champ.case { background: color-mix(in srgb, var(--lime) 22%, transparent); border-color: var(--lime-trait); } .zone-champ.case > b { background: var(--lime-trait); } .zone-champ.provisoire { background: color-mix(in srgb, var(--violet) 18%, transparent); border-style: dashed; } /* Le numero du champ, pose dans son coin. Il ne sert pas a decorer : il dit combien de champs sont deja places et dans quel ordre le lecteur les parcourra a la touche de tabulation. */ .zone-champ > b { position: absolute; top: -1.5px; left: -1.5px; font: 600 10px/1.5 var(--f-titre); padding: 0 4px; color: var(--sur-violet); background: var(--violet); border-radius: 2px 0 2px 0; } /* Les quatre voiles du rognage. Ils montrent ce qui SORT du cadre, et non ce qui reste : c est la partie perdue qu on regle. */ .voile { position: absolute; background: color-mix(in srgb, var(--ink) 45%, transparent); pointer-events: none; } .voile.haut { top: 0; left: 0; right: 0; } .voile.bas { bottom: 0; left: 0; right: 0; } .voile.gauche { top: 0; bottom: 0; left: 0; } .voile.droite { top: 0; bottom: 0; right: 0; } /* Le point de pose de la signature. Un disque et non un rectangle : le clic donne un point, la taille vient du reglage. */ .marque-signature { position: absolute; width: 18px; height: 18px; margin: -9px 0 0 -9px; /* centre sur le point clique */ border: 2px solid var(--violet); border-radius: 50%; background: color-mix(in srgb, var(--violet) 22%, transparent); pointer-events: none; } /* La toile ou se trace la signature. Elle se dessine au doigt aussi bien qu a la souris, d ou "touch-action: none" : sans lui, le premier mouvement fait defiler la page au lieu de dessiner. */ .toile-signature { display: block; width: 100%; height: auto; max-width: 100%; aspect-ratio: 620 / 200; border: 1px dashed var(--border-fort); border-radius: var(--r-s); background: var(--surface); cursor: crosshair; touch-action: none; } /* ---- 2. Les enregistreurs : dictaphone, ecran, camera ---------- « Les enregistreurs expliquent la demande d autorisation AVANT de la declencher », reserve posee le 02/08 en supprimant ces outils, et tenue depuis. Le bloc d explication est donc un vrai morceau de page, pas une note en petits caracteres. */ .avertissement-materiel { margin-top: var(--e-5); padding: var(--e-5); border: 1px solid var(--violet-ligne); border-radius: var(--r); background: var(--violet-doux); } .avertissement-materiel h2 { font-size: var(--t-l); margin: 0 0 var(--e-3); } .avertissement-materiel p { font-size: var(--t-s); color: var(--ink-2); margin-bottom: var(--e-3); } .avertissement-materiel .btn { margin-top: var(--e-2); } .enregistreur { margin-top: var(--e-5); padding: var(--e-5); border: 1px solid var(--border-fort); border-radius: var(--r); background: var(--surface); display: flex; flex-direction: column; align-items: center; gap: var(--e-3); box-shadow: var(--ombre-douce); } /* Le voyant dit son etat par TROIS signes a la fois, la couleur, le mot et le clignotement. La couleur seule ne suffit pas : elle n est pas lisible par tout le monde, et c est le mot qu un lecteur d ecran annonce. */ .voyant { display: inline-flex; align-items: center; gap: 8px; font-size: var(--t-s); font-weight: 600; color: var(--ink-2); padding: 4px 12px 4px 10px; border: 1px solid var(--border); border-radius: var(--r-pill); background: var(--surface-2); } .voyant .point { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--ink-3); } .voyant[data-etat="enregistre"] { color: var(--alerte); border-color: var(--alerte-ligne); background: var(--alerte-doux); } .voyant[data-etat="enregistre"] .point { background: var(--alerte); animation: mtb-voyant 1.4s ease-in-out infinite; } .voyant[data-etat="pause"] .point { background: var(--ink-2); } /* Le clignotement reste sous deux fois par seconde : c est le seuil de la norme sur les contenus clignotants. Il est coupe par le reglage systeme comme les autres animations du site. */ @keyframes mtb-voyant { 0%, 100% { opacity: 1; } 50% { opacity: .25; } } /* Le retour de la camera est RETOURNE COMME UN MIROIR, parce que c est ce que tout le monde attend en se voyant a l ecran. L ENREGISTREMENT, LUI, NE L EST PAS : seul l affichage est inverse, le fichier produit garde le vrai sens. */ .retour-camera { margin-top: var(--e-4); border-radius: var(--r); overflow: hidden; background: #000; line-height: 0; border: 1px solid var(--border-fort); } .retour-camera video { display: block; width: 100%; height: auto; transform: scaleX(-1); } /* ---- 3. Les galeries de vignettes ------------------------------ */ /* Images extraites d un PDF. Chaque vignette est un lien de telechargement. Le fond en damier montre la transparence, qu un fond blanc ferait passer pour du blanc. */ .grille-images { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--e-3); margin-top: var(--e-5); } .vignette-image { display: flex; flex-direction: column; gap: 6px; padding: 8px; text-decoration: none; color: var(--ink-2); border: 1px solid var(--border); border-radius: var(--r-s); background: var(--surface); font-size: var(--t-xs); transition: border-color .16s ease, transform .16s ease; } .vignette-image img { display: block; width: 100%; height: 120px; object-fit: contain; border-radius: var(--r-s); background: conic-gradient(from 90deg at 50% 50%, var(--surface-2) 25%, transparent 0 50%, var(--surface-2) 0 75%, transparent 0) 0 0 / 14px 14px; } .vignette-image:hover { border-color: var(--violet-ligne); transform: translateY(-2px); color: var(--ink); } /* Pages d un PDF a remettre dans l ordre. */ .grille-pages { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: var(--e-3); margin-top: var(--e-5); } .page-vignette { border: 1px solid var(--border); border-radius: var(--r-s); background: var(--surface); padding: 6px; display: flex; flex-direction: column; gap: 6px; cursor: grab; } .page-vignette img { display: block; width: 100%; height: auto; border-radius: 3px; border: 1px solid var(--border); pointer-events: none; /* l image ne vole pas le glisser */ } .page-pied { display: flex; align-items: center; justify-content: space-between; gap: 4px; } .page-pied .mono { font-size: var(--t-xs); color: var(--ink-2); } /* Deux etats distincts, la page qu on deplace et celle sur laquelle on va la poser. Sans le second, on ne sait pas ou la page atterrit. */ .page-vignette.deplacee { opacity: .4; cursor: grabbing; } .page-vignette.cible { border-color: var(--violet); box-shadow: 0 0 0 2px var(--violet-doux); } /* ---- 4. Le livre ouvert --------------------------------------- Fond papier dans les deux themes, comme le rendu d un document Word : un livre lu sur fond noir n est pas un livre. */ .liseuse { margin-top: var(--e-5); border: 1px solid var(--border-fort); border-radius: var(--r); background: var(--surface); overflow: hidden; box-shadow: var(--ombre-douce); } .liseuse-tete { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--e-3); flex-wrap: wrap; padding: var(--e-4); border-bottom: 1px solid var(--border); background: var(--surface-2); } .liseuse-tete h2 { font-size: var(--t-l); margin: 0; } .liseuse-tete .sous { font-size: var(--t-s); color: var(--ink-2); margin: 2px 0 0; } .liseuse-corps { padding: var(--e-6) var(--e-5); max-height: 70vh; overflow-y: auto; background: #FBFAF7; color: #23261F; font-size: var(--t-m); line-height: 1.7; } .liseuse-corps img { max-width: 100%; height: auto; } .liseuse-corps h1, .liseuse-corps h2, .liseuse-corps h3 { color: inherit; margin: 1.4em 0 .5em; } .liseuse-corps p { margin-bottom: .9em; } /* ---- 5. Le texte extrait d un PDF ------------------------------ */ .apercu-texte { margin-top: var(--e-5); padding: var(--e-4); border: 1px solid var(--border); border-radius: var(--r-s); background: var(--surface-2); color: var(--ink-2); font-family: var(--f-mono); font-size: var(--t-s); line-height: 1.6; max-height: 420px; overflow: auto; white-space: pre-wrap; word-break: break-word; } /* ---- 6. Les deux generateurs ----------------------------------- */ .resultat-secret { margin-top: var(--e-5); padding: var(--e-5); border: 1px solid var(--border-fort); border-radius: var(--r); background: var(--surface); display: flex; flex-direction: column; align-items: center; gap: var(--e-3); box-shadow: var(--ombre-douce); } /* Le secret se lit signe par signe, c est ce qu on lui demande. D ou le chasse fixe, l ecart entre les lettres, et la coupe n importe ou : une phrase de passe de sept mots ne doit pas sortir de la boite. */ .secret { display: block; width: 100%; font-family: var(--f-mono); font-size: var(--t-xl); font-weight: 600; letter-spacing: .06em; line-height: 1.5; text-align: center; color: var(--ink); word-break: break-all; overflow-wrap: anywhere; padding: var(--e-3); border-radius: var(--r-s); background: var(--surface-2); border: 1px solid var(--border); user-select: all; /* un clic selectionne tout */ } .grille-pseudos { display: flex; flex-wrap: wrap; gap: var(--e-2); justify-content: center; margin-top: var(--e-5); } /* HAUTEUR MINIMALE DE 32 PX, ET C EST UNE MESURE, PAS UN GOUT. Sans regle, ces boutons tombaient aux styles du navigateur et faisaient 21 px de haut, sous le seuil de 24 px de la norme sur la taille des cibles. Le banc de rendu les signalait, et il avait raison : ils sont cote a cote, l exception d espacement ne les couvre pas. */ .pseudo { min-height: 32px; padding: 6px 14px; font: inherit; font-family: var(--f-mono); font-size: var(--t-s); font-weight: 600; color: var(--ink); background: var(--surface); border: 1px solid var(--border-fort); border-radius: var(--r-pill); cursor: pointer; transition: background .16s ease, border-color .16s ease; } .pseudo:hover { background: var(--violet-doux); border-color: var(--violet-ligne); } .pseudo:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; } .pseudo.copie { background: var(--lime-doux); border-color: var(--lime-ligne); color: var(--lime-texte); } /* ---- 7. La case a cocher etiquetee ----------------------------- */ /* La case et son mot forment UNE SEULE cible : on coche en cliquant n importe ou sur le libelle. Les 32 px de hauteur sont la pour la meme raison que les boutons de pseudo. */ .case { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; font-size: var(--t-s); color: var(--ink-2); cursor: pointer; } .case input { width: 17px; height: 17px; accent-color: var(--violet); cursor: pointer; } .case:hover { color: var(--ink); } @media (prefers-reduced-motion: reduce) { .voyant[data-etat="enregistre"] .point { animation: none; } .vignette-image, .pseudo { transition: none; } .vignette-image:hover { transform: none; } } /* ============================================================= AVERTISSEMENT SANS JAVASCRIPT Ajoute le 18/08/2026. Aucune des 63 pages ne disait rien au visiteur qui a desactive JavaScript : la zone de depot s affichait, se laissait cliquer, et ne repondait jamais. Le bloc est le premier enfant de , donc lu avant tout le reste. Il n existe que dans un