/* ===================================================================== Next-Ticket — styles des ÉCRANS (back-office, panier, billets, contrôle). Les jetons, la typographie, l'en-tête, le pied et les boutons du kit viennent de nextticket.css (charte v2 du 07/09/2026), chargée AVANT cette feuille. Ici : un PONT des anciens noms de jetons vers les nouveaux — les écrans écrits avant la charte continuent de lire --bleu, --fond, --surface… — puis les composants propres aux écrans. Le thème : data-theme="dark" | "light" sur , mémorisé sous nt-theme ; nextticket.css redéfinit les jetons sombres. ===================================================================== */ :root { --bleu: var(--blue); --bleu-fonce: var(--blue-d); --bleu-accent: var(--blue); --vert: var(--ok); --rouge: var(--red); --orange: var(--warn); --bleu-clair: var(--tag-bg); --vert-clair: rgba(47,170,106,.14); --rouge-clair: rgba(227,9,66,.10); --orange-clair: rgba(180,88,26,.12); --texte: var(--text); --gris: var(--muted); --gris-clair: var(--bg2); --bordure: var(--line); --fond: var(--bg); --surface: var(--card); --topbar: var(--ink); --rayon: 12px; } :root[data-theme=dark] { color-scheme: dark; } @media (prefers-color-scheme: dark) { :root:not([data-theme=light]) { color-scheme: dark; } } html { background: var(--bg); } body { min-height: 100vh; display: flex; flex-direction: column; } main.pleine-largeur { flex: 1; } /* Le kit met les marges des paragraphes à zéro (pages composées) ; les écrans, eux, sont du texte. */ .contenu a:not(.btn), .org-contenu a:not(.btn) { color: var(--blue); } .contenu p, .org-contenu p { margin: 0 0 .8rem; } .contenu ul, .contenu ol, .org-contenu ul, .org-contenu ol { padding-left: 1.2rem; margin: 0 0 .8rem; } .lang a { padding: 6px 9px; color: var(--muted); } .lang a:hover { color: var(--heading); } .btn .short { display: none; } @media (max-width: 720px) { .btn .full { display: none; } .btn .short { display: inline; } } /* ── Contenu ─────────────────────────────────────────────────────────── */ .contenu { flex: 1; width: 100%; max-width: 1040px; margin: 0 auto; padding: 1.25rem 1rem 2.5rem; } h1 { font-size: 1.9rem; line-height: 1.15; margin: .5rem 0 .6rem; } h2 { font-size: 1.2rem; margin: 0 0 .4rem; } .sous-titre { color: var(--gris); font-size: 1.05rem; margin-top: 0; } .note { color: var(--gris); font-size: .9rem; } .carte { background: var(--surface); border: 1px solid var(--bordure); border-radius: var(--rayon); padding: 1rem 1.1rem; margin: 1rem 0; } .etapes { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; margin: 1.5rem 0; } .etapes .carte { margin: 0; position: relative; padding-top: 1.2rem; } .etapes .numero { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 999px; background: var(--bleu); color: #fff; font-weight: 700; margin-bottom: .5rem; } .tarif { background: var(--bleu-clair); border-color: transparent; } .barre-actions { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; margin: 1rem 0; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .7rem 1.1rem; border-radius: var(--r); border: 1px solid transparent; text-decoration: none; font-family: var(--tight); font-weight: 500; font-size: 15px; line-height: 1.2; cursor: pointer; } .btn:not(.btn-primary):not(.btn-principal):not(.btn-ghost):not(.btn-danger) { background: var(--card); color: var(--heading); border-color: var(--line2); } .btn-principal { background: var(--blue); border-color: var(--blue); color: #fff; box-shadow: 0 8px 24px -8px rgba(16,117,186,.55); } .btn-principal:hover { background: var(--blue-d); } .btn-petit { padding: .35rem .7rem; font-size: .85rem; } .lien-bouton { background: none; border: 0; padding: 0; color: var(--bleu-accent); cursor: pointer; font: inherit; text-decoration: underline; } /* ── Formulaires ─────────────────────────────────────────────────────── */ label { display: block; font-size: .9rem; font-weight: 600; margin: .9rem 0 .3rem; } .aide { font-weight: 400; color: var(--gris); font-size: .85rem; } input[type=text], input[type=email], input[type=password], input[type=tel], input[type=url], input[type=number], input[type=date], input[type=datetime-local], select, textarea { width: 100%; padding: .6rem .75rem; border: 1px solid var(--bordure); border-radius: 8px; font: inherit; background: var(--surface); color: inherit; } input:focus, select:focus, textarea:focus { outline: 2px solid var(--bleu-accent); outline-offset: -1px; } input:disabled, select:disabled, textarea:disabled { background: var(--gris-clair); color: var(--gris); } textarea { resize: vertical; } .ligne-champs { display: grid; gap: 0 .9rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } .case { display: flex; align-items: center; gap: .5rem; font-weight: 400; margin: .8rem 0; } .case input { width: auto; } .formulaire h2 { margin-top: 1.2rem; } .formulaire h2:first-child { margin-top: 0; } .formulaire-etroit { max-width: 26rem; } .prefixe-champ { display: flex; align-items: center; gap: .4rem; } .prefixe-champ span { color: var(--gris); white-space: nowrap; } .logo-apercu { max-height: 72px; max-width: 200px; border-radius: 8px; border: 1px solid var(--bordure); background: #fff; padding: 4px; vertical-align: middle; } .alerte { padding: .75rem 1rem; border-radius: 8px; margin: .9rem 0; } .alerte-ok { background: var(--vert-clair); color: var(--vert); } .alerte-ko { background: var(--rouge-clair); color: var(--rouge); } .alerte-info { background: var(--bleu-clair); color: var(--bleu-accent); } .bandeau { display: flex; align-items: center; justify-content: space-between; gap: .8rem; flex-wrap: wrap; padding: .6rem 1rem; border-radius: 8px; margin: 0 0 1rem; } .bandeau-attention { background: var(--orange-clair); color: var(--orange); } /* ── Back-office organisateur ────────────────────────────────────────── */ .org-cadre { display: grid; grid-template-columns: 220px 1fr; gap: 1.2rem; align-items: start; } @media (max-width: 720px) { .org-cadre { grid-template-columns: 1fr; } } .org-menu { background: var(--surface); border: 1px solid var(--bordure); border-radius: var(--rayon); padding: .9rem; position: sticky; top: .8rem; } .org-identite { padding-bottom: .7rem; margin-bottom: .7rem; border-bottom: 1px solid var(--bordure); } .org-identite b { display: block; } .org-identite small { color: var(--gris); display: block; } .org-choix summary { cursor: pointer; color: var(--bleu-accent); font-size: .85rem; margin-top: .4rem; } .org-choix a { display: block; padding: .2rem 0; font-size: .9rem; } .org-menu nav a, .org-menu nav .lien-bouton { display: block; padding: .45rem .5rem; border-radius: 6px; color: var(--texte); text-decoration: none; } .org-menu nav a:hover { background: var(--gris-clair); } .org-menu nav a.actif { background: var(--bleu-clair); color: var(--bleu-accent); font-weight: 600; } .org-menu nav form { margin-top: .6rem; padding-top: .6rem; border-top: 1px solid var(--bordure); } .org-menu nav .lien-bouton { text-decoration: none; color: var(--gris); width: 100%; text-align: left; } .org-contenu { min-width: 0; } .org-contenu h1 { margin-top: 0; } .a-faire { list-style: none; padding: 0; margin: 0; } .a-faire li { display: flex; align-items: center; gap: .7rem; padding: .5rem 0; border-top: 1px solid var(--bordure); } .a-faire li:first-child { border-top: 0; } .a-faire .coche { width: 1.5rem; text-align: center; color: var(--gris); } .a-faire li.faite .coche { color: var(--vert); } .a-faire li.faite .libelle { color: var(--gris); text-decoration: line-through; } .a-faire .libelle { flex: 1; } .choix-frais { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; margin: .8rem 0; } .choix { display: block; border: 2px solid var(--bordure); border-radius: var(--rayon); padding: .9rem 1rem; cursor: pointer; font-weight: 400; margin: 0; } .choix:has(input:checked), .choix.choisi { border-color: var(--bleu-accent); background: var(--bleu-clair); } .choix input { margin-right: .4rem; } .choix b { font-size: 1.05rem; } .choix > span { display: block; color: var(--gris); font-size: .9rem; margin: .3rem 0 .6rem; } .exemple { width: 100%; border-collapse: collapse; font-size: .92rem; } .exemple td { padding: .25rem 0; border-top: 1px solid var(--bordure); } .exemple td:last-child { text-align: right; } .org-public { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem; } .org-public h1 { margin: 0; } .logo-public { max-height: 96px; max-width: 220px; background: #fff; border-radius: 10px; padding: 6px; } .texte-libre { white-space: pre-line; width: 100%; } /* ── Tableaux ────────────────────────────────────────────────────────── */ .tableau-boite { overflow-x: auto; } table.tableau { width: 100%; border-collapse: collapse; font-size: .95rem; } .tableau th, .tableau td { text-align: left; padding: .5rem .6rem; border-bottom: 1px solid var(--bordure); vertical-align: top; } .tableau thead th { font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--gris); } .tableau tr.selection { background: var(--bleu-clair); } .tableau tr.inactif { color: var(--gris); } .tableau td.actions { white-space: nowrap; text-align: right; } .tableau td.prix { text-align: right; white-space: nowrap; } .en-ligne { display: inline; } .btn-danger { border-color: var(--rouge); color: var(--rouge); } .pastille { display: inline-block; padding: .1rem .55rem; border-radius: 999px; font-size: .8rem; font-weight: 600; background: var(--gris-clair); color: var(--gris); } .pastille-publie { background: var(--vert-clair); color: var(--vert); } .pastille-suspendu, .pastille-complet { background: var(--orange-clair); color: var(--orange); } .pastille-annule { background: var(--rouge-clair); color: var(--rouge); } .pastille-mollie-actif { background: var(--vert-clair); color: var(--vert); } .pastille-mollie-en_validation { background: var(--orange-clair); color: var(--orange); } .pastille-mollie-revoque { background: var(--rouge-clair); color: var(--rouge); } .liste-etapes li { margin: .4rem 0; } .pastille-org-actif { background: var(--vert-clair); color: var(--vert); } .pastille-org-suspendu, .pastille-org-ferme { background: var(--rouge-clair); color: var(--rouge); } .pastille-cmd-payee { background: var(--vert-clair); color: var(--vert); } .pastille-cmd-attente_paiement, .pastille-cmd-panier { background: var(--orange-clair); color: var(--orange); } .pastille-cmd-remboursee { background: var(--bleu-clair); color: var(--bleu-accent); } .tuiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: .8rem; margin: 1rem 0; } .tuile { margin: 0; display: flex; flex-direction: column; gap: .2rem; } .tuile-valeur { font-size: 1.7rem; font-weight: 700; line-height: 1.1; } .tuile-libelle { color: var(--gris); font-size: .85rem; } .tuile-accent { border-color: var(--bleu-accent); background: var(--bleu-clair); } .filtre { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; margin: .6rem 0 1rem; } .filtre input[type=text], .filtre select { width: auto; min-width: 12rem; } .filtre .champ-etroit { width: 9rem; min-width: 0; } .plateforme-menu { border-top: 4px solid #1f2937; } .detail { word-break: break-all; } .tableau th { font-weight: 600; white-space: nowrap; } .liste-simple { list-style: none; padding: 0; margin: 0; } .liste-simple li { padding: .35rem 0; border-top: 1px solid var(--bordure); display: flex; justify-content: space-between; gap: .6rem; } .liste-simple li:first-child { border-top: 0; } h3 { font-size: 1.05rem; margin: 1.2rem 0 .4rem; } .grille-dispo td, .grille-dispo th { vertical-align: middle; } .grille-dispo input.quota { width: 5.5rem; padding: .35rem .5rem; } .case.mini { margin: .25rem 0 0; font-size: .85rem; } .grille-dispo small { display: block; } .carte-lien { text-decoration: none; color: inherit; display: block; } .carte-lien:hover { border-color: var(--bleu-accent); } .carte-lien h3 { margin-top: .4rem; } .affiche-vignette { width: 100%; max-height: 180px; object-fit: cover; border-radius: 8px; } .evt-public { align-items: flex-start; } .affiche-public { max-width: 260px; max-height: 360px; border-radius: 10px; } .seance-bloc { margin: 1rem 0; } .seance-bloc h3 { margin: 0 0 .4rem; } .tarifs-public td:first-child { width: 55%; } .tarifs-public td.quantite { width: 5.5rem; text-align: right; } .tarifs-public td.quantite input { width: 4.5rem; padding: .4rem .5rem; } .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .nav-panier { font-weight: 600; } .tableau tfoot td { border-bottom: 0; border-top: 1px solid var(--bordure); } .participant { border-top: 1px solid var(--bordure); padding-top: .5rem; margin-top: .5rem; } .participant-titre { grid-column: 1 / -1; font-weight: 600; margin-top: .4rem; } .billets { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; } .billet { margin: 0; border-left: 5px solid var(--bleu); } .billet p { margin: .25rem 0; } .billet-tete { display: flex; justify-content: space-between; gap: .6rem; align-items: baseline; margin-bottom: .4rem; } .billet-tete b { font-size: 1.1rem; } .billet.inactif { opacity: .6; border-left-color: var(--gris); } .billet-corps { display: flex; justify-content: space-between; gap: .8rem; align-items: flex-start; } .billet-qr { width: 120px; height: 120px; background: #fff; border-radius: 8px; padding: 4px; flex: none; } .code-erreur { background: var(--gris-clair); padding: .6rem .8rem; border-radius: 8px; font-size: 1.05rem; } .code-erreur b { letter-spacing: .12em; font-family: Consolas, monospace; } /* ── Pied ────────────────────────────────────────────────────────────── */ /* ── Textes juridiques (/conditions) : colonne de lecture, articles numérotés ── */ .juridique { max-width: 76ch; line-height: 1.55; } .juridique h2 { margin: 1.4rem 0 .4rem; font-size: 1.05rem; } .juridique h2:first-child { margin-top: .2rem; } .juridique p { margin: 0 0 .7rem; } .juridique ul { margin: 0 0 .7rem; padding-left: 1.2rem; } .juridique li { margin-bottom: .25rem; } /* ── Sélecteur de marché (pied de page) : le pays courant en gras, les autres en lien ── */ .marches { display: inline-flex; gap: .6rem; align-items: center; } .marches b { font-weight: 600; } /* ── Contrôle des entrées (téléphone à la porte) ── */ .controle { max-width: 560px; } .controle-reglages { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; margin: .8rem 0; } .controle-reglages label { display: block; font-size: .8rem; color: var(--gris); margin-bottom: .2rem; } .controle-reglages select, .controle-reglages input { width: 100%; } .controle-compteurs { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; margin: .8rem 0; } .controle-compteurs div { background: var(--surface); border: 1px solid var(--bordure); border-radius: var(--rayon); padding: .6rem; text-align: center; } .controle-compteurs b { display: block; font-size: 1.8rem; line-height: 1.1; font-variant-numeric: tabular-nums; } .controle-compteurs span { font-size: .75rem; color: var(--gris); text-transform: uppercase; letter-spacing: .04em; } .controle-verdict { border-radius: var(--rayon); padding: 1.1rem 1rem; margin: .8rem 0; min-height: 5.2rem; color: #fff; transition: background .15s; } .controle-attente { background: var(--gris); } .controle-ok { background: var(--vert); } .controle-deja { background: var(--orange); } .controle-refus { background: var(--rouge); } .controle-verdict-titre { font-size: 1.45rem; font-weight: 700; line-height: 1.2; } .controle-verdict-detail { margin-top: .35rem; font-size: 1rem; opacity: .95; } .controle-camera video { width: 100%; max-height: 60vh; border-radius: var(--rayon); background: #000; display: block; margin-bottom: .5rem; } .controle-camera-actions { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; } .controle-saisie { margin: 1rem 0; } .controle-saisie label { display: block; font-size: .8rem; color: var(--gris); margin-bottom: .2rem; } .controle-saisie-ligne { display: flex; gap: .5rem; } .controle-saisie-ligne input { flex: 1; font-family: ui-monospace, Consolas, monospace; text-transform: uppercase; } .controle-derniers { list-style: none; margin: 0; padding: 0; } .controle-derniers li { padding: .4rem 0; border-bottom: 1px solid var(--bordure); font-size: .95rem; } .controle-derniers .heure { font-family: ui-monospace, Consolas, monospace; color: var(--gris); margin-right: .3rem; } .controle-derniers small { color: var(--gris); } .controle-derniers .verdict-accepte b { color: var(--vert); } .controle-derniers .verdict-deja_scanne b { color: var(--orange); } .controle-derniers li:not(.verdict-accepte):not(.verdict-deja_scanne) b { color: var(--rouge); } @media (max-width: 480px) { .controle-reglages { grid-template-columns: 1fr; } } .controle-quitter { display: flex; justify-content: flex-end; } .porte-cadre { display: flex; gap: 1.2rem; align-items: flex-start; flex-wrap: wrap; } .porte-qr { background: #fff; border: 1px solid var(--bordure); border-radius: 10px; padding: 6px; } .porte code { word-break: break-all; font-size: .85rem; } .controle-camera video[hidden] { display: none; }