/* ========================================================================== SURCHARGE ÉDITORIALE (MODE POSTE DE COMMANDE) Ne s'applique qu'aux pages dont le porte la classe .ed-page ========================================================================== */ /* ---- 1. LE HERO (05-shop-products.css) ---- */ /* On retire le dégradé de fond, on met un fond papier strict et une bordure nette */ .ed-page .page-hero { background: var(--bg-white) !important; border-bottom: 1px solid var(--border) !important; } /* Le badge "Entreprise ivoirienne..." : devient carré, typé technique et sans ombre */ .ed-page .page-hero-badge { border-radius: 0 !important; font-family: var(--mono) !important; font-size: 0.8rem !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; box-shadow: none !important; } /* ---- 2. LES DÉGRADÉS DE TEXTE (01-base.css) ---- */ /* On aplatit les textes dégradés en couleur unie soulignée */ .ed-page .text-gradient, .ed-page .text-gradient-blue, .ed-page .text-gradient-green { background: none !important; -webkit-background-clip: unset !important; -webkit-text-fill-color: unset !important; background-clip: border-box !important; text-decoration: underline !important; text-decoration-thickness: 3px !important; text-underline-offset: 4px !important; } .ed-page .text-gradient { color: var(--orange) !important; text-decoration-color: var(--orange-light) !important; } .ed-page .text-gradient-blue { color: var(--blue) !important; text-decoration-color: var(--blue-light) !important; } .ed-page .text-gradient-green { color: var(--green-dark) !important; text-decoration-color: var(--green) !important; } /* ---- 3. COMPOSANTS SERVICES (09-services.css) ---- */ /* Les cartes des pôles (.sv-card) deviennent carrées, sans ombre au survol */ .ed-page .sv-card { border-radius: 0 !important; } .ed-page .sv-card:hover { transform: none !important; box-shadow: none !important; border-color: var(--sv-accent) !important; } /* Les petits tags de carte (ex: "Pôle 01") passent en monospace */ .ed-page .sv-card-tag { border-radius: 0 !important; font-family: var(--mono) !important; font-size: 0.7rem !important; } /* Les grandes étapes détaillées (.sv-step) */ .ed-page .sv-step { border-radius: 0 !important; } .ed-page .sv-step:hover { box-shadow: none !important; border-color: var(--sv-accent) !important; } /* Méthode "Quatre règles que vous pouvez nous opposer" (.sv-layer) */ .ed-page .sv-layer { border-radius: 0 !important; } .ed-page .sv-layer:hover { transform: none !important; box-shadow: none !important; border-color: var(--sv-accent) !important; } /* Les numéros de la méthode (01, 02...) */ .ed-page .sv-layer-num { border-radius: 0 !important; font-family: var(--mono) !important; font-weight: 700 !important; } /* La FAQ (blocs repliables) */ .ed-page .sv-faq details { border-radius: 0 !important; } .ed-page .sv-faq details[open] { box-shadow: none !important; } /* Le grand Call-To-Action de bas de page (.sv-cta) */ .ed-page .sv-cta, .ed-page .sv-cta-side { border-radius: 0 !important; box-shadow: none !important; } .ed-page .sv-cta-kicker { font-family: var(--mono) !important; font-weight: 700 !important; } /* Les numéros 1, 2, 3 dans le CTA */ .ed-page .sv-next li span { border-radius: 0 !important; font-family: var(--mono) !important; font-weight: 700 !important; } /* ---- 4. COMPOSANTS "À PROPOS" (11-a-propos.css) ---- */ /* Identité légale (RCCM, Capital...) */ .ed-page .ap-identity { border-radius: 0 !important; box-shadow: none !important; } .ed-page .ap-identity-form { border-radius: 0 !important; font-family: var(--mono) !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; } /* Synergie : Le pôle logiciels construit... */ .ed-page .ap-link { border-radius: 0 !important; } .ed-page .ap-link-step { font-family: var(--mono) !important; font-weight: 700 !important; } /* Origine (De MONCHEMOI à SIZEG AFRICA) */ .ed-page .ap-origine { background: var(--bg-white) !important; border-radius: 0 !important; box-shadow: none !important; } .ed-page .ap-origine:hover { transform: translateY(-2px) !important; box-shadow: none !important; border-color: var(--ink) !important; } .ed-page .ap-origine-annee { background: var(--ink) !important; font-family: var(--mono) !important; border-radius: 0 !important; box-shadow: none !important; } /* ---- 5. BOUTONS & BADGES DE SECTION ---- */ .ed-page .btn, .ed-page .section-tag { border-radius: 0 !important; } /* ---- 6. GUIDE DMR / TETRA / BROADBAND (12-guide.css) ---- */ .ed-page .hts-card, .ed-page .hts-img-wrap, .ed-page .hts-badge, .ed-page .gf-card, .ed-page .gf-icon, .ed-page .gf-badge, .ed-page .gf-pill, .ed-page .gf-pill img, .ed-page .gf-link, .ed-page .vs-wrap, .ed-page .vs-side-avatar, .ed-page .guide-table thead th:first-child, .ed-page .guide-table thead th:last-child, .ed-page .gt-thumb, .ed-page .table-prod-pill, .ed-page .table-prod-pill img, .ed-page .budget-legend, .ed-page .choose-card, .ed-page .choose-a-btn, .ed-page .workflow-timeline-box, .ed-page .wt-step, .ed-page .wt-active-badge, .ed-page .guide-rule, .ed-page .guide-table-wrap, .ed-page .choose-reco, .ed-page .guide-cta-band { border-radius: 0 !important; } /* ---- 7. SUPPRESSION DU MODE SOMBRE (Guide) ---- */ .ed-page .hts-card { background: var(--bg-white) !important; border-color: var(--border) !important; } .ed-page .hts-card:hover { background: var(--bg) !important; } .ed-page .hts-info h4 { color: var(--text) !important; } .ed-page .hts-info p { color: var(--text-muted) !important; } .ed-page .vs-mid { background: var(--bg) !important; color: var(--text) !important; border-left: 1px solid var(--border) !important; border-right: 1px solid var(--border) !important; } .ed-page .guide-table thead th { background: var(--bg) !important; color: var(--text) !important; border-bottom: 2px solid var(--border) !important; } .ed-page .guide-cta-band { background: var(--bg-white) !important; color: var(--text) !important; border: 1px solid var(--border) !important; box-shadow: none !important; } .ed-page .guide-cta-band h2 { color: var(--text) !important; } .ed-page .guide-cta-band p { color: var(--text-muted) !important; } /* --- AJOUTS POUR PAGES SERVICES --- */ .ed-page .value-card, .ed-page .sv-proof-item, .ed-page .sv-product, .ed-page .ph-logo-card, .ed-page .im-screen, .ed-page .sv-product-grid img, .ed-page .rc-archi rect { border-radius: 0 !important; } /* --- LA GRILLE ZP POUR LES PAGES SERVICES --- */ .zp-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 3rem; } @media (max-width: 900px) { .zp-grid { grid-template-columns: 1fr; gap: 2rem; } } /* ========================================================================== 8. LIGNE ÉDITORIALE SANS ICÔNES DÉCORATIVES On masque les pictogrammes purement décoratifs (SVG) sur les pages .ed-page. Les images produits, logos de marque et vraies illustrations sont conservés. Les emoji dans le texte (tableaux, listes) sont retirés dans le HTML. ========================================================================== */ .ed-page .gf-icon, .ed-page .guide-rule-icon, .ed-page .vs-check-list li svg, .ed-page .gf-link svg, .ed-page .sv-card-icon, .ed-page .value-icon, .ed-page .rc-partner-icon, .ed-page .service-adv-icon, .ed-page .contact-item-icon, .ed-page .sv-proof-item svg, .ed-page .sv-deliverable svg, .ed-page .sv-note svg { display: none !important; } /* La coche retirée : on garde un léger décalage propre pour la liste VS */ .ed-page .vs-check-list li { padding-left: 0; } /* ========================================================================== 9. SHOWCASE PRODUIT (.sv-product : GIMMO / Badenya) — passage en clair Bloc jadis navy sombre ; on l'aligne sur le thème clair, angles vifs. ========================================================================== */ .ed-page .sv-product { background: var(--paper) !important; color: var(--ink) !important; border: 1px solid var(--ink) !important; border-radius: 0 !important; } .ed-page .sv-product h3, .ed-page .sv-product-grid strong { color: var(--ink) !important; } .ed-page .sv-product > p, .ed-page .sv-product-body > p, .ed-page .sv-product-grid span { color: var(--text-muted) !important; } .ed-page .sv-product-kicker { color: var(--sv-accent-dark) !important; } .ed-page .sv-product-grid li { background: var(--bg-white) !important; border: 1px solid var(--hair) !important; border-radius: 0 !important; } .ed-page .sv-badge-live { background: var(--green-light) !important; color: var(--green-dark) !important; border: 1px solid rgba(34, 197, 94, 0.4) !important; border-radius: 0 !important; } .ed-page .sv-badge-wip { background: var(--bg) !important; color: var(--text-muted) !important; border: 1px solid var(--hair) !important; border-radius: 0 !important; } .ed-page .sv-product-visual::before { opacity: 0.22 !important; } /* ========================================================================== 10. PAGE RADIOCOMMUNICATION (rc-) — bandeau partenaire clair + angles vifs ========================================================================== */ .ed-page .rc-partner { background: var(--paper) !important; border: 1px solid var(--ink) !important; border-radius: 0 !important; box-shadow: none !important; } .ed-page .rc-partner h3 { color: var(--ink) !important; } .ed-page .rc-partner p { color: var(--text-muted) !important; } .ed-page .rc-pill { background: var(--bg) !important; color: var(--text-muted) !important; border: 1px solid var(--hair) !important; border-radius: 0 !important; } .ed-page .rc-partner a { color: var(--orange-dark) !important; } .ed-page .rc-partner-logo { filter: none !important; } .ed-page .rc-archi-figure, .ed-page .rc-grid-sectors .service-adv-card, .ed-page .rc-equip-chip { border-radius: 0 !important; box-shadow: none !important; } /* ========================================================================== 11. HEROS DES PAGES SERVICES — mise en conformité avec l'accueil Ces heros utilisaient une grille 2 colonnes (titre + bloc de preuves latéral) : le grand titre chevauchait la colonne de droite (« éléments qui s'emboîtent »). On repasse en COLONNE UNIQUE comme l'accueil / qui-sommes-nous, et on retire le bloc de preuves du hero (il fait doublon avec le corps de page). ========================================================================== */ .ed-hero .zp-grid { display: block !important; } .ed-hero .zp-grid > div { max-width: none !important; } .ed-hero .sv-proof { display: none !important; } /* Les pages zp-page (Immobilier, Guide d'achat) gardent 2 colonnes dans le hero */ body.zp-page .ed-hero .zp-grid { display: grid !important; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr) !important; align-items: center !important; gap: clamp(2rem, 4vw, 3.5rem) !important; } @media (max-width: 900px) { body.zp-page .ed-hero .zp-grid { grid-template-columns: 1fr !important; } } /* ========================================================================== 12. CONTACT & DEVIS — cartes, formulaires et carte Maps en angles vifs ========================================================================== */ .ed-page .contact-form-wrap, .ed-page .map-wrap, .ed-page .map-wrap iframe, .ed-page .devis-empty, .ed-page .devis-items-col, .ed-page .devis-item, .ed-page .contact-item { border-radius: 0 !important; box-shadow: none !important; } .ed-page .contact-form input, .ed-page .contact-form textarea, .ed-page .contact-form select { border-radius: 0 !important; } /* ========================================================================== 13. BOUTIQUE & FICHES — galerie éditoriale DYNAMIQUE + icônes DU THÈME Ici (pages de présentation produit) on GARDE les icônes, mais monoline, nettes, en encre/orange. Cellules cadrées à filets, survol vivant. ========================================================================== */ /* Recherche + filtres */ .ed-page .shop-filter { border-radius: 0 !important; box-shadow: none !important; font-family: var(--mono) !important; font-size: 0.72rem !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; } .ed-page .shop-filter:hover { border-color: var(--ink) !important; box-shadow: none !important; } .ed-page .shop-filter.active { background: var(--ink) !important; border-color: var(--ink) !important; box-shadow: none !important; } .ed-page .shop-category-header { border-bottom-color: var(--ink) !important; } /* Bandeau « prix sur devis » : net (icône éclair du thème conservée) */ .ed-page .shop-notice { border-radius: 0 !important; animation: none !important; } .ed-page .notice-pulse-badge { border-radius: 0 !important; background: var(--ink) !important; animation: none !important; } /* ---- Carte produit : cellule cadrée, équerre d'angle animée au survol ---- */ .ed-page .product-card { border: 1px solid var(--hair) !important; border-radius: 0 !important; box-shadow: none !important; } .ed-page .product-card:hover, .ed-page .product-card:focus-within { transform: translateY(-4px) !important; box-shadow: none !important; border-color: var(--ink) !important; } .ed-page .product-card::after { content: ""; position: absolute; top: -1px; left: -1px; width: 0; height: 0; border-top: 2px solid var(--orange); border-left: 2px solid var(--orange); transition: width 0.3s ease, height 0.3s ease; z-index: 3; pointer-events: none; } .ed-page .product-card:hover::after { width: 22px; height: 22px; } .ed-page .product-img { border-radius: 0 !important; background: var(--paper) !important; border-bottom: 1px solid var(--hair) !important; } .ed-page .product-badge { border-radius: 0 !important; background: var(--ink) !important; font-family: var(--mono) !important; box-shadow: none !important; } .ed-page .product-badge.badge-new { background: var(--orange) !important; } .ed-page .product-cat { font-family: var(--mono) !important; color: var(--orange-dark) !important; } /* Icônes de caractéristiques : monoline ENCRE en cellules carrées (icônes du thème) */ .ed-page .product-chips-icons li.chip-icon-only, .ed-page .product-chips-icons li[class*="chip-cat-"] { border-radius: 0 !important; background: var(--bg-white) !important; border: 1px solid var(--hair) !important; color: var(--ink) !important; box-shadow: none !important; } .ed-page .product-chips-icons li.chip-icon-only:hover, .ed-page .product-chips-icons li[class*="chip-cat-"]:hover { border-color: var(--orange) !important; color: var(--orange) !important; transform: translateY(-2px) !important; box-shadow: none !important; } .ed-page .product-chips-icons li.chip-icon-only::after { border-radius: 0 !important; background: var(--ink) !important; font-family: var(--mono) !important; } /* Actions produit : boutons nets, encre + orange */ .ed-page .product-actions .btn, .ed-page .product-actions .btn-sm { border-radius: 0 !important; } .ed-page .product-actions .btn-primary { background: var(--ink) !important; box-shadow: none !important; } .ed-page .product-actions .btn-primary:hover { background: var(--orange-dark) !important; box-shadow: none !important; } .ed-page .product-actions .btn-outline { border-radius: 0 !important; } .ed-page .btn-in-cart-stepper, .ed-page .stepper-action-btn, .ed-page .caddy-count-circle { border-radius: 0 !important; box-shadow: none !important; } /* ---- Tableau comparatif ---- Les onglets parlaient encore la langue des pastilles arrondies : ils reprennent la typo monospace des filtres, et leur icône entre dans un cadre à filet comme les pastilles des cartes. Le tableau, lui, se lit comme la fiche technique des fiches produit : critère en monospace clair à gauche, valeur en encre, un filet par ligne. */ .ed-page .compare-tab-btn { border-radius: 0 !important; box-shadow: none !important; border: 1px solid var(--hair) !important; gap: 9px !important; padding: 9px 16px !important; font-family: var(--mono) !important; font-size: 0.72rem !important; font-weight: 600 !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; transition: none !important; } .ed-page .compare-tab-btn:hover { border-color: var(--ink) !important; transform: none !important; box-shadow: none !important; } .ed-page .compare-tab-btn > svg { flex: 0 0 auto !important; box-sizing: border-box !important; width: 22px !important; height: 22px !important; padding: 3px !important; border: 1px solid var(--hair) !important; background: var(--paper) !important; color: var(--orange-dark) !important; } .ed-page .compare-tab-btn.is-active { background: var(--ink) !important; border-color: var(--ink) !important; box-shadow: none !important; color: #ffffff !important; } .ed-page .compare-tab-btn.is-active > svg { border-color: rgba(255, 255, 255, 0.28) !important; background: transparent !important; color: var(--orange) !important; } .ed-page .tab-count { border-radius: 0 !important; font-family: var(--mono) !important; font-size: 0.68rem !important; font-weight: 600 !important; padding: 1px 6px !important; border: 1px solid var(--hair) !important; background: transparent !important; color: var(--text-light) !important; } .ed-page .compare-tab-btn.is-active .tab-count { border-color: rgba(255, 255, 255, 0.28) !important; background: transparent !important; color: #ffffff !important; } .ed-page .table-scroll { border-radius: 0 !important; box-shadow: none !important; } .ed-page .compare-table thead th { background: var(--paper) !important; border-bottom: 2px solid var(--ink) !important; } .ed-page .compare-th-box { border-radius: 0 !important; box-shadow: none !important; } .ed-page .compare-th-card:hover .compare-th-box { box-shadow: none !important; } .ed-page .compare-th-label { font-family: var(--mono) !important; font-size: 0.7rem !important; font-weight: 600 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; } .ed-page .compare-table tbody td { border-bottom: 1px solid var(--hair) !important; color: var(--ink) !important; font-weight: 600 !important; } .ed-page .compare-table th:first-child, .ed-page .compare-table td:first-child { border-right: 1px solid var(--hair) !important; } /* Même libellé monospace que les specs des fiches, mais en --text-muted et non --text-light : ici la colonne identifie la ligne, elle doit rester lisible (2,6:1 contre 7:1 sur fond blanc). */ .ed-page .compare-table tbody td:first-child { font-family: var(--mono) !important; font-size: 0.66rem !important; font-weight: 600 !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; color: var(--text-muted) !important; } .ed-page .compare-table tbody tr:hover td { background: var(--paper) !important; } /* Sections secondaires boutique : angles vifs (icônes du thème conservées) */ .ed-page .partner-logo-card, .ed-page .why-card, .ed-page .why-icon, .ed-page .broadband-infra-note, .ed-page .bin-icon-box { border-radius: 0 !important; box-shadow: none !important; } .ed-page .why-card:hover { box-shadow: none !important; border-color: var(--ink) !important; transform: translateY(-4px) !important; } /* Bandeau plaquette/catalogue : passage en clair */ .ed-page .plaquette-banner { background: var(--paper) !important; border: 1px solid var(--ink) !important; border-radius: 0 !important; box-shadow: none !important; color: var(--ink) !important; } .ed-page .plaquette-banner::before { display: none !important; } .ed-page .plaquette-banner h2 { color: var(--ink) !important; } .ed-page .plaquette-banner p { color: var(--text-muted) !important; } /* Les documents sont présentés comme sur les fiches : une colonne de cartes à couverture réelle, au lieu d'une rangée de boutons-pilules. */ .ed-page .plaquette-banner .product-docs-grid-premium { grid-template-columns: 1fr; gap: 14px; min-width: min(420px, 100%); margin: 0; } .ed-page .plaquette-banner-cta { margin-top: 22px; } /* Les couvertures de la plaquette et du catalogue sont en 16:9, contrairement aux premières pages de PDF des fiches (portrait) : le cadre suit la source, sinon « object-fit: cover » n'en montrerait qu'une bande centrale. */ .ed-page .plaquette-banner .doc-card-thumb { width: 96px; height: 54px; } /* Sous 640px, le min-width de la colonne de documents poussait la carte hors de l'écran (12px de débordement horizontal) : elle se resserre. */ @media (max-width: 640px) { .ed-page .plaquette-banner .product-docs-grid-premium { min-width: 0; } .ed-page .plaquette-banner .doc-dl-card-premium { padding: 16px 14px; gap: 12px; } .ed-page .plaquette-banner .doc-card-thumb { width: 72px; height: 41px; } } /* ========================================================================== 14. FICHES PRODUIT « premium » — passage au thème clair éditorial Hero bleu-nuit → clair ; cartes verre/ombres → cellules cadrées nettes ; icônes conservées (thème). Section vidéo laissée sombre (lecteur = sombre). ========================================================================== */ /* ---- HERO produit ---- */ .ed-page .page-hero-product-premium { background: var(--bg-white) !important; color: var(--ink) !important; border-bottom: 1px solid var(--ink) !important; min-height: auto !important; padding: clamp(88px, 11vw, 126px) 0 clamp(40px, 6vw, 80px) !important; } .ed-page .hero-product-grid { align-items: start !important; } .ed-page .page-hero-product-premium::before { display: none !important; } .ed-page .hero-breadcrumb, .ed-page .hero-breadcrumb a, .ed-page .hero-breadcrumb span { color: var(--text-muted) !important; } .ed-page .hero-product-info h1 { color: var(--ink) !important; font-size: clamp(1.8rem, 3.5vw, 2.6rem) !important; margin-bottom: 0 !important; } .ed-page .hero-product-motto { color: var(--orange-dark) !important; font-size: 1rem !important; margin-bottom: 2px !important; } .ed-page .hero-product-desc { color: var(--text-muted) !important; font-size: 0.9rem !important; line-height: 1.4 !important; } .ed-page .product-detail-info-premium { gap: 16px !important; } /* Badges hero */ .ed-page .hero-badge { border-radius: 0 !important; font-family: var(--mono) !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } .ed-page .hero-badge-premium { background: var(--orange) !important; color: #fff !important; } .ed-page .hero-badge-partner { background: transparent !important; color: var(--ink) !important; border: 1px solid var(--hair) !important; } .ed-page .hero-badge-stock { background: var(--green-light) !important; color: var(--green-dark) !important; border: 1px solid rgba(34, 197, 94, 0.4) !important; } /* Pills d'avantages + puces secteur */ .ed-page .adv-pill, .ed-page .usecase-sector-chip { background: var(--paper) !important; border: 1px solid var(--hair) !important; color: var(--ink) !important; border-radius: 0 !important; } /* Boutons produit */ .ed-page .btn-hero-primary, .ed-page .btn-buy-primary, .ed-page .btn-sticky-devis { background: var(--ink) !important; color: #fff !important; border-radius: 0 !important; box-shadow: none !important; } .ed-page .btn-hero-primary:hover, .ed-page .btn-buy-primary:hover, .ed-page .btn-sticky-devis:hover { background: var(--orange-dark) !important; box-shadow: none !important; } .ed-page .btn-hero-outline { background: transparent !important; color: var(--ink) !important; border: 1px solid rgba(12, 14, 18, 0.28) !important; border-radius: 0 !important; } .ed-page .btn-hero-outline:hover { border-color: var(--ink) !important; background: rgba(12, 14, 18, 0.04) !important; } /* Image hero + zoom */ .ed-page .hero-main-img-box { background: var(--paper) !important; border: 1px solid var(--hair) !important; border-radius: 0 !important; box-shadow: none !important; } .ed-page .hero-zoom-badge { border-radius: 0 !important; font-family: var(--mono) !important; } /* Sous-nav sticky */ .ed-page .product-sticky-subnav { background: var(--bg-white) !important; border-bottom: 1px solid var(--hair) !important; box-shadow: none !important; } /* Carte verre + galerie */ .ed-page .product-glass-card { background: var(--bg-white) !important; border: 1px solid var(--ink) !important; border-radius: 0 !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } .ed-page .showcase-main-img { border-radius: 0 !important; background: var(--paper) !important; } .ed-page .showcase-tool-btn, .ed-page .showcase-badge-top, .ed-page .thumb-btn { border-radius: 0 !important; } /* En-tête de la section Points Forts (façon index adapté colonne étroite) */ .ed-page .product-detail-info-premium .info-header { display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 4px !important; padding-bottom: 8px !important; border-bottom: 1px solid var(--hair) !important; margin-bottom: 0 !important; } /* Align Image to the top limit */ .ed-page .hero-product-image-wrap { align-items: flex-start !important; } /* Hide Fiche Technique button in hero */ .ed-page .hero-product-ctas { display: none !important; } /* Reduce size of Points Forts */ .ed-page .info-header h2 { font-size: 0.7rem !important; } .ed-page .info-header p { font-size: 0.7rem !important; margin-bottom: 4px !important; } .ed-page .adv-card-premium { padding: 12px !important; gap: 8px !important; } .ed-page .adv-card-premium h4 { font-size: 0.8rem !important; } .ed-page .adv-card-premium p { font-size: 0.75rem !important; } /* FUSE Buy Box and Partner Card */ .ed-page .product-buy-box-premium { padding: 16px 20px !important; margin-bottom: 0 !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; border-bottom: none !important; } .ed-page .buy-box-header { margin-bottom: 12px !important; } .ed-page .buy-box-header h3 { font-size: 1rem !important; } .ed-page .buy-box-header p { font-size: 0.85rem !important; } .ed-page .buy-box-actions { gap: 12px !important; } .ed-page .btn-buy-primary { padding: 10px 16px !important; font-size: 0.85rem !important; } .ed-page .buy-box-reassurance { margin-top: 12px !important; font-size: 0.75rem !important; } .ed-page .partner-empower-card { padding: 12px 16px !important; gap: 12px !important; margin-top: 0 !important; border-top-left-radius: 0 !important; border-top-right-radius: 0 !important; border-top: none !important; } .ed-page .partner-empower-card img { height: 28px !important; } .ed-page .partner-empower-card strong { font-size: 0.8rem !important; } .ed-page .partner-empower-card span { font-size: 0.7rem !important; } .ed-page .product-detail-info-premium .info-header span.hero-badge { display: none !important; } .ed-page .product-detail-info-premium .info-header h2 { font-family: var(--mono) !important; font-size: 0.72rem !important; font-weight: 700 !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; color: var(--ink) !important; margin: 0 !important; } .ed-page .product-detail-info-premium .info-header p { font-family: var(--mono) !important; font-size: 0.7rem !important; font-weight: 500 !important; letter-spacing: 0.05em !important; text-transform: uppercase !important; color: var(--text-muted) !important; margin: 0 !important; text-align: left !important; } /* Grille transformée en Liste (Adaptée colonne étroite) */ .ed-page .adv-cards-grid { display: flex !important; flex-direction: column !important; gap: 0 !important; counter-reset: adv-card-counter; margin-bottom: 2rem !important; width: 100% !important; } .ed-page .adv-card-premium { display: grid !important; grid-template-columns: 40px 1fr !important; grid-template-rows: auto auto !important; align-items: baseline !important; gap: 4px 12px !important; padding: 20px 0 !important; /* Aligné sur les bords */ background: transparent !important; border: none !important; border-bottom: 1px solid var(--hair) !important; border-radius: 0 !important; box-shadow: none !important; color: var(--ink) !important; transition: background 0.2s ease, color 0.2s ease, padding 0.2s ease !important; counter-increment: adv-card-counter; } .ed-page .adv-card-premium:hover { background: rgba(0, 102, 255, 0.02) !important; /* Fond bleu extrêmement doux */ color: var(--ink) !important; padding-left: 12px !important; padding-right: 12px !important; transform: none !important; } .ed-page .adv-card-icon { display: none !important; } .ed-page .adv-card-premium::before { content: "0" counter(adv-card-counter); grid-column: 1; grid-row: 1 / span 2; font-family: var(--mono) !important; font-size: 1.05rem !important; font-weight: 600 !important; color: var(--brand-primary); transition: color 0.2s, transform 0.2s; align-self: start; margin-top: 2px; } .ed-page .adv-card-premium:hover::before { transform: scale(1.1); /* Petit effet sympa sur le chiffre */ } .ed-page .adv-card-premium strong { grid-column: 2; grid-row: 1; font-size: clamp(1.1rem, 1.8vw, 1.4rem) !important; font-weight: 800 !important; letter-spacing: -0.01em !important; line-height: 1.2 !important; } .ed-page .adv-card-premium span { grid-column: 2; grid-row: 2; font-family: var(--mono) !important; font-size: 0.7rem !important; letter-spacing: 0.05em !important; color: var(--text-muted) !important; text-transform: uppercase !important; transition: color 0.2s; text-align: left !important; line-height: 1.4 !important; } /* Retrait du hover texte blanc */ .ed-page .adv-card-premium:hover span { color: var(--ink) !important; } /* Boîte d'achat & Tarification : Design Premium */ .ed-page .product-buy-box-premium { background: #fdfdfd !important; border: 1px solid var(--hair) !important; border-radius: 16px !important; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04) !important; transition: box-shadow 0.3s ease !important; } .ed-page .product-buy-box-premium:hover { box-shadow: 0 12px 32px rgba(0, 0, 0, 0.06) !important; } .ed-page .quantity-selector-premium, .ed-page .quantity-selector-premium input { border-radius: 8px !important; } .ed-page .partner-empower-card { border-radius: 12px !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important; } /* Grandes stats */ .ed-page .big-stat-item { border-radius: 0 !important; box-shadow: none !important; } .ed-page .big-stat-number { color: var(--ink) !important; } /* Pourquoi choisir */ .ed-page .why-choose-card { background: var(--bg-white) !important; border: 1px solid var(--hair) !important; border-radius: 0 !important; box-shadow: none !important; } .ed-page .why-choose-icon { border-radius: 0 !important; } /* Timeline cas d'usage */ .ed-page .timeline-step-card { background: var(--bg-white) !important; border: 1px solid var(--hair) !important; border-radius: 0 !important; box-shadow: none !important; } .ed-page .timeline-step-badge { border-radius: 0 !important; } /* Spécifications */ .ed-page .spec-group-card { background: var(--bg-white) !important; border: 1px solid var(--hair) !important; border-radius: 0 !important; box-shadow: none !important; } .ed-page .spec-group-icon { border-radius: 0 !important; } .ed-page .spec-item { border-radius: 0 !important; } /* Documentation */ .ed-page .doc-dl-card-premium { border-radius: 0 !important; box-shadow: none !important; } .ed-page .doc-card-icon, .ed-page .btn-doc-download { border-radius: 0 !important; } /* La carte était encore la seule à se soulever au survol, et sa vignette gardait des coins arrondis avec une ombre portée : mêmes angles vifs et même absence de relief que partout ailleurs (fiches comprises). */ .ed-page .doc-dl-card-premium:hover { transform: none !important; box-shadow: none !important; border-color: var(--ink) !important; } .ed-page .doc-card-thumb { border-radius: 0 !important; box-shadow: none !important; border: 1px solid var(--hair) !important; } .ed-page .doc-card-info span { font-family: var(--mono) !important; font-size: 0.66rem !important; letter-spacing: 0.1em !important; text-transform: uppercase !important; color: var(--text-muted) !important; } /* Produits similaires */ .ed-page .related-card-premium { border-radius: 0 !important; box-shadow: none !important; } .ed-page .related-card-img-wrap, .ed-page .related-card-badge-top, .ed-page .related-card-spec-pill, .ed-page .related-card-action-circle { border-radius: 0 !important; } /* Bandeau de conversion final : passage en clair */ .ed-page .footer-conversion-banner { background: var(--paper) !important; border: 1px solid var(--ink) !important; border-radius: 0 !important; box-shadow: none !important; } .ed-page .footer-conversion-banner::before { display: none !important; } .ed-page .footer-conversion-banner h2 { color: var(--ink) !important; } .ed-page .footer-conversion-banner p { color: var(--text-muted) !important; } .ed-page .footer-conversion-banner .pp-badge-outline-light { color: var(--orange-dark) !important; border-color: var(--hair) !important; } /* ========================================= TRUST GRID (Réassurance B2B) ========================================= */ .trust-section { padding: 4rem 0 2rem; } .trust-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; } .trust-card { background: var(--bg-surface); border: 1px solid var(--border); border-left: 3px solid var(--primary); border-radius: 8px; padding: 1.75rem; transition: transform 0.2s, box-shadow 0.2s; display: flex; flex-direction: column; gap: 0.75rem; } .trust-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,0.06); border-color: var(--border-hover, var(--primary)); } body.dark-mode .trust-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.4); } .trust-header { display: flex; align-items: center; gap: 12px; } .trust-icon { color: var(--primary); display: flex; } .trust-title { font-size: 1.1rem; font-weight: 700; color: var(--text); margin: 0; } .trust-desc { font-size: 0.92rem; color: var(--text-muted); line-height: 1.5; margin: 0; } /* ========================================= ALIGNEMENT BOUTONS PRODUITS (Devis & Fiche) ========================================= */ .hero-product-ctas { display: flex !important; flex-direction: row !important; align-items: center !important; flex-wrap: nowrap !important; gap: 12px !important; width: 100%; } .hero-product-ctas .btn-hero-primary, .hero-product-ctas .btn-hero-outline { width: auto !important; flex: 1 1 auto !important; text-align: center !important; white-space: nowrap !important; padding-left: 15px !important; padding-right: 15px !important; } /* ABSOLUTE OVERRIDE FOR CARD FUSION */ .ed-page .product-buy-box-premium { border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; margin-bottom: 0 !important; border-bottom: none !important; } .ed-page .partner-empower-card { border-top-left-radius: 0 !important; border-top-right-radius: 0 !important; margin-top: -16px !important; border-top: none !important; position: relative !important; z-index: 2 !important; } /* ========================================================================== HERO PRODUIT — colonnes alignées en pied & cadre image invariant Deux défauts liés, corrigés d'un seul geste. 1) La colonne texte (identité + points forts + tarification + bandeau partenaire) descendait ~270px plus bas que la carte image : les deux colonnes ne finissaient pas sur la même ligne. Compacter le bloc tarification ne rendait qu'une quarantaine de pixels — l'alignement vient donc de la carte image, qui occupe désormais toute la hauteur de la rangée. 2) .showcase-main-img se dimensionnait sur l'image chargée. Les visuels de galerie n'ont pas le ratio de la vue principale (ION : 440x800 portrait contre 1290x1290 carré) : la carte sautait de 855px à 599px au clic sur une vignette. La zone d'image absorbe maintenant l'espace restant de la carte, donc sa hauteur ne dépend plus de l'image — seule l'image change à l'intérieur, jamais le cadre. ========================================================================== */ .ed-page .hero-product-grid { align-items: stretch !important; } .ed-page .hero-product-image-wrap { align-items: stretch !important; align-self: stretch !important; } .ed-page .product-glass-card { height: 100% !important; width: 100% !important; } /* flex: 1 → la zone d'image prend toute la place que les vignettes laissent. min-height: 0 lève le plancher `min-height: auto` des éléments flex, sans quoi l'image d'origine imposerait encore sa hauteur. */ .ed-page .showcase-main-img { flex: 1 1 auto !important; min-height: 320px !important; height: auto !important; } /* Le cadre ayant une hauteur définie, `max-height: 100%` se résout enfin : l'image se contient dedans au lieu de le pousser. */ .ed-page .showcase-main-img > img, .ed-page #mainProductImg { max-height: 100% !important; max-width: 100% !important; width: auto !important; height: auto !important; object-fit: contain !important; } /* Les vignettes ne s'étirent pas avec la carte. */ .ed-page .product-gallery-thumbs { flex: 0 0 auto !important; } /* Une colonne sous 1024px : plus de rangée à égaliser, on rend au cadre une hauteur raisonnable au lieu de le laisser s'étirer sur tout le contenu. */ @media (max-width: 1024px) { .ed-page .hero-product-grid { align-items: start !important; } .ed-page .product-glass-card { height: auto !important; } .ed-page .showcase-main-img { flex: 0 0 auto !important; height: clamp(300px, 60vw, 460px) !important; } } /* ========================================================================== HERO PRODUIT — bloc « Points Forts & Avantages » L'en-tête était un micro-label mono de 0.72rem : il se lisait comme une étiquette technique, pas comme le titre du bloc. Il repasse en titre plein. Les lignes d'avantages perdent leur numérotation 01…04 et se resserrent : à 20px de padding et un titre jusqu'à 1.4rem, quatre lignes mangeaient ~250px de la colonne — plus que le bloc tarification tout entier. ========================================================================== */ .ed-page .product-detail-info-premium .info-header h2 { font-family: inherit !important; font-size: 1.15rem !important; font-weight: 800 !important; letter-spacing: -0.01em !important; text-transform: none !important; color: var(--ink) !important; line-height: 1.25 !important; } .ed-page .product-detail-info-premium .info-header p { font-family: inherit !important; font-size: 0.82rem !important; font-weight: 400 !important; letter-spacing: 0 !important; text-transform: none !important; line-height: 1.4 !important; } /* Plus de pastille numérotée : la colonne du compteur disparaît avec elle. */ .ed-page .adv-card-premium::before { content: none !important; } .ed-page .adv-card-premium:hover::before { transform: none !important; } .ed-page .adv-card-premium { grid-template-columns: 1fr !important; gap: 2px 0 !important; padding: 9px 0 !important; } .ed-page .adv-card-premium:hover { padding-left: 8px !important; padding-right: 8px !important; } .ed-page .adv-card-premium strong, .ed-page .adv-card-premium span { grid-column: 1 !important; } .ed-page .adv-card-premium strong { font-size: 0.95rem !important; font-weight: 700 !important; line-height: 1.3 !important; } .ed-page .adv-card-premium span { font-size: 0.66rem !important; line-height: 1.3 !important; } .ed-page .adv-cards-grid { margin-bottom: 1rem !important; } /* ========================================================================== HERO PRODUIT — MÊME GABARIT QUE LE HERO D'ACCUEIL Le hero des fiches mesurait 1127px de haut contre 696px pour celui de index.html à 1280px : deux pages du même site n'ouvraient pas sur le même format. Les deux heros partagent déjà les mêmes marges verticales (clamp(88px,11vw,126px) / clamp(40px,6vw,80px)) ; toute la différence venait du bloc de contenu. --pp-hero-stage reproduit la hauteur du bloc .ed-hero-stage de l'accueil, relevée sur le rendu réel : 440px à 1024, 457 à 1100, 473 à 1180, 495 à 1300, plafonnée à 497 au-delà de 1440 (les clamps typographiques de l'accueil ne bougent plus après). D'où clamp(376px, 248px + 19vw, 497px), à ±2px du hero d'accueil sur toute la plage desktop. La rangée reçoit cette hauteur en `min-height` : le hero tombe pile sur le gabarit de l'accueil tant que le contenu tient, et s'étire au lieu de déborder sur une fiche au titre exceptionnellement long. Tout le contenu est resserré pour tenir dans ce cadre : lignes d'identité sur une seule ligne, points forts sur deux colonnes, tarification et bandeau partenaire compactés, carte image et vignettes réduites. Les textes à longueur variable (accroche, description, intitulés des points forts) sont bornés en nombre de lignes : la hauteur ne dépend plus de la fiche affichée. Sous 1025px la mise en page passe en une colonne : aucune rangée à égaliser, on laisse la hauteur libre. ========================================================================== */ @media (min-width: 1025px) { .ed-page .page-hero-product-premium { --pp-hero-stage: clamp(376px, 248px + 19vw, 497px); } .ed-page .page-hero-product-premium .hero-product-grid { min-height: var(--pp-hero-stage) !important; gap: clamp(28px, 3vw, 48px) !important; } /* La colonne texte remplit la rangée : le bloc tarification se pose en pied, à la même ligne que le bas de la carte image. Le mou de la colonne (32px à 1360, 61px à 1180) tombait en un seul endroit, juste avant la tarification : un trou au milieu d'une colonne par ailleurs serrée. Trois `margin-top: auto` se partagent ce mou à parts égales — le flex les traite comme autant de ressorts — donc l'air se pose aux trois articulations réelles de la colonne : identité (fil d'Ariane, rampe, badges) │ titre + accroche + description │ points forts │ tarification. Les couples serrés (titre/accroche/description) gardent leur interligne de 5px : ils doivent se lire comme un seul bloc. Et comme la somme reste inchangée, le hero garde exactement la hauteur du hero d'accueil. */ .ed-page .page-hero-product-premium .hero-product-info { gap: 8px !important; min-height: var(--pp-hero-stage) !important; } .ed-page .page-hero-product-premium .hero-product-info > h1, .ed-page .page-hero-product-premium .product-detail-info-premium, .ed-page .page-hero-product-premium .product-purchase-premium { margin-top: auto !important; } .ed-page .page-hero-product-premium .product-purchase-premium { display: flex !important; flex-direction: column !important; } /* ---- Identité : fil d'Ariane, rampe, badges — une ligne chacun ---- Ces trois lignes étaient restées aux tailles de la version compactée, alors que le reste du hero a repris de l'ampleur : elles paraissaient tassées en haut de colonne. La rampe retrouve les 0,72rem du hero d'accueil, et son filet la longueur qui va avec. */ .ed-page .page-hero-product-premium .hero-breadcrumb { margin-bottom: 0 !important; gap: 9px !important; flex-wrap: nowrap !important; white-space: nowrap !important; overflow: hidden !important; font-size: 0.82rem !important; line-height: 1.5 !important; } .ed-page .page-hero-product-premium .ed-eyebrow { margin-bottom: 0 !important; gap: 14px !important; white-space: nowrap !important; overflow: hidden !important; font-size: 0.72rem !important; line-height: 1.5 !important; } .ed-page .page-hero-product-premium .ed-eyebrow-bar { flex: 0 1 80px !important; } /* .hero-badge traîne un margin-bottom de 32px hérité de la boutique : sur une ligne de deux badges de 20px, il ajoutait 32px de vide. */ .ed-page .page-hero-product-premium .hero-badges-row { margin-bottom: 0 !important; gap: 6px !important; flex-wrap: nowrap !important; } .ed-page .page-hero-product-premium .hero-badge { margin: 0 !important; padding: 2px 8px !important; font-size: 0.6rem !important; line-height: 1.5 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; } /* ---- Titre, accroche, description : hauteurs bornées ---- Pas de margin-top ici : il est pris par le ressort défini plus haut. */ /* Les points forts partis, le titre et l'accroche reprennent leur taille. */ .ed-page .page-hero-product-premium .hero-product-info h1 { margin-right: 0 !important; margin-bottom: 0 !important; margin-left: 0 !important; max-width: none !important; font-size: clamp(1.9rem, 3.1vw, 2.7rem) !important; line-height: 1.04 !important; } .ed-page .page-hero-product-premium .hero-product-motto { margin-bottom: 0 !important; font-size: 1.02rem !important; line-height: 1.35 !important; display: -webkit-box !important; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden !important; } /* Quatre lignes désormais, au lieu de deux : la place libérée par les points forts va d'abord là. Les descriptions vont de 116 à 433 caractères selon la fiche — la borne reste nécessaire pour que la hauteur du hero ne dépende pas de la fiche affichée, mais elle ne coupe plus que les plus longues. */ .ed-page .page-hero-product-premium .hero-product-desc { margin: 0 !important; font-size: 0.95rem !important; line-height: 1.6 !important; display: -webkit-box !important; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden !important; } /* ---- Points forts : quatre lignes → deux colonnes de deux ---- */ .ed-page .page-hero-product-premium .product-detail-info-premium { gap: 10px !important; } .ed-page .page-hero-product-premium .product-detail-info-premium .info-header { padding-bottom: 7px !important; gap: 0 !important; } .ed-page .page-hero-product-premium .product-detail-info-premium .info-header h2 { font-size: 0.9rem !important; line-height: 1.2 !important; } /* Sous-titre de bloc (« Ce que le X apporte concrètement sur le terrain ») : du remplissage, seul texte du hero à ne rien apprendre. */ .ed-page .page-hero-product-premium .product-detail-info-premium .info-header p { display: none !important; } .ed-page .page-hero-product-premium .adv-cards-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 0 26px !important; margin-bottom: 0 !important; } /* Icône à gauche, sur la ligne du titre (voir la section « cartes » plus bas) ; la valeur technique s'aligne sous le titre, pas sous l'icône. */ .ed-page .page-hero-product-premium .adv-card-premium { grid-template-columns: 24px minmax(0, 1fr) !important; gap: 2px 10px !important; padding: 8px 0 !important; } .ed-page .page-hero-product-premium .adv-card-icon { grid-column: 1 !important; grid-row: 1 !important; align-self: center !important; width: 24px !important; height: 24px !important; } .ed-page .page-hero-product-premium .adv-card-icon svg { width: 13px !important; height: 13px !important; } .ed-page .page-hero-product-premium .adv-card-premium strong, .ed-page .page-hero-product-premium .adv-card-premium span { grid-column: 2 !important; } /* Le décalage au survol ferait tressauter la colonne voisine. */ .ed-page .page-hero-product-premium .adv-card-premium:hover { padding-left: 0 !important; padding-right: 0 !important; background: transparent !important; color: var(--orange-dark) !important; } .ed-page .page-hero-product-premium .adv-card-premium:nth-last-child(-n+2) { border-bottom: none !important; } .ed-page .page-hero-product-premium .adv-card-premium strong { font-size: 0.76rem !important; line-height: 1.22 !important; display: -webkit-box !important; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden !important; } /* Une ligne : ces valeurs (« 102 dB · IMPRES ») sont reprises juste en dessous dans « Chiffres clés » et dans les spécifications. Sur les fiches aux valeurs longues, une seconde ligne suffisait à faire déborder la colonne du gabarit. */ .ed-page .page-hero-product-premium .adv-card-premium span { font-size: 0.6rem !important; line-height: 1.3 !important; display: -webkit-box !important; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden !important; } /* ---- Tarification : étiquette et action sur la même ligne ---- */ .ed-page .page-hero-product-premium .product-buy-box-premium { display: flex !important; flex-flow: row wrap !important; align-items: center !important; gap: 10px 16px !important; padding: 16px 18px !important; } .ed-page .page-hero-product-premium .buy-box-title { flex: 1 1 auto !important; flex-direction: column !important; align-items: flex-start !important; gap: 0 !important; } .ed-page .page-hero-product-premium .buy-box-title span { font-size: 0.62rem !important; line-height: 1.4 !important; } .ed-page .page-hero-product-premium .buy-box-title strong { font-size: 0.95rem !important; line-height: 1.25 !important; } .ed-page .page-hero-product-premium .buy-box-actions { flex: 0 0 auto !important; gap: 8px !important; } .ed-page .page-hero-product-premium .quantity-selector-premium { padding: 2px 6px !important; } .ed-page .page-hero-product-premium .quantity-selector-premium input { width: 34px !important; font-size: 0.85rem !important; } .ed-page .page-hero-product-premium .btn-buy-primary { flex: 0 0 auto !important; min-width: 0 !important; padding: 8px 14px !important; font-size: 0.76rem !important; } .ed-page .page-hero-product-premium .buy-box-reassurance { flex: 1 1 100% !important; margin-top: 0 !important; padding-top: 6px !important; gap: 6px !important; font-size: 0.66rem !important; line-height: 1.35 !important; } /* ---- Bandeau partenaire : logo et texte sur une ligne ---- Le chevauchement de -16px qui soudait les deux cartes rognait 16px de contenu dès lors que le padding du bloc tarification descend à 10px. */ .ed-page .page-hero-product-premium .partner-empower-card { flex-direction: row !important; align-items: center !important; gap: 10px !important; padding: 8px 14px !important; margin-top: 0 !important; } .ed-page .page-hero-product-premium .partner-empower-card img { width: auto !important; height: 22px !important; flex-shrink: 0 !important; } .ed-page .page-hero-product-premium .partner-empower-card strong { font-size: 0.76rem !important; line-height: 1.3 !important; } .ed-page .page-hero-product-premium .partner-empower-card span { font-size: 0.62rem !important; line-height: 1.3 !important; display: -webkit-box !important; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden !important; } /* ---- Carte image : cadre resserré, l'image prend le reste ---- La colonne image reçoit la hauteur du gabarit en dur, et non un `height: 100%` calé sur une rangée auto : sans hauteur définie, le `max-height: 100%` de l'image ne se résolvait pas et c'était le visuel source (1290px de côté pour le R7) qui dictait la hauteur du hero. */ .ed-page .page-hero-product-premium .hero-product-image-wrap { height: var(--pp-hero-stage) !important; } .ed-page .page-hero-product-premium .product-glass-card { height: 100% !important; padding: 16px !important; gap: 12px !important; } .ed-page .page-hero-product-premium .showcase-main-img { min-height: 180px !important; padding: 14px !important; } .ed-page .page-hero-product-premium .showcase-toolbar { top: 10px !important; right: 10px !important; gap: 6px !important; } .ed-page .page-hero-product-premium .showcase-tool-btn { width: 30px !important; height: 30px !important; } .ed-page .page-hero-product-premium .showcase-badge-top { top: 10px !important; left: 10px !important; padding: 2px 8px !important; font-size: 0.6rem !important; /* « TETRA polyvalent », « Portatif premium »… : sans cela, l'étiquette se coupait sur deux lignes dans le coin du cadre. */ white-space: nowrap !important; } .ed-page .page-hero-product-premium .product-gallery-thumbs { gap: 8px !important; } /* .thumb-btn est figée à 85px de haut : 18px de vide au-dessus d'un contenu qui n'en réclame plus que 67. Rendus à la zone d'image. */ .ed-page .page-hero-product-premium .thumb-btn { height: auto !important; padding: 7px 5px !important; gap: 5px !important; } .ed-page .page-hero-product-premium .thumb-btn img { height: 36px !important; } .ed-page .page-hero-product-premium .thumb-btn span { font-size: 0.6rem !important; line-height: 1.2 !important; } } /* -------------------------------------------------------------------------- Desktop étroit (1025–1279px) — le gabarit se resserre plus vite que le texte Le cadre suit la largeur (497px à 1440, 451 à 1100), mais la colonne texte se rétrécit et les intitulés des points forts passent à deux lignes : ~30px de contenu en trop à 1100px. On rend ces pixels sur les deux redites du hero — les valeurs techniques sous chaque point fort (reprises juste en dessous dans « Chiffres clés ») et la seconde ligne du bandeau partenaire — plutôt que sur les intitulés eux-mêmes, qui restent lisibles en entier. -------------------------------------------------------------------------- */ @media (min-width: 1025px) and (max-width: 1279px) { .ed-page .page-hero-product-premium .hero-product-info { gap: 4px !important; } .ed-page .page-hero-product-premium .adv-card-premium span { display: none !important; } .ed-page .page-hero-product-premium .partner-empower-card span { -webkit-line-clamp: 1; } .ed-page .page-hero-product-premium .product-buy-box-premium { padding: 8px 12px !important; } } /* ========================================================================== FICHES PRODUIT — CARTES : ICÔNE ET TITRE SUR UNE MÊME LIGNE Trois familles de cartes empilaient la pastille au-dessus du titre (« Pourquoi commander », « sur le terrain », points forts du hero), chacune avec sa propre taille de pastille : 60px arrondie et dégradée pour l'une, 38px cercle bleu pour l'autre, masquée pour la troisième. L'icône passe à gauche du titre, sur sa ligne, dans un carré de 34px à filet fin — le même langage que le reste des pages en mode éditorial : angles vifs, fond papier, encre orange, pas d'ombre ni de dégradé. Le HTML n'est pas touché : les cartes (icône, titre, paragraphe) passent en grille deux colonnes, l'icône et le titre occupent la première rangée, le paragraphe la seconde sur toute la largeur. Portée : .ed-page.product-premium-page, c'est-à-dire les 25 fiches produit — et la spécificité nécessaire pour repasser devant les règles du hero compacté ci-dessus. ========================================================================== */ /* ---- Gabarit commun des pastilles ---- */ .ed-page.product-premium-page .why-choose-icon, .ed-page.shop-page .why-choose-icon, .ed-page.product-premium-page .spec-group-icon, .ed-page.shop-page .spec-group-icon, .ed-page.product-premium-page .adv-card-icon, .ed-page.shop-page .adv-card-icon { display: flex !important; flex: 0 0 auto !important; width: 34px !important; height: 34px !important; margin: 0 !important; padding: 0 !important; border: 1px solid var(--hair) !important; border-radius: 0 !important; background: var(--paper) !important; color: var(--orange-dark) !important; box-shadow: none !important; } .ed-page.product-premium-page .why-choose-icon svg, .ed-page.shop-page .why-choose-icon svg, .ed-page.product-premium-page .spec-group-icon svg, .ed-page.shop-page .spec-group-icon svg, .ed-page.product-premium-page .adv-card-icon svg, .ed-page.shop-page .adv-card-icon svg { width: 17px !important; height: 17px !important; } /* ---- « Pourquoi commander… » ---- */ .ed-page.product-premium-page .why-choose-card, .ed-page.shop-page .why-choose-card { display: grid !important; grid-template-columns: auto minmax(0, 1fr) !important; align-items: center !important; gap: 12px 14px !important; padding: 24px 22px !important; } .ed-page.product-premium-page .why-choose-card > .why-choose-icon, .ed-page.shop-page .why-choose-card > .why-choose-icon { grid-area: 1 / 1 / 2 / 2; } .ed-page.product-premium-page .why-choose-card > h3, .ed-page.shop-page .why-choose-card > h3 { grid-area: 1 / 2 / 2 / 3; margin: 0 !important; font-size: 1.05rem !important; line-height: 1.25 !important; letter-spacing: -0.01em !important; } .ed-page.product-premium-page .why-choose-card > p, .ed-page.shop-page .why-choose-card > p { grid-area: 2 / 1 / 3 / 3; margin: 0 !important; } /* ---- « … sur le terrain » (contexte → enjeu → réponse → résultat) ---- La pastille numérotée joue le rôle d'icône : même carré, mais chiffre en monospace sur fond encre, orange pour la réponse Motorola et vert pour le résultat — les couleurs déjà portées par les autres pages. */ .ed-page.product-premium-page .timeline-step-card { display: grid !important; grid-template-columns: auto minmax(0, 1fr) !important; align-items: center !important; gap: 12px 14px !important; padding: 22px 20px !important; } .ed-page.product-premium-page .timeline-step-card > .timeline-step-badge { grid-area: 1 / 1 / 2 / 2; width: 34px !important; height: 34px !important; border-radius: 0 !important; background: var(--ink) !important; color: #fff !important; font-family: var(--mono) !important; font-size: 0.86rem !important; font-weight: 700 !important; box-shadow: none !important; } .ed-page.product-premium-page .timeline-step-badge.is-solution { background: var(--orange) !important; } .ed-page.product-premium-page .timeline-step-badge.is-result { background: var(--green-dark) !important; } .ed-page.product-premium-page .timeline-step-card > h3 { grid-area: 1 / 2 / 2 / 3; margin: 0 !important; font-size: 1.05rem !important; line-height: 1.25 !important; letter-spacing: -0.01em !important; } .ed-page.product-premium-page .timeline-step-card > p { grid-area: 2 / 1 / 3 / 3; margin: 0 !important; } /* ---- Spécifications : l'en-tête était déjà sur une ligne, on l'aligne sur le même gabarit (pastille 34px, filet fin sous l'en-tête) ---- */ .ed-page.product-premium-page .spec-group-header { gap: 12px !important; padding-bottom: 14px !important; border-bottom: 1px solid var(--hair) !important; } .ed-page.product-premium-page .spec-group-header h3 { margin: 0 !important; font-size: 1.05rem !important; line-height: 1.25 !important; letter-spacing: -0.01em !important; } /* ---- Points forts du hero : la pastille était masquée ---- */ .ed-page.product-premium-page .adv-card-icon { width: 24px !important; height: 24px !important; } .ed-page.product-premium-page .adv-card-icon svg { width: 13px !important; height: 13px !important; } .ed-page.product-premium-page .adv-card-premium { grid-template-columns: 24px minmax(0, 1fr) !important; column-gap: 9px !important; } .ed-page.product-premium-page .adv-card-premium > .adv-card-icon { grid-column: 1 !important; grid-row: 1 !important; align-self: center !important; } .ed-page.product-premium-page .adv-card-premium strong, .ed-page.product-premium-page .adv-card-premium span { grid-column: 2 !important; } /* ========================================================================== FICHES PRODUIT — LES CARTES REPRENNENT LE LANGAGE DE L'ACCUEIL Les cartes restaient celles du thème « premium » d'origine : boîte à quatre bords arrondie, ombre portée, soulèvement au survol, pastille en dégradé bleu. C'est exactement la signature que la refonte éditoriale a écartée ailleurs sur le site. Ce qu'elles deviennent, en écho à la table des matières de l'accueil (.ed-row) et aux listes à filets des pôles (.zp-points) : · plus de boîte : un filet d'en-tête de 2px en encre, comme la tranche d'une fiche cartonnée ; · un segment orange de 30px posé sur ce filet, qui court sur toute la largeur de la carte au survol — un repère qui se déplace sur un plan, au lieu d'une ombre qui grossit ; · un compteur monospace 01…04, repris de l'index de l'accueil ; · la pastille d'icône s'inverse au survol (fond encre, glyphe orange) ; · aucun soulèvement, aucune ombre, aucun dégradé, aucun arrondi. ========================================================================== */ .ed-page.product-premium-page .why-choose-grid, .ed-page.shop-page .why-choose-grid, .ed-page.product-premium-page .timeline-steps-grid, .ed-page.shop-page .timeline-steps-grid, .ed-page.product-premium-page .specs-cards-grid, .ed-page.shop-page .specs-cards-grid { counter-reset: pp-card; } .ed-page.product-premium-page .why-choose-card, .ed-page.shop-page .why-choose-card, .ed-page.product-premium-page .timeline-step-card, .ed-page.shop-page .timeline-step-card, .ed-page.product-premium-page .spec-group-card, .ed-page.shop-page .spec-group-card { position: relative !important; border: 0 !important; border-top: 2px solid var(--ink) !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; counter-increment: pp-card; transition: none !important; } /* Le segment de couleur posé sur le filet d'en-tête */ .ed-page.product-premium-page .why-choose-card::before, .ed-page.shop-page .why-choose-card::before, .ed-page.product-premium-page .timeline-step-card::before, .ed-page.shop-page .timeline-step-card::before, .ed-page.product-premium-page .spec-group-card::before, .ed-page.shop-page .spec-group-card::before { content: ""; position: absolute; top: -2px; left: 0; width: 30px; height: 2px; background: var(--orange); transition: width 0.45s cubic-bezier(0.4, 0, 0.2, 1); } .ed-page.product-premium-page .why-choose-card:hover::before, .ed-page.shop-page .why-choose-card:hover::before, .ed-page.product-premium-page .timeline-step-card:hover::before, .ed-page.shop-page .timeline-step-card:hover::before, .ed-page.product-premium-page .spec-group-card:hover::before, .ed-page.shop-page .spec-group-card:hover::before { width: 100%; } /* Ni soulèvement, ni ombre, ni filet bleu au survol */ .ed-page.product-premium-page .why-choose-card:hover, .ed-page.shop-page .why-choose-card:hover, .ed-page.product-premium-page .timeline-step-card:hover, .ed-page.shop-page .timeline-step-card:hover, .ed-page.product-premium-page .spec-group-card:hover, .ed-page.shop-page .spec-group-card:hover { transform: none !important; box-shadow: none !important; background: transparent !important; border-top-color: var(--ink) !important; } /* Compteur monospace, aligné sur le filet */ .ed-page.product-premium-page .why-choose-card::after, .ed-page.shop-page .why-choose-card::after, .ed-page.product-premium-page .spec-group-card::after, .ed-page.shop-page .spec-group-card::after { content: counter(pp-card, decimal-leading-zero); position: absolute; top: 14px; right: 0; font-family: var(--mono); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.1em; color: var(--text-light); } /* La pastille s'inverse au survol de la carte */ .ed-page.product-premium-page .why-choose-icon, .ed-page.shop-page .why-choose-icon, .ed-page.product-premium-page .spec-group-icon, .ed-page.shop-page .spec-group-icon, .ed-page.product-premium-page .adv-card-icon, .ed-page.shop-page .adv-card-icon { border-color: var(--ink) !important; background: transparent !important; color: var(--orange-dark) !important; transition: background 0.25s ease, color 0.25s ease !important; } .ed-page.product-premium-page .why-choose-card:hover .why-choose-icon, .ed-page.shop-page .why-choose-card:hover .why-choose-icon, .ed-page.product-premium-page .spec-group-card:hover .spec-group-icon, .ed-page.shop-page .spec-group-card:hover .spec-group-icon, .ed-page.product-premium-page .adv-card-premium:hover .adv-card-icon, .ed-page.shop-page .adv-card-premium:hover .adv-card-icon { background: var(--ink) !important; color: var(--orange) !important; } /* Respiration des cartes sans bord latéral : le texte s'aligne sur le filet */ .ed-page.product-premium-page .why-choose-card, .ed-page.shop-page .why-choose-card { padding: 18px 0 22px !important; } .ed-page.product-premium-page .timeline-step-card, .ed-page.shop-page .timeline-step-card { padding: 18px 0 22px !important; } .ed-page.product-premium-page .spec-group-card, .ed-page.shop-page .spec-group-card { padding: 18px 0 6px !important; gap: 14px !important; } .ed-page.product-premium-page .why-choose-card > h3, .ed-page.shop-page .why-choose-card > h3, .ed-page.product-premium-page .timeline-step-card > h3, .ed-page.shop-page .timeline-step-card > h3 { padding-right: 28px !important; /* on laisse la place au compteur */ } .ed-page.product-premium-page .why-choose-card > p, .ed-page.shop-page .why-choose-card > p, .ed-page.product-premium-page .timeline-step-card > p, .ed-page.shop-page .timeline-step-card > p { font-size: 0.9rem !important; line-height: 1.6 !important; color: var(--text-muted) !important; } /* La réassurance de la boutique n'a que 3 cartes, les fiches en ont 4 : même gabarit de carte, seule la grille s'ajuste au nombre. */ .ed-page.shop-page .trust-section .why-choose-grid { grid-template-columns: repeat(3, 1fr); } @media (max-width: 1024px) { .ed-page.shop-page .trust-section .why-choose-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .ed-page.shop-page .trust-section .why-choose-grid { grid-template-columns: 1fr; } } /* ========================================================================== HERO FICHE PRODUIT — RESPIRATION Le bloc était compact : la colonne empilait fil d'Ariane, surtitre, badges, titre et carte de devis avec le même écart minimal de 8px, et la carte de devis serrait son contenu dans 16px de marge intérieure. On desserre par paliers (8 → 16 → 24) pour créer une hiérarchie plutôt qu'un empilement. ⚠️ Le padding haut du hero est calibré sur la navbar (89px) : à recaler si la hauteur de la navbar change. ========================================================================== */ .ed-page.product-premium-page .page-hero-product-premium { padding-top: 150px !important; padding-bottom: 100px !important; } /* Rythme de la colonne de texte */ .ed-page.product-premium-page .hero-product-info { gap: 16px !important; } .ed-page.product-premium-page .hero-breadcrumb { margin-bottom: 14px !important; } .ed-page.product-premium-page .hero-badges-row { margin-top: 6px !important; gap: 10px !important; } .ed-page.product-premium-page .hero-badge { padding: 5px 11px !important; } .ed-page.product-premium-page .hero-product-info > h1 { margin-top: 40px !important; } .ed-page.product-premium-page .hero-product-desc { margin-top: 4px !important; } /* Carte « Prix sur devis » : de l'air autour du prix et du bouton */ .ed-page.product-premium-page .product-detail-info-premium { margin-top: 56px !important; } .ed-page.product-premium-page .product-purchase-premium { gap: 16px !important; } .ed-page.product-premium-page .product-buy-box-premium { padding: 24px 26px !important; gap: 18px 20px !important; } .ed-page.product-premium-page .buy-box-title { gap: 5px !important; } .ed-page.product-premium-page .buy-box-reassurance { padding-top: 14px !important; } .ed-page.product-premium-page .partner-empower-card { padding: 15px 18px !important; } /* Les deux colonnes doivent rester à la même hauteur. La colonne image avait une hauteur FIXE (--pp-hero-stage) : tant que la colonne texte tombait par hasard sur la même valeur, l'alignement était bon. L'aération ci-dessus a rompu la coïncidence. On la laisse donc suivre la rangée, en conservant le garde-fou d'origine : la zone d'image devient compressible (flex-basis 0 + min-height 0) pour ne plus pouvoir dicter la hauteur du hero avec ses 1200px de source. */ @media (min-width: 1025px) { .ed-page .page-hero-product-premium .hero-product-image-wrap { height: auto !important; min-height: var(--pp-hero-stage) !important; align-self: stretch !important; } .ed-page .page-hero-product-premium .product-glass-card { height: 100% !important; } .ed-page .page-hero-product-premium .showcase-main-img { flex: 1 1 0 !important; min-height: 0 !important; } .ed-page .page-hero-product-premium .showcase-main-img img { max-height: 100% !important; height: auto !important; object-fit: contain !important; } } @media (max-width: 768px) { .ed-page.product-premium-page .page-hero-product-premium { padding-top: 128px !important; padding-bottom: 68px !important; } .ed-page.product-premium-page .hero-product-info > h1 { margin-top: 28px !important; } .ed-page.product-premium-page .product-detail-info-premium { margin-top: 38px !important; } .ed-page.product-premium-page .product-buy-box-premium { padding: 20px 18px !important; } } /* ---- Spécifications : la liste devient une vraie fiche technique ---- Libellé monospace à gauche, valeur en encre alignée à droite, un filet par ligne : on lit une colonne de valeurs, plus une suite de blocs. */ .ed-page.product-premium-page .spec-group-header { border-bottom: 1px solid var(--ink) !important; padding-bottom: 12px !important; } .ed-page.product-premium-page .spec-list { gap: 0 !important; } .ed-page.product-premium-page .spec-item { display: grid !important; grid-template-columns: minmax(0, auto) minmax(0, 1fr) !important; align-items: baseline !important; gap: 4px 16px !important; padding: 10px 0 !important; background: transparent !important; border-bottom: 1px solid var(--hair) !important; } .ed-page.product-premium-page .spec-item:last-child { border-bottom: 0 !important; } .ed-page.product-premium-page .spec-item-label { font-family: var(--mono) !important; font-size: 0.66rem !important; font-weight: 500 !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; color: var(--text-light) !important; } .ed-page.product-premium-page .spec-item-value { font-size: 0.92rem !important; font-weight: 700 !important; line-height: 1.4 !important; color: var(--ink) !important; text-align: right !important; } /* ========================================================================== FICHES PRODUIT — LA VIDÉO DEVIENT UNE VIGNETTE DU HERO La présentation vidéo occupait une section pleine largeur à elle seule, et son lecteur renvoyait « Erreur 153 » (paramètre `origin` confronté au referrer réel, voir script.js). Elle rejoint la galerie du hero : une 5e vignette qui remplace le contenu du cadre par le lecteur. L'iframe n'est créée qu'au clic — aucun appel à Google avant une action de l'internaute, conformément au parti pris sans cookie du site. La rangée passe donc à 5 colonnes, soit ~64px par vignette sur desktop étroit : les libellés (« Panneau arrière », « Trois-quarts G ») ne tiennent plus sur une ligne. Ils reçoivent une boîte de deux lignes à hauteur figée — lisibles en entier, et la hauteur de la rangée ne dépend pas du libellé, donc le hero reste calé au pixel sur celui de l'accueil. ========================================================================== */ /* Le nombre de vignettes varie d'une fiche à l'autre : 4 quand seule la vue principale et trois angles existent, 6 quand le constructeur publie dessus, dessous et profils, plus une éventuelle vignette vidéo. La rangée reste sur UNE ligne quel qu'en soit le nombre : `flex: 1 1 0` fait des parts égales, et `nowrap` empêche la sixième de tomber à la ligne — ce qui casserait le gabarit du hero. */ .ed-page.product-premium-page .product-gallery-thumbs { display: flex !important; flex-wrap: nowrap !important; justify-content: stretch !important; } .ed-page.product-premium-page .product-gallery-thumbs .thumb-btn { flex: 1 1 0 !important; min-width: 0 !important; } .ed-page.product-premium-page .thumb-btn span:not(.thumb-video-mark) { display: -webkit-box !important; -webkit-box-orient: vertical; -webkit-line-clamp: 2; height: 2.4em !important; max-width: 100% !important; line-height: 1.2 !important; overflow: hidden !important; overflow-wrap: break-word !important; } /* Vignette vidéo : le visuel produit passe en fond discret, la marque de lecture prend le dessus — on ne charge aucune miniature YouTube. */ .ed-page.product-premium-page .thumb-btn.is-video { position: relative !important; } .ed-page.product-premium-page .thumb-btn.is-video > img { opacity: 0.28 !important; filter: grayscale(1) !important; } .ed-page.product-premium-page .thumb-video-mark { position: absolute !important; top: 7px !important; left: 50% !important; transform: translateX(-50%) !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 26px !important; height: 26px !important; border: 1px solid var(--ink) !important; background: var(--bg-white) !important; color: var(--orange-dark) !important; } .ed-page.product-premium-page .thumb-btn.is-video:hover .thumb-video-mark, .ed-page.product-premium-page .thumb-btn.is-video.active .thumb-video-mark { background: var(--ink) !important; color: var(--orange) !important; } /* Le lecteur occupe le cadre — dimensions déjà fixées par le gabarit du hero */ .ed-page.product-premium-page .showcase-main-img.is-video-active { padding: 0 !important; background: var(--ink) !important; cursor: default !important; } .ed-page.product-premium-page .showcase-main-img.is-video-active .showcase-toolbar, .ed-page.product-premium-page .showcase-main-img.is-video-active .showcase-badge-top, .ed-page.product-premium-page .showcase-main-img.is-video-active .btn-expand-hd { display: none !important; } .ed-page.product-premium-page .showcase-video { position: absolute; inset: 0; display: flex; flex-direction: column; } .ed-page.product-premium-page .showcase-video iframe { flex: 1 1 auto; width: 100%; height: 100%; border: 0; display: block; } /* Filet de secours : si le propriétaire de la vidéo interdit la lecture embarquée, l'internaute a toujours une sortie. */ .ed-page.product-premium-page .showcase-video-out { flex: 0 0 auto; padding: 6px 10px; border-top: 1px solid rgba(255, 255, 255, 0.16); font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; text-align: center; color: rgba(255, 255, 255, 0.72); text-decoration: none; } .ed-page.product-premium-page .showcase-video-out:hover { color: var(--orange); } /* ========================================================================== FICHES PRODUIT — « PRODUITS SIMILAIRES & COMPLÉMENTAIRES » Dernière famille de cartes restée au thème d'origine : boîte arrondie et ombrée, catégorie et titre en bleu, pilules arrondies, rond d'action, et un soulèvement de 8px au survol. Elle rejoint le système des autres cartes — filet d'en-tête en encre, segment orange qui court au survol, libellés monospace, carrés au lieu de ronds — en gardant ce qui sert la carte : le visuel produit sur fond papier et son léger zoom au survol. ========================================================================== */ .ed-page.product-premium-page .related-grid-premium { counter-reset: pp-card; gap: 26px 28px !important; } .ed-page.product-premium-page .related-card-premium { position: relative !important; border: 0 !important; border-top: 2px solid var(--ink) !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; padding: 18px 0 0 !important; gap: 12px !important; overflow: visible !important; counter-increment: pp-card; transition: none !important; } .ed-page.product-premium-page .related-card-premium::before { content: ""; position: absolute; top: -2px; left: 0; width: 30px; height: 2px; background: var(--orange); transition: width 0.45s cubic-bezier(0.4, 0, 0.2, 1); } .ed-page.product-premium-page .related-card-premium:hover::before { width: 100%; } .ed-page.product-premium-page .related-card-premium:hover { transform: none !important; box-shadow: none !important; border-top-color: var(--ink) !important; } /* Cadre visuel : fond papier, filet fin, angles vifs */ .ed-page.product-premium-page .related-card-img-wrap { height: 190px !important; border: 1px solid var(--hair) !important; border-radius: 0 !important; background: var(--paper) !important; padding: 16px !important; } .ed-page.product-premium-page .related-card-img-wrap img { max-height: 150px !important; } /* La marque « Motorola Solutions » : étiquette technique, plus une pilule */ .ed-page.product-premium-page .related-card-badge-top { top: 0 !important; left: 0 !important; padding: 3px 9px !important; border: 0 !important; border-right: 1px solid var(--hair) !important; border-bottom: 1px solid var(--hair) !important; border-radius: 0 !important; background: var(--bg-white) !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; font-family: var(--mono) !important; font-size: 0.58rem !important; font-weight: 600 !important; letter-spacing: 0.1em !important; text-transform: uppercase !important; color: var(--text-muted) !important; } .ed-page.product-premium-page .related-card-cat { font-family: var(--mono) !important; font-size: 0.62rem !important; font-weight: 500 !important; letter-spacing: 0.12em !important; color: var(--text-light) !important; } .ed-page.product-premium-page .related-card-premium h3 { font-size: 1.08rem !important; line-height: 1.25 !important; letter-spacing: -0.01em !important; color: var(--ink) !important; } .ed-page.product-premium-page .related-card-premium:hover h3 { color: var(--orange-dark) !important; } .ed-page.product-premium-page .related-card-tagline { font-size: 0.85rem !important; line-height: 1.5 !important; color: var(--text-muted) !important; } /* Pied : libellé monospace à gauche, carré fléché à droite */ .ed-page.product-premium-page .related-card-footer { padding-top: 12px !important; border-top: 1px solid var(--hair) !important; } .ed-page.product-premium-page .related-card-spec-pill { padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; font-family: var(--mono) !important; font-size: 0.62rem !important; font-weight: 500 !important; letter-spacing: 0.1em !important; text-transform: uppercase !important; color: var(--text-muted) !important; } .ed-page.product-premium-page .related-card-spec-pill svg { color: var(--orange-dark) !important; } /* La flèche du pied de carte disparaît : la carte entière est déjà un lien, et « Gamme Officielle » redevient un badge cadré — c'est lui qui porte l'information, pas le chevron. */ .ed-page.product-premium-page .related-card-action-circle { display: none !important; } .ed-page.product-premium-page .related-card-spec-pill { padding: 4px 10px !important; border: 1px solid var(--hair) !important; background: var(--paper) !important; color: var(--ink) !important; gap: 7px !important; transition: border-color 0.25s ease, background 0.25s ease !important; } .ed-page.product-premium-page .related-card-premium:hover .related-card-spec-pill { border-color: var(--ink) !important; background: var(--bg-white) !important; } /* ========================================================================== BANDEAU PARTENAIRE — UNE LIGNE PAR TEXTE Le logo est un lockup horizontal (ratio ~10:1) : 198px de large pour 20px de haut, soit la moitié des ~520px de la bande. Tant qu'il restait à gauche du texte, il ne laissait que 291px — l'intitulé du partenariat n'y tenait même pas sur une ligne. Il passe donc au-dessus, et le texte occupe toute la largeur : ligne 1 — le logo ligne 2 — Distributeur et Partenaire Agréé Motorola Solutions ligne 3 — Équipements d'origine certifiée · Garantie complète… · SAV… Les hauteurs sont bornées (1 ligne pour l'intitulé, 2 au maximum pour les garanties) : la bande garde une hauteur constante, donc le hero reste calé au pixel sur celui de l'accueil. font-size sur le conteneur : sans lui, la hauteur de ligne se calait sur les 16px hérités et chaque ligne pesait 21px au lieu de 16. ========================================================================== */ .ed-page.product-premium-page .partner-empower-card { flex-direction: column !important; align-items: flex-start !important; gap: 6px !important; } .ed-page.product-premium-page .partner-empower-card img { height: 20px !important; width: auto !important; } .ed-page.product-premium-page .partner-empower-card > div { display: block !important; width: 100% !important; min-width: 0 !important; font-size: 0.76rem !important; line-height: 1.35 !important; overflow: hidden !important; } .ed-page.product-premium-page .partner-empower-card strong { display: block !important; font-size: 1em !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } .ed-page.product-premium-page .partner-empower-card span { display: block !important; font-size: 0.82em !important; max-height: 2.75em !important; -webkit-line-clamp: unset; overflow: hidden !important; } /* Desktop étroit : la ligne des garanties coûte ~14px que la colonne n'a pas. Elle est payée par la ligne de réassurance du bloc tarification juste au-dessus (« Garantie constructeur Motorola Solutions & assistance technique »), qui dit la même chose — et par 1px sur chaque interligne de la colonne. */ @media (min-width: 1025px) and (max-width: 1279px) { .ed-page .page-hero-product-premium .hero-product-info { gap: 3px !important; } .ed-page.product-premium-page .page-hero-product-premium .buy-box-reassurance { display: none !important; } } /* ========================================================================== BANDE « POINTS FORTS & AVANTAGES » — SORTIE DU HERO Le hero portait huit blocs dans les ~500px de contenu où celui de l'accueil n'en met que quatre : d'où sa densité. Les points forts occupent désormais une bande à eux, juste sous le hero, en quatre colonnes — le même langage que les autres cartes de la fiche (filet d'encre, segment orange au survol, icône et titre sur une ligne). Ils y gagnent la place que le hero leur refusait, et ils portent l'ancre #overview du lien « Aperçu » de la sous-navigation, qui ne pointait sur rien. ========================================================================== */ .ed-page.product-premium-page .pp-highlights { padding: clamp(44px, 5vw, 72px) 0 clamp(36px, 4vw, 56px); background: var(--bg-white); border-bottom: 1px solid var(--hair); } .ed-page.product-premium-page .pp-highlights .info-header { display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 6px !important; margin-bottom: clamp(24px, 3vw, 38px) !important; padding-bottom: 0 !important; border-bottom: 0 !important; } /* Pastille « Spécifications Clés » : le langage de la refonte n'a pas de pilules — le titre suffit. */ .ed-page.product-premium-page .pp-highlights .info-header .hero-badge { display: none !important; } .ed-page.product-premium-page .pp-highlights .info-header h2 { margin: 0 !important; font-size: clamp(1.5rem, 2.6vw, 2.1rem) !important; font-weight: 800 !important; line-height: 1.15 !important; letter-spacing: -0.02em !important; color: var(--ink) !important; text-transform: none !important; font-family: inherit !important; } .ed-page.product-premium-page .pp-highlights .info-header p { margin: 0 !important; max-width: 60ch !important; font-size: 0.98rem !important; line-height: 1.6 !important; color: var(--text-muted) !important; text-transform: none !important; letter-spacing: 0 !important; font-family: inherit !important; text-align: left !important; } /* Quatre colonnes, chacune bâtie comme les autres cartes de la page */ .ed-page.product-premium-page .pp-highlights .adv-cards-grid { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 26px 28px !important; margin: 0 !important; counter-reset: pp-card; } .ed-page.product-premium-page .pp-highlights .adv-card-premium { position: relative !important; display: grid !important; grid-template-columns: auto minmax(0, 1fr) !important; align-items: center !important; gap: 12px 14px !important; padding: 18px 0 0 !important; border: 0 !important; border-top: 2px solid var(--ink) !important; background: transparent !important; box-shadow: none !important; counter-increment: pp-card; transition: none !important; } .ed-page.product-premium-page .pp-highlights .adv-card-premium::before { content: "" !important; position: absolute; top: -2px; left: 0; width: 30px; height: 2px; background: var(--orange); transition: width 0.45s cubic-bezier(0.4, 0, 0.2, 1); } .ed-page.product-premium-page .pp-highlights .adv-card-premium:hover::before { width: 100%; } .ed-page.product-premium-page .pp-highlights .adv-card-premium:hover { padding-left: 0 !important; padding-right: 0 !important; background: transparent !important; color: var(--ink) !important; } .ed-page.product-premium-page .pp-highlights .adv-card-icon { grid-area: 1 / 1 / 2 / 2; width: 34px !important; height: 34px !important; } .ed-page.product-premium-page .pp-highlights .adv-card-icon svg { width: 17px !important; height: 17px !important; } .ed-page.product-premium-page .pp-highlights .adv-card-premium strong { grid-area: 1 / 2 / 2 / 3; font-size: 1rem !important; font-weight: 700 !important; line-height: 1.3 !important; letter-spacing: -0.01em !important; color: var(--ink) !important; /* Plus de borne à deux lignes : la place ne manque plus. */ display: block !important; overflow: visible !important; } .ed-page.product-premium-page .pp-highlights .adv-card-premium span { grid-area: 2 / 1 / 3 / 3; display: block !important; overflow: visible !important; font-family: var(--mono) !important; font-size: 0.68rem !important; letter-spacing: 0.1em !important; line-height: 1.4 !important; text-transform: uppercase !important; color: var(--text-muted) !important; } @media (max-width: 1024px) { .ed-page.product-premium-page .pp-highlights .adv-cards-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } @media (max-width: 640px) { .ed-page.product-premium-page .pp-highlights .adv-cards-grid { grid-template-columns: minmax(0, 1fr) !important; } } /* ========================================================================== VISIONNEUSE PLEIN ÉCRAN — FINITION ÉDITORIALE La réparation structurelle est dans css/05 (grille à trois rangées, contraste des boutons et des pastilles). Ici, le langage des fiches : fond d'encre sans flou, panneau cadré d'un filet, pastilles monospace, accent orange sur la vue active. La marque « lecture » repasse en ligne : dans la pastille, elle n'a plus de raison de flotter au-dessus de la miniature. ========================================================================== */ .ed-page.product-premium-page .eq-modal-backdrop { background: rgba(12, 14, 18, 0.95) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } .ed-page.product-premium-page .eq-modal-content { border: 1px solid var(--ink) !important; box-shadow: none !important; } .ed-page.product-premium-page .eq-modal-actions { border-bottom-color: var(--hair) !important; } .ed-page.product-premium-page .eq-btn-tool { border-color: var(--hair) !important; color: var(--ink) !important; } .ed-page.product-premium-page .eq-btn-tool:hover { background: var(--ink) !important; border-color: var(--ink) !important; color: var(--orange) !important; } .ed-page.product-premium-page .eq-btn-close { background: var(--ink) !important; border-color: var(--ink) !important; } .ed-page.product-premium-page .eq-btn-close:hover { background: var(--orange) !important; border-color: var(--orange) !important; } .ed-page.product-premium-page .eq-modal-thumbs-wrapper { background: var(--paper) !important; border-top-color: var(--hair) !important; } .ed-page.product-premium-page .eq-thumb-pill { border-width: 1px !important; border-color: var(--hair) !important; background: var(--bg-white) !important; font-family: var(--mono) !important; font-size: 0.62rem !important; font-weight: 500 !important; letter-spacing: 0.1em !important; text-transform: uppercase !important; color: var(--text-muted) !important; } .ed-page.product-premium-page .eq-thumb-pill:hover { border-color: var(--ink) !important; color: var(--ink) !important; } .ed-page.product-premium-page .eq-thumb-pill.active { border-color: var(--orange) !important; color: var(--ink) !important; } .ed-page.product-premium-page .eq-thumb-pill .thumb-video-mark { position: static !important; transform: none !important; width: 24px !important; height: 24px !important; border: 1px solid var(--hair) !important; color: var(--orange-dark) !important; } /* ========================================================================== FICHES PRODUIT — PLUS AUCUN ARRONDI Il restait des angles arrondis venus du thème « premium » : le bloc tarification (16px), le bandeau partenaire (12px), le sélecteur de quantité et son champ (8px), le bouton « Plein écran » (pilule), la miniature de PDF (4px), la visionneuse (24px et ses boutons), les points d'état (cercles). Un balayage vaut mieux que dix règles : tout ce que porte la fiche passe en angles vifs, pseudo-éléments compris. La navbar et le pied de page en sont exclus volontairement : ils sont partagés avec les autres pages du site, les aplatir ici seulement créerait une rupture d'une page à l'autre. ========================================================================== */ .ed-page.product-premium-page .product-sticky-subnav, .ed-page.product-premium-page .product-sticky-subnav *, .ed-page.product-premium-page .product-sticky-subnav *::before, .ed-page.product-premium-page .product-sticky-subnav *::after, .ed-page.product-premium-page .page-hero-product-premium, .ed-page.product-premium-page .page-hero-product-premium *, .ed-page.product-premium-page .page-hero-product-premium *::before, .ed-page.product-premium-page .page-hero-product-premium *::after, .ed-page.product-premium-page main, .ed-page.product-premium-page main *, .ed-page.product-premium-page main *::before, .ed-page.product-premium-page main *::after, .ed-page.product-premium-page .eq-modal, .ed-page.product-premium-page .eq-modal *, .ed-page.product-premium-page .eq-modal *::before, .ed-page.product-premium-page .eq-modal *::after { border-radius: 0 !important; } /* Espacer les pr�sentations (R7, R2) qui n'ont pas de points forts */ .ed-page .page-hero-product-premium .hero-product-info.hero-info-airy { gap: 32px !important; justify-content: flex-start; } .ed-page .page-hero-product-premium .hero-product-info.hero-info-airy > h1, .ed-page .page-hero-product-premium .hero-product-info.hero-info-airy .product-detail-info-premium { margin-top: 0 !important; } .ed-page .page-hero-product-premium .hero-product-info.hero-info-airy .product-detail-info-premium { margin-top: auto !important; } .ed-page .page-hero-product-premium .hero-product-info.hero-info-airy .hero-product-motto, .ed-page .page-hero-product-premium .hero-product-info.hero-info-airy .hero-product-desc { font-size: 1.15em; /* Lacher un peu la typo */ line-height: 1.6; }