/* ============================================================ Polices, servies depuis nos serveurs Le site chargeait Lato, Oswald et Open Sans depuis fonts.googleapis.com. Chaque visite transmettait alors l'adresse IP du visiteur a Google, sans son consentement et sans qu'il en soit informe. Le tribunal regional de Munich l'a juge illicite le 20 janvier 2022 (Az. 3 O 17493/20) et la CNIL tient la meme position. Les fichiers sont donc rapatries dans site/polices/ et servis depuis /polices/ : plus aucune requete ne part vers un domaine tiers. Deux sous-ensembles par graisse, ceux que Google servait deja : `latin` couvre le francais entier (accents, oe, euro), `latin-ext` prend le relais sur les noms etrangers. Le navigateur ne telecharge que ce dont la page a besoin, grace a `unicode-range`. Oswald est une police variable : Google renvoyait le meme fichier pour 300, 400 et 500 (empreintes MD5 identiques). Un seul fichier est donc stocke, et les trois declarations le pointent. Le navigateur ne le telecharge qu'une fois et fixe l'axe de graisse sur la valeur declaree. `font-display: swap` partout : le texte s'affiche tout de suite dans la police de secours, puis bascule. Jamais de page blanche en attendant. ============================================================ */ @font-face { font-family: "Lato"; font-style: normal; font-weight: 300; font-display: swap; src: url("/polices/lato-300.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Lato"; font-style: normal; font-weight: 300; font-display: swap; src: url("/polices/lato-300-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Lato"; font-style: normal; font-weight: 400; font-display: swap; src: url("/polices/lato-400.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Lato"; font-style: normal; font-weight: 400; font-display: swap; src: url("/polices/lato-400-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Lato"; font-style: normal; font-weight: 700; font-display: swap; src: url("/polices/lato-700.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Lato"; font-style: normal; font-weight: 700; font-display: swap; src: url("/polices/lato-700-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Lato"; font-style: normal; font-weight: 900; font-display: swap; src: url("/polices/lato-900.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Lato"; font-style: normal; font-weight: 900; font-display: swap; src: url("/polices/lato-900-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Oswald"; font-style: normal; font-weight: 300; font-display: swap; src: url("/polices/oswald-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; } @font-face { font-family: "Oswald"; font-style: normal; font-weight: 300; font-display: swap; src: url("/polices/oswald-variable-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Oswald"; font-style: normal; font-weight: 400; font-display: swap; src: url("/polices/oswald-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; } @font-face { font-family: "Oswald"; font-style: normal; font-weight: 400; font-display: swap; src: url("/polices/oswald-variable-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Oswald"; font-style: normal; font-weight: 500; font-display: swap; src: url("/polices/oswald-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; } @font-face { font-family: "Oswald"; font-style: normal; font-weight: 500; font-display: swap; src: url("/polices/oswald-variable-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* Open Sans ne sert qu'a deux regles, le titre et la legende du slider, en graisse 300. Les graisses 400 et 600 etaient demandees a Google sans etre jamais utilisees : elles ne sont pas rapatriees. */ @font-face { font-family: "Open Sans"; font-style: normal; font-weight: 300; font-display: swap; src: url("/polices/open-sans-300.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Open Sans"; font-style: normal; font-weight: 300; font-display: swap; src: url("/polices/open-sans-300-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } :root { --magenta: #E6007E; --magenta-fonce: #B80065; --anthracite: #35373E; --gris-menu: #6E7079; --fond: #FFFFFF; --fond-alt: #F6F4F5; --surface: #FFFFFF; --bordure: #E4E0E2; --texte: #35373E; --texte-doux: #6E7079; --texte-leger: #9B9DA6; --ombre: 0 1px 2px rgba(53,55,62,.06), 0 8px 24px rgba(53,55,62,.08); --titre: "Oswald", "Arial Narrow", system-ui, sans-serif; --corps: "Lato", "Open Sans", -apple-system, "Segoe UI", Roboto, Arial, sans-serif; /* Largeur utile du site : la meme que le theme d'origine, mesuree dans sa feuille de style (max-width: 1200px). C'est elle qui donne la colonne centrale et les marges gauche et droite. Elle etait passee a 1600px pour supprimer les marges, ce qui s'eloignait du design. Mesure faite dans le navigateur sur le site en ligne, en 1440 et en 1680 px de fenetre : `.mpcth-header-wrap`, `.mpcth-footer-wrap` et le bandeau de menu font 1200 px, centres, quelle que soit la fenetre. Le texte d'une page editoriale (/page/cgv/) court de 260 a 1420 px en 1680, soit 1160 px : c'est 1200 moins les 20 px de marge interne de part et d'autre. `.contenu` reproduit exactement cela. Aucun contenu de page ne doit sortir de ce conteneur : c'est lui, et lui seul, qui cale le contenu sur la barre de menu. Le back-office (apps/admin) a sa propre feuille de style et n'est pas concerne. */ --large: 1200px; /* Gouttiere de la fiche produit. Mesuree sur https://www.pixelprint.fr/produit/bachepvc/ : la colonne image et la colonne resume font 600 px chacune (les deux moities de 1200), chacune avec 20 px de marge interne, donc 560 px de contenu utile separes par 40 px de vide. */ --gouttiere: 40px; } @media (prefers-color-scheme: dark) { :root { --fond: #17181C; --fond-alt: #1E1F25; --surface: #212229; --bordure: #33343D; --texte: #EDEBEE; --texte-doux: #9C9DA7; --texte-leger: #7C7E88; --ombre: 0 1px 2px rgba(0,0,0,.45), 0 8px 24px rgba(0,0,0,.35); } } :root[data-theme="dark"] { --fond: #17181C; --fond-alt: #1E1F25; --surface: #212229; --bordure: #33343D; --texte: #EDEBEE; --texte-doux: #9C9DA7; --texte-leger: #7C7E88; --ombre: 0 1px 2px rgba(0,0,0,.45), 0 8px 24px rgba(0,0,0,.35); } :root[data-theme="light"] { --fond: #FFFFFF; --fond-alt: #F6F4F5; --surface: #FFFFFF; --bordure: #E4E0E2; --texte: #35373E; --texte-doux: #6E7079; --texte-leger: #9B9DA6; --ombre: 0 1px 2px rgba(53,55,62,.06), 0 8px 24px rgba(53,55,62,.08); } * { box-sizing: border-box; } /* Echelle du site. Releve dans le theme du site en ligne (wp-content/themes/blaszok) : html, body font-size: 12px, line-height: 1.5em #mpcth_mega_menu .widget font-size: 1em, donc 12px ...ul.menu > li > a padding: 2em .3em 1.5em (en-tete colle en haut) padding: 1em .3em Le seul 14px du menu est celui des icones FontAwesome, pas du texte. Le notre etait a 16px / 1.6, soit un tiers plus gros a chaque niveau : c'est ce que le client voit quand il dit que sa typo est plus compacte. On ne descend pas la racine a 12px pour autant. Toute la feuille est ecrite en rem : passer la racine de 16 a 12 retirerait un quart a chaque taille, partout, y compris la ou le rendu n'a rien a se reprocher. On reduit l'echelle de 6 %, on adopte l'interlignage du client, et on cale le menu principal sur ses 12px exacts (voir `.a-menu > a`). Les valeurs en pixels (nuage du pied, vignettes) ne bougent pas : elles sont mesurees sur le site en ligne. */ html { font-size: 15px; } body { margin: 0; background: var(--fond); color: var(--texte); font-family: var(--corps); font-size: 1rem; line-height: 1.5; -webkit-font-smoothing: antialiased; } .contenu { width: 100%; max-width: var(--large); margin-inline: auto; padding: 0 20px; } /* ============ Barre superieure, comme le site ============ */ .barre-haute { background: #4A4C55; color: #C9CAD0; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; } .barre-haute .contenu { display: flex; align-items: center; gap: .95rem; flex-wrap: wrap; padding: .4rem 0; } .barre-haute a { color: #C9CAD0; text-decoration: none; transition: color .15s; } .barre-haute a:hover { color: #fff; } .barre-haute .sep { opacity: .35; } .barre-haute .sociaux { margin-left: auto; display: flex; gap: .8rem; } .barre-haute svg { width: 14px; height: 14px; fill: #C9CAD0; transition: fill .15s; } .barre-haute a:hover svg { fill: #fff; } /* Sous-menus de la barre haute (Boutique, Contactez-nous). Le panneau est clair sur fond sombre, comme chez le client, et deborde de la barre : il lui faut un z-index au-dessus de l'en-tete, qui est a 40. */ .barre-haute .haute-menu { position: relative; display: inline-block; } .haute-deroulant { position: absolute; left: -1.1rem; top: 100%; display: flex; flex-direction: column; min-width: 210px; padding: .5rem 0; margin-top: .5rem; background: #F2F0F1; border: 1px solid #DDD9DB; box-shadow: 0 8px 24px rgba(0,0,0,.18); opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .15s, transform .15s, visibility .15s; z-index: 60; } .haute-menu:hover .haute-deroulant, .haute-menu:focus-within .haute-deroulant { opacity: 1; visibility: visible; transform: none; } .barre-haute .haute-deroulant a { color: #6E7079; padding: .45rem 1.1rem; white-space: nowrap; } .barre-haute .haute-deroulant a:hover, .barre-haute .haute-deroulant a:focus-visible { color: var(--magenta); } /* ============ En-tete : logo d'origine, jamais deforme ============ */ header { background: #FFFFFF; border-bottom: 1px solid #E4E0E2; position: relative; z-index: 40; } /* Hauteur reprise au bandeau du logo : 3,3 rem de marges avant, 2,1 apres. Le logo lui-meme ne change pas de taille. */ .logo { text-align: center; padding: 1.3rem 0 .8rem; } /* Le logo est un lien vers l'accueil. Le ne doit ni souligner l'image ni ajouter la ligne de base d'un element en ligne. */ .logo a { display: inline-block; line-height: 0; text-decoration: none; } .logo a:focus-visible { outline: 3px solid var(--magenta); outline-offset: 4px; } .logo img { display: inline-block; width: clamp(230px, 28vw, 330px); height: auto; max-width: 100%; } /* ============ Navigation + menus deroulants ============ */ .nav-barre { position: relative; } .nav-barre .contenu { display: flex; align-items: center; position: relative; } nav ul.principal { list-style: none; margin: 0 auto; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .1rem; } .a-menu { position: relative; } .a-menu > a { /* .8rem de 15px = 12px : la taille exacte du menu du site en ligne. La hauteur, elle, reste la notre : ses 2em/1,5em de marge verticale font une barre de 54px, la notre en fait 44 et le client la veut compacte. */ display: block; padding: .72rem 1rem; font-family: var(--corps); font-weight: 700; font-size: .8rem; letter-spacing: .05em; text-transform: uppercase; color: #4A4C55; text-decoration: none; border-bottom: 3px solid transparent; transition: color .18s, border-color .18s; white-space: nowrap; } .a-menu > a:hover, .a-menu:focus-within > a { color: var(--magenta); border-bottom-color: var(--magenta); } .a-menu > a .fleche-bas { font-size: .62rem; vertical-align: 2px; opacity: .5; margin-left: .2rem; } .tiret-marque { color: var(--magenta); font-weight: 900; padding: .72rem .3rem; } .deroulant { position: absolute; top: 100%; left: 50%; transform: translate(-50%, 10px); background: #fff; border: 1px solid #E4E0E2; border-top: 3px solid var(--magenta); box-shadow: 0 14px 40px rgba(53,55,62,.16); padding: 1.1rem 1.3rem; min-width: 250px; z-index: 60; opacity: 0; visibility: hidden; transition: opacity .22s ease, transform .22s ease, visibility .22s; text-align: left; } .a-menu:hover .deroulant, .a-menu:focus-within .deroulant { opacity: 1; visibility: visible; transform: translate(-50%, 0); } .deroulant.mega { display: flex; gap: 2.2rem; min-width: 620px; } @media (max-width: 760px) { .deroulant.mega { flex-direction: column; min-width: 250px; gap: 1rem; } } .deroulant h5 { font-family: var(--corps); font-weight: 700; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: #35373E; margin: 0 0 .55rem; padding-bottom: .45rem; border-bottom: 2px solid #E4E0E2; white-space: nowrap; } .deroulant ul { list-style: none; margin: 0; padding: 0; } .deroulant li a { display: block; padding: .3rem 0; font-size: .8rem; letter-spacing: .04em; text-transform: uppercase; color: #6E7079; text-decoration: none; white-space: nowrap; transition: color .15s, padding-left .15s; } .deroulant li a::before { content: "› "; color: var(--magenta); } .deroulant li a:hover { color: var(--magenta); padding-left: .3rem; } .deroulant .prix-menu { color: #B4B6B7; font-size: .72rem; text-transform: none; letter-spacing: 0; } .bientot { display: inline-block; background: var(--magenta); color: #fff; font-size: .58rem; font-weight: 700; letter-spacing: .1em; padding: .12rem .4rem; margin-left: .45rem; vertical-align: 1px; } /* Icones recherche et caddie, a droite comme le site */ .nav-outils { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); display: flex; gap: .45rem; } .outil { width: 38px; height: 32px; display: grid; place-items: center; background: #F2F0F1; border: 1px solid #DDD9DB; cursor: pointer; transition: background .15s, border-color .15s; } .outil:hover, .outil:focus-visible { background: #fff; border-color: var(--magenta); } .outil svg { width: 15px; height: 15px; fill: none; stroke: #6E7079; stroke-width: 1.8; } .outil:hover svg { stroke: var(--magenta); } .badge-panier { position: absolute; top: -6px; right: -4px; background: var(--magenta); color: #fff; font-size: .6rem; font-weight: 700; min-width: 15px; height: 15px; border-radius: 50%; display: grid; place-items: center; padding: 0 3px; } .outil-conteneur { position: relative; } .recherche-boite { position: absolute; right: 0; top: calc(100% + 8px); width: min(340px, 86vw); background: #fff; border: 1px solid #E4E0E2; border-top: 3px solid var(--magenta); box-shadow: 0 14px 40px rgba(53,55,62,.16); padding: .8rem; z-index: 70; display: none; } .recherche-boite.ouverte { display: block; } .recherche-boite input { width: 100%; padding: .6rem .7rem; font-family: var(--corps); font-size: .95rem; border: 1px solid #DDD9DB; color: #35373E; } .recherche-boite input:focus { outline: 2px solid var(--magenta); outline-offset: 1px; } .recherche-resultats { list-style: none; margin: .5rem 0 0; padding: 0; max-height: 260px; overflow-y: auto; } .recherche-resultats li { padding: 0; } .recherche-resultats button { all: unset; display: flex; justify-content: space-between; gap: 1rem; width: 100%; padding: .42rem .3rem; font-size: .85rem; color: #4A4C55; cursor: pointer; } .recherche-resultats button:hover { color: var(--magenta); background: #FBF3F7; } .recherche-resultats .prix-menu { color: #B4B6B7; font-variant-numeric: tabular-nums; white-space: nowrap; } /* ============ Slider : reprise au pixel du Revolution Slider ============ Le site en ligne pose chaque couche en absolu sur une grille de 1900 x 783 (parametres du slider "intropixelprint", releves dans le HTML publie et la table wppp_revslider_sliders du dump). Les visuels sont des compositions completes, fond blanc compris : le bandeau garde donc leur rapport et les affiche entiers, jamais recadres. Les textes tombent dans les zones blanches de l'image, c'est la composition qui les rend lisibles, pas un voile. Les coordonnees vivent dans site/bloc-slider.html, en pourcentages de la grille ; la taille des textes suit la largeur du bandeau (unites cqw, d'ou le container-type). Consequence assumee, identique au site d'origine : sur un petit ecran tout retrecit proportionnellement, textes compris. C'est le comportement du Revolution Slider, et c'est ce qui garantit que rien ne se chevauche jamais. */ .slider { position: relative; overflow: hidden; background: #FFFFFF; aspect-ratio: 1900 / 783; border-bottom: 1px solid #E4E0E2; container-type: inline-size; } .diapo { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .9s ease; } .diapo.active { opacity: 1; visibility: visible; } /* Le rapport du bandeau etant celui des visuels, `cover` ne recadre rien : il cale simplement l'image sur le cadre. */ .diapo .fond { position: absolute; inset: 0; background-size: cover; background-position: center; } .diapo .fond-video { width: 100%; height: 100%; object-fit: cover; display: block; } .contenu-diapo { position: absolute; inset: 0; } /* ---- Les couches ---- Chaque couche porte en ligne sa position, sa taille, sa couleur et son horaire (animation-delay = st, animation-duration = sp, releves couche par couche sur le site). La feuille ne pose que le nom de l'animation et le mode : les deux se composent. */ .couche { position: absolute; margin: 0; opacity: 0; } .texte-diapo { font-family: "Open Sans", var(--corps); font-weight: 400; text-shadow: none; } .texte-diapo.leger { font-weight: 300; } .diapo.active .texte-diapo { animation-name: rebond; animation-fill-mode: both; } /* easeOutBounce, la courbe des textes du site : trois rebonds decroissants, en images clefs parce qu'un cubic-bezier ne sait pas revenir en arriere. */ @keyframes rebond { 0% { opacity: 0; transform: translateY(34px); } 30% { opacity: 1; } 36% { transform: translateY(-9px); } 54% { transform: translateY(0); } 72% { transform: translateY(-4px); } 86% { transform: translateY(0); } 94% { transform: translateY(-1px); } 100% { opacity: 1; transform: translateY(0); } } /* ---- Les pastilles ---- Disques translucides, releve : background-color rgba(255,255,255,0.20) en style en ligne sur chaque forme du site. La bulle de prix du roll-up ecrase ce fond en ligne (rose, rgba(255,0,225,.5), 200 px). Elles fondent (power2.inOut), sans rebond. */ .pastille { aspect-ratio: 1; border-radius: 50%; background: rgba(255,255,255,.2); } .diapo.active .pastille { animation-name: fondu-couche; animation-fill-mode: both; animation-timing-function: cubic-bezier(.45, 0, .55, 1); } @keyframes fondu-couche { from { opacity: 0; } to { opacity: 1; } } /* ---- Le logo de la diapositive video ---- Seule couche de cette diapositive, comme sur le site : centre, 800 px sur la grille de 1900, il monte en intensite (releve : st 740 ms, sp 1500 ms, power2.inOut). */ .logo-video { left: 50%; top: 50%; transform: translate(-50%, -50%); width: 42.105%; height: auto; } .diapo.active .logo-video { animation-name: fondu-couche; animation-fill-mode: both; animation-timing-function: cubic-bezier(.45, 0, .55, 1); } /* Sans mouvement demande : tout est la, tout de suite. */ @media (prefers-reduced-motion: reduce) { .diapo .couche { animation: none !important; opacity: 1; } } .puces { position: absolute; bottom: 1.2rem; left: 50%; transform: translateX(-50%); display: flex; gap: .55rem; z-index: 3; } .puce { width: 30px; height: 4px; border: 0; padding: 0; cursor: pointer; background: #DDD9DB; transition: background .2s; } .puce[aria-current="true"] { background: var(--magenta); } .puce:focus-visible { outline: 2px solid var(--magenta); outline-offset: 3px; } .fleche { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 44px; height: 44px; border: 1px solid #E4E0E2; border-radius: 50%; cursor: pointer; background: rgba(255,255,255,.9); color: #6E7079; font-size: 1.3rem; line-height: 1; transition: all .2s; } .fleche:hover { background: var(--magenta); color: #fff; border-color: var(--magenta); } .fleche.g { left: .9rem; } .fleche.d { right: .9rem; } .bouton { display: inline-block; padding: .8rem 1.5rem; font-family: var(--corps); font-weight: 700; font-size: .85rem; letter-spacing: .07em; text-transform: uppercase; text-decoration: none; cursor: pointer; border: 2px solid var(--magenta); background: var(--magenta); color: #fff; transition: background .18s, border-color .18s, color .18s; } .bouton:hover, .bouton:focus-visible { background: var(--magenta-fonce); border-color: var(--magenta-fonce); } .bouton.creux { background: transparent; color: var(--magenta); } .bouton.creux:hover, .bouton.creux:focus-visible { background: var(--magenta); color: #fff; } /* ============ Separateur a filets roses, comme le site ============ */ .separateur { display: flex; align-items: center; gap: 1.2rem; margin: 0 0 1.8rem; text-align: center; } .separateur::before, .separateur::after { content: ""; flex: 1; height: 3px; background: linear-gradient(90deg, transparent, var(--magenta)); border-radius: 2px; } .separateur::after { background: linear-gradient(90deg, var(--magenta), transparent); } .separateur span { font-family: var(--corps); font-weight: 400; font-size: .95rem; letter-spacing: .12em; text-transform: uppercase; color: var(--texte-doux); white-space: nowrap; } @media (max-width: 640px) { .separateur span { white-space: normal; } } .reassurance { background: var(--fond-alt); border-bottom: 1px solid var(--bordure); } .reassurance .contenu { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; } .rea { padding: 1.3rem 1rem; text-align: center; } .rea b { display: block; font-family: var(--titre); font-size: 1.8rem; font-weight: 500; color: var(--magenta); line-height: 1; font-variant-numeric: tabular-nums; } .rea span { font-size: .74rem; letter-spacing: .05em; text-transform: uppercase; color: var(--texte-doux); } section { padding: clamp(2.6rem, 6vw, 4rem) 0; } /* ============ Cartes de familles ============ */ .familles { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); } .famille { position: relative; display: block; overflow: hidden; aspect-ratio: 3 / 4; text-decoration: none; color: #fff; background: var(--anthracite); box-shadow: var(--ombre); transition: transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s; } .famille:hover, .famille:focus-visible { transform: translateY(-6px); box-shadow: 0 14px 34px rgba(53,55,62,.22); } .famille:focus-visible { outline: 3px solid var(--magenta); outline-offset: 3px; } .famille .visuel { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform .55s cubic-bezier(.2,.7,.3,1), filter .45s; filter: saturate(.92); } .famille:hover .visuel, .famille:focus-visible .visuel { transform: scale(1.09); filter: saturate(1.1); } .famille .teinte { position: absolute; inset: 0; background: linear-gradient(to top, rgba(23,24,28,.9) 4%, rgba(23,24,28,.42) 42%, rgba(23,24,28,.05) 100%); transition: background .45s; } .famille:hover .teinte, .famille:focus-visible .teinte { background: linear-gradient(to top, rgba(230,0,126,.92) 0%, rgba(184,0,101,.55) 48%, rgba(23,24,28,.2) 100%); } .famille .legende { position: absolute; inset: auto 0 0 0; padding: 1.15rem 1.2rem 1.25rem; } .famille .barre { width: 34px; height: 3px; background: var(--magenta); margin-bottom: .7rem; transition: width .45s, background .45s; } .famille:hover .barre, .famille:focus-visible .barre { width: 62px; background: #fff; } .famille h3 { font-family: var(--titre); font-size: 1.14rem; font-weight: 500; text-transform: uppercase; letter-spacing: .05em; margin: 0; } .famille .detail-carte { margin: 0; font-size: .85rem; line-height: 1.45; color: rgba(255,255,255,.92); max-height: 0; opacity: 0; overflow: hidden; transition: max-height .45s ease, opacity .35s ease, margin .45s ease; } .famille:hover .detail-carte, .famille:focus-visible .detail-carte { max-height: 8rem; opacity: 1; margin-top: .5rem; } .famille .compte { display: inline-block; margin-top: .55rem; font-family: var(--corps); font-weight: 700; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: #fff; border-bottom: 1px solid rgba(255,255,255,.45); opacity: 0; transform: translateY(6px); transition: opacity .4s .1s, transform .4s .1s; } .famille:hover .compte, .famille:focus-visible .compte { opacity: 1; transform: translateY(0); } /* ============ Configurateur ============ */ .configurateur { background: var(--fond-alt); border-top: 1px solid var(--bordure); border-bottom: 1px solid var(--bordure); } .config-grille { display: grid; gap: 1.6rem; grid-template-columns: 1fr; align-items: start; } @media (min-width: 940px) { .config-grille { grid-template-columns: 1.15fr .85fr; } } .panneau { background: var(--surface); border: 1px solid var(--bordure); padding: 1.5rem; box-shadow: var(--ombre); } .champ { margin-bottom: 1.15rem; } .champ label { display: block; font-family: var(--corps); font-weight: 700; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--texte-doux); margin-bottom: .4rem; } .champ select, .champ input { width: 100%; padding: .68rem .8rem; font-family: var(--corps); font-size: 1rem; color: var(--texte); background: var(--fond); border: 1px solid var(--bordure); border-radius: 0; } .champ select:focus, .champ input:focus { outline: 2px solid var(--magenta); outline-offset: 1px; } .duo { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; } .finitions { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); } .indispo { font-size: .78rem; color: var(--texte-doux); padding: .55rem .7rem; border: 1px dashed var(--bordure); background: var(--fond-alt); } .etiquette-famille { display: inline-block; font-family: var(--corps); font-weight: 700; font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; padding: .18rem .5rem; background: var(--magenta); color: #fff; margin-left: .5rem; vertical-align: 2px; } .etiquette-famille.rigide { background: var(--anthracite); } .ticket { position: sticky; top: 1rem; } .prix-final { font-family: var(--titre); font-size: clamp(2.6rem, 7vw, 3.6rem); font-weight: 500; color: var(--magenta); line-height: 1; font-variant-numeric: tabular-nums; margin: .2rem 0 .1rem; } .prix-ht { font-size: .78rem; color: var(--texte-doux); letter-spacing: .06em; text-transform: uppercase; } .detail { list-style: none; margin: 1.3rem 0 0; padding: 1.1rem 0 0; border-top: 1px solid var(--bordure); font-size: .9rem; } .detail li { display: flex; justify-content: space-between; gap: 1rem; padding: .34rem 0; } .detail li span:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; } .detail li.fort { font-weight: 700; border-top: 1px solid var(--bordure); margin-top: .45rem; padding-top: .7rem; } .detail li.remise span:last-child { color: var(--magenta); } .detail li.note { color: var(--texte-doux); font-size: .82rem; } .formule { margin-top: 1.2rem; padding: .85rem; background: var(--fond-alt); border-left: 3px solid var(--magenta); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .72rem; line-height: 1.55; color: var(--texte-doux); overflow-x: auto; white-space: pre-wrap; word-break: break-word; } .alerte { margin-top: 1rem; padding: .7rem .85rem; border-left: 3px solid var(--magenta); background: color-mix(in srgb, var(--magenta) 8%, transparent); font-size: .85rem; } .bouton-panier { margin-top: 1.2rem; width: 100%; text-align: center; } /* ============ Fiche produit, comme le site ============ */ .fiche { margin-top: 2.2rem; } .fiche h3 { font-family: var(--corps); font-weight: 700; font-size: clamp(1.15rem, 2.4vw, 1.5rem); text-transform: uppercase; letter-spacing: .04em; color: var(--magenta); margin: 0 0 .8rem; } .fiche-meta { font-size: .85rem; margin: 0 0 1rem; } .fiche-meta dt { display: inline; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--texte); font-size: .78rem; } .fiche-meta dd { display: inline; margin: 0; } .fiche-meta .ligne { margin-bottom: .35rem; } .fiche-meta .rose { color: var(--magenta); text-transform: uppercase; font-size: .8rem; } .fiche-desc { color: var(--texte-doux); max-width: 75ch; margin: 0; } /* ============ Grilles de cartes produit ============ (boutique, produits recents de l'accueil, produits similaires) Demande du client : "certaines fiches depassent", "tu ne dois pas avoir des fiches de differentes hauteurs dans ton dev", et en meme temps "les images ne sont pas coupees, pas de bord blanc". Mesure sur https://www.pixelprint.fr/produit/bachepvc/ en 1440 px, bloc "Produits similaires" : carte 260x414, zone d'image 258x344 (rapport 0,750), bloc de texte 258x68, quatre colonnes de 260 espacees de 40 dans un conteneur de 1200. Toutes ses cartes font exactement la meme hauteur parce que WordPress recadre chaque vignette a la source, en 300x400 : sa feuille de style, elle, ne fait que `width: 100%; height: auto`. Ce recadrage nous est interdit. Nos 59 visuels gardent leur format d'origine : 700x525 (26 fichiers), 525x700 (23), 466x700 (10). D'ou la construction en trois temps : 1. la zone d'image a le rapport du site en ligne, 3/4. A largeur de colonne egale elle a donc toujours la meme hauteur, et deux cartes voisines sont hautes pareil par construction, pas par etirement ; 2. l'image y est centree a son format naturel (`max-width` et `max-height`, jamais `object-fit: cover`, jamais de hauteur imposee) : aucun recadrage, aucune deformation ; 3. le vide qui reste autour d'une image qui ne remplit pas la zone est comble par une copie floutee de cette meme image (`.visuel-fond`). Nos visuels ont des fonds tres differents (gris clair, rose, brun sombre) : aucune couleur unie ne pourrait passer inapercue, alors qu'une copie floutee prolonge le fond de la photo elle-meme. C'est la seule facon de tenir les trois exigences a la fois : hauteurs egales, zero recadrage, zero bande. `align-items: stretch` (valeur par defaut, donc plus de `start`) plus `margin-top: auto` sur `.infos` : si un tarif en promotion passe sur deux lignes, sa carte devient la plus haute de la rangee, les autres s'etirent a sa hauteur et gardent leur texte cale en bas. */ .gamme { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); } /* Bloc "Produits similaires" : cinq cartes, donc cinq colonnes des que la place le permet, puis 3, 2 et 1. Le nombre de colonnes est ecrit a la main et ne passe jamais par 4 : `auto-fill` en donnait quatre entre 1000 et 1040 px, ce qui coupait les cinq cartes en 4 + 1 et laissait exactement la rangee trouee que le client ne veut pas voir. 5 et 1 remplissent leurs rangees, 3 et 2 laissent une derniere rangee partielle mais jamais un orphelin isole sous quatre cartes. */ .gamme-similaires { grid-template-columns: minmax(0, 1fr); } @media (min-width: 440px) { .gamme-similaires { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 700px) { .gamme-similaires { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 1040px) { .gamme-similaires { grid-template-columns: repeat(5, minmax(0, 1fr)); } } .produit-carte { position: relative; height: 100%; background: var(--surface); border: 1px solid var(--bordure); box-shadow: var(--ombre); overflow: hidden; transition: transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s, border-color .3s; display: flex; flex-direction: column; text-align: left; padding: 0; font-family: var(--corps); } .produit-carte:hover, .produit-carte:focus-within { transform: translateY(-5px); border-color: var(--magenta); box-shadow: 0 12px 30px rgba(53,55,62,.18); } /* La zone d'image. `overflow: hidden` coupe le fond etendu et le grossissement de 6 % au survol : c'est lui qui borne, pas un cadre pose sur l'image. */ .produit-carte .visuel { position: relative; aspect-ratio: 3 / 4; overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--fond-alt); } /* Fond etendu : une copie de la meme image, etalee sur toute la zone, floutee a 48 px, desaturee et eclaircie. Ce n'est plus une image, c'est un aplat : rien n'y est lisible, il ne sert qu'a donner au vide le degrade de clarte que la photo a elle-meme du haut vers le bas, pour que le raccord avec le visuel ne se voie pas. Trois essais avant celui-ci, tous mesures sur /produit/porte-brochures-box/ (cinq visuels en 700x525) : - copie recadree en `cover` : on ne voyait que la bande centrale de la photo, donc le produit. Le haut d'une carte virait au vert, celui de la voisine au brun : les cartes etaient barrees de bandeaux colores. - copie etalee, flou 30 px, sans desaturation : mieux, mais la couleur du produit bavait encore dans les bandes. - degrade gris fixe : propre, mais il suppose que tous les visuels ont le fond de studio gris des 26 fiches de signaletique. Les autres vont du rose au brun sombre, il aurait fallu le reregler a chaque photo. La desaturation a 0,35 regle le probleme a la racine : elle enleve la couleur, pas la lumiere. La bande suit la clarte de la photo et n'en reprend pas la teinte. La regle du projet ("jamais de recadrage, jamais de deformation") porte sur le visuel produit, celui que le visiteur regarde : lui est intact, entier, a son format naturel, juste au-dessus. Le fond, a 48 px de flou et sans couleur, n'a plus ni forme ni contour a deformer. Le build ne pose ce fond que sur les 36 visuels sur 59 qui ne remplissent pas la zone. */ .produit-carte .visuel-fond { position: absolute; inset: 0; width: 100%; height: 100%; /* Le flou deborde de l'element et laisse ses bords se dissoudre : l'agrandissement de 8 % repousse cette dissolution hors de la zone. */ transform: scale(1.08); filter: blur(48px) saturate(.35) brightness(1.06); pointer-events: none; } /* Le voile ramene toutes les bandes au meme niveau de clarte, pour qu'une photo sombre ne donne pas une carte sombre. Il n'existe que sur les zones qui ont un fond a temperer : c'est le build qui pose `visuel-etendu`, lui seul sait quels visuels remplissent la zone. */ .produit-carte .visuel-etendu::before { content: ""; position: absolute; inset: 0; z-index: 1; background: color-mix(in srgb, var(--surface) 35%, transparent); pointer-events: none; } /* Aucun recadrage : ni `object-fit: cover`, ni hauteur imposee. L'image prend la plus grande taille qui tient dans la zone en gardant son format, et se centre. Un 525x700 la remplit exactement, un 466x700 laisse 5,6 % de chaque cote, un 700x525 laisse 21,9 % en haut et en bas ; dans les deux derniers cas c'est le fond etendu qu'on voit, pas une bande. */ .produit-carte .image { position: relative; z-index: 2; /* au-dessus du fond etendu et de son voile */ max-width: 100%; max-height: 100%; width: auto; height: auto; display: block; transition: transform .5s; /* Sans cela l'image, qui est empilee au-dessus du lien etire sur la carte, avale le clic : mesure au centre de la zone d'image, l'element vise etait `img.image` et non `a.carte-lien`, et cliquer sur la photo ne menait nulle part. Elle n'a aucun evenement a recevoir, le survol est porte par la carte. */ pointer-events: none; } .produit-carte:hover .image { transform: scale(1.06); } /* Panneau de survol, repris du site en ligne (`.mpcth-product-panel`, apparition en 0,25 s ease-out). Il ne porte que l'apercu rapide : le panier et les favoris n'existent pas encore, et un bouton qui ne fait rien est pire que pas de bouton. */ .produit-carte .carte-actions { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; transform: translateY(100%); transition: transform .25s ease-out, opacity .25s ease-out; opacity: 0; } .produit-carte:hover .carte-actions, .produit-carte:focus-within .carte-actions { transform: none; opacity: 1; } .carte-action { width: 100%; border: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: .4rem; padding: .6rem .5rem; min-height: 40px; background: var(--magenta); color: #fff; font-family: var(--corps); font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } .carte-action:hover { background: var(--magenta-fonce); } .carte-action:focus-visible { outline: 3px solid var(--anthracite); outline-offset: -3px; } .carte-action-icone { width: 15px; height: 15px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } /* Sans souris, il n'y a pas de survol : le panneau reste affiche, sinon l'apercu serait inatteignable au doigt. Il passe a 44 px de haut, la hauteur de cible tactile recommandee. Le lien de la carte, lui, couvre toute la carte et marche dans tous les cas : le doigt qui rate le panneau tombe sur la fiche, jamais dans le vide. */ @media (hover: none) { .produit-carte .carte-actions { transform: none; opacity: 1; } .carte-action { min-height: 44px; } } .produit-carte .infos { margin-top: auto; padding: .95rem 1rem 1.05rem; border-top: 1px solid var(--bordure); background: var(--surface); } /* Trois lignes reservees, ni plus ni moins. C'est le dernier ecart de hauteur entre deux cartes d'une meme rangee : la zone d'image ayant un rapport fixe, seul le titre pouvait encore varier, et il variait (mesure sur /produit/bachepvc/ : bloc de texte a 85,4 px pour "MESH OU GRILLE AU M2" contre 107,4 px pour "ADHESIF MICRO-PERFORE LUXE LC M2", soit 22 px de vide sous l'image des cartes a titre court). Trois et non deux : a deux lignes, six noms sur 59 etaient coupes en boutique, dont les quatre rubans adhesifs, qui ne different que par leur fin ("108 unites 1 CLS", "36 unites 2CLS"). Un nom tronque juste avant ce qui le distingue de son voisin n'est pas acceptable, et ces quatre-la s'affichent cote a cote. L'interligne descend a 1,35 : trois lignes serrees coutent 11,7 px de plus que deux lignes a 1,6, pas 22, et un titre en capitales grasses se lit mieux serre. Le site en ligne resout la meme chose autrement : il fige son bloc de texte a 5,25em avec `overflow: hidden` et ne montre le titre qu'au survol, donc la question du nom trop long ne s'y pose pas. */ .produit-carte .nom { font-weight: 700; font-size: .86rem; letter-spacing: .05em; line-height: 1.35; text-transform: uppercase; color: var(--magenta); margin: 0 0 .35rem; min-height: 4.05em; /* 3 lignes a line-height 1.35 */ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; } /* Le titre est le lien de la carte, et son pseudo-element couvre toute la carte : on clique n'importe ou pour aller sur la fiche. Le panneau de survol passe au-dessus grace a son `z-index`. Un `