/* ============================================================
   Time-Check - design-system components (October 2026)
   Loaded last on every page. Each block recreates one component of
   design-system/DESIGN.md "Components" or of the boards in
   design-system/reference/ (Composants-site, Site-Accueil), using only
   tokens from tokens.css. Page sheets keep layout; this file owns the
   look of the shared components.
   ============================================================ */

/* ---- Skip link (board 01): nuit, givre outline, top left on focus ---- */
.skip-link { position: fixed; top: 12px; left: 16px; z-index: 100; display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: var(--r-2); background: var(--tc-nuit); color: var(--tc-white); font-size: 15px; font-weight: 600; outline: var(--focus-outline); outline-offset: 3px; transform: translateY(-200%); }
.skip-link:focus, .skip-link:hover { transform: none; color: var(--tc-white); }

/* ---- Buttons: text (discreet "Se connecter") and dark (nuit) ---- */
.btn-text { background: transparent; border-color: transparent; color: var(--ink); padding-inline: 12px; }
.btn-text:hover { background: transparent; color: var(--primary); }
.btn-dark { background: var(--tc-nuit); border-color: var(--tc-nuit); color: var(--tc-white); }
.btn-dark:hover { background: var(--tc-nuit-800); border-color: var(--tc-nuit-800); color: var(--tc-white); transform: translateY(-2px); }
.btn-outline { background: var(--surface); border-color: var(--line-2); color: var(--ink); }
.btn-outline:hover { background: var(--surface-2); border-color: var(--primary); color: var(--ink); }

/* ---- Header navigation (board 02): links with a cobalt underline that
   grows on hover and stays on the current page ---- */
.header-nav { gap: 26px; }
.header-nav a { position: relative; padding: 12px 2px; border-radius: 0; background: none; color: var(--ink-2); font-size: 14px; font-weight: 500; }
.header-nav a::after { content: ""; position: absolute; left: 2px; right: 2px; bottom: 6px; height: 2px; border-radius: 2px; background: var(--primary); transform: scaleX(0); transform-origin: 0 50%; transition: transform .35s var(--ease-out); }
.header-nav a:hover, .header-nav a[aria-current] { background: none; color: var(--ink); }
.header-nav a:hover::after, .header-nav a[aria-current]::after { transform: scaleX(1); }
@media (max-width: 1200px) { .header-nav { gap: 14px; } .header-nav a { font-size: 13px; } }

/* ---- Segmented control (language FR | NL | EN, DESIGN.md): brume track,
   white "on" pill with --shadow-1 ---- */
.lang-pills { background: var(--surface-2); border: 0; padding: 3px; gap: 2px; border-radius: var(--r-pill); }
.lang-pill { min-width: 40px; height: 34px; padding: 0 10px; font-size: 12px; font-weight: 600; letter-spacing: .04em; color: var(--tc-ardoise-400); }
.lang-pill:hover { color: var(--ink); }
.lang-pill.is-active { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-1); }

/* ---- Mobile menu (board 03): square toggle (nuit when open), big touch
   links with an arrow, a language row, both buttons at the bottom ---- */
