/* ===================================================================== Accueil gamepop.fr - http:/// --------------------------------------------------------------------- Charge UNIQUEMENT quand controller=Index (voir header.php) et tout est scope sous .home-page : le scan, l'argus, les landings /go/ et le blog reutilisent .scan_box / .section_title / .steps_process sans etre touches. Trois partis pris, dans l'ordre d'impact : 1. la preuve de reassurance passe sous le H1 en GRIS, chiffre en bleu de marque. Elle n'est ni orange ni encadree : l'orange doit rester le signal "on clique ici", il n'y a qu'un bouton Estimer sur la page ; 2. les 3 arguments deviennent des pastilles orange posees sur la photo, avec une ombre PORTEE (0 2px 6px) et non plus le halo diffus (0 0 12px) du bandeau bleu : un halo centre fait flotter un bloc plein largeur, il fait sale sur un objet arrondi de 30px de haut ; 3. la photo devient un calque absolu qui epouse la hauteur du bloc. Avant, l'"integration" du titre Comment ca marche dans l'image tenait a un empilement de marges negatives (-140 / -170 / -125 / -100 / -80px) compare a une image dont la hauteur suit la largeur de l'ecran : ca tombait juste sur l'ecran de dev, et nulle part ailleurs. Desormais c'est vrai a toutes les largeurs. ===================================================================== */ .home-page { --hp-text: #1f2933; /* texte courant */ --hp-soft: #52606d; /* preuve, secondaire */ --hp-blue: #0a418d; /* bleu du H1, reutilise pour le chiffre */ --hp-orange: #f2931a; /* accent : pastilles + bouton Estimer */ --hp-yellow: #FEF222; /* jaune fluo du bouton Scan (--ColorAccent) */ --hp-bg: #f2f5f7; /* fond du site (html, body) */ } /* ---------- 0. Garde-fou de largeur ---------------------------------- */ /* #content est en display:flex + flex-direction:column + FLEX-WRAP:WRAP (custom02db.css). Avec "wrap", la ligne flex se dimensionne sur le contenu et non sur le conteneur : il suffit d'UN enfant large pour que toutes les sections soient etirees a sa largeur. Constate au rendu avec le bandeau des dernieres ventes : restait a 390px mais les sections passaient a 4005px, donc le H1 et les pastilles partaient hors ecran, invisibles. max-width:100% plafonne chaque enfant a la largeur de #content et coupe le probleme a la racine, pour ce bandeau comme pour les suivants. */ .home-page > * { max-width: 100%; } /* ---------- 1. Titre + preuve de reassurance ------------------------- */ /* La hauteur fixe (100px, et 66.66px !important sous 980) datait du H1 seul. Deux lignes ne rentrent pas dedans : on repasse en hauteur libre. */ .home-page .header_title_big { height: auto !important; padding: 20px 0 18px 0; } .home-page .header_title_big h1 { line-height: 1.25; text-align: center; margin: 0; /* Quand le titre passe a la ligne, le navigateur equilibre les deux lignes au lieu de laisser un orphelin. Non supporte = coupe naturelle, donc jamais pire qu'avant. */ text-wrap: balance; } /* Le H1 heritait de calc(0.8rem + 1vw), soit 28px sur un 1440 : a peine plus que la preuve surlignee juste dessous (25,5px), et les deux en gras. Deux lignes de meme poids, l'oeil ne sait plus laquelle est le titre. Le plafond de 2rem n'est pas decoratif : le conteneur Bootstrap est fige a 1140px a partir de 1200px de large, et les 60 caracteres du titre y tiennent sur une ligne jusqu'a ~35px. Au-dela, le "!" partait seul a la ligne. */ @media (min-width: 576px) { .home-page .header_title_big h1 { font-size: clamp(1.35rem, calc(0.8rem + 1.35vw), 2rem); } } /* Gris ardoise : la preuve doit se lire APRES le H1, pas avec lui. En bleu elle passerait pour un lien, en orange elle volerait le signal du bouton Estimer, en vert elle ajouterait une 4e couleur a 150px des pastilles orange. */ /* "Deja" et "depuis 2022" sont des mots de liaison : ils reculent d'un cran pour que la mesure surlignee soit le seul element fort de la ligne. */ .home-page .home_proof { margin: 16px 0 0 0; color: var(--hp-soft); font-size: 1.125rem; line-height: 1.5; text-align: center; } /* Toute la phrase utile est SURLIGNEE au jaune fluo du bouton Scan, en gras et en quasi-noir : c'est la seule preuve de la page, elle doit se voir de loin. Le jaune ne peut pas servir de couleur de TEXTE sur blanc (1,1:1 de contraste, illisible) ; en fond derriere du #1f2933 il donne 15:1. Degrade plutot qu'aplat : le jaune ne couvre que les 72 % bas de la ligne, ca fait trace de surligneur et pas pave publicitaire. box-decoration-break: quand la phrase passe a la ligne (mobile), chaque morceau garde son propre padding au lieu d'un rectangle coupe net. */ .home-page .home_proof strong { color: var(--hp-text); font-weight: 700; font-size: 1.3em; /* en em : le rapport tient quelle que soit la largeur */ padding: .02em .22em; background: linear-gradient(to top, var(--hp-yellow) 72%, rgba(254, 242, 34, 0) 72%); -webkit-box-decoration-break: clone; box-decoration-break: clone; } /* Le nombre ne se coupe jamais entre ses milliers et ses centaines. */ .home-page .home_proof_num { white-space: nowrap; } /* ---------- 2. Le hero : photo, pastilles, scan, "Comment ca marche" -- */ .home-page .home_hero { position: relative; overflow: hidden; background: #0a2f61; /* tenu le temps que la photo arrive */ } /* Calque absolu : la photo prend exactement la hauteur de ce que le bloc contient, quelle que soit la largeur de l'ecran. */ .home-page .home_hero_bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; z-index: 0; } /* Voile : un peu de bleu en haut pour que les pastilles blanches tiennent sur les jaquettes, puis fondu vers le fond du site en bas pour que "COMMENT CA MARCHE ?" (gris #464b51) reste lisible et que la photo ne se termine pas sur une coupe nette. */ .home-page .home_hero::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; background: linear-gradient(to bottom, rgba(10, 47, 97, .38) 0, rgba(10, 47, 97, .08) 24%, rgba(242, 245, 247, .72) 76%, var(--hp-bg) 100%); pointer-events: none; } .home-page .home_hero_inner { position: relative; z-index: 2; padding: 26px 0 18px 0; } /* ---------- 3. Les pastilles ----------------------------------------- */ .home-page .home_pills { display: flex; flex-wrap: wrap; justify-content: center; margin: 0; padding: 0 15px; list-style: none; } /* Pastilles ORANGE - arbitrage de Benjamin, 14/09/2026 : ces trois lignes sont la valeur du service, donc on appuie dessus. Le jaune fluo a ete ecarte (sur ce site il veut dire "on tape ici" : bouton Scan et coach mark, donc des libelles jaunes non cliquables produisent des taps perdus) et le blanc manquait de presence. Ce qui empeche l'orange de manger le signal du bouton Estimer, c'est la FORME et la TAILLE, pas la couleur : arrondi complet contre angles droits, 14px contre 26px, trois objets de 30px de haut contre un bloc de 60px. A ne pas laisser deriver : si les pastilles grossissent encore, il faudra leur retirer l'aplat. */ .home-page .home_pills li { display: inline-flex; align-items: center; margin: 5px; padding: .45rem 1.15rem; border-radius: 999px; background: var(--hp-orange); color: #ffffff; font-family: 'Montserrat', sans-serif; font-size: .875rem; font-weight: 600; line-height: 1.1; letter-spacing: .06em; text-transform: uppercase; /* ombre portee : elle decolle la pastille des jaquettes sans lui donner le halo diffus d'un bandeau. */ box-shadow: 0 2px 8px rgba(10, 26, 47, .30); } .home-page .home_pills i { margin-right: .5rem; font-size: .95em; opacity: .95; } /* ---------- 4. Le bloc scan ------------------------------------------ */ /* Les marges negatives ne servent plus a rien : le scan est DANS le hero, donc au-dessus de la photo par construction. */ .home-page .home_hero .scan_box { margin: 24px 0 0 0; } /* ---------- 5. "Comment ca marche ?" et les 3 etapes ----------------- */ .home-page .section_title { margin: 52px 0 0 0; } /* 40px = les 32px dans lesquels la pastille numerotee vient se poser (.step_num est en position:absolute; top:-32px) + 8px d'air. */ .home-page .steps_process { padding-top: 40px; } /* ---------- 5 bis. Dernieres ventes : bandeau defilant ---------------- */ /* La remontee de 25px d'origine servait a coller le bloc au titre de section : avec un bandeau qui defile, il lui faut sa propre respiration. */ /* Le ruban fait plusieurs milliers de pixels de large. Sans isolation stricte il POUSSE la mise en page : .last_sellers est un enfant flex de .row, donc son min-width vaut auto, c'est-a-dire la largeur de son contenu. Resultat constate en rendu : sous 576px la page entiere passait a ~1200px, le H1 et les pastilles sortaient de l'ecran. D'ou les trois verrous ci-dessous : min-width:0 (le flex peut retrecir), overflow:hidden (on coupe) et contain (le navigateur s'interdit de remonter la taille interne au parent). */ /* transparent, et c'est une correction : style-dist.css peint .last_sellers en #ffffff (reste du thema d'origine). Le ruban des jaquettes, lui, n'a pas de fond et laisse passer le gris du body - la bascule tombait donc EN PLEIN MILIEU, juste sous le titre "Dernieres ventes du site", ce qui coupait une section en deux. Les deux rubans partagent maintenant le gris de la page et forment un seul bloc de preuves entre deux blocs blancs. Le gris n'est pas qu'une question d'unite : les cartes des ventes sont blanches, bordees de #e4e9ee et legerement ombrees - cet habillage-la est fait pour se poser sur un fond teinte. Sur du blanc pur elles disparaissaient, on ne voyait plus que le filet de la bordure. */ .home-page .last_sellers { margin: 22px 0 0 0; padding: 0; min-width: 0; max-width: 100%; overflow: hidden; contain: layout paint; background: transparent; } .home-page .last_sellers_track { padding: 18px 0; min-width: 0; max-width: 100%; overflow: hidden; } /* Les deux rubans de la page sont pleine largeur : le bord de coupe doit etre l'ecran, donc invisible. Sans masque il reste quand meme une carte tranchee net a gauche et a droite ; le degrade la fait disparaitre en fondu. Un ruban borne SANS cadre visible se lirait comme un bug de rendu - c'est pour ca que la version des landings, elle, est enfermee dans une carte a bordure. */ .home-page .last_sellers_track, .home-page .hp_jeux_piste { -webkit-mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent); mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent); } .home-page .last_sellers_marquee { display: flex; width: max-content; margin: 0; padding: 0; list-style: none; /* La translation vaut EXACTEMENT une copie (3 copies -> -33.3333 %) : le raccord est invisible et la boucle n'a ni debut ni fin. Deux copies ne suffisaient pas : a 214px la carte, une copie fait 2140px, donc au bout du cycle le ruban se vidait par la droite sur tout ecran plus large. Avec trois, deux copies restent affichees en permanence - on tient jusqu'a 4280px. Changer ce pourcentage impose de changer le nombre de copies dans index.php, et l'inverse. */ animation: hp-marquee 55s linear infinite; } .home-page .last_sellers:hover .last_sellers_marquee { animation-play-state: paused; } @keyframes hp-marquee { from { transform: translateX(0); } to { transform: translateX(-33.3333%); } } /* min-width : sans elle chaque carte se dimensionne sur son contenu, donc "Sana / 25,70 €" fait la moitie de "Guillaume / 169,51 €" et le ruban part en accordeon - c'est ca qui donnait l'impression d'un tas de petits tickets. Largeur commune + contenu centre = un rythme regulier. */ .home-page .last_sellers_marquee li { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 200px; margin-right: 14px; padding: 14px 22px; border: 1px solid #e4e9ee; border-radius: 8px; background: #ffffff; box-shadow: 0 1px 3px rgba(16, 24, 40, .05); text-align: center; white-space: nowrap; /* une vente = une carte, jamais de retour a la ligne */ } .home-page .last_sellers_marquee .seller_name { color: var(--hp-blue); font-weight: 700; font-size: 1rem; } .home-page .last_sellers_marquee .seller_txt { margin: 1px 0 2px 0; color: var(--hp-soft); font-size: .8125rem; line-height: 1.3; } /* Le montant reste le heros de la carte : c'est lui la preuve. */ .home-page .last_sellers_marquee .seller_price { margin: 0 0 2px 0; color: var(--hp-orange); font-weight: 700; font-size: 1.45rem; line-height: 1.2; } /* La date en petit et en gris : elle date la vente sans devenir l'argument. */ .home-page .last_sellers_marquee .date_sell { color: #8094a5; font-size: .75rem; } /* ---------- 5 ter. Derniers jeux rachetes : ruban des jaquettes ------- */ /* Memes verrous de largeur que le bandeau des ventes, et pour la meme raison : .hp_jeux est un enfant flex de .row, son min-width vaut donc la largeur de son contenu - plusieurs milliers de pixels - et il etirerait toute la page. */ .home-page .hp_jeux { margin: 22px 0 0 0; padding: 0; min-width: 0; max-width: 100%; overflow: hidden; contain: layout paint; } .home-page .hp_jeux_piste { padding: 18px 0; min-width: 0; max-width: 100%; overflow: hidden; } /* SENS INVERSE de celui des ventes. Deux rubans qui glissent dans le meme sens a 55s et 45s se lisent comme un decalage accidentel ; en sens opposes, ca se lit comme une intention. 3 copies -> la translation vaut 33,3333 %, et on part de -33,3333 % pour arriver a 0. Une copie de 20 cartes fait 3 240px, il suffit que deux d'entre elles couvrent l'ecran : on tient jusqu'a 6 480px. Le nombre de copies est ecrit dans index.php ($rubanCopies) : les deux doivent bouger ensemble. */ .home-page .hp_jeux_ruban { display: flex; width: max-content; margin: 0; padding: 0; list-style: none; animation: hp-jeux 60s linear infinite; } .home-page .hp_jeux:hover .hp_jeux_ruban { animation-play-state: paused; } @keyframes hp-jeux { from { transform: translateX(-33.3333%); } to { transform: translateX(0); } } /* Largeur figee : les jaquettes n'ont ni le meme format ni le meme cadrage, sans largeur commune le ruban part en accordeon. */ .home-page .hp_jeux_ruban li { display: flex; flex-direction: column; align-items: center; width: 140px; margin-right: 22px; text-align: center; } /* Hauteur fixe + contain, meme raison : sans ca le ruban ondule au fil des formats (boitiers, visuels carres, captures). */ .home-page .hp_jeux_ruban img { width: 100%; height: 140px !important; margin-bottom: .5rem; object-fit: contain; } /* L'image de secours ne doit pas se faire passer pour une jaquette : meme boite, en plus discret. */ .home-page .hp_jeux_ruban img.hp_jeux_secours { padding: 1.5rem .5rem; opacity: .55; } /* Hauteur figee a deux lignes, occupees ou non : sans ca le prix d'un jeu au titre court remonte et la ligne des prix part en escalier. */ .home-page .hp_jeux_jeu { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; height: 2.5em; color: var(--hp-text); font-size: .8125rem; line-height: 1.25; } /* Le prix reste le heros de la carte, dans l'orange de marque : c'est lui la preuve. Meme role que .seller_price dans le bandeau des ventes. */ .home-page .hp_jeux_prix { margin-top: .25rem; color: var(--hp-orange); font-size: 1.0625rem; font-weight: 700; } /* Un bandeau qui bouge en permanence est un declencheur de nausee pour les personnes sensibles au mouvement - et le systeme le signale. */ @media (prefers-reduced-motion: reduce) { .home-page .last_sellers_marquee, .home-page .hp_jeux_ruban { animation: none; flex-wrap: wrap; justify-content: center; width: auto; } /* Sans animation les copies s'empilent : le ruban devient une grille de 48 cartes. On ne garde que la premiere liste, les autres sont des doublons muets qui n'existaient que pour la boucle. */ .home-page .hp_jeux_ruban li[aria-hidden="true"], .home-page .last_sellers_marquee li[aria-hidden="true"] { display: none; } } /* ---------- 5 quater. Les blocs de texte editoriaux ------------------- */ /* Les H2 des blocs .bl-txt ("Pourquoi revendre ses jeux video chez nous ?", "Vendre ses jeux video recents", ...). style-dist.css leur impose un bleu #0d69b0 en graisse 400 (0,1,1) : ni la couleur ni la graisse ne peuvent venir de la regle generale de custom.css, il faut les reprendre ici. Ils passent au gris foncé des titres comme le reste du site. Le seul titre qui garde le bleu sur cette page est le H1 du bandeau, qui repond a la barre de menu juste au-dessus (.header_title_big h1, style-dist.css) : un bleu, une fois, en haut. Repete sur chaque section il redevenait du decor. La graisse passe de 400 a 700 : 'Fugaz One' n'avait qu'une graisse et tenait le titre par son dessin. Montserrat 400 a la meme taille ne fait plus titre du tout. La hauteur de ligne passe de 1.6rem (= la taille de police, donc des lignes collees) a 1.3. */ .home-page .bl-txt h2 { color: var(--hp-text); font-weight: 700; line-height: 1.3; } /* ---------- 6. Tablette ---------------------------------------------- */ @media (max-width: 991.98px) { /* Le code-barres passe AVANT le colis. Un panier a "0 article(s) - 0,00 EUR" en tete de page ne dit rien a quelqu'un qui arrive : il repoussait le champ de saisie et le bouton Estimer sous la ligne de flottaison du telephone. Fait ici et pas dans colis.php : ce bloc est partage avec scan.php et argus.php, ou le panier au-dessus sert de confirmation d'ajout. */ .home-page .scan_box .row > .col-lg-8.order-2 { order: 1; margin-top: 0 !important; /* mt-5 (4rem) : il separait le scan du colis qui etait au-dessus */ } .home-page .scan_box .row > .col-lg-4.order-1 { order: 2; margin-top: 18px; } /* la marge est portee par la colonne, sinon elle se cumule sous 768px */ .home-page .scan_box .cart { margin-top: 0; } .home-page .section_title { margin: 38px 0 0 0; } .home-page .steps_process { padding-top: 8px; } /* Les cartes s'empilent : mt-5 vaut 4rem sous 768px (custom02db), soit 64px dont 32 avales par la pastille -> l'ecart paraissait enorme en haut et riquiqui entre deux cartes. 3rem laisse 19px d'air reel. */ .home-page .steps_process .row > [class*="col-"] { margin-top: 3rem !important; } } /* ---------- 7. Mobile ------------------------------------------------- */ @media (max-width: 575.98px) { /* La photo est un bandeau 3,3:1 : sur un telephone, "cover" n'en montre plus que deux jaquettes derriere la carte de scan. On la retire (c'est deja ce que faisait custom02db sous 480px) mais on GARDE les pastilles, qui disparaissaient avec elle : c'etait la reassurance du mobile. */ .home-page .home_hero { background: #ffffff; } .home-page .home_hero_bg, .home-page .home_hero::after { display: none; } .home-page .home_hero_inner { padding: 4px 0 0 0; } /* Sans photo, la bascule blanc -> fond de site doit tomber sur un bord net. On la cale sur le titre de section : le blanc tient le H1, la preuve, les pastilles et le scan ; le gris ouvre "Comment ca marche ?" et les etapes. */ .home-page .home_hero .section_title { margin: 0; padding: 28px 0 0 0; background: var(--hp-bg); } /* Les filets de 50px du titre de section debordent de l'ecran sur mobile. */ .home-page .section_title p:before { left: -26px; width: 26px; } .home-page .section_title p:after { right: -26px; width: 26px; } /* Sur telephone la photo disparait : l'ombre portee n'a plus de relief a creer, elle salit. L'aplat orange se suffit sur fond blanc. */ .home-page .home_pills li { margin: 4px; padding: .36rem .8rem; font-size: .75rem; letter-spacing: .04em; box-shadow: none; } .home-page .home_hero .scan_box { margin: 18px 0 0 0; } .home-page .header_title_big { padding: 14px 0 12px 0; } /* Mesure faite au rendu : en Montserrat 600, un caractere pese 0,71 em. "Revendre ses jeux video d'occasion," = 35 caracteres, donc 472px a 19px -> il faudrait descendre le H1 a 14px sur un telephone de 390px pour le tenir sur UNE ligne, soit plus petit que le texte courant. On garde donc la taille et on laisse trois lignes, mais equilibrees. */ .home-page .header_title_big h1 { text-wrap: balance; } /* Sur telephone les tailles se resserrent forcement : on garde le H1 au-dessus du surligne, mais l'ecart se reduit a un cran. */ .home-page .header_title_big h1 { font-size: 5.6vw; } .home-page .home_proof { margin-top: 12px; font-size: .9375rem; line-height: 1.7; /* la phrase passe sur 2 lignes : il faut de l'air entre 2 traces de surligneur */ } .home-page .home_proof strong { font-size: 1.22em; } .home-page .section_title p { font-size: 1.25rem; } /* Jaquettes reduites : a 140px un telephone de 390px n'en montre que deux et demie, le ruban ne se lit plus comme un flux. A 104px il en passe trois pleines. La boucle ne souffre pas du retrecissement : la copie reste tres au-dessus du tiers d'ecran exige par les 4 copies. */ .home-page .hp_jeux_ruban li { width: 104px; margin-right: 16px; } .home-page .hp_jeux_ruban img { height: 104px !important; } .home-page .hp_jeux_prix { font-size: 1rem; } }