/* ============================================================ TutorAide — Design System 2 (partagé multi-rôles) ------------------------------------------------------------ Tokens et classes de composants repris tels quels du design system fourni (TutorAide_Design_System2.zip) : Nunito, fond crème presque-blanc, rouge de marque rare et signifiant. Scopé à .ta-v2 (posé sur — voir base.html) pour les rôles migrés vers ce système : client/parent, dependant, tutor (2026-08) et prospect (2026-09-07). Seul manager garde encore l'ancien thème (manager_professional_theme.css), page par page. Le nom de fichier ("client_design_system2.css") est un historique de la première migration ; le contenu est générique et role-agnostic — ne pas dupliquer ce fichier par rôle, l'étendre ici au besoin. ============================================================ */ .ta-v2 { --color-creme: #FAF7F2; --color-surface: #FFFFFF; --color-hover: #F2ECE4; --color-encre: #2C2622; --color-encre-2: #6B635C; --color-ardoise: #8A8079; --color-filet: #E7DDD1; --color-filet-fort: #D8CBBA; --color-rouge: #E00F18; --color-rouge-fonce: #B80C13; --color-rouge-clair: #FBEAEA; --color-succes: #2E7D52; --color-succes-bg: #E7F1EA; --color-attention: #B07A12; --color-attention-bg: #F6ECD6; --font-nunito: 'Nunito', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif; --r-badge: 4px; --r-controle: 12px; --r-champ: 14px; --r-carte: 16px; --r-carte-lg: 20px; --r-rond: 999px; --shadow-1: 0 1px 2px rgba(44, 38, 34, .05); --shadow-2: rgba(44, 38, 34, .04) 0 0 0 1px, rgba(44, 38, 34, .07) 0 4px 12px 0; --shadow-fab: 0 6px 16px rgba(224, 15, 24, .30); --ease-standard: 0.18s ease; --focus-ring: 0 0 0 2px #fff, 0 0 0 4px var(--color-rouge); background: var(--color-creme); color: var(--color-encre); } /* Le contenu applicatif (client/*.html) est en Nunito ; le chrome partagé (navbar Bootstrap, dropdown) garde sa police d'origine — seule .ta-v2-scope (posé sur le conteneur de page dans les templates client) applique la typo pleinement. */ .ta-v2-scope { font-family: var(--font-nunito); color: var(--color-encre); } .ta-v2-scope :focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--r-controle); } /* ---- Nav en onglets horizontaux (remplace la sidebar pour client/parent) ---- */ .cv2-topnav { display: flex; align-items: center; gap: 4px; } .cv2-navlink { font: 700 13px/1 var(--font-nunito); color: var(--color-encre-2); padding: 9px 13px; border-radius: var(--r-controle); text-decoration: none; white-space: nowrap; transition: background var(--ease-standard), color var(--ease-standard); } .cv2-navlink:hover { background: var(--color-hover); color: var(--color-encre); text-decoration: none; } .cv2-navlink.active { background: var(--color-hover); color: var(--color-encre); } .cv2-bell { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; background: none; border: none; border-radius: var(--r-rond); color: var(--color-encre); cursor: pointer; } .cv2-bell:hover { background: var(--color-hover); } .cv2-bell .dot { position: absolute; top: 2px; right: 2px; min-width: 15px; height: 15px; padding: 0 3px; border-radius: var(--r-rond); background: var(--color-rouge); color: #fff; font: 800 9px/1 var(--font-nunito); display: inline-flex; align-items: center; justify-content: center; border: 2px solid var(--color-surface); } /* ---- Carte générique ---- */ .ta-v2-scope .ta-card { background: var(--color-surface); border: 1px solid var(--color-filet); border-radius: var(--r-carte); box-shadow: var(--shadow-1); /* Le padding appartient au composant, pas à l'appelant : les gabarits Jinja le posaient en style inline (padding:26px), la SPA React ne le posait nulle part et les cartes sortaient collées à leur bordure. Les variantes qui ont leur propre padding (--flush, metric-tile, appt-card, empty-state) sont déclarées plus bas et l'emportent. */ padding: 20px; } .ta-v2-scope .ta-card--flush { padding: 0; overflow: hidden; } /* ---- Surface-signature (une seule par écran) ---- */ .ta-v2-scope .signature { position: relative; overflow: hidden; background: var(--color-rouge); color: #fff; border-radius: var(--r-carte-lg); padding: 24px 26px 26px; } .ta-v2-scope .signature .eyebrow { font: 700 11px/1.2 var(--font-nunito); letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.82); } .ta-v2-scope .signature h2 { margin: 15px 0 0; font: 800 30px/1.14 var(--font-nunito); letter-spacing: -.02em; color: #fff; } .ta-v2-scope .signature .sub { margin: 5px 0 0; font: 600 16px/1.35 var(--font-nunito); color: rgba(255,255,255,.92); } .ta-v2-scope .signature .headtop { display: flex; align-items: center; gap: 11px; } .ta-v2-scope .signature .headtile { flex: none; width: 38px; height: 38px; border-radius: var(--r-rond); background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.28); color: #fff; display: inline-flex; align-items: center; justify-content: center; } .ta-v2-scope .thread { display: inline-flex; align-items: center; gap: 9px; width: 100%; max-width: 340px; color: rgba(255,255,255,.85); margin-top: 18px; } .ta-v2-scope .thread .end { font: 700 13px/1 var(--font-nunito); color: #fff; flex: none; } .ta-v2-scope .thread .disc { width: 7px; height: 7px; border-radius: var(--r-rond); background: currentColor; flex: none; } .ta-v2-scope .thread .line { flex: 1; height: 12px; } .ta-v2-scope .thread .line path { stroke: currentColor; stroke-width: 2.5; stroke-dasharray: 0 8; stroke-linecap: round; fill: none; opacity: .85; } .ta-v2-scope .signature .actions { margin-top: 20px; display: flex; align-items: center; gap: 9px; flex-wrap: wrap; } .ta-v2-scope .signature .actions a, .ta-v2-scope .signature .actions button { display: inline-flex; align-items: center; gap: 7px; padding: 9px 15px; border-radius: var(--r-controle); background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.3); color: #fff; font: 700 13px/1 var(--font-nunito); cursor: pointer; text-decoration: none; } .ta-v2-scope .signature .actions a:hover, .ta-v2-scope .signature .actions button:hover { background: rgba(255,255,255,.26); color: #fff; text-decoration: none; } .ta-v2-scope .signature .cta-white { display: inline-flex; align-items: center; gap: 8px; padding: 11px 17px; border-radius: var(--r-controle); background: #fff; color: var(--color-rouge); border: none; font: 800 14px/1 var(--font-nunito); cursor: pointer; text-decoration: none; } .ta-v2-scope .signature .cta-white:hover { background: rgba(255,255,255,.9); color: var(--color-rouge-fonce); text-decoration: none; } /* ---- TodoRow ---- */ .ta-v2-scope .todorow { width: 100%; display: flex; align-items: center; gap: 13px; padding: 14px 15px; background: none; border: none; text-align: left; cursor: pointer; text-decoration: none; color: var(--color-encre); font-family: var(--font-nunito); transition: background var(--ease-standard); } .ta-v2-scope .todorow:hover { background: var(--color-hover); color: var(--color-encre); text-decoration: none; } .ta-v2-scope .todorow + .todorow { border-top: 1px solid var(--color-filet); } .ta-v2-scope .todorow__tile { width: 36px; height: 36px; flex: none; border-radius: var(--r-controle); background: var(--color-hover); display: inline-flex; align-items: center; justify-content: center; color: var(--color-encre); } .ta-v2-scope .todorow__label { flex: 1; min-width: 0; font: 700 14px/1.3 var(--font-nunito); } .ta-v2-scope .todorow__label span { display: block; font: 400 12px/1.3 var(--font-nunito); color: var(--color-encre-2); margin-top: 2px; } .ta-v2-scope .todorow__chev { display: inline-flex; color: var(--color-ardoise); flex: none; } .ta-v2-scope .ta-badge { display: inline-flex; align-items: center; justify-content: center; font: 800 12px/1 var(--font-nunito); min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--r-rond); background: var(--color-rouge); color: #fff; } /* ---- SectionHeader ---- */ .ta-v2-scope .sectionheader { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 12px; } .ta-v2-scope .sectionheader h2, .ta-v2-scope .zone-title { font: 800 20px/1.22 var(--font-nunito); letter-spacing: -.02em; color: var(--color-encre); margin: 0; } .ta-v2-scope .sectionheader .all { font: 600 13px/1 var(--font-nunito); color: var(--color-encre); background: none; border: none; cursor: pointer; padding: 4px; text-decoration: none; } .ta-v2-scope .sectionheader .all:hover { text-decoration: underline; } /* ---- Segmented ---- */ .ta-v2-scope .seg { display: inline-flex; background: var(--color-creme); border: 1px solid var(--color-filet); border-radius: var(--r-carte); padding: 3px; gap: 3px; margin-bottom: 16px; } .ta-v2-scope .seg button { border: none; background: transparent; cursor: pointer; font: 700 13px/1 var(--font-nunito); color: var(--color-encre-2); padding: 8px 15px; border-radius: var(--r-controle); } .ta-v2-scope .seg button:hover:not(.active) { color: var(--color-encre); } .ta-v2-scope .seg button.active { background: var(--color-surface); color: var(--color-rouge); box-shadow: var(--shadow-1); } /* ---- Rendez-vous ---- */ .ta-v2-scope .appt-list { display: flex; flex-direction: column; gap: 10px; } .ta-v2-scope .appt-card { padding: 16px; } .ta-v2-scope .appt-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 10px; gap: 10px; } .ta-v2-scope .appt-date { font: 400 12px/1 var(--font-nunito); color: var(--color-encre-2); margin-bottom: 3px; } .ta-v2-scope .appt-time { font: 800 18px/1 var(--font-nunito); color: var(--color-encre); } .ta-v2-scope .statut { font: 700 12px/1 var(--font-nunito); padding: 5px 11px; border-radius: var(--r-badge); white-space: nowrap; } .ta-v2-scope .statut--neutre { background: var(--color-hover); color: var(--color-encre); } .ta-v2-scope .statut--attention { background: var(--color-attention-bg); color: var(--color-attention); } .ta-v2-scope .statut--succes { background: var(--color-succes-bg); color: var(--color-succes); } .ta-v2-scope .statut--erreur { background: var(--color-rouge-clair); color: var(--color-rouge); } .ta-v2-scope .appt-meta { font: 400 14px/1.6 var(--font-nunito); } .ta-v2-scope .appt-meta .eleve { font-weight: 700; } .ta-v2-scope .appt-meta .tuteur, .ta-v2-scope .appt-meta .sujet { color: var(--color-encre-2); } /* ---- Métriques (Ton suivi) ---- */ .ta-v2-scope .metrics-title { font: 700 11px/1 var(--font-nunito); letter-spacing: .06em; text-transform: uppercase; color: var(--color-ardoise); padding: 0 2px 10px; } .ta-v2-scope .metrics { display: flex; gap: 14px; align-items: stretch; flex-wrap: wrap; } .ta-v2-scope .metric-tile { flex: 1 1 180px; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 18px; border: none; text-align: left; font-family: var(--font-nunito); text-decoration: none; color: var(--color-encre); } .ta-v2-scope a.metric-tile:hover { text-decoration: none; color: var(--color-encre); } .ta-v2-scope .metric-tile.big { flex: 1.5 1 260px; gap: 15px; padding: 18px 20px; cursor: pointer; } .ta-v2-scope .metric-tile.big:hover { background: var(--color-hover); } .ta-v2-scope .metric-tile .ic { flex: none; width: 40px; height: 40px; border-radius: var(--r-controle); background: var(--color-creme); border: 1px solid var(--color-filet); display: inline-flex; align-items: center; justify-content: center; color: var(--color-encre); } .ta-v2-scope .metric-tile.big .ic { width: 48px; height: 48px; } .ta-v2-scope .metric-tile .lbl { display: block; font: 700 10px/1.1 var(--font-nunito); letter-spacing: .03em; text-transform: uppercase; color: var(--color-ardoise); } .ta-v2-scope .metric-tile .val { display: block; margin-top: 5px; font: 800 20px/1 var(--font-nunito); letter-spacing: -.02em; color: var(--color-encre); } .ta-v2-scope .metric-tile.big .lbl { font-size: 10.5px; } .ta-v2-scope .metric-tile.big .val { margin-top: 6px; font-size: 30px; } .ta-v2-scope .metric-tile.action { cursor: pointer; } .ta-v2-scope .metric-tile.action .ic { background: var(--color-rouge-clair); border: none; color: var(--color-rouge); } .ta-v2-scope .metric-tile.action .lbl { color: var(--color-rouge); } .ta-v2-scope .metric-tile.action:hover { background: var(--color-hover); } .ta-v2-scope .metric-chev { margin-left: auto; flex: none; color: var(--color-ardoise); display: inline-flex; } /* ---- Actions de carte (icône seule + bouton principal) ---- */ .ta-v2-scope .cv2-appt-card-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 12px; } .ta-v2-scope .cv2-icon-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 34px; height: 34px; border-radius: var(--r-controle); border: 1px solid var(--color-filet-fort); background: var(--color-surface); color: var(--color-encre-2); cursor: pointer; text-decoration: none; } .ta-v2-scope .cv2-icon-btn:hover { background: var(--color-hover); color: var(--color-encre); } .ta-v2-scope .cv2-icon-btn--danger { color: var(--color-rouge); } .ta-v2-scope .cv2-icon-btn--danger:hover { background: var(--color-rouge-clair); color: var(--color-rouge-fonce); } /* ---- Listes génériques (messages / factures) ---- */ .ta-v2-scope .row-list { overflow: hidden; } .ta-v2-scope .row-item { width: 100%; display: flex; align-items: center; gap: 13px; padding: 15px; background: none; border: none; text-align: left; cursor: pointer; text-decoration: none; color: inherit; font-family: var(--font-nunito); } .ta-v2-scope .row-item:hover { background: var(--color-hover); text-decoration: none; color: inherit; } .ta-v2-scope .row-item + .row-item { border-top: 1px solid var(--color-filet); } .ta-v2-scope .avatar { flex: none; width: 44px; height: 44px; border-radius: var(--r-rond); background: var(--color-rouge-clair); color: var(--color-encre); font: 800 15px/1 var(--font-nunito); display: inline-flex; align-items: center; justify-content: center; } .ta-v2-scope .row-main { flex: 1; min-width: 0; } .ta-v2-scope .row-top { display: flex; justify-content: space-between; gap: 8px; } .ta-v2-scope .row-name { display: block; font: 700 14px/1.3 var(--font-nunito); color: var(--color-encre); } .ta-v2-scope .row-time { font: 600 12px/1.3 var(--font-nunito); color: var(--color-ardoise); flex: none; } .ta-v2-scope .row-preview { display: block; margin-top: 2px; font: 400 13px/1.4 var(--font-nunito); color: var(--color-encre-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ta-v2-scope .row-sub { display: block; margin-top: 2px; font: 400 12.5px/1.4 var(--font-nunito); color: var(--color-encre-2); } .ta-v2-scope .row-amount { font: 800 16px/1 var(--font-nunito); color: var(--color-encre); flex: none; } /* ---- Profil ---- */ .ta-v2-scope .profile-head { display: flex; align-items: center; gap: 16px; padding: 22px; } .ta-v2-scope .profile-head .avatar { width: 60px; height: 60px; font-size: 20px; } .ta-v2-scope .profile-head h3 { margin: 0; font: 800 19px/1.2 var(--font-nunito); color: var(--color-encre); } .ta-v2-scope .profile-head p { margin: 3px 0 0; font: 400 13px/1.4 var(--font-nunito); color: var(--color-encre-2); } .ta-v2-scope .field-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px; } .ta-v2-scope .field-row + .field-row { border-top: 1px solid var(--color-filet); } .ta-v2-scope .field-row .k { font: 600 13px/1.3 var(--font-nunito); color: var(--color-encre-2); } .ta-v2-scope .field-row .v { font: 700 14px/1.3 var(--font-nunito); color: var(--color-encre); text-align: right; } .ta-v2-scope .danger-card { border-color: var(--color-rouge-clair); } .ta-v2-scope .danger-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px; flex-wrap: wrap; } .ta-v2-scope .danger-row h4 { margin: 0 0 3px; font: 700 14px/1.3 var(--font-nunito); color: var(--color-encre); } .ta-v2-scope .danger-row p { margin: 0; font: 400 12.5px/1.4 var(--font-nunito); color: var(--color-encre-2); } .ta-v2-scope .btn-cv2-outline { border: 1px solid var(--color-filet-fort); background: var(--color-surface); color: var(--color-rouge); font: 700 13px/1 var(--font-nunito); padding: 10px 16px; border-radius: var(--r-controle); cursor: pointer; white-space: nowrap; text-decoration: none; } .ta-v2-scope .btn-cv2-outline:hover { background: var(--color-hover); color: var(--color-rouge-fonce); text-decoration: none; } .ta-v2-scope .btn-cv2-primary { border: none; background: var(--color-rouge); color: #fff; font: 700 13px/1 var(--font-nunito); padding: 10px 16px; border-radius: var(--r-controle); cursor: pointer; white-space: nowrap; text-decoration: none; display: inline-flex; align-items: center; gap: 7px; } .ta-v2-scope .btn-cv2-primary:hover { background: var(--color-rouge-fonce); color: #fff; text-decoration: none; } /* ---- Layout ---- */ .ta-v2-scope .grid2 { display: grid; grid-template-columns: 1.25fr 1fr; gap: 20px; align-items: start; } .ta-v2-scope .stack { display: flex; flex-direction: column; gap: 20px; } .ta-v2-scope .empty-state { display: flex; align-items: center; gap: 13px; padding: 18px 16px; } .ta-v2-scope .empty-state .ic { flex: none; width: 38px; height: 38px; border-radius: var(--r-controle); background: var(--color-succes-bg); color: var(--color-succes); display: inline-flex; align-items: center; justify-content: center; } .ta-v2-scope .empty-state h4 { margin: 0; font: 700 14px/1.3 var(--font-nunito); color: var(--color-encre); } .ta-v2-scope .empty-state p { margin: 2px 0 0; font: 400 13px/1.4 var(--font-nunito); color: var(--color-encre-2); } @media (max-width: 860px) { .ta-v2-scope .grid2 { grid-template-columns: 1fr; } } /* ---- Surcharges Bootstrap scopées : pour les pages qui gardent de vrais composants Bootstrap/WTForms (formulaires, le composant partagé components/passkey_settings.html) — on retint sans toucher au HTML/JS de ces composants. ---- */ .ta-v2-scope .card { background: var(--color-surface); border: 1px solid var(--color-filet) !important; border-radius: var(--r-carte-lg) !important; box-shadow: var(--shadow-1) !important; } /* Les thèmes legacy font lever la carte au survol (`.card:hover { transform: translateY(-2px) }` + `transition: all .3s`). DS2 ne lève pas ses cartes, et surtout un `transform` sur une carte change le bloc conteneur de tout descendant `position: fixed` : un modal déclaré dans une carte se retrouve ancré à la carte au lieu du viewport, saute de plusieurs centaines de pixels et oscille à la fréquence d'affichage dès que la souris bouge. On neutralise donc le survol géométrique. */ .ta-v2-scope .card:hover { transform: none !important; } .ta-v2-scope .card.border-danger { border-color: var(--color-rouge-clair) !important; background: var(--color-rouge-clair) !important; } .ta-v2-scope .card.border-danger .card-header { border-bottom-color: var(--color-rouge-clair) !important; } .ta-v2-scope .card-header { background: transparent !important; border-bottom: 1px solid var(--color-filet) !important; color: var(--color-encre) !important; font-family: var(--font-nunito); font-weight: 700; } .ta-v2-scope .card-header.bg-primary, .ta-v2-scope .card-header.bg-info, .ta-v2-scope .card-header.bg-secondary, .ta-v2-scope .card-header.text-white, .ta-v2-scope .card-header.text-danger { color: var(--color-encre) !important; } .ta-v2-scope .card-header.text-danger { color: var(--color-rouge) !important; } .ta-v2-scope h1, .ta-v2-scope h2, .ta-v2-scope h3, .ta-v2-scope h4, .ta-v2-scope h5, .ta-v2-scope h6, .ta-v2-scope label, .ta-v2-scope p, .ta-v2-scope span, .ta-v2-scope .form-text, .ta-v2-scope small { font-family: var(--font-nunito); } .ta-v2-scope .form-control, .ta-v2-scope .form-select { /* display/width/padding viennent de Bootstrap sur les pages Jinja ; la SPA ne charge pas Bootstrap, donc le composant les porte lui-même (mêmes valeurs à l'oeil des deux côtés). `background-color` et non `background` : le raccourci effaçait la flèche que Bootstrap pose sur .form-select. */ display: block; width: 100%; padding: 10px 14px; border: 1px solid var(--color-filet-fort); border-radius: var(--r-champ); font: 400 16px/1.4 var(--font-nunito); color: var(--color-encre); background-color: var(--color-surface); } .ta-v2-scope .form-control:focus, .ta-v2-scope .form-select:focus { border-color: var(--color-rouge); box-shadow: var(--focus-ring); } .ta-v2-scope .form-control:disabled, .ta-v2-scope .form-control-plaintext { background: var(--color-creme); color: var(--color-encre-2); } .ta-v2-scope .form-check-input:checked { background-color: var(--color-rouge); border-color: var(--color-rouge); } .ta-v2-scope .form-check-input:focus { box-shadow: var(--focus-ring); } .ta-v2-scope .btn-primary, .ta-v2-scope .btn-info, .ta-v2-scope .btn-secondary { background: var(--color-rouge) !important; border-color: var(--color-rouge) !important; color: #fff !important; border-radius: var(--r-controle) !important; font-family: var(--font-nunito); font-weight: 700; } .ta-v2-scope .btn-primary:hover, .ta-v2-scope .btn-info:hover, .ta-v2-scope .btn-secondary:hover { background: var(--color-rouge-fonce) !important; border-color: var(--color-rouge-fonce) !important; } .ta-v2-scope .btn-outline-primary, .ta-v2-scope .btn-outline-danger, .ta-v2-scope .btn-outline-secondary { color: var(--color-rouge) !important; border-color: var(--color-filet-fort) !important; border-radius: var(--r-controle) !important; font-family: var(--font-nunito); font-weight: 700; background: var(--color-surface) !important; } .ta-v2-scope .btn-outline-primary:hover, .ta-v2-scope .btn-outline-danger:hover, .ta-v2-scope .btn-outline-secondary:hover { background: var(--color-rouge-clair) !important; color: var(--color-rouge-fonce) !important; } .ta-v2-scope .alert-success { background: var(--color-succes-bg) !important; color: var(--color-succes) !important; border: none !important; border-radius: var(--r-carte) !important; } .ta-v2-scope .alert-danger { background: var(--color-rouge-clair) !important; color: var(--color-rouge) !important; border: none !important; border-radius: var(--r-carte) !important; } .ta-v2-scope .alert-warning { background: var(--color-attention-bg) !important; color: var(--color-attention) !important; border: none !important; border-radius: var(--r-carte) !important; } .ta-v2-scope .alert-info { background: var(--color-hover) !important; color: var(--color-encre) !important; border: none !important; border-radius: var(--r-carte) !important; } .ta-v2-scope .list-group-item { border-color: var(--color-filet); font-family: var(--font-nunito); } /* ---- Sélecteur de langue (menu utilisateur du navbar) ---- Le menu déroulant vit dans le chrome, HORS de .ta-v2-scope : la recette du composant .seg est reprise ici, scopée sur .ta-v2 (la classe body), pour habiller les boutons Bootstrap que le gabarit partage avec les rôles restés sur le thème légué (manager/prospect ne chargent pas ce fichier). Les sélecteurs doublés :not() égalent la spécificité des règles de coins de .btn-group ; ce fichier étant chargé après Bootstrap, l'égalité se règle en notre faveur. */ .ta-v2 .lang-seg { display: flex; background: var(--color-creme); border: 1px solid var(--color-filet); border-radius: var(--r-carte); padding: 3px; gap: 3px; } .ta-v2 .lang-seg .language-btn, .ta-v2 .lang-seg > .language-btn:not(:last-child), .ta-v2 .lang-seg > .language-btn:not(:first-child) { flex: 1; margin: 0; border: none; background: transparent; cursor: pointer; font: 700 13px/1 var(--font-nunito); color: var(--color-encre-2); padding: 8px 15px; border-radius: var(--r-controle); box-shadow: none; } .ta-v2 .lang-seg .language-btn:hover:not(.active) { color: var(--color-encre); background: transparent; } .ta-v2 .lang-seg .language-btn:focus-visible { outline: 2px solid var(--color-rouge); outline-offset: -2px; box-shadow: none; } .ta-v2 .lang-seg .language-btn.active { background: var(--color-surface); color: var(--color-rouge); box-shadow: var(--shadow-1); } /* ============================================================ Socle autonome — ce que la couche Bootstrap apportait ------------------------------------------------------------ Les gabarits Jinja chargent Bootstrap, style.css et Font Awesome AVANT ce fichier ; la SPA React (frontend/, servie par app/static/spa/index.html) ne charge QUE ce fichier. Tout ce qui suit est ce que la couche Bootstrap fournissait et qui manquait à la SPA. Les valeurs égalent celles du reboot Bootstrap partout où les gabarits en dépendent : les deux mondes restent identiques. ============================================================ */ .ta-v2 { box-sizing: border-box; } .ta-v2 *, .ta-v2 *::before, .ta-v2 *::after { box-sizing: inherit; } body.ta-v2 { margin: 0; } .ta-v2 button, .ta-v2 input, .ta-v2 select, .ta-v2 textarea { font-family: inherit; } /* Lien de contenu. Le DS réserve le rouge aux actions : un lien se signale par son soulignement discret, pas par sa couleur (et reste donc distinguable sans la couleur — WCAG 1.4.1). */ .ta-v2-scope .ta-link { color: var(--color-encre); font: 700 14px/1.3 var(--font-nunito); text-decoration: underline; text-decoration-color: var(--color-filet-fort); text-underline-offset: 3px; cursor: pointer; background: none; border: none; padding: 0; } .ta-v2-scope .ta-link:hover { color: var(--color-rouge); text-decoration-color: var(--color-rouge); } /* ---- Chrome de la SPA ---- Le chrome Jinja est une navbar Bootstrap (collapse + dropdown) ; la SPA n'a pas Bootstrap, donc les mêmes pièces vivent ici. Même point de bascule que `d-none d-lg-flex` (992 px) pour que la barre du haut ne saute pas quand on passe d'un monde à l'autre. */ .ta-v2 .cv2-appbar { position: fixed; top: 0; left: 0; right: 0; z-index: 1030; background: var(--color-surface); border-bottom: 1px solid var(--color-filet); } .ta-v2 .cv2-appbar__inner { max-width: 1180px; margin: 0 auto; min-height: 58px; display: flex; align-items: center; gap: 10px; padding: 8px 16px; } .ta-v2 .cv2-brand { display: inline-flex; align-items: center; flex: none; } .ta-v2 .cv2-brand img { display: block; height: 34px; width: auto; } .ta-v2 .cv2-iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; flex: none; background: none; border: none; border-radius: var(--r-rond); color: var(--color-encre); cursor: pointer; } .ta-v2 .cv2-iconbtn:hover { background: var(--color-hover); } .ta-v2 .cv2-usermenu { position: relative; flex: none; } .ta-v2 .cv2-usertrigger { display: inline-flex; align-items: center; gap: 8px; background: none; border: none; border-radius: var(--r-rond); padding: 4px 10px 4px 4px; cursor: pointer; font: 700 13px/1 var(--font-nunito); color: var(--color-encre); } .ta-v2 .cv2-usertrigger:hover { background: var(--color-hover); } .ta-v2 .cv2-usertrigger .avatar { width: 32px; height: 32px; font-size: 12px; } .ta-v2 .cv2-menu { position: absolute; right: 0; top: calc(100% + 8px); min-width: 236px; background: var(--color-surface); border: 1px solid var(--color-filet); border-radius: var(--r-carte); box-shadow: var(--shadow-2); padding: 8px; z-index: 1040; } .ta-v2 .cv2-menu__head { padding: 6px 12px 10px; border-bottom: 1px solid var(--color-filet); margin-bottom: 8px; } .ta-v2 .cv2-menu__name { font: 800 14px/1.2 var(--font-nunito); color: var(--color-encre); } .ta-v2 .cv2-menu__sub { margin-top: 2px; font: 400 12px/1.3 var(--font-nunito); color: var(--color-encre-2); word-break: break-all; } .ta-v2 .cv2-menu__item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border: none; background: none; border-radius: var(--r-controle); font: 700 14px/1 var(--font-nunito); color: var(--color-encre); text-decoration: none; text-align: left; cursor: pointer; } .ta-v2 .cv2-menu__item:hover { background: var(--color-hover); color: var(--color-encre); text-decoration: none; } .ta-v2 .cv2-scrim { position: fixed; inset: 0; z-index: 1035; background: none; border: none; } /* Repli mobile : les onglets tombent dans un panneau déroulant, comme le collapse Bootstrap des gabarits. Servi par la SPA élève ET, depuis le 2026-09-07, par le chrome Jinja des rôles DS2 (base.html + ds2_chrome.js) : le panneau y vit DANS la navbar Bootstrap (flex, fixed-top), d'où la base flexible à 100 % ; l'état fermé est l'attribut `hidden`, qui doit gagner sur le `display:block` de la règle mobile. */ .ta-v2 .cv2-burger { display: none; } .ta-v2 .cv2-mobilenav { display: none; } .ta-v2 .navbar > .cv2-mobilenav { flex-basis: 100%; margin: 6px -16px -8px; } @media (max-width: 991.98px) { .ta-v2 .cv2-topnav { display: none; } .ta-v2 .cv2-burger { display: inline-flex; } .ta-v2 .cv2-mobilenav { display: block; border-top: 1px solid var(--color-filet); padding: 8px; background: var(--color-surface); box-shadow: var(--shadow-2); } .ta-v2 .cv2-mobilenav[hidden] { display: none; } .ta-v2 .cv2-mobilenav .cv2-navlink { display: block; padding: 12px 14px; font-size: 14px; border-radius: var(--r-controle); } } /* ---- Bandeau persistant (chrome) ---- Un rappel d'action qui suit la personne de page en page (« Activez votre mandat » du prospect). Teinte sémantique, jamais rouge : le rouge reste au bouton. Rendu par base.html en tête de .main-content. */ .ta-v2 .cv2-bandeau { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; max-width: 1180px; margin: 0 auto 18px; padding: 12px 16px; border-radius: var(--r-carte); border: 1px solid transparent; font: 400 14px/1.45 var(--font-nunito); } .ta-v2 .cv2-bandeau--attention { background: var(--color-attention-bg); color: var(--color-attention); border-color: rgba(176, 122, 18, .18); } .ta-v2 .cv2-bandeau__ic { flex: none; width: 36px; height: 36px; border-radius: var(--r-controle); background: var(--color-surface); display: inline-flex; align-items: center; justify-content: center; } .ta-v2 .cv2-bandeau__texte { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 1px; } .ta-v2 .cv2-bandeau__texte strong { font-weight: 800; color: var(--color-encre); } .ta-v2 .cv2-bandeau .ta-btn { flex: none; } /* Bandeaux utilitaires de la SPA (chargement, erreur) : pas d'équivalent Bootstrap disponible côté React. */ .ta-v2-scope .ta-notice { border-radius: var(--r-controle); padding: 11px 14px; margin: 8px 0; font: 700 13px/1.4 var(--font-nunito); } .ta-v2-scope .ta-notice--erreur { background: var(--color-rouge-clair); color: var(--color-rouge); } .ta-v2-scope .ta-chargement { padding: 26px; text-align: center; font: 400 14px/1 var(--font-nunito); color: var(--color-ardoise); } /* État vide « centré » : la recette que les gabarits écrivaient en style inline à chaque zone (icône, une phrase, une action). Une classe, pour que les deux mondes ne dérivent plus. */ .ta-v2-scope .empty-centre { padding: 26px; text-align: center; } .ta-v2-scope .empty-centre .ic { display: inline-flex; align-items: center; justify-content: center; color: var(--color-ardoise); margin-bottom: 10px; } .ta-v2-scope .empty-centre p { margin: 0 0 14px; font: 400 14px/1.5 var(--font-nunito); color: var(--color-encre-2); } .ta-v2-scope .empty-centre p:last-child { margin-bottom: 0; } /* Boutons désactivés : la SPA en a besoin (formulaires en cours d'envoi), les gabarits WTForms s'en remettaient à Bootstrap. */ .ta-v2-scope .btn-cv2-primary:disabled, .ta-v2-scope .btn-cv2-outline:disabled { background: var(--color-hover); color: var(--color-ardoise); border-color: var(--color-filet); cursor: not-allowed; } /* Titre d'écran : les gabarits le posaient en style inline sur chaque

. / .ta-v2-scope .page-title { margin: 0 0 4px; font: 800 26px/1.2 var(--font-nunito); letter-spacing: -.02em; color: var(--color-encre); } .ta-v2-scope .page-sub { margin: 0 0 22px; font: 400 14px/1.5 var(--font-nunito); color: var(--color-encre-2); } / Corps de page sous la barre fixe. / .ta-v2 .cv2-page { max-width: 1180px; margin: 0 auto; padding: 84px 16px 40px; } .ta-v2 .cv2-burger-spacer { display: none; } @media (max-width: 991.98px) { .ta-v2 .cv2-burger-spacer { display: block; } .ta-v2 .cv2-usertriggernom { display: none; } .ta-v2 .cv2-page { padding-top: 78px; } .ta-v2-scope .grid2 { gap: 16px; } } / Ligne de liste dont TOUTE la surface mène au détail alors qu'une action secondaire (payer) vit dans la même ligne : un lien dans un lien est du HTML invalide, donc le lien principal s'étend par un pseudo-élément et les actions passent au-dessus. / .ta-v2-scope .row-item { position: relative; } .ta-v2-scope .row-item .ta-stretch { text-decoration: none; color: inherit; } .ta-v2-scope .row-item .ta-stretch::after { content: ''; position: absolute; inset: 0; z-index: 1; } .ta-v2-scope .row-item > :not(.ta-stretch) { position: relative; z-index: 2; } /* Libellé de champ (formulaires de la SPA). / .ta-v2-scope .ta-champ-label { display: block; margin-bottom: 6px; font: 700 13px/1 var(--font-nunito); color: var(--color-encre-2); } / Pied de page de la SPA — les gabarits en ont un (base.html), la SPA s'arrêtait net au bas du contenu. / .ta-v2 .cv2-footer { border-top: 1px solid var(--color-filet); margin-top: 40px; padding: 20px 16px 28px; text-align: center; font: 400 12.5px/1.4 var(--font-nunito); color: var(--color-ardoise); } / En-tête d'écran (titre + sous-titre + action) : toutes les pages Jinja ouvrent sur un h1 de 26px, la SPA ouvrait sur un h2 de 20px — la hiérarchie sautait d'un monde à l'autre. / .ta-v2-scope .page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; } .ta-v2-scope .page-head .page-title, .ta-v2-scope .page-head .page-sub { margin-bottom: 0; } @media (max-width: 991.98px) { / le nom disparaît : refermer l'écart qu'il laissait entre la pastille et le chevron / .ta-v2 .cv2-usertrigger { gap: 4px; } } / Bandeaux de messages (flash) de la SPA. Les mêmes états sémantiques que les pastilles : le thème légué peignait succès, info et erreur du MÊME rouge pâle, ce qui rendait « Connexion réussie! » indiscernable d'une erreur. / .ta-v2-scope .ta-flash { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; } .ta-v2-scope .ta-flashitem { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: var(--r-controle); font: 600 14px/1.45 var(--font-nunito); } .ta-v2-scope .ta-flashitem--succes { background: var(--color-succes-bg); color: var(--color-succes); } .ta-v2-scope .ta-flashitem--attention { background: var(--color-attention-bg); color: var(--color-attention); } .ta-v2-scope .ta-flashitem--erreur { background: var(--color-rouge-clair); color: var(--color-rouge); } .ta-v2-scope .ta-flashitem--neutre { background: var(--color-hover); color: var(--color-encre); } .ta-v2-scope .ta-flashtexte { flex: 1; min-width: 0; } .ta-v2-scope .ta-flashfermer { flex: none; background: none; border: none; cursor: pointer; color: inherit; opacity: .65; padding: 0; line-height: 0; } .ta-v2-scope .ta-flashfermer:hover { opacity: 1; } / Pages Jinja du rôle client : `.main-content` n'a AUCUN padding pour ce rôle (la règle de sidebar.css ne sert que manager/prospect, qui seuls chargent ce fichier), donc le contenu collait au bord de la fenêtre. / .ta-v2 .main-content { padding: 26px 16px 40px; } / ---- Carte de résultat (paiement réussi / annulé / en vérification) ---- Trois gabarits répétaient la même recette en style inline, avec des icônes de 3,5 à 5 rem et des boutons à 25px de rayon — hors du vocabulaire fermé du système. Une seule recette, trois pages. / .ta-v2-scope .resultat { max-width: 640px; margin: 0 auto; padding: 34px 26px; text-align: center; } .ta-v2-scope .resultat .ic { width: 62px; height: 62px; border-radius: var(--r-rond); margin-bottom: 16px; display: inline-flex; align-items: center; justify-content: center; font-size: 26px; } .ta-v2-scope .resultat .ic--succes { background: var(--color-succes-bg); color: var(--color-succes); } .ta-v2-scope .resultat .ic--erreur { background: var(--color-rouge-clair); color: var(--color-rouge); } .ta-v2-scope .resultat .ic--attention { background: var(--color-attention-bg); color: var(--color-attention); } .ta-v2-scope .resultat h1 { margin: 0 0 6px; font: 800 24px/1.25 var(--font-nunito); letter-spacing: -.02em; color: var(--color-encre); } .ta-v2-scope .resultat .sous { margin: 0 auto 20px; max-width: 460px; font: 400 14.5px/1.55 var(--font-nunito); color: var(--color-encre-2); } .ta-v2-scope .resultat .details { text-align: left; border: 1px solid var(--color-filet); border-radius: var(--r-controle); overflow: hidden; margin-bottom: 20px; } .ta-v2-scope .resultat .details .field-row { padding: 12px 16px; } .ta-v2-scope .resultat .actions { display: flex; gap: 9px; justify-content: center; flex-wrap: wrap; } .ta-v2-scope .resultat .apres { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--color-filet); } .ta-v2-scope .resultat .apres h2 { margin: 0 0 4px; font: 700 15px/1.35 var(--font-nunito); color: var(--color-encre); } .ta-v2-scope .resultat .apres p { margin: 0 0 14px; font: 400 13px/1.5 var(--font-nunito); color: var(--color-encre-2); } .ta-v2-scope .resultat .trace { margin: 14px 0 0; font: 400 11.5px/1.4 var(--font-nunito); color: var(--color-ardoise); word-break: break-all; } / ---- Jauge d'utilisation (heures d'un forfait) ---- La recette était copiée en style inline dans le tableau de bord Jinja, le tableau de bord React et les pages d'abonnement, chaque fois avec une hauteur différente. / .ta-v2-scope .jauge { height: 8px; border-radius: var(--r-rond); background: var(--color-hover); overflow: hidden; } .ta-v2-scope .jaugepart { height: 100%; border-radius: var(--r-rond); background: var(--color-rouge); } .ta-v2-scope .jaugepart--eteint { background: var(--color-filet-fort); } .ta-v2-scope .jauge-legende { margin-top: 6px; font: 600 12px/1.3 var(--font-nunito); color: var(--color-encre-2); } / ---- Surcharges Bootstrap : les composants que les pages non portées utilisent encore (tableaux, listes, barres, fil d'Ariane). Les habiller ici évite de réécrire la structure de chaque gabarit — et couvre du même coup toute page qui en emploierait demain. ---- / .ta-v2-scope .table { font-family: var(--font-nunito); color: var(--color-encre); border-color: var(--color-filet); margin-bottom: 0; } .ta-v2-scope .table > thead > tr > th { font: 700 11px/1.2 var(--font-nunito); letter-spacing: .05em; text-transform: uppercase; color: var(--color-ardoise); border-bottom: 1px solid var(--color-filet); background: transparent; padding: 12px 14px; } .ta-v2-scope .table > tbody > tr > td { font: 400 14px/1.45 var(--font-nunito); color: var(--color-encre); border-bottom: 1px solid var(--color-filet); padding: 13px 14px; vertical-align: middle; } .ta-v2-scope .table > tbody > tr:last-child > td { border-bottom: none; } .ta-v2-scope .table-hover > tbody > tr:hover > td { background: var(--color-hover); } .ta-v2-scope .table-borderless > tbody > tr > td { border-bottom: none; padding: 7px 0; } .ta-v2-scope .table-borderless > tbody > tr > td:first-child { font: 600 13px/1.4 var(--font-nunito); color: var(--color-encre-2); width: 45%; } .ta-v2-scope .list-group { border-radius: var(--r-controle); overflow: hidden; } .ta-v2-scope .list-group-item { border-color: var(--color-filet); font-family: var(--font-nunito); color: var(--color-encre); padding: 14px 16px; } .ta-v2-scope .list-group-item-action:hover { background: var(--color-hover); color: var(--color-encre); } .ta-v2-scope .progress { height: 8px; border-radius: var(--r-rond); background: var(--color-hover); overflow: hidden; } .ta-v2-scope .progress-bar { background-color: var(--color-rouge); font-size: 0; } .ta-v2-scope .progress-bar.bg-secondary { background-color: var(--color-filet-fort) !important; } .ta-v2-scope .progress-bar.bg-success { background-color: var(--color-succes) !important; } .ta-v2-scope .progress-bar.bg-warning { background-color: var(--color-attention) !important; } .ta-v2-scope .progress-bar.bg-danger { background-color: var(--color-rouge) !important; } .ta-v2-scope .breadcrumb { font: 400 13px/1.4 var(--font-nunito); margin-bottom: 12px; } .ta-v2-scope .breadcrumb-item, .ta-v2-scope .breadcrumb-item a { color: var(--color-encre-2); text-decoration: none; } .ta-v2-scope .breadcrumb-item a:hover { color: var(--color-rouge); text-decoration: underline; } .ta-v2-scope .card-title { font: 800 17px/1.3 var(--font-nunito); color: var(--color-encre); } .ta-v2-scope .text-muted { color: var(--color-encre-2) !important; } .ta-v2-scope .text-primary, .ta-v2-scope .text-info { color: var(--color-encre) !important; } .ta-v2-scope .text-success { color: var(--color-succes) !important; } .ta-v2-scope .text-danger { color: var(--color-rouge) !important; } / ---- Choix d'un créneau (rendez-vous de soutien) ---- Le radio natif disparaît : c'est la pastille elle-même qui montre le choix, comme un segment. `:has()` évite le moindre script. / .ta-v2-scope .jour-titre { padding: 16px 16px 8px; font: 700 13px/1.3 var(--font-nunito); color: var(--color-encre); } .ta-v2-scope .creneau { cursor: pointer; } .ta-v2-scope .creneau input { position: absolute; opacity: 0; pointer-events: none; } .ta-v2-scope .creneau:has(input:checked) { background: var(--color-rouge); color: #fff; border-color: var(--color-rouge); } .ta-v2-scope .creneau:has(input:focus-visible) { box-shadow: var(--focus-ring); } / ---- Assistant multi-étapes (onboarding tuteur) ---- Barre de progression segmentée (une pastille par étape, dégradé chaud vers rouge profond une fois remplie) et pastilles de choix pilotées par un input natif caché — même idiome que .creneau ci-dessus, réutilisable pour tout futur assistant par étapes. / .ta-v2-scope .wizard-progress { display: flex; gap: 6px; margin-bottom: 28px; } .ta-v2-scope .wizard-progressseg { flex: 1; height: 6px; border-radius: var(--r-controle); background: var(--color-filet); } .ta-v2-scope .wizard-progress__seg--done { background: linear-gradient(90deg, #FF5A3C, #C20810); } .ta-v2-scope .choice-chip { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; border: 1.5px solid var(--color-filet-fort); border-radius: var(--r-controle); padding: 10px 16px; font: 700 13.5px/1 var(--font-nunito); color: var(--color-encre); background: var(--color-surface); transition: border-color var(--ease-standard), background var(--ease-standard); } .ta-v2-scope .choice-chip input { position: absolute; opacity: 0; pointer-events: none; } .ta-v2-scope .choice-chip:has(input:checked) { background: var(--color-rouge-clair); border-color: var(--color-rouge); color: var(--color-rouge); } .ta-v2-scope .choice-chip:has(input:focus-visible) { box-shadow: var(--focus-ring); } / ============================================================ Composants canoniques du DS2 (portage du bundle du design system, 2026-09) ------------------------------------------------------------ Ce qui suit vient TEL QUEL de la source du design system (`components/forms/.jsx`, `components/signature/.jsx` — chaque composant y injecte sa propre feuille). Ces classes n'existaient pas encore ici : le premier écran à les employer est le nouveau formulaire public d'offre de service tuteur (`tutor_apply_v2.css`), mais elles sont role-agnostic et destinées à remplacer, à terme, les recettes maison ci-dessus (.btn-cv2-, .choice-chip, .seg, .statut…). Ne PAS convertir les pages existantes au passage : on ajoute, on ne migre pas. Scope : `.ta-v2` (la classe de ) et non `.ta-v2-scope`, pour qu'une page autonome — sans le conteneur de contenu du gabarit partagé — en profite quand même. Corollaire : les composants déjà présents plus haut (.ta-card, .ta-badge) sont scopés `.ta-v2-scope` ; une page qui les utilise doit porter les deux classes. Écarts assumés avec la source du DS, pour ne rien casser : - .ta-card / .ta-card--flush / .ta-badge existent déjà plus haut, dans une version repo différente (padding 20px pour la carte ; pastille 800 12px/20px de haut, rouge par défaut). On GARDE la version repo — client, tuteur et dependant en dépendent — et on n'ajoute ici que les modificateurs qui manquaient. - .ta-badge--attention prend `var(--color-attention-bg)` (même valeur #F6ECD6) au lieu du littéral de la source. ============================================================ / /* ---- Tokens consommés par les composants ci-dessous et qui manquaient. Uniquement ceux-là : la table de tokens de ce fichier reste volontairement le sous-ensemble réellement utilisé (d'où une échelle d'espacement partielle). ---- / .ta-v2 { --poids-semibold: 600; --poids-bold: 700; --poids-extrabold: 800; --text-etiquette: 11px; / étiquette 700, +.06em, MAJUSCULES / --text-legende: 12px; / 400 / --text-meta: 13px; / 400 / --text-libelle: 13px; / 600 / --text-corps: 14px; / 400 / --text-champ: 16px; / 400 — valeur de champ (anti-zoom iOS) / --text-sous-titre: 16px; / 700 / --text-titre-sm: 20px; / 700 / --text-titre: 22px; / 700 / --space-20: 20px; --space-24: 24px; / Voile de modale — seul usage de transparence du système. / --voile-modale: rgba(44, 38, 34, .42); } / ---- Champ (Input / Select) ---- Structure : .ta-field > (.ta-fieldlabel + .ta-fieldbox + .ta-fieldmsg). La boîte porte la bordure et l'anneau de focus ; l'input, lui, n'a NI bordure NI anneau (voir plus bas la neutralisation du :focus-visible global, sans quoi l'anneau se dessine à l'INTÉRIEUR de la boîte). / .ta-v2 .ta-field { display: flex; flex-direction: column; gap: 6px; } .ta-v2 .ta-fieldlabel { font: var(--poids-semibold) var(--text-libelle)/1.4 var(--font-nunito); color: var(--color-encre); display: flex; gap: 6px; align-items: baseline; } .ta-v2 .ta-fieldopt { font-weight: 400; color: var(--color-ardoise); font-size: 12px; } .ta-v2 .ta-fieldbox { display: flex; align-items: center; gap: 9px; background: var(--color-surface); border: 1px solid var(--color-filet-fort); border-radius: var(--r-champ); padding: 11px 13px; transition: border-color var(--ease-standard), box-shadow var(--ease-standard); } / Anneau de focus : 2px crème + 2px rouge AUTOUR de la boîte (définition de --focus-ring du DS ; celle du haut de ce fichier utilise du blanc, on garde ici la crème du DS pour que l'anneau se détache aussi sur une carte blanche). / .ta-v2 .ta-fieldbox:focus-within { border-color: var(--color-encre); box-shadow: 0 0 0 2px var(--color-creme), 0 0 0 4px var(--color-rouge); } .ta-v2 .ta-fieldbox--error { border-color: var(--color-rouge); } .ta-v2 .ta-fieldbox--error:focus-within { border-color: var(--color-rouge); box-shadow: 0 0 0 2px var(--color-creme), 0 0 0 4px var(--color-rouge); } .ta-v2 .ta-fieldbox--disabled { background: var(--color-hover); opacity: .7; pointer-events: none; } .ta-v2 .ta-fieldicon { display: inline-flex; flex: none; color: var(--color-encre-2); } .ta-v2 .ta-fieldinput { flex: 1; min-width: 0; border: none; outline: none; background: transparent; font: 400 var(--text-champ)/1.4 var(--font-nunito); color: var(--color-encre); } .ta-v2 .ta-fieldinput::placeholder { color: var(--color-ardoise); } / La règle `:focus-visible` globale (.ta-v2-scope, en haut) pose un anneau sur TOUT élément focusable : sur un input logé dans une boîte, l'anneau tombe donc à l'intérieur du champ. On le neutralise ici — la boîte prend le relais via :focus-within. / .ta-v2 .ta-fieldinput:focus, .ta-v2 .ta-fieldinput:focus-visible { outline: none; box-shadow: none; } / `appearance: none` retire la GÉOMÉTRIE native (le bouton système), mais PAS le fond ni la couleur de texte : sans les fixer nous-mêmes, Safari iOS continue à peindre son propre fond gris natif par-dessus celui de `.ta-fieldbox`, débordant du cadre arrondi — visible en permanence sur iOS, jamais sur desktop. `background: transparent` laisse la boîte parente (déjà blanche) faire le travail plutôt que de dupliquer sa couleur ici. / .ta-v2 .ta-fieldselect { appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 4px; -webkit-tap-highlight-color: transparent; background: transparent; color: var(--color-encre); } .ta-v2 .ta-fieldchev { display: inline-flex; flex: none; color: var(--color-encre-2); pointer-events: none; } / Menu déroulant : le