.menu-toggle { display: none; }
.mobile-menu { position: absolute; inset: 100% 0 auto; z-index: 30; }
.menu-scrim { position: fixed; inset: 76px 0 0; background: var(--scrim); backdrop-filter: blur(6px); }
.menu-panel { position: relative; display: flex; flex-direction: column; max-height: calc(100dvh - 76px); overflow-y: auto; background: var(--surface); border-radius: 0 0 var(--r-4) var(--r-4); box-shadow: var(--shadow-3); }
.menu-nav { display: flex; flex-direction: column; padding: 10px 22px 0; }
.menu-nav a { display: flex; align-items: center; justify-content: space-between; min-height: 58px; padding: 0 4px; border-bottom: 1px solid var(--line); color: var(--ink); font-size: 22px; font-weight: 650; letter-spacing: var(--tracking-title); }
.menu-nav a[aria-current] { color: var(--primary); }
.menu-arrow { color: var(--ink-4); transition: transform .3s var(--ease-out), color .3s; }
.menu-nav a:hover .menu-arrow { color: var(--primary); transform: translateX(3px); }
.menu-lang { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 26px; }
.menu-lang-label { font: 12px var(--font-mono); color: var(--tc-ardoise-400); }
.menu-lang .lang-pill { min-height: 44px; min-width: 48px; }
.menu-actions { display: flex; flex-direction: column; gap: 10px; padding: 22px; background: var(--surface-2); }
.menu-actions .btn { width: 100%; }
body.menu-is-open { overflow: hidden; }
@media (max-width: 880px) {
  .menu-toggle { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
  .menu-toggle .icon-close { display: none; }
  .menu-toggle[aria-expanded="true"] { background: var(--tc-nuit); border-color: var(--tc-nuit); color: var(--tc-white); }
  .menu-toggle[aria-expanded="true"] .icon-burger { display: none; }
  .menu-toggle[aria-expanded="true"] .icon-close { display: block; }
  .menu-scrim { top: 68px; }
  .menu-panel { max-height: calc(100dvh - 68px); }
}

/* ---- Text link (board "lnk"): cobalt, the arrow steps up-right on hover ---- */
.text-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--primary); font-size: 14px; font-weight: 600; text-decoration: none; }
.text-link:hover { color: var(--primary-hover); }
.text-link > span { display: inline-block; font-size: 1.15em; transition: transform .3s var(--ease-out); }
.text-link:hover > span { transform: translate(3px, -3px); }

/* ---- Contact address: mono, underlined, cobalt on hover ---- */
.contact-link { display: inline-flex; align-items: center; min-height: 30px; font-family: var(--font-mono); font-size: 13px; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-2); transition: color .15s, text-decoration-color .15s; }
.contact-link:hover { color: var(--primary); text-decoration-color: currentColor; }
.help-card .contact-link { color: var(--tc-givre-200); text-decoration-color: var(--tc-cobalt-300); margin-top: 14px; }
.help-card .contact-link:hover { color: var(--tc-white); }
.signup-contact .contact-link { color: var(--tc-givre-200); text-decoration-color: var(--tc-cobalt-300); font-size: 12px; }
.page-contact .contact-link { margin-left: 8px; }
@media (max-width: 880px) { .contact-link { min-height: 44px; } }

/* ---- Badges and chips (DESIGN.md "Badges", board "chipc"/"badge") ---- */
.hero-badge { gap: 10px; padding: 7px 16px 7px 10px; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink-2); font-size: 13px; font-weight: 500; box-shadow: 0 8px 24px -16px rgba(31, 75, 255, 0.5); }
.hero-badge::before { box-shadow: none; animation: tc-live 1.6s ease-in-out infinite; }
.included-pill, .mini-status, .day-state { display: inline-flex; align-items: center; gap: 6px; border-radius: var(--r-pill); background: var(--tc-ciel-100); color: var(--primary); font-weight: 600; }
.included-pill { padding: 6px 12px; font-size: 12px; }
.mini-status { padding: 3px 7px; }
/* "En cours": live pulsing cobalt dot */
.live-dot { animation: tc-live 1.6s ease-in-out infinite; }
.clock-status-dot { background: var(--primary); box-shadow: none; animation: tc-live 1.6s ease-in-out infinite; }
.is-stopped .clock-status-dot { animation: none; }
@keyframes tc-live { 0% { box-shadow: 0 0 0 0 rgba(31, 75, 255, 0.45); } 70%, 100% { box-shadow: 0 0 0 7px rgba(31, 75, 255, 0); } }
.stage-label .live-dot, .scene-caption .live-dot { background: var(--tc-cobalt-300); }

/* ---- Product preview (board 05 "Démo"): avatars in the palette, a
   "Semaine complète" cobalt pill, the pointage card on white ---- */
