/* =====================================================================
druidx.css — feuille de style du NOUVEAU site (public_html/)
S8-P0/P1, 2026-10-15.
SOURCE DU DESIGN (aucune invention) : `http/www/_maquettes/04-product-wave-2026.html`,
la maquette validée par Alex le 11/10/2026 (43 644 o, 207 règles, 13 variables).
Les 207 règles sont **reprises telles quelles**, seules trois adaptations :
1. les sélecteurs portent les noms de classes DU NOUVEAU site (le gabarit S3 est écrit en
français sémantique : `entete`, `recherche`, `navigation`, `corps`, `pied`, `listproduct`,
`results_wrapper`, `finalprice`…) — pas ceux de la maquette ;
2. la police est servie par NOTRE serveur (`/assets/font/`), la maquette la chargeait chez
Google (`fonts.googleapis.com`) ;
3. les règles propres à la page-démonstration sont retirées (`.banner`, `.swatches`,
`.floatbar`) : elles n'existent dans aucune page du site.
LA PALETTE n'est pas un choix de goût : chaque valeur est une MESURE relevée sur des sites du
métier en production (rapport tests/pal2026/RAPPORT.md, 11/10/2026), contrôlée en contraste
paire par paire par tests/aa.php. Les variables sont recopiées sans modification.
CE QUE CETTE FEUILLE NE FAIT PAS : elle ne change aucun texte. Le texte du site est porté de
l'ancien site et vérifié ligne à ligne par tools/check/parite-refonte.php.
===================================================================== */
/* ---------- PALETTE MESURÉE 11/10/2026 (recopiée depuis la maquette validée) ---------- */
:root{
/* Photo peinte en CSS, pas en `` : mesuré le 15/10 sur l'accueil du banc, les photos sont des
URL **des marchands** (rakuten, grosbill, darty, fnac, priceminister, media-rdc…) — 25 URL
distinctes, **1 seule répond 200**, 6 répondent 404, 11 sont injoignables, 7 redirectent. Un ``
sur une URL morte affiche l'icône « image cassée » **et le texte alternatif** : c'est ce qui a rendu
les cartes et la scène de fiche illisibles (mesuré sur les captures d'Alex du 12/10, portées ici).
Un calque peint n'affiche **rien** si l'URL est morte, et le marque-page local ci-dessous prend la
place. Le titre du produit reste dans le lien, l'image est décorative.
**Le marque-page se LIT « photo non fournie » (mesuré 15/10 au Playwright du poste).** La première
version ne peignait qu'une caméra de 58 px au centre d'une boîte de 470×420 : le calque vide se lisait
comme une **page cassée**, pas comme une absence de donnée. La version ci-dessous porte le **libellé
dans le SVG** (sous la caméra) : une URL morte → caméra + « photo non fournie » ; une URL vivante → la
photo peinte par-dessus, le libellé disparaît sans rien demander. Le libellé est dans le SVG, pas dans
le HTML : il ne change **aucune** ligne de texte rendue, donc la parité ne bouge pas. Le second jeton
(--tombale-ico) est la caméra **sans libellé** : mesurée, la pastille de la vague fait 84×84, un mot de
14 px y tiendrait en 4 px — illisible. Les tailles peintes sont **proportionnelles à la boîte**
(`background-size` en % : 62 % par défaut, 45 % pour la scène, 78 % pour les cartes, 42 px pour la vague).
*/
--tombale:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 104' fill='none' stroke='%23c9d2dc' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='43' y='10' width='64' height='46' rx='9'/%3E%3Ccircle cx='63' cy='27' r='6'/%3E%3Cpath d='M48 46l14-12 8 7 7-6 11 11'/%3E%3Ctext x='75' y='88' text-anchor='middle' font-family='sans-serif' font-size='14' font-weight='700' letter-spacing='.4' fill='%23565959' stroke='none'%3Ephoto non fournie%3C/text%3E%3C/svg%3E");
--tombale-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%23c9d2dc' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='7' y='13' width='50' height='38' rx='7'/%3E%3Ccircle cx='23' cy='27' r='4.5'/%3E%3Cpath d='M12 45 27 32l9 8 8-7 8 12'/%3E%3C/svg%3E");
--bg:#ffffff; --band:#f7f9fa; --band2:#eef1f4;
--ink:#131921; --ink2:#565959; --line:#d5dbe1; --line2:#b7c0c8; --navy:#0a3761;
--brand:#ff690f; --brandL:#e85d00; --brand2:#b24a00;
--link:#0f62fe; --pos:#21791d; --neg:#e31b3e;
--posTint:#eaf4ea; --brandTint:#fff1e8; --navyTint:#eaf1f8; --linkTint:#f2f6ff;
--inkInv:#b9c2cc;
--r:12px;
--lift:0 1px 2px rgba(19,25,33,.06), 0 18px 38px -20px rgba(19,25,33,.24);
--hover:0 6px 14px rgba(10,55,97,.10), 0 34px 60px -22px rgba(10,55,97,.30);
--spring:cubic-bezier(.2,1.4,.3,1);
}
/* ---------- police : SERVEE PAR NOUS (Plus Jakarta Sans, variable 400→800, latin + latin-ext)
2 fichiers mesurés dans /assets/font/ : 27 348 o + 21 728 o = 49 076 o, signature wOF2 vérifiée.
Aucun appel à fonts.googleapis.com : le site ne dépend d'aucun service extérieur, la police
arrive avec la page. font-display:swap = le texte est lisible immédiatement, la police
remplace la casse système une fois chargée (pas de texte invisible). ---------- */
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:400 800;font-display:swap;
src:url('/assets/font/plusjakarta-latin.woff2') format('woff2');
unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:400 800;font-display:swap;
src:url('/assets/font/plusjakarta-latin-ext.woff2') format('woff2');
unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
/* ---------- base ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:hidden}
body{font:16px/1.6 "Plus Jakarta Sans",system-ui,sans-serif;color:var(--ink);background:var(--bg);overflow-x:hidden}
.num{font-variant-numeric:tabular-nums lining-nums}
.mono{font-family:ui-monospace,"Liberation Mono","DejaVu Sans Mono",monospace}
.wrap{max-width:1240px;width:min(1240px,100%);margin:0 auto;padding:0 20px}
a{text-decoration:none;color:var(--link)}
img{display:block;max-width:100%}
:focus-visible{outline:3px solid var(--link);outline-offset:2px;border-radius:6px}
/* Icônes dessinées dans les gabarits (aucune bibliothèque d'icônes n'est chargée par la nouvelle
app — mesuré : `templates/pages/compte.php` rendait `` sans FontAwesome,
donc **rien**). L'icône est désormais un SVG `currentColor`, la règle l'aligne sur la ligne de texte. */
.coeur{display:inline-block;vertical-align:-3px;color:var(--brand2)}
.visuellement-caché{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;padding:0}
/* ---------- entête : collant, translucide, la barre se resserre au défilement ---------- */
.entete{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.97);border-bottom:1px solid var(--line);transition:box-shadow .25s}
/* **Le verre dépoli (`backdrop-filter`) est supprimé** (mesure du 13/10, deux causes convergentes) : un
élément en `backdrop-filter` devient le **contenant** de ses descendants en `position:fixed` — le fond
assombri du menu, posé dans l'entête, n'aurait couvert **que l'entête** ; et l'entête gainsée collait à la
barre de recherche, ce que la capture d'Alex reproche (« une ligne sous la recherche qui ne sert à rien
puisque collée à la recherche »). */
.entete::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,var(--brand),var(--brandL) 34%,var(--navy))}
.entete .entete-in{display:flex;align-items:center;gap:16px;min-height:68px;flex-wrap:wrap}
.entete-marque{font-weight:800;font-size:1.5rem;letter-spacing:-.035em;color:var(--ink)}
.entete-marque i{font-style:normal;color:var(--brandL)}
.navigation{margin-left:auto}
.navigation ul{display:flex;gap:2px;list-style:none;flex-wrap:wrap}
.navigation a{color:var(--ink2);font-weight:700;font-size:.93rem;padding:9px 13px;border-radius:999px;display:inline-block;transition:background .2s,color .2s,transform .2s var(--spring)}
.navigation a:hover{background:var(--navyTint);color:var(--navy);transform:translateY(-2px)}
/* ---------- champ de recherche de l'entête (reposé le 15/10/2026, demande d'Alex) ---------- */
/* Mesure d'avant : le champ **n'existait qu'à l'accueil** (`grep 'name="s"' templates/` : un seul champ
libre, celui du hero) → `/categories`, `/c/…`, `/p/…`, `/connexion`, `/download`, `/conditions`,
`/cookies` et `/s/…` rendaient **aucune recherche**. Le champ est donc **partout**, et **masqué sur
l'accueil** : la classe `accueil` du corps (`templates/layout.php`) porte la règle ci-dessous, qui
**gagne** contre `.recherche{display:flex}` par sa spécificité (3 classes + élément contre 1 classe).
Un attribut `hidden` ne suffisait **pas** (mesuré 15/10 : la règle de classe écrasait l'attribut). */
.entete .recherche{flex:1 1 260px;min-width:0;max-width:420px;order:2;margin:10px 0;border-width:1.5px;
padding:4px 4px 4px 10px;box-shadow:none}
.entete .recherche input{font-size:.95rem;line-height:1.2;padding:5px 0;padding-left:10px}
.entete .recherche button{padding:9px 16px;font-size:.78rem;border-radius:10px}
.entete .navigation{order:3}
body.accueil .entete .recherche{display:none}
/* Le controle du menu (case + libellé) **n'existe pas en desktop** : la rangee de liens y tient.
Il n'apparait que sous 768 px, dans le bloc `@media (max-width:767px)`. */
.entete-case,.entete-menu{display:none}
/* ---------- recherche : la barre du bandeau (`.bigsearch` de la maquette) ---------- */
/* **Forme reprise le 15/10 (captures d'Alex : « du carré dans du rond, le texte collé à gauche, le double
entourage est lourd graphiquement »).** Avant : pilule `border-radius:999px`, bord **2 px noir**, ombre
portante, et **le bouton, déjà une pilule, posait sa propre bordure** à l'intérieur de celle du champ —
deux contours, un rond qui en contient un autre. Après : **un seul contour**, 1,5 px, couleur de ligne,
**un seul rayon** pour la boîte et pour le bouton (16 px / 10 px), pas d'ombre, pas de brillance animée,
pas de saut au focus. Le texte du champ **respire à gauche** (`padding-left:12px`, `letter-spacing:.01em`),
le libellé du bouton est **espacé** (`.08em`, bas de casse, pas de majuscules collées). Le focus se lit à
la couleur de la ligne + anneau marine, sans déplacement : un champ qui saute de 3 px déplace la page. */
.recherche{display:flex;align-items:center;gap:10px;background:#fff;border:1.5px solid var(--line2);border-radius:16px;padding:7px 7px 7px 12px;margin:18px 0 0;max-width:640px;box-shadow:none;transition:border-color .2s,box-shadow .2s}
.recherche:focus-within{border-color:var(--navy);box-shadow:0 0 0 3px var(--navyTint)}
.recherche input::placeholder,.bigsearch input::placeholder{color:var(--ink2);opacity:1;letter-spacing:.01em}
.recherche label{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;padding:0}
.recherche input{flex:1;border:0;outline:0;font:inherit;font-size:1rem;background:transparent;min-width:0;color:var(--ink);padding-left:12px;letter-spacing:.01em}
/* **Le double contour venait de là** (capture d'Alex du 15/10 : « du carré dans du rond, le double entourage est
lourd ») : la règle des formulaires (`form input[type=search]`, ligne 501 de la feuille) posait **une bordure,
un fond blanc et un rayon** sur le champ, **à l'intérieur** du contour de la barre — deux contours l'un dans
l'autre — plus un anneau de focus propre au champ. Les champs de recherche sont **spécifiques par type**
(2 classes + élément contre 1 classe + élément) : plus de bordure, plus de fond, plus d'anneau
intermédiaire. La barre garde **son** contour, le focus se lit **sur la barre**. */
.recherche input[type=search],.bigsearch input[type=search]{border:0;border-radius:0;background:transparent;width:auto;padding:6px 0 6px 12px;box-shadow:none}
.recherche input[type=search]:focus,.bigsearch input[type=search]:focus{border:0;box-shadow:none;outline:none}
.recherche input::placeholder{color:var(--ink2);opacity:1;letter-spacing:.01em}
.recherche button{border:0;border-radius:10px;padding:12px 20px;font-weight:800;font-size:.84rem;letter-spacing:.08em;color:#fff;background:var(--brandL);cursor:pointer;transition:background .2s;display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.recherche button:hover{background:var(--navy)}
.recherche button svg{flex:none}
/* Loupe du bouton de recherche : icône dessinée, pas du texte — elle garde sa boîte quand le mot tombe. */
.ico-loupe{display:block}
/* **Le libellé du bouton de recherche** (capture d'Alex du 13/10 sur mobile : « tu as mis un “aller” au moteur
de recherche, c'est inapproprié — on ne va pas à une recherche, on cherche ») : le bouton dit
« **Chercher** » et porte une **loupe**. En mobile le mot tombe, la loupe reste (l'icône se lit sans ligne).
« Aller » ne désignait rien : il ne menait à aucune destination. */
.recherche button span{display:inline}
/* Contrôle en **surimpression** (menu mobile, ci-dessous à 767 px) : il n'existe pas en desktop, la
navigation y reste en ligne. La `checkbox` et ses labels se déclarent ici, la feuille les réveille en mobile. */
.entete-menu,.entete-compte,.fond-menu,.entete-fermer{display:none}
/* Texte **pour le lecteur d'écran seul** (l'icône ne se nomme pas toute seule) : hors champ visuel, jamais
`display:none` — un texte masqué n'est plus lu. */
.hp{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* ---------- mouvements (CSS seul, aucun JavaScript) ---------- */
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes marquee{to{transform:translateX(-50%)}}
@keyframes conicspin{to{--a:360deg}}
@keyframes beat{0%,100%{box-shadow:0 0 0 0 rgba(33,121,29,.5)}70%{box-shadow:0 0 0 11px rgba(33,121,29,0)}}
@keyframes shine{to{transform:translateX(230%)}}
@keyframes grow{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
@keyframes popline{to{transform:scaleX(1)}}
@property --a{syntax:"";initial-value:0deg;inherits:false}
.reveal{animation:rise .7s var(--spring) both}
@supports (animation-timeline: view()){.reveal{animation-timeline:view();animation-range:entry 5% cover 16%;animation-delay:0s}}
/* ---------- hero de l'accueil (transcrit de la maquette 04, 15/10) ----------
Les sélecteurs viennent de la maquette validée ; la palette est celle des variables ci-dessus,
mesurées sur 12 sites du métier. Le h1 du hero est plus grand que celui des autres pages : il est
porteur (`.corps .hero h1`, trois classes, il gagne donc contre `.corps h1`). */
/* Le hero se resserre (mesure 15/10 au Playwright : il mesurait **1 182 px** à 1 366 de large, la scène
produit tombait à y = 732, sous la ligne de flottaison d'un écran de 1 000 px). Un hero de trois
écrans ne montre pas de produit : les cotes ci-dessous visent **≤ 800 px**, la scène visible d'emblée.
Le texte ne bouge pas (parité), seules les cotes de typo et les marges descendent. */
.hero{position:relative;padding:52px 0 44px;overflow:hidden;
/* **La couleur du hero** (S8-P17, barre d'Alex : « noir blanc marron, 0 graph/img/svg ») : un lavis
multi-teintes posé sur la palette **mesurée** de la feuille (--navy/--brand/--link/--pos), en couches
explicites (`no-repeat`, pas de valeur implicite qui s'effondre, leçon du 15/10 sur les couches). */
background:
radial-gradient(760px 420px at 12% -8%, var(--navyTint), transparent 68%),
radial-gradient(620px 360px at 88% 4%, var(--brandTint), transparent 66%),
radial-gradient(900px 520px at 50% 108%, var(--linkTint), transparent 70%),
linear-gradient(180deg, #fff, var(--band))}
.hero::before{content:"";position:absolute;inset:0;background:
repeating-linear-gradient(115deg, rgba(17,74,139,.055) 0 2px, transparent 2px 11px),
linear-gradient(90deg, var(--brandLight) 0 3px, transparent 3px);opacity:.6;pointer-events:none}
.hero::before{content:"";position:absolute;inset:-30% -12% auto;height:125%;z-index:0;
background:radial-gradient(46rem 22rem at 14% 0%,#eef4fa,transparent 62%),
radial-gradient(38rem 20rem at 86% 8%,#fff3ea,transparent 62%)}
.hero .in{position:relative;z-index:1}
/* **Le hero de l'accueil est une grille éditoriale à deux colonnes, alignée en haut** (mesure du 13/10 à
1 920 × 1 080, capture d'Alex : « asymétrie bizarre + hero hors du cadre »). Ce que la feuille faisait
avant, et ce que la mesure donne :
- `.hero .in` : **une seule colonne de 1 200 px** — le texte courait sur toute la largeur (`h1` 779 px,
`lede` 703, `hint` 680, champ 640) ;
- `.stage{display:grid;grid-template-columns:1.05fr 1fr;align-items:center}` : deux colonnes de **603** et
**575** px, et `align-items:center` **centre** la boîte photo de **362 px** dans une rangée de **676 px**
→ **157 px de vide au-dessus et au-dessous de la photo**, la photo à `y = 730`, la carte de prix à `y = 573`.
Résultat lu sur la capture : un bloc de texte **pleine largeur**, sous quoi deux boîtes qui **ne partagent
aucune arête** (603 contre 575, décalées de 157 px), le bas de la carte de prix à **y = 1 249**, sous la ligne
de flottaison d'un écran de 1 080 — le hero **déborde du cadre**.
La technique posée est celle d'une **planche éditoriale à deux colonnes, `align-items:start`** : colonne de
gauche = texte (accroche, titre, recherche, copie), colonne de droite = **la scène produit empilée**
(pastilles, titre, photo, carte de prix). Les deux colonnes **démarrent à la même ordonnée**, la photo
**precede** la carte au lieu de flotter à côté d'elle, et le hero tient dans le cadre. **`align-items:center`
ne se remplace pas par un réglage de la photo** : c'est l'alignement d'une rangée dont les deux enfants n'ont
pas la même hauteur qui produit le vide ; la hauteur se reprend en **empilant**, pas en centrant. */
/* **Le hero de l'accueil est UNE SEULE COLONNE centrée, sans carte à côté du texte** (mesure du 13/10 sur
des sites réels, `docs/spec-accueil-2026-2026-10-15.md`, arbitrage d'Alex : « deux colonnes côte à côte sans
relation, beaucoup de vide, aucune hiérarchie »). Ce que la mesure a trouvé sous le reproche :
- feuille d'avant : `.hero .in` en **deux colonnes de 597 et 569 px**, la colonne de texte finissait à
**y = 610** et la scène produit à **y = 1 165** → **555 px de blanc** sous le texte (33 % de la surface du
hero), et le hero **1 090 px** débordait le cadre de **105 px** sur un écran de 1 080 ;
- **aucun** des sites mesurés ne pose de carte produit encadrée à côté du texte du hero : Stripe (hero
**685 px = 76 % du fold**, eyebrow = **un** chiffre, h1 40 px, **2 CTA**, visuel **full-bleed**),
Linear (**une colonne**, h1 64 px sur 1282), Kayak (comparateur : hero **497 px = 55 % du fold**, **le
widget de recherche est l'objet du fold**), Vercel (le visuel produit est **au-dessous**, centré).
La colonne porte donc, dans l'ordre de lecture : **un fait de fraîcheur** (eyebrow), le titre, la ligne
d'offre, **le champ de recherche** (l'action du comparateur est la recherche, pas le scroll), la ligne
d'appoint. La preuve du prix est **un bloc entier plus bas** (`.preuve`), pas un panneau latéral. */
.hero .in{max-width:820px;margin:0 auto;text-align:center}
/* **Bande décorative du hero** (S8-P17) : trois photos **déjà mesurées** sur les produits rendus plus bas
(mêmes URL, mêmes EAN), peintes en calque. **Pas de ``** : une URL de marchand meurt à 8 s sur cinq
(mesure du 15/10, `s8-p9-photos-hotes-recherche-entete-et-hamburger`), et une image morte au-dessus de la
ligne de flottaison se voit. **Aucun `::before` ici** : la leçon du halo du 15/10 (`s8-p10bis`) est tenue —
un voile peint par-derrière une photo de produit **blanchit** la photo (63 % de pixels > 245 mesuré). Ici la
teinte est **en dessous** du calque (`.cad` posé sur un fond teinté), pas par-derrière. */
.hero-visuel{display:flex;justify-content:center;gap:14px;margin-top:26px}
.hero-visuel .cad{width:132px;height:104px;border-radius:12px;border:1px solid var(--line);background-color:var(--navyTint);
background-repeat:no-repeat;background-position:center;background-size:88% 88%;box-shadow:0 10px 22px -20px rgba(22,35,58,.4)}
.hero-visuel .cad:nth-child(2){transform:translateY(10px)}
.hero-visuel .cad:nth-child(3){transform:translateY(-6px)}
.hero .eyebrow{margin-bottom:2px}
.corps .hero h1{margin-left:auto;margin-right:auto}
.hero .hero-lede,.hero .lede,.hero .hint{margin-left:auto;margin-right:auto}
.hero .bigsearch{margin-left:auto;margin-right:auto}
/* **La scène produit de l'accueil est UNE SEULE carte** (mesure du 13/10 à 1 920, capture d'Alex). Ce que la
feuille rendait : **trois boîtes disjointes** — carte photo (569×298), **titre en texte nu** (569×68, sans
cadre, collé sous la carte), carte de prix (569×564, sa **propre** bordure dégradée) — plus, à l'intérieur de
la carte photo, un **second cadre** blanc (voir la leçon de collision de classes ci-dessous). Le rail droit
se lisait donc comme une pile de trois objets qui ne partagent aucune arête.
La carte unique porte la peau de la carte de prix (bordure dégradée tournante) ; la bande photo devient un
**fond de teinte**, sans cadre ni ombre propre ; la boîte de prix **perd sa peau** à l'intérieur (bordure,
ombre, `::before` dégradé) : la scène est **un objet**, la photo, le titre, le prix et la courbe s'y lisent
dans un seul périmètre. */
/* **La preuve du prix est un bloc entier** (`.preuve`), la scène y tient dans **une seule carte** à deux
colonnes **de même hauteur** (mesure de la planche de Vercel : claim + visuel produit **central** + liste
à droite, écart de 208 px avec le bloc du haut ; règle posée dans la spec : delta de hauteur entre colonnes
d'une même rangée **≤ 40 px**). La peau de la carte est portée par la scène ; la bande photo est une
**teinte sans cadre** ; la boîte de prix **perd sa peau** à l'intérieur (bordure, ombre, `::before` dégradé) —
la scène est **un objet**, pas une pile de trois boîtes qui ne partagent aucune arête (mesure du 13/10). */
.preuve{padding:64px 0}
.preuve .stage.preuve-scene{position:relative;margin-top:0;padding:16px;border-radius:var(--r);background:#fff;
border:1px solid var(--line);box-shadow:var(--lift);align-items:stretch;gap:26px}
.preuve .stage.preuve-scene .photo{min-height:300px;padding:12px;border:0;box-shadow:none;border-radius:10px;
background:var(--band)}
.preuve .stage.preuve-scene .photo .cad{width:min(100%,420px);height:min(290px,46vw)}
.preuve .stage.preuve-scene .meta{min-width:0}
.preuve .stage.preuve-scene .chips{margin-bottom:10px}
.preuve .stage.preuve-scene .pricebox{border:0;box-shadow:none;padding:0;margin:14px 0 0;border-radius:0}
.preuve .stage.preuve-scene .pricebox::before{display:none}
/* Blocs de la home : un rythme, pas d'empilement sans respiration (mesure 13/10 : écart entre blocs
**160 à 210 px** sur les sites relevés — Vercel 208 px ; Stripe porte le rythme dans ses conteneurs).
Le contenu reste dans la colonne du site (mesures : 1 000 px à 1 280 px de large selon les sites). */
.bloc{padding:64px 0}
.kicker{font-size:.78rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--brand2);margin:0 0 14px}
@media (max-width:1119px){
.preuve .stage.preuve-scene{grid-template-columns:1fr;gap:18px}
.preuve .stage.preuve-scene .photo .cad{width:min(100%,340px);height:min(240px,58vw)}
}
/* Sous 1 120 px la planche devient une colonne : texte, puis scène produit empilée. */
.eyebrow{display:inline-flex;align-items:center;gap:9px;border-radius:999px;padding:7px 15px;font-size:.78rem;
font-weight:800;letter-spacing:.06em;text-transform:uppercase;background:#fff;border:1.5px solid var(--line2);
box-shadow:var(--lift);color:var(--ink2)}
.eyebrow i{font-style:normal;width:8px;height:8px;border-radius:50%;background:var(--pos);animation:beat 2.2s infinite}
.eyebrow b{color:var(--ink);font-weight:800}
/* **Le premier mot de l'accueil** (voir `templates/pages/accueil.php`) : une ligne d'accroche, pas une
pilule de chiffres. Taille de lecture, graisse sur ce qui porte, couleur de marque sur le montant —
la charte, pas un drapeau. */
.hero-lede{margin:0 0 4px;font-size:1.02rem;font-weight:600;line-height:1.35;color:var(--ink2);max-width:44ch}
.hero-lede b{color:var(--ink);font-weight:800}
.hero-lede b:last-of-type{color:var(--brand2)}
.corps .hero h1{font-size:2.9rem;font-weight:800;letter-spacing:-.04em;line-height:1.05;margin:12px 0 10px;color:var(--ink);max-width:24ch}
.corps .hero h1 .u{position:relative;display:inline-block;white-space:nowrap}
.corps .hero h1 .u::after{content:"";position:absolute;left:0;right:0;bottom:.05em;height:.26em;border-radius:99px;
background:var(--brandTint);z-index:-1;transform:scaleX(0);transform-origin:left;animation:popline .9s .45s cubic-bezier(.2,1.2,.3,1) both}
.hero .lede{color:var(--ink2);max-width:60ch;font-size:1rem;margin:0}
.bigsearch{margin-top:18px;display:flex;align-items:center;gap:10px;background:#fff;border:1.5px solid var(--line2);
border-radius:16px;padding:7px 7px 7px 12px;max-width:640px;box-shadow:none;transition:border-color .2s,box-shadow .2s}
.bigsearch:focus-within{border-color:var(--navy);box-shadow:0 0 0 3px var(--navyTint)}
.bigsearch input{flex:1;border:0;outline:0;font:inherit;font-size:1rem;background:transparent;min-width:0;color:var(--ink);padding-left:12px;letter-spacing:.01em}
.gobtn{border:0;border-radius:10px;padding:12px 20px;font-weight:800;font-size:.84rem;letter-spacing:.08em;color:#fff;background:var(--ink);
cursor:pointer;transition:background .2s}
.gobtn:hover{background:var(--navy)}
.hero .hint{margin-top:10px;font-size:.88rem;color:var(--ink2);max-width:66ch}
.hero .hint b{color:var(--ink)}
/* ---------- barre de marques (S8-P16, 13/10) ----------
Mesure Stripe (13/10) : **6 logos sur un rang, posés après le hero**. La barre de druidx **nomme** les
enseignes dont une offre est vivante sur les produits rendus aujourd'hui (comptées dans les payloads déjà
lus par la page), **sans aucun nombre** : le compte de marchands en tête de home est un **aveu de faiblesse**
(decision d'Alex du 13/10). Ce sont des **textes**, pas des logos téléchargés : aucun visuel tiers n'est
récupéré sans accord. */
.marques{padding:24px 0 30px;background:linear-gradient(180deg,var(--brandTint),var(--band));border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.marques .in{max-width:1080px;margin:0 auto;text-align:center}
.marques-tete{font-size:.74rem;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:var(--ink2);margin:0 0 14px}
.marques-liste{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;justify-content:center;gap:8px 28px}
.corps .marques-liste{list-style:none;padding-left:0;margin-left:0}
.corps .marques-liste > li{margin:0}
.marques-liste li{font-size:.96rem;font-weight:800;letter-spacing:.01em;color:var(--ink2);opacity:.9}
/* ---------- tuiles de rubriques (S8-P16) : la navigation d'entrée du comparateur ----------
Mesure Kayak : après le hero, **grille de tuiles** ; NN/g : « Reveal Content Through Examples » et
« les utilisateurs vont à l'accueil pour trouver leur chemin ». Ce sont des **liens** vers `/c/{id}`
(page mesurée à 200 par `tools/check/check-pages.php`), pas des filtres. */
/* 8 tuiles = **4 par rang, 2 rangs** (mesure 13/10 à 1 920 : `auto-fit minmax(210px,1fr)` rendait **5 colonnes**,
la 2ᵉ rangée laissait **3 cases vides** et la barre d'onglet du bas se trouvait décalée). 8 est notre nombre,
la grille doit le tenir. */
.tuiles{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.corps .tuiles{list-style:none;padding-left:0;margin-left:0}
.corps .tuiles > li{margin:0;display:flex}
.tuiles > li{display:flex}
.tuile{flex:1;display:flex;flex-direction:column;gap:7px;padding:18px;background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--lift);text-decoration:none;color:var(--ink);
transition:transform .3s var(--spring),box-shadow .3s,border-color .2s}
/* ** Icône dessinée par rubrique** (S8-P17, barre d'Alex : « 0 graph/img/svg ») : pastille teintée sur la palette
mesurée, glyphe tracé à la main dans le gabarit (`$ICONES`), `aria-hidden` (décoratif). 4 teintes qui tournent
sur les 8 tuiles : la grille de rubriques n'est plus un bloc de texte noir sur blanc. */
.tuile-ico{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;color:var(--navy);
background:var(--navyTint);transition:transform .3s var(--spring)}
.tuile:hover .tuile-ico{transform:scale(1.08) rotate(-4deg)}
.tuile-ico.teinte-brand{color:var(--brand2);background:var(--brandTint)}
.tuile-ico.teinte-pos{color:var(--pos);background:var(--posTint)}
.tuile-ico.teinte-link{color:var(--link);background:var(--linkTint)}
.tuile-ico.teinte-navy{color:var(--navy);background:var(--navyTint)}
.tuile b{font-size:1.05rem;font-weight:800;letter-spacing:-.015em;line-height:1.25}
.tuile > span{font-size:.83rem;color:var(--ink2)}
.tuile .go{margin-top:auto;display:inline-flex;align-items:center;gap:8px;font-weight:800;font-size:.86rem;color:var(--brand2);white-space:nowrap}
.tuile .go .arr{transition:transform .25s var(--spring)}
.tuile:hover{transform:translateY(-6px);box-shadow:var(--hover);border-color:var(--line2)}
.tuile:hover .go .arr{transform:translateX(5px)}
.rubriques .tuiles{margin-top:2px}
.rubriques .sechead .pill{flex:none}
/* ---------- trois colonnes d'atouts (S8-P16) : la valeur unique, en trois coups ----------
Mesure 13/10 : les sites relevés tiennent **un rang de trois valeurs** après la preuve (Vercel : claim +
liste à droite ; Stripe : rangée de solutions). Le texte porte ce qui est mesuré dans les questions
portées de l'ancien site (extension, code-barres, financement par les boutiques) : **rien d'inventé**. */
.atouts-tete{max-width:62ch;margin-bottom:22px}
.atouts{background:linear-gradient(180deg,var(--linkTint),var(--band));border-top:1px solid var(--line)}
.atouts .atouts-tete h2{margin:0}
.atouts-tete p{color:var(--ink2);margin:8px 0 0}
.atouts-liste{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px}
.corps .atouts-liste{list-style:none;padding-left:0;margin-left:0}
.corps .atouts-liste > li{margin:0}
.atout{display:flex;flex-direction:column;gap:10px;padding:22px;background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--lift)}
/* **Pastille colorée de l'atout** (S8-P17) : la leçon des piles de calque du 15/10 est tenue — un seul calque,
posé **à plat** (pas de `::before` derrière une photo). Les trois atouts tournent sur trois teintes mesurées. */
.atout svg{color:var(--brand2);background:var(--brandTint);width:42px;height:42px;padding:9px;border-radius:12px;box-sizing:border-box}
.atout:nth-child(2) svg{color:var(--link);background:var(--linkTint)}
.atout:nth-child(3) svg{color:var(--pos);background:var(--posTint)}
.atout b{font-size:1.05rem;font-weight:800;letter-spacing:-.015em}
.atout p{color:var(--ink2);font-size:.95rem;margin:0;max-width:none}
.stage{display:grid;grid-template-columns:1.05fr 1fr;gap:22px;align-items:center;margin-top:22px}
.stage .photo{position:relative;border-radius:12px;background:linear-gradient(180deg,#fff,var(--navyTint));border:1px solid var(--line);box-shadow:var(--lift);
padding:10px;display:flex;align-items:center;justify-content:center;min-height:340px;overflow:hidden}
/* Le halo radial est **supprimé** (capture d'Alex du 15/10 : « une espèce de lumière sur les images des hero
qui efface la photo »). Contrôle fait en deux captures de l'élément seul, halo activé puis désactivé par
injection de `.stage .photo::before{display:none}` dans la page : **avec**, la souris est **lavée de blanc**
au centre ; **sans**, elle est pleine et noire. La carte reste blanche et plate, la photo est la seule
lumière de la carte. La règle est gardée en **commentaire** pour que la mesure reste dans la feuille. */
/* .stage .photo::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 55% at 50% 42%,#f4f8fc,transparent 70%)} */
.cad{display:block;background-color:transparent;background-repeat:no-repeat;background-position:center,center;
background-size:contain,62%;background-image:var(--photo,none),var(--tombale)}
/* `background-repeat` en **valeur unique** (mesure du 15/10 sur la capture d'Alex : le hero du mobile rendait
**trois souris côte à côte**). La feuille posait `no-repeat,no-repeat` (une valeur par couche) : avec
**une seule** couche peinte — le cas `.cad.avec-photo`, où la couche du calque tombe — le navigateur rend
`background-repeat: repeat` (mesuré en `getComputedStyle` sur `.stage .photo .cad` : `repeat`, et la
photo `contain` de 220 px **se répétait** dans la boîte de 340). Une valeur unique vaut pour toutes les
couches : plus de liste à faire coller au nombre de couches. */
/* Le calque « photo non fournie » **ne se rend que quand il n'y a pas de photo** (capture d'Alex du 15/10
sur mobile : la souris du hero était **entourée des lettres « p » et « e » du libellé du calque** — la
seconde couche, centrée, dépasse sur les côtés d'une photo haute et étroite). La classe `photo` est posée
par les producteurs **seulement quand l'URL existe** (`Accueil`/`Filet`/`RechercheController`, gabarits
d'accueil et de fiche) : la couche du calque tombe, il ne reste que la photo. */
.cad.avec-photo{background-image:var(--photo);background-repeat:no-repeat;background-position:center;background-size:contain}
/* Photo de fiche en vraie image (SEO 2026, 15/10) : la plaque garde sa taille, l'image s'y loge sans être
déformée ; le calque « photo non fournie » tombe tant que l'image est là (`images.js` le rend si elle échoue). */
.cad.avec-img{background-image:none}
.cad.avec-img > img{display:block;width:100%;height:100%;object-fit:contain}
/* Les faits de la fiche en une phrase (SEO/GEO 2026) : texte courant, discret, sous la scène. */
.resume-faits{margin:18px auto 0;max-width:72ch;font-size:.92rem;line-height:1.55;color:var(--ink2)}
.stage .photo .cad{position:relative;z-index:1;width:min(100%,430px);height:min(340px,52vw);background-size:contain,45%;transition:transform .6s var(--spring)}
/* `z-index` (mesure du 15/10, capture d'Alex puis capture de l'élément seul) : le tampon « 11 marchands »
**disparaissait sous la photo**. `.cad` est `position:relative` et vient **après** le tampon dans le DOM :
il peint par‑dessus, et la photo du producteur a son **propre fond blanc**. Le tampon et l'étiquette
passent à `z-index:3`, la photo à `1` : ce qui est écrit sur la carte reste au‑dessus de ce qui l'illustre. */
.stage .photo:hover .cad{transform:scale(1.07) rotate(-1deg)}
.stamp{position:absolute;z-index:3;left:16px;top:16px;border-radius:999px;background:#fff;padding:8px 14px;font-size:.75rem;
font-weight:800;box-shadow:var(--lift);color:var(--ink2)}
.stamp b{color:var(--ink)}
.tag{position:absolute;z-index:3;right:16px;bottom:16px;border-radius:999px;background:var(--ink);color:#fff;padding:8px 14px;
font-size:.74rem;font-weight:800}
/* Le produit du hero doit être **cliquable** (mesure du 15/10 : la scène entière n'avait **qu'un** lien,
la boîte de prix ; ni la photo, ni le titre, ni le prix ne menaient à la fiche). L'ancre occupe la
photo entière, **sans balisage de texte** ajouté : le tampon et l'étiquette restent des ``.
`text-decoration:none` + `color:inherit` : un lien n'est pas dessiné, c'est le curseur et le focus
qui le disent. */
.stage .photo .photo-link{display:flex;align-items:center;justify-content:center;width:100%;height:100%;
color:inherit;text-decoration:none;border-radius:26px}
.stage .photo .photo-link:focus-visible{outline:3px solid var(--navy);outline-offset:3px}
.stage .meta h2.t a{color:inherit;text-decoration:none;background-image:linear-gradient(var(--brandL),var(--brandL));
background-size:0% 2px;background-position:0 100%;background-repeat:no-repeat;transition:background-size .25s}
.stage .meta h2.t a:hover,.stage .meta h2.t a:focus-visible{background-size:100% 2px}
/* **L'ancre du prix ne se pose pas en `inline-block`** (mesure du 13/10, capture d'Alex : « 35,99 € ●+15 % »,
un point noir collé entre la monnaie et la variation). Le `` du prix (posé S8-P10, hero cliquable) en
`display:inline-block`, avec le `letter-spacing:-.05em` de `.v`, **serrait** la boîte du `` : mesuré en
`getBoundingClientRect`, `` faisait **14 px** de large pour un glyphe de **18,4 px** (1,15 rem) — le glyphe
**déborde** de sa boîte, mord sur la marge de la pastille de variation et se lit comme un point. L'ancre reste
**inline**, le glyphe garde sa place, et la monnaie est **séparée** de la variation. */
.pricebox .v a{color:inherit;text-decoration:none;display:inline}
.pricebox .v a:hover{color:var(--navy)}
.pricebox .v a:focus-visible{outline:3px solid var(--navy);outline-offset:4px;border-radius:8px}
.stage .meta .chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
/* **Le fil de rubrique se clique** (Alex, 13/10 : « la rubrique qui sert de breadcrumb n’est pas cliquable
dans la fiche produit ») : mêmes pastilles que les `.chip` d’information, mais ce sont des **ancres** —
elles prennent la peau d’un lien : soulignement au survol ET au focus clavier, couleur d’action, et 44 px
de hauteur tactile en mobile (leçon des cotes de la passe S8-P11 : les cibles de la fiche mobile
étaient trop basses). L’étage courant porte `aria-current` : il se clique et il dit où on est. */
/* **Une puce, la rubrique du produit, et elle se clique** (S8-P22 bis, 13/10 23 h 10 — Alex : « je t'ai
juste demandé d'activer le clic »). La version « chaîne racine → feuille » peignait jusqu'à 5 niveaux
(mesuré : 3 rangées à 390 px) et décalait la boîte de prix : la règle est posée pour **un seul** élément,
elle ne prévoit pas de rangée d'étages. */
.stage .meta a.fil{display:inline-flex;align-items:center;margin:0 0 12px;color:var(--ink2)}
.stage .meta a.fil .chip{border:1px solid var(--line);border-radius:999px;padding:8px 16px;font-size:.9rem;line-height:1.15;background:var(--paper)}
.stage .meta a.fil:hover,.stage .meta a.fil:focus-visible{color:var(--brand);text-decoration:none}
.stage .meta a.fil:hover .chip,.stage .meta a.fil:focus-visible .chip{border-color:var(--brand);color:var(--brand)}
.stage .meta a.fil[aria-current] .chip{border-color:var(--brand);color:var(--brand)}
.stage h2.t{font-size:1.9rem;font-weight:800;letter-spacing:-.03em;line-height:1.12;color:var(--ink);margin:0}
.hero .wave{margin-top:34px}
.sechead{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px;flex-wrap:wrap}
/* Titre du bloc d'offres de la fiche (S8-P18) : le bloc se **nomme comme une action** (« Les offres à
cliquer »), la date des relevés se pose à côté, plus en pastille flottante (mesure du 13/10 : « cache du
12/10/2026, que vient foutre une info technique en milieu de page ? »). */
.offres-tete{margin-top:26px}
.offres-tete h2{font-size:1.35rem;margin:0}
.sechead h2{font-size:1.7rem;font-weight:800;letter-spacing:-.03em;color:var(--ink);margin:0}
.sechead a{color:var(--brand2);font-weight:800;font-size:.92rem}
/* ---------- le corps de page ---------- */
.corps{padding:26px 20px 40px;max-width:1240px;margin:0 auto}
.corps h1{font-size:2.6rem;font-weight:800;letter-spacing:-.04em;line-height:1.06;margin:6px 0 14px;color:var(--ink);max-width:34ch}
/* Jeton de palette sous le titre de page (mesure 15/10 : « noir et blanc, aucune charte »). */
.corps h1:first-of-type::after{content:"";display:block;width:62px;height:4px;border-radius:999px;background:linear-gradient(90deg,var(--brandL),var(--navy));margin-top:12px}
/* **Le liseré d'accent des `