/* AppartSocial · système visuel « Surligneur »
Polices à charger dans le :
*/
:root {
/* Fonds et surfaces */
--jn-paper: #F2F3F5; /* fond des pages */
--jn-paper-2: #E9EBEF; /* fond de l'éditeur, autour de l'A4 */
--jn-surface: #FFFFFF;
--jn-surface-2: #F5F6F8; /* encarts discrets */
--jn-dark: #111318; /* sections sombres, pied de page */
--jn-dark-2: #1C1F27;
--jn-dark-line: #2C303B;
/* Texte */
--jn-ink: #111318;
--jn-ink-2: #2C2F38;
--jn-ink-3: #464A55; /* texte secondaire */
--jn-ink-4: #555A66; /* légendes, mono */
--jn-placeholder: #8A8F9B;
--jn-on-dark: #E7E9EE;
--jn-on-dark-2: #C9CCD6;
--jn-on-dark-3: #9EA3B0;
/* Traits */
--jn-line: #E1E3E8;
--jn-line-2: #ECEDF1;
--jn-field: #D9DCE3;
--jn-btn-line: #D3D6DE;
/* Accent : cobalt (actions) */
--jn-cobalt: #2B44F0;
--jn-cobalt-hover: #1F36D8;
--jn-cobalt-ink: #1F33C9; /* texte cobalt sur fond clair */
--jn-cobalt-soft: #E8EBFF;
--jn-cobalt-tint: #F5F7FF;
--jn-focus: rgba(43, 68, 240, .15);
/* Accent : surligneur */
--jn-lime: #D4F53C;
--jn-lime-hover: #C6EA22;
/* États */
--jn-amber: #F5A524;
--jn-amber-ink: #8A4300;
--jn-amber-soft: #FFF0DB;
--jn-danger: #B42318;
--jn-danger-hover: #962015;
--jn-danger-ink: #8F1D14;
--jn-danger-soft: #FDECEA;
/* Typo */
--jn-font-display: 'Bricolage Grotesque', ui-sans-serif, system-ui, sans-serif;
--jn-font-body: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
--jn-font-mono: 'Geist Mono', ui-monospace, Menlo, Consolas, monospace;
/* Rayons */
--jn-r-btn: 12px;
--jn-r-field: 10px;
--jn-r-card: 18px;
--jn-r-card-lg: 24px;
--jn-r-modal: 22px;
--jn-r-pill: 999px;
/* Ombres */
--jn-shadow-btn: inset 0 1px 0 rgba(255,255,255,.22), 0 10px 24px -10px rgba(43,68,240,.7);
--jn-shadow-card-hover: 0 26px 44px -30px rgba(17,19,24,.45);
--jn-shadow-pop: 0 26px 50px -24px rgba(17,19,24,.45);
--jn-shadow-modal: 0 40px 80px -30px rgba(17,19,24,.55);
--jn-shadow-a4: 0 1px 2px rgba(17,19,24,.06), 0 30px 60px -28px rgba(17,19,24,.35), 0 0 0 1px rgba(17,19,24,.04);
/* Mouvement */
--jn-ease: cubic-bezier(.2,.8,.2,1);
--jn-ease-pop: cubic-bezier(.2,1.3,.4,1);
--jn-fast: .2s;
--jn-mid: .35s;
--jn-slow: .6s;
/* Mise en page */
--jn-container: 1240px;
--jn-gutter: 32px; /* 20px sur téléphone */
}
/* Base */
body { margin: 0; background: var(--jn-paper); color: var(--jn-ink); font-family: var(--jn-font-body); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
*, *::before, *::after { box-sizing: border-box; }
a { color: var(--jn-cobalt); }
a:hover { color: #1A2EC4; }
.jn-container { max-width: var(--jn-container); margin: 0 auto; padding: 0 var(--jn-gutter); }
@media (max-width: 900px) { :root { --jn-gutter: 20px; } }
/* Titres et libellés */
.jn-display { font-family: var(--jn-font-display); font-weight: 700; letter-spacing: -.035em; line-height: 1.04; }
.jn-h1 { font-family: var(--jn-font-display); font-weight: 800; letter-spacing: -.035em; line-height: 1.02; font-size: clamp(42px, 6.4vw, 84px); text-wrap: balance; }
.jn-h2 { font-family: var(--jn-font-display); font-weight: 700; letter-spacing: -.035em; line-height: 1.04; font-size: clamp(36px, 4.6vw, 60px); }
.jn-mono { font-family: var(--jn-font-mono); }
.jn-eyebrow { display: inline-flex; align-items: center; gap: 8px; font: 500 12.5px/1 var(--jn-font-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--jn-ink-3); }
.jn-eyebrow::before { content: ''; width: 8px; height: 8px; border-radius: 2px; background: var(--jn-cobalt); }
/* Boutons */
.jn-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 22px; border-radius: var(--jn-r-btn); border: 1px solid transparent; font: 600 16px/1 var(--jn-font-body); text-decoration: none; cursor: pointer; transition: transform .25s var(--jn-ease), background var(--jn-fast), border-color var(--jn-fast), box-shadow .25s; }
.jn-btn:active { transform: scale(.98); }
.jn-btn--primary { background: var(--jn-cobalt); color: #fff; box-shadow: var(--jn-shadow-btn); }
.jn-btn--primary:hover { background: var(--jn-cobalt-hover); color: #fff; transform: translateY(-2px); }
.jn-btn--primary[disabled] { background: #AEB7F7; box-shadow: none; cursor: not-allowed; transform: none; }
.jn-btn--primary.is-busy { background: #5468F3; cursor: progress; }
.jn-btn--ghost { background: #fff; color: var(--jn-ink); border-color: var(--jn-btn-line); }
.jn-btn--ghost:hover { border-color: var(--jn-ink); color: var(--jn-ink); }
.jn-btn--lime { background: var(--jn-lime); color: var(--jn-ink); }
.jn-btn--lime:hover { background: var(--jn-lime-hover); color: var(--jn-ink); }
.jn-btn--dark { background: var(--jn-ink); color: #fff; }
.jn-btn--danger { background: var(--jn-danger); color: #fff; }
.jn-btn--danger:hover { background: var(--jn-danger-hover); color: #fff; }
.jn-icon-btn { width: 44px; height: 44px; border-radius: 11px; border: 0; background: transparent; color: var(--jn-ink-3); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.jn-icon-btn:hover { background: #ECEEF2; color: var(--jn-ink); }
.jn-icon-btn--danger:hover { background: var(--jn-danger-soft); color: var(--jn-danger); }
/* Icônes (SVG en trait, 24x24) */
.jn-ic { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
/* Champs */
.jn-field { display: flex; flex-direction: column; gap: 6px; }
.jn-label { font-size: 13.5px; font-weight: 600; color: var(--jn-ink-2); }
.jn-input { height: 48px; width: 100%; border-radius: var(--jn-r-field); border: 1.5px solid var(--jn-field); background: #fff; padding: 0 14px; font: 400 16px/1 var(--jn-font-body); color: var(--jn-ink); transition: border-color .15s, box-shadow .15s; }
.jn-input::placeholder { color: var(--jn-placeholder); }
.jn-input:focus { outline: none; border-color: var(--jn-cobalt); box-shadow: 0 0 0 4px var(--jn-focus); }
.jn-input.is-invalid { border-color: var(--jn-danger); box-shadow: 0 0 0 4px rgba(180,35,24,.1); }
textarea.jn-input { height: auto; min-height: 96px; padding: 12px 14px; line-height: 1.5; resize: vertical; }
.jn-help { font-size: 12.5px; color: var(--jn-ink-4); }
.jn-key-input { font: 600 26px/1 var(--jn-font-mono); letter-spacing: .14em; text-transform: uppercase; height: 64px; }
/* Case à cocher */
.jn-check { appearance: none; -webkit-appearance: none; margin: 0; width: 24px; height: 24px; border-radius: 7px; border: 1.5px solid #9EA4B0; background: #fff; display: grid; place-content: center; cursor: pointer; flex: none; transition: background .2s, border-color .2s; }
.jn-check::before { content: ''; width: 12px; height: 7px; border-left: 2.5px solid #fff; border-bottom: 2.5px solid #fff; transform: rotate(-45deg) scale(0); margin-top: -3px; transition: transform .25s cubic-bezier(.2,1.6,.4,1); }
.jn-check:checked { background: var(--jn-cobalt); border-color: var(--jn-cobalt); }
.jn-check:checked::before { transform: rotate(-45deg) scale(1); }
/* Cartes */
.jn-card { background: var(--jn-surface); border: 1px solid var(--jn-line); border-radius: var(--jn-r-card); }
.jn-card--lift { transition: transform var(--jn-mid) var(--jn-ease), box-shadow var(--jn-mid), border-color var(--jn-mid); }
.jn-card--lift:hover { transform: translateY(-4px); box-shadow: var(--jn-shadow-card-hover); border-color: #C9CEDA; }
/* Pastilles et étiquettes */
.jn-pill { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 4px 11px; border-radius: var(--jn-r-pill); font-size: 13.5px; font-weight: 500; }
.jn-pill--ok { background: var(--jn-cobalt-soft); color: var(--jn-cobalt-ink); }
.jn-pill--warn { background: var(--jn-amber-soft); color: var(--jn-amber-ink); }
.jn-tag { display: inline-flex; align-items: center; gap: 4px; height: 34px; padding: 0 4px 0 12px; border-radius: 8px; background: #EEF0FF; color: #1A2A9E; font-size: 14px; font-weight: 500; animation: jn-pop .3s var(--jn-ease-pop) both; }
.jn-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: var(--jn-r-pill); border: 1px solid var(--jn-btn-line); background: #fff; color: var(--jn-ink); font: 500 15px/1 var(--jn-font-body); cursor: pointer; }
.jn-chip[aria-pressed="true"] { background: var(--jn-ink); color: #fff; border-color: var(--jn-ink); }
/* Statuts de candidature */
.jn-status--a-envoyer { background: #fff; border: 1.5px solid #B7BDCA; color: #3C404B; }
.jn-status--envoyee { background: var(--jn-cobalt-soft); color: var(--jn-cobalt-ink); }
.jn-status--relancee { background: var(--jn-amber-soft); color: var(--jn-amber-ink); }
.jn-status--entretien { background: var(--jn-lime); color: var(--jn-ink); }
.jn-status--refus { background: #ECEEF2; color: var(--jn-ink-4); }
.jn-status--acceptee { background: var(--jn-cobalt); color: #fff; }
/* Surligneur (mots-clés, titre de l'accueil) */
.jn-highlight { background: var(--jn-lime); border-radius: 3px; padding: 0 3px; color: var(--jn-ink); box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.jn-missing { text-decoration: underline wavy var(--jn-amber) 2px; text-underline-offset: 4px; }
.jn-hl-draw { background-image: linear-gradient(var(--jn-lime), var(--jn-lime)); background-repeat: no-repeat; background-position: 0 88%; background-size: 0% 38%; animation: jn-hl 1.1s .5s cubic-bezier(.65,0,.25,1) forwards; }
/* Messages */
.jn-error { display: flex; gap: 10px; align-items: flex-start; background: var(--jn-danger-soft); color: var(--jn-danger-ink); border-radius: 12px; padding: 12px 14px; font-size: 14.5px; font-weight: 500; animation: jn-shake .45s cubic-bezier(.36,.07,.19,.97); }
.jn-toast { position: fixed; left: 50%; bottom: 28px; z-index: 70; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; background: var(--jn-ink); color: #fff; border-radius: 14px; padding: 12px 16px 12px 12px; font-weight: 500; font-size: 15px; box-shadow: 0 20px 40px -18px rgba(17,19,24,.6); animation: jn-toast-in .45s var(--jn-ease-pop) both; }
.jn-toast__icon { width: 28px; height: 28px; border-radius: 8px; background: var(--jn-lime); color: var(--jn-ink); display: flex; align-items: center; justify-content: center; }
@media (max-width: 900px) { .jn-toast { left: 12px; right: 12px; bottom: 86px; transform: none; animation-name: jn-toast-in-m; } }
/* Fenêtres */
.jn-scrim { position: fixed; inset: 0; z-index: 60; background: rgba(17,19,24,.45); backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; padding: 20px; animation: jn-fade .2s ease both; }
.jn-modal { background: #fff; border-radius: var(--jn-r-modal); padding: 28px; width: 100%; max-width: 560px; max-height: calc(100vh - 40px); overflow: auto; box-shadow: var(--jn-shadow-modal); animation: jn-pop-in .35s cubic-bezier(.2,1.2,.4,1) both; }
@media (max-width: 900px) {
.jn-scrim { align-items: flex-end; padding: 0; }
.jn-modal { max-width: none; border-radius: 24px 24px 0 0; padding: 10px 18px calc(22px + env(safe-area-inset-bottom)); animation: jn-sheet-up .4s cubic-bezier(.2,.9,.3,1) both; }
.jn-modal::before { content: ''; display: block; width: 40px; height: 5px; border-radius: 9px; background: #D3D6DE; margin: 0 auto 16px; }
}
/* Chargements */
.jn-spinner { width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid rgba(255,255,255,.35); border-top-color: #fff; animation: jn-spin .8s linear infinite; flex: none; }
.jn-skeleton { border-radius: 8px; background: linear-gradient(90deg, #E6E8ED 0%, #F3F4F6 40%, #E6E8ED 80%); background-size: 220% 100%; animation: jn-shimmer 1.4s linear infinite; }
/* Navigation de l'espace */
.jn-tabs { display: flex; gap: 4px; background: #E6E8ED; padding: 4px; border-radius: 13px; }
.jn-tabs a { min-height: 40px; padding: 0 16px; border-radius: 9px; display: inline-flex; align-items: center; gap: 8px; color: var(--jn-ink-3); text-decoration: none; font-weight: 600; font-size: 14.5px; }
.jn-tabs a[aria-current="page"] { background: #fff; color: var(--jn-ink); box-shadow: 0 1px 3px rgba(17,19,24,.12); }
.jn-tabbar { position: sticky; bottom: 0; z-index: 30; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); background: rgba(255,255,255,.94); backdrop-filter: blur(14px); border-top: 1px solid var(--jn-line); }
.jn-tabbar a { min-height: 54px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border-radius: 12px; color: var(--jn-ink-4); text-decoration: none; font-size: 12px; font-weight: 600; }
.jn-tabbar a[aria-current="page"] { color: var(--jn-cobalt); background: #EEF0FF; }
/* Apparition au défilement (navigateurs compatibles uniquement) */
@supports (animation-timeline: view()) {
.jn-reveal { animation: jn-reveal linear both; animation-timeline: view(); animation-range: entry 0% cover 28%; }
}
/* Keyframes */
@keyframes jn-hl { to { background-size: 100% 38%; } }
@keyframes jn-write { from { opacity: 0; transform: translateY(5px); clip-path: inset(0 100% 0 0); } to { opacity: 1; transform: none; clip-path: inset(0 0 0 0); } }
@keyframes jn-type { to { width: 27ch; } }
@keyframes jn-blink { 50% { opacity: 0; } }
@keyframes jn-float { 50% { transform: translateY(-8px); } }
@keyframes jn-ping { from { opacity: .8; transform: scale(.6); } to { opacity: 0; transform: scale(1.6); } }
@keyframes jn-pop { from { opacity: 0; transform: scale(.85); } }
@keyframes jn-pop-in { from { opacity: 0; transform: translateY(12px) scale(.97); } }
@keyframes jn-sheet-up { from { transform: translateY(100%); } }
@keyframes jn-fade { from { opacity: 0; } }
@keyframes jn-reveal { from { opacity: 0; transform: translateY(28px); } }
@keyframes jn-shake { 20% { transform: translateX(-5px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }
@keyframes jn-toast-in { from { opacity: 0; transform: translate(-50%, 16px) scale(.96); } }
@keyframes jn-toast-in-m { from { opacity: 0; transform: translateY(16px); } }
@keyframes jn-spin { to { transform: rotate(360deg); } }
@keyframes jn-shimmer { from { background-position: 120% 0; } to { background-position: -120% 0; } }
@keyframes jn-draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
.jn-hl-draw { background-size: 100% 38%; }
}
/* ── Compléments communs à toutes les pages refaites ─────────────────────── */
/* Un élément masqué par l'attribut `hidden` le reste, quelle que soit la règle
d'affichage de sa classe (les scripts du site s'en servent partout). */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 88px; }
img, svg { max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2.5px solid var(--jn-cobalt); outline-offset: 2px; }
::selection { background: var(--jn-lime); color: var(--jn-ink); }
.jn-sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* Logo : la page et sa pastille surligneur, puis le nom. */
.jn-logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--jn-ink); flex: none; }
.jn-logo:hover { color: var(--jn-ink); }
.jn-logo__nom { font-family: var(--jn-font-display); font-weight: 700; font-size: 23px; letter-spacing: -.04em; line-height: 1; }
.jn-logo svg { flex: none; }
/* Icônes en trait dans les boutons : petit glissement de la flèche au survol. */
.jn-btn .jn-ic { transition: transform .25s; }
.jn-btn--primary:hover .jn-ic--fleche { transform: translateX(3px); }
.jn-btn--primary.is-busy:hover, .jn-btn--primary[disabled]:hover { transform: none; }
.jn-btn--ghost[disabled] { opacity: .55; cursor: not-allowed; }
.jn-btn--block { width: 100%; }
/* Spinner sur fond clair. */
.jn-spinner--dark { border-color: rgba(17,19,24,.2); border-top-color: var(--jn-ink); }
.jn-spinner--cobalt { border-color: rgba(43,68,240,.2); border-top-color: var(--jn-cobalt); }
/* Message positif (pendant de .jn-error). */
.jn-ok { display: flex; gap: 10px; align-items: flex-start; background: var(--jn-cobalt-soft); color: var(--jn-cobalt-ink); border-radius: 12px; padding: 12px 14px; font-size: 14.5px; font-weight: 500; animation: jn-pop-in .35s var(--jn-ease-pop) both; }
.jn-ok a, .jn-error a { color: inherit; font-weight: 600; }
/* ── Menu du compte (profile-menu.js) ── */
/* Hôte :