/* ========================================================================== INFACT — feuille de style extraite du design system (voir DESIGN.md). Écrite pour remplacer directement la constante CSS de build_site.py / comparaison.py : mêmes sélecteurs de classes, nouvelles valeurs. Zéro dépendance CDN — les polices sont chargées depuis ./polices/. ========================================================================== */ /* Le bloc ci-dessous est régénéré par telecharger_polices.py à chaque exécution (voir ce script). Ne pas éditer les règles @font-face à la main : elles seraient écrasées au prochain lancement du script. */ /* AUTO-GENERATED FONT-FACE START — produit par telecharger_polices.py, ne pas éditer à la main */ @font-face{font-family:'Syne';font-style:normal;font-weight:700 800;font-display:swap;src:url('polices/syne.woff2') format('woff2')} @font-face{font-family:'DM Sans';font-style:normal;font-weight:400 600;font-display:swap;src:url('polices/dm-sans.woff2') format('woff2')} @font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 700;font-display:swap;src:url('polices/jetbrains-mono.woff2') format('woff2')} /* AUTO-GENERATED FONT-FACE END */ :root{ /* ========================================================================== PEAU « NEUMORPHISM » — portée le 16/09/2026 depuis la maquette "Infact Neumorphism". Principe : UNE seule couleur de surface. Le relief ne vient plus d'une bordure ni d'un aplat blanc, mais de deux ombres — une claire en haut à gauche, une sombre en bas à droite. Une carte "sortante" porte les ombres à l'extérieur, un champ "rentrant" les porte à l'intérieur (inset). Conséquence directe : le fond de page n'est plus un dégradé blanc→crème, c'est un aplat beige unique, sinon les ombres ne raccordent pas. Les noms de variables sont INCHANGÉS : build_site.py et comparaison.py n'ont rien à savoir de ce changement. ========================================================================== */ --bg-haut:#e8e4de; --bg-milieu:#e8e4de; --bg-bas:#e8e4de; --bg:#e8e4de; /* surface en relief = exactement la couleur du fond */ --bg-doux:#e4e0d9; /* surface en creux : un cran plus sombre */ --bg-puce:#e4e0d9; /* chips / badges neutres : en creux eux aussi */ /* Contrastes : TOUTES les valeurs ci-dessous sont mesurées contre #e4e0d9, la plus sombre des deux surfaces. Ce qui passe sur le creux passe donc aussi sur le relief. La maquette proposait #666/#777/#bbb et des accents clairs (#5a8a5e, #8a7a3e, #a05a4a) qui tombaient entre 1,52 et 4,09:1 — sous le minimum WCAG AA de 4,5. Chaque accent a été assombri à teinte constante jusqu'à repasser le seuil. Vérifiable : python audit_a11y.py */ --fg:#333333; /* 9,60:1 — texte principal, titres Syne */ --gris:#555555; /* 5,67:1 — texte secondaire */ --gris-clair:#636363; /* 4,57:1 — labels mono discrets (était #bbb côté maquette) */ /* En neumorphisme il n'y a pas de bordure décorative : --bord devient une teinte de raccord quasi invisible. --bord-fort reste, lui, une VRAIE bordure : elle matérialise le contour des éléments interactifs (champ de recherche, tag cliquable) à 3,13:1, au-dessus du 3:1 exigé par WCAG 1.4.11 pour les composants d'interface. C'est le garde-fou classique du neumorphisme, dont le défaut connu est justement de noyer les contours. */ --bord:#dcd8d1; --bord-fort:#857f76; --bord-section:#d8d4cd; /* séparateur de section pleine largeur */ --acc:#333333; /* accent = encre, pas de bleu */ --acc-clair:#e0dcd5; /* fond hover : le beige enfoncé */ /* Couleurs sémantiques de fraîcheur — LE signal visuel du produit. Teintes de la maquette, assombries pour AA (voir plus haut). */ --vert:#476c4a; --vert-clair:#e3e7e0; --ambre:#6f6232; --ambre-clair:#eae5d7; --rouge:#c21f1f; --rouge-clair:#ece0dd; --rouge-vif:#c81111; /* trait de la croix "offre retirée" */ --info:#1d4ed8; /* salaire publié : 5,09:1 sur le creux */ /* Rayons élargis : le neumorphisme a besoin d'angles francs mais doux pour que les deux ombres se lisent. Valeurs de la maquette (10 → 24 px). */ --rayon:14px; --rayon-petit:10px; --rayon-grand:22px; --largeur:800px; /* pages d'offre ; voir note en fin de fichier */ /* Les ombres, en variables : un seul endroit pour régler la profondeur de tout le site. Modifier --om-sombre / --om-claire suffit à durcir ou adoucir la peau entière. */ --om-sombre:rgba(0,0,0,.10); --om-claire:rgba(255,255,255,.70); --relief:6px 6px 14px var(--om-sombre),-6px -6px 14px var(--om-claire); --relief-fort:12px 12px 28px var(--om-sombre),-12px -12px 28px var(--om-claire); --relief-doux:3px 3px 7px rgba(0,0,0,.07),-3px -3px 7px rgba(255,255,255,.60); --creux:inset 4px 4px 8px rgba(0,0,0,.07),inset -4px -4px 8px rgba(255,255,255,.60); --creux-fort:inset 5px 5px 10px rgba(0,0,0,.08),inset -5px -5px 10px rgba(255,255,255,.60); --creux-doux:inset 2px 2px 5px rgba(0,0,0,.07),inset -2px -2px 5px rgba(255,255,255,.50); --font-affichage:'Syne',system-ui,sans-serif; /* logo, titres de page, gros numéros */ --font-corps:'DM Sans',system-ui,sans-serif; /* texte courant, boutons, cartes */ --font-mono:'JetBrains Mono',ui-monospace,"Cascadia Mono","Consolas",monospace; /* labels, meta, "// TITRE", chiffres */ } *{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{margin:0;color:var(--fg); background:linear-gradient(180deg,var(--bg-haut) 0%,var(--bg-milieu) 40%,var(--bg-bas) 100%); font:400 17px/1.65 var(--font-corps); -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility} a{color:var(--fg);text-decoration:none} a:hover{color:var(--gris)} /* Liens de texte du contenu : soulignes. Meme encre que le texte (pas de bleu), donc sans soulignement rien ne les distinguait d'une phrase — constat du 11/09 sur les renvois d'une page d'offre. :where() garde la specificite basse : chaque composant (.fil-ariane, .renvois, .pagination...) declare plus bas reprend la main sans !important. */ :where(main) a:not([class]){text-decoration:underline;text-decoration-thickness:1px; text-underline-offset:3px;text-decoration-color:var(--gris-clair)} :where(main) a:not([class]):hover{color:var(--fg);text-decoration-color:var(--fg); text-decoration-thickness:2px} ::selection{background:rgba(0,0,0,.08)} .wrap{max-width:var(--largeur);margin:0 auto;padding:0 24px} header{border-bottom:1px solid var(--bord-section);padding:20px 0;margin-bottom:44px; /* PAS transparent : l'en-tete est colle en haut, et le flou seul ne suffit pas a en faire une surface. Constate a la capture le 03/09 sur une liste defilee - le titre d'une carte restait lisible a travers le logo. Un fond a 85 % rend le bandeau propre AVEC le flou, et lisible sans lui (navigateur ancien ou flou desactive), la ou "transparent" laissait le texte de la page traverser le logo et la navigation. */ background:rgba(255,255,255,.85);position:sticky;top:0;z-index:5; -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)} .logo{font:800 20px/1 var(--font-affichage);letter-spacing:-.02em;color:var(--fg)} .logo:hover{color:var(--fg);opacity:.7} /* Une seule échelle typographique, appliquée partout. h1/h2 portent la voix de marque (Syne) ; le corps reste en DM Sans pour la lisibilité en masse (des centaines d'offres listées). */ h1{font:800 34px/1.18 var(--font-affichage);letter-spacing:-.02em;margin:0 0 12px;color:var(--fg)} h2{font:700 12.5px/1.3 var(--font-mono);letter-spacing:.02em;text-transform:none; color:var(--gris-clair);margin:52px 0 16px} h2::before{content:"// ";color:var(--gris-clair)} .sub{color:var(--gris);margin:0 0 30px;font:400 17px/1.6 var(--font-corps);max-width:40em} /* ── Listes d'offres : grille de cartes ──────────────────────────────── */ .offres{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:10px 16px;margin:0 0 8px} .offre{border:1px solid var(--bord);border-radius:var(--rayon); background:var(--bg);padding:16px 18px;transition:border-color .12s,box-shadow .12s;min-width:0} .offre:hover{border-color:var(--bord-fort);box-shadow:0 2px 12px rgba(0,0,0,.05)} .offre .t{display:block;font:600 16px/1.25 var(--font-corps);color:var(--fg); letter-spacing:-.008em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .offre:hover .t{color:var(--fg);text-decoration:underline;text-underline-offset:2px} .meta{color:var(--gris)} .offre .meta{font:400 14px/1.4 var(--font-corps);margin-top:5px;overflow:hidden; text-overflow:ellipsis;white-space:nowrap} /* ── Technologies citées (non cliquables — information, pas filtre) ──── */ .stack{margin:24px 0} .stack h2{margin:0 0 10px} .techno{display:inline-block;border:1px solid var(--bord);border-radius:var(--rayon-petit); padding:5px 11px;margin:0 7px 7px 0;font:400 13.5px/1.3 var(--font-corps);color:var(--fg); background:var(--bg-doux)} .techno-mini{display:inline-block;border:1px solid var(--bord);border-radius:5px; padding:2px 8px;margin:0 5px 5px 0;font:400 11.5px/1.3 var(--font-mono);color:var(--gris); background:var(--bg-doux)} .offre-stack{margin-top:6px} /* ── Rémunération, quand l'employeur la publie ─────────────────────────── Présente sur 3,5 % des offres seulement. Elle doit se remarquer sans crier : les 96,5 % d'offres sans salaire ne doivent pas donner l'impression d'un site à moitié vide. D'où l'encre du texte principal plutôt qu'une pastille colorée — c'est un fait, pas une alerte — et la police mono, qui aligne les chiffres d'une carte à l'autre. `.offre .meta` coupe à l'ellipse : le salaire est en fin de ligne, donc `flex-shrink:0` sur la ligne meta le protège du rognage. */ .paie{font-family:var(--font-mono);font-weight:600;color:var(--fg); white-space:nowrap} /* Sur une carte, le salaire prend sa PROPRE ligne. Mesure a 1440 px : la colonne d'une grille d'offres fait 330 px, et "entreprise · ville · date" la remplit deja - ajouter le salaire au bout le faisait rogner par l'ellipse de `.offre .meta`. Une ligne dediee le rend lisible, et le met au niveau d'importance qu'il merite : c'est le premier critere de tri d'un candidat. */ .offre-paie{margin-top:5px} /* ── Bouton « afficher plus » sous les résultats de recherche ─────────── Mesuré le 02/09 : 9 des 16 recherches les plus courantes dépassaient les 100 résultats affichés, sans aucun moyen d'atteindre les suivants. Le bouton occupe toute la largeur de la grille pour ne pas être pris pour une carte d'offre. */ .voir-plus{grid-column:1/-1;margin-top:14px;padding:13px 20px;width:100%; border:1px solid var(--bord-fort);border-radius:var(--rayon-petit); background:var(--bg-doux);color:var(--fg);cursor:pointer; font:500 15px/1.3 var(--font-corps)} .voir-plus:hover{border-color:var(--acc);background:var(--acc-clair)} .col-stack{margin:2px 0 13px} /* ── Tags / chips de filtre — mêmes chips que la barre de recherche ──── */ .tags{margin:0 0 8px;display:flex;flex-wrap:wrap;gap:8px} .tag,.chip{border:1px solid var(--bord);border-radius:var(--rayon-petit);padding:6px 12px; font:400 12.5px/1 var(--font-mono);color:var(--gris);background:var(--bg-puce); line-height:1;transition:color .12s,border-color .12s,background .12s;display:inline-block} .tag:hover,.chip:hover{border-color:var(--bord-fort);color:var(--fg);background:#eee; text-decoration:none} .chips{display:flex;gap:8px;flex-wrap:wrap} /* Un tag qui est un LIEN doit se lire cliquable : encre pleine, bordure marquee, fond blanc. Le tag d'information (span) reste gris sur gris. */ a.tag{color:var(--fg);border-color:var(--bord-fort);background:var(--bg)} a.tag:hover{border-color:var(--fg);background:var(--acc-clair);color:var(--fg)} /* ── Bloc missions : la raison d'être du site ───────────────────────── */ .missions{white-space:pre-wrap;background:var(--bg-doux);border:1px solid var(--bord); border-left:3px solid var(--fg);padding:20px 24px;margin:28px 0; border-radius:0 var(--rayon) var(--rayon) 0;font:400 16px/1.6 var(--font-corps)} .missions h2{margin:0 0 12px;color:var(--fg)} .missions h2::before{color:var(--fg)} /* ── Encart d'argument (page À propos) : l'accroche en gras, puis la preuve ─ */ .argument{background:var(--bg-doux);border:1px solid var(--bord); border-left:3px solid var(--fg);padding:18px 24px;margin:14px 0 22px; border-radius:0 var(--rayon) var(--rayon) 0} .argument p{margin:0;color:var(--fg);font:400 16px/1.6 var(--font-corps)} .argument .argument-titre{margin:0 0 6px;font:700 22px/1.25 var(--font-affichage)} /* Second argument de l'encart (recence + pertinence) : pas de style inline, la CSP du site l'interdit et la recette bloque le deploiement. */ .argument .argument-suite{margin-top:10px} /* Deuxieme ligne d'accroche de l'accueil : meme voix que .accroche, collee dessous pour que les deux arguments se lisent ensemble. */ .accroche-suite{color:var(--fg);font:700 18px/1.6 var(--font-corps); max-width:36em;margin:-16px 0 26px} .cta{display:inline-block;background:var(--fg);color:#fff;padding:12px 22px; border-radius:var(--rayon-petit);font:500 15px/1 var(--font-corps);margin:4px 0 32px; box-shadow:0 1px 2px rgba(0,0,0,.16)} .cta:hover{text-decoration:none;background:#333;color:#fff} /* ── Boutons secondaires : renvois de bas de page d'offre et pagination ── Meme gabarit que .voir-plus (bordure, fond clair) : un seul langage pour « aller ailleurs sur le site », distinct du bouton plein .cta qui sort vers l'employeur. La regle .renvois n'existait que dans le CSS de repli de build_site.py : sur le vrai site, les deux liens etaient colles (11/09). */ .renvois{display:flex;flex-wrap:wrap;gap:10px;margin:32px 0 0;padding-top:22px; border-top:1px solid var(--bord-section)} .renvois a,.pagination a{display:inline-flex;align-items:center;gap:8px; padding:11px 18px;border:1px solid var(--bord-fort);border-radius:var(--rayon-petit); background:var(--bg);color:var(--fg);font:500 15px/1.3 var(--font-corps); text-decoration:none;transition:border-color .12s,background .12s} .renvois a::after{content:"\2192";content:"\2192" / "";color:var(--gris)} .renvois a:hover,.pagination a:hover{border-color:var(--fg);background:var(--acc-clair); color:var(--fg)} .renvois a:hover::after{color:var(--fg)} @media (max-width:640px){ .renvois{flex-direction:column} .renvois a{justify-content:space-between} } .desc{white-space:pre-wrap;margin:8px 0 24px;color:#3d3d3d;font:400 15.5px/1.7 var(--font-corps)} .desc summary{cursor:pointer;color:var(--fg);font-weight:600;white-space:normal; margin-bottom:14px;font-size:16px;list-style:none} .desc summary::-webkit-details-marker{display:none} .desc summary::before{content:"\25B8 ";color:var(--gris-clair)} .desc[open] summary::before{content:"\25BE "} .note-troncature{color:var(--gris);font:400 14px/1.5 var(--font-mono);margin-top:14px; padding-top:14px;border-top:1px solid var(--bord-section)} footer{border-top:1px solid var(--bord-section);margin-top:72px;padding:26px 0 40px; color:var(--gris-clair);font:400 14px/1.6 var(--font-corps)} footer .footer-nav{display:block;margin-top:10px} footer .footer-nav a{color:var(--gris-clair)} footer .footer-nav a:hover{color:var(--fg)} .pagination{display:flex;justify-content:space-between;gap:16px;margin:28px 0 8px; padding-top:20px;border-top:1px solid var(--bord-section);font-weight:600} .pagination .compte{color:var(--gris-clair);font:400 14px/1 var(--font-mono)} .meta-entreprise{color:var(--gris);margin:4px 0;font:400 15px/1.5 var(--font-corps)} /* ── Comparaison (comparaison.py) ───────────────────────────────────── */ .comparaison{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); margin:30px 0;align-items:start} .colonne{border:1px solid var(--bord);border-radius:var(--rayon);padding:20px 21px; background:var(--bg);box-shadow:0 1px 2px rgba(0,0,0,.03);transition:box-shadow .15s} .colonne:hover{box-shadow:0 4px 16px rgba(0,0,0,.06)} .colonne .employeur{font:700 17px/1.2 var(--font-affichage);letter-spacing:-.01em;margin-bottom:3px} .colonne .poste{display:block;font:400 15px/1.4 var(--font-corps);margin-bottom:8px} .colonne .meta{color:var(--gris-clair);font:400 12.5px/1.3 var(--font-mono);margin-bottom:15px; padding-bottom:15px;border-bottom:1px solid var(--bord)} .colonne .extrait{white-space:pre-wrap;font:400 14.5px/1.62 var(--font-corps);color:#333} .note{color:var(--gris);font:400 14px/1.5 var(--font-mono);border-top:1px solid var(--bord-section); padding-top:20px;margin-top:36px;max-width:44em} .comparer{display:block;background:var(--bg-doux);border:1px solid var(--bord-fort); border-radius:var(--rayon);padding:14px 20px;margin:26px 0;font:600 15px/1.3 var(--font-corps); color:var(--fg)} .comparer:hover{text-decoration:none;border-color:var(--fg)} /* ── Accueil : démontrer avant de lister ────────────────────────────── */ .hero{padding:24px 0 0} .hero h1{max-width:17em;font-size:38px} .accroche{color:var(--gris);font:400 18px/1.6 var(--font-corps);max-width:36em;margin:16px 0 26px} .chiffres{display:flex;flex-wrap:wrap;gap:12px 0;font:400 13.5px/1 var(--font-mono);color:var(--gris); border-top:1px solid var(--bord-section);border-bottom:1px solid var(--bord-section);padding:16px 0} .chiffres span{padding:0 22px;border-right:1px solid var(--bord-section)} .chiffres span:first-child{padding-left:0} .chiffres span:last-child{border-right:0} /* La date ne tenait pas sur la ligne des trois chiffres (a 1440 px) : elle retombait seule dessous, decalee de 22 px, avec un separateur orphelin au bout de "villes". Elle prend donc volontairement sa propre ligne. */ .chiffres span:nth-last-child(2){border-right:0} .chiffres span:last-child{flex-basis:100%;padding-left:0} .chiffres b{color:var(--fg);font:700 16px/1 var(--font-mono)} .demo{border:1px solid var(--bord-fort);border-top:3px solid var(--fg);border-radius:12px; padding:24px 26px;margin:34px 0;background:var(--bg-doux)} .demo-eyebrow{font:700 11px/1 var(--font-mono);letter-spacing:.04em;text-transform:uppercase; color:var(--fg);margin-bottom:8px} .demo-titre{font:700 16px/1.3 var(--font-corps);letter-spacing:-.01em} .demo .comparaison{margin:18px 0 14px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))} .demo .colonne{padding:16px 18px} .demo .extrait{font-size:14px} .demo-lien{font:600 15px/1.3 var(--font-corps)} /* ========================================================================== COMPOSANTS NOUVEAUX — apportés par la maquette, pas encore générés par build_site.py. Classes prêtes à l'emploi pour une intégration future (voir DESIGN.md, section "structure HTML minimale" pour chacun). ========================================================================== */ /* Bandeau défilant du haut — flux continu façon terminal boursier. Nécessite un site qui connaît les dernières offres publiées EN TEMPS RÉEL au moment du build ; voir DESIGN.md "ce que la maquette montre et que le site n'a pas" avant de le brancher. */ @keyframes infact-defile{from{transform:translateX(0)}to{transform:translateX(-50%)}} .bandeau{border-bottom:1px solid var(--bord-section);overflow:hidden;height:32px; display:flex;align-items:center;background:var(--bg-doux)} .bandeau-piste{display:flex;gap:40px;white-space:nowrap;padding:0 20px; animation:infact-defile 40s linear infinite} .bandeau-item{font:500 11px/1 var(--font-mono)} .bandeau-item.frais{color:var(--vert)} .bandeau-item.tiede{color:var(--ambre)} .bandeau-item.vieux{color:var(--gris-clair)} .bandeau-item.retiree{color:var(--gris-clair);text-decoration:line-through} /* Rubrique — le label "// TITRE" utilisé pour toutes les sections. h2 le fait déjà automatiquement (::before). Cette classe sert quand le label est seul, hors d'un h2 (ex. au-dessus de la barre de recherche). */ .rubrique{display:block;font:400 12px/1.5 var(--font-mono);color:var(--gris-clair)} .rubrique b{color:var(--gris)} /* Barre de recherche — le "produit" avant tout marketing. */ .barre-recherche{background:var(--bg);border:1px solid var(--bord);border-radius:12px; padding:22px;box-shadow:0 2px 12px rgba(0,0,0,.04);display:flex;flex-direction:column;gap:16px} .barre-recherche .champ{display:flex;align-items:center;gap:12px;font:400 17px/1 var(--font-corps); color:var(--gris-clair)} .barre-recherche .champ input{border:0;outline:0;background:transparent;flex:1; font:400 17px/1 var(--font-corps);color:var(--fg)} .barre-recherche .separateur{height:1px;background:var(--bord)} /* Score — pastille colorée par tranche de fraîcheur/qualité, format IDENTIQUE au score affiché dans les cartes d'offres de la maquette. */ .score{width:44px;height:44px;border-radius:10px;display:flex;align-items:center; justify-content:center;font:700 17px/1 var(--font-mono);flex-shrink:0} .score.score-haut{background:var(--vert-clair);color:var(--vert)} .score.score-moyen{background:var(--ambre-clair);color:var(--ambre)} .score.score-bas{background:var(--bg-puce);color:var(--gris-clair)} /* Offre au format "carte pleine" de la maquette (variante enrichie de .offre) : pastille de score + méta inline + bouton d'action. */ .offre-carte{padding:20px;background:var(--bg);border:1px solid var(--bord);border-radius:var(--rayon); display:flex;gap:16px;align-items:flex-start} .offre-carte .corps{flex:1;display:flex;flex-direction:column;gap:6px;min-width:0} .offre-carte .entete{display:flex;align-items:center;gap:10px;flex-wrap:wrap} .offre-carte .entete .titre{font:600 16px/1.25 var(--font-corps);color:var(--fg)} .offre-carte .entete .age{font:400 11px/1 var(--font-mono)} .offre-carte .entete .age.frais{color:var(--vert)} .offre-carte .entete .age.tiede{color:var(--ambre)} .offre-carte .badge-contrat{padding:3px 8px;background:var(--bg-puce);border-radius:4px; font:400 11px/1 var(--font-mono);color:var(--gris)} .offre-carte .resume{font:400 14px/1.4 var(--font-corps);color:var(--gris)} /* flex-wrap : la ligne porte employeur, ville ET salaire depuis le 03/09. Sans repli, "OuiHelp - Saint-Nazaire - salaire non communique" elargissait la page de 42 px a 320 px. Mesure faite : c'etait la mention de salaire, pas les logos ajoutes le meme jour. */ .offre-carte .infos{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:center; font:400 13px/1.4 var(--font-corps)} .offre-carte .infos .entreprise{font-weight:500;color:#555} .offre-carte .infos .lieu{color:var(--gris)} .offre-carte .infos .salaire{font-weight:500;color:var(--fg)} .offre-carte .infos .sep{color:var(--bord-fort)} .offre-carte .postuler{padding:8px 16px;background:var(--fg);color:#fff;border-radius:var(--rayon-petit); font:500 12px/1 var(--font-corps);flex-shrink:0;align-self:center} /* Section chiffres "ce qu'on a retiré" — grille de 3 statistiques. À ne brancher que si ces compteurs existent réellement côté build (voir DESIGN.md). */ .stats-retrait{display:grid;grid-template-columns:repeat(3,1fr);gap:1px; background:var(--bord-section);border-radius:12px;overflow:hidden} .stats-retrait .stat{background:var(--bg);padding:26px;display:flex;flex-direction:column;gap:8px} .stats-retrait .stat .valeur{font:700 34px/1 var(--font-mono);color:var(--rouge)} .stats-retrait .stat .libelle{font:400 12px/1.4 var(--font-corps);color:var(--gris)} @media (max-width:640px){ body{font-size:16px} h1{font-size:26px} header{position:static} .wrap{padding:0 18px} .offres{grid-template-columns:1fr} .offre .t,.offre .meta{white-space:normal} .chiffres span{padding:0 16px 0 0;border-right:0} .demo{padding:18px} .stats-retrait{grid-template-columns:1fr} } /* --------------------------------------------------------------------------- Detail du score — la contrepartie de la pastille chiffree. Replie par defaut : le visiteur qui veut juste postuler n'en a pas besoin, celui qui doute doit pouvoir verifier. C'est ce qui separe un score explicable d'un algorithme opaque. --------------------------------------------------------------------------- */ .score-detail{margin:22px 0;border:1px solid var(--bord);border-radius:var(--rayon); background:#fff;padding:0} .score-detail summary{cursor:pointer;padding:13px 16px;font:500 14px/1.4 var(--font-mono); color:var(--gris);list-style:none} .score-detail summary::-webkit-details-marker{display:none} .score-detail summary::before{content:"▸ ";color:var(--gris-clair)} .score-detail[open] summary::before{content:"▾ "} .score-detail summary:hover{color:var(--fg)} .sc-liste{list-style:none;margin:0;padding:0 16px 4px} .sc-liste li{display:flex;justify-content:space-between;gap:16px; padding:7px 0;border-top:1px solid var(--bord);font-size:14.5px} .sc-lib{color:var(--fg)} .sc-val{font:500 13.5px/1.5 var(--font-mono);color:var(--fg);white-space:nowrap} .sc-val.sc-na{color:var(--gris-clair);font-weight:400} .sc-note{margin:4px 16px 16px;font:400 13.5px/1.6 var(--font-corps);color:var(--gris)} /* --------------------------------------------------------------------------- « D'où viennent les offres ? » — bloc de transparence sous la recherche. Sobre volontairement : des noms en typo mono, pas des logos. Aligner huit logos de marques tierces donnerait l'impression d'un réseau de partenaires qui n'existe pas (voir NOMS_SOURCES dans build_site.py). --------------------------------------------------------------------------- */ .sources{margin:38px 0 8px;padding-top:26px;border-top:1px solid var(--bord-section)} .sources h2{margin:0 0 10px} .src-intro{margin:0 0 18px;font:400 15.5px/1.6 var(--font-corps);color:var(--gris); max-width:44em} .src-liste{list-style:none;margin:0;padding:0;display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:8px 16px} .src-liste li{display:flex;justify-content:space-between;align-items:baseline; gap:10px;padding:9px 12px;border:1px solid var(--bord);border-radius:var(--rayon-petit); background:var(--bg)} .src-nom{font:500 14.5px/1.3 var(--font-corps);color:var(--fg)} .src-n{font:400 12.5px/1.3 var(--font-mono);color:var(--gris);white-space:nowrap} .src-note{margin:16px 0 0;font:400 13px/1.6 var(--font-corps);color:var(--gris); max-width:48em} /* --- Liste de cartes enrichies ------------------------------------------- La grille .offres (colonnes de 320 px minimum) convient aux cartes simples, pas a .offre-carte : la pastille de score, le corps et le bouton Postuler sur une meme ligne demandent la largeur entiere. Les cartes enrichies s'empilent donc, comme dans la maquette. */ .offres-cartes{display:flex;flex-direction:column;gap:12px} .offres-cartes .offre-carte{transition:border-color .12s,box-shadow .12s} .offres-cartes .offre-carte:hover{border-color:var(--bord-fort); box-shadow:0 2px 12px rgba(0,0,0,.05)} .offre-carte .entete .titre{text-decoration:none} .offre-carte:hover .entete .titre{text-decoration:underline;text-underline-offset:2px} .offre-carte .postuler:hover{background:#333;text-decoration:none} .offre-carte .techno-mini{margin-right:6px} /* --- Navigation d'en-tete ------------------------------------------------- */ header .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px} .entete-nav{display:flex;gap:18px;font:400 13px/1 var(--font-mono);color:var(--gris)} .entete-nav a{color:var(--gris);white-space:nowrap} .entete-nav a:hover{color:var(--fg)} /* --- Bandeau : respecter ceux qui ne supportent pas le mouvement ---------- */ @media (prefers-reduced-motion: reduce){ .bandeau-piste{animation:none} } @media (max-width:640px){ /* A 390 px, "Comment on trie" se coupait apres "on" et venait mordre sur le logo : logo + deux liens + les ecarts font exactement la largeur de l'ecran. On resserre plutot que de masquer - le lien explique le tri, et c'est la premiere question d'un visiteur qui decouvre un agregateur. */ .entete-nav{font-size:11px;gap:12px} /* Sur telephone, le bouton passe sous le corps de la carte plutot que de comprimer le titre a deux mots par ligne. */ .offre-carte{flex-wrap:wrap} .offre-carte .postuler{align-self:flex-start;margin-left:60px} /* Le bandeau defilant est decoratif et coute une bande de hauteur sur un ecran ou elle compte : il disparait. */ .bandeau{display:none} } /* En dessous de 360 px - iPhone SE, petits Android - le logo et les deux liens ne tiennent plus sur une ligne : mesure a 320 px, la page debordait de 20 px sur les SEPT types de page. Plutot que de masquer un lien, la navigation passe sous le logo. */ @media (max-width:359px){ header .wrap{flex-wrap:wrap;row-gap:6px} /* La nav s'enroule au lieu de deborder. Mesure du 23/09 : « Candidatures » renomme en « Mes candidatures » faisait deborder la page de 8 px a 320 px sur les cinq types de page. Resserrer les ecarts aurait tenu a 8 px pres — donc jusqu'au prochain libelle rallonge. L'enroulement, lui, tient quel que soit le texte des liens. */ .entete-nav{width:100%;flex-wrap:wrap;row-gap:6px} } /* Legende du score, repetee au-dessus de chaque liste de cartes. Discrete par construction : elle doit repondre a la question sans se mettre devant les offres, et disparaitre du regard des la deuxieme page lue. */ /* Filet : un titre ne doit jamais elargir la page. Syne est une graisse d'affichage tres large - a 320 px, un seul mot de dix caracteres depasse la colonne, et le h1 d'une page d'offre est l'intitule ECRIT PAR L'EMPLOYEUR : on ne controle ni sa longueur ni ses mots. Mesure du 03/09 : h1 demandait 316 px pour 284 disponibles. La cesure n'intervient qu'en dernier recours, quand le mot ne tient pas sur une ligne entiere. */ h1,h2,.offre-carte .titre,.offre .t{overflow-wrap:break-word} .legende-score{margin:-6px 0 16px;font:400 13px/1.5 var(--font-corps); color:var(--gris)} .legende-score b{font-weight:600;color:var(--fg)} .legende-score a{color:var(--gris);text-decoration:underline; text-underline-offset:2px} .legende-score a:hover{color:var(--fg)} /* L'apercu chiffre d'une page de listing (apercu_liste dans build_site.py). Pose juste sous le sous-titre, avant les tags de navigation : c'est le seul texte de la page qu'on ne lit nulle part ailleurs sur le site, il merite d'etre lisible, pas d'etre une note de bas de page. D'ou le corps a 15px (contre 13 pour la legende du score, qui n'est qu'une legende) et le filet a gauche, qui le detache du sous-titre sans ajouter de cadre. */ .apercu-liste{margin:-18px 0 24px;padding:0 0 0 14px;max-width:44em; border-left:2px solid var(--bord); font:400 15px/1.7 var(--font-corps);color:var(--gris)} /* Un salaire absent s'annonce, mais ne se met pas en avant : meme place que le montant, poids et couleur d'une note. Sans cette nuance, "Salaire non communique" aurait la meme force visuelle qu'une vraie fourchette. */ .paie-absente,.salaire-absent{font-weight:400;color:var(--gris-clair); font-style:normal} .offre-carte .infos .salaire-absent{font-weight:400;color:var(--gris-clair)} /* --- Logos --------------------------------------------------------------- Taille fixe et object-fit : les fichiers viennent de 160 sites differents, en carre comme en rectangle, en 32 px comme en 512. Sans contrainte, une seule icone mal proportionnee decale toute une rangee. */ .logo-src,.logo-tag{width:18px;height:18px;object-fit:contain;border-radius:4px; flex-shrink:0;vertical-align:-4px} .logo-tag{margin-right:7px} .logo-src{margin-right:9px} /* Pastille a l'initiale quand aucun logo n'a ete trouve : une case vide se remarque plus qu'une lettre, et un logo generique serait un faux. */ .logo-src-lettre,.logo-tag-lettre{display:inline-flex;align-items:center; justify-content:center;background:var(--bg-puce);color:var(--gris-clair); font:600 10px/1 var(--font-mono);border:1px solid var(--bord)} /* La ligne porte desormais un logo, un nom et un compte. Sans min-width:0 le nom refuse de se comprimer et pousse le compte hors de la colonne : mesure du 03/09, la page debordait de 22 px a 640 px - soit un zoom a 200 %, que WCAG 1.4.10 interdit de faire deborder. */ .src-liste li{display:flex;align-items:center;gap:0;min-width:0} /* Le nom s'affiche en entier (demande du 21/09 : "Welcome to the Jungle" finissait en points de suspension). Colonnes plus larges, et retour a la ligne autorise plutot que la coupe - min-width:0 reste, donc un nom long passe sur deux lignes au lieu de faire deborder la page. */ .src-liste{grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr))} .src-liste .src-nom{flex:1;min-width:0;overflow-wrap:anywhere;padding-right:8px} /* Toute la bulle est le lien vers les offres de la source. */ .src-liste li{padding:0} .src-liste li a{display:flex;align-items:center;flex:1;min-width:0; padding:9px 12px;color:inherit;text-decoration:none} .src-liste li a:hover .src-nom{text-decoration:underline;text-underline-offset:2px} .tag-logo{display:inline-flex;align-items:center} /* Mention de fin de rangee : "+ 2 727 employeurs avec une seule offre". Ce n'est pas un lien, donc elle ne doit pas en avoir l'air. */ .tag-muet{color:var(--gris);border-style:dashed;cursor:default} /* Lien d'evitement — « Aller au contenu ». Mesure du 05/09 (audit_a11y_profond.py) : sur CHAQUE page du site, un visiteur au clavier traversait 3 arrets (logo, « Comment on trie ? », « Entreprises ») avant d'atteindre le contenu, sans aucun moyen de les sauter. WCAG 2.4.1 (niveau A) l'interdit des qu'un bloc se repete d'une page a l'autre — c'est le cas de l'en-tete. Le lien est HORS ECRAN, pas `display:none` : un element masque de cette facon-la ne recoit jamais le focus, donc n'existe pas au clavier non plus. Il revient a l'ecran des qu'il est focalise. */ .lien-evitement{position:absolute;top:0;left:-9999px;z-index:200; background:var(--fg);color:#fff;padding:12px 18px; border-radius:0 0 var(--rayon-petit) 0;text-decoration:none; font:600 15px/1 var(--font-corps)} .lien-evitement:focus{left:0} /*
porte tabindex="-1" pour que le saut deplace REELLEMENT le focus et pas seulement le defilement (Safari et les anciens WebKit ne focalisent pas une cible d'ancre non focalisable). La bague de focus est retiree sur ce seul element : une bague de 800 px de large autour de toute la page n'aide personne, et le repere reste le deplacement du contenu. */ main[tabindex="-1"]:focus{outline:none} /* Bague de focus clavier commune a tout ce qui se clique. :focus-visible et non :focus : invisible au clic souris, toujours la au clavier. */ a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--fg); outline-offset:2px} /* Fil d'Ariane. Le separateur est en CSS et non dans le texte : un ">" ecrit dans le HTML serait lu a voix haute par un lecteur d'ecran entre chaque etape. Il defile horizontalement plutot que de passer a la ligne - sur un telephone, un fil sur trois lignes mange l'ecran avant le contenu. */ .fil-ariane{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:0; margin:0 0 18px;padding:0 0 2px;font-size:14px;color:var(--gris-clair); scrollbar-width:none} .fil-ariane::-webkit-scrollbar{display:none} .fil-ariane>*{white-space:nowrap;flex:0 0 auto} .fil-ariane>*+*::before{content:">";content:">" / "";margin:0 9px;font-weight:600;color:var(--gris)} .fil-ariane a{color:var(--gris);text-decoration:none;border-bottom:1px solid transparent} .fil-ariane a:hover{border-bottom-color:var(--gris-clair)} .fil-ariane [aria-current]{color:var(--gris-clair); max-width:min(46ch,60vw);overflow:hidden;text-overflow:ellipsis} /* Page d'offre - arbitrage Karim du 11/09. L'intitule en 34 px Syne ecrasait la page (trois lignes sur un intitule long), et la ligne employeur / ville / date / salaire, en gris, se lisait moins que lui alors que c'est elle que le candidat parcourt. Le titre descend, la ligne passe a l'encre, et un salaire PUBLIE prend une couleur indicative : bleu, parce que le vert, l'ambre et le rouge portent deja la fraicheur des offres. Separateur du fil d'Ariane : deux declarations "content", la syntaxe '/ ""' (le lecteur d'ecran ne lit pas le chevron) invalidant la ligne sur un navigateur ancien, qui garde alors la premiere. */ .entete-offre h1{font-size:26px;line-height:1.22} .entete-offre .sub{color:var(--fg);font-weight:500} .entete-offre .paie{color:var(--info);font-weight:700} .entete-offre .paie-absente{color:var(--gris);font-weight:400} @media (max-width:640px){.entete-offre h1{font-size:21px}} /* ========================================================================== PEAU « NEUMORPHISM » — conversion des composants (16/09/2026) Portée depuis la maquette "Infact Neumorphism". Ce bloc est volontairement EN FIN DE FICHIER et ne fait que surcharger des règles déclarées plus haut, à sélecteur identique. Pour revenir au design précédent, il suffit de supprimer ce bloc et de restaurer le :root. Deux filets pour ça : la copie infact.css.bak-2026-09-16-2100 posée à côté (sur disque seulement — les .bak sont ignorés par git), et le commit précédent dans l'historique, qui lui fait foi. Aucun sélecteur nouveau n'est inventé : build_site.py produit déjà tout ce qui est stylé ici. Règle de conversion appliquée partout : surface qui AVANCE (carte, bouton, bandeau) -> ombres externes, bordure retirée surface qui RENTRE (champ, chip, pastille) -> ombres internes (inset) bouton pressé / état actif -> passe de l'externe à l'interne ========================================================================== */ /* ── Ossature de page ─────────────────────────────────────────────────── */ /* Le fond redevient un aplat : les trois arrêts du dégradé valent désormais la même valeur, mais on le déclare explicitement pour que ce soit lisible. */ body{background:var(--bg-haut)} /* En-tête collant : plus de bordure basse ni de voile blanc — une simple ombre portée vers le bas suffit à décoller le bandeau du contenu qui défile dessous. Le fond reste OPAQUE (et non translucide) pour la même raison qu'avant : un titre de carte ne doit pas traverser le logo. */ header{border-bottom:0;background:var(--bg-haut); box-shadow:0 6px 14px -8px var(--om-sombre)} /* Le logo devient une plaque en relief, comme dans la maquette. */ .logo{display:inline-block;padding:10px 18px;border-radius:var(--rayon); background:var(--bg);box-shadow:var(--relief)} .logo:hover{opacity:1;box-shadow:var(--creux-doux)} /* Les liens de l'en-tete sont des plaques, comme le logo. Sans cela le logo etait la SEULE surface en relief du bandeau et « Comment on trie ? », « Entreprises », « Candidatures » flottaient en texte nu a cote : la barre n'avait qu'une moitie de son langage. Relief DOUX et pas --relief : le logo doit rester l'element dominant de l'en-tete. */ /* Au-dessus de 640 px SEULEMENT. Mesure du 23/09 : avec le rembourrage de la plaque, la barre debordait de 66 px a 320 px et la nav passait a la ligne a 390 px. Le commentaire du bloc mobile disait deja que logo + liens + ecarts font EXACTEMENT la largeur de l'ecran : il n'y a pas de place pour une plaque. Sur telephone les liens restent du texte nu, et c'est tres bien. */ @media (min-width:641px){ .entete-nav{align-items:center} .entete-nav a{display:inline-block;padding:8px 14px;border-radius:var(--rayon-petit); background:var(--bg);box-shadow:var(--relief-doux); transition:box-shadow .12s,color .12s} .entete-nav a:hover{color:var(--fg);box-shadow:var(--creux-doux)} .entete-nav a:focus-visible{outline:2px solid var(--fg);outline-offset:2px} } /* ── Cartes ───────────────────────────────────────────────────────────── */ .offre,.offre-carte,.colonne,.score-detail,.src-liste li,.demo{ border:0;background:var(--bg);box-shadow:var(--relief-doux)} .offre,.offre-carte{border-radius:var(--rayon)} .demo{border-top:3px solid var(--fg);border-radius:var(--rayon-grand)} .colonne{border-radius:var(--rayon)} /* Au survol, une carte s'enfonce au lieu de se cercler : c'est le seul retour visuel disponible quand il n'y a plus de bordure à colorer. */ .offre:hover,.offres-cartes .offre-carte:hover,.colonne:hover{ border-color:transparent;box-shadow:var(--creux-doux)} /* ── Chips, tags, technos : toujours en creux ─────────────────────────── */ .techno,.techno-mini,.tag,.chip{border:0;background:var(--bg-puce); box-shadow:var(--creux-doux)} .tag:hover,.chip:hover{background:var(--bg-puce);box-shadow:var(--relief-doux)} /* a.tag est un tag CLIQUABLE : il garde une vraie bordure (3,13:1), sans quoi rien ne le distingue d'une étiquette décorative une fois les ombres posées. */ a.tag{border:1px solid var(--bord-fort);background:var(--bg);box-shadow:var(--relief-doux)} a.tag:hover{border-color:var(--fg);background:var(--bg);box-shadow:var(--creux-doux)} /* ── Boutons secondaires ──────────────────────────────────────────────── */ .voir-plus,.renvois a,.pagination a,.comparer{ border:0;background:var(--bg);box-shadow:var(--relief-doux)} .voir-plus:hover,.renvois a:hover,.pagination a:hover,.comparer:hover{ border-color:transparent;background:var(--bg);box-shadow:var(--creux)} /* ── Boutons primaires ────────────────────────────────────────────────── */ /* Ceux-là NE passent PAS en beige : ce sont les deux seules actions fortes du site (postuler, appel à l'action). Un aplat d'encre à 9,6:1 reste l'élément le plus contrasté de la page — c'est exactement ce qu'on veut d'un bouton primaire, et le neumorphisme ne doit pas l'aplatir. */ .cta,.offre-carte .postuler{background:var(--fg);color:#fff;border-radius:var(--rayon-petit); box-shadow:5px 5px 12px var(--om-sombre),-3px -3px 8px var(--om-claire)} .cta:hover,.offre-carte .postuler:hover{background:#222; box-shadow:inset 3px 3px 7px rgba(0,0,0,.30)} /* ── Champ de recherche : la pièce la plus typée de la maquette ───────── */ .barre-recherche{background:var(--bg);border:0;border-radius:var(--rayon); box-shadow:var(--creux-fort)} .barre-recherche .separateur{background:var(--bord)} /* ── Panneaux de contenu (missions, argument) ─────────────────────────── */ .missions,.argument{background:var(--bg-doux);border:0;border-left:3px solid var(--fg); border-radius:0 var(--rayon) var(--rayon) 0;box-shadow:var(--creux)} /* ── Bandeau défilant ─────────────────────────────────────────────────── */ .bandeau{border-bottom:0;background:var(--acc-clair); box-shadow:inset 0 -1px 2px rgba(0,0,0,.06)} /* ── Pastilles de score ───────────────────────────────────────────────── */ .score{box-shadow:var(--creux-doux)} .score.score-bas{background:var(--bg-puce)} /* ── Bloc « ce que le site retire » ───────────────────────────────────── */ /* L'ancienne astuce du fond de grille visible dans un gap de 1 px ne marche plus : sur fond beige, deux beiges séparés par un trait ne se voient pas. Le conteneur passe en relief, chaque chiffre en creux, avec un vrai écart. */ .stats-retrait{background:var(--bg);border-radius:var(--rayon-grand);gap:14px; padding:14px;box-shadow:var(--relief)} .stats-retrait .stat{background:var(--bg-doux);border-radius:var(--rayon); box-shadow:var(--creux)} /* ── Divers ───────────────────────────────────────────────────────────── */ .logo-src-lettre,.logo-tag-lettre{border:0;background:var(--bg-puce); box-shadow:var(--creux-doux)} footer{border-top:0;background:var(--bg);border-radius:var(--rayon-grand); box-shadow:var(--relief-doux);padding:28px 40px;margin-top:64px} /* ── Garde-fous ───────────────────────────────────────────────────────── */ /* 1. Contraste forcé (Windows "contraste élevé") : les ombres ne sont pas rendues du tout. Sans ce repli, toutes les surfaces deviennent des rectangles sans contour. On rétablit des bordures franches. */ @media (forced-colors:active){ .offre,.offre-carte,.colonne,.score-detail,.src-liste li,.demo, .techno,.tag,.chip,.voir-plus,.renvois a,.pagination a,.comparer, .barre-recherche,.stats-retrait .stat,footer{border:1px solid;box-shadow:none} } /* 2. Le bandeau défilant s'arrête si l'utilisateur a demandé moins d'animations — règle déjà posée plus haut pour .bandeau-piste, rappelée ici parce que la peau ajoute des transitions d'ombre. */ @media (prefers-reduced-motion:reduce){ .offre,.offre-carte,.colonne,.voir-plus,.cta{transition:none} } /* Largeur de page — TRANCHÉ le 19/09 : par type de page. Les pages d'offre gardent 800 px (longueur de ligne lisible). Les pages-listes (accueil, listes métier/ville, entreprises) portent class="large" sur , posée par page(large=True) dans build_site.py, et composent leurs grilles sur 1200 px. */ html.large{--largeur:1200px} /* ── Panneaux de la page d'accueil ──────────────────────────────────────── La maquette ne pose pas ses sections à plat : chaque grand bloc est une plaque qui avance. Sans ça, la peau se voit sur les petits éléments mais la page reste plate. On n'ajoute AUCUNE classe : .hero et .sources sont déjà produits par build_site.py. */ .hero{background:var(--bg);border-radius:var(--rayon-grand); padding:36px 34px 30px;box-shadow:var(--relief-fort);margin-top:8px} .sources{background:var(--bg);border-radius:var(--rayon-grand);border-top:0; padding:30px 34px;box-shadow:var(--relief);margin:34px 0 8px} .sources h2{margin-top:0} /* VÉRIFIÉ au DOM le 16/09 : #bloc-recherche est le FRÈRE de .hero, pas son enfant. Il garde donc sa propre plaque (déclarée dans recherche.py) et la page d'accueil se lit comme deux plaques empilées — l'accroche, puis la recherche. Une règle .hero #bloc-recherche a été écrite puis retirée : elle ne s'appliquait à rien. Les réunir en une seule plaque demanderait de changer le HTML dans build_site.py, ce qui sort d'un travail de peau. */ /* Les chiffres passent en cartes creusées, comme dans la maquette, au lieu d'une ligne de texte séparée par des filets. */ .chiffres{border-top:0;border-bottom:0;padding:0;gap:12px;margin-top:26px} .chiffres span{padding:14px 20px;border-right:0;background:var(--bg-doux); border-radius:var(--rayon);box-shadow:var(--creux);display:flex; flex-direction:column;gap:6px;color:var(--gris)} .chiffres span:first-child{padding-left:20px} /* La règle d'origine envoyait la date seule sur sa propre ligne : elle existait parce qu'un séparateur orphelin restait au bout de "villes" (constat à 1440 px). Il n'y a plus de séparateur — la date peut reprendre sa place dans la rangée. */ .chiffres span:last-child{flex-basis:auto;padding-left:20px} .chiffres b{font:700 22px/1 var(--font-affichage);color:var(--fg)} /* ========================================================================== RACCORDS D'INTÉGRATION — 23/09/2026 Ajouté après confrontation du CSS au HTML RÉELLEMENT produit par build_site.py (page-accueil-REELLE-sans-css.html + CLASSES-CONTRAT.md). Aucune classe renommée, aucune classe inventée, aucun nom de variable existant modifié, HTML inchangé. Ce bloc ne fait que deux choses : 1. STYLER CE QUI NE L'ÉTAIT PAS. Cinq classes du contrat n'avaient aucune règle dans le fichier — dont deux très visibles : .recherche-champ le CSS stylait `.barre-recherche .champ`, un sélecteur que build_site.py ne produit PAS. Le champ de recherche de l'accueil sortait donc en input nu. .cand 7 498 occurrences (une par page d'offre) : bouton de suivi de candidature, rendu sans aucun style. .filtres-menus rangée de : il hérite du label ci-dessus, on ne règle donc que l'écart interne. */ .tri{gap:10px;padding:6px 8px 6px 16px} .tri select{padding:7px 32px 7px 12px;box-shadow:var(--creux-doux)} /* ── Compteur de résultats et conteneur ──────────────────────────────── */ #compteur{margin:18px 0 10px;font:400 13px/1.5 var(--font-mono);color:var(--gris-clair)} #compteur:empty{margin:0} #resultats:empty{margin:0} /* ========================================================================== 2. .cand — SUIVI DE CANDIDATURE (page d'offre, 7 498 occurrences) Le script candidatures.js bascule l'état ; on style via l'ATTRIBUT aria-pressed, pas via une classe ajoutée — rien à inventer côté contrat. Déclaré pour