/* ═══════════════════════════════════════════════════════════════════════════ 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, utilities, ps-base, ps-components, ps-modules, ps-pages 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} .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} } /* ══════════════════════════ FIN REGLAGES PHONEDROID ═══════════════════════ */