/* ═══════════════════════════════════════════════════════════════════════════ PHONEDROID — REGLAGES DE LA FICHE PRODUIT 31/08/2026 --------------------------------------------------------------------------- ⛔ BLOC AJOUTE EN FIN DE FICHIER. Il ne modifie aucune regle existante : il les surcharge par l ordre du cascade. Impossible d ecraser par megarde le travail de quelqu un d autre ailleurs dans le fichier. 🔑 A REJOUER APRES CHAQUE MISE A JOUR DU THEME. La montee 9.1.5 du 31/08 a efface 6 correctifs du coeur sur 6, sans rien signaler. ▶️ RETRAIT : supprimer tout ce qui est entre DEBUT et FIN, rien d autre. ═════════════════════════ DEBUT REGLAGES PHONEDROID ═════════════════════ */ /* 1 · MONTSERRAT — le theme la demande sur 208 elements, aucun fichier ne la servait : le navigateur retombait sur Arial depuis toujours. 🔑 Police VARIABLE : un seul fichier couvre les graisses 400 a 700. Google en sert quatre copies identiques, on n en garde qu une. */ @font-face{font-family:Montserrat;font-style:normal;font-weight:400 700;font-display:swap; src:url(../fonts/montserrat-latin-ext-variable.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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:Montserrat;font-style:normal;font-weight:400 700;font-display:swap; src:url(../fonts/montserrat-latin-variable.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} /* 2 · LE PRIX REPREND LE PREMIER RANG. ⚠️ Nico, 31/08 : « ce n est pas le prix qui est trop petit, c est plutot le reste a cote ». Le prix ne gagne que 2 px ; ce sont ses voisins qui se calment. « Livraison sous 24 heures » etait en GRAS 700, dans la couleur la moins lisible de la palette. */ .product__prices-block .product__price{font-size:26px;font-weight:700;letter-spacing:-.01em} .product__prices-block .product__tax-label, .product__prices-block .product__delivery-infos{color:#355D6C;font-weight:400} /* 3 · CONTRASTE — #5F90A2 rend 3,5:1 sur blanc quand le minimum est 4,5. Elle reste une excellente bordure et un excellent fond ; simplement plus une couleur de lecture. Le bouton passe en contour : 14,3:1, et la hierarchie entre les deux boutons devient enfin lisible. 🔑 POURQUOI CES REGLES VIVENT DANS « @layer vendors ». Le theme est bati sur des COUCHES CSS : @layer vendors, bs-base, bs-components, bs-custom-components, ps-base, ps-components, ps-pages, ps-modules, utilities ⚠️ « utilities » est la DERNIERE, pas au milieu. Releve dans theme.css le 03/09/2026 et confirme independamment le meme jour ; la note precedente etait fausse. Consequence a retenir : pour une declaration NORMALE, utilities ECRASE vendors. Ce n est QUE pour un !important que l ordre s inverse et que vendors l emporte. Et pour une declaration !important, l ordre des couches S INVERSE : une couche PRECOCE bat une couche tardive, et les deux battent le hors-couche. Un !important ecrit hors couche est donc le plus FAIBLE de tous — c est le contraire de l intuition, et ca m a coute quatre essais avant de le voir. « vendors » etant la premiere couche declaree, une regle importante posee la l emporte sur tout le reste, y compris sur le .text-success de Bootstrap qui vit dans « utilities » avec son propre !important. 🔑 ET POURQUOI LE BOUTON PASSE PAR LES VARIABLES BOOTSTRAP. Sa couleur ne vient d aucune regle de couleur : elle vient d une VARIABLE. Bootstrap ecrit « .btn{background-color:var(--bs-btn-bg)} » et le theme pose « .btn-primary{--bs-btn-bg:#5f90a2} ». On repose donc la VARIABLE, ce qui est la maniere prevue par Bootstrap. 🔴 ET LA VRAIE CAUSE DE MES QUATRE ECHECS SUR CE BOUTON : un commentaire MAL FERME juste au-dessus de ce bloc. Sept lignes de texte se retrouvaient en plein CSS entre deux « ferme-commentaire ». Le parseur jette alors tout jusqu a retrouver ses reperes — et il emportait ce bloc entier, bouton ET stock. La regle etait dans le fichier servi, bien formee, et pourtant absente de la feuille analysee par le navigateur : c etait ca, le signe. ⚠️ Ni la specificite, ni les couches, ni les !important n y etaient pour quoi que ce soit. J ai cherche trois heures a cote. */ @layer vendors{ .page-product .product__actions-qty-add .product__buy-now .product__buy-now-button.btn{ --bs-btn-bg:#fff; --bs-btn-color:#082E3C; --bs-btn-border-color:#082E3C; --bs-btn-hover-bg:#082E3C; --bs-btn-hover-color:#fff; --bs-btn-hover-border-color:#082E3C; --bs-btn-active-bg:#082E3C; --bs-btn-active-color:#fff; background:#fff!important;color:#082E3C!important; box-shadow:inset 0 0 0 1.5px #082E3C!important} .page-product .product__actions-qty-add .product__buy-now .product__buy-now-button.btn:hover, .page-product .product__actions-qty-add .product__buy-now .product__buy-now-button.btn:focus-visible{ background:#082E3C!important;color:#fff!important} /* 16/09/2026 — SANS PRODUIT A VENDRE, le bouton est bien « disabled » dans le gabarit, mais les !important ci-dessus le laissaient blanc et net : il paraissait cliquable a cote d un « Ajouter au panier » grise. On lui donne le meme air eteint. Place APRES le survol : a specificite egale, c est l ordre qui tranche. */ .page-product .product__actions-qty-add .product__buy-now .product__buy-now-button.btn:disabled, .page-product .product__actions-qty-add .product__buy-now .product__buy-now-button.btn[aria-disabled="true"]{ background:#fff!important;color:#082E3C!important;opacity:.4!important;cursor:not-allowed} .page-product .product__actions-qty-add .product__availability-status.text-success{ color:#146B44!important} } /* 4 · LA LONGUEUR DES LIGNES. Sur 1920 px la description allait jusqu a 1650 px, soit 221 caracteres par ligne. La norme typographique est de 45 a 75 : au-dela, l oeil perd sa ligne en revenant a gauche. Le conteneur du site est bien bride a 1320 px, mais ce bloc-la lui echappait. */ .product__description, .product__description-short{max-width:70ch} .page-product .product__description.rich-text, .page-product .product__description-short.rich-text{font-size:16px;line-height:1.65} /* 5 · MOBILE — les deux pastilles flottantes se posaient sur le prix et sur la promesse de livraison. On les reduit et on les ancre dans les angles bas ; rien n est supprime. */ @media (max-width:767px){ .product__name{font-size:24px} .product__add-to-cart-button, .product__buy-now .product__buy-now-button.btn{min-height:44px} .agJsWidget{transform:scale(.62);transform-origin:left bottom} #chatbox-toggle{transform:scale(.78);transform-origin:right bottom} } /* 6 · LA POLICE DU BADGE D AVIS. 🔑 Une declaration @font-face ne se telecharge QUE si quelque chose l emploie. Forcer Inter sur leur widget suffit donc a empecher les deux fichiers Oswald de partir depuis leur serveur — sans rien heberger et sans toucher a leur script. ⚠️ Ce ne sont PAS les elements que je croyais : « .agJsWidget * » ne couvrait rien. Mesure faite, trois elements seulement emploient Oswald, et ils portent leurs propres classes. */ @layer vendors{ .agJsWidget,.agJsWidget *, .jsWidgetLargeNote,.jsWidgetLargeNote *, .sagInfo,.sagInfo *, .grc-widget-site-rating,.grc-widget-site-rating *{ font-family:Inter,-apple-system,"Segoe UI",Roboto,sans-serif!important} } /* ── RETOUCHES DU 31/08 AU SOIR, apres le premier coup d oeil de Nico ────── ⚠️ Ce bloc vient APRES les regles ci-dessus et les corrige. Je ne reecris pas plus haut : on voit ainsi ce qui a ete demande, et pourquoi. */ /* A · « Livraison sous 24 heures » RETROUVE SON GRAS. ⚠️ Je m etais trompe de cible : le defaut n etait pas le gras, c etait la COULEUR (#5F90A2, contraste 3,5). En #355D6C le gras revient sans rien perdre — contraste 7,16. Nico : « c est un argument marketing fort ». C est son metier, et il a raison. */ .product__prices-block .product__delivery-infos{font-weight:700} /* B · LE BLOC D ACTIONS PASSE EN BLANC, cercle d un trait couleur header. Le fond #DEEBEE pesait lourd. Le trait reprend le #082E3C du header, eclairci — pose en ombre INTERNE pour ne pas decaler la mise en page d un seul pixel. */ @layer vendors{ .page-product .product__add-to-cart-container .product__actions-qty-add{ background:#fff!important; box-shadow:inset 0 0 0 1px rgba(8,46,60,.22)!important} } /* C · LE SELECTEUR DE QUANTITE S ARRONDIT. Il etait a 4 px quand les boutons voisins sont a 20 : le carre detonnait. Le groupe devient une pastille, comme eux. */ .page-product .product__actions-qty-add .quantity-button__group .btn.decrement{ border-radius:20px 0 0 20px} .page-product .product__actions-qty-add .quantity-button__group .btn.increment{ border-radius:0 20px 20px 0} /* D · LA DESCRIPTION COURTE REVIENT A 14 px. 🔑 Les deux descriptions ne font pas le meme travail : la courte est un RESUME cale contre le prix — l agrandir repousse les boutons vers le bas. La longue est du texte de LECTURE, elle garde ses 16 px. Nico : « la description courte prend beaucoup trop de place ». */ .page-product .product__description-short.rich-text{font-size:14px;line-height:1.55} /* F · LE BOUTON « ACHETER MAINTENANT », DERNIER ESSAI — HORS COUCHE. 🔑 Sa couleur vient de la variable --bs-btn-bg, posee par .btn-primary dans la couche « bs-components ». Or pour une declaration NORMALE (sans !important) c est l inverse du cas precedent : le HORS-COUCHE l emporte sur toutes les couches. On repose donc la variable ici, hors couche, plutot que dans « vendors » ou elle perdait. */ .page-product .product__actions-qty-add .product__buy-now .product__buy-now-button.btn{ --bs-btn-bg:#fff;--bs-btn-color:#082E3C;--bs-btn-border-color:#082E3C; --bs-btn-hover-bg:#082E3C;--bs-btn-hover-color:#fff;--bs-btn-hover-border-color:#082E3C; --bs-btn-active-bg:#082E3C;--bs-btn-active-color:#fff;--bs-btn-box-shadow:none; background-color:#fff;color:#082E3C;box-shadow:inset 0 0 0 1.5px #082E3C} /* G · LA FICHE TECHNIQUE PASSE A DROITE DE LA DESCRIPTION. 🔑 Aucun gabarit touche : les quatre sections sont deja VOISINES dans « .product__accordion », et chacune porte un identifiant stable (#product_description, #product_features, #extra_0, #extra_1). Une grille suffit a les replacer. ⚠️ C EST UNE PREVISUALISATION, pas la version finale. La vraie mise en oeuvre passera par le gabarit : ici on force un accordeon a rester ouvert, ce qui marche mais reste un detournement. */ @media (min-width:1024px){ .product__accordion{display:grid;grid-template-columns:60fr 40fr; gap:0 2.5rem;align-items:start} #product_description{grid-column:1;grid-row:1;min-width:0} #product_features{grid-column:2;grid-row:1;min-width:0; position:sticky;top:var(--pd-collant-top); border:1px solid rgba(8,46,60,.18);border-radius:10px;overflow:hidden; background:#fff} /* dans la colonne, il n y a rien a plier : le panneau reste ouvert et le bouton cesse d etre un bouton. */ #product_features .accordion-collapse{display:block!important; visibility:visible!important;height:auto!important;overflow:visible!important} #product_features .accordion-button{pointer-events:none;cursor:default} #product_features .accordion-button::after{display:none} /* tout le reste repasse sous les deux colonnes */ .product__accordion>.pdb-blog, .product__accordion>#extra_0, .product__accordion>#extra_1, .product__accordion>.js-product-details{grid-column:1/-1} /* les lignes de caracteristiques, resserrees pour une colonne etroite */ #product_features .details__item--feature{font-size:.82rem;line-height:1.5} } /* H · LA COLONNE TECHNIQUE NE DOIT PLUS FINIR TOUTE SEULE. ⚠️ Nico : « a part que ca deborde ». Ce n en etait pas un : la grille faisait bien son travail. Mais quand la description est plus COURTE que le tableau, la colonne gauche s arrete et la droite continue seule sur des centaines de pixels — et ca se lit comme un defaut. 🔑 Mesure : les descriptions vont de 2 910 a 7 458 caracteres selon la fiche. Le tableau, lui, fait toujours ~1 725 px. Donc tantot c est la gauche qui depasse, tantot la droite. Aucun reglage fixe ne peut convenir aux deux. ▶️ Le tableau devient donc un PANNEAU qui accompagne la lecture : il ne depasse jamais la hauteur de l ecran, defile en interne, et reste colle. Les deux colonnes se terminent ensemble. */ @media (min-width:1024px){ #product_features{max-height:min(calc(100vh - 2rem),42rem);overflow-y:auto; scrollbar-width:thin;scrollbar-color:#B6CBD2 transparent} #product_features::-webkit-scrollbar{width:6px} #product_features::-webkit-scrollbar-thumb{background:#B6CBD2;border-radius:3px} #product_features::-webkit-scrollbar-track{background:transparent} } /* I · EN DEUX COLONNES, PLUS RIEN NE SE PLIE. ⚠️ Nico, en trois clics : replier « Avis clients » vidait la colonne gauche et le panneau technique se retrouvait seul, par-dessus la suite. Forcer UN accordeon ouvert ne suffit pas — il faut que les DEUX colonnes soient hors du jeu de l accordeon. ▶️ C est la limite de la previsualisation : en version finale, ces deux blocs ne seront simplement plus des accordeons sur grand ecran. */ @media (min-width:1024px){ #product_description .accordion-collapse{display:block!important; visibility:visible!important;height:auto!important;overflow:visible!important} #product_description .accordion-button{pointer-events:none;cursor:default} #product_description .accordion-button::after{display:none} /* aucune valeur ne doit pousser la page vers la droite */ #product_features .details__right, #product_features .details__right span{overflow-wrap:anywhere;min-width:0} } /* J · LES SECTIONS DE LA FICHE TECHNIQUE (gabarit du 31/08). */ .details__section{list-style:none;font-family:Montserrat,sans-serif; font-size:.68rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase; color:#5F90A2;padding:1.1rem 0 .35rem;border:0} .details__list>.details__section:first-child{padding-top:.2rem} /* K · LE PLAFOND DU PANNEAU NE PEUT PAS DEPENDRE QUE DE L ECRAN. ⚠️ Nico, 31/08 : « en descendant un peu, il deborde le bloc en dessous ». Mesure : mon plafond valait « hauteur d ecran moins 2rem ». Plus l ecran est HAUT, plus le panneau grandit — jusqu a depasser une description courte et recouvrir la section suivante. ecran 1300 px → plafond 1268 · description 1344 → ça passe ecran 1600 px → plafond 1568 · description 1344 → 224 px dehors 🔑 On ajoute donc un plafond ABSOLU. La description la plus courte du catalogue mesure ~1 344 px (2 910 caracteres) : un panneau de 42 rem (672 px) reste dessous quelle que soit la taille de l ecran. ⛔ Le CSS ne sait pas lire la hauteur du voisin — sans valeur fixe, ce debordement revient a chaque ecran plus grand. */ @media (min-width:1024px){ #product_features{max-height:min(calc(100vh - 2rem),42rem)} } /* L · LA BARRE DE DEFILEMENT HORIZONTALE — 2 px, dans l EN-TETE. ⚠️ Nico la voyait depuis un moment et je n y ai pas prete attention. Il la croyait liee a mes colonnes ; mesure faite, elle est aussi en PRODUCTION, qui n a aucun de ces reglages. Meme cause au pixel pres. 🔑 C est une desynchronisation de gouttiere Bootstrap : .header-bottom__container padding-inline 10 px (gutter 1.25rem) .header-bottom__row margin-inline -12 px (gx-md-4 = 1.5rem) Une « row » tire des marges NEGATIVES de la moitie de sa gouttiere ; son conteneur doit avoir la meme valeur en padding. Ici 10 contre 12 → 2 px qui sortent de chaque cote, et Chrome affiche une barre. ⛔ NE PAS regler ca avec « overflow-x:hidden » sur l en-tete : le menu deroulant y vit, il serait coupe. On aligne le padding, c est la correction juste. */ @media (min-width:768px){ .header-bottom__container.container-md{padding-left:12px;padding-right:12px} } /* M · LE PANNEAU NE PEUT PLUS S ECHAPPER DE SA CASE. 🔴 Nico, 31/08 : « tu es sur qu on est bon ? ». Non. Mesure dans SON navigateur : la rangee faisait 1344 px, le panneau 587, et pourtant il descendait 219 px SOUS la description, par-dessus le bloc blog. 🔑 LA CAUSE : un element « sticky » prend pour cadre le CONTENEUR de grille ENTIER, pas sa propre case. Il pouvait donc glisser dans les rangees du dessous. Aucun plafond de hauteur ne corrige ca — j en ai essaye trois, tous a cote du probleme. ▶️ La case devient un cadre : « #product_features » s etire sur toute la hauteur de la rangee et cesse d etre collant ; c est l enveloppe INTERIEURE « .pd-tech-sticky » qui colle. Son cadre est desormais la case, elle ne peut plus en sortir. */ @media (min-width:1024px){ #product_features{align-self:stretch;position:static;max-height:none; overflow:visible;border:0;background:none;min-height:0} #product_features .pd-tech-sticky{position:sticky;top:var(--pd-collant-top); max-height:min(calc(100vh - 2rem),42rem);overflow-y:auto; border:1px solid rgba(8,46,60,.18);border-radius:10px;background:#fff; scrollbar-width:thin;scrollbar-color:#B6CBD2 transparent} #product_features .pd-tech-sticky::-webkit-scrollbar{width:6px} #product_features .pd-tech-sticky::-webkit-scrollbar-thumb{background:#B6CBD2;border-radius:3px} } /* N · PLUS DE DEFILEMENT INTERNE : on enleve au lieu d ajouter. ⚠️ Nico, 31/08 : « l utilisateur devra forcement scroll sur les caracteristiques s il veut les voir jusqu au bout ». C est le vrai cout du panneau plafonne, et il est plus lourd qu il n y parait : du contenu CACHE sur une fiche produit est pire qu une colonne inegale, et deux zones de defilement imbriquees se disputent la molette des que le curseur passe dessus. ▶️ Le panneau reprend sa hauteur naturelle. Tout est visible en defilant la page, normalement. 🔑 On GARDE le sticky : il ne s active que si le panneau tient dans l ecran. Sur un telephone a 28 caracteristiques il ne fera rien ; sur une coque a 2 lignes il accompagnera la lecture. Il se declenche exactement quand il sert. ⚠️ Le prix assume : sur une fiche a description courte, c est le tableau qui depassera. Les descriptions vont de 2 910 a 7 458 caracteres — la majorite sont plus longues que le tableau, le cas reste minoritaire. */ @media (min-width:1024px){ #product_features .pd-tech-sticky{max-height:none;overflow:visible} } /* O · LE TABLEAU DEVIENT DENSE — la vraie reponse au decalage. 🔑 Mesure : ce n est ni la police ni le nombre de lignes qui font la hauteur, c est le REMBOURRAGE. 16 px en haut et 16 en bas de chaque ligne, soit 32 px × 28 lignes = ~900 px de vide sur 1 982. somme des lignes 1 657 px somme des sections 262 px en-tete 56 px ⚠️ Ni le plafond ni la hauteur libre ne convenaient : plafonne → du contenu cache, il faut defiler dans le panneau hauteur libre → le tableau depasse TOUJOURS la description (+658 px sur le X9 Pro, +385 sur le X9) Un tableau de specifications se lit dense — c est sa nature. ▶️ 8 px au lieu de 16 : ~450 px de gagnes, et le tableau retombe au niveau des descriptions au lieu de les depasser de 400 a 650. */ @media (min-width:1024px){ #product_features .details__item--feature{padding-top:8px;padding-bottom:8px} #product_features .details__section{padding-top:14px;padding-bottom:4px} } /* ═══════════════════════════════════════════════════════════════════════════ P · L ESTHETIQUE DE LA FICHE TECHNIQUE — 31/08/2026, le soir --------------------------------------------------------------------------- D apres les recommandations de Gemini, que Nico lui a demandees sur captures. Sa STRUCTURE est juste et je la prends presque entierement : hierarchie de graisses, intitules plus doux que les valeurs, bandeaux de section, colonnes a proportions fixes. ⚠️ MAIS PAS SES COULEURS. Il propose #64748b, #1e293b, #f1f5f9, #e2e8f0 : c est la gamme « slate » de Tailwind, un neutre qui tire vers le violet. La palette PhoneDroid est un PETROLE qui tire vers le cyan. Les deux familles ne s accordent pas — la fiche technique aurait jure avec le reste du site. ▶️ Meme intention, transposee dans la palette maison : intitules #355D6C (au lieu de #64748b) contraste 7,16 valeurs #082E3C (au lieu de #1e293b) contraste 14,32 filets #DCE7EB (au lieu de #e2e8f0) bandeaux #F1F6F8 (au lieu de #f1f5f9) ⏪ RETOUR ARRIERE : ~/bascule/revenir-esthetique.sh ═══════════════════════════════════════════════════════════════════════════ */ @media (min-width:1024px){ /* le titre du bloc, assis sur le bleu du header */ #product_features .accordion-button{font-family:Montserrat,sans-serif; font-weight:700;font-size:1rem;color:#082E3C;letter-spacing:-.01em} /* les lignes : proportions FIXES, pour un alignement vertical parfait */ #product_features .details__item--feature{align-items:start;gap:1rem; border-bottom:1px solid #DCE7EB} #product_features .details__item--feature:last-child{border-bottom:0} #product_features .details__left{flex:0 0 38%;max-width:38%} #product_features .details__right{flex:1 1 62%;min-width:0} /* 🔑 l intitule s efface, la valeur ressort : c est elle qu on vient chercher. Deux colonnes de meme force se disputeraient l attention. */ #product_features .details__title{font-family:Inter,sans-serif; font-weight:500;font-size:13px;color:#355D6C;line-height:1.45} #product_features .details__right span{font-family:Inter,sans-serif; font-weight:400;font-size:13.5px;color:#082E3C;line-height:1.5} /* les bandeaux de section, en pleine largeur du panneau */ #product_features .details__section{display:block;background:#F1F6F8; font-family:Inter,sans-serif;font-size:11px;font-weight:600; letter-spacing:.05em;text-transform:uppercase;color:#355D6C; padding:6px 1.1rem;margin:0 -1.1rem;border-top:1px solid #DCE7EB; border-bottom:1px solid #DCE7EB} #product_features .details__list>.details__section:first-child{border-top:0} /* le panneau lui-meme : plus sobre que le cadre gris d avant */ #product_features .pd-tech-sticky{border-color:#DCE7EB} #product_features .accordion-body{padding-left:1.1rem;padding-right:1.1rem} } /* Q · LES BANDES BLANCHES — le gris venait de la LISTE, pas des lignes. ⚠️ Nico, 31/08 : « en 2005 c etait beau » 😄 — et il a raison, ce n est pas une affaire de couleurs. Mesure : .pd-tech-sticky x 958 → 1546 blanc .accordion-body x 959 → 1545 padding 17,6 px .details__list x 976 → 1528 fond #F8F9FA ← le gris .details__section x 959 → 1545 pleine largeur ← mes bandeaux Le pave gris est EN RETRAIT de 17,6 px, mes bandeaux vont bord a bord : d ou une lisiere blanche de chaque cote, et une bande sous le titre. Deux fonds gris de largeurs differentes, c est ca qui date. ▶️ On enleve le pave gris. Tableau BLANC, filets fins, et les bandeaux restent le seul element teinte — c est eux qui portent le classement. Tout s aligne sur le meme bord, texte des bandeaux compris. */ @media (min-width:1024px){ #product_features .details__list{background:transparent;margin-left:-17.6px;margin-right:-17.6px} #product_features .details__item--feature{padding-left:17.6px;padding-right:17.6px; background:transparent} /* les bandeaux n ont plus besoin de deborder : la liste occupe deja la largeur */ #product_features .details__section{margin:0;padding-left:17.6px;padding-right:17.6px} /* le titre respire, sans bande blanche orpheline sous lui */ #product_features .accordion-button{padding-bottom:.9rem} #product_features .accordion-body{padding-top:0} } /* S · RETOUR AU CLAIR, avec les deux corrections retenues du sombre. 31/08, 22h45. L essai sombre est ecarte : sur fond blanc il se lit comme un encart rapporte, et la description a cote parait fade. ⛔ La solution de Gemini — passer toute la section en sombre pleine largeur — reglait l isolement en creant pire : 2 000 px de mur sombre avec l argumentaire de vente en blanc sur fond fonce. Le texte long se lit moins bien sur du sombre, et c est lui qui vend. 🔑 On garde ses deux remarques de detail, justes dans les deux versions : · le titre etait trop colle au bord superieur · les libelles de categorie se noyaient, 11 px c est trop petit */ @media (min-width:1024px){ #product_features .accordion-button{padding-top:1.15rem;padding-bottom:1rem} #product_features .details__section{font-size:12px;color:#2F5566} } /* T · VERS LA SOBRIETE — d apres la fiche technique de Samsung. 31/08, 22h50. Nico : « le bleu clair de fond, je trouve ca vieux, on dirait un site des annees 2000 ». Il a raison, et sa reference est meilleure que la mienne. 🔑 CE QUI FAIT LA SOBRIETE DE SAMSUNG : rien. Aucun fond, aucun filet marque, aucune majuscule espacee. Le titre de section est juste PLUS GROS, en casse normale, et c est l ESPACE qui separe. Un bandeau teinte et des capitales interlettrees, c est un langage de tableau de bord des annees 2010 — pas une fiche produit de 2026. ⚠️ Je ne copie pas tout : Samsung empile l intitule AU-DESSUS de la valeur, sur deux colonnes de paires. Dans nos 589 px ce serait etrique, et ca doublerait la hauteur. On garde le cote a cote, on enleve la decoration. ⏪ RETOUR : ~/sauvegardes-claude/reglages-BANDEAUX-31-08-2026.css */ @media (min-width:1024px){ /* ⛔ plus de bandeau. Le titre de section devient du TEXTE, pas un pave. */ #product_features .details__section{background:transparent;border:0; font-family:Montserrat,sans-serif;font-size:14px;font-weight:700; text-transform:none;letter-spacing:0;color:#082E3C; padding:30px 17.6px 8px} #product_features .details__list>.details__section:first-child{padding-top:6px} /* les filets s effacent : presents pour tenir l alignement, invisibles a la lecture */ #product_features .details__item--feature{border-bottom:1px solid #EEF2F4} /* le cadre du panneau se fait oublier lui aussi */ #product_features .pd-tech-sticky{border-color:#E8EEF0} } /* U · L ESPACE DES SECTIONS, RESSERRE. ⚠️ La sobriete a un cout mesure : 30 px au-dessus de chaque section ont rallonge le tableau de 160 px, et sur la fiche a description la plus courte l ecart est repasse de 155 a 316 px. ▶️ 22 px : l espace separe toujours sans pave ni filet, et on recupere ~70 px. C est l arbitrage entre respirer et rester aligne. */ @media (min-width:1024px){ #product_features .details__section{padding-top:22px;padding-bottom:6px} #product_features .details__list>.details__section:first-child{padding-top:4px} } /* V · ESSAI « SAMSUNG » — la hierarchie inversee, et le titre centre. 31/08, 22h50. Deux demandes de Nico apres avoir regarde Samsung de pres. 🔑 LA DIFFERENCE DE FOND, ET C EST UN VRAI CHOIX : Samsung intitule en GRAS FONCE · valeur en regulier plus clair nous intitule en doux · valeur en fonce C est exactement l inverse. Gemini defendait notre sens — « la valeur est ce qu on vient chercher ». Samsung fait le pari que le LIBELLE structure la lecture et que la valeur se lit ensuite. Les deux se defendent ; on compare a l ecran plutot qu en theorie. ⏪ RETOUR : ~/bascule/revenir-sobre.sh */ @media (min-width:1024px){ /* le titre du bloc, centre */ #product_features .accordion-button{justify-content:center;text-align:center} /* la hierarchie s inverse : le libelle prend le poids, la valeur s allege */ #product_features .details__title{color:#082E3C;font-weight:600} #product_features .details__right span{color:#355D6C;font-weight:400} } /* ── LE POINT D ARRET DES ELEMENTS COLLANTS ──────────────────────────────── 🔴 Nico, 01/09 : « c est un peu brut en transition ». Ce n etait pas la transition — `position:sticky` ne s anime pas, le navigateur repositionne d un coup et aucune regle CSS n adoucit ce moment. 🔑 C etait le POINT D ARRET. Quand la page defile, l en-tete se retracte (`top: calc(var(--pd-header-offset) * -1)`) et il ne reste que la barre de navigation, `min-height:44px`. Un collant cale a `top:1rem` se range donc 28 px SOUS elle : l image passe derriere le bandeau sombre au lieu de s arreter dessous. ▶️ Une seule variable pour les deux collants — la galerie et le panneau technique — sinon ils se decalent l un par rapport a l autre a la premiere retouche. */ :root{--pd-collant-top:calc(44px + 1rem)} /* W · LA GALERIE SUIT LA LECTURE — le vide en bas à gauche. 🔑 Le vide est À L'INTÉRIEUR de `.product__left` : la grille étire les deux colonnes à la même hauteur (1 234 px), mais les images ne remplissent pas la leur. ▶️ On n'y met RIEN. Y placer du contenu créerait une troisième zone de lecture sur une page qui en a déjà deux. L'image accompagne la lecture des options et des accessoires — le vide se remplit sans qu'on invente quoi que ce soit. ⛔ ET C'EST L'ENVELOPPE INTÉRIEURE QUI COLLE, pas la case. Un élément `sticky` prend pour cadre le CONTENEUR DE GRILLE ENTIER, pas sa propre case : posé sur `.product__left`, il glisserait dans les rangées du dessous. Maison l'a payé le 31/08 sur le panneau technique, qui recouvrait le bloc blog de 219 px. Même remède ici, et `.product__images` existe déjà — aucun gabarit à toucher. ⚠️ `top:1rem` est repris du panneau technique, éprouvé dans le navigateur de Nico. L'en-tête est collant : si la galerie passe dessous, les deux valeurs se corrigent ensemble. 🔑 `stretch` est indispensable : la case doit garder la HAUTEUR DE LA RANGÉE pour que le collant ait de la course. Avec `start` elle se rétracte à la hauteur des images et il ne se passe plus rien. ⚖️ Sous 1024 px les colonnes s'empilent : une image qui suit passerait par-dessus le texte. La règle ne vit donc que sur grand écran. */ @media (min-width:1024px){ .page-product .product__left{align-self:stretch;position:static} .page-product .product__left .product__images{position:sticky;top:var(--pd-collant-top)} } /* X · LA RÉASSURANCE — le vide en haut à droite de la description. 🔑 On RASSEMBLE, on n'empile pas. La réassurance existait déjà, dispersée sur cinq endroits de la fiche, avec « livraison sous 24 h » écrit DEUX fois. Ce bloc ne rajoute pas une sixième mention : il en réunit quatre au meilleur endroit de la page — à hauteur du prix, au-dessus du bouton. ⛔ AUCUN EMOJI, mais pas « rien » non plus : ce sont des SVG en ligne, identiques sur tous les systèmes, nets à toutes les tailles, et qui prennent la couleur du texte. Ils ne coûtent aucune requête. ⚠️ La description garde son `max-width:70ch` : la colonne de gauche ne s'élargit pas, c'est le vide de droite qui se remplit. Sous 1 024 px les deux s'empilent — la réassurance passe alors SOUS la description, ce qui est le bon ordre de lecture sur un téléphone. */ /* ⚠️ LA DIRECTION SE DECLARE. Sans elle les quatre lignes se sont posees COTE A COTE et chaque libelle se coupait en trois (« Expedition / depuis la / France »). Aucune regle du theme ne l imposait : c est ma declaration qui manquait, pas une surcharge a combattre. 🔑 Prefixe .page-product comme le theme le fait partout : ses propres regles font trois classes, une seule ne suffit jamais longtemps. */ .page-product .pd-atouts__list{display:flex;flex-direction:column; list-style:none;margin:0;padding:0;gap:0} /* ⚠️ LE RYTHME ETAIT IRREGULIER, ET LES FILETS LE SOULIGNAIENT. Les deux dernieres lignes portent une sous-ligne, les deux premieres non : chaque item faisait donc une hauteur differente, et un trait entre chacun transformait cette irregularite en defaut visible. ▶️ On enleve les filets et on donne un ECART CONSTANT entre les items. Ce qui separe les lignes, c est l espace, pas un trait : quatre arguments courts n ont pas besoin d etre cloisonnes. 🔑 ET L INTERLIGNE DE LA SOUS-LIGNE EST RESSERRE : elle appartient a la ligne du dessus, elle ne doit pas ouvrir un nouvel intervalle. */ /* 🔑 UN CADRE DISCRET PLUTOT QUE DES FILETS ENTRE LES LIGNES. Nico, 01/09 : « soit on ne met rien soit on fait une ligne discrete tout autour ». Le trait autour ferme le bloc et le pose ; les traits entre les lignes cloisonnaient quatre arguments courts qui n en avaient pas besoin. La couleur est celle de l en-tete, tres diluee : elle rattache le bloc sans lui donner le poids d une boite grise. */ /* ⚠️ LE BORD SUPERIEUR ETAIT INTERROMPU SUR 150 px A DROITE. Ce n etait pas un defaut de bordure : le logo fabricant est pose EN ABSOLU par le theme .pd-product__brand{position:absolute;right:0;top:8px;width:150px} et sa boite descend sur notre cadre. L image se termine plus haut, mais le CONTENEUR, lui, recouvre le trait. 🔑 Un element POSITIONNE se dessine par-dessus un element qui ne l est pas, quel que soit l ordre du document. Il suffit donc de positionner le notre : a `z-index` egal, c est alors l ordre du DOM qui tranche, et notre bloc vient APRES le logo. Aucun `z-index` a inventer. */ /* 🔑 UNE CARTE, PLUS UN CADRE. Remarque de Gemini relayee par Nico le 01/09 : les trois elements de la colonne de droite « flottaient » isolement. Un fond doux les rassemble mieux qu un trait. ⛔ MAIS PAS AVEC SES COULEURS. Il proposait #f8fafc, #f1f5f9, #e2e8f0 — la gamme « slate » de Tailwind, un neutre qui tire vers le VIOLET. La palette PhoneDroid est un petrole qui tire vers le CYAN ; les deux familles jurent. C est exactement ce que Maison avait deja ecarte le 31/08 sur la fiche technique, avec la meme mesure. ▶️ Meme intention, transposee : #F1F6F8 et #DCE7EB sont les valeurs DEJA en service dans le panneau technique. Les deux blocs se repondent au lieu de se concurrencer. ⚠️ Rayon a 10 px, pas 12 : c est celui de `.pd-tech-sticky`. La coherence entre les deux blocs vaut mieux que le nombre exact. */ .pd-atouts{position:relative;background:#F1F6F8;border:1px solid #DCE7EB; border-radius:10px;padding:1.25rem 1.35rem} /* ⛔ ON NEUTRALISE EXPLICITEMENT TOUT FILET ENTRE LES LIGNES. Retirer la regle ne suffit pas : une COPIE des anciennes regles vit encore dans le fichier combine du theme (releve par Maison le 31/08, il n a pas ete reconstruit depuis). Ce qui n est pas declare ici laisse donc parler la vieille copie. On declare. */ .pd-atouts__item{display:flex;gap:.7rem;align-items:flex-start; border:0;padding:0;font-size:14px;line-height:1.4;color:#082E3C} .pd-atouts__item + .pd-atouts__item{border:0;margin-top:1.05rem} /* 🔴 LE LIBELLE ET SA NOTE SONT DEUX BLOCS DANS UNE ENVELOPPE. Leur bord gauche est donc le meme PAR CONSTRUCTION — il ne depend plus de la facon dont le texte se replie. C etait la cause de l alignement bancal signale par Nico. */ .pd-atouts__text{display:block;min-width:0} /* 🔑 GRAISSE 600 SUR LE LIBELLE, et la note reste legere : c est cette difference qui cree le rythme, pas un trait de separation. */ .pd-atouts__label{display:block;font-weight:600} .pd-atouts__note{display:block;margin-top:.1rem;line-height:1.35; font-size:12.5px;color:#5a6b73} /* 🔑 L ETIQUETTE ENERGIE FERME LA CARTE. Un filet la separe des quatre arguments : elle n est pas du meme ordre — les autres lignes sont des promesses commerciales, celle-ci est un affichage reglemente. ⚠️ ELLE RESTE UN VISUEL, a sa taille normalisee. On ne la reduit pas et on ne la remplace pas par du texte : c est le visuel qui fait foi. ⚖️ Et c est le seul aplat sature de la carte. On l assume : mieux vaut un element voyant a sa place qu un element voyant nulle part. */ .pd-atouts__item--energie{display:block;margin-top:1.1rem;padding-top:1.1rem; border-top:1px solid #DCE7EB;text-align:center} /* 🔑 Centree, et centree PAR SA MARGE, pas par `text-align`. L image est en `display:block` pour ne pas trainer l'espace d'une ligne de texte sous elle ; un bloc ne se centre pas avec l'alignement du texte. */ .pd-atouts__energie{display:block;width:100px;height:auto;margin-inline:auto} .pd-atouts__icon{flex:0 0 auto;width:20px;height:20px;margin-top:.05rem; fill:none;stroke:#082E3C;stroke-width:1.5; stroke-linecap:round;stroke-linejoin:round} @media (min-width:1024px){ /* ⚠️ `align-items:start` cale les deux colonnes en haut de la RANGEE, ce qui est bien ce qu on veut — mais l oeil compare la premiere LIGNE DE TEXTE de chacune, pas le bord des boites. La description ouvre sur une ligne en gras a 16 px, la reassurance sur du 14 px : sans correction, le bloc parait descendre. */ .pd-intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(15rem,18rem); gap:3rem;align-items:start} .pd-intro .pd-atouts{margin-top:.15rem} /* ⚠️ LE THEME RESERVE 165 px A DROITE DE LA DESCRIPTION pour contourner le logo fabricant, qui est positionne en ABSOLU en haut a droite : .product__right:has(.pd-product__brand) .product__description-short { padding-inline-end:165px } La description vit desormais dans une colonne de grille, tres loin de ce logo : cette marge ne la protege plus de rien, elle la retrecit. ⛔ On ne touche pas a la regle du theme — on la neutralise chez nous, et seulement dans la mise en page a deux colonnes. */ .pd-intro .product__description-short{padding-inline-end:0} } /* Y · LES LIENS DE L'ACCUEIL RESSEMBLENT ENFIN À DES LIENS. 🔴 Nico, 01/09 : « il manque des liens vers les accessoires et tablettes ». Ils y étaient — ils ne se VOYAIENT pas. Le thème pose `--bs-link-color` à la couleur du texte courant et `text-decoration:none` : un lien dans du texte est donc rigoureusement invisible, et ne se révèle qu'au survol — c'est-à-dire jamais sur téléphone. ▶️ Ces appels à l'action prennent donc une couleur, une graisse, une flèche et un soulignement au survol. Quatre signaux plutôt qu'un : la couleur seule ne suffit pas pour qui la distingue mal. 🔑 UNE COULEUR PAR FOND, MESURÉE. Les trois blocs n'ont pas le même fond, une seule teinte ne pouvait pas convenir aux trois : #0D5069 sur blanc 8,87:1 #0D5069 sur #F0F5F7 8,07:1 #BAE0EE sur #355D6C 5,11:1 (le bloc Innovation, sombre) Le minimum exigé est 4,5. Les trois passent avec de la marge. ⚠️ La flèche est en `::after` et non dans le texte : elle ne doit pas être lue par un lecteur d'écran, qui annonce déjà « lien ». */ .pd-innovation__cta, .pd-duo__cta{margin:1.5rem 0 0} .pd-innovation__cta a, .pd-duo__cta a{display:inline-flex;align-items:center;gap:.45rem; font-weight:600;font-size:.95rem;line-height:1.4;text-decoration:none; border-bottom:1px solid transparent;padding-bottom:.15rem; transition:border-color .15s ease} .pd-duo__cta a{color:#0D5069} .pd-innovation__cta a{color:#BAE0EE} .pd-innovation__cta a::after, .pd-duo__cta a::after{content:'\2192';font-size:1.05em;line-height:1; transition:transform .15s ease} .pd-duo__cta a:hover, .pd-duo__cta a:focus-visible{border-bottom-color:#0D5069} .pd-innovation__cta a:hover, .pd-innovation__cta a:focus-visible{border-bottom-color:#BAE0EE} .pd-innovation__cta a:hover::after, .pd-duo__cta a:hover::after{transform:translateX(3px)} /* ⚖️ Le mouvement de la flèche est un agrément, pas une information : on le coupe pour qui a demandé moins d'animation. */ @media (prefers-reduced-motion:reduce){ .pd-innovation__cta a::after, .pd-duo__cta a::after{transition:none} .pd-innovation__cta a:hover::after, .pd-duo__cta a:hover::after{transform:none} } /* 29/09/2026 — LE LISERET SOUS LE LOGO (Nico : « tu peux » l adoucir). La bande du logo finissait par une bordure #dee2e6 : le gris par defaut de Bootstrap, presque blanc sur le bleu nuit, alors que la bande du logo et la barre de menu ont le meme fond et que les autres separations de l en-tete sont a 8 % de blanc. Meme valeur que sur le .pro (pro-2026.css). Hors couche : une declaration normale hors couche bat toutes les couches. */ .header-bottom{border-bottom-color:rgba(255,255,255,.08)} /* 01/10/2026 — DEUX DEFAUTS DE L EN-TETE vus par Nico en relisant la recette. Tous deux existent AUSSI sur le theme d avant (mesure en production) : ce n est pas la montee du theme. 1. LE MENU DU COMPTE PASSAIT SOUS LE PANIER. `#_desktop_ps_shoppingcart` est en `position:relative; z-index:1046` ; le menu deroulant du compte vaut 1000 (Bootstrap). Client connecte + un article au panier : le libelle blanc « Panier » et sa pastille s affichaient PAR-DESSUS le menu ouvert. Le menu du compte passe a 1050. 2. UN FILET CLAIR EN HAUT DE LA LISTE « CATEGORIES DE PRODUIT ». La liste commence exactement ou finit l en-tete ; a une echelle d ecran de 125 ou 150 %, l arrondi laisse un joint d un pixel ou transparait la page. La liste remonte d un pixel sous l en-tete (meme couleur) : plus de joint. */ .ps-customersignin .dropdown-menu{z-index:1050} .pd-nav__categories-list{margin-top:-1px} /* 01/10/2026 — LE MACARON « AVIS GARANTIS » NE RECOUVRE PLUS LE CONTENU. Releve par l audit visuel d Antigravity, present en production : le macaron flottant (fixe en bas a gauche, 128 x 137 px) se posait sur le bas des filtres de categorie, sur la premiere vignette de la fiche produit et sur le texte de la newsletter dans le tunnel de commande. 🔑 LE REMONTER NE REGLE RIEN : il est fixe a l ecran, il recouvrirait simplement autre chose dans la meme colonne pendant le defilement. Ce qui regle le probleme, c est qu il TIENNE DANS LA MARGE, a gauche du contenu. La marge vaut (largeur d ecran - largeur du contenu) / 2, et le contenu fait 1140 px jusqu a 1399 px d ecran, 1320 px au-dela (mesure au navigateur : 106 px de marge a 1366, 133 a 1600, 293 a 1920). ⚠️ La barre de defilement (15 px) est a retrancher de la largeur d ecran : la marge reelle vaut (largeur - 15 - contenu) / 2. Mesure : 101 px a 1536, la ou le calcul sans barre en annoncait 108. Donc, par largeur d ecran : - 1591 px et plus : taille normale (la marge fait 128 px ou plus) ; - 1535 a 1590 px, et 1355 a 1399 px : reduit a 74 % (100 px ; le macaron mesure 135 px en realite), il tient ; - 1024 a 1354 px, et 1400 a 1534 px : la marge est trop etroite, masque ; - moins de 1024 px : deja masque (regle du 08/09 dans _phonedroid.scss). ⚠️ `!important` aussi sur `transform` : sans lui la reduction n est pas appliquee (mesure : 128 px de large au lieu de 100). ⚪ La preuve sociale reste partout : la note Avis Garantis dans le bandeau du haut, les etoiles sous le titre du produit, le bloc d avis en bas. ⚠️ `body div.` et `!important` : le widget injecte apres le rendu sa propre balise