.person-avatar, .avatar-stack i, .mock-avatar { font-weight: 700; }
.peach, .avatar-stack i:nth-child(1) { background: var(--tc-cobalt); color: var(--tc-white); }
.blue, .avatar-stack i:nth-child(2) { background: var(--tc-givre); color: var(--tc-nuit); }
.lilac, .avatar-stack i:nth-child(3) { background: var(--tc-nuit); color: var(--tc-white); }
.green, .avatar-stack i:nth-child(4) { background: var(--tc-ciel); color: var(--tc-cobalt); }
.avatar-stack i { border-color: var(--surface); }
.workspace-bottom > span:first-child { padding: 4px 9px 4px 5px; border-radius: var(--r-pill); background: var(--primary); color: var(--tc-white); font-weight: 600; }
.workspace-bottom > span:first-child .live-dot { width: 10px; height: 10px; background: var(--tc-white); animation: none; }
.clock-preview { background: var(--surface); border-color: var(--line-2); }
.clock-preview-icon { background: var(--tc-ciel-100); color: var(--primary); }
.clock-meta { color: var(--ink-3); }
.clock-button { border-radius: var(--r-pill); box-shadow: var(--shadow-primary); }
.is-stopped .clock-button { background: var(--surface); color: var(--ink); border-color: var(--line-2); box-shadow: none; }
.is-stopped .clock-time { color: var(--ink-4); }
.clock-demo-note { font-family: var(--font-mono); color: var(--ink-3); }

/* ---- Tabs (DESIGN.md "Tabs"): underline 3px cobalt on the active tab,
   mono counter pill. Used by the FAQ topics and the features explorer. ---- */
.faq-layout > *, .faq-browser, .feature-explorer { min-width: 0; }
.editorial-tabs { display: flex; gap: 4px; padding: 0 18px; background: var(--surface); border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.editorial-tabs::-webkit-scrollbar { display: none; }
.editorial-tabs a { position: relative; flex: 1 0 auto; display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 60px; padding: 0 16px; color: var(--ink-3); font-size: 14px; font-weight: 600; white-space: nowrap; transition: color .2s; }
.editorial-tabs a::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--primary); transform: scaleX(0); transition: transform .35s var(--ease-out); }
.editorial-tabs a:hover { color: var(--ink); }
.editorial-tabs a[aria-selected="true"] { color: var(--primary); }
.editorial-tabs a[aria-selected="true"]::after { transform: scaleX(1); }
.editorial-tabs a:focus-visible { outline-offset: -6px; }
.editorial-tabs a > .icon { color: currentColor; opacity: .8; }
.question-count { display: inline-grid; place-items: center; min-width: 26px; height: 22px; padding: 0 7px; border-radius: var(--r-pill); background: var(--surface-2); color: var(--ink-3); font: 500 11px var(--font-mono); }
.editorial-tabs a[aria-selected="true"] .question-count { background: var(--tc-ciel-100); color: var(--primary); }
.faq-group-heading { padding: 22px 0 6px; font: 12px var(--font-mono); color: var(--tc-ardoise-400); }
@media (max-width: 600px) {
  .editorial-tabs { padding: 0 6px; gap: 0; }
  .editorial-tabs a { flex: 0 0 auto; min-height: 52px; padding: 0 12px; font-size: 13px; gap: 7px; }
  .editorial-tabs a > .icon { display: none; }
}

/* ---- Accordion (reference/Site-Accueil.dc.html FAQ): number in mono, the
   question turns cobalt on hover, the ring fills and its chevron turns
   from down to up when open, and the answer height animates where ::details-content exists ---- */
