PDN - specification mesuree des 7 pages de detail de vin
Releve sur le live aux 5 largeurs le 2026-07-30 (agent de mesure, lecture seule). C'est le document a partir duquel on CONSTRUIT : il doit rester complet et sans ambiguite. ⚠️ Non re-verifie par la session principale. Re-mesurer chaque valeur avant et apres correction - dans ce projet, environ la moitie des trouvailles d'agent se revelent fausses.
Pages :
/vins/{johannisberg-pdn,mousseux,ice-pdn,ice-rose-pdn,ice-0-0,rose-pdn,rouge-pdn}/
A. Le hero deux colonnes
Une SEULE bande entre l'espaceur haut de 140px et l'espaceur suivant.
A1. Bande et conteneur interne (identiques sur les 7 pages)
| largeur | bande x,y w | interne (max 1290) x,w | direction | gouttiere |
|---|---|---|---|---|
| 375 | -10,140 395 | 20, 335 | colonne | 60px |
| 768 | -15,140 798 | 30, 708 | colonne | 80px |
| 1024 | -15,140 1054 | 30, 964 | colonne | 80px |
| 1440 | -15,140 1470 | 75, 1290 | ligne | 80px |
| 1920 | -15,140 1950 | 315, 1290 | ligne | 80px |
Fond de la bande : linear-gradient(180deg, #FC8DA3 62%, #FFCC66 100%). Padding 0. Hauteur H @1440/1920 = hauteur de la photo + 20 : johannisberg 639, ice/ice-rose/ice-0-0 630, mousseux/rose/rouge 628.
A2. Colonne gauche
flex-direction:column; gap:30px; padding:10px. @1440/1920 largeur 516, centree verticalement dans la bande (y = 140 + (H - colH)/2). Aux autres largeurs, pleine largeur interne a y=140. colH = 20 + h1H + 30 + bodyH + 30 + 65 (65 = 10 de marge + bouton 55).
A3. Titre h1 - Yeseva One w400 #FFFFFF, aligne a GAUCHE, line-height = font-size
| largeur | taille | interlettrage |
|---|---|---|
| 375 | 50px (Johannisberg 40px) | normal |
| 768 | 80px | normal (Johannisberg -0.3px) |
| 1024 | 80px | normal (Johannisberg -1.8px) |
| 1440 / 1920 | 70px (Johannisberg 60px) | normal |
Le live reduit taille et interlettrage pour tenir le titre sur UNE ligne ; seul « Johannisberg » declenche l'exception.
A4. Corps - GothamPro w400 #FFFFFF, aligne a gauche
375 25px/35px · 768 28px/42px · 1024 28px/42px · 1440+ 28px/40px. y = h1Y + h1H + 30.
A5. Bouton ACHETER - identique aux 5 largeurs et sur les 7 pages
134x55 · fond #FFFFFF · texte #000000 · GothamPro 15px/15px w600 · interlettrage normal · text-transform:none · padding 20px 30px · rayon 0 · sans bordure · transition:0.3s · target="_blank" rel="nofollow". Cale a GAUCHE. btnY = bodyY + bodyH + 40. Survol : aucun changement calcule. Focus : ni contour ni anneau.
A6. Colonne droite - padding:10px
| largeur | x,y | largeur | derivation |
|---|---|---|---|
| 375 | 20, basColonneGauche+60 | 335 | 100 % de l'interne |
| 768 | 101, +80 | 566.39 | 80 %, centree |
| 1024 | 126, +80 | 771.19 | 80 %, centree |
| 1440 | 671, 140 | 645 | x interne + 516 + 80 ; pleine hauteur de bande |
| 1920 | 911, 140 | 645 | idem |
Photo (position:relative, dans le flux, top = colY + 10, alignee a droite) : 100 % de la colonne @375, 90 % @768/1024, 80 % @1440/1920. johannisberg : 315x390 @375 · 492x608 @768 · 676x836 @1024 · 500x619 @1440 (x806,y150) · 500x619 @1920 (x1046).
Bouteille (position:absolute; z-index:1, largeur 45 % de la boite de la colonne droite) - DEUX widgets, un masque selon la rupture :
- @768 et plus :
top:37px; left:-22px-> @1440 290x567 a x649,y177 · @1024 347x678 · @768 255x498. - @375 : l'autre widget est
display:none;right:0; bottom:271px-> 151x295 a x204,y474.
Superposition : la bouteille (z:1) passe AU-DESSUS de la photo (z:auto). @1440 le recouvrement va de x806 a x939 (133px) sur toute la hauteur ; la bouteille deborde de 157px a gauche de la photo et de 27px au-dessus.
Assets par page - bouteille : johannis.png / PdN-Mousseux2.png / ice_bottle.png / ice-rose-1.png / ice_00_pdn.png / rose-1.png / rouge-1.png ; photo : johannisberg.jpg / mousseux-apero-1.jpg / vin-ice.jpg (partagee par ice ET ice-0-0) / ice-rose.jpg / rose-vin.jpg / rouge-vin.jpg.
A7. Geometrie par page @1440 (ajouter +240 en x pour 1920)
| page | H | colonne gauche y,h | h1 y (taille) | corps y,h | bouton y | photo |
|---|---|---|---|---|---|---|
| johannisberg-pdn | 639 | 257, 405 | 267 (60) | 357, 200 | 597 | 500x619 |
| mousseux | 628 | 266, 375 | 276 (70) | 376, 160 | 576 | 500x608 |
| ice-pdn | 630 | 247, 415 | 257 (70) | 357, 200 | 597 | 500x610 |
| ice-rose-pdn | 630 | 227, 455 | 237 (70) | 337, 240 | 617 | 500x610 |
| ice-0-0 | 630 | 267, 375 | 277 (70) | 377, 160 | 577 | 500x610 |
| rose-pdn | 628 | 287, 335 | 297 (70) | 397, 120 | 557 | 500x608 |
| rouge-pdn | 628 | 287, 335 | 297 (70) | 397, 120 | 557 | 500x608 |
Repli a 1024/768/375 : memes deux conteneurs, empiles - texte d'abord en pleine largeur, image ensuite, gouttiere 80 (1024/768) / 60 (375) ; la colonne image se reduit a 80 %/80 %/100 % et se centre.
B. La bande « Détails »
B1. Nombre de colonnes (mesure sur les x des .elementor-icon-box-wrapper, insensible aux SVG decoratifs)
| largeur | x des lignes | colonnes | largeur de colonne | largeur de ligne |
|---|---|---|---|---|
| 375 | 30 | 1 (deux conteneurs empiles) | 335 | 315 |
| 768 | 40 | 404 | 2 | 344 | 324 |
| 1024 | 40 | 532 | 2 | 472 | 452 |
| 1440 | 85 | 740 | 2 | 635 | 615 |
| 1920 | 325 | 980 | 2 | 635 | 615 |
Largeur de colonne = (interne - 20) / 2. La repartition est fixe 4 + 3, pas un flux automatique : colonne 1 = Cépage, Appellation, Nez, Bouche ; colonne 2 = Analyse, Idéal avec, Garde.
B2. Rythme vertical
Colonne flex, gap:20px. hauteurLigne = max(73, hauteurLibelle + hauteurValeur) ; pas = hauteurLigne + 20 (93px pour une valeur sur une ligne, 112 pour deux lignes @1440, 118 pour trois @375).
B3. Tuile rose
.elementor-icon-box-icon = 73x73, CSS background:transparent; border-radius:0. La tuile est DANS le SVG : <svg width="87" height="87" viewBox="0 0 87 87"><rect width="87" height="87" fill="#FC8DA3"/>…glyphe en traits blancs…</svg>, rendu a 73x73. Donc : carre plein #FC8DA3, 73x73, angles droits, glyphe en ligne blanche. Ligne : display:flex; align-items:center; gap:21px -> le bloc de texte commence a x + 94, largeur = largeurLigne - 94 (221 / 230 / 358 / 521). Icone et texte centres verticalement. Libelle GothamPro w700 noir ; valeur meme taille w400 noir : 16px/24.48 @375 · 17px/26.86 @768 · 17px/25.5 @1024 · 20.4px/30.6 @1440+.
B4. Espacements de bande
| element | 375 | 768 | 1024 | 1440 | 1920 |
|---|---|---|---|---|---|
| espaceur haut | 140 | 140 | 140 | 140 | 140 |
| espaceur hero -> titre | 80 | 104 | 104 | 113 | 113 |
| bande du titre (h) | 75 | 105 | 105 | 105 | 105 |
| espaceur apres la grille | 80 | 104 | 104 | 113 | 113 |
Titre h2 35px/35px Yeseva One w400 #000000, aligne a GAUCHE, pleine largeur interne, plus padding-bottom:30px du conteneur de widget (0 a 375). Grille : 20px au-dessus de la premiere ligne et 20px sous la derniere. Decoration : le SECOND conteneur porte background-image:url(.../2025/01/raisins.png); background-position:100% 100%; background-size:18%; no-repeat a 375/768/1440/1920 - et none a 1024 (UNVERIFIED : rupture voulue ou oubli de l'auteur).
B5. Les 7 paires libelle / valeur
| # | libelle | johannisberg | mousseux | ice-pdn |
|---|---|---|---|---|
| 1 | Cépage | Johannisberg | Blanc de blanc | Assemblage Blanc |
| 2 | Appellation | AOC Valais | AOC Valais | VdP Suisse |
| 3 | Nez | Fruit du raisin bien mûr, poire, noisette et amande | Fruits du verger, minéral | Fruité, agrumes et arômes de raisins frais |
| 4 | Bouche | Moelleux, puissant, légère amertume finale en fin de bouche | Pétillant, moelleux | Douceur, effervescence et fraîcheur |
| 5 | Analyse | 12% vol. alcool, contient des sulfites | 12.8% vol. alcool, contient des sulfites | 9% vol. alcool, contient des sulfites |
| 6 | Idéal avec | Apéritif, poissons en sauce, crustacés, asperges, fromages à pâte dure | Apéritif, desserts | Apéritif |
| 7 | Garde | 4 ans | 3 ans | 2 ans |
| # | libelle | ice-rose-pdn | rose-pdn | rouge-pdn |
|---|---|---|---|---|
| 1 | Cépage | Pinot noir & Gamay | Pinot noir | Assemblage Rouge |
| 2 | Appellation | VdP Suisse | AOC Valais | VdP Suisse |
| 3 | Nez | Doux, léger et fruité | Fruité, notes de pêche et d'abricot, fruits rouges | Fruité, baies noires et notes épicées |
| 4 | Bouche | Fruité, douceur, efferverscence et fraîcheur (faute du live, a reproduire) | Fraîche, équilibrée, moelleux en attaque soutenu par une belle vivacité | Structure élégante avec un délicat moelleux |
| 5 | Analyse | 9% vol. alcool, contient des sulfites | 12.5% vol. alcool, contient des sulfites | 13.3% vol. alcool, contient des sulfites |
| 6 | Idéal avec | Apéritif et dessert | Apéritif, tapas, hors d'oeuvres | Antipasti, grillades, plats épicés, chocolat |
| 7 | Garde | 4 ans | 3 ans | 4 ans |
⚠️ ice-0-0 est l'exception : les 7 widgets existent mais Cépage, Analyse et Garde sont display:none a toutes les largeurs - seules 4 lignes peignent (Appellation « Jus de raisin blanc gazéifié AOC Valais », Nez « Fruité, agrumes, arômes de raisin frais », Bouche « Douceur, effervescence et fraîcheur » en colonne 1 ; « Idéal avec : Apéritif » seul en colonne 2). Hauteur de grille 299 et non 392. Les valeurs masquees, si jamais on les affichait : Cépage « Raisins valaisans », Analyse « 0.0% vol. alcool », Garde « 2 ans ». C'est exactement le piege « present dans le DOM n'est pas visible a l'ecran » : ne pas rendre ces trois lignes.