/* ====== Variables & reset global (anti-scroll horizontal) ====== */ :root{ --sidebar-w: 250px; --header-h: 80px; } html, body { margin: 0; padding: 0; overflow-x: hidden; } * { box-sizing: border-box; } /* --- Login page --- */ body { background: #f7f7f9; min-height: 100vh; } .login-container { max-width: 500px; margin: 8vh auto; background: #fff; border-radius: 16px; box-shadow: 0 0 24px #0001; padding: 32px 24px; } .login-container .brand img { max-height: 130px; } /* ====== Header ====== */ .app-header { position: sticky; /* peut devenir fixed si besoin */ top: 0; height: var(--header-h); margin-left: var(--sidebar-w); width: calc(100% - var(--sidebar-w)); background: #fff; border-bottom: 1px solid rgba(0,0,0,.075); backdrop-filter: saturate(140%) blur(2px); z-index: 1010; } .app-header .dropdown-menu { min-width: 220px; } /* Avatar icône (header) */ .avatar-32 { width: 32px; height: 32px; } /* ====== Sidebar ====== */ .gf-sidebar { position: fixed; top: 0; left: 0; width: var(--sidebar-w); height: 100vh; background: #212529; color: #dee2e6; display: flex; flex-direction: column; z-index: 1020; overflow-y: auto; } .gf-sidebar-brand { color: #f8f9fa; } .gf-sidebar-nav { overflow-y: auto; } .gf-sidebar .nav-link { color: #e9ecef; border-radius: .5rem; padding: .6rem .75rem; } .gf-sidebar .nav-link:hover { background: rgba(255,255,255,.06); color:#fff; } .gf-sidebar .nav-link.active { background: #0d6efd; color: #fff; box-shadow: 0 0 0 1px rgba(255,255,255,.1) inset; } .gf-sidebar .nav-link .mdi { font-size: 1.1rem; line-height: 1; } /* ====== Contenu principal ====== */ .main-content{ margin-left: var(--sidebar-w); width: calc(100% - var(--sidebar-w)); padding: 24px; min-height: calc(100dvh - var(--header-h)); } /* ====== Mobile (sidebar masquée) ====== */ @media (max-width: 991.98px){ .gf-sidebar { transform: translateX(-100%); transition: transform .2s ease; } .gf-sidebar.open { transform: translateX(0); } .app-header{ margin-left: 0; width: 100%; } .main-content{ margin-left: 0; width: 100%; } } /* ====== Helper legacy (déprécié) ====== Si une page utilise encore .has-sidebar sur , on neutralise pour éviter tout double décalage. */ .has-sidebar { margin-left: 0 !important; } /* Formulaires > modal champ */ #choicesWrap .input-group-text{ min-width: 40px; justify-content:center; } #choicesWrap .btn-remove-choice{ border-top-left-radius:0; border-bottom-left-radius:0; } /* ====== Réponses (offcanvas) ====== */ .answers-meta .badge { font-weight: 500; } .answers-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: .75rem; } .answer-item { border: 1px solid #e5e7eb; border-radius: 10px; padding: .75rem .9rem; background: #fff; } .answer-label { font-weight: 600; font-size: .95rem; margin-bottom: .35rem; } .answer-value { font-size: .95rem; line-height: 1.4; } .answer-value .answers-text { white-space: pre-wrap; word-break: break-word; } .answers-rating .mdi { vertical-align: middle; } /* badges « soft » déjà utilisés ailleurs */ .badge-soft { background:#f6f7f9; color:#6c757d; border:1px solid #e5e7eb; } /* Grille PJ (reuse du pattern existant) */ .file-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); gap: .75rem; } .file-tile { border:1px solid #e5e7eb; border-radius:10px; padding:.75rem; background:#fff; } /* CTA de clôture – Projets (optionnel) */ .close-project-cta { margin-top: 1.25rem; } .close-project-cta .btn { min-width: 340px; font-weight: 600; padding: .9rem 1.25rem; border-radius: .75rem; } .close-project-cta .mdi { vertical-align: text-bottom; } /* ---- Projets > Clôture de projet ---- */ .close-project-cta .btn.btn-lg { min-width: 260px; border-radius: 999px; } #finalLinkBox .input-group { max-width: 720px; margin: 0 auto; } #finalLinkBox .btn { min-width: 120px; } /* Avis — badges + colonnes modale */ .badge-note{ font-size:1rem; min-width:2.2rem; } .step-col{ border-right:1px solid #eee; min-width:230px; max-width:340px; } .step-col:last-child{ border-right:0; } .step-col.vide{ background:#f7f7f7; color:#bbb; border-radius:10px; font-style:italic; } @media (max-width:900px){ .modal-steps{ flex-direction:column; } .step-col{ border-right:0; border-bottom:1px solid #eee; } .step-col:last-child{ border-bottom:0; } } /* ===== avis.php - Modal detail styling ===== */ /* Petites pastilles de note (déjà utilisées ailleurs) */ .badge-note { font-size: 1rem; min-width: 2.2rem; } /* Grille responsive auto-fit (1..N colonnes selon l'espace) → Résout le souci d'alignement bancal quand il n'y a que 2 étapes */ .steps-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .9rem; margin-bottom: 1.25rem; } /* Carte d'étape */ .step-card { border: 1px solid var(--bs-border-color, #e9ecef); border-radius: .75rem; background: #fff; padding: .9rem .95rem; display: flex; flex-direction: column; min-height: 160px; } .step-title { font-weight: 600; margin-bottom: .35rem; text-align: center; } .step-note { display: flex; align-items: center; justify-content: center; margin-bottom: .5rem; } .step-comment { font-size: .95rem; color: #444; min-height: 52px; } .step-comment em { color: #6c757d; } /* Bloc global centré (note + avis) */ .global-wrap { display: grid; grid-template-columns: 1fr; gap: 1rem; justify-items: center; } @media (min-width: 900px) { .global-wrap { grid-template-columns: 320px minmax(260px, 1fr); align-items: center; } } /* Cercle de note globale (conic-gradient) */ .note-circle { --p: 0%; --ok: #198754; --warn: #ffc107; --bad: #dc3545; width: 160px; height: 160px; border-radius: 999px; background: conic-gradient(var(--ring, var(--ok)) var(--p), rgba(0,0,0,0.08) 0); display: grid; place-items: center; position: relative; box-shadow: inset 0 0 0 10px #fff, 0 1px 8px rgba(0,0,0,.06); } .note-circle::after{ content:''; position:absolute; inset: 12px; border-radius:999px; } .note-circle > span{ position: relative; font-weight: 700; font-size: 2.4rem; } .note-circle.success { --ring: var(--ok); } .note-circle.warning { --ring: var(--warn); } .note-circle.danger { --ring: var(--bad); } .global-note { display: grid; justify-items: center; gap: .5rem; } .note-legend { font-size: .9rem; color: #6c757d; } /* Carte avis texte */ .global-avis { width: 100%; max-width: 820px; border: 1px solid var(--bs-border-color, #e9ecef); border-radius: .75rem; } .global-avis .card-body { padding: .9rem 1rem; } /* ===== Embed (iframe) generator ===== */ .embed-code-wrap { position: relative; } .embed-code { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; background: #0f172a0d; border-radius: .5rem; resize: none; } .copy-btn { position: absolute; right: .5rem; top: .5rem; } /* Bloc lien de connexion : URL tronquée + boutons à droite */ .login-block{ display:flex; align-items:center; justify-content:space-between; gap:.75rem; margin-top:1rem; padding-top:.5rem; border-top:1px solid var(--bs-border-color, #e9ecef); } /* La zone texte doit pouvoir rétrécir : min-width:0 pour que text-overflow fonctionne en flex */ .login-chip{ flex:1 1 auto; min-width:0; /* indispensable */ display:flex; align-items:center; gap:.5rem; color:#6c757d; font-size:.8125rem; } /* L’URL en ellipsis */ .login-url{ display:block; max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } /* Actions (boutons) non compressés */ .login-actions{ flex:0 0 auto; display:flex; align-items:center; gap:.5rem; position:relative; } /* Bouton “ghost” discret (style Hyper-like) */ .btn-ghost{ background:#f7f8fa; border:1px solid #e9ecef; } /* Feedback “Copié” */ .copy-feedback{ position:absolute; top:-6px; right:0; transform:translateY(-100%); background:#198754; color:#fff; border-radius:12px; padding:.15rem .5rem; font-size:.75rem; display:none; } /* Petites optimisations mobiles */ @media (max-width: 420px){ .login-actions .btn{ padding:.25rem .5rem; } .login-chip{ font-size:.78rem; } }