.question, .growth-disclosure, .legal-section { interpolate-size: allow-keywords; }
.question { border-bottom: 1px solid var(--line); }
.question:last-child { border-bottom: 0; }
.question summary, .growth-disclosure summary, .legal-section summary { display: flex; align-items: center; gap: 16px; min-height: 64px; padding: 18px 2px; list-style: none; cursor: pointer; color: var(--ink); font-size: 16px; font-weight: 600; line-height: 1.45; letter-spacing: -0.015em; transition: color .25s; }
.question summary::-webkit-details-marker, .growth-disclosure summary::-webkit-details-marker, .legal-section summary::-webkit-details-marker { display: none; }
.question summary:hover, .growth-disclosure summary:hover, .legal-section summary:hover { color: var(--primary); }
.question summary:focus-visible, .growth-disclosure summary:focus-visible, .legal-section summary:focus-visible { outline: var(--focus-outline); outline-offset: 2px; border-radius: 8px; }
.question-number { flex: none; width: 26px; font: 400 13px var(--font-mono); color: var(--tc-ardoise-400); }
.question-text { flex: 1; }
.qa-icon { flex: none; width: 34px; height: 34px; margin-left: auto; }
.qa-icon circle { stroke: var(--primary); fill: transparent; transition: fill .35s; }
.qa-chevron { stroke: var(--primary); transform-box: view-box; transform-origin: 19px 19px; transform: rotate(90deg); transition: transform .45s var(--ease-spring), stroke .25s; }
details[open] > summary .qa-icon circle { fill: var(--primary); }
details[open] > summary .qa-chevron { stroke: var(--tc-white); transform: rotate(-90deg); }
.question-answer { padding: 0 52px 22px 42px; color: var(--ink-3); font-size: 15px; line-height: 1.7; }
@media (prefers-reduced-motion: no-preference) {
  .question::details-content, .growth-disclosure::details-content, .legal-section::details-content { height: 0; overflow: clip; transition: height .45s var(--ease-out), content-visibility .45s allow-discrete; }
  .question[open]::details-content, .growth-disclosure[open]::details-content, .legal-section[open]::details-content { height: auto; }
}
.growth-disclosure { margin-top: 20px; border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); }
.growth-disclosure summary { font-size: 16px; }
.legal-section summary h2 { flex: 1; color: inherit; }
@media (max-width: 600px) {
  .question summary { gap: 12px; font-size: 14px; padding-block: 16px; }
  .question-number { width: 22px; font-size: 12px; }
  .qa-icon { width: 30px; height: 30px; }
  .question-answer { padding: 0 4px 20px 34px; font-size: 14px; }
}

/* ---- Legal documents: the four documents as underline tabs (they are
   links to separate pages) ---- */
.doc-tabs { display: flex; gap: 4px; align-self: stretch; padding: 0 12px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; overflow-x: auto; scrollbar-width: none; }
.doc-tabs::-webkit-scrollbar { display: none; }
.doc-tab { position: relative; flex: 1 0 auto; display: flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 14px; border-radius: 0; background: none; color: var(--ink-3); font-size: 14px; font-weight: 600; white-space: nowrap; box-shadow: none; }
.doc-tab::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--primary); transform: scaleX(0); transition: transform .35s var(--ease-out); }
.doc-tab:hover { color: var(--ink); background: none; }
.doc-tab.is-active { color: var(--primary); background: none; box-shadow: none; }
.doc-tab.is-active::after { transform: scaleX(1); }
@media (max-width: 560px) { .doc-tabs { display: flex; padding: 0; } .doc-tab { flex: 0 0 auto; font-size: 13px; padding: 0 12px; min-height: 48px; } }

/* ---- Step cards (board 06 "Comment ça marche"): lift, givre border ---- */
.workflow-card { border-radius: var(--r-4); border-color: var(--line); }
.workflow-card:hover { border-color: var(--tc-givre); box-shadow: 0 30px 60px -36px rgba(31, 75, 255, 0.6); transform: translateY(-6px); }
.review-time { white-space: nowrap; }
/* Step 3 "Valider": the clock forms the check, white on cobalt ("complete"),
   with the week status beside it; the long hand turns on hover. */
