/* ========================================================= charte.css — Charte graphique commune de l'Appli Enseignant Thème clair, sobre et chaleureux (outil professionnel pour instituteur). Inspiré du design "semainier directrice" (violet clair) que Bryan apprécie. Police Segoe UI. Chaque page peut définir une teinte d'accent via une classe sur : theme-violet (défaut), theme-blue, theme-green, theme-orange, theme-cyan, theme-pink. ========================================================= */ :root{ /* Fonds */ --c-bg: #f3f4f6; /* fond de page */ --c-bg-soft: #eef2f7; /* variante */ --c-surface: #ffffff; /* cartes / panneaux */ --c-surface-2: #f8fafc; /* zones internes */ /* Texte */ --c-ink: #1f2937; /* texte principal */ --c-ink-soft: #4b5563; /* secondaire */ --c-ink-mute: #6b7280; /* discret */ --c-line: #e5e7eb; /* bordures */ --c-line-2: #d1d5db; /* bordures marquées */ /* Accent principal (violet — défaut) */ --c-accent: #7c3aed; --c-accent-deep: #4c1d95; --c-accent-soft: #f5f3ff; --c-accent-line: #ddd6fe; --c-accent-mid: #6d28d9; /* Statuts */ --c-ok: #047857; --c-ok-bg: #ecfdf5; --c-ok-line: #a7f3d0; --c-warn: #b45309; --c-warn-bg: #fffbeb; --c-warn-line:#fde68a; --c-err: #b91c1c; --c-err-bg: #fef2f2; --c-err-line: #fecaca; --c-info: #1d4ed8; --c-info-bg: #eff6ff; --c-info-line:#bfdbfe; --radius: 14px; --radius-sm: 10px; --radius-xs: 8px; --shadow: 0 1px 6px rgba(15,23,42,.08); --shadow-md: 0 6px 22px rgba(15,23,42,.10); --shadow-lg: 0 14px 40px rgba(76,29,149,.14); --font: 'Segoe UI', system-ui, -apple-system, Roboto, 'Helvetica Neue', Arial, sans-serif; } /* ---- Déclinaisons d'accent par page ---- */ body.theme-blue { --c-accent:#1d4ed8; --c-accent-deep:#1e3a8a; --c-accent-soft:#eff6ff; --c-accent-line:#bfdbfe; --c-accent-mid:#2563eb; } body.theme-green { --c-accent:#047857; --c-accent-deep:#065f46; --c-accent-soft:#ecfdf5; --c-accent-line:#a7f3d0; --c-accent-mid:#059669; } body.theme-orange { --c-accent:#c2410c; --c-accent-deep:#7c2d12; --c-accent-soft:#fff7ed; --c-accent-line:#fed7aa; --c-accent-mid:#ea580c; } body.theme-cyan { --c-accent:#0369a1; --c-accent-deep:#075985; --c-accent-soft:#f0f9ff; --c-accent-line:#bae6fd; --c-accent-mid:#0284c7; } body.theme-pink { --c-accent:#be185d; --c-accent-deep:#9d174d; --c-accent-soft:#fdf2f8; --c-accent-line:#fbcfe8; --c-accent-mid:#db2777; } *{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; } html,body{ margin:0; padding:0; } body.charte{ font-family:var(--font); color:var(--c-ink); background:var(--c-bg); line-height:1.55; } /* ---- Barre supérieure ---- */ .ch-topbar{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:12px 20px; background:var(--c-surface); border-bottom:1px solid var(--c-line); position:sticky; top:0; z-index:30; } .ch-topbar h1{ font-size:1.2rem; margin:0; font-weight:700; color:var(--c-accent-deep); flex:1; min-width:0; } .ch-back{ display:inline-flex; align-items:center; gap:8px; text-decoration:none; color:var(--c-accent-mid); background:var(--c-accent-soft); border:1px solid var(--c-accent-line); padding:8px 14px; border-radius:var(--radius-sm); font-weight:600; font-size:.92rem; } .ch-back:hover{ filter:brightness(.97); } /* ---- Boutons ---- */ .ch-btn{ cursor:pointer; border:1px solid var(--c-accent-line); background:var(--c-accent-soft); color:var(--c-accent-mid); padding:8px 14px; border-radius:var(--radius-sm); font-weight:600; font-size:.85rem; font-family:inherit; transition:.15s; display:inline-flex; align-items:center; gap:6px; white-space:nowrap; } .ch-btn:hover{ filter:brightness(.97); } .ch-btn.on,.ch-btn.solid{ background:var(--c-accent); color:#fff; border-color:var(--c-accent); } .ch-btn.solid:hover{ background:var(--c-accent-mid); } .ch-btn.ghost{ background:transparent; border-color:var(--c-line-2); color:var(--c-ink-soft); } .ch-btn.ok{ background:var(--c-ok-bg); color:var(--c-ok); border-color:var(--c-ok-line); } .ch-btn.warn{ background:var(--c-warn-bg); color:var(--c-warn); border-color:var(--c-warn-line); } .ch-btn.danger{ background:var(--c-err-bg); color:var(--c-err); border-color:var(--c-err-line); } .ch-btn:disabled{ opacity:.5; cursor:not-allowed; } select.ch-btn{ appearance:auto; } /* ---- Conteneur ---- */ .ch-wrap{ max-width:1180px; margin:0 auto; padding:0 16px; } .ch-wrap.narrow{ max-width:920px; } /* ---- Cartes ---- */ .ch-card{ background:var(--c-surface); border:1px solid var(--c-line); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow); } .ch-card.pad-lg{ padding:24px; } /* ---- Grille de modules (accueil, sous-index) ---- */ .ch-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(250px,1fr)); gap:16px; } .ch-tile{ display:flex; flex-direction:column; gap:8px; text-decoration:none; background:var(--c-surface); border:1px solid var(--c-line); border-top:4px solid var(--c-accent); border-radius:var(--radius); padding:18px 18px 16px; color:var(--c-ink); box-shadow:var(--shadow); transition:transform .15s, box-shadow .15s, border-color .15s; position:relative; } .ch-tile:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); } .ch-tile .ch-tile-ic{ font-size:2rem; line-height:1; } .ch-tile .ch-tile-t{ font-size:1.06rem; font-weight:700; color:var(--c-accent-deep); } .ch-tile .ch-tile-d{ font-size:.84rem; color:var(--c-ink-soft); flex:1; } .ch-tile .ch-tile-go{ align-self:flex-start; margin-top:4px; font-size:.8rem; font-weight:600; color:var(--c-accent-mid); background:var(--c-accent-soft); border:1px solid var(--c-accent-line); padding:5px 11px; border-radius:999px; } /* teintes de tuile (override de la bande du haut + titre) */ .ch-tile.t-violet{ border-top-color:#7c3aed; } .ch-tile.t-violet .ch-tile-t{ color:#5b21b6; } .ch-tile.t-blue { border-top-color:#2563eb; } .ch-tile.t-blue .ch-tile-t{ color:#1e40af; } .ch-tile.t-green { border-top-color:#059669; } .ch-tile.t-green .ch-tile-t{ color:#047857; } .ch-tile.t-orange{ border-top-color:#ea580c; } .ch-tile.t-orange .ch-tile-t{ color:#c2410c; } .ch-tile.t-cyan { border-top-color:#0284c7; } .ch-tile.t-cyan .ch-tile-t{ color:#075985; } .ch-tile.t-pink { border-top-color:#db2777; } .ch-tile.t-pink .ch-tile-t{ color:#be185d; } /* ---- Badges ---- */ .ch-badge{ display:inline-block; padding:.2rem .6rem; border-radius:999px; font-size:.72rem; font-weight:700; } .ch-badge.ok{ background:var(--c-ok-bg); color:var(--c-ok); border:1px solid var(--c-ok-line); } .ch-badge.soon{ background:var(--c-warn-bg); color:var(--c-warn); border:1px solid var(--c-warn-line); } .ch-badge.info{ background:var(--c-info-bg); color:var(--c-info); border:1px solid var(--c-info-line); } /* ---- Titres de section ---- */ .ch-h2{ font-size:1.05rem; font-weight:700; color:var(--c-accent-deep); margin:22px 0 10px; } .ch-sub{ color:var(--c-ink-mute); font-size:.85rem; } /* ---- Bandeau ruban (titre de tableau type semainier) ---- */ .ch-ribbon{ text-align:center; background:var(--c-accent); color:#fff; margin:0 0 6px; padding:8px; border-radius:var(--radius-xs); font-size:1rem; font-weight:700; } /* ---- Champs ---- */ .ch-input,.ch-select,.ch-textarea{ width:100%; border:1px solid var(--c-line-2); border-radius:var(--radius-xs); padding:9px 11px; font-family:inherit; font-size:.95rem; background:var(--c-surface); color:var(--c-ink); } .ch-input:focus,.ch-select:focus,.ch-textarea:focus{ outline:none; border-color:var(--c-accent); box-shadow:0 0 0 3px var(--c-accent-soft); } .ch-textarea{ min-height:72px; resize:vertical; } .ch-label{ display:block; font-size:.78rem; color:var(--c-ink-mute); margin:10px 0 4px; font-weight:600; } /* ---- Modale ---- */ .ch-overlay{ position:fixed; inset:0; background:rgba(15,23,42,.45); display:none; align-items:center; justify-content:center; z-index:60; padding:16px; } .ch-overlay.show{ display:flex; } .ch-modal{ background:var(--c-surface); border-radius:var(--radius); padding:20px; width:min(460px,94vw); max-height:88vh; overflow:auto; box-shadow:var(--shadow-lg); } .ch-modal h3{ margin:0 0 12px; color:var(--c-accent-deep); } .ch-modal-actions{ display:flex; gap:8px; justify-content:flex-end; margin-top:16px; } /* ---- Pied de page discret ---- */ .ch-foot{ max-width:1180px; margin:22px auto 30px; padding:0 16px; color:var(--c-ink-mute); font-size:.78rem; text-align:center; } /* ---- Note / encart informatif ---- */ .ch-note{ background:var(--c-accent-soft); border:1px solid var(--c-accent-line); border-radius:var(--radius-sm); padding:12px 14px; font-size:.86rem; color:var(--c-ink-soft); } .ch-note.info{ background:var(--c-info-bg); border-color:var(--c-info-line); } .ch-note.warn{ background:var(--c-warn-bg); border-color:var(--c-warn-line); } /* ---- Responsive ---- */ @media (max-width:560px){ .ch-topbar{ padding:10px 12px; gap:8px; } .ch-topbar h1{ font-size:1.02rem; } .ch-wrap{ padding:0 10px; } .ch-grid{ grid-template-columns:1fr; } .ch-card{ padding:14px; } } /* ---- Impression ---- */ @media print{ .ch-topbar,.ch-foot,.ch-btn,.no-print{ display:none !important; } body.charte{ background:#fff; } }