/* * L'ACCUEIL, feuille servie SUR LA SEULE PAGE D'ACCUEIL. * * Generee depuis am-theme2/style.css, la feuille de l'accueil valide du 11/08/2026. * am-kit.css n'est PAS touchee : les fiches et les categories en ligne ne bougent pas, * et desinstaller cette feuille est le retour arriere. * * TOUT EST CLOISONNE SOUS .rxw-accueil2, et ce n'est pas une precaution de style : * am-kit.css porte deja 26 regles sur .rxw-ac-marche, 16 sur .rxw-ac-side, 15 sur .rxw-ac-sub, * 15 sur .rxw-ac-pod et 12 sur .rxw-ac-btn. Sans la cloison, les deux jeux se battent sur la * page d'accueil et le plus specifique gagne, qui n'est pas forcement le notre. * * Retires a la generation : l'en-tete, le menu, le pied et le panneau de chantier du v2. * Le v1 garde les siens, qui sont plus riches (barre du haut, logo, burger, 7 styles). */ /* ========================================================================== ÉTAPE 1 : le socle. Jetons, remise à zéro, typographie, largeur. Aucun gabarit de page ici, ils arrivent aux étapes suivantes. Les couleurs sont des VARIABLES et rien d'autre ne doit les coder en dur : la variance par domaine (palette, ambiance) est posée par le plugin et sera injectée à l'étape dédiée. Un site qui n'a pas encore sa palette tombe sur ces valeurs, qui sont celles de la maquette de référence. ========================================================================== */ :root{ /* ⛔ LES JETONS DE L ACCUEIL SUIVENT ENFIN LA PALETTE DU SITE, 20/08/2026. Le commentaire ci-dessus annonçait que la variance par domaine serait « injectée à l etape dediee ». Cette etape n a jamais ete livree : l accueil tournait donc sur les valeurs de la maquette de reference, EN DUR et IDENTIQUES sur les cent sites, pendant que le reste du site suivait sa palette. D ou le « vert, jaune, blanc » releve par Wilfried : deux systemes de couleur sur une meme page. Le repli garde les valeurs de la maquette pour un site sans palette, ce que le commentaire promettait deja. */ --am-a:var(--green-900,#214d2d); /* couleur principale */ --am-b:var(--green-700,#5f8f2c); /* accent de survol et de signal */ --am-cream:var(--paper-2,#f5f4ea); /* fond de section claire */ --am-foot:var(--green-900,#0c201a); /* pied */ --am-ink:#1a1a1a; --am-mid:#5a5f5c; --am-line:var(--line,#dcdcd2); --am-serif:Georgia,'Times New Roman',serif; --am-sans:Arial,Helvetica,sans-serif; --am-w:1120px; } .rxw-accueil2 *,.rxw-accueil2 *::before,.rxw-accueil2 *::after{box-sizing:border-box} .rxw-accueil2{ margin:0; background:var(--card); color:var(--am-ink); font-family:var(--am-sans); font-size:15px; line-height:1.6; } .rxw-accueil2 img,.rxw-accueil2 svg,.rxw-accueil2 video{max-width:100%;height:auto} .rxw-accueil2 a{color:var(--am-a)} .rxw-accueil2 h1,.rxw-accueil2 h2,.rxw-accueil2 h3,.rxw-accueil2 h4{font-family:var(--am-serif);font-weight:normal;line-height:1.18;margin:0 0 .5em} .rxw-accueil2 h1{font-size:43px} .rxw-accueil2 h2{font-size:29px} .rxw-accueil2 h3{font-size:19px} .rxw-accueil2 .rxw-shell{max-width:var(--am-w);margin:0 auto;padding:0 24px} @media(max-width:760px){ .rxw-accueil2 h1{font-size:31px} .rxw-accueil2 h2{font-size:24px} } /* ========================================================================== ÉTAPE 2 : LE HÉROS. Contrat visuel docs/maquette-accueil-v2.html. Aucune photo : le titre à gauche, le classement à droite. ========================================================================== */ .rxw-accueil2 .rxw-ac-hero{background:var(--am-cream)} .rxw-accueil2 .rxw-ac-hero .g{display:grid;grid-template-columns:1fr 1.02fr;gap:52px;align-items:center;padding:52px 0 56px} /* Site sans classement publie : une seule colonne, sinon la grille garde un vide a droite. */ .rxw-accueil2 .rxw-ac-hero--seul .g{grid-template-columns:1fr} .rxw-accueil2 .rxw-ac-hero--seul .rxw-lede{max-width:46em} /* Les familles, colonne de droite du heros tant qu il n y a pas de classement. */ .rxw-accueil2 .rxw-ac-fam{background:var(--card);border:1px solid var(--am-line,#e3e6e1);border-radius:14px;padding:22px 24px} .rxw-accueil2 .rxw-ac-fam .t{display:block;font-family:var(--sans);font-size:11.5px;letter-spacing:.09em; text-transform:uppercase;color:var(--am-muted,#6a716b);margin:0 0 12px} .rxw-accueil2 .rxw-ac-fam ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:2px 18px} .rxw-accueil2 .rxw-ac-fam li{margin:0} .rxw-accueil2 .rxw-ac-fam a{display:block;padding:9px 0;border-bottom:1px solid var(--am-line,#eceee9);text-decoration:none} .rxw-accueil2 .rxw-ac-fam a:hover .n{text-decoration:underline} .rxw-accueil2 .rxw-ac-fam .n{display:block;font-family:var(--sans);font-size:15px;font-weight:600;color:var(--am-ink,#14261c)} .rxw-accueil2 .rxw-ac-fam .c{display:block;font-family:var(--sans);font-size:12px;color:var(--am-muted,#6a716b);margin-top:1px} @media(max-width:860px){.rxw-accueil2 .rxw-ac-fam ul{grid-template-columns:1fr}} .rxw-accueil2 .rxw-ac-hero h1{font-size:38px;margin:18px 0} .rxw-accueil2 .rxw-ac-hero .rxw-lede{font-size:16px;color:#3d423f;margin:0 0 24px;max-width:34em} .rxw-accueil2 .rxw-ac-badge{display:inline-block;font-size:11.5px;letter-spacing:.09em;text-transform:uppercase; color:var(--am-a);border:1px solid rgba(0,0,0,.14);border-radius:20px;padding:5px 12px;background:rgba(255,255,255,.65)} .rxw-accueil2 .rxw-cta{display:flex;gap:12px;flex-wrap:wrap} .rxw-accueil2 .rxw-ac-btn{display:inline-block;text-decoration:none;font-size:14px;padding:12px 22px;border-radius:5px} .rxw-accueil2 .rxw-ac-btn.p{background:var(--am-a);color:var(--on-900,#fff)} .rxw-accueil2 .rxw-ac-btn.s{border:1px solid rgba(0,0,0,.22);color:var(--am-a)} .rxw-accueil2 .rxw-ac-preuve{font-size:12.5px;color:#4a504c;line-height:1.6;max-width:40em; border-top:1px solid rgba(0,0,0,.12);padding-top:15px;margin:22px 0 0} .rxw-accueil2 .rxw-ac-preuve strong{color:var(--am-ink)} .rxw-accueil2 .rxw-etoiles{color:var(--am-b);letter-spacing:2px} /* Le classement du héros. */ .rxw-accueil2 .rxw-hero-rk{background:var(--card);border:1px solid var(--am-line);border-radius:9px;overflow:hidden} .rxw-accueil2 .rxw-hero-rk .hd{background:var(--am-a);color:var(--on-900,#fff);padding:11px 18px;font-size:11px; letter-spacing:.1em;text-transform:uppercase;display:flex;gap:12px} .rxw-accueil2 .rxw-hero-rk .hd span{margin-left:auto;opacity:.65;letter-spacing:.04em;text-transform:none} .rxw-accueil2 .rxw-hero-rk .row{display:grid;grid-template-columns:34px 1fr 62px;gap:14px;align-items:center; padding:14px 18px;border-bottom:1px solid var(--am-line);text-decoration:none;color:inherit} .rxw-accueil2 .rxw-hero-rk .row:last-child{border-bottom:0} .rxw-accueil2 .rxw-hero-rk .row.win{background:var(--am-cream)} .rxw-accueil2 .rxw-hero-rk .row:hover{background:var(--paper-2)} .rxw-accueil2 .rxw-hero-rk .pl{font-family:var(--am-serif);font-size:21px;color:var(--am-line)} .rxw-accueil2 .rxw-hero-rk .row.win .pl{color:var(--am-b)} .rxw-accueil2 .rxw-hero-rk .mid{display:block;min-width:0} .rxw-accueil2 .rxw-hero-rk .k{display:block;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--am-mid)} .rxw-accueil2 .rxw-hero-rk .m{display:block;font-family:var(--am-serif);font-size:16.5px} .rxw-accueil2 .rxw-hero-rk .w{display:block;font-size:12px;color:var(--am-mid);margin-top:2px;text-transform:uppercase;letter-spacing:.04em} .rxw-accueil2 .rxw-hero-rk .nt{font-family:var(--am-serif);font-size:24px;color:var(--am-a);text-align:right} @media(max-width:900px){ .rxw-accueil2 .rxw-ac-hero .g{grid-template-columns:1fr;gap:30px;padding:36px 0 40px} } /* ========================================================================== ÉTAPE 3 : la bande de marques et le bloc de l'axe technique. ========================================================================== */ .rxw-accueil2 .rxw-bloc{padding:52px 0} .rxw-accueil2 .rxw-bloc.alt{background:var(--am-cream)} .rxw-accueil2 .rxw-htop{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;margin-bottom:22px} .rxw-accueil2 .rxw-htop h2{margin:0} .rxw-accueil2 .rxw-htop .more{margin-left:auto;font-size:13px;color:var(--am-a);text-decoration:none;white-space:nowrap} /* LES CARTES D'AXE, reprises le 21/08/2026 : « par fonction fait brouillon ». Trois blocs de texte gris, un nombre posé en bas comme une note, et rien qui dise que c'est cliquable. L'icône donne le repère, le pied donne l'action. */ .rxw-accueil2 .rxw-axgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px} .rxw-accueil2 .rxw-axcard{display:flex;flex-direction:column;background:var(--card); border:1px solid var(--am-line);border-radius:12px;padding:18px 18px 0; text-decoration:none;color:inherit;transition:border-color .16s ease,transform .16s ease} .rxw-accueil2 .rxw-axcard:hover{border-color:var(--am-b);transform:translateY(-3px)} .rxw-accueil2 .rxw-axcard .ic{width:38px;height:38px;border-radius:10px;background:var(--green-soft,var(--am-cream)); border:1px solid var(--am-line);display:flex;align-items:center;justify-content:center;margin-bottom:13px} .rxw-accueil2 .rxw-axcard .ic .rxw-ico{width:19px;height:19px;color:var(--green-txt,var(--am-b));stroke-width:1.9} .rxw-accueil2 .rxw-axcard h3{margin:0 0 6px;font-size:18px} /* Deux lignes RÉSERVÉES : sans elles, une description courte et une longue décalent le pied d'une carte à l'autre et la rangée part de travers. */ .rxw-accueil2 .rxw-axcard p{margin:0;font-size:12.5px;color:var(--am-mid);line-height:1.5; min-height:3em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .rxw-accueil2 .rxw-axcard .ft{display:flex;align-items:baseline;justify-content:space-between;gap:10px; margin-top:auto;padding:12px 0 16px;border-top:1px solid var(--am-line)} .rxw-accueil2 .rxw-axcard .n{font-size:12px;font-weight:700;color:var(--am-ink)} .rxw-accueil2 .rxw-axcard .go{font-size:12.5px;font-weight:700;color:var(--green-txt,var(--am-b))} .rxw-accueil2 .rxw-axcard:hover .go{text-decoration:underline} @media(max-width:900px){ .rxw-accueil2 .rxw-axgrid{grid-template-columns:1fr} } /* ========================================================================== ÉTAPE 4 : le gabarit de carte et le bloc des dernières analyses. Une seule forme pour l'instant. Les variantes se tirent par domaine à l'étape 8, et jamais avant de les avoir vues rendues. ========================================================================== */ /* La GRILLE des analyses : quatre colonnes, autant de rangées que de fiches. */ .rxw-accueil2 .rxw-cartes{display:grid;grid-template-columns:repeat(4,1fr);gap:16px} /* ========================================================================== LA CARTE, reprise le 21/08/2026 en la mettant à côté de celle de la référence, sur demande de Wilfried : « un truc simple et stylé comme Affiseo », puis, sur ma proposition d'une carte originale à barre de marché : « c'est trop compliqué, fais juste comme Affiseo ». ⚠ CE QUI RATAIT N'ÉTAIT PAS LE PRINCIPE, C'ÉTAIT L'EXÉCUTION. J'avais d'abord proposé de RETIRER la note et la pastille de la photo. Sa page montre l'inverse : les deux restent sur l'image et rendent très bien, à trois conditions que nous ne remplissions pas. 1. l image etait posee dans un cadre a 12 px de marge, avec ses propres coins arrondis, ET 14 px de padding interne : le produit occupait moins de la moitie de la carte. Elle passe PLEIN CADRE, en 4/3. 2. la note faisait 16 px dans une pastille arrondie pale. Elle passe a 22 px dans un bloc net borde de la couleur du site. 3. le titre 17 px et le prix 16 px : le prix ne se voyait pas. Titre 19, prix 21 en serif, comme les titres. CE QUI RESTE DE NOUS, et qui n'est pas dans sa carte : le « /10 » sous la note, parce que son « 9 » tout seul est ambigu ; la ligne `.si` sous le titre, qui SITUE la mesure face au marché relevé ; et la pastille d'argument dans la couleur du site au lieu d'un noir qui ne suit rien. ========================================================================== */ .rxw-accueil2 .rxw-carte{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--am-line); border-radius:12px;overflow:hidden;text-decoration:none;color:inherit; transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease} .rxw-accueil2 .rxw-carte:hover{border-color:var(--am-b);box-shadow:0 18px 40px -24px rgba(0,0,0,.35);transform:translateY(-4px)} /* La photo PLEIN CADRE. `aspect-ratio` garde les quatre images à la même hauteur sans la figer en pixels, donc la carte suit la largeur de colonne. */ .rxw-accueil2 .rxw-carte .img{position:relative;display:block;background:var(--green-soft,var(--paper-2)); aspect-ratio:4/3;overflow:hidden;border-bottom:1px solid var(--am-line)} .rxw-accueil2 .rxw-carte .img img{width:100%;height:100%;object-fit:contain;display:block;padding:16px; mix-blend-mode:multiply} /* La note : un bloc net, lisible de loin, avec son unité. */ .rxw-accueil2 .rxw-carte .note{position:absolute;left:12px;top:12px;z-index:2; background:var(--card);border:2px solid var(--am-b);border-radius:10px; font-family:var(--am-serif);font-size:22px;line-height:1;padding:6px 10px 7px;color:var(--am-a); box-shadow:0 3px 10px rgba(0,0,0,.10)} .rxw-accueil2 .rxw-carte .note::after{content:'/10';font-family:var(--am-sans);font-size:9.5px; font-weight:700;color:var(--am-mid);margin-left:3px;letter-spacing:.02em} /* La pastille d'argument : COURTE, deux lignes au maximum, dans la couleur du site. Son texte est CALCULÉ (`--on-700`), sans quoi elle serait illisible sur les onze couleurs claires de la bibliothèque. */ .rxw-accueil2 .rxw-carte .arg{position:absolute;right:12px;top:14px;z-index:2;max-width:62%; background:var(--am-b);color:var(--on-700,#fff);font-size:10.5px;font-weight:800;letter-spacing:.05em; text-transform:uppercase;line-height:1.3;padding:6px 11px;border-radius:8px;text-align:right; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .rxw-accueil2 .rxw-carte .bd{display:flex;flex-direction:column;flex:1;padding:16px 16px 0} .rxw-accueil2 .rxw-carte .k{display:block;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase; color:var(--green-txt,var(--am-b));font-weight:800;margin-bottom:5px} /* Deux lignes RÉSERVÉES : sans `min-height`, un nom court et un nom long décalent le prix d'une carte à l'autre et la rangée part de travers. */ .rxw-accueil2 .rxw-carte .t{display:-webkit-box;font-family:var(--am-serif);font-size:19px;line-height:1.28; min-height:2.56em;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} /* NOTRE DIFFÉRENCE, et elle tient sur une ligne : le modèle situé dans le marché relevé. */ .rxw-accueil2 .rxw-carte .si{display:block;margin-top:7px;font-size:12px;color:var(--am-mid);line-height:1.4} .rxw-accueil2 .rxw-carte .ft{display:flex;align-items:baseline;gap:10px;margin-top:auto; padding:14px 16px 16px;border-top:1px solid var(--am-line)} .rxw-accueil2 .rxw-carte .px{font-family:var(--am-serif);font-weight:700;font-size:21px;color:var(--am-ink)} .rxw-accueil2 .rxw-carte .go{margin-left:auto;font-size:13px;font-weight:700;color:var(--green-txt,var(--am-b))} .rxw-accueil2 .rxw-carte:hover .go{text-decoration:underline} @media(max-width:900px){ .rxw-accueil2 .rxw-cartes{grid-template-columns:repeat(2,1fr)} } @media(max-width:520px){ .rxw-accueil2 .rxw-cartes{grid-template-columns:1fr} } /* ========================================================================== ÉTAPE 5 : les besoins et l'état du marché. Les cartes de besoin réutilisent .rxw-axgrid : c'est le même objet, une entrée d'axe, et lui donner deux gabarits ferait deux vérités. ========================================================================== */ .rxw-accueil2 .rxw-ac-marche{display:grid;grid-template-columns:1.15fr 1fr;gap:40px;align-items:center} .rxw-accueil2 .rxw-ac-marche h2{margin:0 0 14px} .rxw-accueil2 .rxw-ac-sub{color:var(--am-mid);font-size:14.5px;margin:0 0 18px;max-width:52em} .rxw-accueil2 .rxw-ac-marche-lien{margin:0} .rxw-accueil2 .rxw-ac-marche-lien a{font-size:14px;color:var(--am-a)} .rxw-accueil2 .rxw-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--am-line); border:1px solid var(--am-line);border-radius:7px;overflow:hidden} .rxw-accueil2 .rxw-stats div{background:var(--card);padding:18px} .rxw-accueil2 .rxw-stats b{display:block;font-family:var(--am-serif);font-size:26px;font-weight:normal; color:var(--am-a);line-height:1.15} .rxw-accueil2 .rxw-stats span{font-size:12.5px;color:var(--am-mid)} @media(max-width:900px){ .rxw-accueil2 .rxw-ac-marche{grid-template-columns:1fr;gap:26px} } /* ========================================================================== ÉTAPES 6 ET 7 : méthode, guides, maillage, menu, pied. ========================================================================== */ /* --- la méthode --- */ .rxw-accueil2 .rxw-etapes{list-style:none;margin:0;padding:0;counter-reset:am2; display:grid;grid-template-columns:repeat(2,1fr);gap:18px 34px} .rxw-accueil2 .rxw-etapes li{counter-increment:am2;position:relative;padding-left:42px;font-size:14.5px;color:#3d423f} .rxw-accueil2 .rxw-etapes li::before{content:counter(am2);position:absolute;left:0;top:0;width:28px;height:28px; border-radius:50%;background:var(--am-a);color:var(--on-900,#fff);font-family:var(--am-serif);font-size:14px; display:flex;align-items:center;justify-content:center} .rxw-accueil2 .rxw-etapes b{color:var(--am-ink)} /* --- les guides --- */ .rxw-accueil2 .rxw-guides{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:16px} .rxw-accueil2 .rxw-guide{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--am-line); border-radius:7px;overflow:hidden;text-decoration:none;color:inherit} .rxw-accueil2 .rxw-guide:hover{border-color:var(--am-b)} .rxw-accueil2 .rxw-guide .img{display:block;height:120px;background:var(--paper-2);overflow:hidden} .rxw-accueil2 .rxw-guide.lead{grid-row:span 2} .rxw-accueil2 .rxw-guide.lead .img{height:230px} .rxw-accueil2 .rxw-guide .img img{width:100%;height:100%;object-fit:cover;display:block} .rxw-accueil2 .rxw-guide .bd{display:block;padding:14px} .rxw-accueil2 .rxw-guide .k{display:block;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase; color:var(--am-b);margin-bottom:5px} .rxw-accueil2 .rxw-guide .t{display:block;font-family:var(--am-serif);font-size:16px;line-height:1.3} .rxw-accueil2 .rxw-guide.lead .t{font-size:21px} .rxw-accueil2 .rxw-guide .x{display:block;margin-top:8px;font-size:13px;color:var(--am-mid)} /* --- le pavé de maillage --- */ .rxw-accueil2 .rxw-pave{display:grid;grid-template-columns:1.5fr 1fr;gap:40px} .rxw-accueil2 .rxw-pave h2{font-size:24px;margin-bottom:14px} .rxw-accueil2 .rxw-pave p{font-size:14px;color:#3d423f} .rxw-accueil2 .rxw-ac-side{border:1px solid var(--am-line);border-radius:7px;padding:18px;margin-bottom:16px;background:var(--card)} .rxw-accueil2 .rxw-ac-side h3{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--am-mid); margin:0 0 10px;font-family:var(--am-sans);font-weight:normal} .rxw-accueil2 .rxw-ac-side ul{list-style:none;margin:0;padding:0} .rxw-accueil2 .rxw-ac-side li{border-bottom:1px solid var(--am-line)} .rxw-accueil2 .rxw-ac-side li:last-child{border-bottom:0} .rxw-accueil2 .rxw-ac-side a{display:flex;gap:10px;padding:8px 0;font-size:13.5px;text-decoration:none;color:var(--am-ink)} .rxw-accueil2 .rxw-ac-side a:hover{color:var(--am-a)} .rxw-accueil2 .rxw-ac-side a b{margin-left:auto;font-weight:normal;font-size:11.5px;color:var(--am-mid)} @media(max-width:900px){ .rxw-accueil2 .rxw-guides,.rxw-accueil2 .rxw-pave{grid-template-columns:1fr} .rxw-accueil2 .rxw-guide.lead{grid-row:auto} .rxw-accueil2 .rxw-etapes{grid-template-columns:1fr} } /* ========================================================================== 0.8.1 : les écarts relevés en comparant le rendu à la maquette validée. ========================================================================== */ /* Le surtitre de section. Sans lui, huit H2 se suivent au même niveau et rien n'annonce le changement de sujet. */ .rxw-accueil2 .rxw-kicker{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--am-b);margin:0 0 8px} /* ========================================================================== LE VERDICT : le podium, redessiné le 20/08/2026. Wilfried, capture de notre bloc contre celui de quel-robot-tondeuse.fr : « le nôtre n'est pas bon, notre design de ce bloc est nul aussi ». Il avait raison, et le défaut n'était pas d'abord graphique : - les trois cartes affichaient LES MÊMES sous-notes (9,5 / 10,0 / 10,0), dans un bloc dont le titre promet de départager. Elles sont retirées : une pastille qui vaut la même chose sur les trois ne dit rien, elle remplit. Ce sont les seules données qui disparaissent. - la mesure qui distingue était en bas, en petit, en capitales, au même niveau visuel qu'une mention légale. Elle est maintenant le CŒUR de la carte, en trois lignes : intitulé, mesure, position face au marché. - la note était enfermée dans un cercle de 88 px qui la faisait paraître petite. Le cercle saute, le chiffre grandit. - le rang était une étiquette grise posée à cheval sur le bord, qui coupait le titre sur mobile. Il passe en bandeau plein, en tête. TOUT EST EN VARIABLES DE PALETTE, y compris le texte posé sur le bandeau du gagnant : `--on-700` bascule en foncé sur les couleurs claires (jaune, menthe, ciel), sans quoi ce bloc serait le premier illisible des trente. ========================================================================== */ /* alignait par le bas et laissait la hauteur au contenu : mesuré, le gagnant rendait 284 px contre 291 à la carte 2, donc il ne dominait pas. Les cartes ont maintenant la même hauteur et le gagnant DÉBORDE vers le haut. */ .rxw-accueil2 .rxw-ac-podium{display:grid;grid-template-columns:1fr 1.2fr 1fr;gap:16px;align-items:stretch} .rxw-accueil2 .rxw-ac-pod{display:flex;flex-direction:column;background:var(--card); border:1px solid var(--am-line);border-radius:12px;overflow:hidden;text-decoration:none;color:inherit; transition:transform .15s ease,box-shadow .15s ease} .rxw-accueil2 .rxw-ac-pod:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(0,0,0,.10)} .rxw-accueil2 .rxw-ac-pod.win{border-color:var(--am-b);box-shadow:0 18px 40px -30px rgba(0,0,0,.55);margin-top:-16px} /* Le bandeau de rang. Plein chez le gagnant, discret chez les deux autres. */ .rxw-accueil2 .rxw-ac-pod .hd{display:flex;align-items:center;gap:9px;padding:7px 14px; background:var(--green-soft,var(--am-cream));border-bottom:1px solid var(--am-line)} .rxw-accueil2 .rxw-ac-pod.win .hd{background:var(--am-b);border-bottom-color:var(--am-b)} /* La médaille : deux rubans et un disque, en currentColor, donc dans la couleur du site. Le chiffre est du texte HTML posé par-dessus le disque, jamais un SVG. */ .rxw-accueil2 .rxw-ac-pod .md{position:relative;flex:0 0 25px;width:25px;height:29px;color:var(--am-a)} .rxw-accueil2 .rxw-ac-pod .md svg{width:100%;height:100%;display:block;fill:currentColor} .rxw-accueil2 .rxw-ac-pod .md b{position:absolute;left:0;right:0;top:10px;height:18px;display:flex; align-items:center;justify-content:center;font-size:12px;font-weight:800;color:var(--on-900,#fff)} .rxw-accueil2 .rxw-ac-pod.win .md{color:var(--card)} .rxw-accueil2 .rxw-ac-pod.win .md b{color:var(--am-a)} /* ⛔ LE CHIFFRE DE LA MÉDAILLE PREND LE TON SOMBRE, JAMAIS LA SIGNATURE : mesuré à 1,71 de contraste sur « Jaune soleil » au rendu de contrôle, illisible. Une couleur claire ne peut jamais servir de texte, c est vrai partout dans cette feuille. */ .rxw-accueil2 .rxw-ac-pod .pos{font-size:10px;font-weight:800;letter-spacing:.09em;text-transform:uppercase; color:var(--am-a)} .rxw-accueil2 .rxw-ac-pod.win .pos{color:var(--on-700,#fff)} /* La photo. object-fit:contain sur un fond neutre : les visuels marchands arrivent en formats et en fonds différents, un recadrage en cover les rognerait au hasard. */ .rxw-accueil2 .rxw-ac-pod .im{display:block;background:var(--green-soft,var(--am-cream)); border-bottom:1px solid var(--am-line);padding:14px;text-align:center} .rxw-accueil2 .rxw-ac-pod .im img{width:auto;max-width:100%;height:118px;object-fit:contain; display:inline-block;mix-blend-mode:multiply} .rxw-accueil2 .rxw-ac-pod.win .im img{height:148px} .rxw-accueil2 .rxw-ac-pod .bd{display:block;padding:16px 16px 0;flex:1} .rxw-accueil2 .rxw-ac-pod .k{display:block;font-size:9.5px;letter-spacing:.09em;text-transform:uppercase; color:var(--am-mid);font-weight:800} .rxw-accueil2 .rxw-ac-pod .t{display:block;font-family:var(--am-serif);font-size:16.5px;line-height:1.3; margin:4px 0 14px;text-align:left} .rxw-accueil2 .rxw-ac-pod.win .t{font-size:19px} /* La note, sans cercle. L'écart au premier est DIT, pas laissé à deviner. */ .rxw-accueil2 .rxw-ac-pod .sc{display:flex;align-items:baseline;gap:5px;margin-bottom:14px} .rxw-accueil2 .rxw-ac-pod .sc b{font-family:var(--am-serif);font-size:34px;line-height:1;color:var(--am-a);font-weight:700} .rxw-accueil2 .rxw-ac-pod.win .sc b{font-size:44px;color:var(--green-txt,var(--am-b))} .rxw-accueil2 .rxw-ac-pod .sc i{font-style:normal;font-size:12px;color:var(--am-mid)} .rxw-accueil2 .rxw-ac-pod .gap{margin-left:auto;align-self:center;font-style:normal;font-size:10px;font-weight:700; color:var(--am-mid);background:var(--green-soft,var(--am-cream));border:1px solid var(--am-line); border-radius:5px;padding:3px 7px;white-space:nowrap} /* La mesure qui distingue : le cœur de la carte. */ .rxw-accueil2 .rxw-ac-pod .why{display:block;border-top:1px solid var(--am-line);padding-top:12px; margin:0;text-transform:none;letter-spacing:0} .rxw-accueil2 .rxw-ac-pod .w1{display:block;font-size:9.5px;letter-spacing:.08em;text-transform:uppercase; color:var(--am-mid);font-weight:800;margin-bottom:3px} .rxw-accueil2 .rxw-ac-pod .w2{display:block;font-size:14px;font-weight:700;color:var(--am-ink);line-height:1.35} .rxw-accueil2 .rxw-ac-pod .w3{display:block;font-size:11.5px;color:var(--am-mid);margin-top:2px;line-height:1.45} .rxw-accueil2 .rxw-ac-pod .ft{display:flex;align-items:center;justify-content:space-between;gap:10px; margin-top:14px;padding:13px 16px;border-top:1px solid var(--am-line)} .rxw-accueil2 .rxw-ac-pod.win .ft{background:var(--green-soft,var(--am-cream))} .rxw-accueil2 .rxw-ac-pod .pr{font-weight:800;font-size:14px;color:var(--am-a)} .rxw-accueil2 .rxw-ac-pod .go{font-size:12px;font-weight:700;color:var(--green-txt,var(--am-b));margin-left:auto} .rxw-accueil2 .rxw-ac-pod .go.btn{background:var(--am-b);color:var(--on-700,#fff);border-radius:8px; padding:9px 15px;font-size:12.5px} @media(max-width:900px){ .rxw-accueil2 .rxw-ac-podium{grid-template-columns:1fr} } /* ========================================================================== 0.9.0 : marques en défilement, axes dépliés. (Le podium a été redessiné le 20/08/2026, son jeu de règles est remonté plus haut, en un seul bloc.) ========================================================================== */ /* ========================================================================== LA BANDE DE MARQUES, RAMENÉE À UNE BANDE, 21/08/2026. Elle faisait 150 px de haut, sur le ton le plus sombre du site, avec des noms en 19 px serif, en plein milieu de la page : elle la coupait en deux et écrasait le podium juste au-dessus. Mesuré en regardant la page entière, pas la section seule. Le libellé était empilé au-dessus du rail et le lien au-dessous : trois lignes pour ce qui tient sur une. Les trois passent côte à côte, la hauteur tombe à 46 px, et le fond quitte le sombre pour le ton doux du site. ⚠ LE DÉFILEMENT CONTINU RESTE, c'est la demande du 11/08 : toutes les marques doivent défiler. Rien n'est retiré, ni marque, ni lien, ni le nombre relevé. ========================================================================== */ .rxw-accueil2 .rxw-marques{background:var(--green-soft,var(--am-cream));color:var(--am-ink); border-top:1px solid var(--am-line);border-bottom:1px solid var(--am-line);padding:13px 0;overflow:hidden} .rxw-accueil2 .rxw-marques .in{display:flex;align-items:center;gap:18px} .rxw-accueil2 .rxw-marques .k{flex:0 0 auto;margin:0;max-width:112px;font-size:9.5px;letter-spacing:.1em; text-transform:uppercase;color:var(--am-mid);font-weight:800;line-height:1.3} .rxw-accueil2 .rxw-ruban{flex:1;min-width:0;overflow:hidden;padding:0; /* Les bords s'estompent : sans ça, les noms sont coupés net et ça fait accident. */ -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent); mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)} .rxw-accueil2 .rxw-piste{display:flex;width:max-content;animation:am-defile 58s linear infinite} .rxw-accueil2 .rxw-marques:hover .rxw-piste{animation-play-state:paused} .rxw-accueil2 .rxw-lot{display:flex;flex-shrink:0} .rxw-accueil2 .rxw-lot a,.rxw-accueil2 .rxw-lot .off{display:flex;align-items:baseline;gap:5px; padding:0 19px;text-decoration:none;color:inherit;white-space:nowrap} .rxw-accueil2 .rxw-lot .off{opacity:.62} .rxw-accueil2 .rxw-lot a:hover{color:var(--green-txt,var(--am-b))} .rxw-accueil2 .rxw-lot .nm{display:inline;font-family:var(--am-sans);font-size:14.5px;font-weight:650} .rxw-accueil2 .rxw-lot .nb{display:inline;font-size:11.5px;font-weight:500;color:var(--am-mid);letter-spacing:0} .rxw-accueil2 .rxw-marques .hub{flex:0 0 auto;margin:0;font-size:12px;font-weight:700; color:var(--green-txt,var(--am-b));text-decoration:none;white-space:nowrap} .rxw-accueil2 .rxw-marques .hub:hover{text-decoration:underline} @keyframes am-defile{from{transform:translateX(0)}to{transform:translateX(-50%)}} @media(prefers-reduced-motion:reduce){ .rxw-accueil2 .rxw-piste{animation:none} .rxw-accueil2 .rxw-ruban{overflow-x:auto} } @media(max-width:700px){ .rxw-accueil2 .rxw-marques .k,.rxw-accueil2 .rxw-marques .hub{display:none} } /* Le pavé : le texte respire, il fait 150 à 200 mots. */ .rxw-accueil2 .rxw-pave p{margin:0 0 14px;line-height:1.7} @media(max-width:900px){ } /* La grille des guides s'adapte à ce qu'il y a. Un pilier seul ne doit pas s'étaler sur toute la largeur : une carte de 1 200 px de large n'est plus une carte. */ .rxw-accueil2 .rxw-guides.n1{grid-template-columns:minmax(0,620px)} .rxw-accueil2 .rxw-guides.n2{grid-template-columns:1.4fr 1fr} .rxw-accueil2 .rxw-guides.n1 .rxw-guide.lead{grid-row:auto} .rxw-accueil2 .rxw-guides.n2 .rxw-guide.lead{grid-row:auto} .rxw-accueil2 .rxw-guides.n1 .rxw-guide.lead .img{height:260px}