.workflow-card:nth-child(3) .workflow-art { background: var(--primary); color: var(--tc-white); box-shadow: var(--shadow-primary); }
/* (the art's older "> span" rules style the status dot and text; the mark is a span too) */
.workflow-card:nth-child(3) .workflow-art > .brand-mark { display: grid; width: 34px; height: 34px; margin: 0; background: none; border-radius: 0; }
.workflow-card:nth-child(3) .workflow-art > span { font-size: 12px; font-weight: 600; color: var(--tc-white); }
.workflow-card:nth-child(3) .mark-long, .workflow-card:nth-child(3) .mark-cut { transition: transform 1s var(--ease-spring); }
@media (prefers-reduced-motion: no-preference) {
  .workflow-card:nth-child(3):hover :is(.mark-long, .mark-cut) { transform: rotate(360deg); }
}
@media (max-width: 600px) {
  .workflow-card:nth-child(3) .workflow-art { justify-content: center; }
  .workflow-card:nth-child(3) .workflow-art > .brand-mark { width: 26px; height: 26px; }
}

/* ---- Pricing cards (board 07): Small on brume, Unlimited on nuit with a
   cobalt glow and a large clock watermark whose hand turns on hover ---- */
.price-card, .home-price-tile { position: relative; overflow: hidden; isolation: isolate; border-radius: 28px; }
.price-card:not(.price-card-dark), .home-price-tile:not(:last-child) { background: var(--surface-2); border-color: var(--line-2); }
.price-card-dark, .home-price-tile:last-child { background: var(--tc-nuit); border-color: var(--tc-nuit); color: var(--tc-white); box-shadow: 0 30px 80px -34px var(--tc-cobalt); background-image: none; }
.price-card-dark .price-amount, .home-price-tile:last-child strong { color: var(--tc-white); }
.price-card-dark .price-size { color: var(--tc-givre); }
.card-watermark { position: absolute; right: -110px; top: -110px; z-index: -1; width: 300px; height: 300px; opacity: .14; pointer-events: none; }
.card-watermark .brand-mark { width: 100%; height: 100%; }
.home-price-tile .card-watermark { right: -60px; top: -70px; width: 190px; height: 190px; }
.card-watermark :is(.mark-long, .mark-cut) { transition: transform 1.2s var(--ease-spring); }
@media (prefers-reduced-motion: no-preference) {
  :is(.price-card, .home-price-tile):hover .card-watermark :is(.mark-long, .mark-cut) { transform: rotate(360deg); }
}
.price-card:hover, .home-price-tile:hover { transform: translateY(-6px); }
.price-card:not(.price-card-dark):hover, .home-price-tile:not(:last-child):hover { border-color: var(--line-2); box-shadow: 0 40px 80px -40px rgba(31, 75, 255, 0.6); }
.price-card .btn { width: 100%; }
@media (max-width: 600px) { .price-card, .home-price-tile { border-radius: var(--r-3); } .card-watermark { width: 200px; height: 200px; right: -70px; top: -70px; } }

/* ---- Closing call-to-action (Site-Accueil "Final CTA"): the cobalt block,
   ripples from the centre, a white button, the clock ticking a full turn ---- */
