/* --------------------------------------------------------------------------- Forum des suggestions — suggestions.php Reprend les variables de style.css (--primary-color, --dark-bg, ...) : ce fichier ne redéfinit aucune couleur de marque, il s'y branche. --------------------------------------------------------------------------- */ /* Le menu mobile et la modale posent cette classe sur . Elle est définie dans chaque feuille de page (index.css, occasion.css, ...) plutôt que dans style.css : sans elle ici, ouvrir le menu burger laisserait la page défiler derrière. */ body.no-scroll { overflow: hidden; touch-action: none; height: 100vh; } /* --------------------------------------------------------------------------- Chrome de la barre de navigation — cloche de notifications, menu utilisateur, logo podium, bouton retour en haut. Ces règles ne sont PAS dans style.css : chaque page publique en porte sa propre copie (index.css, occasion.css, catalogue.css, location.css). Sans elles ici, le contenu du volet de notifications se déversait en clair dans la barre et le bouton retour en haut restait planté dans le flux de la page. Reprises telles quelles depuis occasion.css, sur lequel la navigation de cette page est calquée. La duplication est celle du projet, pas une nouveauté — les regrouper dans style.css toucherait les quatre autres pages. --------------------------------------------------------------------------- */ /* Styles pour les notifications client */ .notification-bell-container { position: relative; display: inline-flex; align-items: center; margin-left: 1rem; vertical-align: middle; margin-top: -4px; } .notification-bell-wrapper { position: relative; cursor: pointer; padding: 0.5rem; border-radius: 8px; transition: all 0.3s ease; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; box-sizing: border-box; transform: translateY(-4px); } .notification-bell-wrapper:hover { background: rgba(255, 107, 107, 0.1); } .notification-bell-wrapper i { font-size: 1.2rem; color: #fff; transition: transform 0.3s ease; } .notification-bell-wrapper:hover i { transform: scale(1.1); } .notification-badge-client { position: absolute; top: 0; right: 0; background: #ff6b6b; color: white; border-radius: 50%; width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; font-size: 0.7rem; font-weight: 700; border: 2px solid #1a1a1a; transform: translate(25%, -25%); animation: pulse-notification 2s infinite; } .notification-badge-client.hidden { display: none !important; } @keyframes pulse-notification { 0%, 100% { transform: translate(25%, -25%) scale(1); box-shadow: 0 0 0 0 rgba(255, 107, 107, 0.7); } 50% { transform: translate(25%, -25%) scale(1.1); box-shadow: 0 0 0 4px rgba(255, 107, 107, 0); } } /* Dropdown des notifications */ .notification-dropdown { display: none; position: absolute; top: calc(100% + 10px); right: 0; width: 350px; max-width: 90vw; background: #1a1a1a; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4); z-index: 3000; overflow: hidden; } .notification-dropdown.open { display: block; animation: slideDown 0.3s ease-out; } @keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } .notification-dropdown-header { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.25rem; border-bottom: 1px solid rgba(255, 255, 255, 0.1); background: rgba(255, 107, 107, 0.05); } .notification-dropdown-header h3 { margin: 0; color: #fff; font-size: 1.1rem; font-weight: 600; } .notification-close { background: none; border: none; color: #888; cursor: pointer; font-size: 1.1rem; padding: 0.25rem; transition: color 0.2s; } .notification-close:hover { color: #fff; } .notification-dropdown-content { max-height: 400px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(255, 107, 107, 0.3) transparent; } .notification-dropdown-content::-webkit-scrollbar { width: 6px; } .notification-dropdown-content::-webkit-scrollbar-track { background: transparent; } .notification-dropdown-content::-webkit-scrollbar-thumb { background: rgba(255, 107, 107, 0.3); border-radius: 3px; } .notification-loading { padding: 2rem; text-align: center; color: #888; } .notification-loading i { font-size: 2rem; margin-bottom: 0.5rem; display: block; } .notification-empty { padding: 2rem; text-align: center; color: #888; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem; } .notification-loading i, .notification-empty i { font-size: 2rem; margin-bottom: 0.5rem; display: block; } .notification-list { padding: 0.5rem 0; } .notification-item { padding: 1rem 1.25rem; border-bottom: 1px solid rgba(255, 255, 255, 0.05); cursor: pointer; transition: background 0.2s; display: flex; align-items: flex-start; gap: 0.75rem; } .notification-item:hover { background: rgba(255, 107, 107, 0.1); } .notification-item.unread { background: rgba(255, 107, 107, 0.05); border-left: 3px solid #ff6b6b; } .notification-icon { width: 32px; height: 32px; background: linear-gradient(135deg, #ff6b6b 0%, #e63946 100%); border-radius: 8px; display: flex; align-items: center; justify-content: center; color: white; font-size: 0.9rem; flex-shrink: 0; } .notification-content { flex: 1; min-width: 0; } .notification-title { font-weight: 600; color: #fff; font-size: 0.9rem; margin-bottom: 0.25rem; } .notification-message { color: #aaa; font-size: 0.85rem; line-height: 1.4; word-wrap: break-word; } .notification-time { color: #666; font-size: 0.75rem; margin-top: 0.25rem; } .notification-dropdown-footer { padding: 0.75rem 1.25rem; border-top: 1px solid rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.2); display: flex; flex-direction: column; gap: 0.5rem; } .notification-mark-all-read { display: flex; align-items: center; justify-content: center; gap: 0.5rem; background: rgba(255, 107, 107, 0.1); border: 1px solid rgba(255, 107, 107, 0.3); color: #ff6b6b; text-decoration: none; font-size: 0.9rem; font-weight: 500; padding: 0.5rem 1rem; border-radius: 6px; cursor: pointer; transition: all 0.2s; width: 100%; } .notification-mark-all-read:hover { background: rgba(255, 107, 107, 0.2); border-color: rgba(255, 107, 107, 0.5); color: #fff; } .notification-mark-all-read:disabled { opacity: 0.5; cursor: not-allowed; } .notification-view-all { display: flex; align-items: center; justify-content: center; gap: 0.5rem; color: #ff6b6b; text-decoration: none; font-size: 0.9rem; font-weight: 500; transition: color 0.2s; } .notification-view-all:hover { color: #fff; } /* Sur mobile, forcer le dropdown à droite */ @media (max-width: 768px) { .notification-bell-container { position: relative; z-index: 3001; } .notification-dropdown { right: -4rem !important; left: auto !important; transform-origin: top right !important; width: calc(100vw - 2rem); max-width: 350px; } .notification-dropdown.open { right: -4rem !important; left: auto !important; } /* S'assurer que le nav-menu permet l'overflow sur mobile */ #nav-menu { overflow: visible !important; } #user-menu { overflow: visible !important; } } @media (max-width: 480px) { /* Sur très petit écran, dropdown pleine largeur avec marge à droite */ .notification-dropdown { width: calc(100vw - 1rem) !important; max-width: calc(100vw - 1rem) !important; right: -3rem !important; } .notification-dropdown.open { right: -3rem !important; left: auto !important; } } /* Sous-menu utilisateur */ .user-dropdown { position: relative; display: inline-block; } .user-dropdown-toggle { min-width: 140px; /* ou 120px selon ton design */ justify-content: center; cursor: pointer; display: flex; align-items: center; } .user-dropdown-menu { display: none; position: absolute; top: 100%; right: 0; background: #222; min-width: 200px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15); border-radius: 10px; z-index: 2000; padding: 0.5rem 0; margin-top: 0; min-width: 100%; left: 0; right: 0; } .user-dropdown.open .user-dropdown-menu { display: block; } .user-dropdown-menu a { display: block; padding: 0.7rem 1.5rem; color: #fff; text-decoration: none; font-size: 1rem; transition: background 0.2s; } .user-dropdown-menu a:hover { background: var(--primary-color); color: #fff; } .user-dropdown-menu hr { border: none; border-top: 1px solid #444; margin: 0.3rem 0; } .user-dropdown-menu a.logout-link { white-space: nowrap; } @media (max-width: 900px) { .user-dropdown-menu a.logout-link { white-space: nowrap; } } /* Bouton retour en haut */ .scroll-to-top { position: fixed; bottom: 30px; right: 30px; width: 50px; height: 50px; background: var(--primary-color); color: white; border: none; border-radius: 50%; cursor: pointer; display: none; align-items: center; justify-content: center; font-size: 1.2rem; z-index: 1000; transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(230, 57, 70, 0.3); } .scroll-to-top:hover { background: #ff4d5d; transform: translateY(-3px); box-shadow: 0 8px 25px rgba(230, 57, 70, 0.4); } .scroll-to-top.show { display: flex; animation: fadeInUp 0.3s ease; } /* Reprise nécessaire : la règle ci-dessus référence cette animation, qui est définie ailleurs dans occasion.css, hors du bloc recopié. Sans elle le bouton apparaissait d'un coup au lieu de monter en fondu. */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } @media (max-width: 768px) { .scroll-to-top { bottom: 20px; right: 20px; width: 45px; height: 45px; font-size: 1.1rem; } } /* Podium Logo Link - Toujours visible */ .podium-logo-link { display: inline-flex; align-items: center; margin-left: -1rem; text-decoration: none; vertical-align: middle; margin-top: -4px; } .podium-logo-wrapper { position: relative; cursor: pointer; padding: 0.5rem; border-radius: 8px; transition: all 0.3s ease; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, rgba(255, 215, 0, 0.1) 0%, rgba(255, 215, 0, 0.05) 100%); border: 1px solid rgba(255, 215, 0, 0.2); width: 40px; height: 40px; box-sizing: border-box; } .podium-logo-wrapper:hover { background: linear-gradient(135deg, rgba(255, 215, 0, 0.2) 0%, rgba(255, 215, 0, 0.1) 100%); border-color: rgba(255, 215, 0, 0.4); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(255, 215, 0, 0.3); } .podium-logo-wrapper i { font-size: 1.2rem; color: #ffd700; transition: transform 0.3s ease; } .podium-logo-wrapper:hover i { transform: scale(1.15) rotate(-5deg); color: #ffed4e; } /* --- En-tête ------------------------------------------------------------ */ /* Bannière calquée sur .catalogue-hero : la photo en fond, sans voile, et la grille de tuiles ci-dessous qui se dissipe au chargement. Le quadrillage permanent qui se trouvait ici (un ::after à trame fine) est supprimé — c'est lui qu'on voyait en surimpression. */ .sug-hero { position: relative; background: url('Assets/Img/PDMV.webp'); background-position: left 35%; background-size: cover; background-repeat: no-repeat; overflow: hidden; padding: 140px 0 80px; text-align: center; min-height: 400px; border-bottom: 1px solid var(--border-color); } /* Grille de révélation — reprise telle quelle de catalogue.css. Les tuiles sont créées en JS (16 × 8) puis s'effacent une à une, de gauche à droite. */ .hero-grid-reveal { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 2; display: grid; grid-template-columns: repeat(16, 1fr); grid-template-rows: repeat(8, 1fr); pointer-events: none; } .hero-grid-reveal .tile { background: #181818; opacity: 1; } .hero-grid-reveal .tile.revealed-anim { animation: tileReveal 0.3s forwards; } @keyframes tileReveal { from { opacity: 1; } to { opacity: 0; } } .sug-hero-content { position: relative; /* Au-dessus des tuiles (z-index 2) : le texte reste lisible pendant que la grille se dissipe, comme sur le catalogue. */ z-index: 3; max-width: 820px; margin: 0 auto; padding: 0 2rem; } /* Couleurs de texte reprises du catalogue : titre en rouge de marque, le reste en blanc plein. L'ombre portée est le seul écart — la photo n'a plus de voile sombre au-dessus d'elle, et elle éclaircit par endroits. */ .sug-hero h1 { font-size: 3.5rem; font-weight: 800; color: var(--primary-color); letter-spacing: -0.02em; margin-bottom: 1rem; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6); } .sug-hero p { font-size: 1.2rem; color: #fff; line-height: 1.6; margin-bottom: 2rem; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6); } .sug-hero-stats { display: flex; justify-content: center; gap: 3rem; margin-top: 3rem; flex-wrap: wrap; color: #fff; } .sug-stat { text-align: center; } .sug-stat strong { display: block; font-size: 2.5rem; font-weight: 800; color: var(--primary-color); line-height: 1.1; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6); } .sug-stat span { font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.1em; color: #fff; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6); } /* --- Conteneur ---------------------------------------------------------- */ .sug-container { max-width: 1100px; margin: 0 auto; padding: 3rem 2rem 4rem; } /* --- Barre d'action ----------------------------------------------------- */ .sug-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 2rem; } .sug-filters { display: flex; gap: 0.5rem; flex-wrap: wrap; } .sug-toolbar-actions { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; } .sug-chip { background: rgba(255, 255, 255, 0.05); border: 1px solid var(--border-color); color: rgba(255, 255, 255, 0.75); padding: 0.55rem 1.1rem; border-radius: 999px; font-size: 0.88rem; font-weight: 600; font-family: inherit; cursor: pointer; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease; } .sug-chip:hover { background: rgba(255, 255, 255, 0.1); color: #fff; } .sug-chip.active { background: var(--primary-color); border-color: var(--primary-color); color: #fff; } .sug-sort { background: rgba(255, 255, 255, 0.05); border: 1px solid var(--border-color); color: #fff; padding: 0.55rem 1rem; border-radius: 10px; font-size: 0.88rem; font-family: inherit; cursor: pointer; } .sug-sort option { background: #1a1a1a; color: #fff; } .sug-new-btn { background: var(--primary-color); color: #fff; border: none; padding: 0.75rem 1.4rem; border-radius: 10px; font-size: 0.95rem; font-weight: 700; font-family: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 0.5rem; transition: background 0.2s ease, transform 0.2s ease; } .sug-new-btn:hover { background: #ff4d5d; transform: translateY(-2px); } /* Bandeau invitant à se connecter, à la place du bouton « Nouvelle suggestion » pour un visiteur anonyme. */ .sug-login-hint { display: flex; align-items: center; gap: 0.6rem; background: rgba(230, 57, 70, 0.1); border: 1px solid rgba(230, 57, 70, 0.3); color: rgba(255, 255, 255, 0.85); padding: 0.7rem 1.2rem; border-radius: 10px; font-size: 0.9rem; } .sug-login-hint a { color: var(--primary-color); font-weight: 700; text-decoration: none; } .sug-login-hint a:hover { text-decoration: underline; } /* --- Liste des posts ---------------------------------------------------- */ .sug-list { display: flex; flex-direction: column; gap: 1rem; } .sug-post { display: flex; gap: 1.2rem; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border-color); border-radius: 14px; padding: 1.2rem; transition: border-color 0.2s ease, background 0.2s ease; } .sug-post:hover { border-color: rgba(230, 57, 70, 0.35); background: rgba(255, 255, 255, 0.05); } /* Colonne de vote */ .sug-vote { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; flex-shrink: 0; /* Largeur fixe plutôt qu'ajustée au contenu : sinon un post à 3 chiffres décalerait le bord gauche de son texte par rapport aux autres. */ width: 68px; } /* Flèche du haut en vert, flèche du bas en rouge — en permanence, pas seulement une fois le vote posé. Trois niveaux d'intensité pour que « je peux voter », « je survole » et « j'ai voté » restent distinguables malgré la couleur commune : teinte adoucie au repos, pleine au survol, pleine sur fond teinté une fois le vote enregistré. */ .sug-arrow { background: none; border: none; font-size: 1.15rem; line-height: 1; padding: 0.35rem 0.5rem; border-radius: 8px; cursor: pointer; transition: color 0.15s ease, background 0.15s ease, transform 0.15s ease; /* La flèche et son décompte forment un seul bouton : cliquer le nombre vote aussi, ce qui évite une cible morte de la taille du texte. */ display: inline-flex; align-items: center; gap: 0.25rem; } /* Décompte entre parenthèses, en petit, à côté de sa flèche. Il reprend la couleur du bouton mais en retrait : c'est un détail, le chiffre qui compte reste le solde au centre. */ .sug-arrow-count { font-size: 0.72rem; font-weight: 700; line-height: 1; opacity: 0.75; font-variant-numeric: tabular-nums; } .sug-arrow.up { color: rgba(76, 175, 80, 0.6); } .sug-arrow.down { color: rgba(230, 57, 70, 0.6); } .sug-arrow.up:hover:not(:disabled) { color: #4caf50; background: rgba(76, 175, 80, 0.12); transform: translateY(-1px); } .sug-arrow.down:hover:not(:disabled) { color: var(--primary-color); background: rgba(230, 57, 70, 0.12); transform: translateY(-1px); } .sug-arrow:disabled { cursor: not-allowed; opacity: 0.45; } .sug-arrow.up.voted { color: #4caf50; background: rgba(76, 175, 80, 0.22); } .sug-arrow.down.voted { color: var(--primary-color); background: rgba(230, 57, 70, 0.22); } .sug-score { font-size: 1.05rem; font-weight: 800; color: #fff; min-width: 2ch; text-align: center; } .sug-score.positive { color: #4caf50; } .sug-score.negative { color: var(--primary-color); } /* Corps du post */ .sug-body { flex: 1; min-width: 0; } .sug-meta { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; font-size: 0.8rem; color: rgba(255, 255, 255, 0.5); margin-bottom: 0.6rem; } .sug-avatar { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; border: 1px solid var(--border-color); } .sug-author { color: rgba(255, 255, 255, 0.85); font-weight: 600; } .sug-badge { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.2rem 0.65rem; border-radius: 999px; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; } .sug-badge.type-ajout { background: rgba(168, 218, 220, 0.15); color: var(--secondary-color); } .sug-badge.type-prix { background: rgba(255, 193, 7, 0.15); color: #ffc107; } /* Nom du véhicule / de la location : c'est le sujet du post, il n'y a pas de titre libre. */ .sug-title { font-size: 1.25rem; font-weight: 700; color: #fff; margin-bottom: 0.7rem; line-height: 1.35; overflow-wrap: anywhere; } /* Encart véhicule / location attaché au post */ .sug-attachment { display: flex; align-items: center; gap: 1rem; background: rgba(0, 0, 0, 0.35); border: 1px solid var(--border-color); border-radius: 12px; padding: 0.8rem; } .sug-attachment img { width: 110px; height: 68px; object-fit: cover; border-radius: 8px; background: #000; flex-shrink: 0; } .sug-attachment-info { min-width: 0; } .sug-attachment-sub { font-size: 0.82rem; color: rgba(255, 255, 255, 0.55); margin-top: 0.2rem; } .sug-price-change { display: inline-flex; align-items: center; gap: 0.55rem; margin-top: 0.35rem; font-size: 0.95rem; font-weight: 700; flex-wrap: wrap; } .sug-price-old { color: rgba(255, 255, 255, 0.5); text-decoration: line-through; } .sug-price-new.down { color: #4caf50; } .sug-price-new.up { color: #ff9800; } /* Actions sur le post */ .sug-actions { display: flex; gap: 0.75rem; margin-top: 0.9rem; flex-wrap: wrap; } .sug-action { background: none; border: none; color: rgba(255, 255, 255, 0.45); font-size: 0.82rem; font-family: inherit; font-weight: 600; cursor: pointer; padding: 0.25rem 0.5rem; border-radius: 6px; transition: color 0.15s ease, background 0.15s ease; } .sug-action:hover { color: #fff; background: rgba(255, 255, 255, 0.07); } .sug-action.danger:hover { color: var(--primary-color); } /* --- États -------------------------------------------------------------- */ .sug-empty, .sug-loading { text-align: center; padding: 4rem 1rem; color: rgba(255, 255, 255, 0.45); } .sug-empty i, .sug-loading i { font-size: 2.4rem; color: rgba(255, 255, 255, 0.2); margin-bottom: 1rem; display: block; } .sug-empty h3 { color: rgba(255, 255, 255, 0.75); font-size: 1.15rem; margin-bottom: 0.4rem; } /* --- Modal de création -------------------------------------------------- */ .sug-modal { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.8); z-index: 3000; display: none; align-items: flex-start; justify-content: center; padding: 2rem 1rem; overflow-y: auto; } .sug-modal.open { display: flex; } .sug-modal-box { background: #161616; border: 1px solid var(--border-color); border-radius: 16px; width: 100%; max-width: 620px; margin: auto; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6); } .sug-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 1.3rem 1.5rem; border-bottom: 1px solid var(--border-color); } .sug-modal-head h2 { font-size: 1.25rem; font-weight: 700; color: #fff; } .sug-modal-close { background: none; border: none; color: rgba(255, 255, 255, 0.5); font-size: 1.3rem; cursor: pointer; padding: 0.3rem 0.6rem; border-radius: 8px; transition: color 0.15s ease, background 0.15s ease; } .sug-modal-close:hover { color: #fff; background: rgba(255, 255, 255, 0.08); } .sug-modal-body { padding: 1.5rem; } /* Choix du type de post */ .sug-type-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; margin-bottom: 1.5rem; } .sug-type-card { background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border-color); border-radius: 12px; padding: 1rem; text-align: left; cursor: pointer; font-family: inherit; color: rgba(255, 255, 255, 0.75); transition: border-color 0.2s ease, background 0.2s ease; } .sug-type-card:hover { background: rgba(255, 255, 255, 0.07); } .sug-type-card.selected { border-color: var(--primary-color); background: rgba(230, 57, 70, 0.12); color: #fff; } .sug-type-card i { font-size: 1.3rem; color: var(--primary-color); margin-bottom: 0.5rem; display: block; } .sug-type-card strong { display: block; font-size: 0.95rem; color: #fff; margin-bottom: 0.25rem; } .sug-type-card small { font-size: 0.78rem; line-height: 1.4; display: block; color: rgba(255, 255, 255, 0.55); } /* Champs */ .sug-field { margin-bottom: 1.1rem; } .sug-field label { display: block; font-size: 0.85rem; font-weight: 600; color: rgba(255, 255, 255, 0.75); margin-bottom: 0.45rem; } .sug-field input, .sug-field select, .sug-field textarea { width: 100%; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--border-color); border-radius: 10px; padding: 0.75rem 0.9rem; color: #fff; font-family: inherit; font-size: 0.92rem; transition: border-color 0.2s ease; } .sug-field input:focus, .sug-field select:focus, .sug-field textarea:focus { outline: none; border-color: var(--primary-color); } .sug-field select option { background: #1a1a1a; color: #fff; } .sug-field select option:disabled { color: rgba(255, 255, 255, 0.35); } .sug-field textarea { resize: vertical; min-height: 96px; } .sug-field-hint { font-size: 0.78rem; color: rgba(255, 255, 255, 0.45); margin-top: 0.35rem; } /* Depuis le retrait des champs Titre et Explication, un bloc se termine sur son dernier champ : sa marge basse s'ajoutait au padding du corps de la modale et creusait un vide au-dessus des boutons. */ #bloc-ajout .sug-field:last-child, #bloc-prix .sug-field:last-child { margin-bottom: 0; } /* Aperçu du prix actuel une fois la location choisie */ .sug-current-price { display: none; align-items: center; gap: 0.6rem; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border-color); border-radius: 10px; padding: 0.7rem 0.9rem; margin-bottom: 1.1rem; font-size: 0.88rem; color: rgba(255, 255, 255, 0.7); } .sug-current-price.show { display: flex; } .sug-current-price strong { color: #fff; } .sug-form-error { display: none; background: rgba(230, 57, 70, 0.12); border: 1px solid rgba(230, 57, 70, 0.35); color: #ff8a94; border-radius: 10px; padding: 0.7rem 0.9rem; font-size: 0.87rem; margin-bottom: 1.1rem; } .sug-form-error.show { display: block; } .sug-modal-foot { display: flex; justify-content: flex-end; gap: 0.75rem; padding: 1.1rem 1.5rem; border-top: 1px solid var(--border-color); } .sug-btn-secondary, .sug-btn-primary { padding: 0.7rem 1.4rem; border-radius: 10px; font-size: 0.92rem; font-weight: 700; font-family: inherit; cursor: pointer; border: none; transition: background 0.2s ease, opacity 0.2s ease; } .sug-btn-secondary { background: rgba(255, 255, 255, 0.07); color: rgba(255, 255, 255, 0.8); } .sug-btn-secondary:hover { background: rgba(255, 255, 255, 0.12); color: #fff; } .sug-btn-primary { background: var(--primary-color); color: #fff; } .sug-btn-primary:hover:not(:disabled) { background: #ff4d5d; } .sug-btn-primary:disabled { opacity: 0.55; cursor: not-allowed; } /* --------------------------------------------------------------------------- Modales de confirmation / d'alerte Reprises de gestion-utilisateurs.php (bloc #delete-confirmation-modal), qui habille ses boîtes avec .modal > .modal-content.custom-alert-modal. Là-bas les couleurs viennent des variables de dashboard.css ; cette page ne charge pas dashboard.css, les valeurs sont donc écrites en clair — ce sont celles que résolvent --bg-secondary (#1e1e1e) et --bg-modal-item (#252525). Elles remplacent les confirm() natifs du navigateur. --------------------------------------------------------------------------- */ .modal { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.72); display: none; align-items: center; justify-content: center; padding: 1rem; /* Au-dessus de la modale de création (3000) et des toasts (4000) : une confirmation doit toujours passer devant ce qui l'a déclenchée. */ z-index: 5000; } .modal.open { display: flex; } .modal-content.custom-alert-modal { width: 100%; max-width: 450px; background: #1e1e1e; border: 1px solid var(--border-color); border-radius: 12px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4); animation: modalSlideIn 0.3s ease-out; max-height: 90vh; overflow-y: auto; } @keyframes modalSlideIn { from { opacity: 0; transform: scale(0.9) translateY(-20px); } to { opacity: 1; transform: scale(1) translateY(0); } } .custom-alert-header { display: flex; align-items: center; gap: 12px; padding: 20px 20px 16px 20px; border-bottom: 1px solid var(--border-color); } .custom-alert-icon { width: 40px; height: 40px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: #fff; font-size: 16px; background: linear-gradient(135deg, #e63946 0%, #ff4d5d 100%); box-shadow: 0 2px 8px rgba(230, 57, 70, 0.3); } .custom-alert-icon.info { background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%); box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3); } .custom-alert-icon.success { background: linear-gradient(135deg, #16a34a 0%, #4caf50 100%); box-shadow: 0 2px 8px rgba(22, 163, 74, 0.3); } .custom-alert-header h3 { margin: 0; color: #fff; font-size: 16px; font-weight: 600; } .custom-alert-subtitle { margin: 4px 0 0 0; font-size: 13px; font-weight: 500; color: #ef4444; } .custom-alert-subtitle.info { color: rgba(255, 255, 255, 0.5); } .custom-alert-content { padding: 20px; text-align: center; } .custom-alert-box { background: #252525; border: 1px solid var(--border-color); border-radius: 8px; padding: 16px; margin-bottom: 12px; } .custom-alert-box i { color: #e63946; font-size: 20px; margin-bottom: 8px; display: block; } .custom-alert-box i.info { color: #3b82f6; } .custom-alert-box p { margin: 0; color: #fff; font-size: 14px; line-height: 1.4; font-weight: 500; overflow-wrap: anywhere; } .custom-alert-highlight { margin: 4px 0 0 0; color: #e63946; font-size: 16px; font-weight: 600; overflow-wrap: anywhere; } .custom-alert-note { margin: 0; color: #ef4444; font-size: 13px; line-height: 1.4; font-weight: 500; } .custom-alert-note.info { color: rgba(255, 255, 255, 0.5); } .custom-alert-actions { display: flex; gap: 10px; padding: 0 20px 20px 20px; } .custom-alert-actions button { flex: 1; padding: 12px 16px; border-radius: 8px; color: #fff; font-size: 14px; font-weight: 500; font-family: inherit; cursor: pointer; transition: all 0.2s ease; } .custom-alert-cancel { background: #1a1a1a; border: 1px solid rgba(255, 255, 255, 0.1); } .custom-alert-cancel:hover { background: #0d0d0d; } .custom-alert-confirm { background: linear-gradient(135deg, #e63946 0%, #ff4d5d 100%); border: 1px solid var(--border-color); box-shadow: 0 2px 8px rgba(230, 57, 70, 0.3); } .custom-alert-confirm:hover { background: linear-gradient(135deg, #ff4d5d 0%, #e63946 100%); } .custom-alert-confirm.info { background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%); box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3); } .custom-alert-confirm.info:hover { background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); } /* --- Notifications ------------------------------------------------------ */ .sug-toast { position: fixed; bottom: 24px; right: 24px; z-index: 4000; background: #1e1e1e; border: 1px solid var(--border-color); border-left: 4px solid var(--primary-color); color: #fff; padding: 0.9rem 1.2rem; border-radius: 10px; font-size: 0.9rem; max-width: 340px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); animation: sugToastIn 0.25s ease; } .sug-toast.success { border-left-color: #4caf50; } @keyframes sugToastIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } /* --- Responsive --------------------------------------------------------- */ /* --------------------------------------------------------------------------- Responsive Les paliers reprennent ceux du reste du site (1200 / 900 / 768 / 600 / 480 / 360) pour que la page se comporte comme ses voisines aux mêmes largeurs. Deux règles de fond appliquées partout plus haut, et qui font l'essentiel du travail avant même le premier palier : .sug-body porte min-width: 0 (sans quoi un nom de véhicule long empêcherait le post de rétrécir et pousserait une barre horizontale), et tous les blocs en ligne — méta, prix, compteurs, filtres — sont en flex-wrap. --------------------------------------------------------------------------- */ /* Très grands écrans : le contenu respire un peu plus, sans devenir une ligne de texte interminable. */ @media (min-width: 1600px) { .sug-container { max-width: 1240px; } .sug-hero { min-height: 440px; } } /* Tablette paysage / petit portable : on récupère de la largeur sur les marges avant de toucher à la mise en page. */ @media (max-width: 1100px) { .sug-container { padding: 2.5rem 1.5rem 3.5rem; } .sug-hero { padding: 130px 0 55px; } .sug-hero h1 { font-size: 3rem; } } /* Tablette portrait : la barre d'outils ne tient plus sur une ligne, elle passe en colonne. Les filtres restent groupés, le tri et le bouton s'étalent. */ @media (max-width: 900px) { .sug-toolbar { flex-direction: column; align-items: stretch; gap: 0.9rem; } .sug-toolbar-actions { justify-content: space-between; } .sug-sort { flex: 1; min-width: 0; } .sug-hero h1 { font-size: 2.6rem; } .sug-hero p { font-size: 1.05rem; } .sug-hero-stats { gap: 2.2rem; margin-top: 2.2rem; } } /* Mobile : c'est ici que la carte d'un post se réorganise. La photo passe en pleine largeur au-dessus du détail, et la colonne de vote se resserre. */ @media (max-width: 768px) { .sug-hero { padding: 100px 0 45px; min-height: 300px; } .sug-hero-content { padding: 0 1.2rem; } .sug-hero h1 { font-size: 2.2rem; } .sug-hero p { font-size: 0.98rem; margin-bottom: 1.5rem; } .sug-hero-stats { gap: 1.8rem; margin-top: 1.8rem; } .sug-stat strong { font-size: 1.7rem; } .sug-stat span { font-size: 0.75rem; } .sug-container { padding: 2rem 1rem 3rem; } /* Les trois filtres se partagent la largeur : trois cibles de même taille valent mieux que deux sur une ligne et une orpheline en dessous. */ .sug-filters { gap: 0.4rem; } .sug-chip { flex: 1; min-width: 0; padding: 0.55rem 0.5rem; font-size: 0.82rem; text-align: center; } .sug-new-btn, .sug-login-hint { justify-content: center; } .sug-post { gap: 0.8rem; padding: 1rem; } .sug-vote { width: 58px; } .sug-title { font-size: 1.1rem; } .sug-attachment { flex-direction: column; align-items: stretch; } .sug-attachment img { width: 100%; height: 160px; } .sug-type-choice { grid-template-columns: 1fr; } .sug-modal { padding: 1rem 0.75rem; } .sug-modal-head, .sug-modal-body, .sug-modal-foot { padding-left: 1.1rem; padding-right: 1.1rem; } } /* Grand téléphone : le tri et le bouton de publication passent l'un sous l'autre, chacun sur toute la largeur. */ @media (max-width: 600px) { .sug-hero h1 { font-size: 1.9rem; } .sug-hero-stats { gap: 1.2rem; } .sug-toolbar-actions { flex-direction: column; align-items: stretch; } .sug-sort, .sug-new-btn { width: 100%; } .sug-attachment img { height: 140px; } /* Les deux boutons d'une confirmation restent côte à côte tant qu'ils tiennent ; en dessous ils s'empilent (palier suivant). */ .custom-alert-actions { gap: 8px; } } /* Petit téléphone. */ @media (max-width: 480px) { .sug-hero { padding: 95px 0 40px; min-height: 260px; } .sug-hero-content { padding: 0 1rem; } .sug-hero h1 { font-size: 1.7rem; } .sug-hero p { font-size: 0.92rem; } .sug-hero-stats { gap: 1rem; } .sug-stat strong { font-size: 1.4rem; } .sug-stat span { font-size: 0.68rem; letter-spacing: 0.06em; } .sug-container { padding: 1.5rem 0.75rem 2.5rem; } .sug-post { padding: 0.85rem; gap: 0.6rem; border-radius: 12px; } .sug-vote { width: 52px; } .sug-arrow { font-size: 1rem; padding: 0.3rem 0.35rem; gap: 0.18rem; } .sug-arrow-count { font-size: 0.66rem; } .sug-title { font-size: 1.02rem; } .sug-meta { font-size: 0.74rem; gap: 0.45rem; } .sug-badge { font-size: 0.66rem; padding: 0.18rem 0.5rem; } .sug-attachment { padding: 0.6rem; } .sug-attachment img { height: 120px; } .sug-price-change { font-size: 0.88rem; } .sug-modal-box { border-radius: 12px; } .sug-modal-foot { flex-direction: column-reverse; } .sug-btn-secondary, .sug-btn-primary { width: 100%; } .custom-alert-actions { flex-direction: column-reverse; } .sug-toast { left: 12px; right: 12px; bottom: 12px; max-width: none; } } /* Très petits écrans (360px et moins) : dernier resserrement. */ @media (max-width: 360px) { .sug-hero h1 { font-size: 1.5rem; } .sug-hero p { font-size: 0.87rem; } .sug-hero-stats { gap: 0.7rem; } .sug-stat strong { font-size: 1.25rem; } .sug-stat span { font-size: 0.62rem; letter-spacing: 0.03em; } /* On rend aux filtres leur largeur naturelle : à trois par ligne, « Modification prix » ne rentre plus et se couperait en deux lignes. Ils passent donc à la ligne plutôt que d'être compressés. */ .sug-chip { flex: 0 1 auto; font-size: 0.75rem; padding: 0.5rem 0.55rem; } .sug-post { padding: 0.7rem; } .sug-vote { width: 46px; } .sug-arrow-count { font-size: 0.62rem; } .sug-score { font-size: 0.95rem; } .sug-attachment img { height: 105px; } } /* Écrans courts en paysage (téléphone tourné) : la hauteur est la ressource rare, pas la largeur. On rend à la page la place prise par la bannière. */ @media (max-height: 500px) and (orientation: landscape) { .sug-hero { min-height: 0; padding: 90px 0 30px; } .sug-hero h1 { font-size: 1.8rem; margin-bottom: 0.4rem; } .sug-hero p { margin-bottom: 1rem; } .sug-hero-stats { margin-top: 1rem; } .sug-modal { padding: 0.75rem; } .sug-field textarea { min-height: 60px; } }