/* ========================================================================== ReDrone — feuille de style principale Marketplace de drones reconditionnés — identité visuelle originale ========================================================================== */ :root { /* Palette — vert forêt / sable / blanc cassé : univers "seconde vie", éco-responsable ------------------------------------------------------------------ Deux familles de couleurs, à ne pas confondre quand on modifie le site : • --color-ink / white / sand / mint sont des couleurs FIXES de la charte. Elles servent notamment de texte clair posé sur les aplats vert foncé (en-tête, pied de page, bannières) : elles ne changent jamais. • --surface, --surface-2, --color-line, --color-text, --color-titre sont les couleurs d'INTERFACE : ce sont elles, et elles seules, qui basculent en mode sombre (voir le bloc « mode sombre » plus bas). */ --color-ink: #17231f; --color-forest: #1b4b43; --color-forest-light: #2e8b6f; --color-mint: #d9efe6; --color-sand: #f4f1ea; --color-white: #ffffff; --color-warn: #b5651d; --color-grade-a: #2e8b6f; --color-grade-b: #c69214; --color-grade-c: #b5651d; /* couleurs d'interface — mode clair */ --surface: #ffffff; /* fond des pages et des cartes */ --surface-2: #f4f1ea; /* fond secondaire (encadrés, vignettes) */ --color-line: #e2ddd0; --color-text: #2a2f2c; --color-text-muted: #6b7268; --color-titre: #17231f; /* titres et texte fort */ --surface-entete: rgba(255, 255, 255, 0.92); /* en-tête translucide */ --font-display: "Segoe UI", "Helvetica Neue", Arial, sans-serif; --font-body: "Segoe UI", "Helvetica Neue", Arial, sans-serif; --radius-sm: 6px; --radius-md: 12px; --radius-lg: 20px; --shadow-card: 0 2px 10px rgba(23, 35, 31, 0.06); --shadow-card-hover: 0 10px 28px rgba(23, 35, 31, 0.12); --max-width: 1180px; } /* ---------- Mode sombre ---------- Trois réglages possibles depuis « Mon compte », toujours choisis explicitement par le client (jamais par défaut) : • Clair : — mode clair force. • Sombre : — mode sombre force. • Automatique : — suit le réglage clair/sombre du téléphone ou de l'ordinateur (media query ci-dessous). Tant que le client n'a rien choisi (aucun attribut data-theme sur ), le site reste en clair - la priorite va au mode clair, meme si l'appareil est lui-meme en mode sombre. Seules les couleurs d'interface changent ; le vert de la marque, lui, reste identique dans les deux modes pour que le site reste reconnaissable. */ :root[data-theme="sombre"] { --surface: #141a18; --surface-2: #1d2522; --color-line: #2e3733; --color-text: #dde4e0; --color-text-muted: #98a49e; --color-titre: #f1f5f3; --surface-entete: rgba(20, 26, 24, 0.94); --color-forest: #245f53; --color-forest-light: #4bb493; --shadow-card: 0 2px 10px rgba(0, 0, 0, 0.4); --shadow-card-hover: 0 10px 28px rgba(0, 0, 0, 0.55); } @media (prefers-color-scheme: dark) { :root[data-theme="auto"] { --surface: #141a18; --surface-2: #1d2522; --color-line: #2e3733; --color-text: #dde4e0; --color-text-muted: #98a49e; --color-titre: #f1f5f3; --surface-entete: rgba(20, 26, 24, 0.94); --color-forest: #245f53; --color-forest-light: #4bb493; --shadow-card: 0 2px 10px rgba(0, 0, 0, 0.4); --shadow-card-hover: 0 10px 28px rgba(0, 0, 0, 0.55); } } /* ---------- Couleur du site (choisie depuis Admin > Réglages) ---------- Palette de 10 couleurs pour --color-forest / --color-forest-light, la paire qui pilote tous les boutons, prix, liens et accents du site. "Vert forêt" (les valeurs ci-dessus) reste la couleur par defaut, sans attribut - les 9 autres s'appliquent via , pose par le meme script que le mode clair/sombre (voir le de chaque page). Chaque couleur a sa propre variante mode sombre, plus lumineuse pour rester lisible sur fond fonce - exactement comme le vert par defaut. */ [data-couleur="leboncoin"] { --color-forest: #f56b2a; --color-forest-light: #ff8f5c; } [data-couleur="ocean"] { --color-forest: #14577e; --color-forest-light: #2e93c9; } [data-couleur="bordeaux"] { --color-forest: #7a1b2e; --color-forest-light: #b23a52; } [data-couleur="violet"] { --color-forest: #5b2e8c; --color-forest-light: #8b5fc2; } [data-couleur="marine"] { --color-forest: #1b2a4a; --color-forest-light: #33507f; } [data-couleur="emeraude"] { --color-forest: #0d7a63; --color-forest-light: #17a98a; } [data-couleur="terracotta"] { --color-forest: #b0532e; --color-forest-light: #d97a50; } [data-couleur="framboise"] { --color-forest: #9c1f5c; --color-forest-light: #d13e82; } [data-couleur="anthracite"] { --color-forest: #2e333a; --color-forest-light: #545b66; } :root[data-theme="sombre"][data-couleur="leboncoin"] { --color-forest: #e05b22; --color-forest-light: #ff9a66; } :root[data-theme="sombre"][data-couleur="ocean"] { --color-forest: #1d6e99; --color-forest-light: #4fb3e8; } :root[data-theme="sombre"][data-couleur="bordeaux"] { --color-forest: #96233b; --color-forest-light: #d9536d; } :root[data-theme="sombre"][data-couleur="violet"] { --color-forest: #7038b0; --color-forest-light: #a87de0; } :root[data-theme="sombre"][data-couleur="marine"] { --color-forest: #2c4470; --color-forest-light: #5478b0; } :root[data-theme="sombre"][data-couleur="emeraude"] { --color-forest: #12967a; --color-forest-light: #2ed1ac; } :root[data-theme="sombre"][data-couleur="terracotta"] { --color-forest: #c2632e; --color-forest-light: #e8956a; } :root[data-theme="sombre"][data-couleur="framboise"] { --color-forest: #c2276e; --color-forest-light: #e85ca0; } :root[data-theme="sombre"][data-couleur="anthracite"] { --color-forest: #4a515a; --color-forest-light: #767e88; } @media (prefers-color-scheme: dark) { :root[data-theme="auto"][data-couleur="leboncoin"] { --color-forest: #e05b22; --color-forest-light: #ff9a66; } :root[data-theme="auto"][data-couleur="ocean"] { --color-forest: #1d6e99; --color-forest-light: #4fb3e8; } :root[data-theme="auto"][data-couleur="bordeaux"] { --color-forest: #96233b; --color-forest-light: #d9536d; } :root[data-theme="auto"][data-couleur="violet"] { --color-forest: #7038b0; --color-forest-light: #a87de0; } :root[data-theme="auto"][data-couleur="marine"] { --color-forest: #2c4470; --color-forest-light: #5478b0; } :root[data-theme="auto"][data-couleur="emeraude"] { --color-forest: #12967a; --color-forest-light: #2ed1ac; } :root[data-theme="auto"][data-couleur="terracotta"] { --color-forest: #c2632e; --color-forest-light: #e8956a; } :root[data-theme="auto"][data-couleur="framboise"] { --color-forest: #c2276e; --color-forest-light: #e85ca0; } :root[data-theme="auto"][data-couleur="anthracite"] { --color-forest: #4a515a; --color-forest-light: #767e88; } } * { box-sizing: border-box; } html { scroll-behavior: smooth; /* couvre la zone sous la barre de statut/caméra perforée (mobile/app en plein ecran) avec la meme couleur que le bandeau du haut, pour que rien ne soit cache et qu'il n'y ait pas de flash blanc au-dessus */ background: var(--color-ink); } body { margin: 0; font-family: var(--font-body); color: var(--color-text); background: var(--surface); line-height: 1.55; /* pousse tout le contenu sous la zone reservee au systeme (status bar, encoche/camera perforee) quand le site tourne en plein ecran (PWA, appli Android) - sans effet dans un onglet de navigateur classique */ padding-top: env(safe-area-inset-top, 0px); -webkit-font-smoothing: antialiased; } /* Le texte tape dans un champ suit --color-text (regle ci-dessus), mais le texte d'exemple grise (placeholder) a besoin de sa propre regle : sans ca il garde la couleur grise fixe du navigateur, illisible en mode sombre. */ input::placeholder, textarea::placeholder { color: var(--color-text-muted); opacity: 1; } img, svg { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } h1, h2, h3, h4 { font-family: var(--font-display); color: var(--color-titre); margin: 0 0 0.5em 0; line-height: 1.15; font-weight: 700; } h1 { font-size: clamp(2rem, 4vw, 3.2rem); } h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); } h3 { font-size: 1.25rem; } p { margin: 0 0 1em 0; } .container { max-width: var(--max-width); margin: 0 auto; padding: 0 24px; } .eyebrow { display: inline-block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-forest-light); margin-bottom: 0.6em; } /* ---------- Boutons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 26px; border-radius: 999px; font-weight: 600; font-size: 0.95rem; border: 2px solid transparent; cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease; white-space: nowrap; } .btn-primary { background: var(--color-forest); color: var(--color-white); } .btn-primary:hover { background: var(--color-forest-light); transform: translateY(-1px); } .btn-outline { background: transparent; border-color: var(--color-titre); color: var(--color-titre); } .btn-outline:hover { background: var(--color-titre); color: var(--surface); } .btn-light { background: var(--surface); color: var(--color-forest); } .btn-light:hover { transform: translateY(-1px); box-shadow: var(--shadow-card-hover); } .btn-danger { background: transparent; border-color: #b3261e; color: #b3261e; } .btn-danger:hover { background: #b3261e; color: var(--color-white); } .btn-block { width: 100%; } .btn-sm { padding: 9px 18px; font-size: 0.85rem; } /* ---------- Header / nav ---------- */ .site-header { position: sticky; /* reste sous la zone systeme (status bar/camera) meme apres defilement, quand le bandeau d'avertissement au-dessus a disparu du cadre */ top: env(safe-area-inset-top, 0px); z-index: 100; background: var(--surface-entete); backdrop-filter: blur(8px); border-bottom: 1px solid var(--color-line); } .nav-bar { display: flex; align-items: center; justify-content: space-between; /* padding-top/bottom seulement (pas le raccourci "padding") : cet element porte aussi la classe .container, qui pose deja 24px de marge horizontale - un simple "padding: 14px 0" ecraserait ce 24px (meme propriete CSS, regle plus bas dans la feuille de style) et collait les icones de l'entete (panier...) contre le bord de l'ecran sur mobile. */ padding-top: 14px; padding-bottom: 14px; } .brand { display: flex; align-items: center; } /* Bloc marque en une seule image (icone + "ReDrones" + legende), exportee telle quelle depuis le fichier fourni par l'utilisateur - evite tout ecart de police/espacement entre un rendu recompose en CSS (icone + texte + legende separes) et le graphisme d'origine. Meme rendu en clair et en sombre (une ombre blanche en mode sombre rendait moins bien, sur demande explicite). */ /* Pas d'ombre portee ici (a la difference de l'ancienne icone seule) : sur un dessin aussi detaille (lettres fines + legende), drop-shadow cree un halo flou disgracieux autour de chaque trait plutot qu'une ombre nette. */ .brand-lockup { height: 36px; width: auto; display: block; } /* Pied de page : meme logotype sans la legende (assets/logo-footer.png) - brightness(0) invert(1) convertit les couleurs d'origine en blanc pur (fond du pied de page fixe et toujours sombre, --color-ink). */ .brand-lockup-footer { height: 56px; filter: brightness(0) invert(1); } /* Logo "en suspension" (PC uniquement) : ajoute par JS (main.js, initialiserLogo3D) qui remplace le par ces calques quand la souris/le pointeur fin est detecte - sur mobile/tablette ou si JS est desactive, le d'origine reste affiche tel quel, ces regles ne s'appliquent alors jamais. perspective sur le parent + un calque "scene" en 3D avec l'icone et le texte a des profondeurs differentes : l'icone bouge plus que le texte quand on incline, ce qui donne l'impression de deux plans distincts plutot qu'une image plate. */ .brand-3d { perspective: 700px; } .brand-3d-scene { display: flex; align-items: center; gap: 8px; transform-style: preserve-3d; animation: brand-3d-flotter 4.5s ease-in-out infinite; will-change: transform; } /* JS bascule cette classe pendant que la souris survole le logo : coupe l'animation de repos et laisse la main au mousemove (transform inline, applique directement en JS pour suivre le curseur sans latence). */ .brand-3d.en-interaction .brand-3d-scene { animation-play-state: paused; } @keyframes brand-3d-flotter { 0%, 100% { transform: translateY(0) rotateX(0deg) rotateY(0deg); } 50% { transform: translateY(-3px) rotateX(4deg) rotateY(-3deg); } } .brand-3d-icone { height: 36px; width: auto; display: block; transform: translateZ(28px); filter: drop-shadow(0 10px 8px rgba(2, 61, 48, .3)); } .brand-3d-texte-bloc { display: flex; flex-direction: column; transform: translateZ(12px); } .brand-3d-texte { height: 20px; width: auto; display: block; } .brand-3d-tagline { font-size: .58rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--color-forest-light); margin-top: 2px; white-space: nowrap; } @media (max-width: 980px), (hover: none), (pointer: coarse) { /* JS ne s'active jamais dans ce cas (voir initialiserLogo3D), ces regles sont juste une securite si la classe venait a etre posee quand meme. */ .brand-3d-scene { animation: none; transform: none; } .brand-3d-icone, .brand-3d-texte-bloc { transform: none; } } .nav-links { display: flex; align-items: center; gap: 32px; list-style: none; margin: 0; padding: 0; } .nav-links a { font-weight: 600; font-size: 0.92rem; color: var(--color-text); padding: 6px 0; border-bottom: 2px solid transparent; transition: color 0.15s ease, border-color 0.15s ease; } .nav-links a:hover, .nav-links a.active { color: var(--color-forest); border-color: var(--color-forest-light); } .nav-actions { display: flex; align-items: center; gap: 14px; flex: none; } /* elements du menu reserves au mobile (Mon compte / Se connecter / Notifications) : caches sur bureau, affiches uniquement dans le menu hamburger */ .nav-mobile-seul { display: none; } /* ---------- en-tete "façon Leboncoin", ordinateur uniquement ---------- */ /* Caches par defaut (mobile/tablette, ou l'en-tete existant - loupe repliee, logo centre, barre du bas - reste inchange) ; reactives a partir de 981px, meme seuil que celui qui bascule deja tout le reste du site en version PC. */ .btn-deposer-pc, .recherche-barre-pc, .icones-pc { display: none; } @media (min-width: 981px) { .btn-deposer-pc { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; background: var(--color-forest); color: #fff; font-weight: 700; font-size: .86rem; padding: 10px 18px; border-radius: 999px; transition: background .15s ease; flex: none; } .btn-deposer-pc:hover { background: var(--color-forest-light); } .recherche-barre-pc { /* min-width:0 : la barre peut retrecir si l'en-tete est plein, au lieu de pousser le panier hors de la page */ display: flex; align-items: center; flex: 1; min-width: 0; max-width: 420px; margin: 0 4px; background: var(--surface-2); border: 1px solid var(--color-line); border-radius: 999px; padding: 4px 4px 4px 16px; position: relative; } .recherche-barre-pc input { flex: 1; min-width: 0; border: none; background: none; font-size: .86rem; color: var(--color-text); font-family: var(--font-body); } .recherche-barre-pc input:focus { outline: none; } .recherche-barre-pc button { border: none; background: var(--color-forest); color: #fff; width: 32px; height: 32px; border-radius: 50%; cursor: pointer; font-size: .92rem; flex: none; } .icones-pc { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; flex: none; } .icones-pc > li { position: relative; } .icone-pc-lien { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 10px; border-radius: 10px; color: var(--color-text); font-size: .66rem; font-weight: 600; background: none; border: none; cursor: pointer; font-family: var(--font-body); text-decoration: none; line-height: 1.1; } .icone-pc-lien:hover { background: var(--surface-2); } .icone-pc-symbole { position: relative; line-height: 1; display: flex; } .icone-pc-svg { width: 20px; height: 20px; display: block; } .recherche-barre-pc button svg { width: 15px; height: 15px; display: block; margin: auto; } .icone-pc-avatar .icone-pc-texte { max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* petit conteneur dedie autour de l'avatar (et lui seul) pour ancrer la pastille de notification : necessaire car le JS remplace entierement le contenu de .avatar-rond (photo ou initiale) a chaque rafraichissement - une pastille imbriquee dedans serait effacee a chaque fois. */ .icone-avatar-hote { position: relative; display: inline-flex; } /* remplacees par la nouvelle barre ci-dessus - !important necessaire car les regles de base (display:flex de .recherche-entete, .nav-links non cache) apparaissent plus bas dans la feuille de style et gagneraient sinon la cascade malgre cette media query */ .nav-links, .recherche-entete { display: none !important; } .nav-actions .cart-badge[title="Mes messages"], .nav-actions .notif-cloche, .nav-actions a[data-si-connecte], .nav-actions a[data-si-deconnecte] { display: none !important; } /* logo un peu plus compact qu'en mobile pour laisser de la place a la nouvelle barre - reste nettement plus grand qu'avant tout de meme */ .brand { flex: none; } .brand-lockup { height: 34px; } .nav-bar { gap: 14px; } } /* Petit ecran d'ordinateur (981-1180px) : l'en-tete PC ne tient pas avec les libelles sous les icones - la recherche tombait a ~20px. Libelles masques visuellement mais gardes pour les lecteurs d'ecran (pas de display:none). */ @media (min-width: 981px) and (max-width: 1180px) { .icones-pc .icone-pc-texte { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .icone-pc-lien { padding: 8px; } .recherche-barre-pc { min-width: 150px; } } /* avatar rond (photo de profil validee, ou a defaut initiale du pseudo sur fond de couleur) - utilise dans l'en-tete, les annonces et la messagerie */ .avatar-rond { width: 30px; height: 30px; border-radius: 50%; overflow: hidden; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; } .avatar-rond img { width: 100%; height: 100%; object-fit: cover; display: block; } .avatar-rond-lettre { background: var(--color-forest); color: #fff; font-weight: 700; font-size: .8rem; text-transform: uppercase; } .avatar-rond-lg { width: 72px; height: 72px; } .avatar-rond-lg.avatar-rond-lettre { font-size: 1.8rem; } .avatar-rond-md { width: 44px; height: 44px; } .avatar-rond-md.avatar-rond-lettre { font-size: 1.1rem; } /* Recherche repliee dans l'en-tete (version PC uniquement - voir plus bas, cachee des la tablette : sur mobile/tablette la recherche reste celle, deja bien visible, de la page d'accueil et du catalogue). Ferme : juste la loupe. Ouverte (.ouverte) : le champ se deplie a cote. */ .recherche-entete { display: flex; align-items: center; } .recherche-entete-bouton { background: none; border: none; cursor: pointer; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.05rem; color: var(--color-text); flex: none; } .recherche-entete-bouton:hover { background: var(--surface-2); } /* flex-shrink:0 : en-tete PC plein (Forum ajoute), l'icone du panier etait ecrasee a 0 px de large - seul le chiffre restait visible */ .recherche-entete-bouton svg, .cart-badge svg, .cloche-bouton svg { width: 17px; height: 17px; display: block; flex-shrink: 0; } .cart-badge { display: inline-flex; align-items: center; gap: 4px; } .recherche-entete-champ { overflow: hidden; width: 0; opacity: 0; margin-left: 0; transition: width .22s ease, opacity .18s ease, margin-left .22s ease; } /* Comme dans l'appli : la recherche ouverte prend toute la largeur disponible (jusqu'aux icones de droite) a la place du logo, plutot qu'un petit champ de 210px a cote de lui. .recherche-entete grandit pour occuper tout l'espace laisse libre par justify-content:space-between sur .nav-bar ; le logo est masque via .recherche-ouverte (voir plus bas, pose par js/main.js). */ .recherche-entete.ouverte { flex: 1 1 auto; min-width: 0; } .recherche-entete.ouverte .recherche-entete-champ { width: 100%; opacity: 1; margin-left: 6px; } .nav-bar.recherche-ouverte .brand { display: none; } .recherche-entete-champ input { width: 100%; border: 1px solid var(--color-line); border-radius: 999px; padding: 7px 14px; font-size: .86rem; background: var(--surface); color: var(--color-text); font-family: var(--font-body); } /* ---------- "Rechercher par categorie" (mobile + PC), comme Leboncoin ---- Une ligne qui apparait quand la recherche s'ouvre (mobile) ou recoit le focus (PC), tant que le champ est vide - au clic, deroule un choix de categories (boutique + petites annonces). Cachee par defaut ; .ouverte (mobile) / .categorie-visible (PC, pose par JS au focus) la reactive - le [hidden] pose par JS reste toujours prioritaire (input non vide). */ .recherche-entete .recherche-categorie, .recherche-barre-pc .recherche-categorie { display: none; } .recherche-entete.ouverte .recherche-categorie, .recherche-barre-pc.categorie-visible .recherche-categorie { display: block; } .recherche-categorie[hidden] { display: none !important; } .recherche-categorie { position: absolute; top: 100%; left: 0; right: 0; margin-top: 8px; background: var(--surface); border: 1px solid var(--color-line); border-radius: var(--radius-md); box-shadow: 0 12px 28px rgba(0,0,0,.14); z-index: 140; overflow: hidden; } /* Sur mobile, pas une petite carte flottante mais une ligne plate en pleine largeur d'ecran directement sous l'en-tete, comme dans l'appli (une Surface + HorizontalDivider dans le flux, pas un popup) : on sort du conteneur (large 100vw recentre) et on retire carte/ombre/coins arrondis. La barre PC, elle, garde la carte flottante classique - la recherche y reste un petit champ au milieu d'un large en-tete, pas plein ecran. */ .recherche-entete .recherche-categorie { /* position:fixed (pas absolute) : .recherche-entete ne commence pas au bord gauche de l'ecran (l'icone loupe est avant), donc le classique "left:50%; margin-left:-50vw" pour sortir du conteneur se calait sur le mauvais referentiel et decalait le bloc vers la droite. En fixed, le referentiel est directement la fenetre : left:0/width:100vw tombent juste. Le "top" (bas reel de l'en-tete, variable - bandeau d'avertissement replie ou non, en-tete sticky) est calcule et pose par js/main.js a l'ouverture. */ position: fixed; top: 0; left: 0; right: auto; width: 100vw; margin-left: 0; margin-top: 0; border-radius: 0; box-shadow: none; border: none; border-top: 1px solid var(--color-line); } /* Specificite renforcee (.recherche-categorie .recherche-categorie-ligne, pas juste .recherche-categorie-ligne) : necessaire pour l'emporter sur la regle generique ".recherche-barre-pc button" (bouton loupe rond vert) qui, sinon, s'applique aussi a CE bouton puisque lui aussi est un