/* ========================================================================== Mode administration — démonstration ========================================================================== Simulation d'un back-office : rien n'est persisté, tout vit en mémoire. Un rafraîchissement de la page remet le site dans son état d'origine. Ces styles ne s'appliquent que sous . ========================================================================== */ .adminbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; background: var(--color-text); color: var(--color-bg); border-top: var(--rule) solid var(--color-accent); padding: 10px var(--gutter); display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; font-size: 13px; } .adminbar-brand { font-family: var(--font-heading); font-weight: 800; font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 8px; } .adminbar-brand::before { content: ""; width: 8px; height: 8px; background: var(--color-accent); flex: none; } .adminbar-sep { width: 1px; height: 22px; background: rgba(255,255,255,.2); } .adminbar-hint { opacity: .6; font-size: 12px; } .adminbar-right { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } .abtn { font-family: var(--font-heading); font-weight: 800; font-size: 12.5px; letter-spacing: .02em; padding: 9px 14px; cursor: pointer; background: transparent; color: var(--color-bg); border: 2px solid rgba(255,255,255,.35); transition: background .15s ease, border-color .15s ease, color .15s ease; } .abtn:hover { border-color: var(--color-bg); background: rgba(255,255,255,.1); } .abtn-primary { background: var(--color-accent); border-color: var(--color-accent); color: #fff; } .abtn-primary:hover { background: var(--color-accent-600); border-color: var(--color-accent-600); } .abtn[aria-pressed="true"] { background: var(--color-bg); color: var(--color-text); border-color: var(--color-bg); } .adminbar select { font-family: var(--font-body); font-size: 12.5px; background: transparent; color: var(--color-bg); border: 2px solid rgba(255,255,255,.35); border-radius: 0; padding: 8px 10px; } .adminbar select option { color: var(--color-text); } /* Décale le bas de page pour ne pas passer sous la barre */ body.is-admin { padding-bottom: 76px; } /* --- Cibles éditables ---------------------------------------------------- */ body.is-editing [data-edit] { outline: 1px dashed var(--color-accent); outline-offset: 3px; cursor: text; transition: outline-color .15s ease, background .15s ease; } body.is-editing [data-edit]:hover { background: var(--ac-t); } body.is-editing [data-edit]:focus { outline: 2px solid var(--color-accent); background: var(--ac-t); } /* --- Zones de dépôt d'image ---------------------------------------------- */ body.is-editing [data-image] { position: relative; cursor: copy; } body.is-editing [data-image]::after { content: "Déposer une image"; position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; text-align: center; font-family: var(--font-heading); font-weight: 800; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #fff; background: rgba(28,42,33,.55); outline: 2px dashed rgba(255,255,255,.8); outline-offset: -10px; opacity: 0; transition: opacity .15s ease; pointer-events: none; } body.is-editing [data-image]:hover::after, body.is-editing [data-image].is-over::after { opacity: 1; } body.is-editing [data-image].is-over::after { content: "Relâcher pour remplacer"; background: rgba(47,93,58,.75); } /* --- Toast --------------------------------------------------------------- */ .toast { position: fixed; right: var(--gutter); bottom: 84px; z-index: 95; background: var(--color-accent); color: #fff; border: var(--rule) solid var(--color-accent-700); padding: 14px 18px; font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 10px; transform: translateY(12px); opacity: 0; pointer-events: none; transition: opacity .18s ease, transform .18s ease; } .toast[data-show="true"] { opacity: 1; transform: translateY(0); } /* --- Panneau de configuration -------------------------------------------- */ .apanel { position: fixed; right: var(--gutter); bottom: 84px; z-index: 94; width: min(420px, calc(100vw - 2 * var(--gutter))); background: var(--color-bg); color: var(--color-text); border: var(--rule) solid var(--color-text); padding: clamp(20px, 2.5vw, 26px); display: none; } .apanel[data-open="true"] { display: block; } .apanel h3 { margin: 0 0 4px; font-size: 19px; } .apanel > p { margin: 0 0 18px; font-size: 13px; opacity: .65; } .apanel .field { margin-bottom: 14px; } .apanel-foot { display: flex; gap: 10px; align-items: center; margin-top: 18px; } .apanel-status { font-size: 12.5px; opacity: .65; } /* --- Page d'accueil de l'admin ------------------------------------------- */ .admin-home { max-width: 900px; } .admin-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--rule); background: var(--color-divider); border: var(--rule) solid var(--color-divider); margin-bottom: clamp(28px, 4vw, 44px); } .admin-tile { background: var(--color-bg); padding: clamp(20px, 2.4vw, 28px); color: var(--color-text); display: flex; flex-direction: column; gap: 8px; transition: background .15s ease; } .admin-tile:hover { background: var(--ac-t); text-decoration: none; color: var(--color-text); } .admin-tile h3 { margin: 0; font-size: 19px; } .admin-tile p { margin: 0; font-size: 13.5px; opacity: .62; } .admin-tile-go { margin-top: auto; padding-top: 12px; font-family: var(--font-heading); font-weight: 800; font-size: 12.5px; color: var(--color-accent); } .notice { border-left: 6px solid var(--color-accent); background: var(--color-surface); padding: 18px 20px; margin-bottom: clamp(24px, 3vw, 36px); } .notice strong { display: block; margin-bottom: 4px; font-size: 14.5px; } .notice p { margin: 0; font-size: 13.5px; opacity: .75; }