/* ============================================================ TutorAide — Offre de service tuteur (web), formulaire v2 ------------------------------------------------------------ CSS propre au parcours public `/tutor-apply/v2` : la coquille de la carte, la barre de progression segmentée, les cases de code, les entrées de type CV, la feuille de niveau, le stepper du tableau de bord. Tout ce qui est un composant réutilisable du Design System 2 (champ, pilule, case, bouton, surface-signature, jeton) vit dans `client_design_system2.css` et n'est PAS redéfini ici. Préfixe unique : `.ta-cand-`. Aucune de ces classes n'existe ailleurs dans le repo — ce fichier n'est chargé que par la page du parcours, et il ne touche à rien d'autre. Deux contraintes de chargement, à respecter dans le gabarit : - le porte `ta-v2 ta-v2-scope` (le premier scope apporte les tokens et les composants DS2, le second la typo Nunito et l'anneau de focus par défaut) ; - `client_design_system2.css` est chargé AVANT ce fichier — plusieurs règles d'ici l'emportent par l'ordre du document et non par la spécificité. Fidélité à la maquette (`Candidature tuteur - Web.dc.html`) : les valeurs sont reprises au pixel. Les écarts délibérés sont commentés à l'endroit concerné — pour l'essentiel des couleurs hors palette ramenées à un token (#E4D9C9 → filet fort, #FBF7F1 → crème), des marges partielles converties en raccourci, et deux corrections d'accessibilité (l'input de fichier reste focusable, le mouvement respecte `prefers-reduced-motion`). ============================================================ */ /* ---- Variables locales du parcours ---- Trois couleurs de la maquette sortent de la palette DS et n'existent nulle part ailleurs : le fond de page (plus soutenu que la crème du DS, parce que la carte blanche doit se détacher), le filet doux des séparateurs intra-carte, et l'anneau de focus en version crème (celui du DS2 est en blanc, invisible sur une carte blanche). Déclarées ici, elles descendent à tout le parcours. ---- */ .ta-cand-page { --ta-cand-fond: #ECE4D8; --ta-cand-filet-doux: #F1EADF; --ta-cand-ring: 0 0 0 2px var(--color-creme), 0 0 0 4px var(--color-rouge); /* Le token partagé pose son anneau sur du blanc ; la spec du DS (colors.css) et la maquette le posent sur la crème. On redéfinit donc le token POUR CE PARCOURS, ce qui accorde du même coup les composants DS2 (pilule, bouton, case) et les contrôles nus du parcours — sans toucher aux autres pages. */ --focus-ring: var(--ta-cand-ring); } /* ---- Remise à zéro des éléments de liste ---- Plusieurs conteneurs du parcours sont des listes ou des listes de définitions dans les gabarits (`ol` pour le suivi par étapes, `ul` pour les fonctions verrouillées, `dl/dt/dd` pour le résumé) : c'est la bonne sémantique, mais la page est autonome et ne charge donc AUCUN reset. Sans ces trois lignes, `ol` et `ul` arrivent avec 40px de retrait et leurs puces, `dl` avec 1em de marge, et chaque `dd` avec 40px de retrait — le résumé se décalerait de 40px vers la droite. Spécificité volontairement basse (une classe) : les utilitaires de rythme vertical, préfixés, gardent la main. */ .ta-cand-entries, .ta-cand-matlist, .ta-cand-pills, .ta-cand-result, .ta-cand-locked, .ta-cand-stepper, .ta-cand-summary__list, .ta-cand-addr__drop { margin: 0; padding-inline-start: 0; list-style: none; } .ta-cand-summary__v, .ta-cand-summary__chips { margin: 0; } /* ---- Pas de surbrillance tactile par défaut ---- Sur iOS Safari, tout élément tapable reçoit par défaut un rectangle de surbrillance semi-transparent calé sur sa géométrie DE MISE EN PAGE, pas sur son rendu visuel personnalisé (bordures arrondies, position absolue dans une boîte à `overflow`…) — il pouvait ainsi déborder du cadre arrondi des cartes et des champs (bouton de suggestion d'adresse, ligne de résultat de matière, bouton d'édition/suppression d'une entrée…). Un seul filet ici plutôt qu'une règle par composant : `.ta-pill`/`.ta-btn` du DS2 posent déjà la même chose pour leurs propres contrôles. */ .ta-cand-page button, .ta-cand-page a, .ta-cand-page select { -webkit-tap-highlight-color: transparent; } /* ============================================================ 1. Coquille ============================================================ */ .ta-cand-page { min-height: 100vh; display: flex; align-items: flex-start; justify-content: center; padding: 48px 24px; background: var(--ta-cand-fond, #ECE4D8); /* Socle typographique du parcours : la page est autonome, elle n'hérite pas du `body { font-size }` que `base.css` du DS poserait. Sans ça, tout texte non classé retombe au 16px du navigateur au lieu du corps à 14px. */ font: 400 14px/1.5 var(--font-nunito); color: var(--color-encre); /* Les deux réglages de rendu du texte que `base.css` du DS pose sur : la page étant autonome, elle ne charge pas ce fichier. `optimizeLegibility` active le crénage — sans lui, la largeur des mots dérive de 1 à 2px par rapport à la maquette. */ -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* La carte : hauteur bornée au viewport, en-tête et pied fixes, corps qui défile seul. `overflow: hidden` sert aussi de cadre aux modales et à la feuille, posées en absolu à l'intérieur. */ .ta-cand-shell { position: relative; width: 100%; max-width: 680px; display: flex; flex-direction: column; background: var(--color-surface); border: 1px solid var(--color-filet); border-radius: var(--r-carte-lg); box-shadow: rgba(44, 38, 34, .04) 0 0 0 1px, rgba(44, 38, 34, .09) 0 12px 32px 0; overflow: hidden; min-height: 600px; max-height: calc(100vh - 96px); } /* ---- En-tête ---- */ .ta-cand-head { flex: none; padding: 12px 22px; background: var(--color-surface); border-bottom: 1px solid var(--color-filet); } /* Le logo est centré sur la carte, pas sur l'espace restant : le bouton Retour passe donc en absolu et ne déplace rien. */ .ta-cand-head__row { position: relative; height: 30px; display: flex; align-items: center; justify-content: center; } .ta-cand-back { position: absolute; left: -4px; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; gap: 5px; background: none; border: none; cursor: pointer; padding: 8px 4px; border-radius: var(--r-controle); font: 600 13px/1 var(--font-nunito); color: var(--color-encre-2); } .ta-cand-back:hover { color: var(--color-encre); } /* La flèche accepte soit le glyphe « ← » de la maquette, soit l'icône `flecheGauche` du DS — préférable : Nunito n'a pas le glyphe U+2190, qui part donc en fonte de repli. */ .ta-cand-back__arrow { font-size: 17px; line-height: 1; font-weight: 700; } .ta-cand-back__arrow > svg { display: block; } .ta-cand-logo { height: 24px; width: auto; } /* Barre de progression : 11 segments. La couleur remplie est interpolée orange→rouge selon l'étape et arrive donc du JS, en `style="--seg-bg: …"` (seul style en ligne admis) ; le défaut couvre les segments encore vides. */ .ta-cand-progress { display: flex; gap: 4px; margin: 12px 0 0; } .ta-cand-progress__seg { flex: 1; height: 5px; border-radius: var(--r-rond); background: var(--seg-bg, var(--color-filet)); } /* ---- Corps défilant ---- Barre de défilement masquée : la carte doit se lire comme un écran d'app, et le pied fixe indique déjà qu'il y a une suite. */ .ta-cand-body { flex: 1; min-height: 0; overflow-y: auto; padding: 30px 40px 32px; scrollbar-width: none; } .ta-cand-body::-webkit-scrollbar { width: 0; } /* ---- Pied ---- */ .ta-cand-foot { flex: none; padding: 14px 20px 24px; background: var(--color-surface); border-top: 1px solid var(--color-filet); } /* Le bouton du pied est un `.ta-btn--primary.ta-btn--block` ; le spinner se glisse dedans, l'espacement vient du `gap` du bouton. */ .ta-cand-spinner { flex: none; display: inline-block; width: 16px; height: 16px; border-radius: var(--r-rond); border: 2px solid rgba(255, 255, 255, .45); border-top-color: #fff; animation: ta-spin .7s linear infinite; } /* ============================================================ 2. Typographie et petits blocs de texte du parcours ============================================================ */ .ta-cand-h1 { margin: 0; font: 800 25px/1.18 var(--font-nunito); letter-spacing: -.02em; color: var(--color-encre); } .ta-cand-sub { margin: 8px 0 0; font: 400 14px/1.45 var(--font-nunito); color: var(--color-encre-2); } .ta-cand-para { margin: 0; font: 400 15px/1.5 var(--font-nunito); color: var(--color-encre); } .ta-cand-para strong { font-weight: 700; } /* Libellé d'un groupe de contrôles qui n'est pas un `.ta-field` (rangée de pilules, curseur, zone de dépôt) : mêmes valeurs que `.ta-field__label`, sans la structure flex du champ. */ .ta-cand-label { display: block; margin: 0; font: 600 13px/1.4 var(--font-nunito); color: var(--color-encre); } .ta-cand-label__opt { font-weight: 400; color: var(--color-ardoise); } .ta-cand-hint { margin: 0; font: 400 12px/1.4 var(--font-nunito); color: var(--color-ardoise); } .ta-cand-hint strong { font-weight: 700; color: var(--color-encre); } /* Periode d'exercice invalide (fin avant debut) : jamais gris comme une duree normale, sinon l'erreur se lit comme une info banale (retour Maël, 2026-09-03 — la duree affichait "Moins d'un an" sans distinction). */ .ta-cand-hint--warn { color: var(--color-rouge); font-weight: 600; } .ta-cand-eyebrow { margin: 0; font: 700 11px/1.2 var(--font-nunito); letter-spacing: .06em; text-transform: uppercase; color: var(--color-ardoise); } /* Libellé à gauche, valeur à droite sur la même ligne de base (durée de trajet, compteur de mots). */ .ta-cand-labelrow { margin: 0; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; } .ta-cand-value { font: 800 15px/1 var(--font-nunito); color: var(--color-encre); } /* Ligne d'aide avec icône, sans fond. Deux registres dans la maquette : une aide qui compte (texte en encre secondaire) et une mention de service (tout en ardoise, un cran plus discrète) — d'où le modificateur `--ardoise`. */ .ta-cand-tip { margin: 0; display: flex; align-items: center; gap: 9px; font: 400 12px/1.4 var(--font-nunito); color: var(--color-encre-2); } .ta-cand-tip--lg { font-size: 13px; line-height: 1.45; } .ta-cand-tip--ardoise { gap: 8px; color: var(--color-ardoise); } /* Aide sur deux lignes : l'icône se cale sur la première. */ .ta-cand-tip--top { align-items: flex-start; } .ta-cand-tip--top .ta-cand-tip__icon { margin-top: 2px; } .ta-cand-tip__icon { flex: none; display: inline-flex; color: var(--color-ardoise); } .ta-cand-tip strong { font-weight: 700; color: var(--color-encre); } /* Ligne d'erreur d'un groupe (pas d'un champ : un champ utilise `.ta-field__msg--error`). */ .ta-cand-error { margin: 0; display: flex; align-items: center; gap: 7px; font: 600 13px/1.35 var(--font-nunito); color: var(--color-rouge); } .ta-cand-error__icon { flex: none; display: inline-flex; } .ta-cand-empty { margin: 0; font: 400 13px/1.4 var(--font-nunito); color: var(--color-ardoise); } /* Bouton textuel rouge (Renvoyer le code, Modifier). La variante `--encre` sert au basculement texto/courriel, qui est une navigation et non une action. */ .ta-cand-linkbtn { background: none; border: none; padding: 2px; cursor: pointer; border-radius: var(--r-badge); text-align: left; font: 700 13px/1 var(--font-nunito); color: var(--color-rouge); } .ta-cand-linkbtn:hover { color: var(--color-rouge-fonce); } .ta-cand-linkbtn--encre { color: var(--color-encre); line-height: 1.3; } .ta-cand-linkbtn--encre:hover { color: var(--color-rouge); } .ta-cand-resend { margin: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font: 400 13px/1.4 var(--font-nunito); color: var(--color-encre-2); } .ta-cand-resend__ok { font-weight: 600; color: var(--color-succes); } /* Texte visible d'une ligne à cocher (le composant DS2 attend un troisième enfant après l'input et la case). La typo et la couleur lui appartiennent EN PROPRE : `.ta-check` les pose sur le conteneur et ce texte n'en héritait que par ricochet — le jour où le même libellé passe dans un autre parent, il se retrouverait nu. Mêmes valeurs que le composant, donc rien ne bouge à l'écran, mais elles sont désormais dites. `flex: 1; min-width: 0` : l'attestation de confidentialité tient sur deux lignes, elle doit se replier dans la carte au lieu de l'élargir. */ .ta-cand-check__label { flex: 1; min-width: 0; font: 400 14px/1.4 var(--font-nunito); color: var(--color-encre); } /* Le seul lien au fil du texte de tout le parcours (politique de confidentialité, écran A7). Rouge comme la maquette, mais SOULIGNÉ : le système interdit de signaler un lien par la seule couleur (WCAG 1.4.1), et celui-ci vit au milieu d'une phrase. */ .ta-cand-check__label a { color: var(--color-rouge); text-decoration: underline; text-underline-offset: 2px; } .ta-cand-check__label a:hover { color: var(--color-rouge-fonce); } /* Filet de séparation d'un bloc de pied de contenu. */ .ta-cand-divider { padding-top: 18px; border-top: 1px solid var(--color-filet); } /* Icône + texte sur une même ligne de base (étiquette de la surface-signature, notamment). */ .ta-cand-inline { display: inline-flex; align-items: center; gap: 8px; } /* Rangée de pilules (genre, modalité, transport, source, niveaux de la feuille). */ .ta-cand-pills { display: flex; flex-wrap: wrap; gap: 8px; } /* Deux retouches de la surface-signature du DS2, pour ce parcours seulement : la maquette monte le titre à 24px et descend le sous-titre à 15px/1.4. Les tokens du système (--text-titre 22px, --text-sous-titre 16px) restent la référence partout ailleurs — d'où une surcharge scopée à la page plutôt qu'une modification du composant partagé. */ .ta-cand-page .ta-signature__title { font-size: 24px; } .ta-cand-page .ta-signature__sub { font-size: 15px; line-height: 1.4; } /* ============================================================ 3. Surfaces du parcours ------------------------------------------------------------ Même recette que `.ta-card` du DS2, mais autoportante : le parcours ne dépend pas du conteneur `.ta-v2-scope`, et chaque surface a son propre rembourrage (14 ou 16px, pas 20px). ============================================================ */ .ta-cand-panel, .ta-cand-entry, .ta-cand-locked, .ta-cand-summary, .ta-cand-result, .ta-cand-mat { background: var(--color-surface); border: 1px solid var(--color-filet); border-radius: var(--r-carte); box-shadow: var(--shadow-1); } /* Trois rembourrages, comme la maquette : 16px partout, 18px pour la carte du suivi par étapes, 14px pour une carte qui ne contient qu'une case à cocher. */ .ta-cand-panel { padding: 16px; } .ta-cand-panel--tall { padding: 18px 16px; } .ta-cand-panel--slim { padding: 14px 16px; } /* Carte qui empile des cases à cocher séparées par un filet (attestations de l'écran A7). */ .ta-cand-panel--stack { display: flex; flex-direction: column; gap: 14px; } .ta-cand-panel__sep { height: 1px; background: var(--ta-cand-filet-doux, #F1EADF); } /* Rappel de lecture sous une case à cocher : aligné sur le libellé, donc décalé de la largeur de la case + son écart. */ .ta-cand-panel__warn { margin: 2px 0 0 34px; font: 700 12px/1.3 var(--font-nunito); color: var(--color-rouge); } /* ============================================================ 4. Cases de code (vérification téléphone / courriel) ============================================================ */ .ta-cand-otp { display: flex; gap: 9px; } .ta-cand-otp__cell { flex: 1; min-width: 0; height: 58px; padding: 0; text-align: center; font: 800 24px/1 var(--font-nunito); color: var(--color-encre); background: var(--color-surface); border: 1px solid var(--color-filet-fort); border-radius: var(--r-champ); } /* Anneau crème + rouge autour de la case. Le sélecteur est préfixé par la page pour passer devant la règle `:focus-visible` globale de `.ta-v2-scope`, qui poserait sinon son propre anneau et forcerait un rayon de 12px. */ .ta-cand-page .ta-cand-otp__cell:focus, .ta-cand-page .ta-cand-otp__cell:focus-visible { outline: none; border-color: var(--color-encre); border-radius: var(--r-champ); box-shadow: var(--ta-cand-ring); } /* ============================================================ 5. Adresse (autocomplétion Google, sélection obligatoire) ============================================================ */ /* Le conteneur crée le contexte d'empilement du menu ; il passe devant le contenu qui suit (bandeau « adresse confirmée »). */ .ta-cand-addr { position: relative; z-index: 5; } .ta-cand-addr__drop { position: absolute; left: 0; right: 0; top: 74px; z-index: 30; background: var(--color-surface); border: 1px solid var(--color-filet); border-radius: var(--r-champ); box-shadow: var(--shadow-2); overflow: hidden; } /* Bandeau d'attribution : l'API Google impose la mention, et « sélection obligatoire » prévient la saisie libre — c'est la sélection qui fournit les coordonnées du géocodage. */ .ta-cand-addr__head { display: flex; align-items: center; gap: 6px; padding: 9px 14px; background: var(--color-creme); border-bottom: 1px solid var(--color-filet); font: 700 10px/1.2 var(--font-nunito); letter-spacing: .05em; text-transform: uppercase; color: var(--color-ardoise); } .ta-cand-addr__item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 12px 14px; background: none; border: none; border-bottom: 1px solid var(--ta-cand-filet-doux, #F1EADF); cursor: pointer; font: 400 14px/1.3 var(--font-nunito); color: var(--color-encre); } .ta-cand-addr__item:last-child { border-bottom: none; } .ta-cand-addr__item:hover { background: var(--color-hover); } .ta-cand-addr__pin { flex: none; display: inline-flex; color: var(--color-ardoise); } /* ============================================================ 6. Entrées de type CV (formations, expériences en tutorat) ============================================================ */ .ta-cand-entries { display: flex; flex-direction: column; gap: 12px; } /* Teintes de niveau : posées sur l'entrée, consommées par la tuile d'icône ET par l'étiquette, qui restent ainsi accordées. Le défaut est la teinte neutre des expériences. */ .ta-cand-entry { --ta-cand-tag-bg: var(--color-hover); --ta-cand-tag-txt: var(--color-encre-2); --ta-cand-tag-bd: var(--color-filet); display: flex; align-items: center; gap: 13px; padding: 14px; } .ta-cand-entry--univ { --ta-cand-tag-bg: #F6EBD0; --ta-cand-tag-txt: #7A5E18; --ta-cand-tag-bd: #E4CF93; } .ta-cand-entry--collegial { --ta-cand-tag-bg: #E9EDF2; --ta-cand-tag-txt: #47566B; --ta-cand-tag-bd: #CDD6E1; } .ta-cand-entry--autre { --ta-cand-tag-bg: #E9F0E7; --ta-cand-tag-txt: #4C6349; --ta-cand-tag-bd: #CFDDCB; } /* En édition, l'entrée devient un formulaire : plus de rangée horizontale, un rembourrage un peu plus généreux. */ .ta-cand-entry--editing { display: block; padding: 16px; } .ta-cand-entry__head, .ta-cand-cardhead { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .ta-cand-entry__fields { display: flex; flex-direction: column; gap: 12px; } .ta-cand-entry__icon { flex: none; width: 44px; height: 44px; border-radius: var(--r-controle); display: inline-flex; align-items: center; justify-content: center; background: var(--ta-cand-tag-bg); color: var(--ta-cand-tag-txt); } .ta-cand-entry__body { flex: 1; min-width: 0; } .ta-cand-entry__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; } .ta-cand-entry__tag { font: 700 10px/1 var(--font-nunito); letter-spacing: .04em; text-transform: uppercase; padding: 4px 8px; border-radius: var(--r-rond); background: var(--ta-cand-tag-bg); color: var(--ta-cand-tag-txt); border: 1px solid var(--ta-cand-tag-bd); } .ta-cand-entry__date { font: 600 11px/1 var(--font-nunito); color: var(--color-ardoise); } /* Une entrée tient sur une ligne : un intitulé long se coupe, il ne pousse pas les actions hors de la carte. */ .ta-cand-entry__title { margin: 7px 0 0; font: 700 14.5px/1.25 var(--font-nunito); color: var(--color-encre); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ta-cand-entry__sub { margin: 2px 0 0; font: 400 12px/1.3 var(--font-nunito); color: var(--color-encre-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ta-cand-entry__actions { flex: none; display: flex; flex-direction: column; gap: 8px; } /* Bouton d'action compacte (crayon, x) : icône en ardoise, qui passe à l'encre au survol — jamais de rouge ici. */ .ta-cand-iconbtn { flex: none; display: inline-flex; align-items: center; justify-content: center; background: none; border: none; padding: 2px; cursor: pointer; border-radius: var(--r-rond); color: var(--color-ardoise); } .ta-cand-iconbtn:hover { color: var(--color-encre); } /* Période d'exercice : deux années séparées par « à ». */ .ta-cand-period { display: flex; align-items: flex-end; gap: 10px; } .ta-cand-period__col { flex: 1; min-width: 0; } /* Depuis/Jusqu'à : intitule persistant au-dessus de chaque select. Le placeholder natif ("De"/"À") disparait des qu'une annee est choisie — sans ce libelle il devient impossible de distinguer les deux colonnes une fois toutes deux remplies (retour Maël, 2026-09-03). */ .ta-cand-period__label { display: block; margin-bottom: 6px; font: 600 12px/1.2 var(--font-nunito); color: var(--color-ardoise); } .ta-cand-period__sep { flex: none; padding-bottom: 14px; font: 600 13px/1 var(--font-nunito); color: var(--color-ardoise); } /* ---- Bouton d'ajout pointillé ---- */ .ta-cand-add { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 13px; background: var(--color-surface); border: 1px dashed var(--color-filet-fort); border-radius: var(--r-champ); cursor: pointer; font: 700 14px/1 var(--font-nunito); color: var(--color-encre); transition: background var(--ease-standard), border-color var(--ease-standard); } .ta-cand-add:hover { background: var(--color-hover); border-color: var(--color-encre-2); } .ta-cand-add__icon { display: inline-flex; flex: none; } /* ============================================================ 7. Date de naissance (trois menus côte à côte) ------------------------------------------------------------ Menus autoportants et non des `.ta-field` : la maquette les veut compacts et en gras, pour se lire comme une date et non comme trois champs de formulaire. Rayon 12px (`--r-controle`, vocabulaire fermé du DS) et bordure ramenée au token de champ — la maquette y met un #E4D9C9 qui n'existe nulle part ailleurs dans le système. ============================================================ */ .ta-cand-dob { display: flex; gap: 10px; max-width: 420px; } .ta-cand-dob__select { box-sizing: border-box; padding: 12px; border: 1px solid var(--color-filet-fort); border-radius: var(--r-controle); background: var(--color-surface); font: 700 15px/1 var(--font-nunito); color: var(--color-encre); cursor: pointer; appearance: none; -webkit-appearance: none; /* Chevron en fond : le menu reste cliquable sur toute sa surface, flèche comprise. */ background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 10px center; padding-right: 28px; } .ta-cand-dob__select--jour { flex: 0 0 84px; } .ta-cand-dob__select--mois { flex: 1 1 auto; text-transform: capitalize; } .ta-cand-dob__select--annee { flex: 0 0 104px; } /* ============================================================ 8. CV (dépôt facultatif) et motivation ============================================================ */ .ta-cand-cv__drop { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 22px; text-align: center; background: var(--color-surface); border: 1px dashed var(--color-filet-fort); border-radius: var(--r-carte); cursor: pointer; font: 700 14px/1.3 var(--font-nunito); color: var(--color-encre); transition: background var(--ease-standard), border-color var(--ease-standard); } .ta-cand-cv__drop:hover { background: var(--color-hover); border-color: var(--color-encre-2); } /* Invisible mais FOCUSABLE (même recette que `.ta-check__input`) : un `display: none` — ce que fait la maquette — rendrait la zone de dépôt inatteignable au clavier. C'est l'input qui reçoit le focus, et la zone qui montre l'anneau, via :focus-within. */ .ta-cand-cv__input { position: absolute; opacity: 0; width: 1px; height: 1px; } /* Le seul rouge de l'écran : c'est l'action. */ .ta-cand-cv__plus { flex: none; display: inline-flex; color: var(--color-rouge); } .ta-cand-cv__meta { font-weight: 400; color: var(--color-ardoise); } .ta-cand-cv__file { display: flex; align-items: center; gap: 13px; padding: 14px; } .ta-cand-cv__icon { flex: none; width: 40px; height: 40px; border-radius: var(--r-controle); display: inline-flex; align-items: center; justify-content: center; background: var(--color-rouge-clair); color: var(--color-rouge); } .ta-cand-cv__body { flex: 1; min-width: 0; } .ta-cand-cv__name { font: 700 14px/1.25 var(--font-nunito); color: var(--color-encre); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ta-cand-cv__size { margin: 2px 0 0; font: 400 12px/1.3 var(--font-nunito); color: var(--color-ardoise); } /* ---- Zone de texte de motivation ---- Autoportante plutôt que logée dans un `.ta-field__box`, qui centre verticalement son contenu et conviendrait mal à sept lignes de texte. */ .ta-cand-textarea { background: var(--color-surface); border: 1px solid var(--color-filet-fort); border-radius: var(--r-champ); padding: 12px 13px; transition: border-color var(--ease-standard), box-shadow var(--ease-standard); } .ta-cand-page .ta-cand-textarea:focus-within { border-color: var(--color-encre); box-shadow: var(--ta-cand-ring); } .ta-cand-textarea__input { display: block; width: 100%; min-height: 150px; border: none; background: none; resize: vertical; font: 400 14px/1.6 var(--font-nunito); color: var(--color-encre); } /* L'anneau appartient à la boîte, jamais au contrôle logé dedans (même principe que `.ta-field__input`). */ .ta-cand-page .ta-cand-textarea__input:focus, .ta-cand-page .ta-cand-textarea__input:focus-visible { outline: none; box-shadow: none; } .ta-cand-textarea__input::placeholder { color: var(--color-ardoise); } .ta-cand-count { font: 700 12px/1 var(--font-nunito); color: var(--color-ardoise); } .ta-cand-count--over { color: var(--color-rouge); } /* 2026-09-10 (décision de Maël) : quand le candidat essaie de continuer sans avoir écrit assez de mots à A4c, le compteur vibre légèrement pour attirer l'oeil dessus — le bouton reste désactivé (aucune mutation de page pour franchir le garde-fou), c'est juste un geste qui pointe vers la vraie raison du blocage plutôt qu'un bouton inerte sans explication. */ .ta-cand-count--attire { color: var(--color-rouge); animation: taCandCountShake 0.4s ease-in-out; } @keyframes taCandCountShake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-3px); } 40% { transform: translateX(3px); } 60% { transform: translateX(-2px); } 80% { transform: translateX(2px); } } @media (prefers-reduced-motion: reduce) { .ta-cand-count--attire { animation: none; } } /* ============================================================ 9. Bandeaux d'état ============================================================ */ .ta-cand-note { margin: 0; display: flex; align-items: flex-start; gap: 9px; padding: 12px 14px; border-radius: var(--r-controle); font: 600 13px/1.4 var(--font-nunito); } .ta-cand-note__icon { flex: none; display: inline-flex; margin-top: 1px; color: inherit; } .ta-cand-note--succes { align-items: center; background: var(--color-succes-bg); color: var(--color-succes); } .ta-cand-note--attention { background: var(--color-attention-bg); color: #8A6314; } .ta-cand-note--info { background: #EAF2FB; color: #2563EB; } /* Bandeau rouge pâle : le texte reste en encre secondaire (ce n'est pas une erreur, c'est une information), seule l'icône porte le rouge. */ .ta-cand-note--rouge { padding: 14px; border-radius: var(--r-champ); background: var(--color-rouge-clair); font-weight: 400; color: var(--color-encre-2); } .ta-cand-note--rouge .ta-cand-note__icon { color: var(--color-rouge); } /* ============================================================ 10. Matières (recherche, cours retenus) ============================================================ */ .ta-cand-result { border-radius: var(--r-champ); overflow: hidden; } .ta-cand-result__item { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; text-align: left; padding: 13px 14px; background: none; border: none; border-bottom: 1px solid var(--ta-cand-filet-doux, #F1EADF); cursor: pointer; font: 600 14px/1.3 var(--font-nunito); color: var(--color-encre); } .ta-cand-result__item:last-child { border-bottom: none; } .ta-cand-result__item:hover { background: var(--color-hover); } .ta-cand-result__plus { flex: none; display: inline-flex; color: var(--color-rouge); } .ta-cand-matlist { display: flex; flex-direction: column; gap: 8px; } .ta-cand-mat { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--r-champ); } /* Toute la ligne rouvre la feuille de niveau ; la croix, elle, retire le cours — d'où deux boutons distincts. */ .ta-cand-mat__btn { flex: 1; min-width: 0; padding: 0; text-align: left; background: none; border: none; cursor: pointer; border-radius: var(--r-badge); } .ta-cand-mat__course { font: 700 14px/1.25 var(--font-nunito); color: var(--color-encre); } .ta-cand-mat__sum { margin: 2px 0 0; font: 400 12px/1.3 var(--font-nunito); color: var(--color-encre-2); } /* ============================================================ 11. Feuille de niveau (ancrée en bas de la carte) ============================================================ */ .ta-cand-sheetwrap { position: absolute; inset: 0; z-index: 60; display: flex; flex-direction: column; justify-content: flex-end; padding: 12px; animation: ta-fade .18s ease both; } .ta-cand-sheet { position: relative; background: var(--color-surface); border-radius: var(--r-carte-lg); padding: 20px 18px; box-shadow: rgba(44, 38, 34, .04) 0 0 0 1px, rgba(44, 38, 34, .18) 0 12px 34px; max-height: 82%; overflow-y: auto; scrollbar-width: none; animation: ta-sheet .26s cubic-bezier(.22, 1, .36, 1) both; } .ta-cand-sheet::-webkit-scrollbar { width: 0; } .ta-cand-sheet__title { margin: 6px 0 0; font: 800 19px/1.25 var(--font-nunito); letter-spacing: -.01em; color: var(--color-encre); } .ta-cand-sheet__foot { display: flex; gap: 10px; margin: 22px 0 0; } /* ============================================================ 12. Modales du parcours ------------------------------------------------------------ Posées en absolu DANS la carte (et non en `fixed` comme `.ta-modal` du DS2) : la maquette voile la carte, pas la page. Trois teintes d'icône selon la nature du message. ============================================================ */ .ta-cand-modal__wrap { position: absolute; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center; padding: 24px; animation: ta-fade .18s ease both; } .ta-cand-modal__scrim { position: absolute; inset: 0; background: var(--voile-modale); border: none; padding: 0; } .ta-cand-modal { position: relative; max-width: 340px; width: 100%; background: var(--color-surface); border-radius: var(--r-carte-lg); padding: 24px 20px; box-shadow: rgba(44, 38, 34, .04) 0 0 0 1px, rgba(44, 38, 34, .18) 0 12px 34px; text-align: center; animation: ta-sheet .26s cubic-bezier(.22, 1, .36, 1) both; } .ta-cand-modal--sm { max-width: 320px; } .ta-cand-modal__icon { width: 48px; height: 48px; margin: 0 0 14px; border-radius: var(--r-rond); display: inline-flex; align-items: center; justify-content: center; background: var(--color-rouge-clair); color: var(--color-rouge); } .ta-cand-modal__icon--ambre { background: #FDF1E3; color: #D97706; } .ta-cand-modal__icon--bleu { background: #EAF2FB; color: #2563EB; } .ta-cand-modal__title { margin: 0; font: 800 20px/1.25 var(--font-nunito); letter-spacing: -.01em; color: var(--color-encre); } .ta-cand-modal__text { margin: 10px 0 0; font: 400 14px/1.5 var(--font-nunito); color: var(--color-encre-2); } .ta-cand-modal__text strong { color: var(--color-encre); font-weight: 700; } .ta-cand-modal__actions { display: flex; flex-direction: column; gap: 10px; margin: 20px 0 0; } /* Action principale de la modale : plus généreuse que `.ta-btn--md`, parce qu'elle est seule et pleine largeur. */ .ta-cand-modal__cta { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 13px; background: var(--color-rouge); color: #fff; border: none; border-radius: var(--r-controle); cursor: pointer; text-decoration: none; font: 700 15px/1 var(--font-nunito); } .ta-cand-modal__cta:hover { background: var(--color-rouge-fonce); color: #fff; } .ta-cand-modal__alt { width: 100%; padding: 11px; background: none; border: none; cursor: pointer; border-radius: var(--r-controle); font: 700 14px/1 var(--font-nunito); color: var(--color-encre-2); } .ta-cand-modal__alt:hover { color: var(--color-encre); } /* Variante « politique de confidentialité » : plus large, texte aligné à gauche (paragraphes, pas un message centré), avec une zone défilante pour le texte extrait du site (voir _modals.html et privacy_policy_content_service.py). */ .ta-cand-modal--lg { max-width: 480px; text-align: left; } .ta-cand-modal--lg .ta-cand-modal__text { margin-top: 0; } .ta-cand-modal__policy { margin: 14px 0 0; max-height: min(48vh, 360px); overflow-y: auto; padding: 14px 16px; border: 1px solid var(--color-filet); border-radius: var(--r-champ); background: var(--color-creme); } .ta-cand-modal__notice { margin: 0 0 12px; padding: 10px 12px; border-radius: var(--r-controle); background: var(--color-attention-bg); color: #8A6314; font: 600 12px/1.4 var(--font-nunito); } /* Le service ne renvoie qu'une poignée de balises sans attribut (voir `_KEPT_BLOCKS`/`_KEPT_INLINE`) : on leur donne juste assez de mise en forme pour rester lisibles, aucune ne porte de classe. */ .ta-cand-modal__policy-text { font: 400 13px/1.55 var(--font-nunito); color: var(--color-encre); } .ta-cand-modal__policy-text > *:first-child { margin-top: 0; } .ta-cand-modal__policy-text h1, .ta-cand-modal__policy-text h2, .ta-cand-modal__policy-text h3, .ta-cand-modal__policy-text h4 { margin: 16px 0 6px; font: 700 14px/1.3 var(--font-nunito); color: var(--color-encre); } .ta-cand-modal__policy-text p { margin: 0 0 10px; } .ta-cand-modal__policy-text ul, .ta-cand-modal__policy-text ol { margin: 0 0 10px; padding-left: 20px; } .ta-cand-modal__policy-text li { margin: 0 0 4px; } .ta-cand-modal__policy-text blockquote { margin: 0 0 10px; padding-left: 12px; border-left: 2px solid var(--color-filet-fort); color: var(--color-encre-2); } .ta-cand-modal__link { display: inline-block; margin-top: 4px; font: 700 13px/1.4 var(--font-nunito); color: var(--color-rouge); } .ta-cand-modal__link:hover { color: var(--color-rouge-fonce); } /* ============================================================ 13. Curseur de durée de trajet ============================================================ */ .ta-cand-range { width: 100%; height: 24px; margin: 14px 0 0; accent-color: var(--color-rouge); } .ta-cand-range__bounds { display: flex; justify-content: space-between; margin: 2px 0 0; font: 400 11px/1 var(--font-nunito); color: var(--color-ardoise); } /* ============================================================ 14. Tableau de bord de l'offre de service (A8) ============================================================ */ /* ---- Suivi par étapes ---- */ .ta-cand-stepper { display: flex; align-items: flex-start; } .ta-cand-stepper__item { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; } /* La piste traverse la pastille : deux demi-traits, dont le premier et le dernier de la file sont transparents. */ .ta-cand-stepper__track { display: flex; align-items: center; width: 100%; } .ta-cand-stepper__line { flex: 1; height: 2px; background: var(--color-filet); } .ta-cand-stepper__line--on { background: var(--color-rouge); } .ta-cand-stepper__line--vide { background: transparent; } .ta-cand-stepper__dot { flex: none; width: 24px; height: 24px; border-radius: var(--r-rond); display: inline-flex; align-items: center; justify-content: center; background: var(--color-hover); border: 1px solid var(--color-filet); color: transparent; } /* `border: none` et pas seulement une couleur : la bordure rognerait la boîte de contenu d'un pixel et décentrerait la coche d'un demi-pixel. */ .ta-cand-stepper__item--done .ta-cand-stepper__dot { background: var(--color-rouge); border: none; color: #fff; } /* Étape en cours : pastille creuse à halo, la seule chose de l'écran qui « bat ». Le battement démarre après 3 s (pas au premier affichage) : le temps que le regard se pose sur le stepper avant que quoi que ce soit ne bouge, sinon l'œil ne sait plus où se poser en arrivant sur l'écran (retour Maël, 2026-09-03 — rien ne signalait « en révision »). */ .ta-cand-stepper__item--current .ta-cand-stepper__dot { background: var(--color-surface); border: 2px solid var(--color-rouge); box-shadow: 0 0 0 4px var(--color-rouge-clair); animation: ta-stepper-pulse 2s ease-in-out 3s infinite; } @keyframes ta-stepper-pulse { 0%, 100% { box-shadow: 0 0 0 4px var(--color-rouge-clair); } 50% { box-shadow: 0 0 0 7px var(--color-rouge-clair); } } .ta-cand-stepper__core { width: 9px; height: 9px; border-radius: var(--r-rond); background: var(--color-rouge); display: inline-block; } .ta-cand-stepper__label { margin: 8px 0 0; font: 700 11px/1.25 var(--font-nunito); color: var(--color-ardoise); } .ta-cand-stepper__note { margin: 3px 0 0; padding: 0 2px; font: 400 10px/1.25 var(--font-nunito); color: var(--color-ardoise); } .ta-cand-stepper__item--done .ta-cand-stepper__label { color: var(--color-encre); } .ta-cand-stepper__item--current .ta-cand-stepper__label { color: var(--color-rouge); } .ta-cand-stepper__item--current .ta-cand-stepper__note { color: var(--color-rouge-fonce); } /* ---- Résumé de l'offre ---- */ .ta-cand-summary { padding: 16px; } .ta-cand-summary__list { display: flex; flex-direction: column; gap: 14px; } .ta-cand-summary__row { display: flex; flex-direction: column; gap: 3px; } .ta-cand-summary__row--chips { gap: 6px; } .ta-cand-summary__k { font: 400 12px/1.2 var(--font-nunito); color: var(--color-ardoise); } .ta-cand-summary__v { font: 600 14px/1.35 var(--font-nunito); color: var(--color-encre); } .ta-cand-summary__chips { display: flex; flex-wrap: wrap; gap: 6px; } /* Jeton du résumé. Ce n'est PAS `.ta-chip` du DS2 : la maquette le veut sans bordure, un cran plus gras et un pixel plus large, ce qui le rend aussi 2px moins haut que le composant (dont la bordure transparente compte dans la hauteur) — 2px qui décalaient toute la fin de l'écran. Pour revenir au composant partagé, il suffit d'échanger cette classe contre `.ta-chip` dans le gabarit. */ .ta-cand-summary__chip { display: inline-flex; align-items: center; padding: 6px 11px; border-radius: var(--r-rond); background: var(--color-hover); font: 700 12px/1 var(--font-nunito); color: var(--color-encre); white-space: nowrap; } /* ---- Ce qui s'ouvrira une fois l'offre acceptée ---- Liste volontairement éteinte (opacité) : on montre la destination sans faire croire qu'elle est cliquable. */ .ta-cand-locked { padding: 0; overflow: hidden; } .ta-cand-locked__item { display: flex; align-items: center; gap: 13px; padding: 14px 16px; border-bottom: 1px solid var(--ta-cand-filet-doux, #F1EADF); opacity: .62; } .ta-cand-locked__item:last-child { border-bottom: none; } .ta-cand-locked__icon { flex: none; width: 36px; height: 36px; border-radius: var(--r-controle); display: inline-flex; align-items: center; justify-content: center; background: var(--color-hover); color: var(--color-ardoise); } .ta-cand-locked__label { flex: 1; font: 700 14px/1.3 var(--font-nunito); color: var(--color-encre-2); } .ta-cand-locked__lock { flex: none; display: inline-flex; color: var(--color-ardoise); } /* ---- Animation VeloMatchRide ---- Un vélo TutorAide roule vers `data-velo-dest`, puis la pastille de destination s'allume à l'arrivée. Portée de la planche Claude Design « VeloMatchRide » (dc-import de la maquette, jamais chargée en production) vers du SVG + JS simple, pilotée par velo.js. Toujours en blanc sur `.ta-signature` (fond rouge) : les couleurs sont donc en dur, pas en tokens — cette surface-là est déjà elle-même l'exception rouge du système. Deux instances vivent dans le DOM en même temps (A1b, A8) ; chacune s'anime indépendamment, scopée par velo.js via ce conteneur. */ .ta-cand-velo { position: relative; display: block; width: 100%; height: 40px; color: #fff; } .ta-cand-velo__road { position: absolute; left: 2px; top: 31px; width: 0; height: 2px; border-radius: 999px; background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.28) 14%, rgba(255,255,255,.28) 82%, rgba(255,255,255,0)); } .ta-cand-velo__bike { position: absolute; left: 0; top: 3px; width: 34px; height: 31px; overflow: visible; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transform-origin: 20% 90%; } .ta-cand-velo__word { fill: #fff; stroke: none; font: 800 11.5px/1 var(--font-nunito); letter-spacing: -0.4px; } .ta-cand-velo__dest { position: absolute; right: 0; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border: 1.5px solid rgba(255,255,255,.5); border-radius: 999px; font: 800 12px/1 var(--font-nunito); white-space: nowrap; opacity: .55; transition: opacity .3s ease, background .3s ease, box-shadow .3s ease; } .ta-cand-velo__dest--lit { opacity: 1; background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.95); box-shadow: 0 0 0 5px rgba(255,255,255,.10); } /* ============================================================ 15. Mouvement ------------------------------------------------------------ Les mêmes cinq animations que la maquette. Le garde-fou `prefers-reduced-motion` du DS vit dans son `base.css`, que cette page autonome ne charge pas : il est donc repris ici, en bas de section. Sans lui, le parcours serait le seul écran du système à ignorer la préférence système de l'utilisateur. ============================================================ */ @keyframes ta-spin { to { transform: rotate(360deg); } } @keyframes ta-reveal { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } @keyframes ta-shake { 0%, 100% { transform: translateX(0); } 18%, 58% { transform: translateX(-6px); } 38%, 78% { transform: translateX(6px); } } @keyframes ta-sheet { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } } @keyframes ta-fade { from { opacity: 0; } to { opacity: 1; } } /* Révélation progressive d'un champ qui vient d'apparaître. */ .ta-cand-reveal { animation: ta-reveal .24s ease both; } /* Refus d'un code de vérification. */ .ta-cand-shake { animation: ta-shake .5s ease; } /* Mouvement sobre — et respecté. */ @media (prefers-reduced-motion: reduce) { .ta-cand-page *, .ta-cand-page *::before, .ta-cand-page *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } } /* ============================================================ 16. Anneau de focus des contrôles nus ------------------------------------------------------------ Les composants DS2 (bouton, pilule, case) portent déjà le leur. Restent les boutons sans habillage du parcours : sans ces règles, ils héritent de l'anneau générique de `.ta-v2-scope` (rayon 12px imposé), qui déborde des lignes de liste pleine largeur. ============================================================ */ .ta-cand-page .ta-cand-back:focus-visible, .ta-cand-page .ta-cand-add:focus-visible, .ta-cand-page .ta-cand-modal__cta:focus-visible, .ta-cand-page .ta-cand-modal__alt:focus-visible { outline: none; box-shadow: var(--ta-cand-ring); border-radius: var(--r-controle); } .ta-cand-page .ta-cand-add:focus-visible { border-radius: var(--r-champ); } .ta-cand-page .ta-cand-cv__drop:focus-within { outline: none; box-shadow: var(--ta-cand-ring); border-radius: var(--r-carte); } .ta-cand-page .ta-cand-linkbtn:focus-visible, .ta-cand-page .ta-cand-mat__btn:focus-visible { outline: none; box-shadow: var(--ta-cand-ring); border-radius: var(--r-badge); } .ta-cand-page .ta-cand-iconbtn:focus-visible { outline: none; box-shadow: var(--ta-cand-ring); border-radius: var(--r-rond); } /* Ligne de liste pleine largeur : anneau à angles droits, posé à l'intérieur, sinon il sort de la carte qui la découpe. */ .ta-cand-page .ta-cand-addr__item:focus-visible, .ta-cand-page .ta-cand-result__item:focus-visible { outline: none; border-radius: 0; box-shadow: inset 0 0 0 2px var(--color-rouge); background: var(--color-hover); } /* ============================================================ 17. Rythme vertical ------------------------------------------------------------ Les gabarits n'ont pas droit au style en ligne : les écarts entre blocs de la maquette passent par ces utilitaires, dont le nom porte la valeur en pixels. Une seule source de marge verticale, donc aucun conflit entre deux blocs voisins. Le préfixe `.ta-cand-page` n'est pas décoratif : plusieurs composants (le titre et le sous-titre de la surface-signature, les titres de modale) posent `margin: 0` depuis un sélecteur à deux classes. Sans ce préfixe, l'utilitaire perd — et la marge ne s'applique tout simplement pas. Corollaire : la page charge `client_design_system2.css` AVANT ce fichier. ============================================================ */ .ta-cand-page .ta-cand-mt-4 { margin-top: 4px; } .ta-cand-page .ta-cand-mt-6 { margin-top: 6px; } .ta-cand-page .ta-cand-mt-8 { margin-top: 8px; } .ta-cand-page .ta-cand-mt-10 { margin-top: 10px; } .ta-cand-page .ta-cand-mt-12 { margin-top: 12px; } .ta-cand-page .ta-cand-mt-14 { margin-top: 14px; } .ta-cand-page .ta-cand-mt-16 { margin-top: 16px; } .ta-cand-page .ta-cand-mt-18 { margin-top: 18px; } .ta-cand-page .ta-cand-mt-20 { margin-top: 20px; } .ta-cand-page .ta-cand-mt-22 { margin-top: 22px; } .ta-cand-page .ta-cand-mt-24 { margin-top: 24px; } .ta-cand-page .ta-cand-mb-10 { margin-bottom: 10px; } .ta-cand-page .ta-cand-mb-12 { margin-bottom: 12px; } .ta-cand-page .ta-cand-mb-14 { margin-bottom: 14px; } .ta-cand-page .ta-cand-mb-16 { margin-bottom: 16px; } /* Colonne de champs révélés un à un (écran A2). */ .ta-cand-stack { display: flex; flex-direction: column; gap: 16px; } /* ============================================================ 18. Mobile ------------------------------------------------------------ Sous 520px la carte devient l'écran : plus de marge, plus de coins, la hauteur est celle du viewport et c'est le corps qui défile — l'en-tête et le pied restent en place. ============================================================ */ @media (max-width: 520px) { .ta-cand-page { padding: 0; align-items: stretch; /* Doit suivre EXACTEMENT la meme unite que `.ta-cand-shell` juste en dessous : sinon la page (restee en `100vh`, la plus grande hauteur possible) reste plus haute que la carte (en `100dvh`, la hauteur reelle du moment), et son propre fond crème apparait sous le pied des que la barre de Safari est deployee — exactement le bandeau vide que le premier correctif a introduit par inattention. */ min-height: 100dvh; } .ta-cand-shell { max-width: none; min-height: 100vh; max-height: 100vh; /* `100vh` vaut la hauteur du PLUS GRAND etat du navigateur (barre d'adresse/de navigation repliee) : quand cette barre est deployee (Safari iOS, notamment la barre translucide « Liquid Glass » depuis iOS 26), la fenetre visible est plus courte que `100vh`, et le pied — cale a la hauteur d'une carte trop haute pour l'espace reellement visible — se retrouve sous la barre. `dvh` suit la hauteur REELLE en temps reel ; ignoree par les navigateurs qui ne la connaissent pas, elle prend le relais des lignes `vh` juste au-dessus, qui restent le repli. */ min-height: 100dvh; max-height: 100dvh; border-radius: 0; border-left: none; border-right: none; border-top: none; box-shadow: none; } .ta-cand-head { padding: 12px 16px; } .ta-cand-body { padding: 24px 18px 28px; } /* + la zone protegee du bas (barre de geste sur iPhone a encoche) : necessite `viewport-fit=cover` dans la balise viewport (apply.html), sinon `env()` vaut toujours 0. */ .ta-cand-foot { padding: 12px 16px calc(18px + env(safe-area-inset-bottom)); } .ta-cand-h1 { font-size: 22px; } .ta-cand-otp { gap: 6px; } .ta-cand-otp__cell { height: 52px; font-size: 21px; } .ta-cand-dob { max-width: none; gap: 8px; } .ta-cand-dob__select--jour { flex: 0 0 68px; } .ta-cand-dob__select--annee { flex: 0 0 88px; } .ta-cand-dob__select { padding: 11px 24px 11px 10px; font-size: 14px; } /* Quatre libellés d'étape sur 375px : on resserre plutôt que de laisser « En révision » couper en trois lignes. */ .ta-cand-stepper__label { font-size: 10px; } .ta-cand-stepper__note { font-size: 9px; padding: 0; } .ta-cand-entry { gap: 10px; } .ta-cand-entry__icon { width: 38px; height: 38px; } .ta-cand-sheet { padding: 18px 14px; } .ta-cand-modal__wrap { padding: 16px; } } /* ============================================================ 19. Grille de disponibilites (A6b) ------------------------------------------------------------ Jour (7 rangees) x creneau (Matin/Apres-midi/Soir, 3 colonnes) : meme forme et meme format de jetons "jour_creneau" que la grille deja utilisee par l'ancien formulaire web (app/templates/tutor_application/apply.html, .tutor-apply-avail-*) et par la fiche manager — PAS la grille horaire (une case par heure) de l'onboarding tuteur (step_availability.html), qui alimente un modele de donnees different. Cellules en grille a colonnes egales : un composant dedie plutot qu'un detournement de .ta-pill (pensee pour une rangee de largeur libre, voir A2/A6). ============================================================ */ .ta-cand-avail-grid { display: grid; grid-template-columns: 46px repeat(3, 1fr); gap: 6px; max-width: 420px; } .ta-cand-avail-head { font: 600 12px/1.3 var(--font-nunito); color: var(--color-encre-2); text-align: center; align-self: end; padding-bottom: 4px; } .ta-cand-avail-day { display: flex; align-items: center; background: transparent; border: none; padding: 4px 2px; font: 700 12.5px/1.3 var(--font-nunito); color: var(--color-encre-2); cursor: pointer; border-radius: var(--r-badge); text-align: left; } .ta-cand-avail-day:hover { background: var(--color-hover); color: var(--color-encre); } .ta-cand-avail-day:focus-visible { outline: none; box-shadow: var(--focus-ring); } .ta-cand-avail-cell { min-height: 40px; border: 1px solid var(--color-filet); border-radius: var(--r-controle); background: var(--color-hover); cursor: pointer; padding: 0; transition: background .15s ease, border-color .15s ease; } .ta-cand-avail-cell:hover { border-color: var(--color-rouge); } .ta-cand-avail-cell:focus-visible { outline: none; box-shadow: var(--focus-ring); } .ta-cand-avail-cell--selected { background: var(--color-rouge); border-color: var(--color-rouge); } @media (max-width: 480px) { .ta-cand-avail-grid { grid-template-columns: 34px repeat(3, 1fr); gap: 4px; } .ta-cand-avail-head { font-size: 10.5px; } .ta-cand-avail-day { font-size: 11px; } }