/* ==========================================================================
Kolytica Job · socle visuel de l'app candidat mobile (lot U1, issue #146)
--------------------------------------------------------------------------
CONTRAT CSS consommé par les lots U2 à U9. Classes stables, sans logique.
Référence documentaire : docs/JOBS_UX_GUIDELINES.md (exemples de markup,
règles motion et accessibilité). Chargement attendu dans jobs/index.html,
APRÈS la charte et la feuille landing (inclusion faite par le lot U2) :
Dépendances : kolytica-charte.css (tokens de marque --teal, --navy, --gold,
--ivory, --line, --slate, --on-teal, boutons .btn/.btn-teal). Ce fichier ne
redéfinit AUCUN token de marque : le bloc :root ci-dessous ne déclare que
des variables préfixées --app-. Toutes les classes sont préfixées .app-
pour éviter tout conflit avec kolytica-jobs.css (préfixe .jobs-).
COMPOSANTS ET ÉTATS (le contrat) :
.app-feed Conteneur de défilement vertical plein viewport.
scroll-snap-type: y mandatory, hauteur 100dvh
(repli 100vh), barre de défilement masquée.
.app-screen Écran plein viewport, enfant direct de .app-feed.
scroll-snap-align: start, colonne flex, safe-areas
haut et côtés intégrées.
.app-screen--pad-bottom Variante : ajoute le padding bas + safe-area
(écran SANS .app-actionbar en pied).
.app-card Carte offre plein écran (colonne flex, flex:1 dans
.app-screen). Zones internes :
.app-card-kicker Sur-titre (source ou statut), style eyebrow teal.
.app-card-title Titre de l'offre + organisation, navy.
.app-card-meta Rangée méta (lieu, modalité, contrat), ardoise.
.app-card-flip Recto/verso : deux .app-card-face superposées,
rotation au bouton « Voir » (verso = fiche).
.app-offer-points Puces d'aide à la décision (recto, 3 max).
.app-card-note Mention discrète (transparence, date).
.app-scrim Voile plein écran derrière la bottom-sheet.
Masqué par [hidden], fondu 150ms à l'apparition.
.app-sheet Bottom-sheet : collée en bas, coins hauts 20px,
montée 250ms, safe-area basse, [hidden] géré.
.app-sheet-handle Poignée décorative (aria-hidden="true").
.app-sheet-title Titre de la feuille (cible de aria-labelledby).
.app-sheet-body Contenu, défile en interne si trop haut.
.app-progress Barre de progression fine du wizard (fond ligne).
.app-progress-fill Remplissage teal, largeur en % posée en style
inline par le JS, transition 250ms.
.app-chip Choix tactile (bouton), pilule >= 44px.
État sélectionné : .is-selected OU aria-pressed
="true" OU aria-checked="true" (fond teal foncé,
texte blanc).
.app-chip-grid Grille de chips (flex wrap, gap 10px).
.app-actionbar Barre d'actions basse collée (position sticky,
safe-area basse). 3 emplacements en grille :
secondaire · principal · secondaire. Emplacement
vide = .
.app-iconbtn Bouton icône rond 48px pour les emplacements
secondaires de .app-actionbar.
.app-skeleton Bloc de chargement animé (scintillement 1.3s,
statique si mouvement réduit). Variantes :
.app-skeleton--title / --text / --chip / --card
MOTION : 3 durées (150ms micro, 250ms entrées et progressions, 400ms
grands déplacements) sur la courbe cubic-bezier(.2,.8,.2,1). Le bloc
final prefers-reduced-motion neutralise TOUTES les animations et
transitions du namespace .app-.
FORMAT PC : la section 13 (issue #203) rebâtit l'espace candidat à partir
de 920px (flux en grille, colonnes de mesure, barres d'actions décollées).
Tout y vit sous @media (min-width: 920px) : le rendu mobile ci-dessous
n'est jamais modifié. Détail dans docs/JOBS_UX_GUIDELINES.md, section 6.
========================================================================== */
/* ==========================================================================
1. Tokens (préfixe --app- uniquement, aucun token de marque redéfini)
========================================================================== */
:root{
/* Viewport plein écran : 100vh en repli, 100dvh dès que supporté */
--app-vh:100vh;
/* Safe-areas iOS (0px hors contexte encoché) */
--app-safe-top:env(safe-area-inset-top, 0px);
--app-safe-right:env(safe-area-inset-right, 0px);
--app-safe-bottom:env(safe-area-inset-bottom, 0px);
--app-safe-left:env(safe-area-inset-left, 0px);
/* Rayons */
--app-r-sm:12px; /* petits blocs, skeletons */
--app-r-md:16px; /* encadrés internes */
--app-r-sheet:20px; /* coins hauts de la bottom-sheet */
--app-r-lg:24px; /* carte offre plein écran */
--app-r-pill:999px; /* chips, poignée, barre de progression */
/* Ombres (élévation douce, cohérente avec la charte) */
--app-sh-card:0 18px 44px rgba(20,34,79,.10);
--app-sh-sheet:0 -18px 48px rgba(20,34,79,.20);
--app-sh-chip:0 10px 24px rgba(11,111,98,.22);
/* Échelle z-index (le header landing est à 80, le skip-link à 200) */
--app-z-raised:10; /* éléments soulevés dans un écran */
--app-z-actionbar:60; /* barre d'actions basse */
--app-z-snackbar:90; /* annulation du swipe, au-dessus de l'actionbar */
--app-z-scrim:120; /* voile au-dessus du header */
--app-z-sheet:130; /* bottom-sheet au-dessus du voile */
/* Durées et courbe standard */
--app-t-fast:150ms; /* micro-retours (survol, fondu du voile) */
--app-t-base:250ms; /* entrées (sheet), progression du wizard */
--app-t-slow:400ms; /* grands déplacements (transitions d'écran) */
--app-ease:cubic-bezier(.2, .8, .2, 1);
/* Cible tactile minimale */
--app-tap:44px;
/* Padding horizontal partagé carte et sheet */
--app-pad:clamp(16px, 4.8vw, 24px);
}
@supports (height: 100dvh){
:root{ --app-vh:100dvh; }
}
/* ==========================================================================
2. Flux plein écran : .app-feed > .app-screen
========================================================================== */
.app-feed{
width:100%;
max-width:100%;
min-width:0;
/* Le flux occupe la hauteur d'ecran QUI RESTE sous l'en-tete et la barre de
recherche, pas la fenetre entiere : sinon la carte deborde d'autant vers le
bas et sa barre d'actions tombe sous la ligne de flottaison. L'ecart est
mesure au montage par feed.mjs (--app-feed-top). */
height:calc(var(--app-vh) - var(--app-feed-top, 0px));
/* CONTENEUR DE POSITIONNEMENT. Sans cela, les elements en position absolue
des cartes (le verso, notamment) prennent pour reference un ancetre situe
HORS du conteneur de defilement : ils echappent alors a son ecretage et
gonflent la hauteur du document. Mesure sur le pilote : la page se
deroulait sur 4649 px alors que le contenu, pied de page compris, en fait
1098. L'utilisateur pouvait defiler bien au-dela du pied de page, dans le
vide. */
position:relative;
overflow-y:auto;
overflow-x:clip;
scroll-snap-type:y mandatory;
overscroll-behavior-y:contain;
-webkit-overflow-scrolling:touch;
scrollbar-width:none;
}
.app-feed::-webkit-scrollbar{ display:none; }
.app-screen{
display:flex;
flex-direction:column;
width:100%;
min-width:0;
min-height:calc(var(--app-vh) - var(--app-feed-top, 0px));
box-sizing:border-box;
overflow-x:clip;
scroll-snap-align:start;
scroll-snap-stop:always;
padding:calc(14px + var(--app-safe-top))
calc(16px + var(--app-safe-right))
0
calc(16px + var(--app-safe-left));
}
.app-feed > .app-screen{
height:calc(var(--app-vh) - var(--app-feed-top, 0px));
min-height:calc(var(--app-vh) - var(--app-feed-top, 0px));
}
/* Écran sans barre d'actions basse : rétablit le padding bas + safe-area */
.app-screen--pad-bottom{
padding-bottom:calc(16px + var(--app-safe-bottom));
}
.app-screen--pad-bottom[data-jobs-feed-empty],
.app-screen--pad-bottom[data-jobs-feed-error],
.app-screen--pad-bottom[data-jobs-feed-end]{
padding-bottom:0;
}
/* ==========================================================================
3. Carte offre plein écran : .app-card
========================================================================== */
.app-card{
display:flex;
flex-direction:column;
flex:1;
width:100%;
max-width:100%;
min-width:0;
min-height:0;
padding:var(--app-pad);
padding-bottom:0;
border:1px solid var(--line);
border-radius:var(--app-r-lg);
background:var(--white);
box-shadow:var(--app-sh-card);
overflow:hidden;
}
.app-card-kicker{
max-width:100%;
color:var(--teal-dark);
font-size:.7rem;
font-weight:850;
letter-spacing:.16em;
text-transform:uppercase;
overflow-wrap:anywhere;
}
.app-card-title{
min-width:0;
max-width:100%;
margin-top:10px;
color:var(--navy);
font-size:clamp(1.38rem, 5.8vw, 2.05rem);
font-weight:750;
letter-spacing:-.02em;
/* Ne jamais descendre sous ~1.2 : en dessous, l'interligne devient negatif
par rapport a la boite d'encre des polices de --font, et le conteneur a
overflow cache rase le haut des capitales et des accents. */
line-height:1.22;
text-wrap:balance;
overflow-wrap:anywhere;
word-break:break-word;
hyphens:auto;
}
.app-card-meta{
display:flex;
min-width:0;
max-width:100%;
flex-wrap:wrap;
gap:6px 16px;
margin-top:10px;
color:var(--slate);
font-size:.94rem;
overflow-wrap:anywhere;
}
.app-card-meta strong{ color:var(--navy); }
.app-card-meta > *{
min-width:0;
max-width:100%;
}
.app-card-meta > .app-chip{
min-height:36px;
padding:.38rem .75rem;
cursor:default;
font-size:.82rem;
}
.app-card-reasons{
display:grid;
gap:11px;
align-content:start;
flex:1;
min-height:0;
margin:18px 0 0;
padding:0;
list-style:none;
overflow-y:auto;
overflow-x:hidden;
overscroll-behavior:contain;
scrollbar-gutter:stable;
}
.app-card-reasons li{
position:relative;
max-width:100%;
padding-left:22px;
color:var(--ink);
font-size:.95rem;
overflow-wrap:anywhere;
}
.app-card-reasons li::before{
content:"";
position:absolute;
top:.56em;
left:2px;
width:8px;
height:8px;
border-radius:50%;
background:var(--teal);
}
.app-card-note{
margin-top:14px;
color:var(--slate);
font-size:.8rem;
overflow-wrap:anywhere;
}
/* ==========================================================================
4. Bottom-sheet : .app-scrim + .app-sheet
========================================================================== */
.app-scrim{
position:fixed;
inset:0;
z-index:var(--app-z-scrim);
background:rgba(9, 18, 42, .52);
animation:app-fade-in var(--app-t-fast) var(--app-ease);
}
.app-sheet{
position:fixed;
right:0;
bottom:0;
left:0;
z-index:var(--app-z-sheet);
display:flex;
flex-direction:column;
width:min(100%, 640px);
max-width:640px;
max-height:calc(var(--app-vh) - 28px - var(--app-safe-top));
margin-inline:auto;
padding:10px
calc(var(--app-pad) + var(--app-safe-right))
calc(16px + var(--app-safe-bottom))
calc(var(--app-pad) + var(--app-safe-left));
border:1px solid var(--line);
border-bottom:0;
border-radius:var(--app-r-sheet) var(--app-r-sheet) 0 0;
background:var(--white);
box-shadow:var(--app-sh-sheet);
overflow:hidden;
animation:app-sheet-up var(--app-t-base) var(--app-ease);
}
/* [hidden] gagne toujours, y compris sur l'animation d'entrée */
.app-sheet[hidden],
.app-scrim[hidden]{ display:none; }
.app-sheet-handle{
flex:none;
width:44px;
height:5px;
margin:0 auto 14px;
border-radius:var(--app-r-pill);
background:var(--line);
}
.app-sheet-title{
flex:none;
max-width:100%;
color:var(--navy);
font-size:1.18rem;
font-weight:800;
letter-spacing:-.01em;
line-height:1.2;
overflow-wrap:anywhere;
}
.app-sheet-note{
flex:none;
margin-top:8px;
color:var(--slate);
font-size:.88rem;
line-height:1.45;
overflow-wrap:anywhere;
}
.app-sheet-body{
flex:1;
min-height:0;
margin-top:10px;
padding-bottom:4px;
overflow-y:auto;
overflow-x:hidden;
overscroll-behavior:contain;
}
.app-sheet > [data-feed-reason-list]{
flex:1;
min-height:0;
align-content:flex-start;
margin-top:14px;
padding:3px 2px 12px;
overflow-y:auto;
overflow-x:hidden;
overscroll-behavior:contain;
}
.app-sheet[data-feed-dismiss-sheet]{
padding-bottom:0;
}
@keyframes app-sheet-up{
from{ transform:translateY(100%); }
to{ transform:translateY(0); }
}
@keyframes app-fade-in{
from{ opacity:0; }
to{ opacity:1; }
}
/* ==========================================================================
5. Progression du wizard : .app-progress > .app-progress-fill
========================================================================== */
.app-progress{
height:4px;
border-radius:var(--app-r-pill);
background:rgba(20, 34, 79, .12);
overflow:hidden;
}
.app-progress-fill{
width:0;
height:100%;
border-radius:inherit;
background:linear-gradient(90deg, var(--teal-dark), var(--teal));
transition:width var(--app-t-base) var(--app-ease);
}
/* ==========================================================================
6. Choix tactiles : .app-chip-grid > .app-chip
========================================================================== */
.app-chip-grid{
display:flex;
flex-wrap:wrap;
gap:10px;
max-width:100%;
min-width:0;
margin:0;
padding:0;
list-style:none;
}
.app-chip-grid > *{
max-width:100%;
min-width:0;
}
.app-chip{
position:relative;
display:inline-flex;
flex:0 1 auto;
align-items:center;
justify-content:center;
gap:.45em;
min-width:var(--app-tap);
max-width:100%;
min-height:var(--app-tap);
padding:.5rem 1.05rem;
border:1.5px solid var(--line);
border-radius:var(--app-r-pill);
color:var(--navy);
background:var(--white);
cursor:pointer;
font:inherit;
font-size:.95rem;
font-weight:700;
line-height:1.25;
text-align:center;
white-space:normal;
overflow-wrap:anywhere;
-webkit-tap-highlight-color:transparent;
transition:background-color var(--app-t-fast) var(--app-ease),
border-color var(--app-t-fast) var(--app-ease),
color var(--app-t-fast) var(--app-ease),
box-shadow var(--app-t-fast) var(--app-ease);
}
.app-chip:hover{ border-color:var(--teal); }
.app-chip:focus-visible{
outline:2px solid var(--teal);
outline-offset:3px;
}
/* Une legende de fieldset se pose par defaut SUR la bordure haute de la
carte : la question chevauchait alors le bord et ses deux premieres lignes
sortaient de la carte sur telephone. Le flottement la remet dans le flux.
Le format PC avait deja ce correctif, le format mobile ne l'avait pas. */
.jobs-onboarding__step > legend.app-card-title{
float:left;
width:100%;
}
.app-chip.is-selected,
.app-chip[aria-pressed="true"],
.app-chip[aria-checked="true"],
.app-chip:has(> input:checked){
border-color:var(--teal-dark);
background:var(--teal-dark);
color:#fff;
box-shadow:var(--app-sh-chip);
}
label.app-chip{
justify-content:flex-start;
text-align:left;
}
.app-chip > input[type="checkbox"],
.app-chip > input[type="radio"]{
position:relative;
flex:none;
inline-size:20px;
block-size:20px;
margin:0;
/* Teal, pas or : la charte reserve l'or a un seul geste decor par vue, et
une coche or sur le fond teal fonce de l'etat selectionne ne donnait que
2,39:1 de contraste, sous le minimum de 3:1 exige pour un composant
d'interface. La coche blanche sur teal fonce monte a 6:1. */
accent-color:var(--teal-dark);
cursor:pointer;
}
/* Dans un choix SELECTIONNE (fond teal fonce), la coche passe en blanc. */
.app-chip.is-selected > input[type="checkbox"],
.app-chip.is-selected > input[type="radio"],
.app-chip:has(> input:checked) > input[type="checkbox"],
.app-chip:has(> input:checked) > input[type="radio"]{
accent-color:#fff;
}
.app-chip:has(> input:focus-visible){
outline:2px solid var(--teal);
outline-offset:3px;
}
select.app-chip,
input.app-chip{
width:100%;
min-width:0;
}
/* ==========================================================================
7. Barre d'actions basse : .app-actionbar (+ .app-iconbtn)
3 emplacements : secondaire · principal · secondaire.
========================================================================== */
.app-actionbar{
position:sticky;
bottom:0;
z-index:var(--app-z-actionbar);
display:grid;
width:100%;
min-width:0;
grid-template-columns:48px minmax(0, 1fr) 48px;
gap:clamp(8px, 3vw, 12px);
align-items:center;
margin-top:auto;
padding:14px 0 calc(12px + var(--app-safe-bottom));
background:linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, var(--white) 30%);
}
.app-actionbar > *{
max-width:100%;
min-width:0;
min-height:var(--app-tap);
}
.app-actionbar .btn{
width:100%;
min-width:0;
min-height:48px;
padding-inline:clamp(.75rem, 4vw, 1.4rem);
white-space:normal;
}
/* Pleine largeur de carte : la barre annule le padding horizontal du parent */
.app-card > .app-actionbar{
width:calc(100% + var(--app-pad) + var(--app-pad));
margin-inline:calc(-1 * var(--app-pad));
padding-inline:var(--app-pad);
border-radius:0 0 var(--app-r-lg) var(--app-r-lg);
}
.app-sheet > .app-actionbar{
flex:none;
width:calc(100% + var(--app-pad) + var(--app-pad) + var(--app-safe-left) + var(--app-safe-right));
grid-template-columns:repeat(2, minmax(0, 1fr));
margin-left:calc(0px - var(--app-pad) - var(--app-safe-left));
margin-right:calc(0px - var(--app-pad) - var(--app-safe-right));
padding-left:calc(var(--app-pad) + var(--app-safe-left));
padding-right:calc(var(--app-pad) + var(--app-safe-right));
border-top:1px solid rgba(20, 34, 79, .08);
}
.app-sheet > .app-actionbar > [aria-hidden="true"]{
display:none;
}
.app-iconbtn{
display:inline-flex;
align-items:center;
justify-content:center;
width:48px;
height:48px;
padding:0;
border:1.5px solid var(--line);
border-radius:50%;
color:var(--navy);
background:var(--white);
cursor:pointer;
font:inherit;
-webkit-tap-highlight-color:transparent;
transition:border-color var(--app-t-fast) var(--app-ease),
background-color var(--app-t-fast) var(--app-ease),
color var(--app-t-fast) var(--app-ease);
}
.app-iconbtn:hover{
border-color:var(--teal);
background:rgba(15, 157, 140, .06);
}
.app-iconbtn:focus-visible{
outline:2px solid var(--teal);
outline-offset:3px;
}
.app-iconbtn svg{ width:22px; height:22px; }
/* ==========================================================================
8. Snackbar d'annulation du swipe
========================================================================== */
/* --- Etat « enregistree » du signet ---------------------------------------
Il n'existait AUCUNE regle pour [aria-pressed="true"] : le bouton posait
l'attribut sans changer d'un pixel. Le signet se remplit desormais et passe
en teal plein, ce qui se voit d'un coup d'oeil sur un telephone. */
.app-iconbtn[aria-pressed="true"]{
border-color:var(--teal-dark);
color:#fff;
background:var(--teal-dark);
}
.app-iconbtn[aria-pressed="true"] svg{
fill:currentColor;
stroke:currentColor;
}
/* Confirmation breve : le signet marque le coup au moment du clic. */
@keyframes app-saved-pop{
0%{ transform:scale(1); }
45%{ transform:scale(1.18); }
100%{ transform:scale(1); }
}
.app-iconbtn[aria-pressed="true"] svg{
animation:app-saved-pop var(--app-t-base) var(--app-ease);
}
.app-iconbtn:disabled{ opacity:.55; cursor:progress; }
[aria-busy="true"] .app-actionbar{ opacity:.85; }
@media (prefers-reduced-motion: reduce){
.app-iconbtn[aria-pressed="true"] svg{ animation:none; }
}
@media (forced-colors: active){
.app-iconbtn[aria-pressed="true"]{ border:2px solid CanvasText; }
}
/* Bandeau d'erreur : meme composant que la confirmation, ton distinct. */
.app-snackbar--error{
color:#fff;
background:#7A1E1E;
}
/* Le message garde la largeur, l'action reste compacte : sinon un libelle
long ecrase le texte et le coupe en plein mot. */
.app-snackbar > a.btn,
.app-snackbar > button.btn{
flex:none;
white-space:nowrap;
}
.app-snackbar > span{ overflow-wrap:normal; }
.app-snackbar{
position:fixed;
right:calc(12px + var(--app-safe-right));
bottom:calc(84px + var(--app-safe-bottom));
left:calc(12px + var(--app-safe-left));
z-index:var(--app-z-snackbar);
display:flex;
width:auto;
max-width:520px;
min-height:56px;
align-items:center;
gap:12px;
margin-inline:auto;
padding:8px 8px 8px 16px;
border:1px solid rgba(255, 255, 255, .18);
border-radius:16px;
color:#fff;
background:var(--navy);
box-shadow:0 18px 44px rgba(9, 18, 42, .28);
animation:app-snackbar-in var(--app-t-base) var(--app-ease);
}
.app-snackbar[hidden]{ display:none; }
.app-snackbar > span{
flex:1;
min-width:0;
line-height:1.35;
overflow-wrap:anywhere;
}
.app-snackbar .btn{
flex:none;
min-width:var(--app-tap);
min-height:var(--app-tap);
padding:.55rem .85rem;
border-color:rgba(255, 255, 255, .55);
color:var(--navy);
background:#fff;
}
@keyframes app-snackbar-in{
from{ opacity:0; transform:translateY(18px); }
to{ opacity:1; transform:translateY(0); }
}
/* ==========================================================================
9. Wizard candidat
========================================================================== */
.jobs-onboarding,
.jobs-onboarding__form,
.jobs-onboarding__heading{
width:100%;
max-width:100%;
min-width:0;
}
.jobs-onboarding__heading{
display:grid;
gap:8px;
max-width:720px;
}
/* --- Reperes visuels du parcours profil -----------------------------------
Le wizard est natif dans la page (aucune carte flottante), mais sans
cartes plus rien ne se distinguait. La hierarchie repose donc sur la
couleur, le rythme et des filets francs, pas sur des blocs blancs. */
/* Titre de section : vert, pour le detacher franchement de la question. */
.jobs-onboarding__heading .t-h2-sm{
color:var(--teal-dark);
}
/* La question est le repere principal : elle reste navy et garde sa taille. */
.jobs-onboarding__step > legend.app-card-title{
color:var(--navy);
}
/* Bandeau de progression : une bande a part entiere, pas une ligne perdue. */
.jobs-onboarding__progress-head{
margin-bottom:8px;
padding-bottom:2px;
color:var(--teal-dark);
font-size:.86rem;
font-weight:800;
letter-spacing:.02em;
}
/* Separation franche entre l'en-tete de page et le corps du parcours. */
.jobs-onboarding__form{
margin-top:14px;
padding-top:18px;
border-top:1px solid var(--line);
}
/* La barre de progression etait laissee au rendu par defaut du navigateur
(extremites carrees). Elle reprend ici la pastille et le teal de la charte.
Les pseudo-elements doivent etre stylees separement, sinon ils repeignent
par-dessus l'hote. */
.jobs-onboarding__progress{
appearance:none;
-webkit-appearance:none;
width:100%;
height:8px;
border:0;
border-radius:var(--r-pill);
background:var(--line);
overflow:hidden;
}
.jobs-onboarding__progress::-webkit-progress-bar{
background:var(--line);
border-radius:var(--r-pill);
}
.jobs-onboarding__progress::-webkit-progress-value{
background:var(--teal);
border-radius:var(--r-pill);
}
.jobs-onboarding__progress::-moz-progress-bar{
background:var(--teal);
border-radius:var(--r-pill);
}
/* Bloc de choix : un groupe visible, detache de la question. */
.jobs-onboarding__step .app-chip-grid{
margin-top:14px;
padding-top:14px;
border-top:1px dashed rgba(231, 225, 210, .95);
}
/* Zone de recherche du referentiel : un sous-bloc identifiable, dans le meme
langage de carte que le reste de la charte. */
.jobs-onboarding__taxonomy-search{
margin-top:14px;
padding:14px 16px;
border:1px solid var(--line);
border-radius:var(--r-card);
background:var(--white);
box-shadow:var(--sh-1);
}
/* Etape de validation : la liste des reponses est une section a part. */
.jobs-onboarding__summary-list{
margin-top:18px;
padding-top:18px;
/* Filet d'accent teal vers or de la charte (.accent-rule), repris en
bordure pour ne pas ajouter d'element au markup. */
border-top:3px solid transparent;
border-image:linear-gradient(90deg, var(--teal), var(--gold)) 1;
}
/* Sur telephone, cet en-tete mesurait 282 px AVANT la premiere question, ce
qui repoussait la barre « Continuer » bien au-dela de l'ecran. On le
resserre sans rien retirer de l'engagement de collecte minimale. */
@media (max-width: 619px){
.jobs-onboarding__heading{ gap:6px; }
.jobs-onboarding__heading .t-h2-sm{ font-size:1.35rem; line-height:1.2; }
.jobs-onboarding__heading .lead{ font-size:.92rem; line-height:1.4; }
/* La question elle-meme : lisible sans occuper un tiers de l'ecran. */
.jobs-onboarding__step > legend.app-card-title{ font-size:1.25rem; line-height:1.25; }
}
.jobs-onboarding__privacy{
max-width:68ch;
padding:9px 12px;
border-left:3px solid var(--teal);
color:var(--slate);
background:rgba(15, 157, 140, .07);
font-size:.88rem;
}
/* La barre du wizard reste accessible au pouce, mais son degrade blanc posait
un bandeau clair sur l'ivoire : elle prend la couleur de la page et se
separe par un simple filet. */
.jobs-onboarding__form .app-actionbar{
background:linear-gradient(180deg, rgba(251, 247, 236, 0) 0%, var(--ivory) 34%);
border-top:1px solid var(--line);
margin-top:18px;
}
/* Bloc de chargement : une simple ligne de texte, plus une carte blanche qui
se souleve au survol alors qu'elle n'est pas interactive. */
.jobs-onboarding__loading{
margin-top:20px;
color:var(--slate);
font-size:.95rem;
}
/* Les ecrans du wizard suivent leur contenu, pas la hauteur de la fenetre. */
.jobs-onboarding__form.app-feed > .app-screen{
height:auto;
min-height:0;
padding-inline:0;
scroll-snap-align:none;
scroll-snap-stop:normal;
}
/* Le wizard vit DANS la page, il n'est pas un panneau pose dessus : ni fond
blanc translucide, ni halo dore, ni rayon. Le fond ivoire de la page passe
au travers. */
.jobs-onboarding__form.app-feed{
border-radius:0;
background:none;
/* Herite du flux d'offres une hauteur d'ecran entiere et un defilement
aimante, qui n'ont aucun sens pour un formulaire : une etape de trois
choix occupait autant de place qu'une etape de neuf. */
height:auto;
min-height:0;
overflow:visible;
scroll-snap-type:none;
overscroll-behavior-y:auto;
}
.jobs-onboarding__wizard-header{
display:grid;
gap:9px;
width:100%;
max-width:100%;
min-width:0;
margin:14px 0 2px;
}
.jobs-onboarding__progress-head{
display:flex;
min-width:0;
align-items:center;
justify-content:space-between;
gap:8px 14px;
margin-bottom:7px;
color:var(--slate);
font-size:.78rem;
line-height:1.3;
}
.jobs-onboarding__progress-head strong{
color:var(--navy);
font-size:.84rem;
}
/* Contour retire : le contraste de remplissage entre le blanc et l'ivoire est
de 1,04:1, donc invisible. Ce qui dessinait un bloc rapporte, c'etait la
bordure, l'ombre de 44 px et le rayon de 24 px. */
.jobs-onboarding__step.app-card,
.jobs-onboarding__summary.app-card{
border:0;
border-radius:0;
background:none;
box-shadow:none;
padding-inline:0;
max-width:560px;
margin-inline:auto;
padding-bottom:var(--app-pad);
overflow:visible;
}
.jobs-onboarding__step > legend{
display:block;
float:none;
width:100%;
max-width:100%;
padding:0;
}
.jobs-onboarding__step > legend.app-card-title{
font-size:clamp(1.7rem, 6.6vw, 2.15rem);
line-height:1.06;
}
.jobs-onboarding__step > p{
margin-top:12px;
color:var(--slate);
font-size:.92rem;
overflow-wrap:anywhere;
}
.jobs-onboarding__choices{
align-content:flex-start;
margin-top:16px;
}
.jobs-onboarding__choice.app-chip{
flex:1 1 180px;
align-items:flex-start;
justify-content:flex-start;
padding:.72rem .88rem;
border-radius:var(--app-r-md);
text-align:left;
}
.jobs-onboarding__choice > span{
display:grid;
min-width:0;
gap:2px;
}
.jobs-onboarding__choice strong,
.jobs-onboarding__choice small{
max-width:100%;
overflow-wrap:anywhere;
}
.jobs-onboarding__choice small{
color:var(--slate);
font-size:.78rem;
font-weight:550;
line-height:1.35;
}
.jobs-onboarding__choice.is-selected small,
.jobs-onboarding__choice:has(> input:checked) small{
color:rgba(255, 255, 255, .82);
}
.jobs-onboarding__choice-with-level.app-chip{
display:grid;
width:100%;
flex-basis:100%;
grid-template-columns:minmax(0, 1fr) minmax(140px, .55fr);
align-items:center;
}
.jobs-onboarding__choice-with-level select{
width:100%;
min-width:0;
min-height:var(--app-tap);
padding:.55rem .7rem;
border:1px solid var(--line);
border-radius:10px;
color:var(--navy);
background:#fff;
font:inherit;
font-size:.86rem;
}
.jobs-onboarding__subgroup{
display:grid;
gap:10px;
margin-top:20px;
}
.jobs-onboarding__subgroup > h3{
font-size:1.02rem;
}
.jobs-onboarding__disclosure{
padding:0;
border:1.5px solid var(--line);
border-radius:16px;
background:rgba(255, 255, 255, .62);
}
.jobs-onboarding__disclosure > summary{
display:flex;
min-height:56px;
align-items:center;
justify-content:space-between;
gap:12px;
padding:12px 14px;
color:var(--navy);
cursor:pointer;
font-size:1.02rem;
font-weight:800;
list-style:none;
}
.jobs-onboarding__disclosure > summary::-webkit-details-marker{
display:none;
}
.jobs-onboarding__disclosure > summary::after{
content:"+";
display:grid;
flex:none;
width:30px;
height:30px;
place-items:center;
border-radius:50%;
color:var(--teal-dark);
background:rgba(15, 157, 140, .12);
font-size:1.25rem;
line-height:1;
}
.jobs-onboarding__disclosure[open] > summary::after{
content:"−";
}
.jobs-onboarding__disclosure > summary:focus-visible{
outline:2px solid var(--teal);
outline-offset:3px;
}
.jobs-onboarding__disclosure > summary small{
margin-left:auto;
color:var(--slate);
font-size:.76rem;
font-weight:650;
}
.jobs-onboarding__disclosure[open] > summary{
border-bottom:1px solid var(--line);
}
.jobs-onboarding__disclosure > :not(summary){
margin-right:14px;
margin-left:14px;
}
.jobs-onboarding__disclosure > .jobs-onboarding__choices{
margin-bottom:14px;
}
.jobs-onboarding__compensation{
display:grid;
grid-template-columns:minmax(0, 1.4fr) repeat(2, minmax(110px, .8fr));
gap:10px;
}
.jobs-onboarding__compensation label{
display:grid;
min-width:0;
gap:6px;
color:var(--navy);
font-size:.84rem;
font-weight:750;
}
.jobs-onboarding__compensation :is(input, select){
width:100%;
min-width:0;
min-height:var(--app-tap);
padding:.65rem .78rem;
border:1.5px solid var(--line);
border-radius:11px;
color:var(--ink);
background:#fff;
font:inherit;
}
.jobs-onboarding__compensation :is(input, select):focus-visible{
border-color:var(--teal);
outline:2px solid rgba(15, 157, 140, .22);
outline-offset:1px;
}
/* Precision courte sous un titre de sous-groupe : le meme gris que le reste
des textes secondaires de la charte, jamais une couleur propre. */
.jobs-onboarding__hint{
margin:0;
color:var(--slate);
font-size:.86rem;
line-height:1.45;
}
/* Un choix d'ouverture geographique porte une phrase d'explication : il occupe
toute la largeur pour rester lisible, la ou les villes tiennent en grille. */
.jobs-onboarding__choice--wide{
grid-column:1 / -1;
}
.jobs-onboarding__taxonomy-search{
width:100%;
max-width:100%;
min-width:0;
margin-top:16px;
}
.jobs-onboarding__search-label{
display:grid;
min-width:0;
gap:6px;
color:var(--navy);
font-size:.84rem;
font-weight:750;
}
.jobs-onboarding__search-label input{
width:100%;
min-width:0;
min-height:var(--app-tap);
padding:.65rem .78rem;
border:1.5px solid var(--line);
border-radius:11px;
color:var(--ink);
background:#fff;
font:inherit;
}
.jobs-onboarding__search-label input:focus{
border-color:var(--teal);
outline:2px solid rgba(15, 157, 140, .22);
outline-offset:1px;
}
.jobs-onboarding__search-empty{
margin-top:10px;
color:var(--slate);
font-size:.88rem;
}
.jobs-onboarding__error,
.jobs-onboarding__status{
flex:none;
width:100%;
max-width:560px;
margin:10px auto 0;
padding:10px 12px;
border-radius:10px;
font-size:.88rem;
overflow-wrap:anywhere;
}
.jobs-onboarding__error,
.jobs-onboarding__status[data-kind="error"]{
border:1px solid rgba(164, 64, 64, .45);
color:#702828;
background:#fff6f6;
}
.jobs-onboarding__status:not([data-kind="error"]){
border:1px solid rgba(15, 157, 140, .3);
color:var(--navy);
background:rgba(15, 157, 140, .08);
}
.jobs-onboarding__summary-list{
display:grid;
gap:10px;
margin-top:18px;
}
.jobs-onboarding__summary-item{
display:grid;
min-width:0;
grid-template-columns:minmax(0, 1fr) auto;
gap:12px;
align-items:center;
}
.jobs-onboarding__summary-item p{
color:var(--slate);
font-size:.88rem;
overflow-wrap:anywhere;
}
.jobs-onboarding__edit{
min-height:var(--app-tap);
}
.jobs-onboarding__actions.app-actionbar{
display:flex;
flex-wrap:nowrap;
grid-template-columns:none;
gap:12px;
max-width:560px;
margin-inline:auto;
}
.jobs-onboarding__actions.app-actionbar > [data-onboarding-previous]{
flex:0 1 auto;
}
.jobs-onboarding__actions.app-actionbar > [data-onboarding-next],
.jobs-onboarding__actions.app-actionbar > [data-onboarding-submit]{
flex:1 1 auto;
}
.jobs-onboarding__actions .btn{
display:inline-flex;
align-items:center;
justify-content:center;
gap:.5em;
}
/* Flèches et coche des boutons du wizard, posées en CSS (résistent aux
changements de textContent). Masque SVG teinté par currentColor. */
.jobs-onboarding__actions [data-onboarding-previous]::before,
.jobs-onboarding__actions [data-onboarding-next]::after,
.jobs-onboarding__actions [data-onboarding-submit]::before{
content:"";
flex:none;
width:1.05em;
height:1.05em;
background-color:currentColor;
-webkit-mask:center / contain no-repeat var(--app-btn-ic);
mask:center / contain no-repeat var(--app-btn-ic);
}
.jobs-onboarding__actions [data-onboarding-previous]{
--app-btn-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 5l-7 7 7 7'/%3E%3C/svg%3E");
}
.jobs-onboarding__actions [data-onboarding-next]{
--app-btn-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E");
}
.jobs-onboarding__actions [data-onboarding-submit]{
--app-btn-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l4 4 10-11'/%3E%3C/svg%3E");
}
/* ==========================================================================
9 bis. Design v2 : grandes étapes, récapitulatif clé/valeur, complétude,
cartes d'offres riches et compteurs (issue #192). Préfixe --app-/.app-,
tokens de marque teal/navy/gold uniquement (aucun violet), aucun chiffre
de correspondance : les niveaux restent ordinaux.
========================================================================== */
:root{
--app-lvl-strong-bg:rgba(31, 122, 79, .13);
--app-lvl-strong-fg:#1F7A4F;
--app-lvl-good-bg:rgba(15, 157, 140, .14);
--app-lvl-good-fg:var(--teal-dark);
--app-lvl-possible-bg:rgba(217, 149, 33, .16);
--app-lvl-possible-fg:#8A5A12;
--app-lvl-weak-bg:rgba(20, 34, 79, .08);
--app-lvl-weak-fg:var(--slate);
}
/* En-tête d'étape : « Étape x sur y » sous le grand titre, barre fine dessous */
.jobs-onboarding__progress-head{
margin-bottom:0;
}
.jobs-onboarding__progress-head strong{
font-size:.94rem;
letter-spacing:.005em;
}
/* Récapitulatif : liste clé/valeur, séparateurs fins */
.jobs-onboarding__summary-list{
gap:0;
}
/* Chaque reponse est un BLOC identifiable : un filet ne suffisait pas, tout se
confondait. Le bloc suit le langage de carte de la charte Kolytica : fond
blanc, filet var(--line), rayon var(--r-card), ombre var(--sh-1). Le lisere
teal a gauche est l'accent de la charte, pas une couleur inventee. */
.app-summary-row{
display:grid;
grid-template-columns:minmax(0, 1fr);
grid-template-areas:"key" "val" "edit";
gap:4px;
align-items:start;
margin-top:12px;
padding:16px 18px;
border:1px solid var(--line);
border-left:3px solid var(--teal);
border-radius:var(--r-card);
background:var(--white);
box-shadow:var(--sh-1);
}
.app-summary-row:first-child{ margin-top:0; }
.app-summary-key{
grid-area:key;
color:var(--slate);
font-size:.74rem;
font-weight:800;
letter-spacing:.08em;
text-transform:uppercase;
overflow-wrap:anywhere;
}
.app-summary-val{
grid-area:val;
color:var(--navy);
font-size:1.02rem;
font-weight:750;
line-height:1.35;
text-align:left;
overflow-wrap:anywhere;
}
/* « Modifier » se lisait comme un simple mot en teal, sans rien qui indique
qu'on peut cliquer. Il devient un vrai bouton discret, avec un contour et
une cible tactile reglementaire. */
.app-summary-edit{
grid-area:edit;
justify-self:start;
display:inline-flex;
align-items:center;
gap:6px;
min-height:38px;
margin-top:6px;
padding:.38rem .9rem;
border:1px solid var(--teal);
border-radius:var(--r-btn);
color:var(--teal-dark);
background:var(--white);
font:inherit;
font-size:.85rem;
font-weight:750;
cursor:pointer;
transition:background var(--app-t-fast) var(--app-ease), border-color var(--app-t-fast) var(--app-ease);
}
.app-summary-edit:hover{
border-color:var(--teal-dark);
background:rgba(15, 157, 140, .08);
}
.app-summary-edit:focus-visible{
outline:2px solid var(--teal);
outline-offset:2px;
}
.app-summary-edit:focus-visible{
outline:2px solid var(--teal);
outline-offset:3px;
}
/* Indicateur de complétude (réutilisable) : « x/y étapes » + barre fine */
.app-completion{
display:grid;
gap:8px;
margin:16px 0 4px;
}
.app-completion-head{
display:flex;
align-items:baseline;
justify-content:space-between;
gap:12px;
}
.app-completion-label{
color:var(--slate);
font-size:.86rem;
font-weight:700;
}
.app-completion-count{
color:var(--navy);
font-size:1.02rem;
font-weight:850;
white-space:nowrap;
}
/* --------------------------------------------------------------------------
Compteurs pastel en tête du flux (des COMPTES, jamais des scores)
-------------------------------------------------------------------------- */
.app-counters{
display:grid;
grid-template-columns:repeat(2, minmax(0, 1fr));
gap:10px;
width:100%;
min-width:0;
margin:0 0 12px;
padding:6px calc(2px + var(--app-safe-right)) 0 calc(2px + var(--app-safe-left));
}
.app-counter{
display:flex;
align-items:center;
gap:11px;
min-width:0;
padding:11px 13px;
border:1px solid var(--line);
border-radius:var(--app-r-md);
}
.app-counter--offers{
background:rgba(15, 157, 140, .09);
border-color:rgba(15, 157, 140, .20);
}
.app-counter--fresh{
background:rgba(217, 149, 33, .10);
border-color:rgba(217, 149, 33, .24);
}
.app-counter-ic{
display:inline-flex;
align-items:center;
justify-content:center;
width:38px;
height:38px;
flex:none;
border-radius:50%;
background:var(--white);
}
.app-counter-ic svg{ width:20px; height:20px; }
.app-counter--offers .app-counter-ic{ color:var(--teal-dark); }
.app-counter--fresh .app-counter-ic{ color:#9A6A12; }
.app-counter-body{
display:grid;
min-width:0;
gap:1px;
}
.app-counter-label{
color:var(--slate);
font-size:.76rem;
font-weight:700;
line-height:1.2;
overflow-wrap:anywhere;
}
.app-counter-num{
color:var(--navy);
font-size:1.4rem;
font-weight:850;
line-height:1;
}
/* --------------------------------------------------------------------------
Carte d'offre enrichie : .app-card.app-offer
-------------------------------------------------------------------------- */
.app-offer-scroll{
display:flex;
flex-direction:column;
flex:1;
min-height:0;
overflow-y:auto;
overflow-x:hidden;
overscroll-behavior:contain;
scrollbar-gutter:stable;
}
.app-offer-head{
display:flex;
flex-wrap:wrap;
align-items:center;
gap:8px;
margin-bottom:4px;
}
.app-badge{
display:inline-flex;
align-items:center;
gap:6px;
max-width:100%;
min-height:26px;
padding:.24rem .6rem;
border-radius:var(--app-r-pill);
font-size:.76rem;
font-weight:750;
line-height:1.2;
overflow-wrap:anywhere;
}
.app-badge svg{ width:14px; height:14px; flex:none; }
.app-badge--source{
color:var(--teal-dark);
background:rgba(15, 157, 140, .12);
}
.app-badge--source > span{
max-width:18ch;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
.app-badge--new{
color:#7A4F0A;
background:rgba(217, 149, 33, .18);
letter-spacing:.06em;
text-transform:uppercase;
font-size:.68rem;
}
.app-offer-fresh{
margin-left:auto;
color:var(--slate);
font-size:.78rem;
font-weight:650;
white-space:nowrap;
}
/* Bloc identite : logo de la structure a gauche, organisation puis titre a
droite. Le logo est decoratif (aria-hidden) ; le nom reste porte par le
kicker, qui garde son role d'etiquette lue. */
.app-offer-ident{
display:flex;
flex:none;
align-items:center;
gap:10px;
min-width:0;
margin-top:6px;
}
/* Le titre ne partage plus la largeur avec le logo : il la reprend entiere,
sinon un intitule long perd sa fin dans le clamp (mesure passee de 340 a
284 px sur un ecran de 390 px, soit une ligne de moins). */
.app-offer-ident .app-card-kicker{ min-width:0; }
/* Emplacement logo. Aucune image distante n'est possible (CSP img-src 'self'
data:) : soit un fichier du depot sous /assets/, soit un monogramme. */
.app-orglogo{
display:grid;
place-items:center;
width:44px;
height:44px;
border:1px solid rgba(20, 34, 79, .10);
border-radius:12px;
font-size:.95rem;
font-weight:850;
line-height:1;
overflow:hidden;
-webkit-user-select:none;
user-select:none;
}
.app-orglogo img{ width:100%; height:100%; object-fit:contain; }
/* Variante compacte, utilisee en ligne dans les offres enregistrees. */
.app-orglogo--sm{
width:32px;
height:32px;
flex:none;
border-radius:9px;
font-size:.78rem;
}
/* Six nuances neutres. Ni teal (couleur d'action, elle ferait lire le
monogramme comme cliquable a cote du bouton Voir), ni or (reserve au seul
geste decor de la vue, ici la pastille de la cloche), ni cyan (signe de
marque). */
.app-orglogo--t1{ color:var(--navy); background:rgba(20, 34, 79, .09); }
.app-orglogo--t2{ color:var(--navy-deep); background:rgba(20, 34, 79, .15); }
.app-orglogo--t3{ color:#3B424E; background:rgba(91, 100, 115, .13); }
.app-orglogo--t4{ color:#39414F; background:rgba(91, 100, 115, .20); }
.app-orglogo--t5{ color:#2C3550; background:rgba(44, 53, 80, .11); }
.app-orglogo--t6{ color:var(--navy-deep); background:rgba(14, 24, 54, .17); }
@media (forced-colors: active){
.app-orglogo{ border:1px solid CanvasText; }
}
.app-offer .app-card-kicker{ margin-top:2px; }
.app-offer-ident .app-card-kicker{ margin-top:0; }
.app-offer .app-card-title{
margin-top:10px;
/* La zone defilante est une colonne flex : sans cette garde, le titre se
laisse comprimer des que la fiche depliee allonge le contenu, et le clamp
finit par n'afficher aucune ligne. */
flex:none;
display:-webkit-box;
overflow:hidden;
-webkit-box-orient:vertical;
-webkit-line-clamp:4;
line-clamp:4;
}
/* Titres longs : on reduit la police plutot que de tronquer davantage. Les
annonces internationales mettent souvent le grade, le lieu et le type de
contrat dans l'intitule. */
.app-offer .app-card-title--long{ font-size:clamp(1.12rem, 4.9vw, 1.62rem); }
.app-offer .app-card-title--xlong{ font-size:clamp(1rem, 4.2vw, 1.4rem); }
/* --- Note de correspondance : jauge ordinale, aucun chiffre ---------------
Quatre crans allumes selon le niveau du moteur (seuils 75/60/45/0). La
couleur et le mot portent la meme information, sans fausse precision. */
.app-note{
display:inline-flex;
align-items:center;
gap:.55em;
max-width:100%;
min-height:30px;
padding:.3rem .8rem;
border-radius:var(--app-r-pill);
font-size:.82rem;
}
.app-note-label{ font-weight:650; opacity:.8; }
.app-note-value{ font-weight:800; }
.app-note-gauge{ display:inline-flex; gap:3px; }
.app-note-gauge i{
display:block;
width:9px;
height:9px;
border-radius:2px;
background:currentColor;
opacity:.22;
}
.app-note-gauge i.is-on{ opacity:1; }
.app-note[data-match-level="strong"]{ color:var(--app-lvl-strong-fg); background:var(--app-lvl-strong-bg); }
.app-note[data-match-level="good"]{ color:var(--app-lvl-good-fg); background:var(--app-lvl-good-bg); }
.app-note[data-match-level="possible"]{ color:var(--app-lvl-possible-fg); background:var(--app-lvl-possible-bg); }
.app-note[data-match-level="weak"]{ color:var(--app-lvl-weak-fg); background:var(--app-lvl-weak-bg); }
@media (forced-colors: active){
.app-note-gauge i{ border:1px solid CanvasText; }
}
/* --- Recto / verso : « Voir » retourne la carte ---------------------------
La rotation est portee par chaque face (pas par un conteneur en
preserve-3d : un ancetre transforme + une zone defilante interne rendent
mal sur iOS). Les deux faces occupent la meme cellule de grille, la carte
prend donc la hauteur de la plus grande. La face cachee est inerte. */
.app-card-flip{
position:relative;
flex:1;
min-width:0;
min-height:0;
display:flex;
flex-direction:column;
perspective:1400px;
}
.app-card-face{
min-width:0;
min-height:0;
display:flex;
flex-direction:column;
overflow:hidden;
backface-visibility:hidden;
-webkit-backface-visibility:hidden;
transform:rotateY(0deg);
transition:transform var(--app-t-slow) var(--app-ease);
}
.app-card-face--front{ flex:1; }
/* Le verso est cale EXACTEMENT sur la taille du recto, comme une carte
physique : il ne doit jamais allonger la carte (en grille PC, la hauteur
vient du recto). Son contenu defile a l'interieur. */
.app-card-face--back{
position:absolute;
inset:0;
transform:rotateY(-180deg);
}
.app-card-face--back .app-offer-scroll{ overflow-y:auto; }
.app-offer.is-flipped .app-card-face--front{ transform:rotateY(180deg); }
.app-offer.is-flipped .app-card-face--back{ transform:rotateY(0deg); }
/* --- Puces d'aide a la decision (recto) ----------------------------------- */
.app-offer-points{
margin:14px 0 0;
padding:0;
list-style:none;
display:flex;
flex-direction:column;
gap:9px;
flex:none;
}
.app-offer-point{
position:relative;
min-width:0;
padding-left:19px;
color:var(--navy);
font-size:.93rem;
font-weight:600;
line-height:1.35;
overflow-wrap:anywhere;
}
.app-offer-point::before{
content:"";
position:absolute;
left:2px;
top:.42em;
width:8px;
height:8px;
border-radius:50%;
background:var(--teal-dark);
}
/* --- Verso : lecture par étapes ------------------------------------------- */
.app-offer.is-flipped{
padding:0;
border-color:transparent;
background:var(--ivory);
box-shadow:none;
}
.app-offer.is-flipped > .app-actionbar{ display:none; }
.app-offer.is-flipped .app-card-flip{ border-radius:20px; }
.app-offer-detail{
color:var(--ink);
background:var(--ivory);
}
.app-detail-gesture-zone{
position:relative;
display:flex;
flex:none;
flex-direction:column;
min-width:0;
padding:8px 10px 12px;
touch-action:none;
}
.app-detail-gesture-zone:focus-visible{
outline:2px solid var(--teal);
outline-offset:-2px;
border-radius:14px;
}
.app-detail-gesture-zone::after{
position:absolute;
top:2px;
left:50%;
display:grid;
width:28px;
height:28px;
place-items:center;
border:1px solid rgba(15,157,140,.28);
border-radius:50%;
color:var(--teal-dark);
background:rgba(255,255,255,.94);
content:"↑";
opacity:0;
transform:translate(-50%,8px);
transition:opacity var(--app-t-fast) var(--app-ease), transform var(--app-t-fast) var(--app-ease);
pointer-events:none;
}
.app-offer[data-swipe-intent="next"] .app-detail-gesture-zone::after{
opacity:1;
transform:translate(-50%,0);
}
.app-detail-eyebrow{
padding-right:48px;
color:var(--navy);
font-size:.66rem;
font-weight:800;
letter-spacing:.13em;
}
.app-detail-back{
position:absolute;
top:0;
right:0;
display:grid;
width:var(--app-tap);
height:var(--app-tap);
place-items:center;
padding:0;
border:0;
border-radius:50%;
color:var(--navy);
background:transparent;
cursor:pointer;
}
.app-detail-back:hover{ background:rgba(15,157,140,.08); }
.app-detail-back:focus-visible{
outline:2px solid var(--teal);
outline-offset:2px;
}
.app-detail-back svg{ width:22px; height:22px; }
.app-detail-logo{
width:104px;
height:auto;
margin-top:11px;
}
.app-detail-title{
max-width:18ch;
margin:7px 0 0;
color:var(--navy);
font-size:clamp(1.35rem,6vw,1.62rem);
font-weight:780;
letter-spacing:-.025em;
line-height:1.08;
text-wrap:balance;
overflow-wrap:anywhere;
}
.app-detail-organization{
margin:8px 0 0;
color:var(--slate);
font-size:.76rem;
font-weight:650;
}
.app-detail-program{
display:inline-flex;
width:min(100%,214px);
min-height:30px;
align-items:center;
justify-content:center;
margin-top:12px;
padding:4px 12px;
border:1px solid rgba(15,157,140,.28);
border-radius:var(--app-r-pill);
color:var(--teal-dark);
background:rgba(255,255,255,.78);
font-size:.7rem;
font-weight:750;
}
.app-detail-scroll{
display:flex;
flex:1;
flex-direction:column;
min-height:0;
gap:11px;
padding:2px 8px 10px;
overflow-y:auto;
overflow-x:hidden;
overscroll-behavior:contain;
scrollbar-gutter:stable;
touch-action:pan-y;
}
.app-detail-step{
flex:none;
min-width:0;
margin:0;
border:1px solid rgba(15,157,140,.32);
border-radius:14px;
color:var(--ink);
background:rgba(255,255,255,.92);
box-shadow:0 0 0 3px rgba(15,157,140,.035);
overflow:hidden;
}
.app-detail-step > summary{
display:grid;
grid-template-columns:minmax(0,1fr) 18px;
min-height:54px;
align-content:center;
gap:4px 8px;
padding:9px 12px;
color:var(--navy);
cursor:pointer;
list-style:none;
}
.app-detail-step > summary::-webkit-details-marker{ display:none; }
.app-detail-step > summary::after{
grid-column:2;
grid-row:1 / span 2;
align-self:center;
width:9px;
height:9px;
border-right:2px solid var(--navy);
border-bottom:2px solid var(--navy);
content:"";
transform:rotate(-45deg);
transition:transform var(--app-t-fast) var(--app-ease);
}
.app-detail-step[open] > summary::after{ transform:rotate(45deg); }
.app-detail-step > summary:focus-visible{
outline:2px solid var(--teal);
outline-offset:-3px;
border-radius:12px;
}
.app-detail-step__title{
grid-column:1;
min-width:0;
font-size:.84rem;
font-weight:800;
line-height:1.25;
}
.app-detail-step__meta{
grid-column:1;
display:grid;
grid-template-columns:minmax(0,1fr) auto;
gap:6px 10px;
color:var(--slate);
font-size:.67rem;
font-weight:650;
line-height:1.35;
}
.app-detail-step__meta > *{ min-width:0; overflow-wrap:anywhere; }
.app-detail-step__meta strong{ color:var(--teal-dark); text-align:right; }
.app-detail-step__body{
display:grid;
gap:8px;
padding:10px 12px 12px;
border-top:1px solid rgba(15,157,140,.14);
font-size:.82rem;
line-height:1.5;
}
.app-detail-step__body p{ margin:0; }
.app-detail-step--proof .app-detail-step__title{
display:flex;
align-items:center;
gap:7px;
}
.app-detail-step--proof .app-detail-step__title i{
width:8px;
height:8px;
flex:none;
border-radius:50%;
background:var(--gold);
}
.app-profile-match__body{
padding:0 12px 11px;
border-top:1px solid rgba(15,157,140,.14);
}
.app-profile-match__item{
display:grid;
gap:4px;
padding:9px 0 0;
border-top:1px solid rgba(11,111,98,.14);
}
.app-profile-match__item + .app-profile-match__item{ margin-top:9px; }
.app-profile-match__label{
margin:0;
color:var(--slate);
font-size:.67rem;
line-height:1.25;
}
.app-profile-match__requirement{
color:var(--teal-dark);
font-size:.84rem;
line-height:1.3;
overflow-wrap:anywhere;
}
.app-profile-match__fact,
.app-profile-match__preparation,
.app-profile-match__empty{
margin:0;
color:var(--ink);
font-size:.72rem;
line-height:1.4;
overflow-wrap:anywhere;
}
.app-profile-match__fact b,
.app-profile-match__preparation b{ color:var(--navy); }
.app-profile-match__fact [data-profile-match-state]{ color:var(--teal-dark); font-weight:750; }
.app-profile-match__preparation{ margin-top:3px; color:var(--slate); }
.app-profile-match__empty{ padding:10px 0 0; color:var(--slate); }
.app-detail-source{
display:grid;
grid-template-columns:minmax(0,1fr) 20px;
min-height:56px;
align-items:center;
gap:8px;
padding:9px 12px;
color:var(--navy);
text-decoration:none;
}
.app-detail-source > span{ display:grid; min-width:0; gap:4px; }
.app-detail-source strong{ font-size:.82rem; }
.app-detail-source small{
color:var(--slate);
font-size:.66rem;
font-weight:650;
overflow-wrap:anywhere;
}
.app-detail-source svg{ width:18px; height:18px; }
.app-detail-source:hover{ color:var(--teal-dark); text-decoration:none; }
.app-detail-source:focus-visible{
outline:2px solid var(--teal);
outline-offset:2px;
}
.app-detail-source.is-disabled{ opacity:.72; }
.app-detail-source-note{
margin:0;
color:var(--slate);
font-size:.7rem;
}
.app-detail-actions{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:8px;
}
.app-detail-secondary-action{
display:inline-flex;
min-width:0;
min-height:var(--app-tap);
align-items:center;
justify-content:center;
gap:8px;
padding:7px 8px;
border:0;
border-radius:10px;
color:var(--navy);
background:transparent;
cursor:pointer;
font:inherit;
font-size:.76rem;
font-weight:750;
}
.app-detail-secondary-action:hover{ background:rgba(15,157,140,.08); }
.app-detail-secondary-action:focus-visible{
outline:2px solid var(--teal);
outline-offset:2px;
}
.app-detail-secondary-action svg{ width:21px; height:21px; flex:none; }
.app-detail-secondary-action[aria-pressed="true"]{ color:var(--teal-dark); }
.app-detail-secondary-action[aria-pressed="true"] svg{ fill:currentColor; }
.app-detail-secondary-action:disabled{ opacity:.55; cursor:progress; }
.app-detail-prepare{
width:100%;
min-height:48px;
margin-top:0;
}
.app-detail-disclaimer{
margin:0;
color:var(--slate);
font-size:.65rem;
line-height:1.35;
text-align:center;
}
.app-offer-detail-text{
margin:0;
font-size:.82rem;
line-height:1.5;
overflow-wrap:anywhere;
}
.app-offer-detail-text--empty{ color:var(--slate); }
.app-offer-level{ margin-top:12px; flex:none; }
.app-matchlevel{
display:inline-flex;
align-items:baseline;
gap:.4em;
max-width:100%;
min-height:30px;
padding:.3rem .8rem;
border-radius:var(--app-r-pill);
font-size:.82rem;
overflow-wrap:anywhere;
}
.app-matchlevel > span{ font-weight:700; opacity:.85; }
.app-matchlevel > strong{ font-weight:850; }
.app-matchlevel[data-match-level="strong"]{ color:var(--app-lvl-strong-fg); background:var(--app-lvl-strong-bg); }
.app-matchlevel[data-match-level="good"]{ color:var(--app-lvl-good-fg); background:var(--app-lvl-good-bg); }
.app-matchlevel[data-match-level="possible"]{ color:var(--app-lvl-possible-fg); background:var(--app-lvl-possible-bg); }
.app-matchlevel[data-match-level="weak"]{ color:var(--app-lvl-weak-fg); background:var(--app-lvl-weak-bg); }
.app-offer-foot{
display:flex;
flex-wrap:wrap;
align-items:center;
gap:8px 16px;
margin-top:16px;
}
.app-offer-fact{
display:inline-flex;
align-items:center;
gap:7px;
min-width:0;
color:var(--slate);
font-size:.9rem;
font-weight:600;
overflow-wrap:anywhere;
}
.app-offer-fact svg{ width:17px; height:17px; flex:none; color:var(--teal-dark); }
.app-offer-fact > span{ min-width:0; color:var(--navy); }
@media (max-width:480px){
.app-counters{ grid-template-columns:1fr; }
.app-counter-num{ font-size:1.28rem; }
}
@media (max-height:620px){
.app-offer .app-card-title{ -webkit-line-clamp:2; line-clamp:2; }
.app-offer-foot{ margin-top:11px; }
.app-offer-level{ margin-top:9px; }
}
/* ==========================================================================
10. Vues Paramètres, Enregistrées et Détail
========================================================================== */
[data-jobs-view="parametres"] > .app-screen{
gap:16px;
}
[data-settings-screen] > header{
display:grid;
gap:8px;
}
[data-settings-screen] > .card{
display:grid;
min-width:0;
gap:11px;
}
[data-settings-screen] .card{
max-width:100%;
}
[data-settings-screen] .card .card{
display:grid;
gap:8px;
margin-top:4px;
}
[data-settings-screen] :is(h3, h4, p, strong){
max-width:100%;
overflow-wrap:anywhere;
}
[data-settings-danger-zone]{
border-color:rgba(20, 34, 79, .26);
background:rgba(20, 34, 79, .035);
}
[data-settings-delete-input]{
width:100%;
min-height:48px;
margin-top:10px;
padding:.7rem .8rem;
border:1.5px solid var(--line);
border-radius:10px;
color:var(--ink);
background:#fff;
font:inherit;
}
[data-settings-delete-input]:focus{
border-color:var(--teal);
outline:2px solid rgba(15, 157, 140, .22);
outline-offset:1px;
}
[data-jobs-saved-content]{
display:grid;
min-width:0;
gap:26px;
padding-block:4px 24px;
}
[data-jobs-saved-group]{
display:grid;
min-width:0;
gap:14px;
}
[data-jobs-saved-card]{
display:grid;
min-width:0;
max-width:100%;
gap:13px;
overflow:hidden;
}
[data-jobs-saved-card] :is(h4, p, strong, label){
max-width:100%;
overflow-wrap:anywhere;
}
[data-jobs-saved-card] h4{
color:var(--navy);
font-size:1.1rem;
line-height:1.2;
}
[data-jobs-saved-card] > div:not(.app-chip-grid){
display:grid;
min-width:0;
grid-template-columns:minmax(0, 1fr) auto;
gap:10px;
align-items:end;
padding-top:12px;
border-top:1px solid var(--line);
}
[data-jobs-saved-card] label{
display:grid;
min-width:0;
gap:6px;
color:var(--navy);
font-size:.84rem;
font-weight:750;
}
[data-jobs-saved-card] :is(input, select).app-chip{
width:100%;
min-width:0;
color:var(--navy);
background:#fff;
}
[data-jobs-saved-card] [data-jobs-saved-card-status]{
font-size:.84rem;
}
[data-jobs-detail] .app-card-reasons{
gap:0;
}
[data-jobs-detail] .app-card-reasons > section + section{
margin-top:20px;
padding-top:18px;
border-top:1px solid var(--line);
}
[data-jobs-detail] .app-card-reasons h3{
color:var(--navy);
font-size:1.02rem;
}
[data-jobs-detail] .app-card-reasons :is(p, ul){
max-width:100%;
margin:8px 0 0;
overflow-wrap:anywhere;
}
[data-jobs-detail] .app-card-reasons ul{
padding-left:20px;
}
[data-jobs-detail] .app-card-reasons .app-chip-grid{
margin-top:10px;
}
/* ==========================================================================
11. Chargement : .app-skeleton
========================================================================== */
.app-skeleton{
min-height:14px;
border-radius:var(--app-r-sm);
background:linear-gradient(100deg,
rgba(20, 34, 79, .07) 32%,
rgba(20, 34, 79, .14) 48%,
rgba(20, 34, 79, .07) 64%);
background-size:220% 100%;
animation:app-shimmer 1.3s linear infinite;
}
.app-skeleton--title{ height:30px; max-width:72%; }
.app-skeleton--text{ height:14px; }
.app-skeleton--chip{
width:108px;
height:var(--app-tap);
border-radius:var(--app-r-pill);
}
.app-skeleton--card{
flex:1;
min-height:220px;
border-radius:var(--app-r-lg);
}
@keyframes app-shimmer{
from{ background-position:120% 0; }
to{ background-position:-120% 0; }
}
/* ==========================================================================
12. Ajustements mobile étroit et écran court
========================================================================== */
@media (max-width:480px){
:root{ --app-pad:14px; }
.app-screen{
padding-top:calc(10px + var(--app-safe-top));
padding-right:calc(10px + var(--app-safe-right));
padding-left:calc(10px + var(--app-safe-left));
}
.app-card{
border-radius:20px;
}
.app-card-title{
font-size:clamp(1.28rem, 6.2vw, 1.55rem);
}
.app-card-meta{
gap:6px 10px;
font-size:.88rem;
}
.app-card-reasons{
gap:9px;
margin-top:14px;
}
.app-actionbar{
padding-top:10px;
padding-bottom:calc(9px + var(--app-safe-bottom));
}
.app-sheet > [data-feed-reason-list] > .app-chip,
.jobs-onboarding__choice.app-chip{
width:100%;
flex-basis:100%;
}
.jobs-onboarding__choice-with-level.app-chip{
grid-template-columns:1fr;
}
.jobs-onboarding__compensation{
grid-template-columns:1fr;
}
.jobs-onboarding__summary-item{
grid-template-columns:1fr;
}
.jobs-onboarding__summary-item .btn{
width:100%;
}
[data-settings-screen] .btn,
[data-settings-screen] .app-chip{
width:100%;
}
[data-jobs-saved-card] > div:not(.app-chip-grid){
grid-template-columns:1fr;
align-items:stretch;
}
[data-jobs-saved-card] > div:not(.app-chip-grid) > .btn,
[data-jobs-saved-card] > .app-chip-grid > .btn{
width:100%;
}
}
@media (max-width:360px){
.app-actionbar{
grid-template-columns:46px minmax(0, 1fr) 46px;
gap:7px;
}
.app-actionbar .btn{
padding-inline:.65rem;
font-size:.9rem;
}
.app-iconbtn{
width:46px;
height:46px;
}
.app-sheet > .app-actionbar{
grid-template-columns:repeat(2, minmax(0, 1fr));
}
.app-sheet > .app-actionbar .btn{
font-size:.86rem;
}
.app-snackbar{
gap:8px;
padding-left:12px;
font-size:.88rem;
}
}
@media (max-height:620px){
.app-screen{
padding-top:calc(8px + var(--app-safe-top));
}
.app-card-title{
font-size:1.25rem;
}
.app-offer .app-card-title{
-webkit-line-clamp:2;
}
.app-card-reasons{
gap:8px;
margin-top:11px;
}
.app-card-note{
margin-top:8px;
}
.app-actionbar{
padding-top:8px;
padding-bottom:calc(7px + var(--app-safe-bottom));
}
.app-sheet-handle{
margin-bottom:9px;
}
.app-sheet-note{
margin-top:5px;
font-size:.82rem;
}
.app-snackbar{
bottom:calc(76px + var(--app-safe-bottom));
}
}
/* ==========================================================================
13. Format PC (issue #203, lot G4) : l'espace candidat quitte le plein
écran mobile à partir de 920px.
--------------------------------------------------------------------------
TOUT ce bloc vit sous @media (min-width: 920px) : le rendu mobile validé
(lots U1 à U10) reste STRICTEMENT inchangé, aucune règle au-dessus n'est
modifiée. Principes du format PC :
1. Le flux d'offres devient une GRILLE de cartes (2 colonnes vers 920px,
3 colonnes dès que la largeur de mesure le permet). Le plein viewport et
le scroll-snap sont neutralisés : la page défile normalement, la souris
et la molette retrouvent leur comportement attendu. Le choix de la
grille plutôt que « liste + panneau » tient à trois raisons : elle se
fait en CSS pur (aucun markup ni JS à changer, contrainte du lot), elle
conserve les trois actions sur CHAQUE carte (le geste swipe n'est jamais
le seul chemin) et elle garde une seule route de détail (#offre/),
donc une seule cible de focus et d'historique.
2. Plus aucune barre d'actions collée en bas : .app-actionbar repasse en
flux normal, sous le contenu qu'elle commande.
3. Chaque surface reçoit une largeur de mesure bornée (colonne de
formulaire, colonne de lecture, colonnes de réglages) au lieu de
s'étirer sur toute la largeur de l'écran.
4. La bottom-sheet devient une boîte de dialogue centrée : à la souris,
une feuille collée au bas d'un écran 27 pouces est un contresens.
Le geste swipe n'est pas touché : il reste lié à la carte et continue de
fonctionner, mais les boutons restent le chemin principal sur PC.
========================================================================== */
@media (min-width: 920px){
:root{
--app-pc-gap:22px; /* gouttière commune des grilles PC */
--app-pc-lead:620px; /* recherche et compteurs en tête de flux */
--app-pc-form:640px; /* colonne du wizard candidat */
--app-pc-read:820px; /* colonne de lecture du détail d'offre */
--app-pc-wide:1120px; /* réglages et offres enregistrées */
--app-pc-card:320px; /* largeur minimale d'une carte du flux */
--app-pc-card-wide:360px; /* carte de suivi (offres enregistrées) */
}
/* --- 13.1 Écrans : ni plein viewport, ni accrochage ------------------- */
.app-feed{
height:auto;
overflow:visible;
scroll-snap-type:none;
overscroll-behavior-y:auto;
}
.app-screen,
.app-feed > .app-screen{
height:auto;
min-height:0;
padding:0;
scroll-snap-align:none;
scroll-snap-stop:normal;
}
.app-screen--pad-bottom{
padding-bottom:0;
}
/* --- 13.2 Barres d'actions : sous le contenu, jamais collées ---------- */
.app-actionbar{
position:static;
background:none;
}
.app-card > .app-actionbar{
margin-top:18px;
padding-top:16px;
padding-bottom:var(--app-pad);
border-top:1px solid rgba(20, 34, 79, .08);
}
/* --- 13.3 Flux d'offres en grille ------------------------------------- */
.app-feed[data-jobs-feed]{
display:grid;
grid-template-columns:repeat(auto-fill, minmax(var(--app-pc-card), 1fr));
gap:var(--app-pc-gap);
align-items:stretch;
}
.app-feed[data-jobs-feed] > .app-screen{
display:flex;
}
/* Titre calibré pour une carte de grille, pas pour un plein écran. */
.app-feed[data-jobs-feed] .app-card-title{
font-size:1.24rem;
line-height:1.18;
}
.app-feed[data-jobs-feed] > [data-jobs-feed-empty] .app-card-title,
.app-feed[data-jobs-feed] > [data-jobs-feed-error] .app-card-title,
.app-feed[data-jobs-feed] > [data-jobs-feed-end] .app-card-title{
font-size:1.6rem;
}
/* Contenu de carte entièrement visible : plus de zone défilante interne. */
.app-offer-scroll{
overflow:visible;
scrollbar-gutter:auto;
}
.app-card-reasons{
overflow:visible;
}
/* États pleine largeur du flux, bornés à une largeur lisible. */
.app-feed[data-jobs-feed] > [data-jobs-feed-empty],
.app-feed[data-jobs-feed] > [data-jobs-feed-error],
.app-feed[data-jobs-feed] > [data-jobs-feed-end]{
grid-column:1 / -1;
max-width:var(--app-pc-read);
margin-inline:auto;
width:100%;
}
/* Chargement et états rendus hors du conteneur de flux. */
[data-jobs-dashboard-root] > .app-screen{
max-width:var(--app-pc-read);
margin-bottom:var(--app-pc-gap);
}
/* Relief au survol, sans déplacement : le swipe pose sa propre transform. */
.app-feed[data-jobs-feed] .app-card{
transition:border-color var(--app-t-fast) var(--app-ease),
box-shadow var(--app-t-fast) var(--app-ease);
}
.app-feed[data-jobs-feed] .app-card:hover{
border-color:rgba(15, 157, 140, .38);
box-shadow:0 22px 52px rgba(20, 34, 79, .14);
}
.app-feed[data-jobs-feed] .app-card:focus-within{
border-color:rgba(15, 157, 140, .5);
}
/* --- 13.4 Compteurs : bornés et alignés sur la grille ----------------- */
.app-counters{
grid-template-columns:repeat(2, minmax(0, 1fr));
gap:16px;
max-width:var(--app-pc-lead);
margin-bottom:22px;
padding:0;
}
.app-counter{
padding:14px 16px;
}
.app-counter-num{
font-size:1.5rem;
}
/* --- 13.5 Wizard candidat : colonne centrée bornée -------------------- */
.jobs-onboarding__heading{
max-width:var(--app-pc-form);
margin-inline:auto;
}
/* Le panneau de fond du formulaire disparaît : sur PC, c'est la carte
d'étape qui porte le relief, pas une bande pleine largeur derrière elle. */
.jobs-onboarding__form.app-feed{
display:block;
padding-block:4px;
border-radius:0;
background:none;
}
/* Le JS pose width/max-width en style inline sur l'écran d'étape (560px) :
seul !important peut élargir la colonne sans toucher au JS du wizard. */
.jobs-onboarding__form [data-onboarding-screen]{
max-width:var(--app-pc-form) !important;
margin-inline:auto;
}
.jobs-onboarding__step.app-card,
.jobs-onboarding__summary.app-card{
max-width:none;
padding:clamp(24px, 2.2vw, 30px);
overflow:visible;
}
/* Une légende de fieldset se pose par défaut SUR la bordure haute : la
question chevauche alors le bord de la carte. Le flottant pleine largeur
la ramène dans le flux, à l'intérieur du rembourrage de la carte. */
/* Correctif desormais applique a TOUS les formats (voir la regle de base) :
conserve ici uniquement pour la lisibilite de la cascade PC. */
.jobs-onboarding__wizard-header{
margin-top:18px;
}
/* Actions du wizard : « Précédent » à gauche, action principale à droite,
largeur de bouton raisonnable (plus de pilule de 640px de large). */
.jobs-onboarding__actions.app-actionbar{
max-width:none;
justify-content:flex-start;
margin-top:18px;
padding-top:0;
padding-bottom:0;
}
.jobs-onboarding__actions.app-actionbar > [data-onboarding-next],
.jobs-onboarding__actions.app-actionbar > [data-onboarding-submit]{
flex:0 0 auto;
width:auto;
min-width:240px;
margin-left:auto;
}
.jobs-onboarding__actions.app-actionbar > [data-onboarding-previous]{
flex:0 0 auto;
width:auto;
}
.jobs-onboarding__error,
.jobs-onboarding__status{
max-width:none;
}
/* Deux choix par rangée dans la colonne de formulaire. */
.jobs-onboarding__choice.app-chip{
flex:1 1 calc(50% - 5px);
}
.jobs-onboarding__choice-with-level.app-chip{
flex-basis:100%;
}
/* --- 13.6 Détail d'offre : colonne de lecture ------------------------- */
[data-jobs-detail-feed]{
display:block;
}
[data-jobs-detail-feed] > .app-screen{
max-width:var(--app-pc-read);
margin-inline:auto;
}
[data-jobs-detail] .app-card-reasons :is(p, li){
max-width:72ch;
}
/* --- 13.7 Paramètres : deux colonnes de cartes ------------------------
Colonnes CSS plutôt que grille : les cartes de réglages ont des hauteurs
très différentes, le flux en colonnes les tasse au lieu de laisser un
trou sous la carte la plus courte. L'en-tête et le statut traversent les
deux colonnes. */
[data-settings-screen].app-screen{
display:block;
columns:2;
column-gap:var(--app-pc-gap);
max-width:var(--app-pc-wide);
}
[data-settings-screen] > header,
[data-settings-screen] > [data-settings-status]{
column-span:all;
margin-bottom:var(--app-pc-gap);
}
[data-settings-screen] > .card{
margin-bottom:var(--app-pc-gap);
break-inside:avoid;
}
[data-settings-screen] .btn,
[data-settings-screen] .card > [role="switch"]{
justify-self:start;
}
/* --- 13.8 Offres enregistrées : cartes de suivi en colonnes ----------- */
[data-jobs-saved-content]{
max-width:var(--app-pc-wide);
gap:34px;
}
[data-jobs-saved-group] .jobs-step-list{
grid-template-columns:repeat(auto-fill, minmax(var(--app-pc-card-wide), 1fr));
gap:var(--app-pc-gap);
align-items:start;
}
[data-jobs-saved-empty],
[data-jobs-saved-error]{
max-width:var(--app-pc-read);
}
/* Le compteur de groupe reste une pastille, pas une bande étirée par la
grille d'en-tête héritée de la landing. */
[data-jobs-saved-group] > .jobs-section-heading{
grid-template-columns:minmax(0, 1fr) auto;
align-items:center;
gap:16px;
}
[data-jobs-saved-group] > .jobs-section-heading > .pill{
justify-self:end;
}
/* --- 13.9 Feuille : boîte de dialogue centrée ------------------------- */
.app-sheet{
top:50%;
bottom:auto;
max-height:min(78vh, calc(var(--app-vh) - 96px));
padding:24px;
border:1px solid var(--line);
border-radius:var(--app-r-lg);
box-shadow:0 32px 80px rgba(9, 18, 42, .28);
transform:translateY(-50%);
animation:app-dialog-in var(--app-t-base) var(--app-ease);
}
.app-sheet-handle{
display:none;
}
/* La feuille de raison annule son rembourrage bas sur mobile (la barre
d'actions le fournit) : en dialogue, on le rend pour équilibrer. */
.app-sheet[data-feed-dismiss-sheet]{
padding-bottom:12px;
}
.app-sheet > .app-actionbar{
margin-top:6px;
}
@keyframes app-dialog-in{
from{ opacity:0; transform:translateY(calc(-50% + 14px)); }
to{ opacity:1; transform:translateY(-50%); }
}
/* --- 13.10 Annulation du swipe : plus d'actionbar fixe à éviter ------- */
.app-snackbar{
bottom:calc(28px + var(--app-safe-bottom));
max-width:460px;
}
}
/* ==========================================================================
14. Contrastes forcés (Windows High Contrast)
========================================================================== */
@media (forced-colors: active){
.app-card-reasons li::before,
.app-progress-fill,
.app-sheet-handle{ background:CanvasText; }
.app-chip.is-selected,
.app-chip[aria-pressed="true"],
.app-chip[aria-checked="true"],
.app-chip:has(> input:checked){ border:2px solid CanvasText; }
}
/* ==========================================================================
15. Mouvement réduit : TOUT le namespace .app- est neutralisé
(animations, transitions et défilement doux). Le scroll-snap reste :
c'est un positionnement, pas un mouvement.
========================================================================== */
@media (prefers-reduced-motion: reduce){
.app-feed{ scroll-behavior:auto; }
[class^="app-"],
[class*=" app-"],
[class^="app-"]::before,
[class*=" app-"]::before,
[class^="app-"]::after,
[class*=" app-"]::after{
animation:none !important;
transition:none !important;
}
.app-skeleton{ background:rgba(20, 34, 79, .09); }
}
/* ==========================================================================
ONBOARDING · UNE QUESTION, UN ECRAN (refonte du 27 juillet 2026)
--------------------------------------------------------------------------
Constat : les reponses etaient des pastilles de 180 px qui se rangeaient en
grille. Sur telephone, une question se lisait donc comme un nuage de petits
boutons, ou l'oeil doit chercher ou cliquer. La consigne etait « peu de
contenu, droit au but » : une question, des reponses larges, une seule
action possible en bas.
Ce qui change et pourquoi :
· les listes de reponses FIXES deviennent des cartes pleine largeur, une par
ligne, hautes de 64 px minimum. La cible tactile passe de la pastille au
bandeau : on ne vise plus, on touche.
· les listes de TAXONOMIE (metiers, secteurs, competences) gardent la
pastille. Elles comptent des dizaines d'entrees filtrees par recherche :
les empiler en cartes imposerait un defilement sans fin. La forme suit le
nombre d'options, pas une regle uniforme.
· la barre d'avancement passe AU-DESSUS du compteur et s'epaissit : elle
devient le premier repere de l'ecran.
· l'action principale occupe toute la largeur restante et grandit.
L'etat selectionne reste le remplissage teal deja en place : son contraste
est verifie, et le changer ici aurait fait deux langages de selection dans
la meme page. On y ajoute seulement une pastille de confirmation.
========================================================================== */
/* La barre d'abord, le compteur ensuite. L'en-tete est une grille : `order`
suffit, aucun remaniement du gabarit n'est necessaire.
On vise `.app-progress` et non `