/** * case_study — CPT stylesheet. Loaded by inc/enqueue.php ONLY on single * case studies and their archive (rmd_enqueue_cpt_style). * * ── The convention ────────────────────────────────────────────────────────── * One file per CPT: assets/css/cpt/.css, post type spelled exactly * as registered (snake_case, no transform — same 1:1 rule as layout keys). * Drop the file in, and it loads on that CPT's pages. No enqueue code, no * Tailwind rebuild, no touching any other CPT's styles. * * ── Why hand-written and not Tailwind source ──────────────────────────────── * These are plain CSS component rules — no @apply, no Tailwind functions, only * var(--token) references that main.css publishes in @layer theme. So this file * needs NO build step: edit and deploy. Design tokens and utility classes still * come from the shared main.css; only the CPT's own components live here. * * ── @layer components is load-bearing ─────────────────────────────────────── * main.css establishes the layer order (properties, theme, base, components, * utilities) and puts its component rules in `components`. Rejoining that layer * keeps Tailwind UTILITIES winning over these rules, exactly as before — an * unlayered file would silently beat every utility class in the templates. * This file must therefore load AFTER main.css. enqueue.php declares that * dependency; don't drop it. * * Everything is scoped to `.rmd-case` (the
class on case-study pages) so * generic names — .card, .tag, .pill, table — can never collide with parent * Vault/UiCore styles. */ /* ═══ UNLAYERED, ON PURPOSE ─ ne pas « ranger » ce qui suit dans @layer ═══ Quelque chose sur la page embarque un reset NON LAYERÉ : blockquote, dd, dl, figure, h1..h6, hr, p, pre { margin: 0 } Dans la cascade CSS, une déclaration non layerée bat TOUTES les déclarations layerées, quelle que soit la spécificité : `.rmd-case .comment p` (0,2,1) dans @layer components perd contre un `p` (0,0,1) non layeré. La couche tranche AVANT la spécificité. C'est pour ça que seules les règles dont le sélecteur se TERMINE par un nom d'élément étaient touchées (trouvé le 03/08/2026). La règle pour ce fichier : un sélecteur qui finit sur un nom d'élément nu et pose une marge vit ici, pas dans la couche. Les règles qu'expliquait cette note (.hero-badge hr, .comment p, .real h3) sont parties avec l'ancien design le 13/08/2026 ; la note reste, le piège non. */ /* Keyframes and the reduced-motion override stay UNLAYERED, exactly as the Tailwind source emitted them (they were outside @layer components). The header CTA in assets/css/rmd-chrome.css ships its own identical copy of this animation, so the two files stay independent. */ @keyframes rmdCtaShine { 0% { left: -75%; } 25% { left: 125%; } 100% { left: 125%; } } /* ═══════════════════════════════════════════════════════════════════════════════ Archive (/etudes-de-cas/) — moved here from assets/css/rmd-chrome.css, which is SHARED chrome: these card styles are case_study's alone, and W3 makes chrome site-wide, at which point they would have leaked onto every page. Deliberately UNLAYERED, exactly as it was in rmd-chrome.css, so it keeps overriding the sparse .rmd-archive defaults main.css ships in @layer components. ═══════════════════════════════════════════════════════════════════════════════ */ /* ── Case-study archive (/etudes-de-cas/) ─────────────────────────────────── Hand-written so it needs no Tailwind rebuild. Unlayered, so it overrides the sparse @layer defaults in main.css. Uses the case-study tokens (ink #041135, redder #E4004D, purp #3943FF, bord #E9EAF2) to match the single template. */ .rmd-archive { max-width: 1200px; margin: 0 auto; padding: 64px 24px 88px; font-family: 'Poppins', ui-sans-serif, system-ui, sans-serif; color: #041135; } .rmd-archive__head { max-width: 720px; margin-bottom: 44px; } .rmd-arch-eyebrow { display: inline-flex; align-items: center; background: #F3F4FF; color: #3943FF; font-size: 12px; font-weight: 600; letter-spacing: .04em; padding: 7px 16px; border-radius: 9999px; margin-bottom: 18px; } .rmd-arch-title { margin: 0; color: #041135; font-size: 40px; font-weight: 500; letter-spacing: -.02em; line-height: 1.1; } @media (min-width: 768px) { .rmd-arch-title { font-size: 52px; } } .rmd-arch-sub { margin: 16px 0 0; max-width: 560px; font-size: 16px; line-height: 1.6; color: #596980; } .rmd-archive__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } @media (max-width: 900px) { .rmd-archive__grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 620px) { .rmd-archive__grid { grid-template-columns: 1fr; } } .rmd-cscard { background: #fff; border: 1px solid #E9EAF2; border-radius: 16px; overflow: hidden; box-shadow: 0 8px 26px rgba(4, 17, 53, .05); transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; } .rmd-cscard__link { display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none; } .rmd-cscard__media { aspect-ratio: 16 / 10; background: #F9FAFB; overflow: hidden; } .rmd-cscard__image { width: 100%; height: 100%; object-fit: cover; display: block; } /* No featured image → a tasteful branded placeholder (soft brand-tint wash + muted Rhillane mark), so the card reads as intentional, never broken. */ .rmd-cscard__media--empty { background: linear-gradient(135deg, #EEF0FF 0%, #FBFCFE 55%, #F6F4FF 100%); } .rmd-cscard__placeholder { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; } .rmd-cscard__placeholder-logo { width: 46%; max-width: 188px; height: auto; opacity: .5; } .rmd-cscard__body { display: flex; flex-direction: column; flex: 1; padding: 24px 24px 22px; } .rmd-cscard__chip { align-self: flex-start; background: #F3F4FF; color: #3943FF; font-size: 11.5px; font-weight: 600; letter-spacing: .04em; padding: 5px 12px; border-radius: 9999px; margin-bottom: 14px; } .rmd-cscard__title { margin: 0; color: #041135; font-size: 19px; font-weight: 600; line-height: 1.3; } .rmd-cscard__excerpt { margin: 10px 0 0; color: #596980; font-size: 14px; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .rmd-cscard__more { display: inline-flex; align-items: center; gap: 8px; margin-top: 20px; padding-top: 18px; border-top: 1px solid #F0F1F5; color: #E4004D; font-size: 14px; font-weight: 600; } .rmd-cscard__more svg { transition: transform .25s ease; } /* Gradient-border lift on hover — identical feel to the .rmd-case cards. */ .rmd-cscard:hover { transform: translateY(-3px); box-shadow: 0 20px 40px -20px rgba(4, 17, 53, .18); border-color: transparent; background-image: linear-gradient(#fff, #fff), linear-gradient(155deg, #3943FF 58%, #E4004D 85%, #FA9329 100%); background-origin: border-box; background-clip: padding-box, border-box; } .rmd-cscard:hover .rmd-cscard__more svg { transform: translateX(4px); } .rmd-archive .navigation.pagination { margin-top: 48px; } .rmd-archive .nav-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; } .rmd-archive .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 12px; border: 1px solid #E9EAF2; border-radius: 10px; color: #041135; font-size: 14px; font-weight: 500; text-decoration: none; transition: background .15s ease, border-color .15s ease; } .rmd-archive .page-numbers:hover { background: #F3F4F6; } .rmd-archive .page-numbers.current { background: #041135; color: #fff; border-color: #041135; } /* ── Empty archive ────────────────────────────────────────────────────────── Three of the four markets show this on day one, so it is a real page rather than an error state: a grid of placeholder cards, then the message. The cards reuse .rmd-cscard's geometry and the SAME branded placeholder a thumbnail-less study already renders (.rmd-cscard__media--empty + .rmd-cscard__placeholder-logo above) — so an empty archive and a half-filled one look like the same design, not two. No shimmer, deliberately. A skeleton that animates is the web's loading signal: it makes visitors wait for content that never arrives, and a page that looks broken costs more than one that looks empty. These are static frames, and the markup marks them aria-hidden so the grid is decorative to a screen reader — only the heading and the CTA are reachable. */ .rmd-cscard--ghost { background: #fff; border: 1px solid #E9EAF2; border-radius: 16px; overflow: hidden; box-shadow: 0 8px 26px rgba(4, 17, 53, .05); display: flex; flex-direction: column; } /* No hover rule on purpose — .rmd-cscard's lift belongs to a card you can click, and these are frames. The wash and the centred logo come from .rmd-cscard__media--empty / .rmd-cscard__placeholder above; nothing else is redeclared, which is what keeps the two states identical by construction. The ONE exception is height. A real card is 16/10 because it has a screenshot to show; a frame has a wide logo (650×166) floating in dead space, so 16/10 spends ~70px per row on nothing. That matters here: measured with real Poppins at 1857×940, the CTA landed at 878px in French — inside the fold by 62px, which any bookmarks bar or zoom step eats. On a 1366×768 laptop it was 238px below. Safe precisely because the two never co-exist: the frames render in the `else` branch of archive-case_study.php, i.e. only when the query returned nothing, so no visitor can ever see a 16/7 frame beside a 16/10 card and read it as a bug. The logo is width-driven (46%), so a shorter box does not shrink it. */ .rmd-cscard--ghost .rmd-cscard__media { aspect-ratio: 16 / 7; } /* Palette-exact: #596980 is the theme's ONLY muted text colour, and #F0F1F5 the hairline .rmd-cscard__more already uses inside a card. gap 8px matches it too. An earlier pass invented a lighter grey and a lighter rule for "quieter" — off-palette by two values nobody would have spotted until they drifted. */ .rmd-cscard__ghostfoot { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 18px 20px 19px; border-top: 1px solid #F0F1F5; color: #596980; font-size: 13px; font-weight: 500; letter-spacing: .02em; } .rmd-cscard__ghostfoot svg { width: 14px; height: 14px; flex: none; opacity: .85; } /* Overrides the bare one-liner this used to be — same class name, so any markup still emitting a plain

degrades to centred grey text rather than to nothing. */ .rmd-arch-empty { margin: 30px auto 0; max-width: 560px; display: flex; flex-direction: column; align-items: center; text-align: center; color: #596980; font-size: 16px; } .rmd-arch-empty__h { margin: 0; color: #041135; font-size: 24px; font-weight: 500; letter-spacing: -.02em; line-height: 1.28; text-wrap: balance; } .rmd-arch-empty__p { margin: 12px 0 0; font-size: 15.5px; line-height: 1.6; color: #596980; } .rmd-arch-empty__cta { margin-top: 22px; } /* Property-for-property the header CTA (.rmd-cta, assets/css/rmd-chrome.css): 8px radius — NOT a pill — 12/24 padding, 14px/500, gap 10, the --shadow-card triple, and opacity on hover rather than a lift. A first pass had this as a 600-weight pill with a pink glow, which is a different button on the same page. Copied rather than reused, and that is forced, not lazy: .rmd-cta is `display: none` until 768px because the header swaps it for the burger, and rmd-chrome.css enqueues at priority 20 against this sheet's 10 — both unlayered, so chrome PRINTS LAST and its display:none would beat anything at equal specificity here. Adding the class would hide this button on phones. The shine sweep is copied too. Every brand button carries it — .rmd-cta (header), .rmd-fd-cta (footer) and .rmd-case .btn-cta (in-content) — and the last two already appear on the same page as the header's, so "two animations compete" is not a rule this design holds. A CTA without it would be the odd one out. @keyframes rmdCtaShine is declared in this file already (and again in chrome.css, identically), so nothing new is introduced. */ .rmd-arch-empty__btn { display: inline-flex; align-items: center; gap: 10px; position: relative; overflow: hidden; border-radius: 8px; padding: 12px 24px; font-size: 14px; font-weight: 500; text-decoration: none; color: #fff; background-image: linear-gradient(90deg, #D7045A 50%, #FC8831 100%); box-shadow: -4px 0 10px 0 rgba(0, 0, 0, .02), 4px 0 10px 0 rgba(0, 0, 0, .02), 0 4px 10px 0 rgba(0, 0, 0, .02); transition: opacity .25s ease; } .rmd-arch-empty__btn::before { content: ''; position: absolute; top: 0; left: -75%; width: 50%; height: 100%; background: linear-gradient(120deg, transparent, rgba(255, 255, 255, .45), transparent); transform: skewX(-20deg); animation: rmdCtaShine 3s ease-in-out infinite; } .rmd-arch-empty__btn:hover { opacity: .95; color: #fff; } .rmd-arch-empty__btn:focus-visible { outline: 3px solid #3943FF; outline-offset: 3px; } @media (max-width: 620px) { .rmd-arch-empty__h { font-size: 21px; } } @media (prefers-reduced-motion: reduce) { .rmd-arch-empty__btn { transition: none; } .rmd-arch-empty__btn::before { animation: none; } .rmd-cscard, .rmd-cscard__more svg { transition: none; } .rmd-cscard:hover { transform: none; } } /* Small phones — tighten the archive head so the grid arrives sooner. */ @media (max-width: 560px) { .rmd-archive { padding: 40px 18px 64px; } .rmd-archive__head { margin-bottom: 30px; } .rmd-arch-title { font-size: 34px; } } /* ═══════════════════════════════════════════════════════════════════════════ NOUVEAU DESIGN — porté de redesign-case-studies/Case-Study-mariner-version5.html (12/08/2026, branche feat/cs-redesign). Sections : case_hero, client_marquee, serp_proof (.rmd-p1), challenge, method_steps, results_band, serp_grid (.rmd-p2), chart_stack (.rmd-cr), contact_form (.rmd-fm), related_cases (.rmd-oc) + les deux visionneuses #lb / #p2lb. ⚠ rmd-sec de la maquette → rmd-p1 ICI ET DANS LES TEMPLATES : le thème pose déjà .rmd-sec sur chaque ancienne section (rmd_section_open) — sans ce renommage, la preuve v1 restylerait les 11 anciens layouts. ⚠ Les jetons :root de la maquette vivent ici sur .rmd-case (le

des études de cas) : ils héritent partout dans la page et ne fuient pas sur les autres vues du multisite. ⚠ L’ANCIEN bloc @layer components au-dessus disparaît au nettoyage (phase 10) ; le bloc ARCHIVE non-layeré (.rmd-archive/.rmd-cscard) reste, l’archive s’en sert toujours. ═══════════════════════════════════════════════════════════════════════════ */ @layer components { /* ═══════════════════════════════════════════════════════════════════════════ HERO — repris de hero/hero-mariner.html le 05/08/2026, en remplacement de la version précédente (celle-ci ajoute le cadre, la trame, les filets et le pied de carte ; elle abandonne les encoches .rmd-cs__n). Seule adaptation : les chemins perdent un niveau, ../_assets → ./_assets. ═══════════════════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════════════ HERO — étude de cas Mariner Underwear Système repris tel quel de index-EN.html : mêmes tokens, même Poppins, mêmes .rmd-pill / .rmd-chips / .rmd-grad-a, même fond en courbes à 6 % d'opacité. Rien d'inventé ici, seulement une composition nouvelle. La composition vient de la référence iPullRank : le résultat en très grand à gauche, une carte sombre à droite qui porte un avant → après. Le jaune de la référence tombe sur --rmd-orng, qui est déjà dans la charte. Thème clair uniquement, comme index-EN.html : le site n'a pas de mode sombre, en ajouter un ici créerait une incohérence avec le reste. ═══════════════════════════════════════════════════════════════════════════ */ .rmd-ty{ --rmd-ink:#041135; --rmd-purp:#3943FF; --rmd-purpsoft:#F3F4FF; --rmd-slight:#596980; --rmd-bord:#E9EAF2; --rmd-redder:#E4004D; /* --rmd-green aligné sur --rmd-win le 06/08 : la page mélangeait deux verts (#22C55E hero/défi vs #16B364 partout ailleurs). Un seul vert « résultat » désormais. */ --rmd-orng:#FA9329; --rmd-nuk:#F9FAFB; --rmd-win:#16B364; --rmd-green:#16B364; --rmd-shadow-card:-4px 0 10px 0 rgba(0,0,0,.02), 4px 0 10px 0 rgba(0,0,0,.02), 0 4px 10px 0 rgba(0,0,0,.02); --rmd-maxw:1200px; /* ── LE BORD QUI COULE ──────────────────────────────────────────────────── Découpe du bas du panneau de chiffres du hero (.rmd-cs__cardin, plus bas, où l'effet est expliqué en entier). Sorti ici en variable parce que la règle qui l'utilise doit l'écrire DEUX FOIS, une fois pour -webkit-mask-image et une fois pour mask-image : une seule définition, donc aucun risque que les deux copies divergent. Repère de lecture : boîte de 560x34. Plein jusqu'à y=11 (« ligne de fonte »), puis six gouttes qui descendent à 26, 17, 34, 18, 23 et 16 — longueurs volontairement inégales, une goutte régulière ferait feston de napperon, pas matière fondue. 44px de plat à gauche et 16px à droite pour que les angles arrondis restent nets. ⚠ Ne pas remplacer les '%23' par '#' : dans une data-URI le '#' ouvre une ancre et tout ce qui suit est ignoré — le masque ne charge plus et le panneau disparaît d'un coup. ⚠ preserveAspectRatio='none' : le SVG doit s'étirer à la largeur de la carte, sinon les gouttes décollent du bas. */ --rmd-drip:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 560 34' preserveAspectRatio='none'%3E%3Cpath d='M0 11 L44 11 C56 11 62 26 78 26 C94 26 100 11 112 11 L148 11 C158 11 164 17 174 17 C184 17 190 11 200 11 L236 11 C250 11 254 34 270 34 C286 34 292 11 304 11 L338 11 C348 11 352 18 362 18 C372 18 376 11 386 11 L420 11 C432 11 438 23 452 23 C466 23 472 11 484 11 L496 11 C506 11 510 16 520 16 C530 16 534 11 544 11 L560 11 L560 0 L0 0 Z' fill='%23000'/%3E%3C/svg%3E"); font-family:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; color:var(--rmd-ink); line-height:var(--rmd-lh-body); text-align:left; -webkit-font-smoothing:antialiased; } .rmd-ty *{box-sizing:border-box;} .rmd-ty h1,.rmd-ty h2,.rmd-ty h3,.rmd-ty p,.rmd-ty ul,.rmd-ty li,.rmd-ty dl,.rmd-ty dt,.rmd-ty dd{margin:0;padding:0;} .rmd-ty ul{list-style:none;} .rmd-ty img,.rmd-ty svg{display:block;max-width:100%;} .rmd-ty strong{font-weight:600;color:var(--rmd-ink);} /* Remise a zero UNIQUE, et placee AVANT tout composant. Chaque section apportait la sienne, un peu plus longue, plus bas dans la feuille : :where() vaut 0, donc .rmd-cs__photo{margin-left:auto} faisait match nul avec .rmd-ty :where(...figure){margin:0} et perdait sur l'ordre — la photo du hero cessait d'etre calee a droite et le cadre degrade restait seul. */ .rmd-ty :where(h2,h3,p,ul,li,dl,dt,dd,figure,fieldset,legend){margin:0;padding:0;} .rmd-ty :where(fieldset,legend){border:0;} .rmd-grad-a{background-image:linear-gradient(155deg,#3943FF 58%,#E4004D 85%,#FA9329 100%);-webkit-background-clip:text;background-clip:text;color:transparent;} .rmd-pill{display:inline-flex;align-items:center;gap:16px;border:1px solid var(--rmd-bord);background:#fff;border-radius:999px;padding:10px 10px 10px 24px;box-shadow:var(--rmd-shadow-card);} .rmd-pill__t{font-size:14px;font-weight:500;letter-spacing:-.01em;color:var(--rmd-purp);white-space:nowrap;} /* Sous 560px la pastille du hero (372px en nowrap) est plus large que la colonne : elle doit se replier au lieu d'être rognée. Règle PARTAGÉE — toutes les pastilles courtes (« Le défi », « Résultats »…) tiennent sur une ligne et ne changent pas de forme. 12,5px et non 14 (10/08, demande Ayoub) : repliée sur deux lignes à 14px, la pastille pesait autant que le corps de texte (16px) et se lisait comme le début du contenu. C'est une étiquette — elle doit redevenir plus petite que TOUT le texte courant. Padding et gap suivent. */ @media(max-width:560px){ .rmd-pill{max-width:100%;padding:8px 8px 8px 18px;gap:12px;} .rmd-pill__t{white-space:normal;font-size:12.5px;line-height:var(--rmd-lh-title);} } .rmd-pill__arrow{width:32px;height:20px;flex:none;} .rmd-lead{font-size:clamp(16px,2vw,17px);line-height:var(--rmd-lh-body);color:var(--rmd-slight);max-width:520px;} .rmd-chips{display:flex;flex-wrap:wrap;gap:8px 20px;font-size:14px;color:var(--rmd-slight);} .rmd-chip{display:inline-flex;align-items:center;gap:6px;} .rmd-chip svg{width:15px;height:15px;color:var(--rmd-green);flex:none;} /* ── Coque ─────────────────────────────────────────────────────────────── */ .rmd-cs{position:relative;overflow:hidden;background:#fff;} /* opacity .9 → .5 le 10/08 : voir .rmd-p1__bg, les quatre couches de fond de la page sont réglées ensemble. */ .rmd-cs__bg{position:absolute;inset:0;width:100%;height:100%;opacity:.5;pointer-events:none;} /* 10/08 (demande Ayoub) : plus d'air au dessus et en dessous du hero. 40/56 → 56/72 ici, 52/76 → 76/104 en desktop. En padding et non en margin : le blanc de la coque doit courir jusqu'au header et au bandeau clients — une margin aurait laissé le fond de la page apparaître. */ /* ── minmax(0,1fr), PAS 1fr (10/08, mesuré au rendu) ───────────────────── Une piste 1fr ne descend jamais sous le min-content de ses enfants, et la pastille « SEO · Étude de cas · Mode et e-commerce » (nowrap) en impose 372px. Sur un écran de 390px la piste passait donc à 372 dans une boîte de 342 : TOUTE la colonne (pastille, CTA, capture SERP) sortait de 30px à droite, rognée par l'overflow:hidden de la coque — c'était ça, le bord coupé sur mobile. minmax(0,1fr) autorise la piste à rétrécir ; la pastille et le CTA gèrent alors leur propre retour à la ligne (voir leurs règles). */ .rmd-cs__inner{position:relative;max-width:var(--rmd-maxw);margin:0 auto;padding:56px 24px 72px; display:grid;grid-template-columns:minmax(0,1fr);gap:48px;} /* Le paragraphe centré sous les colonnes (.rmd-cs__below) est retiré le 06/08 : il cassait la lecture du hero. À la place, la colonne de gauche enchaîne titre → CTA → chips de provenance. Le CTA reprend trait pour trait le bouton de l'en-tête (dégradé, rayon 8, reflet ctaShine — les keyframes sont déclarées dans le bloc en-tête, la portée est globale). */ /* Accroche au-dessus du CTA : courte, encre, un cran plus grasse que le chapo - elle adresse le visiteur juste avant le bouton. */ /* La colonne espace tout de 22px (gap) : l'accroche flottait a egale distance du chapo et du bouton, elle ne se rattachait a rien. Les marges la COLLENT au bouton : 22+8 = 30px au-dessus, 22-14 = 8px en dessous - une etiquette et son action, comme dans la preuve. */ .rmd-cs__left .rmd-cs__hook{font-size:17px;font-weight:600;color:var(--rmd-ink);margin:8px 0 -14px;} .rmd-cs__cta{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:10px; margin-top:6px;border-radius:8px;padding:14px 28px;font-size:15px;line-height:20px; font-weight:500;color:#fff;text-decoration:none;white-space:nowrap; background-image:linear-gradient(90deg,#D7045A 50%,#FC8831 100%); box-shadow:var(--rmd-shadow-card, -4px 0 10px 0 rgba(0,0,0,.02), 4px 0 10px 0 rgba(0,0,0,.02), 0 4px 10px 0 rgba(0,0,0,.02));transition:opacity .15s ease;} .rmd-cs__cta:hover{opacity:.95;} .rmd-cs__cta::before{content:'';position:absolute;top:0;left:-75%;width:50%;height:100%; background:linear-gradient(120deg,transparent,rgba(255,255,255,.45),transparent); transform:skewX(-20deg);animation:ctaShine 3s ease-in-out infinite;} @media(min-width:1024px){ /* Le bloc de titre se cale au milieu de la hauteur du collage, comme dans la référence. Il ne contient plus que la pilule, le client et le titre : le paragraphe est passé dessous, centré. */ /* V5 : la colonne de droite prend la main (le collage était trop petit) et la gouttière se resserre pour lui rendre de la place. */ /* 07/08 : stretch au lieu de center. La tuile photo doit monter jusqu'au niveau de la pilule « Étude de cas · Référencement Google » — donc la colonne de droite prend TOUTE la hauteur de la rangée, et la photo la remplit de haut en bas. La carte, elle, reste centrée dedans (le flex ci-dessous), ce qui crée un débord haut/bas bien plus généreux qu'un margin fixe et qui s'adapte tout seul à la longueur du titre. */ /* 07/08 : gouttière à 64 px — le titre collait au bloc carte+photo. Retour à align-items:center : en « stretch » le bloc prenait toute la hauteur du titre (~600 px) et montait trop haut. Le collage retrouve une hauteur propre, calée sur la carte (voir min-height plus bas). */ /* 10/08 : colonnes rééquilibrées. Le titre est passé d'un nombre court à une phrase de deux lignes — il lui faut de la largeur, sinon « Puis la première place. » déborde. */ /* 10/08 (soir) : align-items center → start. Depuis que le logo a quitté la colonne gauche, celle-ci est ~110px plus courte que la droite ; le centrage remontait donc la capture bien AU-DESSUS de la pastille d'accroche, et les deux colonnes ne commençaient plus au même endroit. En `start`, le haut du cadre tombe pile sur le haut de « SEO · Étude de cas · Mode et e-commerce ». La colonne droite descend plus bas que la gauche — c'est voulu, c'est elle qui porte le contenu le plus long. */ /* gap 64 → 96 le 10/08 (demande Ayoub) : à 64px le texte et le collage se touchaient presque, les deux colonnes respiraient mal. 96px reste sous la gouttière de 1fr : la colonne texte perd ~16px, pas une ligne. */ /* minmax pour la même raison que la règle de base : qu'aucun nowrap ne puisse re-gonfler une piste. */ .rmd-cs__inner{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:96px;align-items:start;padding:76px 24px 104px;} } /* ── Colonne gauche ────────────────────────────────────────────────────── */ .rmd-cs__left{display:flex;flex-direction:column;align-items:flex-start;gap:22px;} /* .rmd-cs__client (pastille + « MARINER UNDERWEAR » en petites capitales) retiré le 10/08 : le vrai logo le remplace. Il a d'abord été posé ici, en haut de la colonne gauche, puis déplacé en tête du panneau de chiffres — styles avec le panneau, plus bas (.rmd-cs__cardlogo). */ /* Le résultat EST le titre. Deux graisses, comme la référence : le chiffre lourd, la phrase qui l'explique en 300. Interlignage serré pour que les deux lignes se lisent comme un seul bloc. */ /* 37/4.9vw/64 (au lieu de 34/4.5/58) : remonté d'un cran le 06/08 à la demande d'Ayoub. Le nowrap du chiffre tient toujours : « +60 413 visites » fait ~465px à 64px, la colonne en fait ~575. */ /* 10/08 : le titre est devenu une phrase (« Page 5 de Google. Puis la première place. ») et non plus un nombre — donc plus petit, interligne resserré, et SURTOUT plus de nowrap : il doit pouvoir passer à la ligne. */ .rmd-cs__h1{margin:0;font-weight:600;font-size:clamp(32px,4vw,48px);line-height:1.06; letter-spacing:-.04em;color:var(--rmd-ink);text-wrap:balance;} /* > b : uniquement l'enfant direct. Sans le chevron, la règle attrapait aussi le à l'intérieur du et le passait en bloc. */ .rmd-cs__h1 > b{display:block;font-weight:600;} /* 10/08 — le titre porte le avant → après en couleur, exactement comme la carte de preuve juste à côté (page 5 gris → n° 1 dégradé). Le lecteur voit le mouvement avant même d'avoir lu la phrase. « Page 5 » en gris = le point de départ, il ne doit pas peser. « première place » prend le dégradé de .rmd-grad-b, la même encre que « leur visibilité » et que les chiffres de la carte. */ .rmd-cs__was{color:var(--rmd-slight);} /* 12/08 — le volume reprend le GRIS de .rmd-cs__was, celui que portait « Page 5 » dans le tout premier titre (choix d'Ayoub, le violet essayé entre-temps a été écarté). Ce que ça donne, et c'est le bon réglage : un seul accent coloré dans le titre. Le gris pose le décor (le marché), le dégradé chaud marque ce qu'on y a pris. Deux couleurs vives auraient fait deux points d'entrée pour l'œil, donc aucun. Pas de nouvelle classe : .rmd-cs__was existe et porte exactement cette encre. Son nom parle d'un « avant » et sert ici à autre chose, mais mieux vaut ce léger décalage de nom qu'un second jeton pour la même valeur. */ /* Repli solide d'abord : le texte en dégradé repose sur background-clip:text, et sans support le titre deviendrait transparent, donc invisible. Ici, contrairement au reste de la page, c'est le H1 — on ne prend pas le risque. */ .rmd-cs__now{color:var(--rmd-redder);} /* Le dégradé s'arrête à #F2622F et non à #FA9329 : sur blanc, l'orange de la charte ne tient que 2,27:1 — sous le seuil de 3:1 des grands textes. Sur « 4,04 M » (7 signes) ça passait inaperçu ; sur « première place. » les dernières lettres tombaient en plein dedans. Même famille, même effet, mais lisible : #F2622F tient 3,20:1. */ @supports ((-webkit-background-clip:text) or (background-clip:text)){ .rmd-cs__now{background-image:var(--rmd-grad-warm); -webkit-background-clip:text;background-clip:text;color:transparent;} } /* Le + est légèrement plus petit et remonté : à taille égale il pèse autant que les chiffres et on lit « + 60 413 » en trois blocs au lieu d'un. */ .rmd-cs__plus{font-size:.62em;font-weight:600;vertical-align:.22em;margin-right:.04em; color:var(--rmd-redder);letter-spacing:0;} .rmd-cs__h1 small{display:block;margin-top:16px;font-size:clamp(17px,1.9vw,21px);font-weight:300; line-height:var(--rmd-lh-body);letter-spacing:-.005em;color:var(--rmd-slight);max-width:34em;} .rmd-cs__h1 small b{display:inline;white-space:normal;font-weight:500;color:var(--rmd-ink);} /* Bouton + sa micro-ligne forment un seul bloc : sans ce conteneur, la colonne (gap 22 px) les séparait comme deux éléments sans rapport. */ .rmd-cs__ctawrap{display:flex;flex-direction:column;align-items:flex-start;gap:10px;} /* Coche verte reprise des anciennes pastilles : même icône, même taille, même --rmd-green, pour que la réassurance garde le signal visuel qu'elle avait avant. */ .rmd-cs__ctanote{display:flex;flex-wrap:wrap;align-items:center;gap:6px 20px;margin:0; font-size:13px;line-height:var(--rmd-lh-body);color:var(--rmd-slight);} .rmd-cs__ctanote span{display:inline-flex;align-items:center;gap:7px;} .rmd-cs__ctanote svg{width:15px;height:15px;color:var(--rmd-green);flex:none;} /* ── Carte sombre ──────────────────────────────────────────────────────── */ .rmd-cs__right{position:relative;} /* 10/08 : grille « chiffres | photo ». align-items:center cale les chiffres au milieu de la hauteur de la tuile. */ /* Écart resserré (28→20→12, 26→18→10) : les chiffres sont la LÉGENDE de la capture, pas un bloc indépendant. Trop d'air entre les deux et ils se lisent comme deux sections empilées. Plancher à ~10px : en dessous, les deux rayons de 20px se touchent presque et l'intervalle se lit comme un défaut d'alignement, pas comme un écart. */ .rmd-cs__collage{position:relative;display:grid;grid-template-columns:1fr;gap:12px;} @media(min-width:1024px){ /* 10/08 : plus de côte-à-côte. La colonne de droite ne fait que ~570 px ; y loger une carte ET une photo donnait deux éléments de 265 px, tous les deux trop petits. Empilés, chacun prend les 570 px : image large en haut, bandeau de preuve dessous. */ .rmd-cs__collage{grid-template-columns:1fr;gap:10px;align-items:stretch;} } /* Tuile capture : elle dépasse derrière la carte, comme la photo de la référence. object-position:top pour garder le haut du résultat Google, c'est la seule partie qui prouve quelque chose. */ /* La photo de marque, calée à droite. Portrait, donc elle donne sa hauteur au collage ; la carte viendra mordre son coin bas-gauche. */ /* 4/3 et pas 4/5 : la source fait 632×802, soit presque exactement 4/5, donc un cadre 4/5 ne recadrait rien et « AU RYTHME DES VACANCES » restait en bas, coupé en deux par la carte. Un cadre plus large sort ce texte du champ et garde le sujet. */ /* Cadre en dégradé décalé DERRIÈRE la photo : le même filet que la carte, posé en biais. C'est ce qui donne l'effet collage de la référence sans casser la géométrie arrondie du système. */ /* ═══ V5 (07/08) — collage « carte à gauche, tuile photo à droite » ═══ La photo devient une tuile PORTRAIT posée à droite, qui déborde au-dessus et au-dessous de la carte et mord son coin droit. Deux conséquences voulues, à l'inverse de la v3 : — le cadrage redescend au centre : dans ce format haut, « AU RYTHME DES VACANCES » tient entièrement dans l'image, il n'est plus coupé ; — le cadre en dégradé décalé disparaît (il doublait le contour de la tuile et salissait la superposition). */ .rmd-cs__frame{display:none;} /* ═══ 10/08 — le panneau gris est supprimé ═══ Plus de carte : les deux chiffres sont posés en typographie sur la page, à côté de la photo. Le collage devient une grille à deux colonnes, donc plus aucun recouvrement à calculer — c'est ce chevauchement, et ses paddings en pourcentage, qui rendaient le bloc bancal. La tuile garde le ratio EXACT de la source (632/802) : aucun recadrage. */ /* ═══ 10/08 — LA PREUVE COMME VISUEL DE HERO ═══ Fenêtre blanche encadrée : barre de recherche Google en haut, résultat n° 1 dessous, légende en pied. Aucun effet — c'est une capture, elle doit avoir l'air d'une capture, sinon elle ne prouve plus rien. */ /* 10/08 (soir) — DEUX AJOUTS pour que la capture accroche l'œil : un liseré en dégradé et une flèche tracée à la main qui la désigne. Les deux prennent la MÊME encre que les chiffres de la carte (linear-gradient 148deg #E4004D → #FA9329) : c'est UN geste graphique de plus, pas deux. Aucune couleur nouvelle. */ .rmd-cs__proof{position:relative;order:1;padding-top:74px;} /* Pastille de marché : en ABSOLU dans la bande vide au-dessus du cadre, jamais dans le flux. Le cadre est calé pour que son haut tombe exactement sur le haut du H1 (note du 10/08) ; une pastille dans le flux l’aurait poussé de ~50px et aurait cassé ce calage. À DROITE : la gauche de cette bande porte déjà la note et la flèche. ⚠ Préfixée .rmd-ty, sinon la remise à zero « .rmd-ty p{margin:0} » (0,1,1) bat une règle à une seule classe. Même piège que le max-width des logos du bandeau clients. */ .rmd-ty .rmd-cs__mkt{position:absolute;z-index:2;right:0;top:14px;margin:0;} /* Pastille DESHABILLEE dans le hero (11/08, demande Ayoub) : fond blanc, bordure et ombre retires, il ne reste que le drapeau et le mot. Dans la section Preuve la pastille est POSEE SUR la scene grise, elle a besoin de son fond pour s’en detacher ; ici elle flotte sur le blanc du hero, ou ce fond ne separait rien et ajoutait une boite de plus a cote du cadre. L’override est porte par .rmd-cs__mkt : la pastille de la Preuve n’est pas touchee. Le mot « France » RESTE : la legende de la carte ne le dit plus, et un drapeau seul est decoratif - il ne se lit pas dans un lecteur d’ecran (le svg est aria-hidden). */ .rmd-ty .rmd-cs__mkt .mkt{background:none;border:0;box-shadow:none;padding:0;} /* Flèche manuscrite, purement décorative (aria-hidden). Elle déborde volontairement au-dessus de sa bande : posée à la main, pas centrée dans une case. La pointe s'arrête ~6 px AU-DESSUS du cadre — une annotation désigne, elle ne griffonne pas sur la preuve. */ .rmd-cs__doodle{position:absolute;z-index:2;top:0;left:-6px;width:92px;height:auto; color:var(--rmd-redder);transform:rotate(32deg); transform-origin:50% 50%;pointer-events:none;} /* Note « Vrai client. Vraie capture. » — posée juste au-dessus de la flèche, dans la même encre. width:max-content pour qu'elle ne se coupe jamais en deux lignes : sur une note manuscrite, un retour à la ligne subi se voit. Position par défaut = à droite de la flèche dans la bande au-dessus du cadre (disposition mobile / tablette). */ .rmd-cs__real{position:absolute;z-index:2;top:0;left:76px;margin:0;width:max-content; font-size:13px;font-weight:500;line-height:var(--rmd-lh-title);color:var(--rmd-redder);} /* ≥1024 px : la flèche RELIE le titre à la capture. Elle occupe la réserve vide en haut — à droite de la pastille d'accroche, au-dessus du titre — et descend en diagonale jusqu'au bord gauche du cadre, à hauteur du résultat n° 1. C'est le SEUL couloir vraiment libre du hero : partout ailleurs elle croise du texte. Première tentative (queue collée au titre, pointe dans le cadre) : elle touchait « place. » et se lisait comme une rature. Angle : aucune rotation. Le tracé descend naturellement à 28,5°, et la diagonale réserve-vide → cadre fait 27,6°. Il n'y a rien à tourner, juste à mettre à l'échelle — d'où transform:none. Ancrée sur le CADRE et pas sur le titre : c'est la pointe qui doit tomber juste, la queue peut flotter. Taille : 180 px d'abord, ramenés à 112. Une flèche dessinée à la main est un ACCENT — passé une certaine longueur elle devient un objet du hero et capte l'œil avant le titre. La pointe ne bouge pas (c'est elle qui doit tomber juste) : c'est la queue qui se rapproche du cadre. stroke-width en unités du viewBox, donc mis à l'échelle avec la largeur — 4.0 à 112 px de large ≈ 3,3 px à l'écran, un trait de stylo. */ /* 10/08 (soir) — la capture descend de 64px. 64 = hauteur de la pastille d'accroche (43px) + la gouttière de la colonne gauche (22px), à l'unité près : le haut du cadre tombe donc exactement sur le haut du H1. Alignée sur la pastille elle « flottait » encore en haut — une pastille est un petit jeton, un cadre de 250px pèse bien plus lourd à l'œil et paraît démarrer plus haut à hauteur égale. La flèche est REMONTÉE d'autant (34 → -30) : elle est ancrée au cadre, donc sans ça elle descendait avec lui et retombait en travers du titre, alors qu'elle doit rester dans la réserve vide au-dessus. Sa pointe vise désormais le coin haut-gauche de la capture — ce que montrait le croquis. */ /* 10/08 (soir, 5) — NOTE ET FLÈCHE REGROUPÉES, FLÈCHE COURTE ET VERTICALE. Avant : note en haut à gauche, longue flèche en diagonale finissant au coin du cadre. Les mots étaient à ~120px de leur sujet, et « ça » ne veut rien dire tant que l'œil n'est pas arrivé sur la pastille. D'où l'impression de flou. Contrainte dure : la pastille « 1 » est 118px SOUS le haut du cadre. Aucune flèche partant de l'extérieur ne peut l'atteindre sans traverser toute la barre de recherche — c'est ça qui l'obligeait à être longue. Elle vise donc maintenant la COLONNE de la pastille, pointe à 8px au-dessus du cadre, à x=26 (la pastille occupe 18→44). L'œil descend la gouttière tout seul. La note passe juste à gauche de la flèche, à hauteur de la pastille d'accroche, à 9px du tracé : les deux se lisent enfin comme un seul geste. stroke-width remonté à 5.6 parce qu'il suit l'échelle du viewBox — à 68px de large, les 4.2 d'origine ne donnaient plus que 2,1px à l'écran. */ @media(min-width:1024px){ .rmd-cs__proof{padding-top:0;margin-top:64px;} /* ≥1024 : plus de bande de padding, la pastille remonte au-dessus du cadre. -48 = sa hauteur (32) + 16 de respiration. */ .rmd-ty .rmd-cs__mkt{top:-48px;} /* 11/08 (3e passe) : la flèche descend sur la pastille « 1 », la note se pose sur son départ, et le tracé ne touche plus le cadre. Historique, pour ne pas refaire le tour : elle a d’abord visé le coin du cadre (on croyait qu’elle montrait Google), puis elle a été posée à l’horizontale à côté de la note (elle se lisait comme un ornement), puis redressée mais collant le bord du cadre. ⚠ NE PAS CALER CETTE FLÈCHE SUR SA BOÎTE. Une boîte tournée est bien plus large que son encre : à 40° le svg fait 124×89 alors que le tracé n’occupe que 52px de large dedans. C’est ce qui faisait croire que la flèche tenait alors qu’elle mordait le cadre. Le calage vient d’un échantillonnage du TRACÉ : getPointAtLength sur les deux chemins, ramené à l’écran par getScreenCTM (rotation comprise). Résultat, en repère .rmd-cs__proof : rotate(40deg) width:124px top:37px left:-96px pointe (-8, 132) · queue (-53, 16) · encre x-60..-8 y16..135 Un tracé de 52×119 : haut et étroit, entièrement dans le couloir libre (-96..0), pas un pixel sur le cadre. La pastille est à x 18..44 : la pointe s’arrête 26px avant et la désigne sans entrer. ⚠ Les quatre valeurs vont ENSEMBLE et se recalculent. */ .rmd-cs__doodle{top:37px;left:-96px;width:124px;transform:rotate(40deg);} .rmd-cs__doodle path{stroke-width:4;} /* 10/08 : note descendue de -52 à -45. Le blanc entre le bas du texte et le départ du tracé passe de ~12px à ~5 : au-delà, la flèche se lit comme un élément séparé posé à côté, au lieu de partir de la phrase. C'est la NOTE qui bouge, pas la flèche : déplacer la flèche déplacerait aussi sa pointe, donc ce qu'elle désigne. Le calage à gauche est conservé (-112 pour la note, queue du tracé à -109) : les deux partent du même bord, c'est ce qui les relie. */ /* CENTRÉE sur la queue du tracé (x=-53) et posée au-dessus : c’est la seule façon de mettre les deux sur le même axe, et sans ça les mots flottaient à 90px de leur flèche. width fixe + text-align:center font ce centrage sans connaître la longueur de la phrase. Elle dépasse de 7px à droite du bord gauche du cadre, mais à y -24..-6, donc AU-DESSUS de lui (le cadre commence à y=0). */ .rmd-cs__real{top:-24px;left:-153px;width:200px;text-align:center;} } /* Liseré : le dégradé est le FOND de la figure, la face blanche est posée dessus avec 2 px de rayon en moins. Même technique que .rmd-card:hover dans index-EN.html — un border-image ne se coupe pas proprement sur un rayon de 20 px, ceci si. */ .rmd-cs__serp{position:relative;margin:0;padding:2px;border:0;border-radius:20px; background-image:linear-gradient(148deg,#E4004D 0%,#EE453C 50%,#FA9329 100%); box-shadow:0 24px 56px -34px rgba(4,17,53,.34);} .rmd-cs__serpface{background:#fff;border-radius:18px;overflow:hidden;} .rmd-cs__serphead{padding:14px 18px;border-bottom:1px solid var(--rmd-bord);} .rmd-cs__serphead img{display:block;width:100%;height:auto;} /* Le résultat est décalé à gauche pour laisser la place à la pastille de rang. */ .rmd-cs__serpres{position:relative;padding:18px 18px 16px 54px;} .rmd-cs__serpres img{display:block;width:100%;height:auto;} /* Cadre vert sur le résultat gagnant (11/08, demande Ayoub) : le même signal que la pastille, donc le même jeton --rmd-win. En CSS et non peint dans le PNG - la capture doit rester une capture, et un cadre dessiné dedans se pixelise dès qu’elle change d’échelle (elle est recadrée en bande sur mobile). Sur l’IMAGE et pas sur .rmd-cs__serpres : le bloc contient la gouttière de 54px de la pastille, le cadre aurait enfermé le numéro avec le résultat. box-sizing:border-box, sinon width:100% + padding + bordure font déborder l’image de 20px hors de sa colonne. */ .rmd-cs__serpres:not(.rmd-cs__serpres--lose) img{box-sizing:border-box;padding:8px; background:#fff;border:2px solid var(--rmd-win);border-radius:10px;} /* Le deuxième résultat (11/08) : estompé, pas supprimé - c’est sa présence qui donne sa valeur à la première place. Valeurs reprises telles quelles de .r--lose dans la section Preuve : une seule façon d’estomper un perdant dans la page. padding-top:2px et aucun filet : Google ne trace pas de ligne entre ses résultats. L’écart vient du retrait bas du premier bloc (16px). */ .rmd-cs__serpres--lose{padding-top:2px;opacity:.4;filter:grayscale(1);} /* ── Capture cliquable (11/08) ──────────────────────────────────────────── La capture du hero est un RECADRAGE : sur mobile elle est coupée à droite (voir le zoom-recadrage plus bas), et même sur bureau elle ne montre que le premier résultat. Le lecteur qui veut vérifier n'avait pour seule porte que la section Preuve, à deux écrans de là. Elle ouvre donc la MÊME visionneuse (#lb) que les captures de la Preuve, sur le MÊME fichier — pas une deuxième lightbox : il y en a déjà deux dans la page (#lb, #p2lb) et leur cohabitation a coûté un renommage complet. Le lien enveloppe la barre + le résultat, PAS la légende : la légende est du texte, pas la preuve, et elle reste sélectionnable. display:block et non inline-flex — les deux enfants sont des blocs et doivent garder leur flux (filet, retraits, pastille absolue). */ .rmd-cs__shot{position:relative;display:block;color:inherit;text-decoration:none; cursor:zoom-in;} /* Calqué sur .r__go de la section Preuve : même pastille, même apparition. Le hero est la première chose vue — si les deux se comportaient différemment, le lecteur apprendrait deux fois la même chose. */ .rmd-cs__go{position:absolute;right:10px;bottom:10px;display:inline-flex;align-items:center; gap:6px;font-size:11.5px;font-weight:500;color:#fff;background:rgba(4,17,53,.86); border-radius:9999px;padding:6px 11px;opacity:0;transform:translateY(4px); transition:opacity .22s ease,transform .22s ease;pointer-events:none;} .rmd-cs__shot:hover .rmd-cs__go,.rmd-cs__shot:focus-visible .rmd-cs__go{opacity:1;transform:none;} .rmd-cs__shot:focus-visible{outline:2px solid var(--rmd-purp);outline-offset:3px;} /* Au doigt il n'y a pas de survol : la pastille resterait invisible et rien n'indiquerait que la capture s'ouvre — or c'est justement là qu'elle est recadrée et qu'on a le plus besoin de l'agrandir. */ @media (hover:none){ .rmd-cs__go{opacity:1;transform:none;} } @media (prefers-reduced-motion:reduce){ .rmd-cs__go{transition:none;} } /* Pastille de rang : bleu de marque → rouge → VERT, le 10/08. Le bleu se fondait dans le titre du résultat Google, lui-même bleu. Le vert règle ça et aligne le hero sur la section Preuve, dont la pastille du gagnant (.r__num) est déjà verte : même signal, même couleur, deux fois dans la page. ⚠ Blanc sur #16B364 = 2,74:1, sous le seuil AA. Acceptable ICI parce que la pastille est aria-hidden et que l'information « position 1 » est portée en clair par la légende dessous — jamais par ce seul chiffre. Ne pas réutiliser ce couple pour du texte qui porte du sens à lui seul. 10/08 — CALAGE VERTICAL. Elle était à top:18px, soit exactement le retrait haut de .rmd-cs__serpres : elle se collait donc au bord supérieur du résultat, à hauteur du favicon, et paraissait décrochée vers le haut. Elle est maintenant centrée sur le bloc résultat (top:50% + translateY). Pourquoi centrer plutôt que la caler sur le titre : la pastille numérote le RÉSULTAT ENTIER (favicon + titre + description), pas sa première ligne. Le centre est aussi la seule valeur qui tienne aux deux tailles — sur mobile l'image passe en hauteur fixe (96px, recadrage object-fit) et un décalage en px calculé sur le bureau serait faux ici. */ .rmd-cs__rank{position:absolute;left:16px;top:50%;transform:translateY(-50%); width:26px;height:26px;border-radius:50%; background:var(--rmd-green);color:#fff;display:grid;place-items:center; font-size:13px;font-weight:600;line-height:1;font-variant-numeric:tabular-nums;} /* ⚠ APRÈS .rmd-cs__rank, et pas avant : même spécificité (une classe), donc seule la position dans la feuille départage. Posée avant, elle perdait et la pastille restait VERTE - invisible à l’œil parce que le bloc est en grayscale(1), qui désature le vert en gris. Ça marchait par accident : sans le filtre, la deuxième place repassait au vert du gagnant. Valeurs identiques à .r--lose .r__num (section Preuve). */ .rmd-cs__rank--lose{background:var(--rmd-bord);color:#98A2B3;} .rmd-cs__serpcap{padding:0 18px 15px 54px;font-size:11.5px;line-height:var(--rmd-lh-body); color:var(--rmd-slight);} /* État d'erreur : le script remplace le contenu par du texte, donc le liseré dégradé doit repasser en blanc, sinon le message s'affiche sur le dégradé. `background:` (raccourci) écrase bien background-image. */ .rmd-cs__serp.is-missing{display:flex;align-items:center;justify-content:center; min-height:120px;padding:24px;background:#fff; border:1px dashed var(--rmd-bord);box-shadow:none; font-size:12px;color:#B9C0CC;} /* La trame quadrillée (.rmd-cs__mesh, coin haut-gauche de la photo) a été retirée le 06/08 à la demande d'Ayoub — c'est elle, et pas le cadre en dégradé, qui devait partir. */ /* Carte : gros rayon, et un LISERÉ EN DÉGRADÉ obtenu par double fond — exactement la technique déjà utilisée par .rmd-card:hover dans index-EN.html. Un border-image ne se coupe pas proprement sur un rayon de 30 px, celle-ci si. */ /* -68 px et pas -124 : avec la photo passée en 4/3 elle est bien plus courte, et l'ancien chevauchement n'en laissait plus qu'un bandeau. */ /* Marge positive : la carte se pose SOUS la photo, elle ne la recouvre plus. */ /* 07/08 : carte passée au clair. Sur le marine, le bleu de marque (#3943FF) ne tient que 3,01:1 — d'où l'orange par défaut. Sur blanc il monte à 6,14:1, donc la carte peut enfin porter la couleur primaire. Le liseré dégradé 3 couleurs devient un filet simple : une seule couleur par carte. */ /* 10/08 — CARTE DE PREUVE, version claire. Blanc, filet fin, ombre douce : elle se lit comme un document, pas comme une plaquette. Pas de dégradé de fond, pas de halo — la hiérarchie vient de la taille du chiffre et de l'espace, rien d'autre. */ /* 10/08 (soir) — .rmd-cs__card et .rmd-cs__cardface SUPPRIMÉS. Deux cartes blanches empilées dans la même colonne, chacune avec son cadre / son rayon / son ombre : le regard s'arrêtait à la frontière au lieu de descendre. Les chiffres deviennent le PIED de la capture (.rmd-cs__cardin, plus bas) et il ne reste qu'un contour pour l'ensemble. La colonne de droite y gagne aussi ~36 px de hauteur. */ /* 10/08 : la ligne de source (« Google Search Console · Semrush… ») est retirée du hero — trop d'informations à l'ouverture. Le sourcing reste porté par les sections de preuve plus bas dans la page. */ /* Le bloc « lignes » (petite carte blanche au coin bas-gauche de la carte sombre) a été retiré le 06/08 à la demande d'Ayoub. */ /* La carte fait maintenant toute la largeur de la colonne : les deux chiffres passent côte à côte, séparés par un filet vertical. Empilés, ils rendaient la carte deux fois trop haute pour la photo. */ /* 10/08 (soir) : le bloc porte lui-même sa peau — .rmd-cs__card et .rmd-cs__cardface n'existent plus, deux div pour une seule surface. GRIS MAT, SANS OMBRE, et non plus blanc + ombre. C'est le correctif du heurt visuel : deux surfaces blanches ombrées empilées se lisaient comme deux objets rivaux et le regard s'arrêtait entre les deux. Ici la capture garde le blanc, le liseré et l'ombre — donc l'attention — et les chiffres se posent derrière, en retrait. Même rayon (20px) que le cadre pour que les deux restent visiblement de la même famille. */ /* 10/08 (soir, 2) — HAUTEUR ET ALIGNEMENT. Le panneau faisait 153px sous une capture de 248 : une bande écrasée, sans rapport de proportion avec elle. Il monte à ~180px (≈ 72 % du cadre) par l'espace seul — aucun texte ajouté, le hero est déjà chargé. Le retrait gauche de 56px n'est pas décoratif : c'est EXACTEMENT là que commence la légende de la capture (2px de liseré + 54px de gouttière de pastille). Les deux blocs partagent donc la même verticale, et c'est ça qui empêche l'œil de buter en passant de l'un à l'autre. L'asymétrie gauche/droite est celle du cadre au-dessus, pas une erreur de calage. */ /* 10/08 (soir, 3) — LOGO EN RAIL À GAUCHE, plus en bandeau de tête. Le panneau passe donc à trois colonnes : logo | chiffre | progression. Deux conséquences assumées : — le retrait de 56px qui alignait les chiffres sur la légende de la capture disparaît : c'est le logo qui occupe la gauche désormais. — le panneau redevient sur une seule rangée, donc ~167px au lieu de 226. 10/08 (soir, 4) — LE FILET APRÈS LE LOGO EST AJOUTÉ. Il avait été écarté faute de place : un filet coûte son retrait + une gouttière, soit à peu près ce qu'il faut à « +60 413 » pour tenir à 48px. La place est reprise ailleurs plutôt que sur le chiffre — retraits du panneau 26→22, gouttières 24→20. Chaque colonne de chiffres garde 187px pour un besoin de ~174px. Réduire le KPI aurait été le mauvais échange : c'est lui que la section vend. */ /* 10/08 (nuit) — BAS QUI COULE, « melting ». 1re version = un simple fondu vers le blanc : ça ne coulait pas, ça s'effaçait. Refait avec une VRAIE découpe : le bas du panneau est un bord irrégulier, six gouttes de longueurs différentes qui pendent (la plus longue 23px, la plus courte 5px). C'est la forme qui fait le « melting », pas la couleur. Trois choses travaillent ensemble, retirer l'une casse l'effet : 1. LE MASQUE À DEUX CALQUES fait la découpe. calque 1 = un aplat qui couvre le panneau sauf ses 34 derniers px. calque 2 = le SVG des gouttes, étiré sur toute la largeur, collé en bas. Les deux calques s'additionnent (défaut de mask-composite), donc corps plein + bord qui dégouline. Le masque agit sur l'ÉLÉMENT, pas sur une couche : le fond, le contour ET les deux filets intérieurs sont découpés du même coup. Un cache blanc posé par-dessus, lui, aurait laissé les trois traits traverser les gouttes. ⚠ preserveAspectRatio='none' est obligatoire : sans lui le SVG garde son ratio et les gouttes ne touchent plus le bas sur une carte large. ⚠ le '#' d'une couleur doit s'écrire %23 dans une data-URI, sinon tout ce qui suit est lu comme une ancre et le masque ne charge pas. 2. LA LIGNE DE FONTE est à 23px du bas (y=11 sur les 34 du SVG). C'est là que le panneau cesse d'être plein ; en dessous il n'y a plus que les gouttes. Le retrait bas de 52px laisse donc 29px de plein sous le texte, soit le retrait d'origine (30px) : le texte n'a pas bougé, seul le bord a changé. ⚠ 52 et 23 sont un couple — toucher au SVG = recalculer. 3. LA CHALEUR est un calque de FOND (donc derrière le texte). Elle culmine en bas, c'est-à-dire exactement dans les gouttes : elles se lisent comme de la matière qui coule, pas comme un bord rogné. Dégradé repris de la charte (#E4004D → #EE453C → #FA9329), la MÊME encre que « +60 413 » et « n° 1 ». 4. PLUS DE CARTE DU TOUT (10/08, demande Ayoub, en deux temps). 1er temps, le contour : border:0 sur les quatre côtés. 2e temps, ce qui restait — et c'était ça le vrai coupable : l'APLAT. Un fond gris plein, même à 1 % d'écart avec le blanc, reste un rectangle ; il gardait une arête franche en haut et sur les deux côtés, donc l'objet continuait de se lire comme une carte. Retirer le contour n'y changeait rien. Donc : background-color:transparent, et la chaleur passe d'un dégradé LINÉAIRE (une bande, forcément rectangulaire) à un dégradé RADIAL centré sous le bord bas (50% 114%). Une ellipse n'a pas d'arête : la couleur s'éteint toute seule vers le haut ET vers les côtés. Plus aucun bord droit nulle part — il ne reste à l'œil que les chiffres, les deux filets de séparation, et la coulée chaude qui goutte. ⚠ Réglage du radial : il doit être éteint (arrêt à 0) AVANT d'atteindre le haut du bloc, sinon l'arête du haut revient. Avec ry=86 % et le centre à 114 %, le haut est à 1,33 de rayon, donc bien au-delà du dernier arrêt (70 %). Changer la hauteur du bloc ne casse rien, ces valeurs sont relatives ; changer les arrêts, si. ⚠ C'est la COULEUR seule qui porte maintenant la forme des gouttes. Baisser les arrêts ne « calme » pas l'effet, ça l'efface. Pour plus de discrétion, raccourcir les gouttes dans le SVG — pas éclaircir. border-radius retiré : sans aplat il n'arrondissait plus rien, et le radial gère lui-même ses bords. --rmd-bord reste utilisé à l'intérieur (rail du logo, filet entre les deux chiffres) : séparer n'est pas encadrer. 5. LA COULÉE EST CALÉE EN PX, PAS EN %, depuis le 10/08 (« Visites venues de Google » tombait dedans et devenait illisible). Le radial était dimensionné en pourcentage de la HAUTEUR du bloc : ry=86 % + centre à 114 % le faisaient commencer à ~54 % de la hauteur, donc en plein dans la ligne de texte, et le problème EMPIRAIT à chaque fois qu'on agrandissait un chiffre. Rayon vertical en px (78) + centre à calc(100% + 18px) : la coulée occupe désormais les 37 derniers px, un point fixe, quelle que soit la hauteur du bloc. Le retrait bas de 60px laisse donc ~23px de blanc franc sous le texte avant que la moindre couleur commence. ⚠ Règle à retenir : ce qui doit rester à distance d'un TEXTE se mesure en px. Un % se recalcule quand le bloc grandit, et le fait grandir avec lui. 6. PLUS DE RETRAIT LATÉRAL (padding-x 22 → 0). Un retrait sert à décoller un contenu du bord de sa carte ; il n'y a plus de carte. Le bloc s'aligne donc maintenant sur le bord gauche de la capture au-dessus, ce qui est un calage visible, pas un décrochement de 22px sans raison. Les 44px récupérés vont aux chiffres et au logo, que la version précédente étranglait. Sans support de mask (navigateur très ancien) : bloc fermé, bande chaude, rien de cassé. */ .rmd-cs__cardin{position:relative;order:2;display:grid;grid-template-columns:auto 1.2fr 1fr; gap:0 18px;align-items:stretch; padding:28px 0 60px; background-color:transparent; background-image:radial-gradient(88% 78px at 50% calc(100% + 18px), rgba(250,147,41,.50) 0%, rgba(238,69,60,.30) 36%, rgba(228,0,77,.12) 55%, rgba(228,0,77,0) 70%); border:0; -webkit-mask-image:linear-gradient(#000,#000),var(--rmd-drip); -webkit-mask-size:100% calc(100% - 34px),100% 34px; -webkit-mask-position:top left,bottom left; -webkit-mask-repeat:no-repeat,no-repeat; mask-image:linear-gradient(#000,#000),var(--rmd-drip); mask-size:100% calc(100% - 34px),100% 34px; mask-position:top left,bottom left; mask-repeat:no-repeat,no-repeat;} /* Rail pleine hauteur (align-items:stretch sur le panneau), logo centré dedans : il se cale sur le milieu du bloc de chiffres, pas sur leur première ligne. Le filet est le MÊME que celui qui sépare les deux chiffres — une seule façon de séparer dans ce panneau. */ .rmd-cs__cardlogo{display:flex;align-items:center;justify-content:center; margin:0;padding:0 18px 0 0; border-right:1px solid var(--rmd-bord);} /* 24 → 36 (10/08) → 44px (12/08, demande Ayoub). Le logo occupe un RAIL à gauche des deux chiffres : sa hauteur ne coûte rien, sa LARGEUR se prend sur eux. Le fichier fait 197×70, donc chaque pixel de hauteur coûte ~2,8px de large au rail. ⚠ Plafond MESURÉ sur la page rendue, pas estimé : 36px → rail 120 · « 60 413 » sur une ligne · carte 294px 44px → rail 143 · « 60 413 » sur une ligne · carte 294px 48px → rail 154 · dernier palier sain 52px → la pile « page 5 → n° 1 » passe à la ligne, carte 306px 44 laisse quatre pixels de marge avant la rupture. 48 marcherait aujourd’hui mais ne laisserait plus rien : un chiffre d’une position de plus casserait la carte. ⚠ Valeur propre à CE fichier. Un logo plus carré (Kindy, 155×155) ne prendrait que 44px de large au rail — ne pas transposer d’un client à l’autre sans regarder son ratio. */ .rmd-cs__logo{display:block;height:44px;width:auto;} .rmd-cs__row + .rmd-cs__row{border-left:1px solid var(--rmd-bord);padding-left:18px;} /* Hiérarchie : le KPI principal est nettement plus gros que la progression. Deux chiffres à la même taille = deux mesures ; tailles différentes = un chiffre et sa précision. 48 → 52px le 10/08. Le plafond n'est pas esthétique, il est mesuré : la colonne fait ~217px (colonne droite du hero 553px, moins le rail du logo, les gouttières et le filet, réparti en 1,2fr). « +60 413 » occupe ~3,43 em — 5 chiffres à 0,6 em, l'espace insécable, le « + » réduit à 0,62 em, moins l'interlettrage négatif. À 52px ça fait ~178px, il reste 39px de marge. À 60px on serait à 206px : ça tiendrait encore, mais le chiffre dépasserait le h1 du hero (48px max) juste à côté, et la promesse passerait après la preuve. C'est ÇA la limite, pas la place. */ .rmd-cs__row--lead .rmd-cs__val{font-size:clamp(40px,4.6vw,52px);} /* Deux colonnes alignées, comme la référence : les chiffres à gauche, ce qu'ils veulent dire à droite. Le libellé coiffe la ligne sur toute la largeur. Colonne de gauche à largeur fixe pour que « 4,04 M » et le bloc avant → après démarrent exactement au même endroit. */ /* Colonne de valeurs à 126px et types réduits : la carte étant passée à 72 % de la colonne, l'ancienne grille à 160px ne laissait plus assez de place au texte et chaque description partait sur trois lignes. */ /* V5 : colonne unique. La carte a perdu ~30 % de largeur au profit de la tuile photo ; la grille 118px + texte y partait sur trois lignes. */ /* 10/08 (soir, 2) : 9→13px. Le panneau gagne en hauteur par la respiration interne plutôt que par du padding seul — sinon les trois lignes restent tassées au milieu d'un cadre devenu grand, ce qui se voit encore plus. */ .rmd-cs__row{display:grid;grid-template-columns:1fr;gap:13px;align-items:start;} /* V5 : types remontés — la carte a gagné en surface, l'ancienne échelle y flottait. */ /* Libellé en gris neutre : les chiffres portent maintenant le dégradé, un libellé bleu au-dessus aurait remis une 2e couleur dans la carte. */ /* 11/08 — DURÉE : « 13 mois » ne doit plus apparaître nulle part sur la page (demande Ayoub). Partout remplacé par « quelques mois ». Quatre endroits, tous du texte visible : sous-titre du h1 « En 13 mois, sans publicité. » libellé de ce panneau « Sur 13 mois » → « En quelques mois » libellé KPI de Preuve « … en 13 mois » titre des Résultats « … par le référencement naturel en 13 mois. » ⚠ Le libellé passe de 11 à 16 caractères, et il est en majuscules avec 0,15em d'interlettrage : 101px → 147px. Il tient (colonne de 207px), mais c'est le libellé le plus long du panneau désormais. Un mot de plus ici et il passera à deux lignes, ce qui décalerait le chiffre en dessous. ⚠ Les autres durées de la page (8 mois, 90 jours, un an) appartiennent à d'AUTRES clients : elles ne sont pas concernées. */ .rmd-cs__lbl{grid-column:1 / -1;font-size:11.5px;font-weight:500;letter-spacing:.15em; text-transform:uppercase;color:var(--rmd-slight);} /* 07/08 : chiffres en dégradé — exactement celui de .rmd-grad-b, le même que « leur visibilité » du bandeau clients. Repris trait pour trait (angle, arrêts, couleurs) pour que ce soit la MÊME encre, pas une variante. */ .rmd-cs__val{font-size:clamp(38px,4.6vw,52px);font-weight:600;line-height:1;letter-spacing:-.035em; font-variant-numeric:tabular-nums; background-image:linear-gradient(148deg,#E4004D 0%,#EE453C 50%,#FA9329 100%); -webkit-background-clip:text;background-clip:text;color:transparent;} /* Descripteur court, calé optiquement sur le haut du chiffre. 13,5 → 14,5px le 10/08. Il était donné comme illisible, mais la taille n'était PAS la cause principale : le texte est déjà en encre pleine (il est entièrement dans le ci-dessous, qui force --rmd-ink), il était juste posé sur la coulée colorée. Le vrai correctif est le point 5 — la coulée descend. Le +1px vient en plus, pas à la place : c'est la LIGNE DU BAS du bloc, celle qui doit rester la plus nette. ⚠ La couleur déclarée ici ne se voit pas dans ce balisage-là. Si un jour un descripteur est écrit sans , il sortira en gris --rmd-slight. */ .rmd-cs__desc{font-size:14.5px;line-height:var(--rmd-lh-body);letter-spacing:.005em;color:var(--rmd-slight);padding-top:2px;} .rmd-cs__desc b{display:block;font-weight:500;letter-spacing:.03em;color:var(--rmd-ink);margin-bottom:4px;} /* ── Le marché, sous les deux chiffres (11/08, demande Ayoub) ───────────── Le panneau annonçait « +60 413 visites » et « page 5 → n° 1 » sans dire OÙ. Sur un site à quatre marchés (ma / fr-fr / en-us / en-ae), un visiteur peut lire ces chiffres comme un total mondial ; ce sont des mesures françaises. La capture le disait déjà (« … · France · position 1 ») mais seulement pour LA requête montrée, pas pour les deux chiffres. Posée en pied de panneau et non dans un libellé : elle porte sur les DEUX lignes à la fois. Dans un libellé (« EN QUELQUES MOIS · FRANCE ») il aurait fallu la répéter au-dessus de chaque chiffre, et « PROGRESSION · FRANCE » ne tenait pas sur une ligne dans une colonne de 1fr. (Le libellé disait « SUR 13 MOIS » jusqu'au 11/08 — voir la note sur la durée, plus bas dans ce même bloc.) grid-column:1/-1 — le panneau est une grille (rail du logo + deux colonnes) : sans ça la ligne se serait glissée dans la 1ʳᵉ colonne, celle du rail, large de ~101px. Elle vaut aussi sur mobile, où la grille tombe à une seule colonne. Le filet est le MÊME que celui qui sépare les deux chiffres (1px --rmd-bord) : une seule façon de séparer dans ce panneau. Il est ici horizontal parce que la ligne coiffe la largeur, pas une colonne. ⚠ Reste au-dessus des 34px du bas : c'est la zone rongée par le masque de la coulée (--rmd-drip). Le retrait bas de 60px du panneau lui laisse 26px de dégagement — descendre l'un ou l'autre ferait manger le texte. */ /* ⚠ SÉLECTEUR À DEUX CLASSES, obligatoire : la remise à zéro « .rmd-ty h1,…,.rmd-ty p,… {margin:0} » vaut (0,1,1) et écrase un .rmd-cs__scope seul. Écrite en une classe, la règle passait mais PAS son margin-top : le filet remontait à ~6px sous « n° 1 » et le soulignait. C'est le même piège que le max-width des logos du bandeau clients. 34px et non 26 : l'écart part du BAS DE LA RANGÉE, pas du dernier glyphe. Le retrait bas du panneau (60px) est fixe, donc l'ajout rallonge le panneau sans réduire le dégagement de la coulée. */ .rmd-ty .rmd-cs__scope{grid-column:1 / -1;margin:34px 0 0;padding-top:16px; border-top:1px solid var(--rmd-bord); font-size:11.5px;line-height:var(--rmd-lh-body); letter-spacing:.01em;color:var(--rmd-slight);} .rmd-cs__scope b{font-weight:600;color:var(--rmd-ink);} /* Avant → après empilé, la flèche sur sa propre ligne : c'est ce qui fait lire les deux chiffres comme un mouvement et pas comme deux mesures. */ /* 10/08 : écart 4→10px. Avec la marge de la flèche (3px), il reste 13px de part et d'autre au lieu de 6 : « page 5 », la flèche et « n° 1 » se touchaient presque et le mouvement ne se lisait plus comme trois temps. Les deux valeurs travaillent ensemble — changer l'une sans l'autre redéséquilibre le haut et le bas de la flèche. */ .rmd-cs__stack{display:flex;flex-direction:column;align-items:flex-start;gap:10px;} /* Le « avant » reste gris : c'est le point de départ, il ne doit pas peser autant que le « après ». */ .rmd-cs__from{font-size:clamp(20px,2.3vw,27px);font-weight:500;line-height:1;letter-spacing:-.03em; color:var(--rmd-slight);font-variant-numeric:tabular-nums;} /* La flèche prend la teinte de départ du dégradé : elle appartient au même bloc que le chiffre d'arrivée, elle ne doit pas rester bleue toute seule. */ .rmd-cs__arrow{width:26px;height:12px;flex:none;color:var(--rmd-redder);margin:3px 0;} /* 10/08 : la progression descend à 36 px. Elle était à 52 px, soit PLUS grosse que le KPI principal — la hiérarchie était inversée. */ .rmd-cs__to{font-size:clamp(31px,3.5vw,40px);font-weight:600;line-height:1;letter-spacing:-.035em; font-variant-numeric:tabular-nums; background-image:linear-gradient(148deg,#E4004D 0%,#EE453C 50%,#FA9329 100%); -webkit-background-clip:text;background-clip:text;color:transparent;} /* .rmd-cs__rule et .rmd-cs__foot retirés le 07/08 : les filets et la ligne « 247 mots-clés / 157 en Top 3 » chargeaient la carte. L'espace sépare. */ /* Sous 1024 px la grille du collage repasse à une colonne (déclarée plus haut) : la tuile photo d'abord, les chiffres dessous. Rien à annuler — il n'y a plus ni recouvrement ni panneau à défaire. */ @media(max-width:1023px){ .rmd-cs__proof{order:1;} } /* Sous 560 px les deux chiffres côte à côte deviennent illisibles : la carte repasse à une colonne, filet horizontal. */ @media(max-width:560px){ /* La flèche rétrécit avec le cadre : sa pointe est calée sur la hauteur de la bande, donc les deux valeurs changent ensemble. */ .rmd-cs__proof{padding-top:56px;} /* La bande passe de 74 a 56px ici : la pastille de marche doit remonter avec, sinon elle mord le haut du cadre. 6 + ses 43px de haut = 49, soit 7px sous le cadre. */ .rmd-ty .rmd-cs__mkt{top:6px;} .rmd-cs__doodle{width:68px;left:-2px;} /* Le CTA cumulait white-space:nowrap et overflow:hidden : dès que la colonne devenait plus étroite que son texte, « gratuit → » était tronqué SANS indice visuel. Sous 560px il passe pleine largeur, centré, retour à la ligne autorisé — le motif standard d'un bouton mobile, plus rien à couper. align-self:stretch sur le wrap : c'est lui (flex, align-start) qui donnait au bouton sa largeur naturelle. */ .rmd-cs__cta{white-space:normal;width:100%;justify-content:center; text-align:center;padding:14px 18px;} .rmd-cs__ctawrap{align-self:stretch;} .rmd-cs__serp{border-radius:18px;} .rmd-cs__serpface{border-radius:16px;} .rmd-cs__serpres{padding-left:46px;} .rmd-cs__serpcap{padding-left:46px;} /* ── Zoom-recadrage des captures (10/08, demande Ayoub) ───────────────── Les fichiers sont des captures BUREAU (1760 et 1400px de large, soit 880/700px CSS en retina). En width:100% sur une colonne de ~270px elles tombent à ~31 % de leur taille prévue : texte de 5px, illisible — c'est ça qui « n'était pas responsive ». Au lieu de rétrécir, on AGRANDIT et on COUPE À DROITE : hauteur fixe + object-fit:cover ancré à gauche, là où vit le texte. La barre Google remonte à ~61 % de sa taille prévue (446px visibles sur 880 : logo + requête entière), le résultat à ~71 % (346px sur 700 : favicon, nom du site, URL, début du titre). Ce qui part : les icônes micro/objectif et la vignette produit — rien qui porte la preuve. Le fondu blanc sur le bord droit signe le recadrage comme un zoom volontaire, pas une image cassée. La capture entière reste dans la section Preuve plus bas. ⚠ Ces hauteurs sont un couple avec la largeur de colonne : si le padding de la coque ou de la face change, les recalculer. */ .rmd-cs__serphead{position:relative;} .rmd-cs__serphead img{height:58px;object-fit:cover;object-position:left center;} .rmd-cs__serpres img{height:96px;object-fit:cover;object-position:left center;} .rmd-cs__serphead::after,.rmd-cs__serpres::after{content:"";position:absolute; top:0;right:0;bottom:0;width:44px;pointer-events:none; background:linear-gradient(to right,rgba(255,255,255,0),#fff);} /* Retrait gauche symétrique : la gouttière de pastille tombe à 46px et le panneau n'a plus qu'une colonne, l'alignement sur la légende ne tient plus. Un décalage de 56px sur un écran étroit ne se lirait plus comme un calage, juste comme un bloc mal centré. */ /* Le rail à gauche ne tient pas sur un écran étroit : le logo redevient un bandeau de tête, pleine largeur, filet dessous. */ /* Le retrait bas (60px) et la coulée (37px, calée en px) sont repris tels quels de la règle de base : le dégagement sous le texte ne dépend pas de la largeur d'écran, donc rien à recalculer ici. Le SVG des gouttes, lui, se comprime en largeur — elles deviennent plus étroites, donc plus pointues, ce qui convient. Le retrait latéral est déjà à 0 sur la règle de base ; il n'y a plus rien à annuler ici, et le bandeau du logo n'a donc plus besoin de sa marge négative pour aller chercher les bords. */ .rmd-cs__cardin{grid-template-columns:1fr;gap:22px 0;} /* Le filet passe de vertical à horizontal avec le rail : border-right doit être explicitement annulé, sinon il traîne sous le bandeau. */ .rmd-cs__cardlogo{margin:0 0 22px;padding:0 0 14px; border-right:0;border-bottom:1px solid var(--rmd-bord);} /* 23 → 32 → 40px : suit la règle de base (24 → 36 → 44) en restant un cran en dessous, le bandeau mobile étant pleine largeur et non plus un rail étroit. Ici la largeur ne coûte rien à personne : le logo est seul sur sa bande, les chiffres sont dessous. */ .rmd-cs__logo{height:40px;} .rmd-cs__row + .rmd-cs__row{border-left:0;padding-left:0; border-top:1px solid var(--rmd-bord);padding-top:22px;} .rmd-cs__desc{padding-top:0;} } /* ═══════════════════════════════════════════════════════════════════════════ BANDEAU CLIENTS — repris tel quel de section-clients-dark.html. Voir ce fichier pour le pourquoi du traitement des logos (brightness(0) invert(1), kindy-mono) et de la boucle par copies. ⚠ La boucle est passée de QUATRE copies à DEUX le 11/08, en même temps que la rangée passait de 5 à 18 marques : une copie mesure désormais 3 528px (18 × 196), donc plus large que n'importe quel écran, et deux suffisent à ne jamais laisser la piste se vider. Quatre auraient inliné 36 logos de plus en base64 pour rien. ⚠ NE PAS REPASSER CETTE SECTION AU BLANC. Essayé le 10/08, annulé le jour même : le marine est voulu. C'est la seule respiration sombre entre le hero et la preuve, tous deux blancs. Si la question revient, six valeurs bougent ENSEMBLE, pas une : fond de section, SVG de fond, couleur du titre, couleur de l'œilleton, couleur de son filet, et le filtre des logos. Et deux pièges attendent : · le marine n'est pas dans `background`, il est peint par le SVG (rect #041135 + trois halos) — c'est LUI qu'il faut neutraliser ; · masquer ce SVG demande DEUX classes dans le sélecteur. La ceinture est dans
, qui pose `.rmd-ty img,.rmd-ty svg{display: block}` : en (0,1,1) il bat tout sélecteur à une seule classe. Et il faut garder le positionnement absolu, sinon le SVG repasse en flux et disloque la page (c'est ce qui est arrivé le 10/08). */ .rmd-grad-b{background-image:linear-gradient(148deg,#E4004D 0%,#EE453C 50%,#FA9329 100%); -webkit-background-clip:text;background-clip:text;color:transparent;} .rmd-cl{position:relative;overflow:hidden;background:var(--rmd-ink);} .rmd-cl__bg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;} /* Bandeau raccourci le 06/08/2026 (~250 px → ~185 px de haut). C'est une bande de réassurance posée entre le hero et la preuve, pas une section à part entière : elle se lisait comme la deuxième. Quatre réglages tirent la hauteur, ils ont tous baissé ensemble — padding du bloc, corps du titre, padding du ruban, échelle des logos. En bouger un seul déséquilibre. */ .rmd-cl__inner{position:relative;max-width:var(--rmd-maxw);margin:0 auto; display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px; padding:26px 24px 0;} @media(min-width:768px){.rmd-cl__inner{padding:32px 24px 0;}} .rmd-cl__eyb{display:inline-flex;align-items:center;gap:12px; font-size:10px;font-weight:500;letter-spacing:.15em;text-transform:uppercase; color:var(--rmd-orng);} .rmd-cl__eyb::before{content:'';width:26px;height:1px;background:var(--rmd-orng);opacity:.7;flex:none;} .rmd-cl__h{font-weight:500;font-size:clamp(22px,2.7vw,30px);line-height:var(--rmd-lh-head); letter-spacing:-.03em;color:#fff;max-width:760px;} /* margin-top 12 → 30px le 11/08 (demande Ayoub) : le titre et la première rangée se touchaient presque, la bande se lisait comme une seule masse. La landing pose 32px sous son intitulé (mb-8) et n'a QUE cet intitulé ; ici il y a un œilleton ET un titre, donc l'écart part du titre et non de l'œilleton — 30px + les 8 de padding, soit 38px de blanc réel. */ .rmd-cl__belt{position:relative;margin-top:30px;padding:8px 0 24px; -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%); mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%);} @media(min-width:768px){.rmd-cl__belt{margin-top:38px;padding:10px 0 28px;}} /* 34s → 104s le 11/08, et ce n'est PAS un ralentissement : la vitesse est inchangée. Un cycle parcourt une copie entière, et la copie est passée de 980px (5 marques) à ~3 020px (18 marques au calage de la landing). À 34s la bande filerait à 89px/s au lieu de 29 — illisible. ⚠ La largeur d'une copie n'est plus calculable de tête depuis que les logos ont des largeurs libres : la mesurer (.rmd-cl__row, getBounding‑ ClientRect) et poser durée = largeur / 29. */ .rmd-cl__track{display:flex;width:max-content;animation:rmdClLoop 104s linear infinite;} /* -50 % = exactement une copie sur les DEUX. ⚠ Cette valeur est liée au nombre de copies (100 / nb) : elle était à -25 % tant qu'il y en avait quatre. Voir la note en tête de section. */ @keyframes rmdClLoop{from{transform:translateX(0);}to{transform:translateX(-50%);}} .rmd-cl__belt:hover .rmd-cl__track{animation-play-state:paused;} /* ── L'écart : celui de la landing ──────────────────────────────────────── Deux méthodes ont été essayées avant, ne pas les rouvrir : · gap de 86px puis clamp(28,3.8vw,68) — un écart constant entre des logos de largeurs très différentes ne donne pas un rythme constant, l'œil mesure les centres et voyait kindy collé à lily billy ; · case de largeur fixe (196px, gap:0) — rythme parfait, mais chaque logo flottait au milieu de son blanc, très loin du bandeau de rhillane.com/lp-creation-site-web-maroc. 11/08, arbitrage : on reprend la recette de cette landing telle quelle. C'est un gap de 64px (son `gap-16`) — le rythme y est tenu non par l'écart mais par le CALAGE DES LOGOS, hauteur commune plafonnée en largeur, voir .rmd-cl__logo. Les deux réglages vont ensemble : remettre un gap sans le plafond de largeur ramène le défaut du premier essai. ⚠ padding-right = gap, obligatoirement la même valeur : il recrée l'écart à la couture entre les deux copies de la rangée. Sans lui, le défilement marque un temps toutes les 18 marques. */ .rmd-ty .rmd-cl__row{flex:none;display:flex;align-items:center;gap:64px;padding-right:64px;} .rmd-ty .rmd-cl__item{flex:none;display:flex;align-items:center;justify-content:center;padding:0;} /* ── Le calage : hauteur commune, plafond de largeur ───────────────────── Repris de .client-logo sur rhillane.com/lp-creation-site-web-maroc : height:2rem; width:auto; max-width:9rem; object-fit:contain soit 32px de haut, 144px au maximum de large. Le couple fait tout le travail, et c'est pour ça qu'il remplace le système --lh/--s d'avant (une valeur à régler par marque) : · les logos compacts (kindy 1:1, adidas 1,5:1) prennent les 32px et restent étroits — 32 et 47px de large ; · les logotypes allongés butent sur les 144px, et object-fit:contain les redescend alors en hauteur : GARNIER (7,3:1) sort à 144×20, L'ORÉAL (5,5:1) à 144×26. Personne n'écrase personne. ⚠ Ne pas remettre une hauteur unique SANS le max-width : un 7,3:1 à 32px de haut ferait 234px de large et mangerait deux voisins. ⚠ Les deux valeurs sont en px et non en em : elles ne suivent pas le corps de texte, elles suivent le bandeau de la landing. */ /* brightness(0) invert(1) : chaque logo est aplati en silhouette puis passé en blanc, quelle que soit sa couleur d'origine. C'est ce qui donne cinq marques du même poids visuel sur le marine. ⚠ Ce filtre n'est pas cosmétique : lily-billy-logo.svg, ihinvest-logo.svg et tbm-logo.png sont déjà les variantes BLANCHES, et logo-kindy-mono.png la variante monochrome. Les fichiers et le filtre vont ensemble. */ /* ⚠ DEUX classes dans le sélecteur, et c'est obligatoire : la remise à zéro « .rmd-ty img,.rmd-ty svg{display:block;max-width:100%} » vaut (0,1,1) et bat un sélecteur à une seule classe. Écrit .rmd-cl__logo seul, le max-width:144px était ignoré et GARNIER (7,3:1) sortait à 237px de large, mangeant ses deux voisins. Même piège que le SVG de fond, § plus haut. */ .rmd-ty .rmd-cl__logo{height:32px;width:auto;max-width:144px;object-fit:contain; opacity:.68;filter:brightness(0) invert(1); transition:opacity .3s ease, transform .3s ease;} .rmd-cl__item:hover .rmd-cl__logo{opacity:1;transform:translateY(-3px);} /* 10/08 puis 11/08 : les --lh par marque (kindy 60px, mariner 41…) ont été retirés avec le passage au calage de la landing — la hauteur est commune, il n'y a plus rien à régler marque par marque. Historique gardé ici parce que la tentation revient à chaque logo qui « paraît petit » : la réponse est le plafond de largeur, pas une hauteur sur mesure. */ @media(prefers-reduced-motion:reduce){ .rmd-cl__track{animation:none;width:100%;} .rmd-cl__belt{-webkit-mask-image:none;mask-image:none;} .rmd-ty .rmd-cl__row{flex:1 1 auto;flex-wrap:wrap;justify-content:center; padding-right:0;row-gap:28px;} .rmd-cl__row[aria-hidden="true"]{display:none;} } @media(max-width:640px){ .rmd-cl__belt{padding:10px 0 26px;margin-top:26px; -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%); mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%);} /* 26px au lieu de 32, et 40px de gap au lieu de 64 : la landing garde ses valeurs de bureau sur mobile, mais son bandeau est pleine largeur alors que celui-ci vit dans un conteneur à 24px de marge. À 64px d'écart on ne voyait plus que deux marques et demie par écran. Le rapport gap/hauteur (2:1) est celui de la landing, c'est lui qui fait le rythme. Une copie tombe alors à 2 228px (mesurée) : 2 228 / 29 = 77s pour garder exactement la vitesse du bureau. */ .rmd-ty .rmd-cl__logo{height:26px;max-width:116px;} .rmd-ty .rmd-cl__row{gap:40px;padding-right:40px;} .rmd-cl__track{animation-duration:77s;} } /* ═══════════════════════════════════════════════════════════════════════════ PREUVE v1 — repris de preuve/section-preuve-v1.html (remplace v2, retirée le 05/08/2026). v1 montre UNE requête : barre de recherche, résultat gagnant, concurrent juste dessous. v2 en montrait quatre. Deux adaptations, à refaire si le fichier source évolue : 1. Ses remises à zéro étaient GLOBALES (body, img, a, h1..h3/p/figure, :focus-visible) : portées ici sur .rmd-p1 / .lb, sinon elles descendraient sur le hero et le bandeau clients. 2. Chemins : ../../new-design-ayoub → ../ , ./serp-*.png → ./preuve/. ═══════════════════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════════════ SECTION PREUVE — v1 (une requête, la scène Google reconstituée par découpe) Mise en page d'après https://www.hostino.ma/agence-seo-maroc/ : une scène claire, la recherche en haut, le résultat gagnant détaché, le concurrent estompé dessous. ── v1 / v2 ────────────────────────────────────────────────────────────── Cette version montre UNE requête : « homewear homme », premier résultat, Tommy Hilfiger estompé juste dessous. C'est l'argument le plus direct — un duel, lisible en une seconde, avec l'en-tête Google au-dessus pour planter le décor. section-preuve-v2.html en montre quatre, sans en-tête. Les deux tiennent : v1 frappe plus fort sur une requête, v2 prouve un système. Gardées côte à côte pour arbitrage. ── La SERP est DÉCOUPÉE, pas redessinée ───────────────────────────────── Un premier essai redessinait la page de résultats en HTML : logo composé lettre à lettre, faux champ de recherche, faux résultats. Le rendu était approximatif — la typographie de Google n'est pas la nôtre, les gris ne tombaient pas juste, et l'ensemble avait l'air d'une imitation. Une imitation ne prouve rien. Cette version repart de la vraie capture, assets/serp-homewear.png, coupée en trois morceaux nets : serp-head.png 1760 × 190 logo, champ de recherche, onglets serp-r1.png 1400 × 272 le résultat Mariner, favicon et vignette serp-r2.png 1400 × 258 le résultat Tommy Hilfiger Découpés à 2× depuis l'original pour rester nets sur écran retina. Tout ce qu'on voit dans la scène vient donc de Google : la police, les couleurs, l'URL, la vignette produit. Rien n'est reconstitué. Ce que la mise en page ajoute — et c'est tout — ce sont les deux pastilles de rang à gauche et l'estompage du second résultat. Le reste est la capture. ── Ce que le découpage retire ──────────────────────────────────────────── La capture d'origine fait 1 644 px de haut : carrousel sponsorisé, filtres, « Autres questions », etc. En garder trois bandes, c'est montrer la ligne qui compte sans faire défiler. La capture entière reste accessible : un clic sur la scène l'ouvre en pop-up, où elle se fait défiler. ── Provenance des chiffres ─────────────────────────────────────────────── Aucun chiffre inventé (new-design-ayoub/mariner/MarinaSection.md) : « homewear homme » 1re position capture Amazon, Calvin Klein, Dim, Hugo Boss section 4 247 mots-clés sur 250 en 1re page · 157 en Top 3 section 12 124 985 € de CA via Google organique section 8, GA ⚠ Le volume de recherche a été RETIRÉ de cette section. MarinaSection.md (§2, hero) donne « homewear homme (33 100 rech./mois) ». Vérification Ahrefs du 05/08/2026 : FR 400, global 400, BE 30, partout ailleurs 0 — aucune lecture n'approche 33 100. Publier ce chiffre sur la seule section dont l'argument entier est « vous pouvez vérifier » serait le contraire du but recherché. Voir le même avertissement dans la v2. À arbitrer côté hero. ── Identité ────────────────────────────────────────────────────────────── .eyebrow, .section-title/.thin, .section-sub, .rmd-p1, .wrap, jetons : assets/css/cpt/case_study.css et mockup.css. La pastille de rang reprend .real .num (36 px, rayon 9, fond vert, chiffre blanc en 700). ═══════════════════════════════════════════════════════════════════════════ */ .rmd-case{ /* Les trois déclarations de base du
, rapatriées de l'ancien bloc @layer supprimé le 13/08/2026. Chaque section v5 repose sa police, mais le
lui-même n'en avait pas d'autre. */ font-family:var(--font-sans); color:#041135; -webkit-font-smoothing:antialiased; /* ── INTERLIGNE : UNE VALEUR PAR RÔLE (11/08) ──────────────────────────── La page comptait 15 interlignes différents pour du texte courant, dont un à 1,95 qui se voyait à l'œil, et .rmd-d2__pt déclaré DEUX FOIS (1,7 puis 1,6) — la valeur appliquée tenait de l'accident, pas d'un choix. Trois valeurs désormais, et trois seulement : --rmd-lh-body une phrase, 11 à 18px --rmd-lh-title un titre court ou un libellé, 12 à 23px, 1 à 2 lignes --rmd-lh-head un titre de section, 26 à 38px ⚠ « Le même interligne partout » serait une ERREUR de typo, pas de la cohérence : plus le corps grossit, plus l'interligne doit se serrer, sinon les lignes d'un titre se détachent les unes des autres. La cohérence, c'est UNE valeur PAR RÔLE — d'où trois tokens et non un. Restent volontairement en dehors, ce ne sont pas des phrases : line-height:1 grands chiffres et icônes (une seule ligne) 20 / 24 / 32px boutons et liens de nav (cible tactile) 1.05 / 1.1 / 1.15 les chiffres dans les blocs de stats .rmd-cs__h1 (1.06) le h1 du hero, 48px : sa propre classe de taille Écrire une valeur en dur ici est une régression — passer par un token. */ --rmd-lh-body:1.6; --rmd-lh-title:1.35; --rmd-lh-head:1.12; /* ── RAMPE CHAUDE — l'encre des accents (11/08) ────────────────────────── Un seul dégradé pour tous les mots mis en avant dans un titre : hero (« Aujourd'hui premier. »), preuve, résultats, défi, contact, autres cas, carrousel. Il était écrit SIX fois en dur avant d'être sorti ici ; six copies d'une même valeur finissent toujours par diverger d'un chiffre. ⚠ Ce jeton porte la VALEUR, pas le procédé. Les trois lignes qui vont avec (-webkit-background-clip / background-clip / color:transparent) restent sur chaque règle, sous @supports, parce que sans le clip un color:transparent rend le texte INVISIBLE — la solution de repli doit rester à côté de son garde, pas dans un jeton. ⚠ Il existe une seconde rampe, froide, qui part du bleu #3943FF : c'est .rmd-grad-a à sa définition de base. Elle n'accentue plus aucun titre de section mais sert encore dans le corps de texte. Ne pas fusionner. */ --rmd-grad-warm:linear-gradient(112deg,#E4004D 0%,#EE453C 55%,#F2622F 100%); --ink:#041135; --purp:#3943FF; --purpsoft:#F3F4FF; --slight:#596980; --bord:#E9EAF2; --redder:#E4004D; --orng:#FA9329; --green:#16B364; --nuk:#F9FAFB; --sh-card:0 8px 26px rgba(4,17,53,.05); --sh-big:0 24px 60px rgba(4,17,53,.1); /* --sh-lift vivait dans un second :root (bloc courbes) : fusionné ici. */ --sh-lift:0 18px 44px rgba(4,17,53,.09); } .rmd-p1 *,.lb *{box-sizing:border-box;} .rmd-p1,.lb{font-family:'Poppins',ui-sans-serif,system-ui,sans-serif;color:var(--ink); background:#fff;-webkit-font-smoothing:antialiased;line-height:var(--rmd-lh-body);} .rmd-p1 :where(h1,h2,h3,p,figure){margin:0;} /* height:auto est obligatoire ici. Les découpes portent leurs attributs width/height (utiles : ils réservent la place avant chargement et évitent que la page saute). Mais avec width:100% en CSS et un height="190" en attribut, le navigateur applique 190 px de haut à une image affichée sur 600 px de large : elle s'étire. height:auto rend la main au ratio. */ .rmd-p1 img,.lb img{max-width:100%;display:block;height:auto;} .rmd-p1 a{color:inherit;} .rmd-p1 :focus-visible,.lb :focus-visible{outline:2px solid var(--purp);outline-offset:3px;border-radius:4px;} .wrap{max-width:1200px;margin:0 auto;padding:0 24px;} /* 56/76 : le rythme vertical standard de la page (résultats, défi, approche, autres cas). Était 64/96 — normalisé le 06/08. */ .rmd-p1{padding-block:56px;} /* fond : voir le bloc « Fond commun » plus bas */ @media(min-width:768px){.rmd-p1{padding-block:76px;}} .eyebrow{display:inline-flex;align-items:center;gap:14px;border-radius:9999px; border:1px solid var(--bord);background:#fff;padding:9px 12px 9px 22px; box-shadow:-4px 0 10px rgba(0,0,0,.02),4px 0 10px rgba(0,0,0,.02),0 4px 10px rgba(0,0,0,.02); font-size:13px;font-weight:500;letter-spacing:-.01em;color:var(--purp);margin-bottom:18px;} .eyebrow::after{content:'';width:30px;height:18px;flex:0 0 auto; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 18' fill='none'%3E%3Cpath d='M2 9h24m0 0-6-6m6 6-6 6' stroke='%233943FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain;} .section-title{font-size:38px;font-weight:500;letter-spacing:-.02em;line-height:var(--rmd-lh-head);} .section-title .thin{font-weight:300;color:var(--slight);} /* « Première place. » reprend EXACTEMENT l'encre de « première place. » du hero (.rmd-cs__now) : même angle, mêmes arrêts, même arrivée à #F2622F et pas #FA9329 (l'orange de la charte tombe à 2,27:1 sur blanc, sous le seuil de 3:1 des grands textes). Jusqu'au 12/08 le hero disait « première place » mot pour mot ; il dit maintenant « premier ». C'est donc la COULEUR qui porte seule le rappel entre le hero et la preuve. Le repli en couleur pleine ET le garde @supports sont obligatoires — un texte en color:transparent sans background-clip:text est invisible. Sélecteur porté par .rmd-p1 : .section-title est déclaré à nu ici et touche déjà .rmd-p2 plus bas, il ne faut pas lui ajouter un enfant qui voyage. */ /* Hiérarchie du titre : « Première place. » garde les 38px et prend le dégradé, les concurrents passent en dessous à 0,62em (≈24px), en 400 et en gris. Sur une seule ligne à taille égale, l'œil lisait les quatre marques avant le résultat — or c'est le résultat qu'on vend, les marques ne sont que la mesure de la difficulté. Porté par .rmd-p1 : .section-title .thin est déclaré à nu ici et sert aussi à .rmd-p2 plus bas. */ .rmd-p1 .section-title .now{font-weight:600;} /* 10/08 (demande Ayoub, deux temps) : cette seconde ligne porte l'argument (« devant les marques… ») — d'abord passée de --slight à --ink, puis de .62em à 1em : c'est UN titre en deux lignes, pas un titre + sous-titre. Même corps (38px), même interlettrage que « Première place. » ; seule la graisse (400 vs 600) et la couleur distinguent encore les deux lignes. display:block conservé — chaque ligne reste sur sa ligne. margin-top tombe : à corps égal, l'interligne du titre suffit. Scopé .rmd-p1 : les .thin des autres sections restent gris et petits. */ .rmd-p1 .section-title .thin{display:block; font-weight:400;letter-spacing:-.02em;color:var(--ink);} .rmd-p1 .section-title .now{color:var(--redder);} @supports ((-webkit-background-clip:text) or (background-clip:text)){ .rmd-p1 .section-title .now{ background-image:var(--rmd-grad-warm); -webkit-background-clip:text;background-clip:text;color:transparent;} } .section-sub{font-size:16px;color:var(--slight);margin-top:12px;max-width:640px;line-height:var(--rmd-lh-body);} .section-sub b{color:var(--ink);font-weight:600;} @media(max-width:900px){.section-title{font-size:30px;}} .pv{display:grid;grid-template-columns:1fr;gap:34px;margin-top:36px;align-items:center;} /* 10/08 (demande Ayoub) : texte à GAUCHE, capture à DROITE. Le DOM garde scène puis récit (mobile : la preuve d'abord, l'ordre de lecture voulu) ; l'inversion est purement visuelle, par order + colonnes miroir. La capture garde la piste large (1.18), c'est elle qui a besoin de place. */ @media(min-width:1000px){ .pv{grid-template-columns:.82fr 1.18fr;gap:52px;} .pv > .scene{order:2;} .pv > .say{order:1;} } /* ── La scène ──────────────────────────────────────────────────────────── */ /* 22 en haut et non 30 : la pastille de marché ajoute déjà sa propre hauteur au-dessus de la barre de recherche. */ .scene{position:relative;background:var(--nuk);border:1px solid var(--bord); border-radius:24px;padding:22px 26px 26px;overflow:hidden;} /* Le grand arrondi pâle de la référence : il fait « écran » sans dessiner de cadre de navigateur. Placé bas pour ne pas couper les résultats. */ .scene::before{content:'';position:absolute;left:-26%;bottom:-88%;width:150%;height:132%; border-radius:50%;background:#fff;opacity:.7;} .scene__in{position:relative;} /* ── Le marché ──────────────────────────────────────────────────────────── Une capture de SERP ne dit pas d'où elle a été prise, et c'est la première question qu'on lui pose : première position, oui — mais sur quel marché ? Le pays est donc posé SUR la scène et pas seulement dans la phrase d'introduction : un lecteur qui saute le texte le voit quand même, et il le voit avant les résultats, au moment où il commence à les lire. Le drapeau n'est PAS l'emoji 🇫🇷 : Windows n'a pas de glyphe de drapeau, l'emoji y retombe sur les deux lettres « FR » dans une police de secours, soit exactement l'accident qu'on ne veut pas sur une section dont l'argument est « rien n'est bricolé ». 10/08 — passé du dégradé CSS à un SVG à trois rects. Le dégradé coupait à 33,34 % : sur 21px de large, les bornes tombaient à 7,0007px, donc entre deux pixels, et le navigateur lissait les deux jointures. D'où un drapeau aux bords cotonneux. Le SVG a un viewBox de 3 unités affiché sur 24px : chaque bande fait exactement 8px, sur une frontière de pixel entière. shape-rendering crispEdges interdit en plus tout lissage sur ces jointures. Proportions officielles 2:3 respectées (24×16). */ /* 10/08 : centré, plus calé à droite. Avec le petit rectangle de 24px la pastille était un discret repère de coin ; avec le drapeau flottant elle a assez de présence pour tenir l'axe de la carte, et décentrée elle tirait tout le haut de la scène vers la droite. */ .scene__mkt{display:flex;justify-content:center;margin-bottom:12px;} .mkt{display:inline-flex;align-items:center;gap:8px;background:#fff; border:1px solid var(--bord);border-radius:9999px;padding:6px 13px 6px 9px; font-size:12px;font-weight:500;letter-spacing:-.01em;color:var(--ink); white-space:nowrap;box-shadow:var(--sh-card);} .mkt b{font-weight:600;} /* 10/08 — drapeau flottant sur hampe, 40×28, à la place du rectangle de 24px. Le contour reste indispensable, quelle que soit la forme : la bande centrale est blanche et la pastille aussi, sans lui le milieu du drapeau se confond avec le fond. Il est ici porté par le tracé lui-même (stroke sur le path) et non par un `outline` CSS — un contour rectangulaire autour d'une forme ondulée dessinerait une boîte autour du drapeau. Les trois bandes sont des rects pleine hauteur découpés par un clipPath à la forme du drapeau : elles se chevauchent de 0,2 unité pour qu'aucun filet de fond n'apparaisse entre elles au rendu. Pas de shape-rendering:crispEdges ici, contrairement au rectangle : les ondulations ONT besoin du lissage. */ .mkt__fl{flex:0 0 auto;display:block;width:40px;height:28px;} /* ── L'en-tête découpé ──────────────────────────────────────────────────── La barre de recherche est une CARTE, exactement comme le résultat gagnant : même fond blanc, même filet var(--bord), même rayon 14, même padding 12/14, même ombre var(--sh-card). Une seule déclaration change entre les deux — aucune, en fait : .scene__head et .r--win partagent la liste ci-dessous. Posée à nu sur le fond de la scène, la barre flottait : on lisait une image collée au-dessus d'un bloc encadré, deux objets de nature différente. Encadrée pareil, elle redevient le haut de la même page. Le retrait négatif de -6 px qui compensait la marge blanche du fichier saute avec l'encadrement : c'est le padding de la carte qui donne l'alignement maintenant, et un décalage à gauche se verrait contre le filet. */ .scene__head{background:#fff;border:1px solid var(--bord);border-radius:14px; padding:12px 14px;box-shadow:var(--sh-card);} .scene__head img{width:100%;} /* ── Les résultats ─────────────────────────────────────────────────────── */ .res{margin-top:18px;display:flex;flex-direction:column;gap:10px;} /* Le rang À GAUCHE : il se lit avant le résultat, et les deux pastilles s'empilent en colonne — on voit 1 puis 2 sans rien lire. */ .r{display:grid;grid-template-columns:36px minmax(0,1fr);gap:14px;align-items:center; border:1px solid transparent;border-radius:14px;padding:12px 14px;} .r--win{background:#fff;border-color:var(--bord);box-shadow:var(--sh-card);} /* Le concurrent est estompé, pas supprimé : c'est sa présence qui donne sa valeur à la première place. */ .r--lose{opacity:.4;filter:grayscale(1);} /* .real .num de la charte : 36 px, rayon 9, fond vert, chiffre blanc 700. Le perdant garde la forme et perd la couleur. */ .r__num{display:flex;align-items:center;justify-content:center;width:36px;height:36px; border-radius:9px;background:var(--green);color:#fff; font-size:16px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums;} .r--lose .r__num{background:var(--bord);color:#98A2B3;} .r__shot{position:relative;display:block;width:100%;border-radius:6px;overflow:hidden;} .r__shot img{width:100%;} .r__go{position:absolute;right:8px;bottom:8px;display:inline-flex;align-items:center;gap:6px; font-size:11.5px;font-weight:500;color:#fff;background:rgba(4,17,53,.86); border-radius:9999px;padding:6px 11px;opacity:0;transform:translateY(4px); transition:opacity .22s ease,transform .22s ease;pointer-events:none;} .r__shot:hover .r__go,.r__shot:focus-visible .r__go{opacity:1;transform:none;} /* ── Classement + date ──────────────────────────────────────────────────── Une ligne de texte, pas des pastilles : la scène contient déjà trois cartes encadrées, un quatrième niveau de boîtes l'aurait chargée. Le séparateur est un ::before et non un caractère dans le balisage — écrit en dur, le point resterait en fin de ligne au moment du retour à la ligne. Gouttière horizontale à 0 : c'est la marge du point qui espace, sinon l'écart réel serait gap + 2 × marge. (Une version en échelle, une entrée par ligne, a été essayée et retirée le 10/08 : elle cassait la mise en page. La ligne reste la ligne — seul le réglage typographique ci-dessous a changé.) */ .rankline{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 0; margin-top:16px;padding-top:14px;border-top:1px solid var(--bord); font-size:13px;line-height:var(--rmd-lh-body);color:var(--slight); /* Poppins sort des chiffres proportionnels : le « 1 » est nettement plus étroit que le « 4 » et le « 6 », donc #1 / #2 / #4 / #6 ne tombaient pas sur la même largeur et la ligne paraissait bancale. tabular-nums leur donne la même chasse. Sans effet si la fonte n'a pas le jeu — jamais de dégât. */ font-variant-numeric:tabular-nums; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;} /* 500 et non 400 : Poppins est une géométrique à grande hauteur d'x, sa 400 en 13 px et en gris tire vers le maigre à côté de la 600 du gagnant. La 500 est déjà chargée (Google Fonts, 300;400;500;600;700) — aucune requête en plus, et l'écart avec le gagnant reste lisible. */ .rankline > span{font-weight:500;} /* ── Icônes de marque ────────────────────────────────────── Ce sont les FAVICONS que Google affiche à côté de chaque résultat, découpés dans nos propres captures. Sur une ligne qui parle de positions dans Google, c’est la marque la plus juste : c’est ce que le lecteur voit s’il refait la recherche. Aucun logo téléchargé, aucun logo redessiné. Le NOM reste à côté : règle du guide UX (« un logo seul demande un effort de reconnaissance ») — et à cette taille, un favicon encore moins. ⚠ AUCUN cadre ici, et c’est délibéré. Une version 24px posée dans une tuile blanche à filet a été retirée le 12/08 : Google dessine DÉJÀ une pastille grise autour de chaque favicon, donc la tuile faisait un second cadre autour d’un cercle déjà cadré. Elle n’avait été ajoutée que parce que la première découpe rognait cette pastille — les fichiers ont été refaits (pastille entière, centrée, 96×96), le problème n’existe plus. Si un favicon revenait sans son fond, redonner un cadre à CELUI-LÀ, pas à tous. ⚠ 28px et non 24 : avec la tuile, 2px de padding et 1px de filet ne laissaient que 18px utiles à la marque. Nus, les 28 sont à elle. ⚠ vertical-align et non align-items : la ligne aligne ses éléments sur la BASELINE (voir .rankline), et une image inline y pose sa base sur la ligne d’écriture. Sans le décalage elle flotte au-dessus du texte. -8px à 28 de haut, contre -6 à 24. ⚠ flex:none : dans un conteneur flex une image se laisse comprimer quand la ligne se resserre, et un favicon écrasé devient une bouillie. ⚠ Préfixé .rankline : « .rmd-p1 img{max-width:100%;display:block} » vaut (0,1,1) et écraserait un sélecteur à une seule classe — l’icône passerait en display:block et casserait la ligne en deux. */ .rankline .rankline__ico{display:inline-block;flex:none;width:28px;height:28px; vertical-align:-8px;margin-right:8px;object-fit:contain; border-radius:50%;} /* La 600 de Poppins chasse large ; -.01em referme l'ensemble sans que la ligne bouge à l'œil. */ .rankline b{font-weight:600;color:var(--ink);letter-spacing:-.01em;} .rankline > * + *::before{content:'·';margin:0 12px;color:#C9CFDB; /* Le point ne doit pas grossir avec la 500 des noms. */ font-weight:400;} .capdate{margin-top:9px;font-size:11.5px;line-height:var(--rmd-lh-body);color:var(--slight);} @media(max-width:560px){ .scene{padding:22px 16px 20px;} /* ── L'en-tête découpé ──────────────────────────────────────────────────── La barre de recherche est une CARTE, exactement comme le résultat gagnant : même fond blanc, même filet var(--bord), même rayon 14, même padding 12/14, même ombre var(--sh-card). Une seule déclaration change entre les deux — aucune, en fait : .scene__head et .r--win partagent la liste ci-dessous. Posée à nu sur le fond de la scène, la barre flottait : on lisait une image collée au-dessus d'un bloc encadré, deux objets de nature différente. Encadrée pareil, elle redevient le haut de la même page. Le retrait négatif de -6 px qui compensait la marge blanche du fichier saute avec l'encadrement : c'est le padding de la carte qui donne l'alignement maintenant, et un décalage à gauche se verrait contre le filet. */ .scene__head{padding:10px;} .r{grid-template-columns:30px minmax(0,1fr);gap:10px;padding:10px;} .r__num{width:30px;height:30px;font-size:14px;} /* Deux chiffres côte à côte sous 560px : « 124 985 € » à 30px ne tient pas dans une demi-colonne. Ils s'empilent, le filet passe à l'horizontale. */ .kpi{grid-template-columns:1fr;gap:0;} .kpi__i + .kpi__i{border-left:0;padding-left:0; border-top:1px solid var(--bord);margin-top:18px;padding-top:18px;} /* Le séparateur du classement passe en marge réduite : sur un écran étroit, 12px de chaque côté poussaient la dernière entrée seule sur une ligne de plus. */ .rankline > * + *::before{margin:0 8px;} } /* ── Le récit ──────────────────────────────────────────────────────────── */ /* 15 → 16.5 → 18px le 10/08 (demande Ayoub, en deux temps) : c'est l'argumentaire principal de la section, il doit se lire comme un LEAD, nettement au-dessus du corps standard (16). L'interligne descend à 1.65 : à 18px, 1.7 d'interligne aérait trop et cassait les blocs. */ .say p{font-size:18px;line-height:var(--rmd-lh-body);color:rgba(4,17,53,.74);max-width:60ch;} .say p + p{margin-top:14px;} .say b{color:var(--ink);font-weight:600;} /* 11/08 — NOM DE CONCURRENT dans le récit (demande Ayoub : les faire ressortir). Surlignage neutre, pas une couleur de marque : un fond d'encre à 5,5 % et un poids 500. Trois raisons de ne PAS utiliser ni le cramoisi ici : — est déjà pris dans ce paragraphe par « première position ». Deux emphases identiques et la phrase n'a plus de hiérarchie : le lecteur ne sait plus si le gras désigne notre résultat ou le concurrent. — le cramoisi est la couleur du RÉSULTAT dans toute la page. La donner à Tommy Hilfiger reviendrait à décorer l'adversaire. — un fond gris dit « ceci est un nom propre » sans hiérarchiser. C'est exactement le rôle voulu : repérer, pas valoriser. ⚠ white-space:nowrap est structurel, pas cosmétique : « Tommy Hilfiger » et « Calvin Klein » font deux mots. Sans lui, le surlignage se coupe en fin de ligne et laisse une moitié de pastille orpheline. ⚠ margin négatif de -.06em : il compense le padding horizontal pour que le mot garde sa position dans le rythme de la phrase. Sans ça, chaque nom pousse le texte de ~5px et l'interlettrage du paragraphe se voit. */ /* 11/08 (2e passe, demande Ayoub) : le fond gris devient un SURLIGNEUR. Un trait de marqueur, pas une pastille : le dégradé part de transparent, monte au jaune plein en 2 % et redescend à la fin, donc les extrémités s’estompent comme un feutre qui attaque et relâche. L’angle de 104° donne l’obliquité d’une main. Un rectangle jaune à coins arrondis aurait été une étiquette de plus, et la page en a déjà beaucoup. Même famille que la flèche manuscrite du hero : ce sont les deux seules marques « à la main » de la page. ⚠ COULEUR HORS PALETTE, assumée. La charte n’a pas de jaune, et --rmd-orng (#FA9329) est un orange : en surlignage sous du texte encre, il devient illisible. Le jaune n’est pas ici une couleur de marque, c’est un OBJET que tout le monde reconnaît, un surligneur. #FFE55C et non le #FFFF00 de la référence : sur une page blanche et bleu nuit, le fluo pur hurle. Ne pas le réutiliser ailleurs comme s’il était un jeton de charte. Ce qui ne bouge pas, et pourquoi : voir la note juste au-dessus. nowrap et la marge négative sont structurels ; font-weight reste à 500 parce que le gras est déjà pris par « première position » dans le même paragraphe — le jaune suffit à repérer, le gras mettrait le concurrent au niveau de notre résultat. */ .say .brand{color:var(--ink);font-weight:500;white-space:nowrap; background-image:linear-gradient(104deg, rgba(255,229,92,0) 0.4%, #FFE55C 2.4%, #FFE55C 96%, rgba(255,229,92,0) 99%); background-repeat:no-repeat; background-size:100% 62%;background-position:0 78%; padding:.08em .3em;margin:0 -.06em;} /* .say__src (ligne de sources) retirée le 10/08 avec son bloc. La date de relevé est portée par .capdate, sous la capture. */ /* ── Les deux chiffres ──────────────────────────────────────────────────── Deux colonnes, un filet entre elles : exactement la grille du panneau de preuve du hero, pour que la page n'invente pas une deuxième façon de poser un chiffre. Pas de carte, pas de fond, pas d'icône — les chiffres se détachent par leur taille et par le filet, rien d'autre. Le « /250 » est en 0,62em et en gris : c'est le dénominateur, il ne doit pas peser autant que le 247. */ .kpi{display:grid;grid-template-columns:1fr 1fr;gap:0 24px; margin-top:24px;padding-top:22px;border-top:1px solid var(--bord);} .kpi__i + .kpi__i{border-left:1px solid var(--bord);padding-left:24px;} .kpi__v{display:block;font-size:30px;font-weight:600;line-height:1.05; letter-spacing:-.03em;color:var(--ink);font-variant-numeric:tabular-nums;} .kpi__u{font-size:.62em;font-weight:500;letter-spacing:-.01em;color:var(--slight);} /* Le « € » reprend le vert de .rmd-rs__u (section Résultats · CA) : --green et --rmd-win valent tous deux #16B364, ce sont les deux noms du même vert selon la portée de jetons. Un symbole de devise traité de deux façons dans la même page se remarque tout de suite. Le RAPPORT, lui, n'est pas repris : .rmd-rs__u vaut 0.5em sur un chiffre de 52px, soit 26px. Le même 0.5em sur les 30px d'ici ne faisait plus que 15px, illisible. Un rapport em ne se transporte pas d'une échelle de titre à une échelle de texte — c'est la taille RENDUE qu'il faut garder comparable. 0.7em → 21px, lisible, et toujours nettement sous le nombre. */ .kpi__c{font-size:.7em;color:var(--green);letter-spacing:-.02em;margin-left:.04em;} .kpi__l{display:block;margin-top:8px;font-size:13px;line-height:var(--rmd-lh-body);color:var(--slight);} /* .say p.say__note et pas .say__note : .say p pèse (0,1,1), une simple classe (0,1,0) perdrait et la note repasserait à 15px. */ .say p.say__note{margin-top:14px;font-size:12.5px;line-height:var(--rmd-lh-body);color:var(--slight);} /* Accroche + CTA sous les KPI (11/08, demande Ayoub). La section n'est pas dans .rmd-ty : les jetons --rmd-* recoivent leur valeur en secours. Le color est re-force en blanc : une regle de liens de la section battait le .rmd-cs__cta a la specificite. */ .rmd-p1 .say__hook{margin-top:22px;font-size:17px;font-weight:600;color:var(--rmd-ink, #041135);opacity:1;} .say__cta{margin-top:12px;} .say__cta a.rmd-cs__cta{color:#fff;} /* ⚠ « .say p » pèse (0,1,1) et impose 18px : sans le p dans le sélecteur, la ligne de réassurance se lirait comme un paragraphe du récit. Même piège que .say p.say__note juste au-dessus. ⚠ Les jetons --rmd-* sont portés par .rmd-ty ; cette section n’y est pas, d’où les valeurs de secours. Sans elles, le texte perdait sa couleur et la coche son vert. */ .say p.say__ctanote{margin-top:12px;font-size:13px; line-height:var(--rmd-lh-body,1.7);color:var(--rmd-slight,#596980);} .say p.say__ctanote svg{color:var(--rmd-green,#16B364);} /* ═══ POP-UP DE CAPTURE ═══════════════════════════════════════════════════ La capture entière s'ouvre PAR-DESSUS la page, jamais dans un autre onglet : quitter la page pour vérifier une preuve, c'est perdre le lecteur au moment précis où il est convaincu. Le est conservé dessous : sans JavaScript le lien fonctionne encore, il ouvre simplement le fichier. Le JS ne fait qu'intercepter. La capture fait ~1 640 px de haut : la fenêtre la laisse DÉFILER plutôt que de la réduire à une vignette illisible. */ .lb{position:fixed;inset:0;z-index:80;display:none;padding:24px; align-items:center;justify-content:center;} .lb[open],.lb.is-on{display:flex;} /* z-index explicites. backdrop-filter promeut le voile en couche composée : sans z-index, Chrome le peint AU-DESSUS de la fenêtre pourtant située après lui dans le DOM, et la pop-up disparaît derrière son propre fond. */ .lb__veil{position:absolute;inset:0;z-index:0;background:rgba(4,17,53,.72); -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);} .lb__box{position:relative;z-index:1;width:min(1080px,100%);max-height:calc(100vh - 48px); background:#fff;border-radius:18px;overflow:hidden;display:flex;flex-direction:column; box-shadow:0 40px 90px rgba(4,17,53,.4);animation:lbIn .22s ease both;} @keyframes lbIn{from{opacity:0;transform:translateY(10px) scale(.985);}to{opacity:1;transform:none;}} .lb__bar{display:flex;align-items:center;gap:14px;padding:13px 14px 13px 18px; border-bottom:1px solid var(--bord);flex:0 0 auto;} .lb__cap{font-size:13.5px;font-weight:500;letter-spacing:-.01em;min-width:0; overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .lb__hint{margin-left:auto;font-size:12px;color:var(--slight);white-space:nowrap;} @media(max-width:620px){.lb__hint{display:none;}} /* 44 px : plancher de cible tactile (WCAG 2.5.8). */ .lb__x{flex:0 0 auto;width:44px;height:44px;display:flex;align-items:center;justify-content:center; border:1px solid var(--bord);background:#fff;border-radius:11px;cursor:pointer; font-size:19px;line-height:1;color:var(--ink);transition:background .18s ease;} .lb__x:hover{background:var(--nuk);} /* overflow:auto → la capture entière se parcourt dans la fenêtre. */ .lb__scroll{overflow:auto;background:var(--nuk);-webkit-overflow-scrolling:touch;} .lb__scroll img{width:100%;} /* Repérage des trois premiers résultats sur la capture ouverte (11/08, demande Ayoub). Posé PAR-DESSUS l’image, jamais peint dedans : c’est la pièce à conviction, et c’est précisément celle qu’on ouvre pour vérifier. Positions relevées sur le fichier (2218×1644). Les trois résultats partagent la même colonne, seule la bande verticale change : n° 1 Mariner y 995..1210 n° 2 Tommy Hilfiger y 1240..1445 n° 3 La Redoute y 1478..1644 ← coupé par le bas de la capture En POURCENTAGES : la boîte de la visionneuse va de 1080px à la largeur d’un téléphone ; en px, les cadres se décaleraient à chaque taille. La bordure reste en px — un trait doit garder son épaisseur. Le n° 3 s’arrête à 99,5 % et non 100 : son résultat est coupé par le bord de la capture, et une bordure basse posée pile sur ce bord disparaît. Couleurs : trois jetons DÉJÀ dans la page, aucune couleur inventée. La descente vert → orange → rouge se lit comme un classement sans qu’on ait besoin des chiffres. Le vert du n° 1 est celui de la pastille du hero : même signal, même couleur. */ .lb__stage{position:relative;} .lb__stage img{display:block;} .lb__marks[hidden]{display:none;} .lb__mark{position:absolute;left:11.27%;width:48.92%; border:2px solid;border-radius:10px;pointer-events:none;} .lb__mark--1{top:60.52%;height:13.08%;border-color:var(--green);} .lb__mark--2{top:75.43%;height:12.47%;border-color:var(--orng);} .lb__mark--3{top:89.90%;height: 9.60%;border-color:var(--redder);} /* Les pastilles sortent à GAUCHE des cadres, dans la marge blanche de Google (11,3 % de l’image, ~120px à la taille d’ouverture) : elles ne recouvrent aucun pixel des résultats. Sous 620px cette marge fond, elles repassent à l’intérieur — voir la règle plus bas. Le fond est écrit par modificateur et non en currentColor : la pastille déclare color:#fff pour son chiffre, donc currentColor y vaudrait blanc. */ .lb__marknum{position:absolute;right:calc(100% + 10px);top:50%;transform:translateY(-50%); width:26px;height:26px;border-radius:50%;color:#fff; display:grid;place-items:center;font-size:13px;font-weight:600;line-height:1;} .lb__mark--1 .lb__marknum{background:var(--green);} .lb__mark--2 .lb__marknum{background:var(--orng);} .lb__mark--3 .lb__marknum{background:var(--redder);} @media(max-width:620px){ .lb__marknum{right:auto;left:6px;top:6px;transform:none;width:22px;height:22px;font-size:12px;} } @media(prefers-reduced-motion:reduce){ .r__go{transition:none;} .lb__box{animation:none;} } /* ═══════════════════════════════════════════════════════════════════════════ RÉSULTATS · CA — repris de resultats/section-resultats-ca.html. Elle partage le système .rmd-ty du hero, donc rien à re-porter : les règles déjà présentes (.rmd-ty, sa remise à zéro, .rmd-grad-a) ont été écartées pour ne pas les déclarer deux fois. Seul --rmd-win (#16B364, le vert des gains) manquait et a été ajouté au bloc de jetons plus haut. Aucun script, aucune image : rien d'autre à adapter. ═══════════════════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════════════ SECTION RÉSULTATS — d'après le bloc « Turning traffic into revenue — fast » du moodboard, avec les vrais chiffres Mariner. La composition du moodboard est reprise telle quelle : bande lilas pâle, exergue en petites capitales, titre sur deux lignes dont la seconde est décalée, une note en petit corps calée à gauche, puis trois grands nombres séparés par des filets verticaux, chacun avec un intitulé gras et une ligne d'explication. Le lilas du moodboard tombe sur --rmd-purpsoft (#F3F4FF), qui est déjà le violet pâle de la charte — rien à inventer. Le bloc reste plat, sans courbes de fond : c'est ce qui le distingue des sections voisines, comme .rmd-steps se distingue de .rmd-hero dans index-EN.html. ── Le triptyque ────────────────────────────────────────────────────────── L'ordre a changé le 10/08 : l'argent d'abord, puis l'audience, puis l'efficacité. Le moodboard proposait conversions / revenus / taux, et la section suivait cette montée. Mais un lecteur qui ne lit qu'une colonne doit tomber sur celle qui décide, et c'est le chiffre d'affaires. ── Ce que la première colonne corrige ──────────────────────── Elle a affiché un moment une croissance de chiffre d'affaires GLOBALE en grand, avec le total du site en petit dessous. Posé comme ça, dans une étude de cas SEO, ce chiffre se lit comme du CA produit par le référencement. Il ne l'est pas : le référencement ne pèse qu'une part du total, le reste vient de la publicité, de l'emailing, du direct et du referral. La colonne porte donc le chiffre du CANAL, celui que l'agence a produit. ⚠ Le total et la répartition par canal ont été RETIRÉS de ce fichier le 11/08 (consigne du patron) : chiffres d'affaires du client, ils n'ont rien à faire dans un document qui sort de l'agence. Ni dans la page, ni ici : les commentaires partent avec le fichier standalone et s'affichent d'un clic droit. Ils sont dans les exports Analytics si quelqu'un en a besoin. ── Les deux taux retirés le 10/08 ──────────────────────────────────────── Les descriptions portaient aussi +5,8 % (croissance du canal organique) et la croissance du total du site. Retirés : trois colonnes de prose dense se lisaient comme un paragraphe, plus comme trois mesures. Ce qui reste est le strict nécessaire — le chiffre du canal, le total nommé comme total, et d'où vient la différence. ⚠ La croissance du canal organique est très en dessous de celle du total du site. Tant qu'aucun pourcentage n'est affiché dans cette colonne, rien ne ment. Mais si un taux revient un jour ici, ce doit être celui du CANAL : afficher la croissance globale dans une colonne dont le titre dit « référencement naturel » est exactement le raccourci que cette section a été refaite pour fermer. ── Provenance des chiffres ──────────────────────────────────────────────── Aucun chiffre inventé, conformément à new-design-ayoub/mariner/MarinaSection.md. 124 985 € CA référencement naturel Google Analytics, section 8 (montant mis à jour le 11/08 par Ayoub ; le taux de croissance qui l’accompagnait valait pour l’ancien montant, il a sauté) +149 % utilisateurs, 93 000 sur la période Google Analytics, section 8 +25 % taux de conversion sur un an, 4,55 % Shopify, section 5 pic à 8,1 % le 30 novembre 2024 Shopify, section 5 Le CA total du client et sa répartition par canal figuraient ici : retirés le 11/08, voir plus haut. La section parle de ce que le référencement rapporte, pas de la répartition média du client. Chaque chiffre porte sa propre période. Le document de référence interdit de croiser des périodes entre elles, d'où la mention de la source et de la fenêtre sous chaque nombre plutôt qu'un total agrégé maison. ⚠ 124 985 € est déjà affiché dans la section preuve v1 (bloc .kpi, « de CA via Google organique »). Le doublon est assumé : preuve v1 le donne comme pièce à conviction, la section résultats comme mesure. Si la répétition gêne, c'est le .kpi de preuve v1 qui saute, pas celui-ci. ── Identité ─────────────────────────────────────────────────────────────── Jetons, Poppins et dégradé .rmd-grad-a : repris de index-EN.html. Le « + » réduit et remonté est le .rmd-cs__plus de hero-mariner.html. La section n'a qu'un seul composant de mesure, en une rangée de trois (la seconde rangée « détail du référencement » a été retirée le 06/08, ses styles avec). ═══════════════════════════════════════════════════════════════════════════ */ /* Jetons .rmd-ty : déclaration UNIQUE en tête de ce bloc (portage 12/08). La maquette les redéclarait ici (sous-ensemble identique, vérifié) ; une seule source désormais. */ /* :where() = spécificité nulle, donc n'importe quelle classe de composant bat cette remise à zéro. Sans ça, .rmd-ty li{padding:0} écrase le padding des composants et les boîtes se referment sur leur texte. */ .rmd-ty :where(ul){list-style:none;} /* ── Coque ─────────────────────────────────────────────────────────────── */ /* ── Fond blanc depuis le 10/08 (était --rmd-nuk) ────────────────────────── Le gris #F9FAFB ne séparait rien : 2 % d'écart avec le blanc, ça ne se lit pas comme un changement de section, seulement comme une zone un peu terne tenue sur un long défilement. Et il cassait le panneau de preuve de la section voisine — .board est en --nuk lui aussi, donc invisible sur un fond --nuk (voir le commentaire de .rmd-p2). Le sol repasse en blanc partout, et ce sont les panneaux (.scene, .board) qui portent la teinte. C'est déjà le rapport qui marche dans « Première place » : section blanche, panneau gris. Une seule règle pour toute la page, au lieu d'un fond par section. Ce qui sépare maintenant les sections, c'est l'espace, plus la couleur : 152px avant la paire (76 de .rmd-p1 + 76 d'ici) et 56px à l'intérieur (0 d'ici + 56 de .rmd-p2). Grand écart dehors, petit écart dedans : la paire se lit comme un bloc sans avoir besoin d'un aplat pour le dire. */ .rmd-rs{background:#fff;} /* Même rythme que défi et approche (56 / 76) : la section était calée sur 64 / 96 du temps où elle portait deux rangées de chiffres. Avec une seule, ce cadrage la faisait respirer deux fois plus que ses voisines. ⚠ Padding BAS à 0, padding haut plein. La section précède « Quatre requêtes » (.rmd-p2) et les deux partagent le fond --rmd-nuk : elles doivent se lire comme un seul bloc continu. Deux paddings qui se touchent creusent le double — 76 + 76 = 152 px de trou au milieu de ce qui doit paraître d'une pièce. L'écart est donc tenu à un seul endroit, par le padding HAUT de .rmd-p2, et celui d'ici part à 0. Le padding haut, lui, reste : c'est « Première place » (.rmd-p1) qui précède maintenant, sur fond blanc. Changement de fond, donc l'écart se rend des deux côtés et le padding garde sa valeur. La règle, pour la prochaine fois que la section bouge : le padding du côté d'un voisin qui PARTAGE le fond vaut 0, celui du côté d'un voisin qui CHANGE de fond garde sa valeur. Cette section a été déplacée quatre fois le 10/08 et c'est ce réglage qui casse à chaque fois. Position au 10/08 : « Première place » (preuve v1), puis résultats, puis « Quatre requêtes » (preuve v2). Les deux dernières se déplacent ENSEMBLE — elles partagent le fond et se lisent comme un seul bloc, les séparer laisse un trou d'un côté et une coupe nette de l'autre. */ .rmd-rs__inner{max-width:var(--rmd-maxw);margin:0 auto; display:flex;flex-direction:column;gap:32px;padding:56px 24px 0;} @media(min-width:768px){.rmd-rs__inner{gap:44px;padding:76px 24px 0;} } /* ── En-tête ───────────────────────────────────────────────────────────── */ /* Grille à une seule colonne depuis le 10/08, avec le retrait de .rmd-rs__note. Elle tenait la colonne 1 (250px), calée en bas pour venir à hauteur de la seconde ligne du titre ; le titre était épinglé en colonne 2. Retirer le paragraphe sans défaire la grille laissait le titre en colonne 2, donc décalé de 290px avec une gouttière vide à sa gauche — la panne classique quand on vide une cellule au lieu de supprimer la colonne. Le titre repart donc du bord, sous la pastille, en une seule colonne. */ .rmd-rs__head{display:grid;gap:14px;} /* Résultats portait le seul exergue en filet de la page — toutes les autres sections ouvrent sur la pastille .rmd-pill. Passée à la pastille le 06/08. Le placement dans la grille est porté par .rmd-rs__head .rmd-pill ; l'ancienne classe .rmd-rs__eyb a disparu avec son filet. */ .rmd-rs__head .rmd-pill{grid-column:1 / -1;justify-self:start;margin-bottom:4px;} /* ── Le titre, aligné sur .section-title ────────────────────────────────── Il était en clamp(30px, 5vw, 52px), soit 52px sur un grand écran, quand TOUTES les autres sections de la page titrent à 38 / 30 via .section-title (preuve v1, preuve v2, carrousel). Posée juste sous « Première place », la section paraissait donc d'un cran au dessus dans la hiérarchie alors qu'elle est au même niveau. Mêmes valeurs que .section-title, à la déclaration près, y compris la bascule à 30px sous 900px — c'est le point d'arrêt du reste de la page, pas un nouveau. */ .rmd-rs__h{font-weight:500;font-size:38px;line-height:var(--rmd-lh-head); letter-spacing:-.02em;color:var(--rmd-ink);text-wrap:balance;} @media(max-width:900px){ .rmd-rs__h{font-size:30px;} } .rmd-rs__h b{display:block;font-weight:500;} /* Le dégradé de « Première place » (.rmd-p1 .section-title .now), repris ici mot pour mot : les deux titres mettent en avant leur phrase forte, ils ne peuvent pas le faire dans deux couleurs différentes à une section d'écart. ⚠ Surcharge SCOPÉE, et pas une retouche de .rmd-grad-a. Cette classe sert encore au défi, au contact et à « autres cas » : y toucher repeindrait trois sections d'un coup. Seul background-image est redéclaré — le background-clip et le color:transparent viennent déjà de .rmd-grad-a. */ .rmd-rs__h .rmd-grad-a{ background-image:var(--rmd-grad-warm);} /* .rmd-rs__note retirée le 10/08 avec son paragraphe. Rien d'autre sur la page ne porte cette classe — si la note revient, il faut aussi remettre la grille à deux colonnes ci-dessus, les deux allaient ensemble. */ /* ── Les trois nombres ─────────────────────────────────────────────────── */ .rmd-rs__stats{display:grid;grid-template-columns:1fr;gap:28px;} /* Colonne flex + margin-top:auto sur la source : les trois descriptions ne font pas le même nombre de lignes, et sans ça les trois pastilles de source flottaient à trois hauteurs différentes. Là elles se calent toutes sur le bas du bloc. */ .rmd-rs__stat{display:flex;flex-direction:column;align-items:flex-start;} @media(min-width:820px){ .rmd-rs__stats{grid-template-columns:repeat(3,1fr);gap:0;} .rmd-rs__stat{padding:0 40px;border-left:1px solid rgba(4,17,53,.10);} .rmd-rs__stat:first-child{padding-left:0;border-left:none;} .rmd-rs__stat:last-child{padding-right:0;} } /* ── Les nombres, calés sur .rmd-cs__val (carte chiffre du hero) ─────────── Ils étaient en clamp(52px, 7.6vw, 84px), soit 84px sur grand écran — le plus gros texte de toute la page, devant même le titre du hero. Tant que le titre de section montait à 52px l'écart passait ; ramené à 38px pour s'aligner sur .section-title, l'écart devenait du simple au double et le titre se lisait comme la légende de ses propres chiffres. Reprise à l'identique de .rmd-cs__val — mêmes clamp, graisse, interligne et approche. C'est la carte chiffre du hero, donc le premier grand nombre que le lecteur rencontre : c'est elle qui donne l'échelle, pas cette section. Échelle des nombres de la page, pour rester dedans la prochaine fois : hero et pied de page 52, autres cas 56 (72 sur la carte large), défi 44. */ .rmd-rs__v{font-weight:600;font-size:clamp(38px,4.6vw,52px);line-height:1; letter-spacing:-.035em;color:var(--rmd-ink);font-variant-numeric:tabular-nums; white-space:nowrap;} /* Le « + » à 0,52 em et remonté : à taille égale il pèse autant que les chiffres et on lit « + 149 » en deux blocs au lieu d'un seul nombre. */ .rmd-rs__plus{font-size:.52em;vertical-align:.42em;margin-right:.04em; color:var(--rmd-win);letter-spacing:0;} .rmd-rs__u{font-size:.5em;color:var(--rmd-win);letter-spacing:-.02em;margin-left:.02em;} /* 26px et non 14. Le nombre est cadré à line-height:1, donc sa boîte s'arrête quasiment sur le bas des chiffres : il n'y a presque aucun blanc de fonte à récupérer sous lui, contrairement à un texte courant. 14px mesurés s'en voyaient 6 ou 7, et le titre semblait collé. La marge est restée à 26 après le passage des nombres de 84 à 52px : la colonne est plus compacte, autant ne pas la resserrer davantage. */ .rmd-rs__t{margin-top:26px;font-size:15.5px;font-weight:600;letter-spacing:-.01em; line-height:var(--rmd-lh-title);color:var(--rmd-ink);} /* margin-bottom : la source étant poussée en bas par margin-top:auto, c'est cette marge qui garantit un écart minimum quand la colonne est bien remplie. Interligne 1,6 → 1,75 → 1,95. Ces descriptions sont la seule prose de la section : serrées, elles font un pavé gris au pied de chaque colonne. À 14 px, 1,95 met un peu moins de 14 px de blanc entre deux lignes. ⚠ La marge du haut suit l'interligne, elle ne peut pas rester fixe. Tant que l'écart titre → paragraphe ne dépasse pas l'écart entre deux lignes DU paragraphe, l'œil regroupe tout en un seul bloc et desserrer l'interligne ne fait qu'empirer les choses. D'où 20 px ici, à relever encore si l'interligne remonte. L'échelle de la colonne se lit de haut en bas : 14 (dans le paragraphe) < 20 (titre → paragraphe) < 26 (nombre → titre) < 30 (paragraphe → pastille de source). */ .rmd-rs__d{margin:20px 0 30px;font-size:14px;line-height:var(--rmd-lh-body);color:var(--rmd-slight); max-width:330px;text-wrap:pretty;} /* Le total tous canaux passe à l'encre du texte, sans gras appuyé ni couleur : il doit s'attraper en diagonale — c'est le chiffre qu'on ne veut voir confondu avec aucun autre — sans venir concurrencer le grand nombre au dessus, qui reste le sujet de la colonne. */ .rmd-rs__b{font-weight:600;color:var(--rmd-ink);} /* .rmd-rs__src (pastilles « GOOGLE ANALYTICS » / « SHOPIFY » en pied de chaque colonne) retirée le 10/08 avec ses trois éléments : plus rien ne la portait. ⚠ Elle avait un rôle de mise en page en plus de son rôle d'attribution : `margin-top:auto` poussait la pastille en bas de la colonne flex et calait donc les trois cartes sur la même ligne de pied. Sans elle, les colonnes s'arrêtent chacune à la fin de leur texte — voir .rmd-rs__d, dont la marge basse de 30px devient le seul espace de fin de colonne. */ @media(max-width:819px){ /* 40px et non 28 : empilées, les trois mesures n'ont plus que le filet pour se séparer. L'écart entre deux mesures doit rester plus grand que l'écart entre le nombre et son titre à l'intérieur d'une mesure (26px), sinon les blocs se regroupent au mauvais endroit. */ .rmd-rs__stat + .rmd-rs__stat{padding-top:40px;border-top:1px solid rgba(4,17,53,.10);} .rmd-rs__stats{gap:0;} .rmd-rs__stat{padding-bottom:0;} .rmd-rs__stat + .rmd-rs__stat{margin-top:0;} } /* ── Fond commun aux sections claires ───────────────────────────────────── preuve n'avait aucun fond (donc le blanc du body) et resultats était en --rmd-purpsoft : trois sections claires, trois traitements différents. Elles reprennent celui du hero — blanc + les courbes de marque à 6 %. position:relative sur les conteneurs internes est obligatoire : le SVG est en position:absolute, et un élément positionné passe DEVANT du contenu non positionné, quel que soit l'ordre du DOM. Sans ça les courbes recouvriraient le texte au lieu de rester derrière. */ .rmd-p1{position:relative;overflow:hidden;background:#fff;} /* 10/08 — courbes de fond adoucies : opacity .9 → .5 sur les QUATRE couches qui portent ce motif (hero, preuve, défi, autres cas). Le trait est à 6 % dans le SVG, donc le rendu passe de ~5,4 % à ~3 %. Le réglage se fait ici et non sur les stroke-opacity : neuf attributs à modifier contre quatre déclarations, et surtout le SVG reste exactement celui de la charte. Les quatre bougent ensemble à dessein — c'est tout l'objet de ce bloc « fond commun ». En dimmer une seule, c'est revenir aux trois traitements différents qu'il a fallu unifier le 06/08. */ /* .rmd-p1__bg retirée le 10/08 (passe « tout en blanc » — seuls hero, bandeau clients et pied de page gardent leur décor). Le bloc « fond commun » ci-dessus ne pilote plus que le hero. */ .rmd-p1 > .wrap{position:relative;} .rmd-rs__inner{position:relative;} /* ═══════════════════════════════════════════════════════════════════════════ CONTACT — repris de contact/section-contact.html. ⚠ Trois composants partagés étaient définis DIFFÉREMMENT ici et dans le hero : .rmd-lead (480 vs 520px), .rmd-chips (centré, 13.5px vs 14px) et .rmd-chip (gap 8 vs 6). Repris tels quels, ils passaient APRÈS ceux du hero dans la feuille et l'auraient silencieusement restylé — les chips du hero se seraient centrées. Ils sont donc portés sur .rmd-fm. .rmd-pill ne différait que par des espaces, .rmd-ty / .rmd-grad-a / .rmd-pill__t / __arrow étaient identiques : écartés pour ne pas doubler. ═══════════════════════════════════════════════════════════════════════════ */ .rmd-h2{font-weight:500;font-size:clamp(30px,4.2vw,44px);line-height:var(--rmd-lh-head); letter-spacing:-.03em;color:var(--rmd-ink);text-wrap:balance;} .rmd-fm .rmd-lead{font-size:clamp(16px,2vw,17px);line-height:var(--rmd-lh-body);color:var(--rmd-slight); max-width:480px;text-wrap:pretty;} /* Réassurances : sous le formulaire et en ligne, comme sur la landing page, et non plus en colonne à gauche. */ .rmd-fm .rmd-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 22px;margin-top:20px; font-size:13.5px;color:var(--rmd-slight);} .rmd-fm .rmd-chip{display:inline-flex;align-items:center;gap:8px;} /* Scopé .rmd-fm comme les autres composants partagés du bloc contact : non scopé, il repeignait aussi les coches des chips du hero. */ .rmd-fm .rmd-chip svg{width:15px;height:15px;color:var(--rmd-win);flex:none;} /* ── Coque ─────────────────────────────────────────────────────────────── */ /* --rmd-nuk → blanc le 11/08 (demande Ayoub, comme avant la greffe) : tout le site est sur blanc, seuls le bandeau clients et le pied de page tranchent. La carte du formulaire garde son relief par son filet + son ombre. */ .rmd-fm{position:relative;overflow:hidden;background:#fff;} .rmd-fm__bg{position:absolute;inset:0;width:100%;height:100%;opacity:.9;pointer-events:none;} .rmd-fm__inner{position:relative;max-width:var(--rmd-maxw);margin:0 auto; display:grid;grid-template-columns:1fr;gap:40px;padding:56px 24px;} /* ── Largeur du formulaire ───────────────────────────────────────────── Retour à la largeur d'origine : deux colonnes égales, carte à 544 px et champs pleine largeur à l'intérieur. Deux variantes ont été essayées entre-temps et écartées : · carte réduite à 448 px — le bloc devenait trop étroit à l'écran ; · champs bornés à 340 px dans une carte restée à 544 — pire encore, les champs se tassaient à gauche et laissaient une bande de blanc mort à droite, à l'intérieur même de la carte. Le point à retenir de ces essais : quelle que soit la largeur retenue pour la carte, les champs la remplissent bord à bord. C'est la carte qu'on dimensionne, jamais les champs séparément. */ @media(min-width:960px){ /* 11/08 — align-items center → start (demande Ayoub : caler le bloc de gauche sur le haut de la carte de contact). Les deux colonnes ne font pas la même hauteur : à droite carte + chips de réassurance, à gauche pastille + titre + texte + bloc valeur. En "center" la grille centre CHAQUE colonne dans la hauteur de la rangée, donc la plus courte descend de la moitié de l'écart — d'où le décrochage d'environ 60px qu'on voyait en haut à gauche. Personne n'avait écrit ce décalage, il était calculé. En "start" les deux colonnes partent de la même ligne. Contrepartie assumée : du vide en bas de la colonne courte au lieu d'un vide réparti en haut et en bas. C'est le bon échange ici — le haut est ce que l'œil compare, deux titres qui démarrent au même niveau ; le bas, il ne le compare pas. ⚠ Ne pas "corriger" ce décalage avec un margin-top négatif sur .rmd-fm__pitch : ça marcherait à un seul contenu près, et le moindre mot ajouté à droite (une chip de plus) le redéréglerait. La cause est l'alignement, pas la marge. */ .rmd-fm__inner{grid-template-columns:1fr 1fr;gap:64px;padding:76px 24px;align-items:start;} } /* 11/08 — TITRE DU CONTACT : noir + accent CRAMOISI, comme « Résultats ». Modèle demandé par Ayoub, celui de .rmd-rs__h : « Du trafic, oui. » → noir d'encre « Du chiffre d'affaires, surtout. » → dégradé cramoisi, pas de bleu Il existe DEUX rampes d'accent dans la page, et ce n'est pas un hasard : base .rmd-grad-a 155deg #3943FF 58% → #E4004D 85% → #FA9329 100% part du BLEU de marque. Ouvre une section. override 112deg #E4004D 0% → #EE453C 55% → #F2622F 100% 100 % chaud. Sert quand le titre annonce un RÉSULTAT. Le contact demande une action, pas un constat, mais Ayoub le veut sur la rampe chaude comme les résultats : la page se termine donc en chaud, du défi jusqu'au formulaire. Écrit comme les deux autres surcharges (.rmd-rs__h, .rmd-d2) : on ne redéclare QUE background-image. background-clip et color:transparent restent portés par .rmd-grad-a — les redéclarer ici ferait trois endroits à corriger le jour où le procédé change. ⚠ « Autres cas » est désormais le SEUL titre encore sur la rampe bleue. La taille est alignée dans la foulée : le contact était le seul titre de section resté sur la base (clamp 30/4,2vw/44) alors que défi, approche et autres cas sont à clamp 26/3,2vw/38. Un dégradé sur du texte se calcule sur la boîte du texte, donc deux titres de tailles différentes ne rendent jamais tout à fait pareil, même à dégradé identique. */ .rmd-fm .rmd-h2{font-size:clamp(26px,3.2vw,38px);line-height:var(--rmd-lh-head);} .rmd-fm .rmd-h2 .rmd-grad-a{background-image:var(--rmd-grad-warm);} .rmd-fm__pitch{display:flex;flex-direction:column;align-items:flex-start;gap:22px;} .rmd-fm__col{display:flex;flex-direction:column;} /* ── La carte ──────────────────────────────────────────────────────────── */ /* max-width vaut aussi en colonne unique : sur une tablette de 800 px, sans lui, la carte prendrait toute la largeur et les champs repartiraient à 700 px. */ /* 11/08 — CARTE MISE EN AVANT (référence envoyée par Ayoub : carte à liseré rose avec un halo, celle qu'on choisit parmi trois). Le liseré passe du gris neutre au cramoisi de la charte. Aucune couleur inventée : #E4004D est --rmd-redder, déjà l'encre des chiffres du hero. Trois ombres empilées, chacune fait un travail différent — retirer la mauvaise casse l'effet sans qu'on comprenne pourquoi : 1. l'anneau 0 0 0 5px à 5 % : un halo net, collé au bord. C'est LUI qui fait lire « sélectionné » ; sans lui il n'y a qu'un trait coloré. 2. la lueur 0 0 34px -6px à 28 % : diffuse, elle décolle la carte du blanc de la section. 3. l'ombre portée, en bleu d'encre et non en rose : elle pose la carte au sol. En rose elle donnerait un objet qui flotte dans un nuage coloré. ⚠ 1,5px et non 2 : à 2px le liseré devient un cadre et écrase les libellés de champs à l'intérieur. ⚠ La carte de gauche (.rmd-fm__stack) porte déjà son propre liseré, en DÉGRADÉ. Deux anneaux différents côte à côte, c'est la limite : ne pas ajouter un troisième traitement d'encadrement dans cette section. */ /* Liseré DÉGRADÉ repris des cartes « autres secteurs » (11/08, demande Ayoub) : bord transparent + double fond (blanc dans le padding, dégradé de marque dans la zone de bordure). L'anneau rose part avec le liseré rouge ; l'ombre d'encre reste, c'est elle qui pose la carte au sol. */ .rmd-fm__card{width:100%;max-width:544px;margin:0 auto; border:1.5px solid transparent;border-radius:18px; background-image:linear-gradient(#fff,#fff), linear-gradient(155deg,#3943FF 58%,#E4004D 85%,#FA9329 100%); background-origin:border-box; background-clip:padding-box,border-box; box-shadow:0 26px 60px -34px rgba(4,17,53,.30);} .rmd-fm__head{padding:26px 30px 20px;border-bottom:1px solid var(--rmd-bord);} .rmd-fm__ht{font-size:19px;font-weight:600;letter-spacing:-.015em;color:var(--rmd-ink);} .rmd-fm__hs{margin-top:5px;font-size:13.5px;color:var(--rmd-slight);} /* Marges intérieures généreuses, comme le veut la règle du conteneur borné : ce sont elles qui font respirer le formulaire, pas du blanc laissé à droite des champs. */ .rmd-fm__body{padding:26px 30px 32px;} .rmd-fm__meter{display:flex;align-items:center;gap:14px;margin-top:16px;} .rmd-fm__prog{flex:1 1 auto;height:4px;background:var(--rmd-bord);border-radius:999px;overflow:hidden;} .rmd-fm__progi{display:block;height:100%;width:33.33%;border-radius:999px; background:linear-gradient(90deg,#3943FF 0%,#E4004D 62%,#FA9329 100%); transition:width .35s ease;} .rmd-fm__count{flex:none;font-size:11.5px;font-weight:600;letter-spacing:.03em; color:var(--rmd-slight);font-variant-numeric:tabular-nums;} /* ── Étapes ────────────────────────────────────────────────────────────── */ /* 18 → 22 : un cran d'air de plus entre les champs, 10/08. C'est la seule valeur à bouger ici — l'intérieur d'un champ (libellé/contrôle/aide) reste serré à dessein, c'est ce qui les fait lire comme UN bloc et non comme trois lignes indépendantes. Élargir les deux à la fois aurait dissous le groupement au lieu de l'aérer. */ .rmd-fm__step{display:flex;flex-direction:column;gap:22px;} .rmd-fm__step[hidden]{display:none;} /* La marge basse n'est PAS décorative : un n'est pas un enfant flex de son
, il est sorti du flux et posé sur la bordure. Le gap:18px de .rmd-fm__step ne s'applique donc jamais entre lui et le premier champ — mesuré à 0 px sur les trois étapes, « VOTRE SITE » collé à « Site à auditer ». Seule une marge portée par le legend lui-même rétablit la respiration. Préfixé .rmd-ty : la remise à zéro `:where(…,legend){margin:0}` vaut (0,1,0), autant qu'une classe seule — même piège que .rmd-fm__note. */ .rmd-ty .rmd-fm__legend{font-size:11px;font-weight:600;letter-spacing:.14em; text-transform:uppercase;color:var(--rmd-purp); margin-bottom:16px;} /* Le script déplace le focus sur le titre de l'étape à chaque changement d'écran, pour que le lecteur d'écran annonce la nouvelle étape et que la tabulation reparte du bon endroit. Aucun cadre ici, pas même en :focus-visible : Chrome fait « hériter » :focus-visible d'un focus programmatique quand le focus précédent le matchait — le liseré réapparaissait donc à la souris, sur un titre qui n'est pas un contrôle. Masquer l'indicateur ne coûte rien sur un élément non interactif : rien ne s'y active, et la tabulation suivante rend la main au premier champ, qui a son propre liseré. */ .rmd-fm__legend:focus, .rmd-fm__legend:focus-visible{outline:none;} /* Les paires côte à côte (email/téléphone, effectif/budget) tenaient dans une colonne de 488 px. Dans 340 elles tomberaient à 161 px chacune, et « 80 000 MAD - 200 000 MAD » y serait coupé. Elles s'empilent donc. */ .rmd-fm__two{display:grid;grid-template-columns:1fr;gap:22px;} .rmd-fm__f{display:flex;flex-direction:column;gap:8px;min-width:0;} .rmd-fm__l{display:flex;align-items:baseline;gap:8px;font-size:13px;font-weight:500;color:var(--rmd-ink);} /* La mention porte sur l'exception, pas sur la règle : neuf champs sur dix sont requis, ce sont les deux autres qui méritent d'être signalés. */ .rmd-fm__opt{font-size:11.5px;font-weight:400;color:#9AA4B5;} /* 1,45 était la valeur la plus serrée du formulaire, sur un texte qui passe à deux lignes dès qu'il explique quelque chose. */ .rmd-fm__hint{font-size:11.5px;line-height:var(--rmd-lh-body);color:var(--rmd-slight);} .rmd-fm__i{width:100%;font:inherit;font-size:14px;color:var(--rmd-ink);background:#fff; border:1px solid var(--rmd-bord);border-radius:10px;padding:10px 14px; transition:border-color .2s ease, box-shadow .2s ease;} .rmd-fm__i::placeholder{color:#AAB3C2;} .rmd-fm__i:hover{border-color:#CBD2E0;} .rmd-fm__i:focus{outline:none;border-color:var(--rmd-purp);box-shadow:0 0 0 3px rgba(57,67,255,.12);} textarea.rmd-fm__i{min-height:92px;resize:vertical;} /* 16 px sous 768 : Safari iOS zoome sur tout champ dont le texte est plus petit, et ne revient pas en arrière quand on quitte le champ. Le select natif, bien que masqué, prend le focus et déclenche le même zoom. */ @media(max-width:767px){ .rmd-fm__i,.rmd-sel__btn,.rmd-sel__native{font-size:16px;} } /* L'état d'erreur est posé par le script, pas par :invalid : :invalid est vrai dès le chargement sur un champ requis vide, ce qui teindrait tout le formulaire en rouge avant la moindre interaction. */ .rmd-fm__f.has-err .rmd-fm__i{border-color:var(--rmd-redder);box-shadow:0 0 0 3px rgba(228,0,77,.10);} .rmd-fm__err{display:none;font-size:11.5px;color:var(--rmd-redder);} .rmd-fm__f.has-err .rmd-fm__err{display:block;} /* ── Liste déroulante maison ───────────────────────────────────────────── */ /* Le