.compact-closing { position: relative; overflow: hidden; isolation: isolate; background: var(--tc-cobalt); color: var(--tc-white); border-radius: var(--r-4); }
.compact-closing h2 { color: var(--tc-white); }
.compact-closing::before, .compact-closing::after { content: ""; position: absolute; left: 50%; top: 50%; z-index: -1; width: 300px; height: 300px; margin: -150px 0 0 -150px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, 0.35); pointer-events: none; opacity: 0; }
.compact-closing .closing-icon { background: transparent; color: var(--tc-white); }
.compact-closing .closing-icon .brand-mark { width: 40px; height: 40px; }
.compact-closing .btn-primary { background: var(--tc-white); border-color: var(--tc-white); color: var(--tc-nuit); box-shadow: 0 20px 60px -20px rgba(7, 17, 43, 0.8); }
.compact-closing .btn-primary:hover { background: var(--tc-white); color: var(--tc-cobalt); }
@media (prefers-reduced-motion: no-preference) {
  .compact-closing::before, .compact-closing::after { animation: tc-ripple 6s cubic-bezier(.2, .6, .3, 1) infinite; }
  .compact-closing::after { animation-delay: 3s; }
  .closing-icon :is(.mark-long, .mark-cut) { animation: tc-tock 4.5s var(--ease-spring) infinite; }
}
@keyframes tc-ripple { from { transform: scale(.6); opacity: .9; } to { transform: scale(4.2); opacity: 0; } }
@keyframes tc-tock { 0%, 70% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
.brand-mark-on-cobalt { --mark-rim: var(--tc-white); --mark-hands: var(--tc-white); }

/* ---- Footer (board 08): nuit, lockup and tagline, product and contact
   columns with mono titles, then copyright and legal links ---- */
/* On short pages (FAQ, legal) the footer takes the rest of the viewport, so the
   nuit continues to the bottom of the window instead of leaving a light band. */
body { min-height: 100dvh; display: flex; flex-direction: column; }
/* In that column, a centred block (max-width + margin: auto) would shrink to
   its content and change width as accordions open; keep it full width. */
body > :where(header, main, footer) { width: 100%; }
/* Reserve the scrollbar's space so the page doesn't shift sideways when an
   opened answer makes it taller than the window. */
html { overflow-y: auto; scrollbar-gutter: stable; }
.site-footer { flex-grow: 1; }
.site-footer { background: var(--tc-nuit); color: var(--tc-white); padding: 56px 36px 32px; border: 0; }
.footer-inner { max-width: 1280px; margin: 0 auto; display: flex; flex-direction: column; gap: 40px; }
.footer-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 36px 56px; }
.footer-brand { display: flex; flex-direction: column; gap: 14px; }
.footer-lockup { display: inline-flex; align-items: center; gap: 11px; }
.footer-lockup .brand-mark { width: 32px; height: 32px; }
.footer-name { font-size: 22px; }
.wordmark-dark { color: var(--tc-white); }
.wordmark-dark .wm-dot { background: var(--tc-cobalt-300); }
.wordmark-dark .wm-check { color: var(--tc-givre-200); }
.footer-tagline { color: var(--on-dark-3); font-size: 15px; }
.footer-cols { display: flex; flex-wrap: wrap; gap: 32px 64px; }
.footer-col { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; font-size: 15px; }
.footer-col-title { font: 12px var(--font-mono); color: var(--on-dark-3); margin-bottom: 2px; }
.footer-col a, .footer-links a, .footer-langs a { color: var(--on-dark-2); text-decoration: none; transition: color .2s; }
.footer-col a:hover, .footer-links a:hover, .footer-langs a:hover { color: var(--tc-white); }
.site-footer .contact-link { min-height: 0; font-size: 14px; color: var(--on-dark-2); text-decoration-color: rgba(168, 196, 255, 0.35); }
.site-footer .contact-link:hover { color: var(--tc-white); }
.footer-langs { display: flex; gap: 14px; font-weight: 600; font-size: 14px; }
.footer-langs a[aria-current] { color: var(--tc-white); }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 14px 24px; padding-top: 24px; border-top: 1px solid rgba(168, 196, 255, 0.12); font-size: 13px; color: var(--on-dark-3); }
.footer-links { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.footer-links a { color: var(--on-dark-3); }
@media (max-width: 880px) {
  .site-footer { padding: 40px 24px 28px; }
  .footer-inner { gap: 30px; }
  .footer-col a, .footer-langs a, .footer-links a { display: inline-flex; align-items: center; min-height: 44px; }
  .site-footer .contact-link { min-height: 44px; }
  .footer-langs { gap: 4px; }
  .footer-langs a { min-width: 44px; justify-content: center; }
  .footer-langs a:first-child { justify-content: flex-start; min-width: 34px; }
  .footer-col { gap: 0; }
  .footer-col-title { margin-bottom: 4px; }
  .footer-bottom { flex-direction: column-reverse; align-items: flex-start; }
  .footer-links { gap: 0 18px; }
}
@media (max-width: 560px) { .site-footer { padding-inline: 20px; } }

/* ---- Form fields (DESIGN.md "Inputs"): label above 14/600, 46px high,
   1.5px border, radius 12; focus = cobalt border + ring; error = red ---- */
.field { gap: 7px; }
.field-label { font-size: 14px; font-weight: 600; color: var(--ink); }
.field input, .field select { height: 46px; padding: 0 14px; border: 1.5px solid var(--tc-bordure); border-radius: var(--r-2); background-color: var(--surface); font-size: 15px; }
.field input:hover, .field select:hover { border-color: var(--tc-givre); }
.field input:focus, .field select:focus { border-color: var(--primary); box-shadow: var(--ring); }
.field.is-invalid input, .field.is-invalid select { border-color: var(--danger); box-shadow: 0 0 0 4px rgba(217, 45, 32, 0.1); }
.field input::placeholder { color: var(--tc-gris); }
.field .input-mono { font-size: 14px; }
/* Select: native element, appearance none, chevron */
.field select { appearance: none; padding-right: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234A5677' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; cursor: pointer; }
@media (max-width: 880px) { .field input, .field select { height: 48px; font-size: 16px; } }

/* Preferred language: the segmented control */
.preflang { display: inline-flex; align-self: flex-start; gap: 2px; padding: 3px; border-radius: var(--r-pill); background: var(--surface-2); }
.preflang-pill span { height: 38px; min-height: 0; padding: 0 18px; border: 0; border-radius: var(--r-pill); background: transparent; color: var(--tc-ardoise-400); font-size: 14px; }
.preflang-pill span:hover { color: var(--ink); }
.preflang-pill input:checked + span { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-1); }
.preflang-pill input:focus-visible + span { box-shadow: var(--ring); }
@media (max-width: 880px) { .preflang { display: flex; align-self: stretch; } .preflang-pill span { height: 42px; } }

/* Checkbox: the native input restyled (22px box, radius 7, cobalt + white check) */
.consent { gap: 12px; align-items: flex-start; }
.consent input { appearance: none; flex: none; width: 22px; height: 22px; margin: 0; border: 1.5px solid var(--tc-bordure); border-radius: 7px; background: var(--surface) center / 14px no-repeat; cursor: pointer; transition: background-color .2s, border-color .2s; }
.consent input:hover { border-color: var(--tc-givre); }
.consent input:checked { background-color: var(--primary); border-color: var(--primary); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
.consent input:focus-visible { outline: var(--focus-outline); outline-offset: 2px; }
.consent span { font-size: 14px; color: var(--ink-2); }
.consent a { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }

/* Alerts (DESIGN.md "Alerts"): round icon, soft background */
.info-box { gap: 12px; align-items: center; padding: 14px 16px; border-radius: var(--r-2); background: var(--info-soft); color: var(--info-ink); font-size: 13px; }
.info-box > .icon { display: grid; place-items: center; width: 28px; height: 28px; padding: 5px; border-radius: 50%; background: var(--info); color: var(--tc-white); }
.wizard-error { color: var(--danger-ink); }

/* Stepper: cobalt for active, cobalt + check for done ("complete") */
.stepper-item.is-active { background: var(--tc-ciel-100); }
.is-active .stepper-num { background: var(--primary); }
.is-done .stepper-num { background: var(--primary); color: var(--tc-white); }
.is-active .stepper-label { color: var(--primary); }
.bar.is-on { background: var(--primary); }

/* Summary cards on the confirmation step */
.summary-card { border-radius: var(--r-3); background: var(--tc-brume-50); }
.summary-title { font: 12px var(--font-mono); color: var(--tc-ardoise-400); }

/* Very narrow phones (320px): the signup and legal headers hold the back
   arrow, the logo and three language pills; the visible "time·check" text
   goes so nothing overflows (screen readers keep the hidden "Time-Check"). */
@media (max-width: 359px) {
  .site-header .brand:has(.brand-back) .brand-name > [aria-hidden="true"] { display: none; }
}

/* ---- Readability floor. Real copy (not the illustrative product mockups,
   which stay small and are aria-hidden) never goes below 12px: body text
   14px on phones, secondary lines 13px, fine print 12px. ---- */
.price-description, .inclusions-card li { font-size: 14px; }
.price-included, .explorer-foot p, .home-pricing-copy > p, .help-bottom, .audit-card > p { font-size: 13px; }
.price-tax, .setup-for { font-size: 12px; }
.clock-demo-note { font-size: 11px; }
@media (max-width: 880px) {
  .workflow-card p, .feature-list p, .price-description, .setup-ribbon p, .help-card p,
  .home-pricing-copy > p, .page-contact > p, .audience-list li, .inclusions-card li,
  .signup-benefits li { font-size: 14px; }
  .hero-sizes, .hero-note, .hero-proof > div, .home-price-tile p, .price-included,
  .explorer-foot p, .signup-aside > .signup-plan-note, .legal-contact { font-size: 13px; }
  .price-tax, .legal-updated, .hero-badge, .home-price-tile strong > span,
  .price-amount > span, .signup-aside-art small { font-size: 12px; }
  .price-card .btn, .compact-closing .btn { font-size: 14px; }
  .clock-demo-note { font-size: 10px; }
}

/* Inactive tab panels kept findable (tabs.js, hidden="until-found"): the
   browser only skips their content, so take the box out of the flow too. */
[data-tab-panel][hidden="until-found"] { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; border: 0; overflow: hidden; }

/* ---- Setup-fee waiver badge (setupBadge macro): cobalt tag with the struck
   old price and the free price, optional deadline in small text after it.
   Used in the hero, the landing pricing teaser, the pricing intro and plan
   cards, and the signup aside/intro. ---- */
.setup-badge { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.setup-badge-tag { display: inline-flex; align-items: center; gap: 8px; padding: 6px 6px 6px 12px; border-radius: var(--r-pill); background: var(--tc-ciel-100); color: var(--primary-ink); font-size: 13px; font-weight: 600; line-height: 1.3; }
.setup-badge-price { display: inline-flex; align-items: baseline; gap: 5px; padding: 3px 10px; border-radius: var(--r-pill); background: var(--primary); color: var(--tc-white); white-space: nowrap; }
.setup-badge-price s { font-weight: 500; text-decoration-thickness: 1.5px; }
.setup-badge-price strong { font-weight: 700; }
.setup-badge-note { font-size: 13px; color: var(--ink-3); }
/* On nuit panels (Unlimited card, signup aside) */
.setup-badge-on-dark .setup-badge-tag { background: rgba(168, 196, 255, 0.14); color: var(--tc-givre-200); }
.setup-badge-on-dark .setup-badge-note { color: var(--on-dark-2); }
/* Placements */
.hero-setup { margin-top: -4px; }
.intro-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.intro-pills .included-pill { margin-top: 0; }
.price-card .setup-badge { margin-bottom: 18px; }
.home-pricing-copy .setup-badge { margin: 4px 0 14px; }
.signup-aside .setup-badge { margin-top: 18px; }
.signup-setup-phone { display: none; }
.summary-setup strong { color: var(--primary); font-weight: 600; }
.summary-setup s { color: var(--ink-3); font-weight: 400; margin-right: 4px; }
@media (max-width: 880px) {
  .signup-setup-phone { display: inline-flex; justify-content: center; margin-top: 6px; }
  .price-card .setup-badge-tag { flex-wrap: wrap; padding: 8px 10px; border-radius: 12px; font-size: 12px; }
}