/* ========================================================================== AV Calendar - feuille de style commune Un seul fichier partage par le bureau et le telephone : les ecrans different par leur mise en page, pas par leur identite visuelle. ========================================================================== */ :root { --bleu: #2563eb; --bleu-fonce: #1d4ed8; --bleu-pale: #eff6ff; --fond: #f4f6fb; --surface: #ffffff; --surface-2: #f9fafb; --bordure: #e2e8f0; --bordure-forte: #cbd5e1; --texte: #0f172a; --texte-doux: #475569; --texte-tres-doux: #94a3b8; --succes: #16a34a; --alerte: #d97706; --danger: #dc2626; --danger-fond: #fef2f2; --rayon: 10px; --rayon-lg: 14px; --ombre: 0 1px 2px rgba(15, 23, 42, .06), 0 4px 12px rgba(15, 23, 42, .05); --ombre-forte: 0 10px 40px rgba(15, 23, 42, .18); --entete-h: 58px; --police: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } /* Theme sombre : applique par l'onglet Parametres via data-theme sur , ou suivi automatiquement du systeme quand la preference est « auto ». */ :root[data-theme="sombre"], :root[data-theme="auto"] { color-scheme: light; } @media (prefers-color-scheme: dark) { :root[data-theme="auto"] { color-scheme: dark; } } :root[data-theme="sombre"], :root[data-theme="auto"]:not([data-resolved="clair"]) { --fond: #0b1120; --surface: #131c2f; --surface-2: #1b2539; --bordure: #243044; --bordure-forte: #33415c; --texte: #e8edf6; --texte-doux: #a5b3ca; --texte-tres-doux: #6b7c99; --bleu-pale: #17233d; --danger-fond: #2a1518; --ombre: 0 1px 2px rgba(0, 0, 0, .4), 0 4px 12px rgba(0, 0, 0, .3); --ombre-forte: 0 10px 40px rgba(0, 0, 0, .6); color-scheme: dark; } * { box-sizing: border-box; } /* L'attribut hidden doit l'emporter sur les display: flex/grid des composants, sinon un bouton masque reste visible. */ [hidden] { display: none !important; } html, body { margin: 0; padding: 0; font-family: var(--police); background: var(--fond); color: var(--texte); /* Empeche iOS d'agrandir le texte de son propre chef en mode paysage. */ -webkit-text-size-adjust: 100%; /* Supprime le delai de 300 ms et le zoom au double-tap sur iOS. */ touch-action: manipulation; } body { font-size: 15px; line-height: 1.5; } a { color: var(--bleu); text-decoration: none; } a:hover { text-decoration: underline; } h1, h2, h3 { margin: 0 0 .5rem; line-height: 1.25; font-weight: 650; } h1 { font-size: 1.4rem; } h2 { font-size: 1.15rem; } h3 { font-size: 1rem; } /* -------------------------------------------------------------------------- Barre de navigation -------------------------------------------------------------------------- */ .entete { height: var(--entete-h); background: var(--surface); border-bottom: 1px solid var(--bordure); display: flex; align-items: center; gap: 1.25rem; padding: 0 1.25rem; position: sticky; top: 0; z-index: 50; } .marque { display: flex; align-items: center; gap: .6rem; font-weight: 700; font-size: 1.02rem; color: var(--texte); white-space: nowrap; } .marque:hover { text-decoration: none; } .marque .pastille { width: 28px; height: 28px; border-radius: 8px; background: linear-gradient(135deg, var(--bleu), #7c3aed); display: grid; place-items: center; color: #fff; font-size: 14px; font-weight: 700; } .nav { display: flex; gap: .25rem; margin-left: .5rem; /* La navigation est le seul element compressible de l'en-tete : elle defile plutot que de repousser le bouton de deconnexion hors de l'ecran. Sans min-width: 0, un conteneur flex refuse de retrecir sous la largeur de son contenu. */ min-width: 0; overflow-x: auto; scrollbar-width: none; } .nav::-webkit-scrollbar { display: none; } .nav a { padding: .45rem .8rem; border-radius: var(--rayon); color: var(--texte-doux); font-weight: 550; font-size: .92rem; white-space: nowrap; flex: 0 0 auto; } .nav a:hover { background: var(--surface-2); color: var(--texte); text-decoration: none; } .nav a.actif { background: var(--bleu-pale); color: var(--bleu-fonce); } .marque { flex-shrink: 0; } .entete-fin { margin-left: auto; display: flex; align-items: center; gap: .75rem; flex-shrink: 0; } /* Le nom en toutes lettres est un confort : sous cette largeur l'avatar colore suffit a identifier la session, et la place gagnee profite a la navigation. */ @media (max-width: 980px) { .entete .identite { display: none; } } .identite { text-align: right; line-height: 1.25; } .identite .nom { font-weight: 600; font-size: .88rem; } .identite .role { font-size: .75rem; color: var(--texte-tres-doux); text-transform: capitalize; } .avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: .8rem; flex-shrink: 0; } /* -------------------------------------------------------------------------- Boutons et champs -------------------------------------------------------------------------- */ .bouton { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; padding: .5rem .9rem; border: 1px solid var(--bordure-forte); border-radius: var(--rayon); background: var(--surface); color: var(--texte); font: inherit; font-size: .9rem; font-weight: 550; cursor: pointer; white-space: nowrap; transition: background .12s, border-color .12s, opacity .12s; } .bouton:hover:not(:disabled) { background: var(--surface-2); border-color: var(--texte-tres-doux); } .bouton:disabled { opacity: .5; cursor: not-allowed; } .bouton:focus-visible { outline: 2px solid var(--bleu); outline-offset: 2px; } .bouton.principal { background: var(--bleu); border-color: var(--bleu); color: #fff; } .bouton.principal:hover:not(:disabled) { background: var(--bleu-fonce); border-color: var(--bleu-fonce); } .bouton.danger { background: var(--danger); border-color: var(--danger); color: #fff; } .bouton.danger:hover:not(:disabled) { opacity: .88; background: var(--danger); } .bouton.discret { border-color: transparent; background: transparent; color: var(--texte-doux); } .bouton.discret:hover:not(:disabled) { background: var(--surface-2); } .bouton.petit { padding: .3rem .6rem; font-size: .82rem; } .bouton.large { padding: .8rem 1.1rem; font-size: 1rem; width: 100%; } label { display: block; font-size: .82rem; font-weight: 600; color: var(--texte-doux); margin-bottom: .3rem; } input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="date"], input[type="time"], input[type="datetime-local"], input[type="search"], input[type="number"], select, textarea { width: 100%; padding: .55rem .7rem; border: 1px solid var(--bordure-forte); border-radius: var(--rayon); background: var(--surface); color: var(--texte); font: inherit; font-size: .92rem; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--bleu); box-shadow: 0 0 0 3px rgba(37, 99, 235, .15); } textarea { resize: vertical; min-height: 76px; } input[type="color"] { width: 46px; height: 36px; padding: 2px; border-radius: 8px; border: 1px solid var(--bordure-forte); background: var(--surface); cursor: pointer; } /* Safari sur iOS zoome automatiquement sur un champ dont le texte fait moins de 16 px, et ne dezoome jamais ensuite : la page reste decalee. Sur les appareils tactiles, on porte donc tous les champs a 16 px. */ @media (pointer: coarse) { input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="date"], input[type="time"], input[type="datetime-local"], input[type="search"], input[type="number"], select, textarea { font-size: 16px; } } .champ { margin-bottom: .9rem; } .champs-2 { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; } .champs-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: .9rem; } .case { display: flex; align-items: center; gap: .55rem; margin-bottom: .55rem; } .case input[type="checkbox"], .case input[type="radio"] { width: 16px; height: 16px; margin: 0; accent-color: var(--bleu); flex-shrink: 0; } .case label { margin: 0; font-weight: 500; color: var(--texte); font-size: .92rem; cursor: pointer; } .aide { font-size: .78rem; color: var(--texte-tres-doux); margin-top: .3rem; } /* -------------------------------------------------------------------------- Cartes, tableaux, etiquettes -------------------------------------------------------------------------- */ .carte { background: var(--surface); border: 1px solid var(--bordure); border-radius: var(--rayon-lg); box-shadow: var(--ombre); padding: 1.1rem 1.25rem; margin-bottom: 1rem; } .carte-titre { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: -.15rem 0 .9rem; padding-bottom: .75rem; border-bottom: 1px solid var(--bordure); } .carte-titre h2 { margin: 0; } table { width: 100%; border-collapse: collapse; font-size: .9rem; } th { text-align: left; font-weight: 650; font-size: .76rem; text-transform: uppercase; letter-spacing: .04em; color: var(--texte-tres-doux); padding: .5rem .6rem; border-bottom: 1px solid var(--bordure); white-space: nowrap; } td { padding: .6rem; border-bottom: 1px solid var(--bordure); vertical-align: middle; } tbody tr:hover { background: var(--surface-2); } tbody tr:last-child td { border-bottom: none; } /* Conteneur d'un tableau a plusieurs colonnes. Le defilement se fait dans le tableau lui-meme, a n'importe quelle largeur d'ecran, plutot que de faire deborder toute la page. */ .tableau-large { overflow-x: auto; } .etiquette { display: inline-flex; align-items: center; gap: .3rem; padding: .15rem .5rem; border-radius: 999px; font-size: .74rem; font-weight: 650; background: var(--surface-2); color: var(--texte-doux); border: 1px solid var(--bordure); white-space: nowrap; } .etiquette.planifie { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; } .etiquette.confirme { background: #f5f3ff; color: #6d28d9; border-color: #ddd6fe; } .etiquette.en_cours { background: #fffbeb; color: #b45309; border-color: #fde68a; } .etiquette.termine { background: #f0fdf4; color: #15803d; border-color: #bbf7d0; } .etiquette.annule { background: #fef2f2; color: #b91c1c; border-color: #fecaca; } .puce-couleur { width: 10px; height: 10px; border-radius: 3px; display: inline-block; flex-shrink: 0; } /* -------------------------------------------------------------------------- Messages -------------------------------------------------------------------------- */ .message { padding: .7rem .9rem; border-radius: var(--rayon); font-size: .88rem; margin-bottom: .9rem; border: 1px solid; } .message.erreur { background: var(--danger-fond); color: var(--danger); border-color: currentColor; } .message.succes { background: #f0fdf4; color: #15803d; border-color: #bbf7d0; } .message.info { background: var(--bleu-pale); color: var(--bleu-fonce); border-color: #bfdbfe; } .message.attention { background: #fffbeb; color: #b45309; border-color: #fde68a; } .message:empty { display: none; } .vide { text-align: center; padding: 2.5rem 1rem; color: var(--texte-tres-doux); } .vide .icone { font-size: 2rem; display: block; margin-bottom: .5rem; opacity: .6; } /* Bandeau de notification transitoire */ #rotule { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 100px); background: #0f172a; color: #fff; padding: .7rem 1.1rem; border-radius: 999px; font-size: .88rem; font-weight: 550; box-shadow: var(--ombre-forte); z-index: 300; opacity: 0; transition: transform .22s ease, opacity .22s ease; max-width: calc(100vw - 32px); } #rotule.visible { transform: translate(-50%, 0); opacity: 1; } #rotule.erreur { background: var(--danger); } #rotule.succes { background: var(--succes); } /* -------------------------------------------------------------------------- Fenetres modales -------------------------------------------------------------------------- */ .voile { position: fixed; inset: 0; background: rgba(15, 23, 42, .5); display: none; align-items: center; justify-content: center; padding: 1.25rem; z-index: 200; overflow-y: auto; } .voile.ouvert { display: flex; } .modale { background: var(--surface); border-radius: var(--rayon-lg); box-shadow: var(--ombre-forte); width: 100%; max-width: 620px; max-height: calc(100vh - 2.5rem); display: flex; flex-direction: column; margin: auto; } .modale.etroite { max-width: 440px; } .modale.large { max-width: 880px; } .modale-entete { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--bordure); } .modale-entete h2 { margin: 0; font-size: 1.08rem; } .modale-corps { padding: 1.25rem; overflow-y: auto; flex: 1; min-height: 0; } /* La plupart des fenetres enveloppent leur corps et leur pied dans un
. Sans ces regles, le formulaire s'interpose entre la carte et sa zone defilante : le contenu deborde de la carte, qui s'arrete net au milieu du texte, et le bas de la fenetre flotte sur le fond sombre. Le formulaire devient donc lui-meme une colonne souple, et c'est le corps qui defile a l'interieur de la carte, en-tete et boutons toujours visibles. */ .modale > form { display: flex; flex-direction: column; flex: 1; min-height: 0; } .modale-pied { display: flex; justify-content: flex-end; gap: .6rem; padding: .9rem 1.25rem; border-top: 1px solid var(--bordure); background: var(--surface-2); border-radius: 0 0 var(--rayon-lg) var(--rayon-lg); flex-wrap: wrap; } .fermer { border: none; background: transparent; cursor: pointer; font-size: 1.4rem; line-height: 1; color: var(--texte-tres-doux); padding: .2rem .4rem; border-radius: 6px; } .fermer:hover { background: var(--surface-2); color: var(--texte); } /* -------------------------------------------------------------------------- Selection multiple de techniciens -------------------------------------------------------------------------- */ .liste-personnes { border: 1px solid var(--bordure-forte); border-radius: var(--rayon); max-height: 280px; overflow-y: auto; background: var(--surface); } .personne { display: flex; align-items: center; gap: .6rem; padding: .45rem .7rem; cursor: pointer; border-bottom: 1px solid var(--bordure); } .personne:last-child { border-bottom: none; } .personne:hover { background: var(--surface-2); } .personne input { width: 16px; height: 16px; margin: 0; accent-color: var(--bleu); flex-shrink: 0; } .personne .nom { flex: 1; font-size: .9rem; } .personne.equipe { background: var(--surface-2); } .personne.equipe:hover { background: var(--bleu-pale); } /* Intertitre dans une liste de selection (Equipes / Techniciens) */ .intertitre-liste { padding: .35rem .7rem; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--texte-tres-doux); background: var(--surface); border-bottom: 1px solid var(--bordure); position: sticky; top: 0; z-index: 1; } .personne .meta { font-size: .76rem; color: var(--texte-tres-doux); } /* -------------------------------------------------------------------------- Pieces jointes -------------------------------------------------------------------------- */ .grille-fichiers { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: .75rem; } .fichier { border: 1px solid var(--bordure); border-radius: var(--rayon); overflow: hidden; background: var(--surface); display: flex; flex-direction: column; transition: border-color .12s, box-shadow .12s; } .fichier:hover { border-color: var(--bleu); box-shadow: var(--ombre); } .fichier .apercu { height: 100px; background: var(--surface-2); display: grid; place-items: center; font-size: 1.7rem; overflow: hidden; } .fichier .apercu img { width: 100%; height: 100%; object-fit: cover; display: block; } .fichier .nom { padding: .45rem .55rem; font-size: .76rem; line-height: 1.3; word-break: break-word; flex: 1; } .fichier .pied { display: flex; align-items: center; justify-content: space-between; padding: .3rem .45rem; border-top: 1px solid var(--bordure); font-size: .68rem; color: var(--texte-tres-doux); } .zone-depot { border: 2px dashed var(--bordure-forte); border-radius: var(--rayon); padding: 1.5rem 1rem; text-align: center; color: var(--texte-doux); cursor: pointer; transition: border-color .12s, background .12s; } .zone-depot:hover, .zone-depot.survol { border-color: var(--bleu); background: var(--bleu-pale); } /* -------------------------------------------------------------------------- Utilitaires -------------------------------------------------------------------------- */ .rangee { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; } .espace { flex: 1; } .doux { color: var(--texte-doux); } .tres-doux { color: var(--texte-tres-doux); font-size: .82rem; } .mono { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; } .centre { text-align: center; } .cache { display: none !important; } .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .chargement { display: grid; place-items: center; padding: 2.5rem; color: var(--texte-tres-doux); } .tourniquet { width: 26px; height: 26px; border: 3px solid var(--bordure); border-top-color: var(--bleu); border-radius: 50%; animation: tourner .7s linear infinite; } @keyframes tourner { to { transform: rotate(360deg); } } .page { max-width: 1400px; margin: 0 auto; padding: 1.25rem; } /* -------------------------------------------------------------------------- Ecrans etroits : l'en-tete passe sur deux rangees Un technicien qui ouvre la plateforme web depuis son telephone doit pouvoir atteindre l'onglet Parametres et le bouton de deconnexion, que la disposition sur une seule ligne repoussait hors de l'ecran. -------------------------------------------------------------------------- */ @media (max-width: 720px) { .entete { height: auto; flex-wrap: wrap; row-gap: .5rem; gap: .6rem; padding: .6rem .9rem; } .entete .marque { font-size: .95rem; } .entete-fin { margin-left: auto; } /* Sur une seule ligne il ne resterait quasiment rien pour la navigation : elle passe donc sur sa propre rangee, toujours defilante. */ .nav { order: 3; width: 100%; margin-left: 0; } .page { padding: .9rem; } .carte { padding: .95rem 1rem; } .champs-2, .champs-3 { grid-template-columns: 1fr; } .modale-pied { flex-direction: column-reverse; } .modale-pied .bouton { width: 100%; } .modale-pied .espace { display: none; } }