/* * Comme un Loir — système de design partagé. * Extrait et adapté du plugin WordPress "Les P'tits Vikings" (2 thèmes * distincts selon l'audience) : direction = navy/or, parent = teal/orange. * [data-theme] sur pilote les variables de couleur ; les classes de * composants (.card, .btn, .badge, .notice, ...) sont partagées entre les deux. * * --accent reste orange/rouge dans les deux thèmes : c'est un signal * sémantique d'urgence ("N à traiter", absence), pas une couleur de marque — * on ne le remplace pas par l'or pour ne pas diluer sa lisibilité. * --cta porte l'identité de marque (boutons principaux, accents décoratifs) : * or #c9a84c côté direction, teal historique côté parent (non re-brandé ici). */ :root { --font: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; /* * Palette pastel partagée — statuts demande/absence/réservation/jour. * --success/--warning/--error/--info pilotent .badge-* (direction et * parent) ; --pastel-* couvre les états supplémentaires propres au * calendrier parent (prévu, fermé, disponibilité). Une seule source * pour les deux, pour rester visuellement cohérent partout. */ --success: #1E8449; /* Réservé / Validée */ --success-bg: #D5F5E3; --warning: #CA6F1E; /* Absent */ --warning-bg: #FAE5D3; --error: #C0392B; /* Liste d'attente / Refusée */ --error-bg: #FADBD8; --info: #7D3C98; /* En attente */ --info-bg: #E8DAEF; --pastel-prevu: #2471A3; --pastel-prevu-bg: #D6E4F7; --pastel-ferme: #7F8C8D; --pastel-ferme-bg: #EAECEE; --pastel-libre-bg: #EAFAF1; --pastel-libre-border: #27AE60; --pastel-validation-bg: #FEF9E7; --pastel-validation-border: #F39C12; --pastel-complet-bg: #A9DFBF; --pastel-complet-border: #196F3D; --pastel-disponible-bg: #F8F9FA; --border: #e2e8f0; --border-light: #ddd; --text: #333; --text-secondary: #666; --text-muted: #999; --radius-card: 12px; --radius-btn: 8px; --radius-pill: 16px; } [data-theme="direction"] { --primary: #0d1b3e; --primary-hover: #081226; --accent: #f57c00; --accent-bg: #fff3e0; /* --cta pilote .btn-primary : navy (identité "premium" de la nav), pas l'or de marque — l'or reste disponible via .btn-gold pour un usage ponctuel/décoratif plutôt que le bouton d'action générique. */ --cta: #0d1b3e; --cta-hover: #1a2f5e; --cta-text: #fff; --radius-btn: 6px; } [data-theme="parent"] { --primary: #005f6b; --primary-hover: #004a55; --accent: #e65100; --accent-bg: #fff3e0; --cta: #005f6b; --cta-hover: #004a55; --cta-text: #fff; --radius-btn: 8px; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: #f4f6f7; font-family: var(--font); color: var(--text); } .app-wrap { max-width: 720px; margin: 0 auto; padding: 16px; } a { color: var(--primary); } /* ── Header ────────────────────────────────────────────────────────── */ .app-header { background: var(--primary); color: #fff; border-radius: var(--radius-card); padding: 16px 20px; margin-bottom: 16px; display: flex; justify-content: space-between; align-items: center; gap: 12px; } .app-header h2 { margin: 0; font-size: 18px; } .app-header p { margin: 0; opacity: .75; font-size: 13px; } .app-header p.context-line { opacity: .55; font-size: 11px; margin-top: 2px; } .app-header .brand { display: flex; align-items: center; gap: 12px; } .brand-logo { width: 60px; height: 60px; flex-shrink: 0; display: block; object-fit: contain; } .app-header .header-badge { background: var(--accent); color: #fff; padding: 6px 14px; border-radius: 20px; font-weight: 700; font-size: 14px; white-space: nowrap; } /* ── Navigation (pilules) ─────────────────────────────────────────── */ .nav-pills { display: flex; gap: 6px; margin-bottom: 16px; flex-wrap: wrap; overflow-x: auto; padding-bottom: 4px; } .nav-pills a { padding: 7px 14px; border-radius: var(--radius-pill); border: 2px solid var(--primary); color: var(--primary); text-decoration: none; font-size: 13px; font-weight: 500; white-space: nowrap; background: #fff; } .nav-pills a.active, .nav-pills a:hover { background: var(--primary); color: #fff; } /* ── Navigation principale : pills scrollables ──────────────────────── Partagée entre direction.html et parent.html (menu du haut) — déplacée depuis direction.css, initialement conçue pour la direction seule. .dir-dropdown reste ici mais n'est utilisé que côté direction (sous-menus Événements/Structure) ; le menu parent n'a que des pills simples. ────── */ .dir-nav-wrap { position: relative; display: flex; align-items: center; margin-bottom: 16px; gap: 4px; } .dir-nav { display: flex; align-items: center; gap: 6px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; flex: 1; min-width: 0; cursor: grab; /* Pas de scroll-behavior:smooth ici : le survol des flèches pilote scrollLeft en continu via requestAnimationFrame, et le centrage au clic/chargement anime lui-même scrollLeft via rAF (animateNavScrollTo) — un smooth CSS global ferait s'accumuler/saccader ces animations pilotées en JS. */ } .dir-nav::-webkit-scrollbar { display: none; } .dir-nav.dir-nav-dragging { cursor: grabbing; } .dir-nav-pill-wrap { position: relative; flex-shrink: 0; } .dir-nav-pill { display: flex; align-items: center; gap: 6px; padding: 10px 20px; border-radius: 20px; border: 1px solid #e2e8f0; background: transparent; color: #4a5568; font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; cursor: pointer; font-family: var(--font); transition: background .2s ease, color .2s ease, border-color .2s ease, box-shadow .15s ease; } .dir-nav-pill:hover { background: #f7fafc; box-shadow: 0 2px 4px rgba(0,0,0,.08); } .dir-nav-pill.active { background: var(--primary); color: #fff; border-color: transparent; } .dir-nav-pill.active:hover { box-shadow: none; } .dir-nav-pill svg { flex-shrink: 0; width: 16px; height: 16px; } /* Pills à sous-menu (direction : Événements, Structure) : .dir-nav-pill devient un conteneur
pour deux zones cliquables distinctes — le libellé navigue directement, la flèche ouvre le dropdown. */ .dir-nav-pill:has(.dir-nav-pill-caret) { padding-right: 14px; gap: 4px; } .dir-nav-pill-label { display: flex; align-items: center; gap: 6px; color: inherit; text-decoration: none; cursor: pointer; } .dir-nav-pill-caret { display: flex; align-items: center; justify-content: center; padding: 2px 4px; border: none; background: none; color: inherit; opacity: .8; font-size: 10px; font-family: var(--font); cursor: pointer; } /* Petite pulsation au clic — classe ajoutée/retirée en JS (direction.js/parent.js). */ @keyframes dirNavPillPulse { 0% { transform: scale(.95); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } } .dir-nav-pill.pill-pulse { animation: dirNavPillPulse .2s ease; } .dir-nav-arrow { flex-shrink: 0; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border: none; border-radius: 50%; background: #fff; color: #4a5568; box-shadow: 0 2px 8px rgba(0,0,0,.15); cursor: pointer; transition: background .2s ease, color .2s ease; } .dir-nav-arrow svg { width: 18px; height: 18px; } .dir-nav-arrow:hover { background: var(--primary); color: #fff; } @media (max-width: 768px) { .dir-nav-arrow { display: none !important; } } /* ── Dropdowns de sous-navigation (direction : Événements, Structure) ──── */ .dir-dropdown { position: absolute; top: calc(100% + 8px); left: 0; min-width: 200px; background: #fff; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,.1); overflow: hidden; z-index: 40; } .dir-dropdown a, .dir-dropdown button { display: block; width: 100%; padding: 10px 16px; border: none; background: none; text-align: left; font-size: 13px; font-family: var(--font); color: #2d3748; text-decoration: none; cursor: pointer; } .dir-dropdown a:hover, .dir-dropdown button:hover { background: #f7fafc; } /* ── Navigation (onglets hauts, style direction) ─────────────────── */ .top-tabs { display: flex; align-items: center; gap: 4px; margin-bottom: 16px; flex-wrap: wrap; border-bottom: 2px solid var(--border); } .top-tabs a { display: inline-block; padding: 8px 16px; text-decoration: none; font-size: 13px; font-weight: 600; color: #555; border-radius: 6px 6px 0 0; border: 2px solid transparent; border-bottom: none; margin-bottom: -2px; transition: all .12s; } .top-tabs a:hover { color: var(--primary); background: #f0f4f6; } .top-tabs a.active { color: var(--primary); background: #fff; border-color: var(--cta) var(--border) #fff; } .top-tabs .sep { flex: 1; } /* ── Cards ─────────────────────────────────────────────────────────── */ .card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-card); padding: 20px; margin-bottom: 14px; } .card h3 { margin: 0 0 12px; font-size: 15px; color: var(--primary); display: flex; justify-content: space-between; align-items: center; } /* ── Accordéon (pur CSS, checkbox cachée) — partagé parent/direction ────── grid-template-rows 0fr → 1fr plutôt que max-height : une seule propriété animée, dont la valeur finale colle exactement à la hauteur réelle du contenu (contrairement à max-height:2000px, qui provoquait un à-coup — la transition durait le temps de parcourir 2000px même pour un contenu de 80px, décorrélant la vitesse perçue de la taille réelle). */ .accordion-check { display: none; } .accordion-header { display: block; cursor: pointer; } .accordion-header h3 { margin-bottom: 0; } .accordion-arrow { font-size: 12px; color: var(--text-secondary); transition: transform .25s ease; flex-shrink: 0; } .accordion-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .25s ease; } .accordion-body-inner { overflow: hidden; min-height: 0; padding-top: 12px; } .accordion-check:checked ~ .accordion-body { grid-template-rows: 1fr; } .accordion-check:checked ~ .accordion-header .accordion-arrow { transform: rotate(180deg); } /* ── Boutons ───────────────────────────────────────────────────────── */ .btn { display: inline-block; border: none; padding: 10px 20px; border-radius: var(--radius-btn); font-size: 14px; font-weight: 600; cursor: pointer; text-decoration: none; text-align: center; } .btn-primary { background: var(--cta); color: var(--cta-text); width: auto; } .btn-primary:hover { background: var(--cta-hover); } .btn-block { width: 100%; padding: 12px; font-size: 15px; } .btn-accepter { background: var(--success); color: #fff; } .btn-refuser { background: #fff; color: var(--error); border: 2px solid var(--error); } .btn-outline { background: #fff; color: var(--primary); border: 2px solid var(--primary); } .btn-outline:hover { background: #f7fafc; } .btn-gold { background: #c9a84c; color: #fff; } .btn-gold:hover { background: #b8963e; } .btn:disabled { opacity: .5; cursor: not-allowed; } /* ── Badges ────────────────────────────────────────────────────────── */ .badge { padding: 2px 8px; border-radius: 10px; font-size: 12px; font-weight: 600; } .badge-ok { background: var(--success-bg); color: var(--success); } .badge-warn { background: var(--warning-bg); color: var(--warning); } .badge-info { background: var(--info-bg); color: var(--info); } /* Orange = "en attente" (convention calendrier direction) — la liste d'attente est une forme d'attente au même titre que les demandes en_attente. */ .badge-liste-attente { background: var(--warning-bg); color: var(--warning); } .badge-full, .badge-error { background: var(--error-bg); color: var(--error); } /* ── Notices ───────────────────────────────────────────────────────── */ .notice { padding: 10px 14px; border-radius: 6px; margin-bottom: 12px; font-size: 14px; } .notice.success { background: var(--success-bg); color: var(--success); } .notice.error { background: var(--error-bg); color: var(--error); } .notice.info { background: #f0f4f6; color: var(--text-secondary); } /* ── Formulaires ───────────────────────────────────────────────────── */ .field { margin-bottom: 14px; } .field label { display: block; font-size: 13px; font-weight: 600; color: #444; margin-bottom: 4px; } .field input, .field select, .field textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--border-light); border-radius: var(--radius-btn); font-size: 15px; box-sizing: border-box; font-family: var(--font); } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--primary); } .field .hint { font-size: 12px; color: var(--text-muted); margin-top: 4px; } .field-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; } /* ── Stat grid ─────────────────────────────────────────────────────── */ .stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 16px; } .stat-box { background: #f0f4f6; border-radius: 8px; padding: 12px; text-align: center; } .stat-box .nb { font-size: 26px; font-weight: 700; color: var(--primary); } .stat-box .lb { font-size: 12px; color: var(--text-secondary); margin-top: 2px; } /* ── Placeholder "à venir" ─────────────────────────────────────────── */ .coming-soon { text-align: center; padding: 40px 20px; color: var(--text-muted); background: #fafbfb; border: 1px dashed var(--border-light); border-radius: var(--radius-card); } .coming-soon .ico { font-size: 32px; display: block; margin-bottom: 10px; } .coming-soon .title { font-weight: 700; color: var(--text-secondary); margin-bottom: 4px; } .coming-soon .desc { font-size: 13px; max-width: 360px; margin: 0 auto; } /* ── Modal ─────────────────────────────────────────────────────────── */ .modal-bg { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 9999; justify-content: center; align-items: center; } .modal-bg.open { display: flex; } .modal-box { background: #fff; border-radius: 16px; padding: 24px 20px; width: calc(100% - 32px); max-width: 520px; max-height: 85vh; overflow-y: auto; margin: 16px; box-shadow: 0 20px 60px rgba(0,0,0,.25); } .modal-box h3 { margin: 0 0 14px; font-size: 17px; color: var(--primary); } /* Modale de confirmation custom (remplace confirm() natif) : navy + or fixes (pas var(--primary)/var(--cta), qui divergent entre thèmes direction/parent — #005f6b côté parent — cette modale doit rendre pareil partout). */ .confirm-modal-box { max-width: 420px; text-align: center; border-top: 4px solid #0d1b3e; } .confirm-modal-box h3 { color: #0d1b3e; font-size: 18px; margin: 6px 0 14px; } .confirm-modal-box p { font-size: 15px; color: var(--text); margin: 0 0 22px; white-space: pre-line; } .confirm-modal-box .btn-outline { color: #0d1b3e; border-color: #0d1b3e; } .confirm-modal-box .btn-outline:hover { background: #eef0f5; } .modal-close { float: right; font-size: 22px; cursor: pointer; border: none; background: none; color: #888; line-height: 1; } /* ── Sélecteur de structure (login gestionnaire multi-structures, header) ── */ .structure-pick { display: block; width: 100%; text-align: left; background: #fff; border: 1px solid var(--border-light); border-radius: var(--radius-btn); padding: 12px 14px; margin-bottom: 8px; cursor: pointer; font-family: var(--font); font-size: 14px; } .structure-pick:hover { border-color: var(--primary); background: #f0f4f6; } .header-switch { background: none; border: none; color: rgba(255,255,255,.75); font-size: 11px; text-decoration: underline; cursor: pointer; padding: 0; font-family: var(--font); } .header-switch:hover { color: #fff; } /* ── Utilitaires ───────────────────────────────────────────────────── */ .muted { color: var(--text-muted); } .text-center { text-align: center; } .flex { display: flex; } .flex-between { display: flex; justify-content: space-between; align-items: center; } .gap-8 { gap: 8px; } .mt-16 { margin-top: 16px; } .mb-0 { margin-bottom: 0; } .logout-link { text-align: center; margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--border); } .logout-link a { color: var(--text-muted); font-size: 12px; text-decoration: none; } [x-cloak] { display: none !important; } /* ── Tooltips explicatifs (icône ℹ️) ─────────────────────────────────── CSS pur : :hover pour la souris, :focus pour le clic/tap (un