/* ═══════════════════════════════════════════════════════════════════════════ LES ESPACES — Tribune (familles), Vestiaire (moniteurs), Banc (direction). Une seule feuille, une teinte par espace posée sur . Clair, dense, lisible sur un téléphone au bord du terrain. ═══════════════════════════════════════════════════════════════════════════ */ @font-face { font-family: 'Inter Tight'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('fonts/inter-tight-latin-nvar.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Inter Tight'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('fonts/inter-tight-latin-ext-nvar.woff2') format('woff2'); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; } :root { --noir: #0F0F0F; --bleu: #0D38FF; --sable: #EBE8E0; --fond: #F4F3EF; --carte: #FFFFFF; --encre: #16181D; --doux: #6B6F76; --trait: #E1DED6; --vert: #1E9E5A; --orange: #E08A1E; --rouge: #D14343; --accent: var(--bleu); --barre: var(--noir); --texte: 'Inter Tight', Inter, ui-sans-serif, system-ui, 'Segoe UI', sans-serif; --display: 'Hanson', 'Inter Tight', Inter, ui-sans-serif, system-ui, sans-serif; --mono: 'Roboto Mono', ui-monospace, Consolas, monospace; --rayon: 6px; } body[data-espace="famille"] { --accent: #0D38FF; --barre: #0F0F0F; } body[data-espace="vestiaire"] { --accent: #1E9E5A; --barre: #0F0F0F; --fond: #F1F4F2; } body[data-espace="direction"] { --accent: #0D38FF; --barre: #0F0F0F; --fond: #F4F3EF; } body[data-espace="bureau"] { --accent: #0D38FF; --barre: #1C2230; --fond: #EEF0F4; } /* le Bureau : même porte, autre pièce */ * { box-sizing: border-box; } body { margin: 0; background: var(--fond); color: var(--encre); font: 15px/1.5 var(--texte); -webkit-font-smoothing: antialiased; } a { color: inherit; } h1, h2, h3, h4 { margin: 0; line-height: 1.15; } h1 { font-family: var(--display); text-transform: uppercase; font-weight: 800; font-size: 1.6rem; letter-spacing: -0.01em; } h2 { font-size: 1.15rem; font-weight: 700; } h3 { font-size: 0.98rem; font-weight: 600; } p { margin: 0 0 0.8rem; } .mono { font-family: var(--mono); font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--doux); } .doux { color: var(--doux); } .petit { font-size: 0.85rem; } /* ── Barre ────────────────────────────────────────────────────────────── */ .barre { background: var(--barre); color: #fff; } .barre .enveloppe { display: flex; align-items: center; gap: 1rem; min-height: 56px; } .enveloppe { max-width: 1240px; margin: 0 auto; padding: 0 clamp(14px, 3vw, 32px); } .marque { display: flex; align-items: center; gap: 0.55rem; text-decoration: none; font-family: var(--display); text-transform: uppercase; font-weight: 800; font-size: 0.95rem; white-space: nowrap; } @media (max-width: 720px) { .barre .enveloppe { flex-wrap: wrap; padding-top: 0.5rem; padding-bottom: 0.5rem; gap: 0.3rem 1rem; } .barre nav { margin-left: 0; width: 100%; } .barre .qui { margin-left: auto; } } .marque svg { width: 24px; height: 24px; } .marque img { height: 34px; width: auto; display: block; } .marque .espace-nom { margin-left: 0.1rem; } .marque .espace-nom { font-family: var(--texte); text-transform: none; font-weight: 500; opacity: 0.75; font-size: 0.85rem; margin-left: 0.3rem; } .barre nav { margin-left: auto; display: flex; gap: 0.2rem; flex-wrap: wrap; } .barre nav a { color: #fff; text-decoration: none; font-size: 0.88rem; padding: 0.45rem 0.7rem; border-radius: var(--rayon); opacity: 0.8; } .barre nav a:hover, .barre nav a.actif { opacity: 1; background: rgba(255,255,255,0.12); } .barre .qui { font-size: 0.82rem; opacity: 0.75; margin-left: auto; } .barre .qui + nav { margin-left: 0; } .page { padding: 1.4rem 0 4rem; } .tete { display: flex; align-items: end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.2rem; } .tete .sous { color: var(--doux); margin-top: 0.3rem; } .actions { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; } /* ── Boutons, badges ──────────────────────────────────────────────────── */ .bouton { display: inline-flex; align-items: center; gap: 0.4rem; background: var(--accent); color: #fff; text-decoration: none; font-weight: 600; padding: 0.55rem 1rem; border-radius: var(--rayon); border: 0; cursor: pointer; font: inherit; font-size: 0.9rem; } .bouton:hover { filter: brightness(0.92); } .bouton.clair { background: var(--carte); color: var(--encre); border: 1px solid var(--trait); } .bouton.noir { background: var(--noir); } .bouton.danger { background: var(--rouge); } .bouton.petit { padding: 0.35rem 0.7rem; font-size: 0.82rem; } .bouton.grand { padding: 0.9rem 1.3rem; font-size: 1.05rem; width: 100%; justify-content: center; } .badge { display: inline-block; font-family: var(--mono); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.05em; padding: 0.2rem 0.5rem; border-radius: 999px; background: var(--sable); color: var(--encre); white-space: nowrap; } .badge.vert { background: #DFF3E7; color: #146A3B; } .badge.orange { background: #FCEBD3; color: #8A4E05; } .badge.rouge { background: #F8DADA; color: #8E2222; } .badge.bleu { background: #DCE3FF; color: #0A2BC4; } .badge.gris { background: #E9E9E9; color: #555; } .badge.noir { background: var(--noir); color: #fff; } /* ── Cartes, grilles, KPI ─────────────────────────────────────────────── */ .carte { background: var(--carte); border: 1px solid var(--trait); border-radius: var(--rayon); padding: 1.1rem 1.2rem; } .carte + .carte { margin-top: 1rem; } .carte h2 { margin-bottom: 0.8rem; display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; } .carte h2 .badge { font-weight: 400; } .grille { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); align-items: start; } .grille.serree { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); } .grille.large { grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); } @media (max-width: 900px) { .grille.large { grid-template-columns: 1fr; } } .pile { display: grid; gap: 1rem; } .kpi { background: var(--carte); border: 1px solid var(--trait); border-radius: var(--rayon); padding: 0.9rem 1rem; } .kpi .valeur { font-family: var(--display); font-weight: 800; font-size: 1.9rem; line-height: 1; margin: 0.2rem 0; } .kpi .valeur.bleu { color: var(--bleu); } .kpi .valeur.vert { color: var(--vert); } .kpi .valeur.orange { color: var(--orange); } .kpi .valeur.rouge { color: var(--rouge); } .kpi .sous { font-size: 0.82rem; color: var(--doux); } .jauge { height: 8px; background: #ECEAE3; border-radius: 999px; overflow: hidden; margin: 0.35rem 0; } .jauge > span { display: block; height: 100%; background: var(--accent); border-radius: 999px; } .jauge.orange > span { background: var(--orange); } .jauge.rouge > span { background: var(--rouge); } .jauge.vert > span { background: var(--vert); } /* ── Tables et listes ─────────────────────────────────────────────────── */ .tableau { width: 100%; border-collapse: collapse; font-size: 0.9rem; } .tableau th { text-align: left; font-family: var(--mono); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--doux); padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--trait); font-weight: 500; } .tableau td { padding: 0.55rem 0.6rem; border-bottom: 1px solid #EFEDE7; vertical-align: top; } .tableau tr:last-child td { border-bottom: 0; } .tableau td.num, .tableau th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } .tableau td.mono { white-space: nowrap; } .tableau .lien { text-decoration: none; font-weight: 600; white-space: nowrap; } .tableau .lien:hover { text-decoration: underline; } .defile { overflow-x: auto; } .tableau td.pos { color: #146A3B; font-weight: 600; } .tableau td.neg { color: #8E2222; font-weight: 600; } .tableau tr.futur td { color: var(--doux); } .tableau tr.total td { font-weight: 700; border-top: 2px solid var(--trait); border-bottom: 0; } .tableau .en-ligne input[type=number] { padding: 0.3rem 0.4rem; font-size: 0.82rem; } .tableau form.en-ligne { flex-wrap: nowrap; } /* un geste par ligne, sur une ligne (constat du 19.09 sur l'écran budget) */ .liste { list-style: none; margin: 0; padding: 0; } .liste li { padding: 0.65rem 0; border-bottom: 1px solid #EFEDE7; display: flex; gap: 0.8rem; align-items: start; } .liste li:last-child { border-bottom: 0; } .liste .quoi { flex: 1; min-width: 0; } .liste .quand { color: var(--doux); font-size: 0.8rem; white-space: nowrap; } .vide { color: var(--doux); font-style: italic; padding: 0.5rem 0; } .messages { margin-bottom: 1rem; display: grid; gap: 0.5rem; } .msg { padding: 0.7rem 1rem; border-radius: var(--rayon); font-size: 0.92rem; background: var(--sable); } .msg.ok { background: #DFF3E7; color: #146A3B; } .msg.erreur { background: #F8DADA; color: #8E2222; } .erreurs { background: #F8DADA; border: 1px solid #E5A0A0; color: #8E2222; padding: 0.8rem 1rem; border-radius: var(--rayon); margin-bottom: 1rem; } .erreurs ul { margin: 0.3rem 0 0; padding-left: 1.2rem; } /* ── Formulaires ──────────────────────────────────────────────────────── */ .champs { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0.8rem 1rem; } .champ { display: flex; flex-direction: column; gap: 0.25rem; } .champ.large { grid-column: 1 / -1; } .champ label { font-size: 0.82rem; font-weight: 500; } .champ input, .champ select, .champ textarea { font: inherit; padding: 0.55rem 0.65rem; border: 1px solid #C9C5BA; border-radius: var(--rayon); background: #fff; } .champ input:focus, .champ select:focus, .champ textarea:focus { outline: 2px solid var(--accent); border-color: var(--accent); } .champ .aide { font-size: 0.78rem; color: var(--doux); } .en-ligne { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; } .en-ligne input, .en-ligne select { font: inherit; padding: 0.45rem 0.6rem; border: 1px solid #C9C5BA; border-radius: var(--rayon); background: #fff; font-size: 0.88rem; } .en-ligne input[type=number] { width: 7rem; } .case { display: flex; gap: 0.5rem; align-items: center; font-size: 0.9rem; } .case input { width: 18px; height: 18px; accent-color: var(--accent); } .note { display: inline-flex; gap: 0.2rem; } .note label { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid #C9C5BA; border-radius: var(--rayon); cursor: pointer; background: #fff; font-weight: 600; } .note input { position: absolute; opacity: 0; } .note input:checked + label { background: var(--accent); color: #fff; border-color: var(--accent); } .onglets { display: flex; gap: 0.2rem; flex-wrap: wrap; border-bottom: 1px solid var(--trait); margin-bottom: 1rem; } .onglets a { text-decoration: none; padding: 0.5rem 0.8rem; font-size: 0.9rem; color: var(--doux); border-bottom: 2px solid transparent; } .onglets a:hover { color: var(--encre); border-color: var(--trait); } .ancre { scroll-margin-top: 1rem; } /* ── Connexion ────────────────────────────────────────────────────────── */ .porte { max-width: 420px; margin: 8vh auto; } .porte .carte { padding: 1.8rem; } .porte h1 { margin-bottom: 0.3rem; } .porte .sous { color: var(--doux); margin-bottom: 1.4rem; } .porte .champs { grid-template-columns: 1fr; } .porte .demo { margin-top: 1.2rem; font-size: 0.8rem; color: var(--doux); border-top: 1px dashed var(--trait); padding-top: 0.8rem; } .porte .demo code { background: var(--sable); padding: 0.1rem 0.35rem; border-radius: 3px; } /* ── Vestiaire (mobile) ───────────────────────────────────────────────── */ .enfant-ligne { display: grid; grid-template-columns: 1fr auto; gap: 0.3rem 0.8rem; padding: 0.7rem 0; border-bottom: 1px solid #EFEDE7; align-items: center; } .enfant-ligne .nom { font-weight: 600; } .enfant-ligne .infos { grid-column: 1 / -1; display: flex; gap: 0.4rem; flex-wrap: wrap; font-size: 0.8rem; color: var(--doux); } .enfant-ligne .alerte { color: #8E2222; font-weight: 500; } .pointage { display: grid; grid-template-columns: auto 1fr auto auto; gap: 0.6rem; align-items: center; padding: 0.6rem 0; border-bottom: 1px solid #EFEDE7; } .pointage input[type=checkbox] { width: 26px; height: 26px; accent-color: var(--accent); } .pointage input[type=time] { font: inherit; padding: 0.35rem 0.4rem; border: 1px solid #C9C5BA; border-radius: var(--rayon); width: 7.2rem; } .pointage .garde { font-size: 0.75rem; display: flex; align-items: center; gap: 0.25rem; } .colle-bas { position: sticky; bottom: 0; background: var(--fond); padding: 0.8rem 0 0.4rem; } .jours { display: flex; gap: 0.3rem; flex-wrap: wrap; margin: 0.6rem 0 1rem; } .jours a { text-decoration: none; font-size: 0.82rem; padding: 0.35rem 0.6rem; border-radius: 999px; background: var(--carte); border: 1px solid var(--trait); } .jours a.actif { background: var(--noir); color: #fff; border-color: var(--noir); } .jours a.futur { opacity: 0.5; } .mot { background: #FFFBEA; border-left: 4px solid var(--orange); padding: 0.7rem 0.9rem; border-radius: var(--rayon); font-size: 0.92rem; } .mot .mono { margin-bottom: 0.2rem; } .incident { background: #F8DADA; border-left: 4px solid var(--rouge); padding: 0.6rem 0.9rem; border-radius: var(--rayon); font-size: 0.9rem; } .journal-jour { display: grid; grid-template-columns: 90px 1fr; gap: 1rem; padding: 0.9rem 0; border-bottom: 1px solid #EFEDE7; } .journal-jour .quand { font-family: var(--mono); font-size: 0.75rem; text-transform: uppercase; color: var(--doux); padding-top: 0.2rem; } .journal-jour .pointe { font-size: 0.85rem; color: var(--doux); margin-bottom: 0.4rem; } .qr { border: 1px dashed #C9C5BA; padding: 1rem; border-radius: var(--rayon); font-size: 0.9rem; background: #FAFAF7; } .qr .mono { color: var(--encre); font-size: 0.95rem; text-transform: none; letter-spacing: 0.08em; } .qr dl { display: grid; grid-template-columns: auto 1fr; gap: 0.25rem 1rem; margin: 0; } .qr dt { color: var(--doux); } .qr dd { margin: 0; } .synthese { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.6rem; } .synthese .jour { background: #FAFAF7; border: 1px solid var(--trait); border-radius: var(--rayon); padding: 0.6rem 0.7rem; font-size: 0.85rem; } .synthese .jour.manque { border-color: var(--orange); background: #FFF6E8; } .synthese .jour.futur { opacity: 0.5; } .pied { text-align: center; color: var(--doux); font-size: 0.78rem; padding: 2rem 0 0; }