/* ════════════════════════════════════════════════════════════════════ HIRINGNOTES — ESPACE CONNECTÉ · design « Améthyste » Feuille AUTONOME : `layouts/app.ejs` ne charge plus `app.css`. ⚠️ POURQUOI L'ESPACE NE PARTAGE PLUS LA FEUILLE DE LA VITRINE. L'ancienne version chargeait `app.css` (156 Ko, écrit pour le site public) PUIS `app-connecte.css` par-dessus. Deux jeux de variables se marchaient dessus — `--theme`, `--app-primary`, `--encre-douce` — et le dernier chargé gagnait : une couleur changée dans la vitrine repeignait l'application, et l'inverse. Les deux univers sont désormais séparés pour de bon. ⚠️ AUCUN STYLE EN LIGNE DANS LES GABARITS. `style-src 'self'` (server.js) bloque les attributs `style=""`. La maquette en est pleine — c'est un prototype. Ici, tout ce qu'elle exprime en ligne est une classe ; les valeurs continues (largeur d'une jauge) passent par des classes de paliers (`.hn-p80`). ⚠️ LES ICÔNES SONT DES SVG INLINE, PAS FONT AWESOME. La maquette charge cdnjs : la CSP l'interdit, et une police d'icônes pèserait 300 Ko pour cinquante glyphes. Voir `views/partials/icone.ejs`. ════════════════════════════════════════════════════════════════════ */ /* ── Police ─────────────────────────────────────────────────────── ⚠️ AUTO-HÉBERGÉE. Un @import vers fonts.googleapis.com casserait la CSP et enverrait l'IP de chaque visiteur à un tiers. Fichiers attendus dans public/fonts/ ; sans eux, la pile de repli prend le relais et l'espace reste lisible. */ @font-face { font-family:'Plus Jakarta Sans'; src:url('/fonts/PlusJakartaSans-Regular.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; } @font-face { font-family:'Plus Jakarta Sans'; src:url('/fonts/PlusJakartaSans-Medium.woff2') format('woff2'); font-weight:500; font-style:normal; font-display:swap; } @font-face { font-family:'Plus Jakarta Sans'; src:url('/fonts/PlusJakartaSans-SemiBold.woff2') format('woff2'); font-weight:600; font-style:normal; font-display:swap; } @font-face { font-family:'Plus Jakarta Sans'; src:url('/fonts/PlusJakartaSans-Bold.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap; } /* ── Jetons ──────────────────────────────────────────────────────── */ :root { --hn-bg:#F4F2F9; --hn-blanc:#ffffff; --hn-encre:#22223B; --hn-encre-2:#42425A; --hn-gris:#5C5C74; --hn-gris-2:#6E6E85; --hn-gris-3:#8A8AA0; --hn-gris-4:#9A9AAE; --hn-gris-5:#B9B9C8; --hn-mag:#C73E9B; --hn-mag-fonce:#952E74; --hn-mag-clair:#F9F0F6; --hn-mag-rose:#FDF7FB; --hn-mag-vif:#E87FC4; --hn-navy:#1B1B3A; --hn-navy-txt:#B7B7CB; --hn-navy-txt2:#9C9CB4; --hn-trait:#EAE7F2; --hn-trait-2:#F0EEF6; --hn-trait-3:#F4F2F9; --hn-bord:#E4E0EE; --hn-tiret:#D8D3E6; --hn-lilas:#EEE2FC; --hn-brume:#FBFAFE; --hn-lavande:#F9F6FF; /* WhileResume — le violet est SA couleur, jamais celle de HiringNotes. */ --hn-wr:#5B21B6; --hn-wr-2:#6D28D9; --hn-wr-3:#A78BFA; --hn-wr-clair:#F5F3FF; --hn-wr-pale:#EDE9FE; --hn-bleu:#024AAD; --hn-bleu-pale:#EEF3FC; --hn-vert:#1E7B45; --hn-vert-pale:#E8F6ED; --hn-rouge:#C42348; --hn-rouge-pale:#FDECEF; --hn-orange:#8A5A00; --hn-orange-pale:#FFF6E2; --hn-etoile:#DC9A02; --hn-requis:#D4145A; --hn-r-carte:16px; --hn-r-champ:10px; --hn-r-pilule:20px; --hn-r-tuile:12px; --hn-side:262px; --hn-side-mini:78px; --hn-top:72px; } /* ── Base ────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html, body.hn { margin:0; height:100%; background:var(--hn-bg); font-family:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,system-ui,sans-serif; color:var(--hn-encre); font-size:15px; -webkit-font-smoothing:antialiased; } body.hn a { text-decoration:none; } body.hn p { text-wrap:pretty; } /* ⚠️ ENCORE UNE HISTOIRE DE SPÉCIFICITÉ — LA MÊME QUE POUR LES LIENS. `body.hn h2 { margin: 0 }` pèse (0,1,2), plus qu'une classe seule. TOUTES les marges de titre écrites ensuite étaient donc ignorées : `.hn-bloc-titre { margin-bottom: 16px }`, `.hn-vide h2`, `.hn-tunnel__titre`… Les titres de carte se retrouvaient collés à leur contenu, et l'on croyait à un oubli de padding alors que la règle existait bien — elle ne s'appliquait simplement jamais. Même remède : `:where()` ramène la spécificité à zéro. La règle bat le style par défaut du navigateur et cède devant la moindre classe. Les `

` sont traités ici aussi : sans cela, un paragraphe sans classe garde la marge de 1em du navigateur, qui s'ajoute au `gap` des piles et donne des écarts irréguliers d'un écran à l'autre. */ :where(body.hn) :where(h1, h2, h3, h4) { margin: 0; font-weight: 700; letter-spacing: -.4px; } :where(body.hn) :where(p) { margin: 0; } body.hn ::-webkit-scrollbar { width:10px; height:10px; } body.hn ::-webkit-scrollbar-thumb { background:var(--hn-tiret); border-radius:5px; border:3px solid transparent; background-clip:content-box; } .hn-sr { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; } /* ⚠️ Un

qui n'enveloppe qu'un bouton ne doit pas casser les grilles : sans ça, chaque form prend une ligne entière. */ .hn-inline { display:inline; margin:0; } .hn-inline--flex { display:flex; margin:0; } .ico { width:1em; height:1em; flex:none; vertical-align:-.125em; stroke-width:2; } .ico--sm { width:.82em; height:.82em; } .ico--lg { width:1.3em; height:1.3em; } /* ════════════════════════════════════════════════════════════════════ COQUILLE ════════════════════════════════════════════════════════════════════ */ .hn-shell { display:flex; height:100vh; overflow:hidden; } .hn-side { flex:none; width:var(--hn-side); background:var(--hn-blanc); border-right:1px solid var(--hn-trait); display:flex; flex-direction:column; transition:width .18s ease; } .hn-side__head { padding:22px 18px 16px; display:flex; align-items:center; justify-content:space-between; gap:9px; } .hn-brand { flex:1; min-width:0; display:flex; align-items:center; gap:9px; color:var(--hn-navy); } .hn-brand:hover { color:var(--hn-navy); } .hn-brand__chev { font-size:19px; letter-spacing:-3px; } .hn-brand__nom { font-size:19px; font-weight:700; letter-spacing:-.4px; white-space:nowrap; } /* ⚠️ Le replieur est un LIEN, pas un bouton JS : l'état vit en session, donc l'espace se replie aussi sans JavaScript. */ .hn-side__replier { flex:none; width:32px; height:32px; border-radius:10px; background:var(--hn-bg); color:var(--hn-gris); display:flex; align-items:center; justify-content:center; font-size:15px; border:0; cursor:pointer; padding:0; } .hn-side__replier:hover { background:var(--hn-trait); color:var(--hn-encre); } .hn-iface { padding:0 18px 14px; } .hn-surtitre { font-size:10.5px; font-weight:700; letter-spacing:.11em; text-transform:uppercase; color:var(--hn-gris-3); margin-bottom:9px; } .hn-iface__tabs { display:flex; gap:4px; background:var(--hn-bg); border-radius:14px; padding:4px; } .hn-iface__tabs form { flex:1; display:flex; margin:0; } .hn-iface__tab { flex:1; text-align:center; cursor:pointer; border:0; border-radius:11px; padding:10px 0; font:inherit; font-size:13.5px; font-weight:700; background:transparent; color:var(--hn-gris); transition:all .15s; } .hn-iface__tab:hover { color:var(--hn-encre); } .hn-iface__tab.est-actif { background:var(--hn-blanc); color:var(--hn-mag-fonce); box-shadow:0 2px 6px rgba(34,34,59,.08); } .hn-ctx { display:flex; align-items:center; gap:11px; margin-top:12px; background:var(--hn-brume); border:1px solid var(--hn-trait-2); border-radius:13px; padding:11px 13px; color:var(--hn-encre); } .hn-ctx:hover { color:var(--hn-encre); border-color:var(--hn-bord); } .hn-ctx__ico { flex:none; width:34px; height:34px; border-radius:11px; background:var(--hn-mag-clair); color:var(--hn-mag); display:flex; align-items:center; justify-content:center; font-size:15px; } .hn-ctx__ico--rec { background:var(--hn-lilas); color:var(--hn-mag-fonce); } .hn-ctx__txt { min-width:0; flex:1; } .hn-ctx__nom { font-size:13.5px; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .hn-ctx__role { font-size:12px; color:var(--hn-gris-2); } .hn-iface--mini { padding:0 14px 14px; display:flex; flex-direction:column; gap:6px; align-items:center; } .hn-iface--mini form { width:44px; margin:0; } .hn-iface__pastille { width:44px; height:38px; border-radius:12px; border:0; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:16px; background:transparent; color:var(--hn-gris); } .hn-iface__pastille.est-actif { background:var(--hn-mag-clair); color:var(--hn-mag-fonce); } /* ── Navigation ──────────────────────────────────────────────────── */ .hn-nav { flex:1; min-height:0; overflow:auto; padding:6px 14px 12px; } .hn-nav__groupe { margin-bottom:16px; } .hn-nav__titre { font-size:10.5px; font-weight:700; letter-spacing:.11em; text-transform:uppercase; color:var(--hn-gris-3); padding:0 10px; margin-bottom:7px; } .hn-nav__sep { height:1px; background:var(--hn-trait-2); margin:0 6px 8px; display:none; } .hn-nav__items { display:flex; flex-direction:column; gap:2px; } .hn-nav__lien { display:flex; align-items:center; gap:12px; border-radius:11px; padding:10px 12px; color:var(--hn-encre-2); font-weight:500; font-size:14.5px; } .hn-nav__lien:hover { background:var(--hn-trait-3); color:var(--hn-encre); } .hn-nav__lien .ico { font-size:17px; color:var(--hn-gris-3); } .hn-nav__lien.est-actif { background:var(--hn-mag-clair); color:var(--hn-mag-fonce); font-weight:700; } .hn-nav__lien.est-actif .ico { color:var(--hn-mag); } /* WhileResume garde SA couleur jusque dans la navigation : c'est un autre produit, l'entrée doit se voir comme telle. */ .hn-nav__lien--wr .ico { color:var(--hn-wr-3); } .hn-nav__lien--wr.est-actif { background:var(--hn-wr-clair); color:var(--hn-wr); } .hn-nav__lien--wr.est-actif .ico { color:var(--hn-wr); } .hn-nav__libelle { flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .hn-nav__badge { flex:none; min-width:20px; height:20px; border-radius:10px; background:var(--hn-mag); color:#fff; font-size:11.5px; font-weight:700; display:flex; align-items:center; justify-content:center; padding:0 6px; } .hn-nav__lien--wr .hn-nav__badge { background:var(--hn-wr); } .hn-nav__ext { flex:none; color:var(--hn-wr-3); font-size:12px; } /* ⚠️ Une entrée sans écran est un `span`, pas un `` : un lien sans cible reste tabulable et se laisse cliquer pour rien. */ .hn-nav__lien.est-a-venir { color:var(--hn-gris-5); cursor:default; } .hn-nav__lien.est-a-venir:hover { background:transparent; color:var(--hn-gris-5); } .hn-nav__lien.est-a-venir .ico { color:var(--hn-gris-5); } .hn-nav__cadenas { flex:none; color:var(--hn-gris-5); font-size:12px; } /* Repliée : icône seule, centrée, libellé en `title`. */ .hn-side--mini { width:var(--hn-side-mini); } .hn-side--mini .hn-side__head { justify-content:center; } .hn-side--mini .hn-nav { padding-left:10px; padding-right:10px; } .hn-side--mini .hn-nav__lien { justify-content:center; padding:10px 0; } .hn-side--mini .hn-nav__sep { display:block; } .hn-side--mini .hn-nav__libelle, .hn-side--mini .hn-nav__badge, .hn-side--mini .hn-nav__ext, .hn-side--mini .hn-nav__cadenas, .hn-side--mini .hn-nav__titre, .hn-side--mini .hn-side__user-txt, .hn-side--mini .hn-side__sortie { display:none; } .hn-side--mini .hn-side__user { justify-content:center; } .hn-essai { background:var(--hn-navy); border-radius:14px; padding:18px; color:#fff; margin:4px 2px 0; } .hn-essai__tete { display:flex; align-items:center; gap:9px; margin-bottom:9px; font-size:14px; font-weight:700; } .hn-essai__tete .ico { color:var(--hn-mag-vif); font-size:15px; } .hn-essai p { margin:0 0 13px; font-size:12.5px; line-height:1.6; color:var(--hn-navy-txt); } .hn-essai__cta { display:block; text-align:center; background:var(--hn-mag); color:#fff; font-size:13.5px; font-weight:600; padding:10px 0; border-radius:var(--hn-r-pilule); } .hn-essai__cta:hover { background:var(--hn-mag-fonce); color:#fff; } .hn-side__user { flex:none; border-top:1px solid var(--hn-trait-2); padding:14px; display:flex; align-items:center; gap:11px; } .hn-avatar { flex:none; width:36px; height:36px; border-radius:50%; background:var(--hn-lilas); color:#7B2E60; display:flex; align-items:center; justify-content:center; font-size:12.5px; font-weight:700; } .hn-avatar--sm { width:34px; height:34px; font-size:11.5px; } .hn-avatar--md { width:42px; height:42px; font-size:13px; } .hn-avatar--lg { width:64px; height:64px; border-radius:16px; font-size:21px; letter-spacing:-.5px; } .hn-side__user-txt { flex:1; min-width:0; } .hn-side__user-nom { font-size:13.5px; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .hn-side__user-mail { font-size:12px; color:var(--hn-gris-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .hn-side__sortie { flex:none; border:0; background:transparent; cursor:pointer; color:var(--hn-gris-4); font-size:16px; padding:4px; } .hn-side__sortie:hover { color:var(--hn-rouge); } /* ── Colonne principale ──────────────────────────────────────────── */ .hn-main { flex:1; min-width:0; display:flex; flex-direction:column; overflow:auto; } .hn-top { flex:none; height:var(--hn-top); background:var(--hn-blanc); border-bottom:1px solid var(--hn-trait); padding:0 28px; display:flex; align-items:center; gap:18px; position:sticky; top:0; z-index:5; } .hn-top__gauche { flex:0 1 auto; min-width:0; display:flex; align-items:center; gap:14px; } .hn-top__titre { min-width:0; font-size:19px; font-weight:700; letter-spacing:-.4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .hn-chip { background:var(--hn-mag-clair); color:var(--hn-mag-fonce); font-size:11.5px; font-weight:700; padding:5px 11px; border-radius:var(--hn-r-pilule); white-space:nowrap; } .hn-chip--rec { background:var(--hn-lilas); color:#7B2E60; } .hn-recherche { flex:1; min-width:110px; max-width:280px; margin-left:auto; margin-right:0; border:1px solid var(--hn-bord); border-radius:var(--hn-r-pilule); padding:0 15px; display:flex; align-items:center; gap:9px; overflow:hidden; } .hn-recherche .ico { color:var(--hn-mag); font-size:15px; } .hn-recherche input { flex:1; min-width:0; border:0; outline:0; background:transparent; font:inherit; font-size:14px; padding:9px 0; color:var(--hn-encre); } .hn-recherche input::placeholder { color:var(--hn-gris-4); } .hn-top__outils { flex:none; display:flex; align-items:center; gap:8px; background:var(--hn-navy); color:#fff; font-size:13px; font-weight:700; padding:10px 15px; border-radius:var(--hn-r-pilule); white-space:nowrap; } .hn-top__outils:hover { background:#2A2A55; color:#fff; } .hn-top__outils.est-ouvert { background:var(--hn-mag); } .hn-cloche { flex:none; position:relative; width:38px; height:38px; border-radius:50%; background:var(--hn-bg); color:var(--hn-encre-2); display:flex; align-items:center; justify-content:center; font-size:17px; } .hn-cloche:hover { background:var(--hn-trait); color:var(--hn-encre); } .hn-cloche__n { position:absolute; top:-2px; right:-2px; min-width:17px; height:17px; border-radius:9px; background:var(--hn-mag); color:#fff; font-size:10.5px; font-weight:700; display:flex; align-items:center; justify-content:center; padding:0 4px; } /* ⚠️ Le choix de langue s'enregistre sur le COMPTE (POST /app/langue), pas dans un cookie : il suit la personne d'un appareil à l'autre. */ .hn-lang { flex:none; border:0; background:transparent; font:inherit; font-size:13.5px; font-weight:600; color:var(--hn-gris-2); cursor:pointer; padding:4px; } .hn-lang:focus-visible { outline:2px solid var(--hn-mag); border-radius:6px; } /* Sur écran large, les outils restent alignés à droite du bandeau. */ .hn-top__outils-zone { display: flex; align-items: center; gap: 18px; flex: 1; justify-content: flex-end; } .hn-page { flex:1; padding:28px; } .hn-large { max-width:1500px; } /* ── Trame ───────────────────────────────────────────────────────── */ .hn-pile { display:flex; flex-direction:column; gap:20px; } .hn-pile--lg { gap:22px; } .hn-pile--sm { gap:14px; } .hn-2col { display:grid; grid-template-columns:minmax(0,1fr) 380px; gap:22px; align-items:start; } .hn-2col--large { grid-template-columns:minmax(0,1fr) 400px; } .hn-2col--filtres { grid-template-columns:290px minmax(0,1fr); } .hn-2col--msg { grid-template-columns:340px minmax(0,1fr); } .hn-2col--dash { grid-template-columns:minmax(0,1fr) 380px; } .hn-grid2 { display:grid; grid-template-columns:1fr 1fr; gap:20px; } .hn-grid3 { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; } .hn-grid4 { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; } .hn-entre { display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; } @media (max-width:1180px) { .hn-2col, .hn-2col--large, .hn-2col--filtres, .hn-2col--msg, .hn-2col--dash { grid-template-columns:minmax(0,1fr); } .hn-grid3, .hn-grid4 { grid-template-columns:1fr 1fr; } } @media (max-width:760px) { .hn-grid2, .hn-grid3, .hn-grid4 { grid-template-columns:minmax(0,1fr); } .hn-page { padding:18px; } .hn-top { padding:0 16px; gap:12px; } .hn-recherche { display:none; } } /* ── Carte ───────────────────────────────────────────────────────── */ .hn-carte { background:var(--hn-blanc); border-radius:var(--hn-r-carte); } .hn-carte--pad { padding:26px 28px; } .hn-carte--pad-sm { padding:24px; } .hn-carte--flux { overflow:hidden; } .hn-carte__tete { padding:22px 26px; display:flex; align-items:center; justify-content:space-between; gap:16px; border-bottom:1px solid var(--hn-trait-2); } .hn-carte__titre { font-size:17px; font-weight:700; } .hn-carte__sous { font-size:13.5px; color:var(--hn-gris-2); margin-top:3px; } .hn-carte__corps { padding:24px 26px; } .hn-bloc-titre { font-size:16px; font-weight:700; margin-bottom:16px; } .hn-sec-titre { font-size:17px; font-weight:700; } .hn-etiquette { font-size:12.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--hn-gris); margin-bottom:16px; } .hn-filet { height:1px; background:var(--hn-trait-2); } .hn-sous { margin: 0; font-size:14.5px; color:var(--hn-gris-2); } .hn-texte { margin:0; font-size:15px; line-height:1.65; color:var(--hn-gris); max-width:960px; } .hn-texte--lg { font-size:15.5px; line-height:1.75; } /* ── Boutons ─────────────────────────────────────────────────────── */ .hn-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; border:1px solid transparent; border-radius:var(--hn-r-pilule); font:inherit; font-size:14.5px; font-weight:600; padding:11px 20px; cursor:pointer; white-space:nowrap; text-align:center; background:var(--hn-blanc); color:var(--hn-encre); } .hn-btn:hover { color:var(--hn-encre); } .hn-btn--mag { background:var(--hn-mag); color:#fff; } .hn-btn--mag:hover { background:var(--hn-mag-fonce); color:#fff; } .hn-btn--doux { background:var(--hn-mag-clair); color:var(--hn-mag-fonce); } .hn-btn--doux:hover { background:#F3E4EE; color:var(--hn-mag-fonce); } .hn-btn--contour { border-color:var(--hn-bord); background:var(--hn-blanc); } .hn-btn--contour:hover { border-color:var(--hn-tiret); background:var(--hn-brume); } .hn-btn--navy { background:var(--hn-navy); color:#fff; } .hn-btn--navy:hover { background:#2A2A55; color:#fff; } .hn-btn--wr { background:var(--hn-wr); color:#fff; } .hn-btn--wr:hover { background:var(--hn-wr-2); color:#fff; } .hn-btn--blanc { background:#fff; color:var(--hn-mag-fonce); } .hn-btn--blanc:hover { background:#fff; color:var(--hn-mag); } .hn-btn--danger { border-color:var(--hn-rouge); color:var(--hn-rouge); background:transparent; } .hn-btn--danger:hover { background:var(--hn-rouge); color:#fff; } .hn-btn--sm { font-size:13.5px; padding:9px 15px; } .hn-btn--lg { font-size:15px; padding:13px 24px; } .hn-btn--bloc { display:flex; width:100%; } .hn-btn[disabled], .hn-btn.est-inerte { opacity:.55; cursor:not-allowed; } .hn-lien-fort { font-size:14px; font-weight:600; color:var(--hn-mag); } /* ── Pilules de filtre ───────────────────────────────────────────── */ .hn-pilules { display:flex; gap:10px; flex-wrap:wrap; } .hn-pilule { display:inline-flex; align-items:center; gap:7px; border:1px solid var(--hn-bord); background:var(--hn-blanc); color:var(--hn-encre-2); font:inherit; font-size:14px; font-weight:600; padding:9px 16px; border-radius:var(--hn-r-pilule); cursor:pointer; } .hn-pilule:hover { border-color:var(--hn-tiret); color:var(--hn-encre); } .hn-pilule.est-actif { background:var(--hn-mag); border-color:var(--hn-mag); color:#fff; } .hn-pilule.est-actif:hover { color:#fff; } /* ⚠️ L'ÉTAT VISUEL SUIT LA CASE, PAS UNE CLASSE CALCULÉE AU RENDU. `.est-actif` était posée par le serveur d'après la valeur en base. Au clic, la case se cochait bien — mais la pilule gardait exactement la même apparence jusqu'au rechargement de la page. On cliquait, rien ne bougeait, on recliquait : la sélection paraissait impossible alors qu'elle fonctionnait. ⚠️ `input:checked + label`, PAS `:has()`. `:has()` aurait permis de garder la case DANS le label, mais il faut des navigateurs de 2023 et plus. Le sélecteur de frère adjacent fonctionne partout depuis toujours : la case est simplement sortie du label, reliée par `for` / `id`. */ .hn-pilule--choix { user-select: none; } .hn-pilule__case { position: absolute; opacity: 0; width: 0; height: 0; } .hn-pilule__case:checked + .hn-pilule--choix { background: var(--hn-mag-clair); border-color: var(--hn-mag); color: var(--hn-mag-fonce); } .hn-pilule__case:focus-visible + .hn-pilule--choix { outline: 2px solid var(--hn-mag); outline-offset: 2px; } /* Conservée : d'autres écrans posent encore l'état côté serveur. */ .hn-pilule--choix.est-actif { background:var(--hn-mag-clair); border-color:var(--hn-mag); color:var(--hn-mag-fonce); } /* ── Champs conditionnels ──────────────────────────────────────────── ⚠️ MASQUÉS SEULEMENT SI LE SCRIPT A PRIS LA MAIN. La classe `hn-cond--actif` est posée par `js/app.js` au chargement. Sans JavaScript, elle n'existe pas et TOUS les champs restent visibles : on voit le TJM freelance à côté du salaire annuel, ce qui est un peu chargé mais parfaitement utilisable. Masquer par défaut aurait rendu ces champs inaccessibles dès que le script échoue. */ .hn-cond--actif .hn-cond { display: none; } .hn-cond--actif .hn-cond.est-visible { display: block; } /* ── Badges d'état ───────────────────────────────────────────────── */ .hn-badge { display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:700; padding:6px 13px; border-radius:var(--hn-r-pilule); white-space:nowrap; background:var(--hn-trait-3); color:var(--hn-gris); } .hn-badge--mag { background:var(--hn-mag-clair); color:var(--hn-mag-fonce); } .hn-badge--bleu { background:var(--hn-bleu-pale); color:var(--hn-bleu); } .hn-badge--vert { background:var(--hn-vert-pale); color:var(--hn-vert); } .hn-badge--rouge { background:var(--hn-rouge-pale); color:var(--hn-rouge); } .hn-badge--orange { background:var(--hn-orange-pale); color:var(--hn-orange); } .hn-badge--wr { background:var(--hn-wr-pale); color:var(--hn-wr-2); } .hn-badge--gris { background:var(--hn-trait-3); color:var(--hn-gris); } /* ── Bandeau d'accueil ───────────────────────────────────────────── */ .hn-hero { background:linear-gradient(112deg,#C73E9B 0%,#7B2E60 100%); border-radius:18px; padding:34px 38px; display:flex; align-items:center; justify-content:space-between; gap:34px; } .hn-hero__titre { font-size:27px; font-weight:700; color:#fff; letter-spacing:-.6px; margin-bottom:8px; } .hn-hero__sous { font-size:15.5px; color:rgba(255,255,255,.82); max-width:640px; line-height:1.6; margin:0; } .hn-hero__cta { flex:none; } .hn-hero--wr { background:linear-gradient(112deg,#5B21B6 0%,#6D28D9 60%,#A78BFA 100%); } .hn-hero__marque { display:flex; align-items:center; gap:11px; margin-bottom:10px; font-size:15px; font-weight:700; color:#fff; } .hn-hero__marque-ico { width:38px; height:38px; border-radius:12px; background:rgba(255,255,255,.18); color:#fff; display:flex; align-items:center; justify-content:center; font-size:17px; } .hn-hero__actions { flex:none; display:flex; flex-direction:column; gap:10px; } .hn-hero__ghost { display:inline-flex; align-items:center; justify-content:center; gap:8px; border:1px solid rgba(255,255,255,.45); color:#fff; font-size:14.5px; font-weight:600; padding:12px 24px; border-radius:var(--hn-r-pilule); white-space:nowrap; } .hn-hero__ghost:hover { background:rgba(255,255,255,.12); color:#fff; } /* ⚠️ LE CHAMP A BESOIN DE SA PROPRE MARGE HAUTE. `.hn-hero__sous` est un `

` remis à `margin: 0` — comme tous les paragraphes de l'espace, pour que les piles gèrent l'espacement par leur `gap`. Mais le bandeau n'est pas une pile : rien ne séparait donc le texte du champ, qui venait s'y coller. ⚠️ UNE MARGE ICI, PAS UNE MARGE BASSE SUR LE PARAGRAPHE. Le paragraphe sert dans tous les bandeaux ; le champ n'existe que dans celui de l'aide. C'est à l'élément exceptionnel de porter l'exception, sinon les autres bandeaux gagnent un vide en bas. */ .hn-hero__champ { margin-top: 22px; width: 100%; max-width: 430px; display: flex; align-items: center; gap: 11px; padding: 0 18px; border-radius: var(--hn-r-pilule); background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .22); font-size:14.5px; color: #fff; transition: background .15s, border-color .15s; } .hn-hero__champ:hover { background: rgba(255, 255, 255, .22); } /* ⚠️ L'ANNEAU DE FOCUS EST SUR L'ENVELOPPE, PAS SUR L'INPUT. L'input est transparent et sans bordure : son contour natif se dessinait à l'intérieur de la pilule, décalé de quelques pixels — on voyait un rectangle dans un arrondi. `:focus-within` le porte sur le conteneur, qui a la bonne forme. */ .hn-hero__champ:focus-within { background: rgba(255, 255, 255, .26); border-color: rgba(255, 255, 255, .55); box-shadow: 0 0 0 3px rgba(255, 255, 255, .18); } .hn-hero__champ .ico { flex: none; color: rgba(255, 255, 255, .8); font-size:15px; } .hn-hero__champ input { flex: 1; min-width: 0; padding: 13px 0; border: 0; outline: 0; background: transparent; font: inherit; color: #fff; } .hn-hero__champ input::placeholder { color: rgba(255, 255, 255, .72); } /* La croix native du champ de recherche est noire sur fond magenta. */ .hn-hero__champ input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; width: 14px; height: 14px; cursor: pointer; background: rgba(255, 255, 255, .75); mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'%3E%3Cline x1='5' y1='5' x2='19' y2='19'/%3E%3Cline x1='19' y1='5' x2='5' y2='19'/%3E%3C/svg%3E") center / contain no-repeat; } @media (max-width:900px) { .hn-hero { flex-direction:column; align-items:flex-start; gap:20px; padding:26px; } .hn-hero__titre { font-size:22px; } } /* ── Tuiles de chiffres ──────────────────────────────────────────── */ .hn-stat { background:var(--hn-blanc); border-radius:var(--hn-r-carte); padding:22px; } .hn-stat__tete { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; } .hn-stat__ico { width:38px; height:38px; border-radius:12px; background:var(--hn-mag-clair); color:var(--hn-mag); display:flex; align-items:center; justify-content:center; font-size:17px; } .hn-stat__delta { font-size:12.5px; font-weight:700; color:var(--hn-vert); } .hn-stat__delta--neutre { color:var(--hn-gris-4); } .hn-stat__delta--baisse { color:var(--hn-rouge); } .hn-stat__v { font-size:32px; font-weight:700; letter-spacing:-1px; } .hn-stat__l { font-size:13.5px; color:var(--hn-gris-2); margin-top:3px; } /* ── Rangées ─────────────────────────────────────────────────────── */ .hn-ligne { padding:18px 26px; border-bottom:1px solid var(--hn-trait-3); display:grid; gap:18px; align-items:center; } .hn-ligne:last-child { border-bottom:0; } .hn-ligne--dash { grid-template-columns:minmax(0,1fr) 150px 130px 120px; } .hn-ligne--relation { grid-template-columns:minmax(0,1fr) 130px 130px 150px 250px; gap:20px; padding:22px 26px; } .hn-ligne__t { font-size:15.5px; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .hn-ligne__sub { font-size:13px; color:var(--hn-gris-2); margin-top:2px; } .hn-ligne__date { font-size:14px; color:var(--hn-gris); font-variant-numeric:tabular-nums; } .hn-ligne__metric { font-size:14.5px; font-weight:700; } .hn-ligne__badge { justify-self:start; } @media (max-width:1100px) { .hn-ligne--dash, .hn-ligne--relation { grid-template-columns:minmax(0,1fr); gap:10px; } } /* ── Tableau ─────────────────────────────────────────────────────── */ .hn-tab__entete { display:grid; gap:16px; padding:16px 26px; background:var(--hn-brume); border-top:1px solid var(--hn-trait); border-bottom:1px solid var(--hn-trait); font-size:12.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--hn-gris); } .hn-tab__ligne { display:grid; gap:16px; padding:18px 26px; border-bottom:1px solid var(--hn-trait-3); align-items:center; font-size:14.5px; } .hn-tab__ligne:hover { background:var(--hn-brume); } .hn-tab__ref { font-weight:700; color:var(--hn-mag-fonce); } .hn-tab__num { font-weight:700; } .hn-tab__doux { color:var(--hn-gris); } .hn-tab__date { color:var(--hn-gris); font-variant-numeric:tabular-nums; } .hn-tab__pied { padding:16px 26px; display:flex; align-items:center; justify-content:space-between; gap:16px; font-size:13.5px; color:var(--hn-gris-2); } /* Grilles nommées — la maquette fixe des largeurs par écran. */ .hn-g-candidatures { grid-template-columns:90px minmax(0,1fr) 210px 150px 150px 130px; } .hn-g-factures { grid-template-columns:170px minmax(0,1fr) 150px 130px 120px; } .hn-g-wr { grid-template-columns:minmax(0,1fr) 160px 100px 120px 150px; } .hn-g-offrecv { grid-template-columns:minmax(0,1fr) 100px 110px 120px; } @media (max-width:1100px) { .hn-tab__entete { display:none; } .hn-tab__ligne { grid-template-columns:minmax(0,1fr) !important; gap:8px; } } .hn-pager { display:flex; gap:8px; } .hn-pager a, .hn-pager span { min-width:34px; height:34px; border-radius:9px; display:flex; align-items:center; justify-content:center; font-size:13.5px; font-weight:700; background:var(--hn-trait-3); color:var(--hn-encre-2); } .hn-pager a:hover { background:var(--hn-trait); color:var(--hn-encre); } .hn-pager .est-actif { background:var(--hn-mag); color:#fff; } /* ── Faits en tirets ─────────────────────────────────────────────── */ .hn-faits { display:flex; gap:12px; flex-wrap:wrap; } .hn-faits--grille { display:grid; grid-template-columns:repeat(4,1fr); } .hn-fait { border:1px dashed var(--hn-tiret); border-radius:11px; padding:11px 16px; min-width:118px; } .hn-fait--fort { border-color:var(--hn-mag); background:var(--hn-mag-rose); } .hn-fait__v { font-size:15px; font-weight:700; } .hn-fait--fort .hn-fait__v { color:var(--hn-mag-fonce); } .hn-fait__l { font-size:13px; color:var(--hn-gris-2); } @media (max-width:760px) { .hn-faits--grille { grid-template-columns:1fr 1fr; } } /* ── Activité ────────────────────────────────────────────────────── */ .hn-activite { display:flex; flex-direction:column; gap:15px; } .hn-activite__item { display:flex; gap:13px; } .hn-activite__ico { flex:none; width:32px; height:32px; border-radius:10px; background:var(--hn-mag-clair); color:var(--hn-mag); display:flex; align-items:center; justify-content:center; font-size:14px; } .hn-activite__ico--bleu { background:var(--hn-bleu-pale); color:var(--hn-bleu); } .hn-activite__ico--vert { background:var(--hn-vert-pale); color:var(--hn-vert); } .hn-activite__ico--wr { background:var(--hn-wr-pale); color:var(--hn-wr); } .hn-activite__t { font-size:14px; line-height:1.5; color:var(--hn-encre-2); } .hn-activite__h { font-size:12.5px; color:var(--hn-gris-4); margin-top:2px; } /* ── Encart sombre ───────────────────────────────────────────────── */ .hn-promo { display:block; background:var(--hn-navy); border-radius:var(--hn-r-carte); padding:24px; color:#fff; } .hn-promo:hover { color:#fff; background:#23234A; } .hn-promo--fixe:hover { background:var(--hn-navy); } .hn-promo__ico { width:42px; height:42px; border-radius:13px; background:rgba(255,255,255,.1); color:var(--hn-mag-vif); display:flex; align-items:center; justify-content:center; font-size:19px; margin-bottom:15px; } .hn-promo__t { font-size:18px; font-weight:700; margin-bottom:7px; } .hn-promo p { margin:0 0 15px; font-size:14px; line-height:1.6; color:var(--hn-navy-txt); } .hn-promo__lien { font-size:14px; font-weight:700; color:var(--hn-mag-vif); } .hn-promo__sur { font-size:12.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--hn-navy-txt2); margin-bottom:14px; } .hn-promo__chiffre { font-size:38px; font-weight:700; letter-spacing:-1.2px; color:#fff; } .hn-promo__note { font-size:14px; color:var(--hn-navy-txt); margin-bottom:20px; } .hn-promo__rows { display:flex; flex-direction:column; gap:11px; padding-top:18px; border-top:1px solid rgba(255,255,255,.12); } .hn-promo__row { display:flex; justify-content:space-between; gap:16px; font-size:14px; } .hn-promo__row span:first-child { color:var(--hn-navy-txt); } .hn-promo__row span:last-child { font-weight:700; color:#fff; } .hn-promo__mail { margin-top:16px; font-size:13.5px; color:var(--hn-navy-txt2); text-align:center; } /* ── Notes encadrées ─────────────────────────────────────────────── */ .hn-note { border-radius:var(--hn-r-tuile); padding:18px 20px; display:flex; gap:14px; align-items:flex-start; font-size:14.5px; line-height:1.6; color:var(--hn-encre-2); background:var(--hn-bleu-pale); border:1px dashed var(--hn-bleu); } .hn-note .ico { flex:none; color:var(--hn-bleu); font-size:19px; margin-top:1px; } .hn-note--mag { background:var(--hn-lavande); border-color:var(--hn-mag); } .hn-note--mag .ico { color:var(--hn-mag); } .hn-note--wr { background:var(--hn-wr-clair); border-color:var(--hn-wr-3); } .hn-note--wr .ico { color:var(--hn-wr); } .hn-note--orange { background:var(--hn-orange-pale); border-color:var(--hn-etoile); } .hn-note--orange .ico { color:var(--hn-orange); } .hn-note--rouge { background:var(--hn-rouge-pale); border-color:var(--hn-rouge); } .hn-note--rouge .ico { color:var(--hn-rouge); } .hn-note--plat { background:var(--hn-brume); border:0; padding:18px 26px; font-size:13.5px; } .hn-note p { margin:0; } .hn-note strong { display:block; } /* ── Formulaires ─────────────────────────────────────────────────── */ .hn-champ { display:block; } .hn-label { display:block; font-size:14.5px; font-weight:700; margin-bottom:9px; color:var(--hn-encre); } .hn-requis { color:var(--hn-requis); } .hn-aide { font-size:13.5px; color:var(--hn-gris-2); margin-top:9px; } .hn-input, .hn-select, .hn-textarea { width:100%; border:1px solid var(--hn-bord); border-radius:var(--hn-r-champ); padding:14px 16px; font:inherit; font-size:15px; background:var(--hn-blanc); color:var(--hn-encre); } .hn-input::placeholder, .hn-textarea::placeholder { color:var(--hn-gris-4); } .hn-input:focus, .hn-select:focus, .hn-textarea:focus { outline:0; border:1.5px solid var(--hn-mag); box-shadow:0 0 0 4px rgba(199,62,155,.08); } .hn-textarea { min-height:130px; line-height:1.7; resize:vertical; } .hn-textarea--haut { min-height:220px; } .hn-select { appearance:none; cursor:pointer; padding-right:40px; /* ⚠️ Chevron en data:, pas en `style` : `style-src` bloque l'attribut, `img-src data:` est autorisé. */ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%239A9AAE' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 16px center; } .hn-champs { display:grid; gap:18px; } .hn-champs--2 { grid-template-columns:1fr 1fr; } .hn-champs--3 { grid-template-columns:1fr 1fr 1fr; } @media (max-width:900px) { .hn-champs--2, .hn-champs--3 { grid-template-columns:minmax(0,1fr); } } .hn-form-pile { display:flex; flex-direction:column; gap:24px; } .hn-form-actions { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:22px; flex-wrap:wrap; } .hn-form-actions__droite { display:flex; gap:12px; margin-left:auto; } /* Interrupteur — un vrai . ⚠️ Pas un

cliquable : sans champ, rien n'est envoyé au POST et la valeur ne survit pas au rechargement. */ .hn-switch { display:flex; align-items:flex-start; gap:14px; cursor:pointer; background:var(--hn-lavande); border-radius:var(--hn-r-tuile); padding:18px 20px; } .hn-switch--nu { background:transparent; padding:0; } .hn-switch input { position:absolute; opacity:0; width:0; height:0; } /* ⚠️ LE POUCE DOIT ÊTRE `display: block` — SANS ÇA IL N'EXISTE PAS. C'est un ``, donc `inline` par défaut, et `width` / `height` ne s'appliquent PAS à une boîte inline. Le pouce avait une taille nulle : l'interrupteur se réduisait à une pilule de couleur unie, sans rien dedans. Impossible de savoir s'il était allumé ou éteint autrement qu'à la teinte — et la piste, elle, était bien visible, ce qui donnait l'impression d'un composant « à moitié dessiné » plutôt que cassé. La piste est enfant direct d'un conteneur flex : elle, le navigateur la blockifie tout seul. C'est ce qui rendait le défaut asymétrique et difficile à repérer. */ .hn-switch__piste { flex: none; display: block; box-sizing: content-box; width: 40px; height: 20px; padding: 3px; border-radius: 999px; margin-top: 1px; background: var(--hn-tiret); box-shadow: inset 0 0 0 1px rgba(34, 34, 59, .07); transition: background .18s cubic-bezier(.4, 0, .2, 1); } .hn-switch__pouce { display: block; width: 20px; height: 20px; border-radius: 50%; background: #fff; /* Une ombre portée courte : sans elle, le pouce blanc disparaît sur la piste éteinte, qui est claire elle aussi. */ box-shadow: 0 1px 3px rgba(34, 34, 59, .28), 0 0 0 .5px rgba(34, 34, 59, .05); transition: transform .18s cubic-bezier(.4, 0, .2, 1); } .hn-switch:hover .hn-switch__piste { background: var(--hn-gris-5); } .hn-switch input:checked + .hn-switch__piste { background: var(--hn-mag); box-shadow: none; } .hn-switch:hover input:checked + .hn-switch__piste { background: var(--hn-mag-fonce); } .hn-switch input:checked + .hn-switch__piste .hn-switch__pouce { transform: translateX(20px); } /* ⚠️ `:focus-visible`, PAS `:focus` : le contour n'apparaît qu'au clavier. Au clic souris il ferait croire à une erreur de saisie. */ .hn-switch input:focus-visible + .hn-switch__piste { box-shadow: 0 0 0 3px rgba(199, 62, 155, .3); } .hn-switch input:disabled + .hn-switch__piste { opacity: .5; } .hn-switch:has(input:disabled) { cursor: not-allowed; } .hn-switch--wr input:checked + .hn-switch__piste { background: var(--hn-wr); } .hn-switch--wr:hover input:checked + .hn-switch__piste { background: var(--hn-wr-2); } .hn-switch__t { font-size:15px; font-weight:700; margin-bottom:3px; } .hn-switch__d { font-size:14px; color:var(--hn-gris); line-height:1.55; } /* Variante compacte — la course du pouce se recalcule avec la piste : largeur de contenu (34 px) moins le diamètre (17 px) = 17 px. */ .hn-switch__piste--sm { width: 34px; height: 17px; } .hn-switch__piste--sm .hn-switch__pouce { width: 17px; height: 17px; } .hn-switch input:checked + .hn-switch__piste--sm .hn-switch__pouce { transform: translateX(17px); } .hn-case { display:flex; align-items:flex-start; gap:13px; cursor:pointer; } .hn-case input { position:absolute; opacity:0; width:0; height:0; } .hn-case__boite { flex:none; width:20px; height:20px; border-radius:5px; margin-top:2px; border:1.5px solid var(--hn-tiret); background:#fff; display:flex; align-items:center; justify-content:center; color:#fff; font-size:12px; } .hn-case input:checked + .hn-case__boite { background:var(--hn-mag); border-color:var(--hn-mag); } .hn-case input:not(:checked) + .hn-case__boite .ico { visibility:hidden; } .hn-case__t { font-size:14.5px; line-height:1.6; color:var(--hn-encre-2); } .hn-tags { display:flex; gap:9px; flex-wrap:wrap; } .hn-tag { display:inline-flex; align-items:center; gap:8px; background:var(--hn-trait-3); color:var(--hn-encre-2); font-size:14px; font-weight:600; padding:9px 16px; border-radius:var(--hn-r-pilule); } .hn-tag--mag { background:var(--hn-mag-clair); color:var(--hn-mag-fonce); } .hn-tag--masque .ico { color:var(--hn-mag); font-size:12px; } .hn-depot { border:2px dashed var(--hn-mag); background:var(--hn-mag-rose); border-radius:var(--hn-r-tuile); padding:26px; display:flex; align-items:center; gap:18px; } .hn-depot--centre { flex-direction:column; text-align:center; padding:30px; gap:8px; } .hn-depot__ico { flex:none; width:46px; height:46px; border-radius:12px; background:#fff; color:var(--hn-mag); display:flex; align-items:center; justify-content:center; font-size:20px; } .hn-depot__nom { font-size:15px; font-weight:700; } .hn-depot__meta { font-size:13.5px; color:var(--hn-gris-2); margin-top:3px; } .hn-depot input[type=file] { font:inherit; font-size:13.5px; color:var(--hn-gris); max-width:100%; } /* ── Étapes ──────────────────────────────────────────────────────── */ .hn-etapes { display: flex; gap: 10px; } /* ⚠️ LES ÉTAPES OCCUPENT TOUTE LA LARGEUR, AU-DESSUS DES COLONNES. Placées dans la colonne de gauche, cinq libellés se partageaient 60 % de la largeur : les derniers se réduisaient à « 4. Desc… », « 5. Par… » et l'on croyait qu'il en manquait. Le repère de progression d'un tunnel appartient au tunnel entier, pas à l'une de ses colonnes. */ .hn-etape { flex: 1 1 0; min-width: 0; display: block; color: inherit; } .hn-etape__t { display: block; margin-bottom: 10px; font-size:14.5px; font-weight: 700; color: var(--hn-gris-4); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hn-etape__barre { display: block; height: 4px; border-radius: 2px; background: var(--hn-trait-2); transition: background .15s; } .hn-etape.est-faite .hn-etape__t { color: var(--hn-mag-fonce); } .hn-etape.est-faite .hn-etape__barre { background: var(--hn-lilas); } .hn-etape.est-actif .hn-etape__t { color: var(--hn-mag); } .hn-etape.est-actif .hn-etape__barre { background: var(--hn-mag); } /* Une étape franchie est un lien : elle doit se voir comme tel au survol. */ a.hn-etape:hover .hn-etape__t { color: var(--hn-mag); } a.hn-etape:hover .hn-etape__barre { background: var(--hn-mag-vif); } /* ⚠️ EN DESSOUS DE 900 px, LES LIBELLÉS NE TIENNENT PLUS. Cinq colonnes de 60 px ne montrent que « 1. In… ». On garde les barres — la progression reste lisible — et le titre de l'étape est de toute façon répété en tête du formulaire. */ @media (max-width: 900px) { .hn-etapes { gap: 6px; } .hn-etape__t { display: none; } } /* ── Onglets soulignés ───────────────────────────────────────────── */ .hn-onglets { display:flex; gap:26px; border-bottom:1px solid var(--hn-bord); margin-bottom:24px; overflow-x:auto; } /* ⚠️ DANS UNE PILE, C'EST LE `gap` QUI ESPACE — PAS LA MARGE. Les deux s'additionnaient : 24 px de marge propre aux onglets plus 20 px de gouttière faisaient 44 px, presque le double de l'écart voulu. La marge n'existe que pour les écrans dont le conteneur n'est pas une pile ; là où il en est une, on la neutralise. */ .hn-pile > .hn-onglets { margin-bottom: 0; } .hn-onglet { padding-bottom:12px; border-bottom:3px solid transparent; margin-bottom:-1px; white-space:nowrap; display:flex; align-items:center; gap:7px; font-size:15px; font-weight:700; color:var(--hn-gris-2); } .hn-onglet:hover { color:var(--hn-encre); } .hn-onglet.est-actif { border-bottom-color:var(--hn-mag); color:var(--hn-mag-fonce); } .hn-onglet__n { font-size:12.5px; font-weight:700; color:#fff; background:var(--hn-gris-4); border-radius:var(--hn-r-pilule); padding:2px 8px; } .hn-onglet.est-actif .hn-onglet__n { background:var(--hn-mag); } /* ── Cartes CV ───────────────────────────────────────────────────── */ .hn-cv { background:var(--hn-blanc); border:1px solid var(--hn-trait); border-radius:var(--hn-r-carte); padding:28px; display:flex; flex-direction:column; align-items:center; text-align:center; } .hn-cv.est-nouveau { border-color:var(--hn-mag); } .hn-cv__ava { width:56px; height:56px; border-radius:50%; background:var(--hn-trait-3); color:var(--hn-gris-4); display:flex; align-items:center; justify-content:center; font-size:24px; margin-bottom:14px; } .hn-cv__id { font-size:17px; font-weight:700; } .hn-cv__src { font-size:14px; color:var(--hn-gris-2); margin-bottom:14px; } .hn-cv__mot { margin:14px 0 0; font-size:14.5px; line-height:1.6; color:var(--hn-gris); max-width:420px; } .hn-cv__faits { display:flex; gap:12px; margin:18px 0; flex-wrap:wrap; justify-content:center; } .hn-cv__actions { display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:center; } /* ── Relations ───────────────────────────────────────────────────── */ .hn-rel__id { display:flex; align-items:center; gap:14px; min-width:0; } .hn-rel__pastille { flex:none; width:46px; height:46px; border-radius:12px; background:var(--hn-lilas); color:#7B2E60; display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:700; } .hn-rel__nom { font-size:16.5px; font-weight:700; } .hn-rel__meta { font-size:13.5px; color:var(--hn-gris-2); } .hn-rel__n { font-size:16px; font-weight:700; } .hn-rel__n--vert { color:var(--hn-vert); } .hn-rel__nl { font-size:12.5px; color:var(--hn-gris-2); } .hn-rel__actions { display:flex; gap:10px; justify-content:flex-end; flex-wrap:wrap; } /* ── Messagerie ──────────────────────────────────────────────────── */ .hn-fils { background:var(--hn-blanc); border-radius:var(--hn-r-carte); overflow:hidden; } .hn-fils__recherche { padding:18px 20px; } .hn-fils__recherche .hn-recherche { max-width:none; margin:0; } .hn-fil { padding:16px 20px; border-top:1px solid var(--hn-trait-3); display:flex; gap:12px; color:var(--hn-encre); } .hn-fil:hover { background:var(--hn-brume); color:var(--hn-encre); } .hn-fil.est-actif { background:var(--hn-mag-clair); } .hn-fil__corps { flex:1; min-width:0; } .hn-fil__tete { display:flex; justify-content:space-between; align-items:baseline; gap:8px; } .hn-fil__nom { font-size:14.5px; font-weight:700; } .hn-fil__h { font-size:12px; color:var(--hn-gris-4); flex:none; } .hn-fil__objet { font-size:13px; color:var(--hn-gris-2); margin-top:2px; } .hn-fil__extrait { font-size:13.5px; color:var(--hn-gris); margin-top:5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .hn-fil__point { flex:none; width:9px; height:9px; border-radius:50%; background:var(--hn-mag); margin-top:6px; } .hn-conv { background:var(--hn-blanc); border-radius:var(--hn-r-carte); display:flex; flex-direction:column; min-height:660px; } .hn-conv__tete { padding:20px 26px; border-bottom:1px solid var(--hn-trait-2); display:flex; align-items:center; justify-content:space-between; gap:16px; } .hn-conv__qui { display:flex; align-items:center; gap:12px; min-width:0; } .hn-conv__nom { font-size:16px; font-weight:700; } .hn-conv__objet { font-size:13px; color:var(--hn-gris-2); } .hn-conv__corps { flex:1; padding:26px; display:flex; flex-direction:column; gap:22px; overflow:auto; } .hn-msg { display:flex; flex-direction:column; align-items:flex-start; } .hn-msg--moi { align-items:flex-end; } .hn-msg__tete { display:flex; align-items:center; gap:10px; margin-bottom:8px; } .hn-msg--moi .hn-msg__tete { flex-direction:row-reverse; } .hn-msg__qui { display:flex; align-items:baseline; gap:8px; } .hn-msg__nom { font-size:14.5px; font-weight:700; } .hn-msg__h { font-size:12.5px; color:var(--hn-gris-4); } .hn-msg__bulle { max-width:460px; background:var(--hn-trait-3); color:var(--hn-encre); border-radius:14px; padding:16px 18px; font-size:14.5px; line-height:1.6; } .hn-msg--moi .hn-msg__bulle { background:var(--hn-mag-clair); text-align:right; } .hn-conv__pied { padding:18px 26px; border-top:1px solid var(--hn-trait-2); display:flex; align-items:center; gap:14px; } .hn-conv__pied .hn-input { border-radius:var(--hn-r-pilule); padding:13px 18px; font-size:14.5px; } /* ── Formules ────────────────────────────────────────────────────── */ .hn-plan { background:var(--hn-blanc); border:1.5px solid var(--hn-trait); border-radius:var(--hn-r-carte); padding:28px; } .hn-plan--phare { background:var(--hn-navy); border-color:var(--hn-navy); color:#fff; } .hn-plan--actuel { border-color:var(--hn-mag); } .hn-plan__tete { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; } .hn-plan__nom { font-size:17px; font-weight:700; } .hn-plan__prix-l { display:flex; align-items:baseline; gap:6px; margin-bottom:6px; } .hn-plan__prix { font-size:38px; font-weight:700; letter-spacing:-1.2px; } .hn-plan__per { font-size:14.5px; color:var(--hn-gris-2); } .hn-plan--phare .hn-plan__per, .hn-plan--phare .hn-plan__sous { color:var(--hn-navy-txt); } .hn-plan__sous { font-size:14px; color:var(--hn-gris-2); margin-bottom:20px; } .hn-plan__feats { display:flex; flex-direction:column; gap:11px; margin-bottom:22px; } .hn-plan__feat { display:flex; gap:11px; align-items:flex-start; font-size:14.5px; line-height:1.5; color:var(--hn-encre-2); } .hn-plan__feat .ico { color:var(--hn-vert); font-size:14px; margin-top:3px; } .hn-plan--phare .hn-plan__feat { color:#E9E9F2; } .hn-plan--phare .hn-plan__feat .ico { color:var(--hn-mag-vif); } /* ── FAQ / guides ────────────────────────────────────────────────── */ .hn-faq { border-bottom:1px solid var(--hn-trait-3); } .hn-faq:last-child { border-bottom:0; } .hn-faq > summary { padding:22px 26px; cursor:pointer; list-style:none; display:flex; align-items:flex-start; gap:13px; } .hn-faq > summary::-webkit-details-marker { display:none; } .hn-faq__n { flex:none; font-size:14px; font-weight:700; color:var(--hn-mag); margin-top:2px; } .hn-faq__q { flex:1; min-width:0; font-size:16.5px; font-weight:700; line-height:1.4; } .hn-faq__chev { flex:none; color:var(--hn-gris-4); font-size:14px; margin-top:4px; } .hn-faq[open] .hn-faq__chev { transform:rotate(180deg); } .hn-faq__r { margin:0; padding:0 26px 22px 66px; font-size:15px; line-height:1.7; color:var(--hn-gris); } .hn-guide { border:1px solid var(--hn-trait-2); border-radius:13px; padding:18px; display:flex; gap:14px; align-items:flex-start; color:var(--hn-encre); } .hn-guide:hover { border-color:var(--hn-bord); color:var(--hn-encre); } .hn-guide__ico { flex:none; width:40px; height:40px; border-radius:12px; background:var(--hn-mag-clair); color:var(--hn-mag); display:flex; align-items:center; justify-content:center; font-size:18px; } .hn-guide__t { font-size:15px; font-weight:700; margin-bottom:4px; } .hn-guide__d { font-size:13.5px; color:var(--hn-gris-2); } /* ── Listes latérales ────────────────────────────────────────────── */ .hn-verif { border:1px dashed var(--hn-tiret); border-radius:var(--hn-r-tuile); padding:16px 18px; display:flex; align-items:center; gap:13px; } .hn-verif--ok { border-color:var(--hn-vert); } .hn-verif--ok .ico { color:var(--hn-vert); } .hn-verif--attente { border-color:var(--hn-etoile); } .hn-verif--attente .ico { color:var(--hn-orange); } .hn-verif .ico { color:var(--hn-gris-4); font-size:18px; flex:none; } .hn-verif__t { font-size:14.5px; font-weight:700; } .hn-verif__d { font-size:13px; color:var(--hn-gris-2); } .hn-mini { display:flex; align-items:center; gap:12px; padding:11px 0; border-top:1px dashed var(--hn-trait); } .hn-mini:first-of-type { border-top:0; } .hn-mini__c { flex:1; min-width:0; } .hn-mini__n { font-size:14.5px; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .hn-mini__d { font-size:13px; color:var(--hn-gris-2); } .hn-kv { display:flex; justify-content:space-between; gap:20px; font-size:14.5px; padding:11px 0; border-bottom:1px dashed var(--hn-trait); } .hn-kv:last-child { border-bottom:0; } .hn-kv__k { color:var(--hn-gris); font-weight:600; } .hn-kv__v { font-weight:700; text-align:right; } .hn-kv__v--mag { color:var(--hn-mag-fonce); } .hn-ajout { display:block; margin-top:16px; border:1px dashed var(--hn-tiret); border-radius:var(--hn-r-champ); padding:13px; text-align:center; font-size:14px; font-weight:600; color:var(--hn-mag-fonce); } .hn-ajout:hover { border-color:var(--hn-mag); background:var(--hn-mag-rose); } .hn-danger { background:var(--hn-rouge-pale); border:1px dashed var(--hn-rouge); border-radius:var(--hn-r-carte); padding:22px; } .hn-danger__t { font-size:15.5px; font-weight:700; color:var(--hn-rouge); margin-bottom:7px; } .hn-danger p { margin:0 0 14px; font-size:14px; line-height:1.6; color:var(--hn-encre-2); } /* ── Aperçu / profil ─────────────────────────────────────────────── */ .hn-apercu { border:1px solid var(--hn-trait); border-radius:var(--hn-r-tuile); padding:20px; } .hn-apercu--centre { text-align:center; } .hn-apercu__t { font-size:17px; font-weight:700; margin:14px 0 6px; } .hn-apercu__m { font-size:13.5px; color:var(--hn-gris-2); margin-bottom:14px; } .hn-apercu__lignes { display:flex; flex-direction:column; gap:8px; margin-bottom:16px; } .hn-apercu__l { height:8px; border-radius:4px; background:var(--hn-trait-2); } .hn-apercu__l--80 { width:82%; } .hn-apercu__l--60 { width:60%; } .hn-apercu__fee { display:flex; align-items:center; gap:8px; font-size:14px; font-weight:700; color:var(--hn-mag); } .hn-banniere { height:150px; background:repeating-linear-gradient(135deg,#EDE8FF 0 14px,#DCCDF3 14px 28px); } .hn-profil__corps { padding:0 28px 28px; margin-top:-38px; } .hn-profil__logo { width:82px; height:82px; border-radius:20px; background:#fff; border:3px solid #fff; box-shadow:0 8px 22px rgba(34,34,59,.12); display:flex; align-items:center; justify-content:center; font-size:24px; font-weight:700; color:#7B2E60; } .hn-profil__tete { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin-top:18px; flex-wrap:wrap; } .hn-profil__nom { font-size:26px; font-weight:700; letter-spacing:-.6px; } .hn-profil__meta { font-size:14.5px; color:var(--hn-gris-2); } .hn-profil__texte { margin:20px 0 0; font-size:15.5px; line-height:1.7; color:var(--hn-gris); max-width:680px; } .hn-tuile-chiffre { background:var(--hn-trait-3); border-radius:var(--hn-r-tuile); padding:16px; } .hn-tuile-chiffre__v { font-size:24px; font-weight:700; letter-spacing:-.7px; } .hn-tuile-chiffre__l { font-size:12.5px; color:var(--hn-gris-2); } .hn-compte__tete { display:flex; align-items:center; gap:18px; flex-wrap:wrap; } .hn-compte__nom { font-size:22px; font-weight:700; letter-spacing:-.4px; } /* ── Jauges ──────────────────────────────────────────────────────── */ .hn-jauge { height:8px; border-radius:4px; background:var(--hn-lilas); overflow:hidden; } .hn-jauge--fine { height:6px; border-radius:3px; background:var(--hn-trait-2); } .hn-jauge__v { height:100%; background:var(--hn-mag); border-radius:inherit; } .hn-jauge__v--vert { background:var(--hn-vert); } .hn-jauge__v--orange { background:var(--hn-etoile); } /* ⚠️ PALIERS, PAS UNE LARGEUR EN LIGNE. `style="width:82%"` est bloqué par `style-src 'self'`. Les paliers de 5 % suffisent à lire une proportion. */ .hn-p0{width:0} .hn-p5{width:5%} .hn-p10{width:10%} .hn-p15{width:15%} .hn-p20{width:20%} .hn-p25{width:25%} .hn-p30{width:30%} .hn-p35{width:35%} .hn-p40{width:40%} .hn-p45{width:45%} .hn-p50{width:50%} .hn-p55{width:55%} .hn-p60{width:60%} .hn-p65{width:65%} .hn-p70{width:70%} .hn-p75{width:75%} .hn-p80{width:80%} .hn-p85{width:85%} .hn-p90{width:90%} .hn-p95{width:95%} .hn-p100{width:100%} /* ── État vide ───────────────────────────────────────────────────── */ .hn-vide { background:var(--hn-blanc); border-radius:var(--hn-r-carte); padding:52px 32px; text-align:center; } .hn-vide__ico { width:72px; height:72px; border-radius:50%; margin:0 auto 20px; background:var(--hn-mag-clair); color:var(--hn-mag); display:flex; align-items:center; justify-content:center; font-size:30px; } .hn-vide__ico--ok { background:var(--hn-vert-pale); color:var(--hn-vert); } .hn-vide h2 { font-size:22px; letter-spacing:-.5px; margin-bottom:10px; } .hn-vide p { margin:0 auto 22px; font-size:15.5px; line-height:1.7; color:var(--hn-gris); max-width:520px; } .hn-vide__actions { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; } /* ── Messages flash ──────────────────────────────────────────────── */ .hn-flash { margin:18px 28px -8px; border-radius:var(--hn-r-tuile); padding:14px 18px; display:flex; gap:12px; align-items:flex-start; font-size:14.5px; line-height:1.55; background:var(--hn-vert-pale); color:#14532D; border:1px solid #BFE6CE; } .hn-flash--erreur { background:var(--hn-rouge-pale); color:#7C1027; border-color:#F3C2CC; } .hn-flash--info { background:var(--hn-bleu-pale); color:#0B3A7A; border-color:#C9DCF6; } .hn-flash .ico { flex:none; margin-top:2px; font-size:18px; } .hn-flash p { margin:0; } /* ── Boîte à outils (tiroir) ─────────────────────────────────────── */ .hn-tools { flex:none; width:470px; background:var(--hn-blanc); border-left:1px solid var(--hn-trait); box-shadow:-26px 0 60px rgba(34,34,59,.12); display:flex; flex-direction:column; height:100vh; } .hn-tools__tete { flex:none; padding:22px 26px; border-bottom:1px solid var(--hn-trait-2); display:flex; align-items:center; justify-content:space-between; gap:12px; } .hn-tools__qui { display:flex; align-items:center; gap:12px; min-width:0; } .hn-tools__rond { flex:none; width:34px; height:34px; border-radius:11px; background:var(--hn-bg); color:var(--hn-encre-2); display:flex; align-items:center; justify-content:center; font-size:15px; } .hn-tools__rond:hover { background:var(--hn-trait); color:var(--hn-encre); } .hn-tools__t { font-size:18px; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .hn-tools__s { font-size:13px; color:var(--hn-gris-2); margin-top:2px; } .hn-tools__corps { flex:1; min-height:0; overflow:auto; padding:20px 26px; } .hn-tools__liste { display:flex; flex-direction:column; gap:11px; } .hn-outil { border:1px solid var(--hn-trait); border-radius:13px; padding:16px 18px; display:flex; gap:14px; align-items:flex-start; color:var(--hn-encre); } .hn-outil:hover { border-color:var(--hn-mag); background:var(--hn-mag-rose); color:var(--hn-encre); } .hn-outil__ico { flex:none; width:38px; height:38px; border-radius:11px; background:var(--hn-mag-clair); color:var(--hn-mag); display:flex; align-items:center; justify-content:center; font-size:18px; } .hn-outil__c { flex:1; min-width:0; } .hn-outil__tete { display:flex; align-items:center; gap:9px; margin-bottom:4px; flex-wrap:wrap; } .hn-outil__t { font-size:15px; font-weight:700; } .hn-outil__tag { font-size:11.5px; font-weight:700; padding:3px 9px; border-radius:var(--hn-r-pilule); background:var(--hn-mag-clair); color:var(--hn-mag-fonce); } .hn-outil__tag--bleu { background:var(--hn-bleu-pale); color:var(--hn-bleu); } .hn-outil__d { font-size:13.5px; line-height:1.55; color:var(--hn-gris); } .hn-outil__fl { color:var(--hn-mag); font-size:16px; margin-top:10px; flex:none; } .hn-tools__pied { flex:none; padding:18px 26px; border-top:1px solid var(--hn-trait-2); background:var(--hn-mag-rose); } .hn-tools__quota { display:flex; justify-content:space-between; font-size:13.5px; font-weight:700; margin-bottom:9px; } .hn-tools__quota span:last-child { color:var(--hn-mag-fonce); } .hn-score { background:var(--hn-lavande); border-radius:14px; padding:20px; } .hn-score__tete { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; } .hn-score__l { display:flex; align-items:baseline; gap:8px; margin-bottom:12px; } .hn-score__v { font-size:44px; font-weight:700; letter-spacing:-1.5px; color:var(--hn-mag); } .hn-score__sur { font-size:16px; color:var(--hn-gris-2); } .hn-critere__tete { display:flex; justify-content:space-between; font-size:13.5px; font-weight:600; margin-bottom:7px; } @media (max-width:1280px) { .hn-tools { position:fixed; right:0; top:0; z-index:40; } } @media (max-width:560px) { .hn-tools { width:100%; } } /* ── Mobile ──────────────────────────────────────────────────────── */ /* ════════════════════════════════════════════════════════════════════ MOBILE — la barre latérale devient un tiroir ⚠️ ELLE ÉTAIT EMPILÉE AU-DESSUS DU CONTENU, PAS MASQUÉE. Sous 900 px, la coquille passait en colonne : quatre groupes de navigation, la bascule d'interface et le pied utilisateur occupaient le premier écran entier. Il fallait faire défiler pour atteindre le contenu de la page — à chaque changement d'écran. ⚠️ LE TIROIR GLISSE, IL N'APPARAÎT PAS D'UN COUP. `transform: translateX()` est animé par le compositeur, sans recalcul de mise en page : le mouvement reste fluide même sur un appareil modeste. Animer `left` ou `width` aurait fait recalculer la page à chaque image. ════════════════════════════════════════════════════════════════════ */ /* Hors mobile, rien de tout cela n'existe. */ .hn-burger, .hn-top__marque, .hn-voile, .hn-side__outils { display: none; } @media (max-width: 900px) { .hn-shell { overflow: visible; } .hn-side { position: fixed; left: 0; top: 0; z-index: 60; width: min(310px, 86vw); height: 100vh; border-right: 1px solid var(--hn-trait); box-shadow: 26px 0 60px rgba(34, 34, 59, .18); transform: translateX(-100%); transition: transform .24s cubic-bezier(.4, 0, .2, 1); overflow-y: auto; } .hn-shell--menu .hn-side { transform: translateX(0); } /* ⚠️ REPLIÉE, LA BARRE N'A PLUS DE SENS EN TIROIR : on est déjà en mode « caché par défaut », et 78 px d'icônes seules gaspilleraient le geste d'ouverture. */ .hn-side--mini { width: min(310px, 86vw); } .hn-side--mini .hn-nav__libelle, .hn-side--mini .hn-nav__titre, .hn-side--mini .hn-nav__badge, .hn-side--mini .hn-side__user-txt, .hn-side--mini .hn-side__sortie { display: block; } .hn-side--mini .hn-nav__lien { justify-content: flex-start; padding: 10px 12px; } .hn-side__replier { display: none; } .hn-voile { display: block; position: fixed; inset: 0; z-index: 50; background: rgba(27, 27, 58, .45); opacity: 0; pointer-events: none; transition: opacity .24s ease; } .hn-shell--menu .hn-voile { opacity: 1; pointer-events: auto; } .hn-main { overflow: visible; } /* ── Le bandeau : menu à gauche, marque au centre ──────────────── */ .hn-top { position: sticky; top: 0; height: auto; padding: 12px 14px; gap: 10px; flex-wrap: wrap; } .hn-burger { display: flex; align-items: center; justify-content: center; flex: none; width: 40px; height: 40px; border-radius: 12px; background: var(--hn-bg); color: var(--hn-encre); font-size: 19px; } .hn-burger:hover { background: var(--hn-trait); } .hn-shell--menu .hn-burger { background: var(--hn-mag-clair); color: var(--hn-mag-fonce); } /* ⚠️ LA MARQUE EST CENTRÉE SUR LE BANDEAU, PAS ENTRE SES VOISINS. En simple élément de flex, elle se serait décalée dès que le bouton de menu change de largeur — au premier badge ajouté, par exemple. Sortie du flux et posée à 50 %, elle reste au milieu de l'écran quoi qu'il arrive de ses voisins. */ .hn-top__marque { display: flex; align-items: center; gap: 8px; position: absolute; left: 50%; transform: translateX(-50%); color: var(--hn-navy); pointer-events: auto; } .hn-top__marque .hn-brand__chev { font-size: 17px; letter-spacing: -3px; } .hn-top__marque .hn-brand__nom { font-size: 17px; font-weight: 700; letter-spacing: -.4px; } /* Le titre d'écran passe sur une seconde ligne : le perdre obligerait à deviner où l'on se trouve. */ .hn-top__gauche { order: 3; width: 100%; gap: 10px; } .hn-top__titre { font-size: 17px; } /* Les outils sont rendus dans le tiroir — voir `.hn-side__outils`. */ .hn-top__outils-zone { display: none; } .hn-side__outils { display: flex; flex-direction: column; gap: 10px; padding: 0 18px 16px; border-bottom: 1px solid var(--hn-trait-2); margin-bottom: 12px; } .hn-side__outils .hn-top__outils { justify-content: center; } .hn-side__outils .hn-cloche { width: auto; height: auto; border-radius: var(--hn-r-pilule); padding: 10px 15px; gap: 9px; font-size: 14px; font-weight: 600; } .hn-side__outils .hn-lang { align-self: flex-start; } .hn-side__outils .hn-lang__menu { right: auto; left: 0; } .hn-conv { min-height: auto; } } /* ⚠️ LE TIROIR OUVERT NE DOIT PAS LAISSER DÉFILER LA PAGE DERRIÈRE. Sans ça, un glissement du doigt sur le voile fait défiler le contenu masqué : on ferme le tiroir et l'on se retrouve ailleurs dans la page, sans avoir rien demandé. */ @media (max-width: 900px) { .hn-shell--menu { position: fixed; inset: 0; width: 100%; } } /* ── Impression ──────────────────────────────────────────────────── */ @media print { .hn-side, .hn-top, .hn-tools, .hn-form-actions { display:none !important; } .hn-shell { display:block; height:auto; } .hn-page { padding:0; } .hn-carte { break-inside:avoid; } } /* ── Notifications éphémères ───────────────────────────────────────── ⚠️ `partials/flash.ejs` EST PARTAGÉ avec la vitrine et le backoffice. Il n'est donc pas réécrit pour la maquette : ses classes (`.notifs`, `.notif`) sont reprises ici, aux couleurs Améthyste. Les redéfinir dans le partial aurait cassé les deux autres univers. ⚠️ EN BAS À DROITE, EN POSITION FIXE. En haut de page, le message poussait le contenu au rechargement et la page « sautait ». Après un envoi de formulaire situé en bas, il apparaissait hors de l'écran. */ .hn .notifs { position: fixed; right: 22px; bottom: 22px; z-index: 80; display: flex; flex-direction: column; gap: 10px; max-width: min(420px, calc(100vw - 44px)); } .hn .notif { display: flex; align-items: flex-start; gap: 11px; border-radius: var(--hn-r-tuile); padding: 14px 16px; font-size:14.5px; line-height: 1.55; box-shadow: 0 12px 34px rgba(34,34,59,.16); background: var(--hn-blanc); color: var(--hn-encre); border: 1px solid var(--hn-trait); } .hn .notif--succes { background: var(--hn-vert-pale); color: #14532D; border-color: #BFE6CE; } .hn .notif--erreur { background: var(--hn-rouge-pale); color: #7C1027; border-color: #F3C2CC; } .hn .notif__ico { flex: none; font-size:18px; margin-top: 1px; } .hn .notif__texte { flex: 1; min-width: 0; } .hn .notif__fermer { flex: none; border: 0; background: transparent; cursor: pointer; font: inherit; font-size:19px; line-height: 1; color: inherit; opacity: .55; padding: 0 2px; } .hn .notif__fermer:hover { opacity: 1; } @media (max-width: 560px) { .hn .notifs { left: 16px; right: 16px; bottom: 16px; max-width: none; } } /* ── Pagination partagée ───────────────────────────────────────────── ⚠️ `partials/pagination_num.ejs` EST PARTAGÉ avec la vitrine. Il émet `.pagination-num` ; l'espace connecté ne charge plus la feuille de la vitrine, donc ses cases arrivaient sans style — une rangée de chiffres bruts collés les uns aux autres. */ .hn .pagination-num { display: flex; gap: 8px; flex-wrap: wrap; } .hn .pagination-num a, .hn .pagination-num span { min-width: 34px; height: 34px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size:13.5px; font-weight: 700; background: var(--hn-trait-3); color: var(--hn-encre-2); } .hn .pagination-num a:hover { background: var(--hn-trait); color: var(--hn-encre); } .hn .pagination-num .is-actif { background: var(--hn-mag); color: #fff; } .hn .pagination-num__points { background: transparent; color: var(--hn-gris-4); } /* La note du tiroir, quand l'espace courant n'a pas accès aux outils. */ .hn-tools__note { margin-top: 16px; } /* ════════════════════════════════════════════════════════════════════ TUNNEL PUBLIC — dépôt d'offre sans compte ⚠️ IL NE PORTE NI LA BARRE LATÉRALE NI L'EN-TÊTE DE LA VITRINE. Un tunnel se traverse : chaque lien qui en sort est une occasion de l'abandonner. La maquette ne laisse qu'une marque cliquable et les cinq étapes — c'est délibéré, pas un oubli. ════════════════════════════════════════════════════════════════════ */ .hn-tunnel { min-height: 100vh; display: flex; flex-direction: column; background: var(--hn-bg); } .hn-tunnel__top { flex: none; background: var(--hn-blanc); border-bottom: 1px solid var(--hn-trait); padding: 0 28px; height: var(--hn-top); display: flex; align-items: center; justify-content: space-between; gap: 20px; } .hn-tunnel__corps { flex: 1; padding: 34px 28px 60px; } .hn-tunnel__centre { max-width: 880px; margin: 0 auto; } .hn-tunnel__large { max-width: 1140px; margin: 0 auto; } .hn-tunnel__titre { font-size:30px; font-weight: 700; letter-spacing: -.8px; margin-bottom: 10px; } .hn-tunnel__sous { margin: 0 0 28px; font-size:16px; line-height: 1.7; color: var(--hn-gris); max-width: 640px; } .hn-tunnel__rassure { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 26px; font-size:14px; color: var(--hn-gris-2); } .hn-tunnel__rassure span { display: inline-flex; align-items: center; gap: 8px; } .hn-tunnel__rassure .ico { color: var(--hn-vert); } @media (max-width: 760px) { .hn-tunnel__top { padding: 0 16px; } .hn-tunnel__corps { padding: 22px 16px 44px; } .hn-tunnel__titre { font-size:24px; } } /* ════════════════════════════════════════════════════════════════════ CORRECTIFS DE SPÉCIFICITÉ — à lire avant de toucher aux couleurs ⚠️ `body.hn a { color: … }` ÉCRASAIT TOUS LES COMPOSANTS-LIENS. `body.hn a` pèse (0,1,2) ; une classe seule comme `.hn-btn--mag` ou `.hn-nav__lien` pèse (0,1,0). La règle générique gagnait donc systématiquement, et le résultat se voyait partout : · les entrées de navigation s'affichaient en magenta au lieu de l'encre — toute la barre latérale était rose ; · un `` avait un texte magenta SUR fond magenta : le bouton paraissait vide. « Voir mes offres », « Convertir une offre », « Nous écrire » étaient invisibles, alors que les `