/* ========================================================================== Prestena — feuille de style Deux thèmes, le JOUR par défaut. Le sombre s'obtient par [data-theme="sombre"] sur , mémorisé d'une visite à l'autre, et se choisit depuis le menu du compte. Toutes les couleurs passent par des variables, donc le basculement ne demande aucune règle en double. Le CV s'affiche dans une vraie fenêtre de document : barre d'onglets, toile grise, page blanche posée dessus avec son ombre. C'est la convention des outils de document, et elle évite qu'un PDF flotte au milieu du vide. ========================================================================== */ :root { --nuit: #F7F8FA; --nuit-2: #FFFFFF; --nuit-3: #FFFFFF; --toile: #E7EAEF; --clair: #0E1420; --doux: #4B5566; --sourd: #6C7788; --tres-sourd: #A8B0BC; --carte: #FFFFFF; --carte-bord: rgba(14, 20, 32, 0.10); --champ: #FFFFFF; --champ-bord: rgba(14, 20, 32, 0.16); --bleu: #2563EB; --bleu-vif: #1D4ED8; --bleu-fond: #E8EEFD; --vert: #0D9668; --vert-fond: #E3F5EE; --ambre: #C98A04; --ambre-fond: #FCF3DA; --rouge: #DC2626; --rouge-fond: #FCEAEA; --grille: rgba(14, 20, 32, 0.035); --ombre: 0 14px 40px rgba(14, 20, 32, 0.12); --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --mono: "IBM Plex Mono", ui-monospace, monospace; --t-xs: 0.8125rem; --t-sm: 0.9375rem; --t-base: 1rem; --t-md: clamp(1.0625rem, 1.15vw, 1.2rem); --t-lg: 1.375rem; --t-xl: clamp(1.75rem, 2.4vw, 2.15rem); --t-2xl: clamp(2rem, 3.6vw, 2.9rem); --t-3xl: clamp(2.6rem, 5.4vw, 4.4rem); --u: 8px; --page: 1360px; --rayon: 10px; --rayon-lg: 16px; } [data-theme="sombre"] { --nuit: #161E2B; --nuit-2: #1D2735; --nuit-3: #26313F; --toile: #10161F; --clair: #F2F5F8; --doux: #96A3B5; --sourd: #6D7B8E; --tres-sourd: #55617244; --carte: rgba(255, 255, 255, 0.055); --carte-bord: rgba(255, 255, 255, 0.13); --champ: rgba(255, 255, 255, 0.05); --champ-bord: rgba(255, 255, 255, 0.14); --bleu: #3B82F6; --bleu-vif: #60A5FA; --bleu-fond: rgba(59, 130, 246, 0.14); --vert: #34D399; --vert-fond: rgba(52, 211, 153, 0.13); --ambre: #FBBF24; --ambre-fond: rgba(251, 191, 36, 0.13); --rouge: #F87171; --rouge-fond: rgba(248, 113, 113, 0.13); --grille: rgba(255, 255, 255, 0.04); --ombre: 0 18px 50px rgba(0, 0, 0, 0.5); } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; min-height: 100vh; font-family: var(--sans); font-size: var(--t-base); line-height: 1.6; color: var(--clair); background: var(--nuit); -webkit-font-smoothing: antialiased; transition: background 0.3s ease, color 0.3s ease; } img { max-width: 100%; display: block; } a { color: var(--bleu-vif); text-underline-offset: 3px; } a:hover { color: var(--clair); } :focus-visible { outline: 2px solid var(--bleu-vif); outline-offset: 3px; border-radius: 4px; } h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.028em; line-height: 1.05; } h1 { font-size: var(--t-3xl); } h2 { font-size: var(--t-2xl); } h3 { font-size: var(--t-lg); letter-spacing: -0.01em; line-height: 1.3; } p { margin: 0 0 1em; } .enveloppe { max-width: var(--page); margin-inline: auto; padding-inline: calc(var(--u) * 3); } .enveloppe--etroit { max-width: 780px; } /* --- Fond ------------------------------------------------------------------ Une grille fine, plus deux figures géométriques qui dérivent lentement. Des formes dessinées plutôt que des taches floues : la page respire sans verser dans le halo dégradé qu'on voit partout. */ .fond { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } .fond__grille { position: absolute; inset: 0; background-image: linear-gradient(var(--grille) 1px, transparent 1px), linear-gradient(90deg, var(--grille) 1px, transparent 1px); background-size: 64px 64px; mask-image: radial-gradient(ellipse 90% 70% at 60% 20%, #000 30%, transparent 80%); -webkit-mask-image: radial-gradient(ellipse 90% 70% at 60% 20%, #000 30%, transparent 80%); } .fond__figure { position: absolute; border: 1px solid var(--carte-bord); opacity: 0.55; } .fond__figure--page { width: 190px; height: 250px; border-radius: 6px; top: 12%; right: 7%; transform: rotate(9deg); animation: flotte 22s ease-in-out infinite; --rot: 9deg; /* lu par l'animation « flotte » */ } .fond__figure--page2 { width: 150px; height: 200px; border-radius: 6px; bottom: 10%; right: 22%; transform: rotate(-13deg); animation: flotte 27s ease-in-out infinite reverse; --rot: -13deg; } .fond__figure--cercle { width: 320px; height: 320px; border-radius: 50%; bottom: -110px; left: -90px; animation: flotte 32s ease-in-out infinite; } /* Des bulles qui montent lentement. Elles éclairent le fond sans rien raconter, et leur taille varie assez pour qu'on n'y lise pas un motif. */ .fond__bulles { position: absolute; inset: 0; } .fond__bulles span { position: absolute; bottom: -140px; border-radius: 50%; background: radial-gradient(circle at 32% 28%, rgba(37, 99, 235, 0.10), rgba(37, 99, 235, 0.05) 55%, transparent 72%); border: 1px solid rgba(37, 99, 235, 0.12); animation: monte-bulle linear infinite; } .fond__bulles span:nth-child(1) { left: 6%; width: 74px; height: 74px; animation-duration: 34s; animation-delay: -2s; } .fond__bulles span:nth-child(2) { left: 21%; width: 32px; height: 32px; animation-duration: 26s; animation-delay: -14s; } .fond__bulles span:nth-child(3) { left: 39%; width: 118px; height: 118px; animation-duration: 46s; animation-delay: -7s; } .fond__bulles span:nth-child(4) { left: 54%; width: 48px; height: 48px; animation-duration: 30s; animation-delay: -21s; } .fond__bulles span:nth-child(5) { left: 71%; width: 92px; height: 92px; animation-duration: 40s; animation-delay: -5s; } .fond__bulles span:nth-child(6) { left: 86%; width: 40px; height: 40px; animation-duration: 28s; animation-delay: -17s; } .fond__bulles span:nth-child(7) { left: 63%; width: 26px; height: 26px; animation-duration: 23s; animation-delay: -10s; } /* La dérive horizontale évite la colonne de bulles parfaitement verticale. */ @keyframes monte-bulle { 0% { transform: translate(0, 0) scale(0.85); opacity: 0; } 12% { opacity: 0.9; } 50% { transform: translate(34px, -52vh) scale(1); } 88% { opacity: 0.9; } 100% { transform: translate(-18px, -108vh) scale(1.06); opacity: 0; } } [data-theme="sombre"] .fond__bulles span { background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.10), rgba(96, 165, 250, 0.07) 55%, transparent 72%); border-color: rgba(255, 255, 255, 0.07); } @keyframes flotte { 0%, 100% { transform: translate(0, 0) rotate(var(--rot, 0deg)); } 50% { transform: translate(-26px, 30px) rotate(var(--rot, 0deg)); } } .contenu { position: relative; z-index: 1; } /* --- Barre ---------------------------------------------------------------- */ .barre { position: sticky; top: 0; z-index: 30; border-bottom: 1px solid var(--carte-bord); background: color-mix(in srgb, var(--nuit) 82%, transparent); backdrop-filter: blur(14px); } .barre__rang { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--u) * 3); min-height: 64px; } .barre__gauche { display: flex; align-items: center; gap: calc(var(--u) * 3.5); } .barre__droite { display: flex; align-items: center; gap: calc(var(--u) * 2); } .marque { display: inline-flex; align-items: center; gap: 10px; color: var(--clair); font-size: var(--t-md); font-weight: 600; text-decoration: none; letter-spacing: -0.02em; } .marque:hover { color: var(--clair); } .marque img { width: 27px; height: 27px; border-radius: 7px; } .barre__liens { display: flex; align-items: center; gap: calc(var(--u) * 3); } .barre__liens a { color: var(--doux); font-size: var(--t-sm); text-decoration: none; transition: color 0.18s ease; } .barre__liens a:hover, .barre__liens a[aria-current="page"] { color: var(--clair); } .jeton { font-size: var(--t-sm); color: var(--vert); white-space: nowrap; } .bascule-theme { width: 34px; height: 34px; padding: 0; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 1px solid var(--carte-bord); border-radius: 9px; cursor: pointer; color: var(--doux); font-family: inherit; font-size: 15px; line-height: 1; transition: color 0.18s ease, border-color 0.18s ease; } .bascule-theme:hover { color: var(--clair); border-color: var(--champ-bord); } .compte { display: inline-flex; align-items: center; text-decoration: none; position: relative; } .compte__pastille { width: 34px; height: 34px; border-radius: 50%; background: transparent; border: 1px solid var(--carte-bord); color: var(--doux); font-size: 13px; font-weight: 600; display: flex; align-items: center; justify-content: center; transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease; } .compte__pastille svg { width: 19px; height: 19px; display: block; } .compte:hover .compte__pastille { color: var(--clair); border-color: var(--champ-bord); } /* Une fois la personne connectée, l'initiale remplace l'icône. */ .compte__pastille.est-connecte { background: var(--bleu); border-color: transparent; color: #fff; } .bascule { display: none; background: none; color: var(--doux); border: 1px solid var(--carte-bord); border-radius: 9px; padding: 6px 11px; font-size: var(--t-xs); font-family: inherit; cursor: pointer; } /* --- Écran ---------------------------------------------------------------- */ .ecran { min-height: calc(100vh - 64px); display: flex; align-items: center; padding-block: calc(var(--u) * 4); } .ecran--haut { align-items: flex-start; padding-top: calc(var(--u) * 6); } .ecran__grille { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: calc(var(--u) * 8); align-items: center; width: 100%; } /* Atelier : colonne de saisie étroite, fenêtre de document large. */ .atelier { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: calc(var(--u) * 4); align-items: start; width: 100%; } /* --- Entrées en scène ----------------------------------------------------- */ .monte { opacity: 0; transform: translateY(14px); animation: monte 0.7s cubic-bezier(0.2, 0.75, 0.2, 1) forwards; } .monte--1 { animation-delay: 0.04s; } .monte--2 { animation-delay: 0.16s; } .monte--3 { animation-delay: 0.28s; } .monte--4 { animation-delay: 0.40s; } .monte--5 { animation-delay: 0.52s; } .monte--6 { animation-delay: 0.64s; } @keyframes monte { to { opacity: 1; transform: translateY(0); } } /* --- Typographie ---------------------------------------------------------- */ .titre { font-size: var(--t-3xl); line-height: 1.02; letter-spacing: -0.035em; margin: 0 0 22px; font-weight: 600; } .titre em { font-style: normal; color: var(--bleu-vif); } .chapeau { color: var(--doux); font-size: var(--t-md); line-height: 1.65; margin: 0 0 30px; max-width: 44ch; } .mention { color: var(--sourd); font-size: var(--t-sm); margin: 16px 0 0; } .oeil { color: var(--sourd); font-size: var(--t-xs); letter-spacing: 0.1em; text-transform: uppercase; font-weight: 500; margin: 0 0 12px; } /* Variante centrée : employée sur la page de remerciement, où le bloc entier est centré et où un surtitre aligné à gauche paraîtrait décalé. */ .oeil--centre { text-align: center; } /* --- Boutons -------------------------------------------------------------- */ .bouton { display: inline-flex; align-items: center; justify-content: center; gap: 9px; font-family: inherit; font-size: var(--t-base); font-weight: 500; padding: 13px 24px; border-radius: var(--rayon); border: 1px solid transparent; cursor: pointer; text-decoration: none; min-height: 48px; transition: transform 0.12s ease, background 0.18s ease, opacity 0.18s ease; } .bouton:active { transform: translateY(1px); } .bouton--clair { background: var(--bleu); color: #fff; } .bouton--clair:hover { background: var(--bleu-vif); color: #fff; } .bouton--bleu { background: var(--bleu); color: #fff; } .bouton--bleu:hover { background: var(--bleu-vif); color: #fff; } .bouton--fantome { background: transparent; color: var(--clair); border-color: var(--champ-bord); } .bouton--fantome:hover { background: var(--carte); color: var(--clair); } .bouton--large { width: 100%; } .bouton--petit { padding: 7px 14px; min-height: 34px; font-size: var(--t-xs); } .bouton[disabled] { opacity: 0.4; cursor: not-allowed; } .lien-nu { background: none; border: 0; padding: 0; font: inherit; color: var(--bleu-vif); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; } .lien-nu:hover { color: var(--clair); } /* --- Cartes --------------------------------------------------------------- */ .carte { background: var(--carte); border: 1px solid var(--carte-bord); border-radius: var(--rayon-lg); padding: calc(var(--u) * 2); } /* Sur l'accueil, la démonstration est le second sujet de la page : elle a droit à la même présence que le titre. */ .demo .carte { padding: calc(var(--u) * 2.5); } .demo { font-size: clamp(0.9375rem, 1.05vw, 1.05rem); } .demo .carte__titre { font-size: var(--t-xs); } .demo .carte p:not(.carte__titre) { font-size: 1em !important; } .demo .vignette { width: 44px; height: 56px; } .demo .gage { font-size: var(--t-sm); } .carte__titre { color: var(--sourd); font-size: var(--t-xs); letter-spacing: 0.06em; text-transform: uppercase; margin: 0 0 10px; } .pile { display: grid; gap: calc(var(--u) * 1.5); } .rang { display: flex; align-items: center; gap: calc(var(--u) * 2); flex-wrap: wrap; } /* « Garder mon CV » : la case et son étiquette, côte à côte quoi qu'il arrive. Avec `.rang`, l'étiquette basculait sous la case dans une colonne étroite — une case à cocher seule sur sa ligne ne se rapporte visuellement à rien. `align-items: flex-start` garde la case alignée sur la PREMIÈRE ligne du texte quand celui-ci en occupe deux, et non centrée entre les deux. */ .garder { display: flex; align-items: flex-start; gap: 10px; margin-top: 12px; font-weight: 400; cursor: pointer; } .garder input { width: auto; flex: none; margin: 2px 0 0; } .garder span { font-size: var(--t-sm); line-height: 1.4; } /* --- Panneau de saisie ---------------------------------------------------- */ .panneau { background: var(--nuit-2); border: 1px solid var(--carte-bord); border-radius: var(--rayon-lg); padding: calc(var(--u) * 3); position: sticky; top: 88px; } /* --- Fenêtre de document -------------------------------------------------- Barre d'onglets, toile, page posée dessus. C'est ce que font les outils de document, et c'est ce qui manquait : le PDF flottait dans le vide. */ .fenetre { position: relative; /* ancre du tiroir d'historique */ background: var(--nuit-2); border: 1px solid var(--carte-bord); border-radius: var(--rayon-lg); overflow: hidden; display: flex; flex-direction: column; min-height: 640px; box-shadow: var(--ombre); } .fenetre__barre { display: flex; align-items: center; justify-content: space-between; gap: var(--u); padding: 0 calc(var(--u) * 1.5); border-bottom: 1px solid var(--carte-bord); background: var(--nuit-3); min-height: 48px; flex: none; } .fenetre__onglets { display: flex; align-items: stretch; gap: 2px; overflow-x: auto; margin-right: auto; } .onglet { display: inline-flex; align-items: center; gap: 8px; background: transparent; border: 0; border-bottom: 2px solid transparent; color: var(--sourd); font-family: inherit; font-size: var(--t-sm); padding: 14px 14px 12px; cursor: pointer; white-space: nowrap; transition: color 0.15s ease; } .onglet:hover { color: var(--clair); } .onglet.est-actif { color: var(--clair); border-bottom-color: var(--bleu-vif); } .onglet__pastille { width: 7px; height: 7px; border-radius: 50%; background: var(--bleu); flex: none; } .onglet--lettre .onglet__pastille { background: var(--vert); } .fenetre__actions { display: flex; align-items: center; gap: var(--u); padding-right: 4px; } /* --- Historique ----------------------------------------------------------- Un tiroir, pas un onglet. La distinction est visuelle et volontaire : les onglets appartiennent au document en cours, l'historique appartient à la session. Les confondre ferait croire qu'on a produit trois documents pour une seule offre. */ .histoire__bouton { display: inline-flex; align-items: center; gap: 6px; background: transparent; border: 1px solid var(--carte-bord); border-radius: 999px; color: var(--sourd); font-family: inherit; font-size: var(--t-xs); padding: 6px 12px; cursor: pointer; white-space: nowrap; flex: none; transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease; } .histoire__bouton:hover { color: var(--clair); border-color: var(--bleu); background: var(--bleu-fond); } .histoire__bouton[aria-expanded="true"] { color: var(--bleu-vif); border-color: var(--bleu); background: var(--bleu-fond); } .histoire__compte { display: inline-flex; align-items: center; justify-content: center; min-width: 17px; height: 17px; padding: 0 5px; border-radius: 999px; background: var(--bleu); color: #fff; font-size: 11px; font-weight: 600; } /* Ancré sur la fenêtre, pas sur la toile : la toile défile avec le PDF, et un tiroir qui disparaît quand on fait défiler le document est un tiroir qu'on ne retrouve plus. */ .histoire { position: absolute; top: 56px; right: var(--u); z-index: 6; width: min(330px, calc(100% - var(--u) * 2)); max-height: calc(100% - 72px); overflow-y: auto; background: var(--carte); border: 1px solid var(--carte-bord); border-radius: var(--rayon); box-shadow: var(--ombre); padding: calc(var(--u) * 1.5); animation: histoire-entre 0.18s ease both; } @keyframes histoire-entre { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } .histoire__tete { display: flex; align-items: center; justify-content: space-between; gap: var(--u); } .histoire__titre { margin: 0; font-size: var(--t-sm); font-weight: 600; color: var(--clair); } .histoire__fermer { background: transparent; border: 0; color: var(--sourd); font-size: 20px; line-height: 1; cursor: pointer; padding: 0 4px; } .histoire__fermer:hover { color: var(--clair); } .histoire__note { margin: 4px 0 var(--u); font-size: var(--t-xs); color: var(--tres-sourd); line-height: 1.45; } .histoire__liste { display: flex; flex-direction: column; gap: 6px; } .histoire__creux { margin: 0; padding: var(--u) 0; font-size: var(--t-xs); color: var(--sourd); } .histoire__entree { display: flex; align-items: flex-start; gap: 6px; padding: 9px 10px; border-radius: 8px; background: var(--nuit); border: 1px solid transparent; transition: border-color 0.15s ease; } .histoire__entree:hover { border-color: var(--carte-bord); } .histoire__corps { flex: 1; min-width: 0; } .histoire__poste { margin: 0; font-size: var(--t-xs); font-weight: 600; color: var(--clair); display: flex; align-items: center; gap: 6px; } .histoire__score { flex: none; font-size: 11px; font-weight: 600; color: var(--vert); background: var(--vert-fond); border-radius: 999px; padding: 1px 7px; } .histoire__sous { margin: 2px 0 0; font-size: 11.5px; color: var(--sourd); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .histoire__docs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; } .histoire__doc { display: inline-flex; align-items: center; border: 1px solid var(--champ-bord); border-radius: 6px; overflow: hidden; } .histoire__lien { background: var(--champ); border: 0; color: var(--doux); font-family: inherit; font-size: 11.5px; padding: 3px 8px; cursor: pointer; text-decoration: none; } .histoire__lien:hover { background: var(--bleu-fond); color: var(--bleu-vif); } .histoire__lien--charger { border-left: 1px solid var(--champ-bord); } .histoire__jeter { flex: none; background: transparent; border: 0; color: var(--tres-sourd); font-size: 17px; line-height: 1; cursor: pointer; padding: 0 3px; } .histoire__jeter:hover { color: var(--rouge); } .histoire__vider { width: 100%; margin-top: var(--u); background: transparent; border: 1px solid var(--carte-bord); border-radius: 8px; color: var(--sourd); font-family: inherit; font-size: var(--t-xs); padding: 7px; cursor: pointer; } .histoire__vider:hover { color: var(--rouge); border-color: var(--rouge); background: var(--rouge-fond); } /* Toile : la page blanche se détache dessus, comme dans un lecteur. */ .fenetre__toile { flex: 1; background: var(--toile); padding: calc(var(--u) * 3); display: flex; align-items: flex-start; justify-content: center; overflow: auto; } .fenetre__page { width: 100%; max-width: 620px; aspect-ratio: 1 / 1.414; background: #fff; border: 0; border-radius: 3px; box-shadow: 0 12px 34px rgba(0, 0, 0, 0.35); display: block; } .fenetre__vide { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; min-height: 480px; text-align: center; padding: calc(var(--u) * 3); } .fenetre__vide p { color: var(--sourd); font-size: var(--t-sm); max-width: 34ch; margin: 0; } /* Silhouette de page pour l'état vide : on montre ce qui va arriver. */ .silhouette { width: 132px; height: 176px; background: var(--carte); border: 1px solid var(--carte-bord); border-radius: 4px; padding: 16px 14px; display: flex; flex-direction: column; gap: 8px; } .silhouette span { display: block; height: 5px; border-radius: 3px; background: var(--carte-bord); } .silhouette span:nth-child(1) { width: 62%; height: 8px; background: var(--bleu); opacity: 0.55; } .silhouette span:nth-child(4) { width: 74%; } .silhouette span:nth-child(6) { width: 48%; } /* --- L'échec, dans la même langue visuelle ----------------------------------- Un bandeau rouge au milieu du vide ressemblait à une alarme système, et laissait croire que le site était en panne. C'est la même feuille que l'état d'attente, froissée et penchée : on comprend que c'est le document qui n'est pas passé. Le trait qui la traverse est un pli, pas une croix — rien n'est perdu, rien n'a été facturé, il suffit de recommencer. */ .silhouette--froissee { position: relative; transform: rotate(-3deg); border-color: color-mix(in srgb, var(--rouge) 26%, var(--carte-bord)); animation: feuille-tombe 0.5s cubic-bezier(0.34, 1.2, 0.64, 1) both; } .silhouette--froissee span { opacity: 0.55; } .silhouette--froissee span:nth-child(1) { background: var(--rouge); opacity: 0.4; } /* Les lignes du bas se raccourcissent : le document s'est arrêté en chemin. */ .silhouette--froissee span:nth-child(5) { width: 34%; } .silhouette--froissee span:nth-child(6) { width: 18%; } .silhouette__pli { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: var(--rouge); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; opacity: 0.3; } @keyframes feuille-tombe { from { opacity: 0; transform: translateY(-14px) rotate(4deg); } to { opacity: 1; transform: translateY(0) rotate(-3deg); } } .echec__titre { font-size: var(--t-md); font-weight: 600; color: var(--clair); margin: 4px 0 0; max-width: none; } #echec #echec-detail { margin: 0; max-width: 38ch; } /* --- Démonstration animée ------------------------------------------------- */ .demo { transition: opacity 0.4s ease; } .demo.est-sortante { opacity: 0; } .demo__points { display: flex; gap: 6px; justify-content: center; margin: 14px 0 0; } .demo__points button { width: 22px; height: 3px; padding: 0; border: 0; border-radius: 2px; background: var(--tres-sourd); cursor: pointer; transition: background 0.25s ease; } .demo__points button[aria-current="true"] { background: var(--bleu-vif); } .demo__metier { color: var(--sourd); font-size: var(--t-xs); font-family: var(--mono); } .motcle { background: transparent; color: var(--doux); padding: 1px 5px; border-radius: 4px; transition: background 0.4s ease, color 0.4s ease; } .motcle.est-actif { background: var(--bleu); color: #fff; } .avant { color: var(--sourd); transition: opacity 0.45s ease; } .avant.est-barre { text-decoration: line-through; text-decoration-color: var(--rouge); opacity: 0.45; } .apres { color: var(--clair); min-height: 1.6em; } .curseur { display: inline-block; width: 2px; height: 1em; background: var(--bleu-vif); vertical-align: -2px; animation: clignote 0.9s steps(2) infinite; } @keyframes clignote { 50% { opacity: 0; } } .vignette { background: #fff; border-radius: 4px; padding: 6px 5px; width: 36px; height: 46px; flex: none; opacity: 0; transform: translateY(10px) scale(0.94); } .vignette.est-posee { animation: pose 0.55s cubic-bezier(0.2, 0.75, 0.2, 1) forwards; } @keyframes pose { to { opacity: 1; transform: translateY(0) scale(1); } } .vignette span { display: block; height: 2px; background: #D6DBE3; margin-bottom: 3px; } .vignette span:first-child { background: var(--bleu); width: 70%; height: 3px; } .vignette span:last-child { width: 78%; margin-bottom: 0; } .vignette--lettre span:first-child { background: var(--vert); width: 60%; } .gage { opacity: 0; transform: translateY(8px); transition: opacity 0.45s ease, transform 0.45s ease; color: var(--vert); font-size: var(--t-xs); display: flex; align-items: center; gap: 8px; } .gage.est-vu { opacity: 1; transform: translateY(0); } .gage::before { content: ""; width: 9px; height: 5px; flex: none; border-left: 2px solid var(--vert); border-bottom: 2px solid var(--vert); transform: rotate(-45deg); margin-bottom: 3px; } /* --- Formulaires ---------------------------------------------------------- */ label, .etiquette { display: block; color: var(--clair); font-size: var(--t-sm); font-weight: 500; margin-bottom: 8px; } textarea, select, input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="url"], input[type="search"], input[type="number"] { width: 100%; font-family: inherit; font-size: var(--t-sm); line-height: 1.6; color: var(--clair); background: var(--champ); border: 1px solid var(--champ-bord); border-radius: var(--rayon); padding: 13px 14px; } textarea { min-height: 132px; resize: vertical; } textarea::placeholder, input::placeholder { color: var(--sourd); } textarea:focus, input:focus, select:focus { border-color: var(--bleu-vif); outline: 2px solid var(--bleu-fond); outline-offset: 0; } select option { background: var(--nuit-2); color: var(--clair); } .aide { color: var(--sourd); font-size: var(--t-xs); margin: 8px 0 0; } .compteur { color: var(--sourd); font-family: var(--mono); font-size: var(--t-xs); text-align: right; margin: 7px 0 0; } .compteur.est-trop { color: var(--rouge); } .depot { position: relative; border: 1.5px dashed var(--champ-bord); border-radius: var(--rayon); background: var(--champ); padding: calc(var(--u) * 3) calc(var(--u) * 2); text-align: center; cursor: pointer; transition: border-color 0.2s ease, background 0.2s ease; } .depot:hover, .depot.est-survole { border-color: var(--bleu-vif); background: var(--bleu-fond); } .depot input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; } .depot__titre { color: var(--clair); font-size: var(--t-sm); font-weight: 500; margin: 0; } .depot__detail { color: var(--sourd); font-size: var(--t-xs); margin: 5px 0 0; } .depot.est-charge { border-style: solid; border-color: var(--vert); background: var(--vert-fond); } .choix { display: grid; gap: 8px; } .choix__option { display: flex; gap: 11px; align-items: flex-start; padding: 12px 13px; border: 1px solid var(--champ-bord); border-radius: var(--rayon); background: var(--champ); cursor: pointer; font-weight: 400; margin: 0; transition: border-color 0.18s ease, background 0.18s ease; } .choix__option:hover { border-color: var(--bleu-vif); } .choix__option input { width: auto; margin-top: 3px; flex: none; accent-color: var(--bleu); } .choix__option:has(input:checked) { border-color: var(--bleu-vif); background: var(--bleu-fond); } .choix__option strong { color: var(--clair); font-size: var(--t-sm); font-weight: 600; } .choix__option em { font-style: normal; color: var(--sourd); font-size: var(--t-xs); margin-left: 7px; } .choix__option small { display: block; color: var(--doux); font-size: var(--t-xs); line-height: 1.5; margin-top: 3px; } .options { border-top: 1px solid var(--carte-bord); margin: calc(var(--u) * 2) 0; } .options > summary { cursor: pointer; list-style: none; padding: 12px 0; color: var(--sourd); font-size: var(--t-xs); letter-spacing: 0.06em; text-transform: uppercase; display: flex; align-items: center; justify-content: space-between; } .options > summary::-webkit-details-marker { display: none; } .options > summary::after { content: "+"; color: var(--bleu-vif); font-size: 1rem; } .options[open] > summary::after { content: "–"; } /* --- Bulles --------------------------------------------------------------- */ .info { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; margin-left: 6px; padding: 0; border: 1px solid var(--sourd); border-radius: 50%; background: transparent; color: var(--sourd); font-family: var(--mono); font-size: 10px; line-height: 1; cursor: help; vertical-align: middle; font-weight: 400; } .info:hover, .info:focus-visible { border-color: var(--bleu-vif); color: var(--bleu-vif); } .bulle { position: absolute; z-index: 60; max-width: 290px; background: var(--nuit-3); color: var(--clair); border: 1px solid var(--carte-bord); font-size: var(--t-xs); line-height: 1.55; font-weight: 400; padding: 12px 14px; border-radius: var(--rayon); box-shadow: var(--ombre); } /* --- Messages ------------------------------------------------------------- */ .note { border-left: 3px solid var(--bleu); background: var(--bleu-fond); padding: 12px 15px; font-size: var(--t-sm); margin-bottom: calc(var(--u) * 2); color: var(--clair); border-radius: 0 var(--rayon) var(--rayon) 0; } .note--ok { border-color: var(--vert); background: var(--vert-fond); } .note--attention { border-color: var(--ambre); background: var(--ambre-fond); } .note--echec { border-color: var(--rouge); background: var(--rouge-fond); } .note strong { display: block; margin-bottom: 3px; } /* --- Attente -------------------------------------------------------------- */ .attente { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; padding: calc(var(--u) * 5) calc(var(--u) * 3); text-align: center; } /* --- Piste d'étapes --------------------------------------------------------- En haut de l'écran d'attente : c'est le repère de progression, il doit dominer. Chaque pas s'allume quand le serveur annonce cette phase. */ .piste { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px calc(var(--u) * 2.5); margin-bottom: calc(var(--u) * 5); } .piste__pas { display: inline-flex; align-items: center; gap: 7px; color: var(--sourd); font-size: var(--t-xs); letter-spacing: 0.02em; opacity: 0.4; transition: opacity 320ms ease, color 320ms ease; } .piste__point { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; transition: transform 320ms ease; } .piste__pas[data-etat="fait"] { opacity: 0.75; color: var(--vert); } .piste__pas[data-etat="en-cours"] { opacity: 1; color: var(--bleu); font-weight: 600; } .piste__pas[data-etat="en-cours"] .piste__point { transform: scale(1.5); animation: point-bat 1.3s ease-in-out infinite; } @keyframes point-bat { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } } /* --- La feuille qui se réécrit ---------------------------------------------- Un rond qui tourne ne dit rien du travail en cours. Ici, les lignes d'une page s'effacent et se réécrivent l'une après l'autre : c'est littéralement ce que fait le produit, et ça se comprend sans légende. */ .feuille { position: relative; width: 132px; height: 176px; padding: 20px 16px; display: flex; flex-direction: column; gap: 9px; background: var(--carte); border: 1px solid var(--carte-bord); border-radius: 4px; box-shadow: var(--ombre); margin-bottom: calc(var(--u) * 4); } .feuille__ligne { height: 5px; border-radius: 3px; background: var(--toile); transform-origin: left center; animation: ligne-reecrite 3.6s ease-in-out infinite; } .feuille__ligne:nth-child(1) { width: 62%; animation-delay: 0s; } .feuille__ligne:nth-child(2) { width: 100%; animation-delay: 0.24s; } .feuille__ligne:nth-child(3) { width: 88%; animation-delay: 0.48s; } .feuille__ligne:nth-child(4) { width: 94%; animation-delay: 0.72s; } .feuille__ligne:nth-child(5) { width: 70%; animation-delay: 0.96s; } .feuille__ligne:nth-child(6) { width: 82%; animation-delay: 1.2s; } @keyframes ligne-reecrite { 0%, 100% { transform: scaleX(1); background: var(--toile); } 38% { transform: scaleX(0.12); background: var(--toile); } 56% { transform: scaleX(0.12); background: var(--bleu); } 78% { transform: scaleX(1); background: var(--bleu); } 92% { transform: scaleX(1); background: var(--toile); } } /* --- L'étape en toutes lettres ---------------------------------------------- */ .attente__etape { margin: 0 0 6px; color: var(--clair); font-size: var(--t-lg); font-weight: 600; letter-spacing: -0.02em; } .attente__detail { margin: 0 0 calc(var(--u) * 5); color: var(--sourd); font-size: var(--t-sm); } /* --- Ce que Prestena dit ----------------------------------------------------- Sans encadré, volontairement. Une phrase de positionnement enfermée dans une boîte se lit comme une notification qu'on chasse ; posée à même la page, elle se lit comme une affirmation. Un simple filet la sépare du reste. */ .dire { max-width: 44ch; padding-top: calc(var(--u) * 3.5); border-top: 1px solid var(--carte-bord); transition: opacity 340ms ease, transform 340ms ease; } .dire__titre { margin: 0 0 8px; color: var(--clair); font-size: var(--t-base); font-weight: 600; line-height: 1.4; letter-spacing: -0.015em; } .dire__texte { margin: 0; color: var(--doux); font-size: var(--t-sm); line-height: 1.65; } .dire--entre { opacity: 1; transform: translateY(0); } .dire--sort { opacity: 0; transform: translateY(-6px); } @media (prefers-reduced-motion: reduce) { .feuille__ligne, .piste__pas[data-etat="en-cours"] .piste__point { animation: none; } .dire { transition: none; } .dire--sort { opacity: 1; transform: none; } } .points { display: flex; gap: 8px; } .points span { width: 9px; height: 9px; border-radius: 50%; background: var(--bleu); animation: pulse 1.15s ease-in-out infinite; } .points span:nth-child(2) { animation-delay: 0.14s; } .points span:nth-child(3) { animation-delay: 0.28s; } .points span:nth-child(4) { animation-delay: 0.42s; } @keyframes pulse { 0%, 100% { opacity: 0.2; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1); } } /* --- Score ---------------------------------------------------------------- */ .score { display: flex; align-items: center; gap: calc(var(--u) * 2.5); } .score__chiffre { font-size: var(--t-xl); font-weight: 600; color: var(--vert); line-height: 1; letter-spacing: -0.03em; } .score__chiffre small { color: var(--sourd); font-size: var(--t-xs); font-weight: 400; } .score__corps { flex: 1; } .score__barre { height: 6px; background: var(--carte-bord); border-radius: 4px; overflow: hidden; } .score__jauge { height: 100%; background: var(--vert); width: 0; border-radius: 4px; transition: width 0.9s cubic-bezier(0.2, 0.75, 0.2, 1); } .score__gain { color: var(--vert); font-size: var(--t-xs); margin: 7px 0 0; } /* --- Documents ------------------------------------------------------------ */ .documents { display: grid; gap: 8px; } .document { display: flex; align-items: center; gap: calc(var(--u) * 1.5); padding: 12px 14px; background: var(--carte); border: 1px solid var(--carte-bord); border-radius: var(--rayon); cursor: pointer; width: 100%; text-align: left; font-family: inherit; font-size: var(--t-sm); color: var(--clair); transition: border-color 0.18s ease; } .document:hover { border-color: var(--bleu-vif); } .document.est-actif { border-color: var(--bleu-vif); background: var(--bleu-fond); } .document__nom { flex: 1; font-weight: 500; } .document__meta { color: var(--sourd); font-family: var(--mono); font-size: var(--t-xs); } .document__lien { color: var(--bleu-vif); font-size: var(--t-xs); text-decoration: none; padding: 5px 11px; border: 1px solid var(--bleu-vif); border-radius: 7px; white-space: nowrap; } .document__lien:hover { background: var(--bleu-vif); color: #fff; } .offert { color: var(--vert); font-size: var(--t-xs); margin-left: 7px; } /* --- Repli ---------------------------------------------------------------- */ .repli { border-top: 1px solid var(--carte-bord); margin-top: calc(var(--u) * 2); } .repli > summary { cursor: pointer; list-style: none; padding: 14px 0; color: var(--bleu-vif); font-size: var(--t-sm); display: flex; align-items: center; justify-content: space-between; } .repli > summary::-webkit-details-marker { display: none; } .repli > summary::after { content: "+"; font-family: var(--mono); } .repli[open] > summary::after { content: "–"; } /* --- Retouches ------------------------------------------------------------ */ .retouche { border-bottom: 1px solid var(--carte-bord); padding-block: calc(var(--u) * 2); } .retouche:last-child { border-bottom: 0; } .retouche__section { color: var(--bleu-vif); font-size: var(--t-xs); letter-spacing: 0.06em; text-transform: uppercase; margin: 0 0 9px; } .coupe { color: var(--rouge); text-decoration: line-through; opacity: 0.65; } .ajout { color: var(--clair); background: var(--bleu-fond); padding: 1px 4px; border-radius: 3px; } .raison { display: block; color: var(--doux); font-size: var(--t-xs); border-left: 2px solid var(--bleu-vif); padding-left: 12px; margin-top: 9px; line-height: 1.55; } .source { font-size: var(--t-xs); border: 1px solid; border-radius: 20px; padding: 2px 9px; } .source--cv { color: var(--sourd); border-color: var(--carte-bord); } .source--entretien { color: var(--bleu-vif); border-color: var(--bleu-vif); } .puces { display: flex; flex-wrap: wrap; gap: 7px; } .puce { font-size: var(--t-xs); border: 1px solid var(--carte-bord); border-radius: 20px; padding: 3px 11px; color: var(--doux); } .puce--ok { border-color: var(--vert); color: var(--vert); } .puce--manque { border-color: var(--rouge); color: var(--rouge); } /* --- Entretien ------------------------------------------------------------ */ .question { border-left: 2px solid var(--bleu-vif); padding-left: calc(var(--u) * 2); margin-bottom: calc(var(--u) * 3); } .question__texte { color: var(--clair); font-size: var(--t-sm); font-weight: 500; margin: 0 0 6px; } .question__pourquoi { color: var(--sourd); font-size: var(--t-xs); margin: 0 0 10px; } .canevas { display: flex; align-items: center; gap: calc(var(--u) * 1.5); flex-wrap: wrap; margin-top: 9px; padding: 11px 13px; background: var(--carte); border-radius: var(--rayon); } .canevas p { flex: 1; min-width: 200px; margin: 0; color: var(--doux); font-size: var(--t-xs); font-style: italic; } /* --- Tarifs --------------------------------------------------------------- */ .offres { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--u) * 2.5); align-items: stretch; } .offre { background: var(--carte); border: 1px solid var(--carte-bord); border-radius: var(--rayon-lg); padding: calc(var(--u) * 3); display: flex; flex-direction: column; gap: calc(var(--u) * 1.5); position: relative; transition: border-color 0.2s ease, transform 0.2s ease; } .offre:hover { border-color: var(--champ-bord); transform: translateY(-3px); } .offre--retenue { border-color: var(--bleu-vif); background: var(--bleu-fond); } .offre__ruban { position: absolute; top: -11px; left: calc(var(--u) * 3); background: var(--bleu); color: #fff; font-size: var(--t-xs); padding: 3px 11px; border-radius: 20px; } .offre__nom { color: var(--sourd); font-size: var(--t-xs); letter-spacing: 0.06em; text-transform: uppercase; margin: 0; } .offre__prix { font-size: var(--t-2xl); font-weight: 600; line-height: 1; margin: 0; letter-spacing: -0.03em; } .offre__prix small { color: var(--sourd); font-size: var(--t-xs); font-weight: 400; } .offre__unite { color: var(--doux); font-size: var(--t-xs); margin: 0; } .offre ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; } .offre li { color: var(--doux); font-size: var(--t-sm); padding-left: 22px; position: relative; } .offre li::before { content: ""; position: absolute; left: 0; top: 7px; width: 8px; height: 5px; border-left: 2px solid var(--vert); border-bottom: 2px solid var(--vert); transform: rotate(-45deg); } .offre .bouton { margin-top: auto; } /* --- Questions ------------------------------------------------------------ */ .faq { border-bottom: 1px solid var(--carte-bord); } .faq > summary { cursor: pointer; list-style: none; padding: calc(var(--u) * 2.5) 0; color: var(--clair); font-size: var(--t-md); font-weight: 500; display: flex; justify-content: space-between; align-items: center; gap: var(--u); } .faq > summary::-webkit-details-marker { display: none; } .faq > summary::after { content: "+"; color: var(--bleu-vif); font-size: 1.2rem; } .faq[open] > summary::after { content: "–"; } .faq__reponse { color: var(--doux); font-size: var(--t-sm); padding-bottom: calc(var(--u) * 3); max-width: 70ch; } .faq__reponse p:last-child { margin-bottom: 0; } /* --- Prose ---------------------------------------------------------------- */ .prose { color: var(--doux); font-size: var(--t-sm); } .prose h2 { color: var(--clair); font-size: var(--t-lg); margin: calc(var(--u) * 5) 0 calc(var(--u) * 2); } .prose h2:first-child { margin-top: 0; } .prose h3 { color: var(--clair); font-size: var(--t-base); margin: calc(var(--u) * 3) 0 var(--u); } .prose ul { padding-left: 20px; } .prose li { margin-bottom: 8px; } .prose strong { color: var(--clair); } .prose code { font-family: var(--mono); font-size: 0.9em; color: var(--bleu-vif); } /* --- Pied ----------------------------------------------------------------- */ .pied { border-top: 1px solid var(--carte-bord); padding-block: calc(var(--u) * 3); font-size: var(--t-sm); } .pied__rang { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 3); justify-content: space-between; align-items: center; } .pied nav { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 3); } .pied a { color: var(--sourd); text-decoration: none; } .pied a:hover { color: var(--clair); } .pied__mention { color: var(--sourd); font-size: var(--t-xs); margin: 0; } /* --- Utilitaires ---------------------------------------------------------- */ .masque { display: none !important; } .lecteur-seul { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .centre { text-align: center; } /* --- Adaptatif ------------------------------------------------------------ */ @media (max-width: 1080px) { .atelier { grid-template-columns: 1fr; } .panneau { position: static; } .fenetre { min-height: 520px; } } @media (max-width: 940px) { :root { --t-3xl: 2.375rem; --t-2xl: 1.75rem; --t-xl: 1.5rem; } .ecran { min-height: auto; padding-block: calc(var(--u) * 5); } .ecran__grille { grid-template-columns: 1fr; gap: calc(var(--u) * 4); } .offres { grid-template-columns: 1fr; } .fond__figure { display: none; } .fond__bulles span:nth-child(n+4) { display: none; } } @media (max-width: 620px) { .enveloppe { padding-inline: calc(var(--u) * 2.5); } .barre__liens { display: none; } .barre__liens.est-ouvert { display: flex; flex-direction: column; align-items: flex-start; position: absolute; top: 64px; left: 0; right: 0; background: var(--nuit-2); border-bottom: 1px solid var(--carte-bord); padding: calc(var(--u) * 2.5); gap: calc(var(--u) * 2); } .bascule { display: inline-block; } .fenetre__toile { padding: var(--u); } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } .monte { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .fond__bulles span, .fond__figure { animation: none; } .fond__bulles span { opacity: 0.5; transform: translateY(-55vh); } } /* --- Compte, connexion, paiement ------------------------------------------ Ces classes servent aux écrans construits en JavaScript : connexion, retour de paiement, page de compte. */ .etat { display: flex; flex-direction: column; align-items: center; gap: 18px; padding: calc(var(--u) * 7) 0; text-align: center; } .etat__titre { color: var(--clair); font-size: var(--t-lg); font-weight: 500; margin: 0; letter-spacing: -0.01em; } /* Une page de document en train de s'assembler : les barres montent l'une après l'autre. Plus parlant qu'un cercle qui tourne. */ .bati { display: flex; flex-direction: column; gap: 6px; width: 96px; } .bati span { display: block; height: 6px; border-radius: 3px; background: var(--carte-bord); transform-origin: left; animation: bati 1.5s ease-in-out infinite; } .bati span:nth-child(1) { width: 70%; background: var(--bleu); animation-delay: 0s; } .bati span:nth-child(2) { animation-delay: 0.12s; } .bati span:nth-child(3) { animation-delay: 0.24s; } .bati span:nth-child(4) { width: 80%; animation-delay: 0.36s; } .bati span:nth-child(5) { width: 55%; animation-delay: 0.48s; } @keyframes bati { 0%, 100% { transform: scaleX(0.35); opacity: 0.35; } 50% { transform: scaleX(1); opacity: 1; } } .alerte { border: 1px solid var(--carte-bord); border-left: 3px solid var(--rouge); background: var(--rouge-fond); border-radius: var(--rayon); padding: 14px 16px; margin: 0 0 calc(var(--u) * 2); font-size: var(--t-sm); line-height: 1.6; color: var(--doux); } .alerte strong { display: block; color: var(--clair); font-weight: 600; margin-bottom: 3px; } .alerte--ok { border-left-color: var(--vert); background: var(--vert-fond); } .alerte--info { border-left-color: var(--bleu); background: var(--bleu-fond); } /* Les deux noms de boutons employés par les écrans construits en JS. */ .bouton--plein { background: var(--bleu); color: #fff; } .bouton--plein:hover { background: var(--bleu-vif); color: #fff; } .bouton--creux { background: transparent; color: var(--clair); border-color: var(--champ-bord); } .bouton--creux:hover { background: var(--carte); color: var(--clair); } /* --- Historique et mémoire ------------------------------------------------ */ .ligne { display: flex; align-items: flex-start; gap: calc(var(--u) * 2); padding: 14px 0; border-bottom: 1px solid var(--carte-bord); } .ligne:last-child { border-bottom: 0; } .ligne__corps { flex: 1; min-width: 0; } .ligne__titre { color: var(--clair); font-size: var(--t-sm); font-weight: 500; margin: 0 0 3px; } .ligne__detail { color: var(--sourd); font-size: var(--t-xs); margin: 0; } .ligne__cote { display: flex; align-items: center; gap: 12px; flex: none; } /* Le score en pastille : lisible d'un coup d'œil dans une liste. */ .pastille-score { font-family: var(--mono); font-size: var(--t-xs); font-weight: 500; padding: 4px 9px; border-radius: 20px; white-space: nowrap; color: var(--vert); background: var(--vert-fond); } .pastille-score--moyen { color: var(--ambre); background: var(--ambre-fond); } .pastille-score--faible { color: var(--rouge); background: var(--rouge-fond); } .croix { width: 26px; height: 26px; padding: 0; flex: none; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 1px solid var(--carte-bord); border-radius: 7px; color: var(--sourd); font-family: inherit; font-size: 15px; line-height: 1; cursor: pointer; transition: color 0.18s ease, border-color 0.18s ease; } .croix:hover { color: var(--rouge); border-color: var(--rouge); } .vide { color: var(--sourd); font-size: var(--t-sm); line-height: 1.6; padding: calc(var(--u) * 3) 0; margin: 0; } /* Une réponse de la mémoire de carrière, modifiable sur place. */ .fait__question { color: var(--sourd); font-size: var(--t-xs); margin: 0 0 6px; } .fait textarea { min-height: 62px; font-size: var(--t-sm); } .fait__actions { display: flex; gap: 8px; align-items: center; margin-top: 8px; } /* --- Connexion ------------------------------------------------------------ Les boutons des fournisseurs passent avant le formulaire : c'est le chemin le plus court, et celui que la plupart des gens prennent. */ .fournisseurs { display: grid; gap: 9px; margin-bottom: calc(var(--u) * 3); } .fournisseur { display: flex; align-items: center; justify-content: center; gap: 11px; width: 100%; min-height: 46px; padding: 11px 16px; border: 1px solid var(--champ-bord); border-radius: var(--rayon); background: var(--champ); color: var(--clair); font-family: inherit; font-size: var(--t-sm); font-weight: 500; text-decoration: none; cursor: pointer; transition: border-color 0.18s ease, background 0.18s ease, transform 0.12s ease; } .fournisseur:hover { border-color: var(--champ-bord); background: var(--carte); color: var(--clair); transform: translateY(-1px); } .fournisseur:active { transform: none; } .fournisseur svg { width: 19px; height: 19px; flex: none; } /* Séparateur « ou », trait de part et d'autre. */ .ou { display: flex; align-items: center; gap: 14px; color: var(--sourd); font-size: var(--t-xs); margin: calc(var(--u) * 3) 0; } .ou::before, .ou::after { content: ""; flex: 1; height: 1px; background: var(--carte-bord); } /* Jauge de robustesse du mot de passe. Informative, jamais bloquante : la seule règle dure est la longueur minimale. */ .jauge { display: flex; gap: 4px; margin-top: 8px; } .jauge span { flex: 1; height: 3px; border-radius: 2px; background: var(--carte-bord); transition: background 0.25s ease; } .jauge[data-force="1"] span:nth-child(-n+1) { background: var(--rouge); } .jauge[data-force="2"] span:nth-child(-n+2) { background: var(--ambre); } .jauge[data-force="3"] span:nth-child(-n+3) { background: var(--vert); } .jauge[data-force="4"] span { background: var(--vert); } /* Un champ et son libellé forment un bloc. Sans marge dessous, le bouton de validation venait se coller au champ de mot de passe — visible seulement à la connexion, où rien ne s'intercale entre les deux (à l'inscription, la jauge et son conseil comblaient l'espace par accident). */ .champ { margin-bottom: calc(var(--u) * 2.5); } .champ:last-child { margin-bottom: 0; } /* La ligne discrète sous un champ, ou sous un bloc : une référence de paiement, une contrainte de format. Elle se lit après, pas avant. */ .champ__aide { color: var(--sourd); font-size: var(--t-xs); font-family: var(--mono); margin: 6px 0 0; } .champ__rang { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 7px; } .champ__rang label { margin: 0; } .champ__rang button { background: none; border: 0; padding: 0; cursor: pointer; font-family: inherit; font-size: var(--t-xs); color: var(--sourd); text-decoration: underline; text-underline-offset: 3px; } .champ__rang button:hover { color: var(--clair); } /* Bouton « afficher le mot de passe », posé dans le champ. L'enveloppe n'entoure que le champ lui-même : si elle englobait aussi la ligne du libellé, le bouton se placerait au milieu de l'ensemble et viendrait recouvrir « Oublié ? ». */ .boite-mdp { position: relative; display: block; } .boite-mdp input { padding-right: 88px; } .boite-mdp [data-voir] { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); background: none; border: 0; color: var(--sourd); cursor: pointer; font-family: inherit; font-size: var(--t-xs); padding: 7px 9px; border-radius: 7px; line-height: 1; white-space: nowrap; } .boite-mdp [data-voir]:hover { color: var(--clair); background: var(--carte); } /* Les modes de connexion rattachés, sur la page de compte. */ .identite { display: flex; align-items: center; gap: 11px; } .identite__point { width: 9px; height: 9px; border-radius: 50%; flex: none; } /* --- Menu du compte ------------------------------------------------------- Panneau déroulant sous la pastille. Il remplace le bouton de thème isolé dans la barre : un seul point d'entrée pour tout ce qui concerne « moi ». */ .compte__declencheur { display: inline-flex; align-items: center; padding: 0; background: none; border: 0; cursor: pointer; font-family: inherit; } .menu-compte { position: absolute; top: calc(100% + 10px); right: 0; z-index: 60; width: 268px; padding: 6px; background: var(--nuit-2); border: 1px solid var(--carte-bord); border-radius: var(--rayon-lg); box-shadow: var(--ombre); opacity: 0; visibility: hidden; transform: translateY(-6px) scale(0.98); transform-origin: top right; transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s; } .menu-compte.est-ouvert { opacity: 1; visibility: visible; transform: none; } /* En-tête : qui l'on est, et combien il reste. */ .menu-compte__tete { padding: 12px 12px 11px; } .menu-compte__nom { color: var(--clair); font-size: var(--t-sm); font-weight: 600; margin: 0 0 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .menu-compte__detail { color: var(--sourd); font-size: var(--t-xs); margin: 0; } .menu-compte__trait { height: 1px; background: var(--carte-bord); margin: 5px 0; } .menu-compte a, .menu-compte button.menu-item { display: flex; align-items: center; gap: 11px; width: 100%; padding: 10px 12px; border: 0; border-radius: var(--rayon); background: none; color: var(--clair); text-decoration: none; font-family: inherit; font-size: var(--t-sm); text-align: left; cursor: pointer; transition: background 0.14s ease, color 0.14s ease; } .menu-compte a:hover, .menu-compte button.menu-item:hover { background: var(--champ); color: var(--clair); } .menu-compte svg { width: 17px; height: 17px; flex: none; color: var(--sourd); } .menu-compte a:hover svg, .menu-compte button.menu-item:hover svg { color: var(--clair); } .menu-compte .menu-item--rouge { color: var(--rouge); } .menu-compte .menu-item--rouge svg { color: var(--rouge); } /* Le badge de crédits, posé à droite d'une entrée. */ .menu-compte__badge { margin-left: auto; font-size: var(--t-xs); color: var(--vert); font-family: var(--mono); white-space: nowrap; } /* Ligne de bascule jour/nuit, en bas comme demandé. */ .menu-theme { display: flex; align-items: center; gap: 11px; padding: 10px 12px; } .menu-theme > span:first-of-type { color: var(--clair); font-size: var(--t-sm); } .menu-theme svg { width: 17px; height: 17px; flex: none; color: var(--sourd); } /* Interrupteur. Un vrai bouton, pas une case à cocher déguisée. */ .bascule-nuit { margin-left: auto; position: relative; flex: none; width: 40px; height: 22px; padding: 0; border-radius: 999px; cursor: pointer; background: var(--champ); border: 1px solid var(--champ-bord); transition: background 0.2s ease, border-color 0.2s ease; } .bascule-nuit::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--sourd); transition: transform 0.2s ease, background 0.2s ease; } .bascule-nuit[aria-checked="true"] { background: var(--bleu); border-color: var(--bleu); } .bascule-nuit[aria-checked="true"]::after { transform: translateX(18px); background: #fff; } @media (max-width: 720px) { .menu-compte { width: min(288px, calc(100vw - 32px)); } } /* Détail technique d'un échec, visible uniquement par les comptes internes. Volontairement en chasse fixe et en petit : c'est une trace d'exploitation, pas un message destiné à quelqu'un qui cherche un emploi. */ .echec__technique { margin: 12px auto 0; max-width: 52ch; padding: 9px 12px; border-radius: 6px; background: var(--carte); border: 1px solid var(--carte-bord); color: var(--sourd); font-family: var(--mono); font-size: var(--t-xs); line-height: 1.55; text-align: left; word-break: break-word; } /* Le gage de format, dans la colonne de saisie. Discret : il rassure sans se mettre en travers de la personne qui veut juste déposer son CV. */ .gage--outil { margin: calc(var(--u) * 1.5) 0 0; font-size: var(--t-xs); color: var(--sourd); } /* Onglet de la lettre pendant sa rédaction. Annoncé mais pas encore cliquable : la personne sait qu'il arrive au lieu de croire qu'on l'a oublié. La pastille bat doucement pour dire que ça travaille. */ .onglet--attente { opacity: 0.55; cursor: default; } .onglet--attente .onglet__pastille { animation: pastille-bat 1.4s ease-in-out infinite; } @keyframes pastille-bat { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .onglet--attente .onglet__pastille { animation: none; } } /* --- Avertissements repliés -------------------------------------------------- Quatre pavés jaunes empilés repoussaient le score et les retouches hors de l'écran. Ils comptent, mais ils ne sont pas le sujet : une ligne dit combien il y en a, le détail s'ouvre d'un clic. */ .alertes { margin-bottom: 14px; border: 1px solid var(--ambre); border-radius: var(--rayon); background: color-mix(in srgb, var(--ambre) 8%, transparent); } .alertes > summary { cursor: pointer; padding: 10px 13px; list-style: none; display: flex; align-items: center; gap: 8px; color: var(--clair); font-size: var(--t-sm); font-weight: 500; } .alertes > summary::-webkit-details-marker { display: none; } .alertes > summary::after { content: '▾'; margin-left: auto; color: var(--sourd); transition: transform 180ms ease; } .alertes[open] > summary::after { transform: rotate(180deg); } .alertes__nb { display: inline-flex; align-items: center; justify-content: center; min-width: 21px; height: 21px; padding: 0 6px; border-radius: 11px; background: var(--ambre); color: #fff; font-size: var(--t-xs); font-weight: 600; } .alertes__liste { margin: 0; padding: 0 15px 12px 30px; color: var(--doux); font-size: var(--t-sm); line-height: 1.6; } .alertes__liste li { margin-bottom: 7px; } .alertes__liste li:last-child { margin-bottom: 0; } /* --- Exigences sélectionnables ------------------------------------------------ Cliquer ne coche pas une compétence : ça ouvre une question. La différence est tout le produit. */ .puce--choix { cursor: pointer; border: 1px dashed currentColor; background: transparent; font: inherit; transition: background 160ms ease, border-style 160ms ease; } .puce--choix:hover { background: color-mix(in srgb, currentColor 10%, transparent); } .puce--choix[aria-pressed="true"] { border-style: solid; background: color-mix(in srgb, currentColor 18%, transparent); font-weight: 600; } .puce--choix[aria-pressed="true"]::before { content: '✓ '; } .rappel { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 12px; padding: 10px 13px; border-radius: var(--rayon); background: var(--carte); border: 1px solid var(--carte-bord); font-size: var(--t-sm); color: var(--doux); } /* ========================================================================== Le panneau de personnalisation, en bulles séparées. Avant : un seul bloc où score, alertes, exigences et retouches s'empilaient. On dérouillait quarante lignes pour voir trois puces, et rien ne disait ce qui était modifiable. Maintenant : chaque sujet est une bulle autonome, avec son icône et son compte. Une seule s'ouvre à la fois — géré en JavaScript, parce que
n'a pas de notion de groupe exclusif. ========================================================================== */ .pave { background: var(--carte); border: 1px solid var(--carte-bord); border-radius: 14px; margin-bottom: 10px; overflow: hidden; transition: border-color 200ms ease, box-shadow 200ms ease; } .pave:hover { border-color: var(--sourd); } .pave[open] { border-color: var(--bleu); box-shadow: var(--ombre); } .pave__tete { display: flex; align-items: center; gap: 10px; padding: 13px 15px; cursor: pointer; list-style: none; user-select: none; font-size: var(--t-sm); color: var(--clair); } .pave__tete::-webkit-details-marker { display: none; } .pave__jeton { width: 28px; height: 28px; flex: none; border-radius: 9px; display: flex; align-items: center; justify-content: center; background: var(--toile); color: var(--sourd); font-size: 14px; } .pave__jeton--vert { background: color-mix(in srgb, var(--vert) 14%, transparent); color: var(--vert); } .pave__jeton--bleu { background: color-mix(in srgb, var(--bleu) 14%, transparent); color: var(--bleu); } .pave__nom { flex: 1; } .pave__compte { color: var(--sourd); font-size: var(--t-xs); } .pave__chevron { color: var(--sourd); font-size: 17px; line-height: 1; transition: transform 260ms ease; } .pave[open] .pave__chevron { transform: rotate(45deg); } .pave__corps { padding: 0 15px 15px; } .pave__aide { margin: 0 0 10px; color: var(--sourd); font-size: var(--t-xs); line-height: 1.55; } .pave__pied { margin: 8px 0 0; color: var(--sourd); font-size: var(--t-xs); } /* La bulle « À ajouter » est celle qui invite à agir : un liseré bleu la distingue sans crier. */ .pave--ajout { border-left: 3px solid var(--bleu); } .pave--score { padding: 15px; } .pave--action { padding: 15px; background: var(--toile); border-color: transparent; } .pave--action .bouton[disabled] { opacity: 0.45; cursor: default; } /* Une puce qu'on peut retirer : elle se barre au lieu de disparaître, pour qu'on puisse revenir dessus. */ .puce--retirable[aria-pressed="false"] { opacity: 0.45; text-decoration: line-through; border-style: dashed; } @media (prefers-reduced-motion: reduce) { .pave, .pave__chevron { transition: none; } } /* --- Réponses toutes prêtes ------------------------------------------------- Placées AVANT le champ libre, et volontairement plus visibles que lui : la plupart des gens abandonnent devant un champ vide, pas devant une question difficile. Un clic remplit le champ, qui reste modifiable. */ .choix-rapide { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; } .pastille { padding: 7px 13px; border-radius: 16px; border: 1px solid var(--carte-bord); background: var(--carte); color: var(--doux); font-family: inherit; font-size: var(--t-xs); line-height: 1.35; text-align: left; cursor: pointer; transition: border-color 160ms ease, background 160ms ease, transform 120ms ease; } .pastille:hover { border-color: var(--bleu); color: var(--clair); transform: translateY(-1px); } .pastille--choisie { border-color: var(--bleu); background: color-mix(in srgb, var(--bleu) 12%, transparent); color: var(--bleu); font-weight: 600; } .pastille--choisie::before { content: '✓ '; } @media (prefers-reduced-motion: reduce) { .pastille { transition: none; } .pastille:hover { transform: none; } } /* --- Rideau d'offres -------------------------------------------------------- Il remplace l'écran rouge « Traitement interrompu » quand les crédits sont épuisés. Ce n'était pas une panne : c'était le seul instant du parcours où la personne est décidée à payer, et on lui opposait un bouton « Réessayer » qui ne pouvait que réechouer. Les montants ne sont pas écrits ici : ils viennent de /api/offres, donc de Stripe. Deux prix affichés à deux endroits finissent toujours par diverger, et celui qui se trompe est celui qu'on a oublié de mettre à jour. */ .rideau { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: var(--u); background: rgba(14, 20, 32, 0.55); backdrop-filter: blur(3px); animation: rideau-entre 0.18s ease both; } .rideau__boite { position: relative; width: min(430px, 100%); background: var(--carte); border: 1px solid var(--carte-bord); border-radius: var(--rayon-lg); box-shadow: var(--ombre); padding: calc(var(--u) * 3.5); animation: rideau-monte 0.24s cubic-bezier(0.34, 1.3, 0.64, 1) both; } .rideau__fermer { position: absolute; top: 10px; right: 12px; background: transparent; border: 0; color: var(--sourd); font-size: 24px; line-height: 1; cursor: pointer; padding: 4px 8px; } .rideau__fermer:hover { color: var(--clair); } @keyframes rideau-entre { from { opacity: 0; } to { opacity: 1; } } @keyframes rideau-monte { from { opacity: 0; transform: translateY(12px) scale(0.98); } to { opacity: 1; transform: none; } } /* Les cartes du rideau : les mêmes que la page Tarifs, en plus compact. Deux lignes avec un prix à droite se lisaient comme une facture. Ici la personne doit CHOISIR — il lui faut le prix en grand, ce que ça donne, et laquelle est la plus prise. */ .rideau__boite--large { width: min(660px, 100%); } .offre-carte__rang { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } @media (max-width: 560px) { .offre-carte__rang { grid-template-columns: 1fr; } } .offre-carte { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 20px 18px 16px; cursor: pointer; text-align: left; background: var(--carte); border: 1px solid var(--champ-bord); border-radius: var(--rayon); font-family: inherit; transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease; } .offre-carte:hover { border-color: var(--bleu); box-shadow: var(--ombre); transform: translateY(-2px); } .offre-carte.est-vedette { border-color: var(--bleu); background: var(--bleu-fond); } .offre-carte.est-en-cours { opacity: 0.6; cursor: progress; transform: none; } .offre-carte__ruban { position: absolute; top: -10px; left: 18px; background: var(--bleu); color: #fff; border-radius: 999px; font-size: 11px; font-weight: 600; padding: 3px 10px; letter-spacing: 0.02em; } .offre-carte__nom { font-size: var(--t-xs); font-weight: 600; color: var(--sourd); text-transform: uppercase; letter-spacing: 0.06em; } .offre-carte__prix { font-size: 2rem; font-weight: 600; color: var(--clair); line-height: 1.1; display: flex; align-items: baseline; gap: 6px; } .offre-carte__prix small { font-size: var(--t-xs); font-weight: 400; color: var(--sourd); } .offre-carte__argument { font-size: var(--t-sm); color: var(--doux); margin-bottom: 8px; } .offre-carte__points { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; } .offre-carte__point { font-size: var(--t-xs); color: var(--doux); padding-left: 18px; position: relative; } .offre-carte__point::before { content: '✓'; position: absolute; left: 0; color: var(--vert); font-weight: 600; } .offre-carte__action { margin-top: auto; text-align: center; padding: 10px; border-radius: 8px; font-size: var(--t-sm); font-weight: 600; background: var(--champ); border: 1px solid var(--champ-bord); color: var(--clair); } .offre-carte.est-vedette .offre-carte__action { background: var(--bleu); border-color: var(--bleu); color: #fff; } /* --- Page de suivi (interne) ------------------------------------------------- Deux chiffres commandent tout et occupent le haut : le coût mesuré d'un CV, et le nombre d'appels par CV. Le second dit si l'on repaie des choses — six est le régime normal, douze veut dire qu'un montant part sans qu'on le voie. Le reste de la page ne sert qu'à expliquer ces deux nombres. */ .suivi__phare { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 30px; } @media (max-width: 560px) { .suivi__phare { grid-template-columns: 1fr; } } .suivi__carte { display: flex; flex-direction: column; gap: 2px; background: var(--carte); border: 1px solid var(--carte-bord); border-radius: var(--rayon); padding: 18px 20px; } .suivi__valeur { font-size: 2.1rem; font-weight: 600; color: var(--clair); line-height: 1.1; } .suivi__valeur small { font-size: var(--t-sm); font-weight: 400; color: var(--sourd); } .suivi__titre { font-size: var(--t-sm); font-weight: 600; color: var(--doux); margin-top: 6px; } .suivi__detail { font-size: var(--t-xs); color: var(--sourd); } .suivi__table { width: 100%; border-collapse: collapse; font-size: var(--t-xs); background: var(--carte); border: 1px solid var(--carte-bord); border-radius: var(--rayon); overflow: hidden; } .suivi__table th { text-align: left; font-weight: 600; color: var(--sourd); padding: 9px 12px; border-bottom: 1px solid var(--carte-bord); text-transform: uppercase; letter-spacing: 0.04em; font-size: 11px; } .suivi__table td { padding: 9px 12px; border-bottom: 1px solid var(--carte-bord); color: var(--doux); } .suivi__table tr:last-child td { border-bottom: 0; } .suivi__table td:first-child { color: var(--clair); font-weight: 500; } /* La barre de part : lue d'un coup d'œil, l'étage le plus cher saute aux yeux. */ .suivi__part { display: inline-block; height: 6px; border-radius: 3px; background: var(--bleu); vertical-align: middle; margin-right: 6px; max-width: 90px; } /* Les repères « CV produit » ne coûtent rien : ils bornent, ils ne dépensent pas. */ .suivi__repere td { color: var(--tres-sourd); font-style: italic; } /* --- L'avis sur le document ------------------------------------------------ Sous la barre d'onglets, discret. Le score affiché à gauche est notre estimation ; ces deux boutons sont le seul endroit où la personne qui va envoyer le CV donne le sien. */ .avis { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 9px calc(var(--u) * 1.5); border-bottom: 1px solid var(--carte-bord); background: var(--nuit); } .avis__question { font-size: var(--t-xs); color: var(--sourd); margin-right: 2px; } .avis__pouce { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; cursor: pointer; background: var(--carte); border: 1px solid var(--champ-bord); border-radius: 8px; color: var(--sourd); transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease; } .avis__pouce:hover { color: var(--bleu-vif); border-color: var(--bleu); background: var(--bleu-fond); } .avis__raison { background: var(--carte); border: 1px solid var(--champ-bord); border-radius: 999px; color: var(--doux); font-family: inherit; font-size: 11.5px; padding: 4px 11px; cursor: pointer; transition: color 0.15s ease, border-color 0.15s ease; } .avis__raison:hover { color: var(--bleu-vif); border-color: var(--bleu); }