/* Boutique Pneus AA — /pneus Reprend le système visuel des templates AA (crème/bordeaux, Space Grotesk + Manrope) : la page doit être indiscernable du reste du site. */ :root{--cream:#FDFAF5;--paper:#FFFFFF;--dark:#0E1014;--red:#8B1F1F;--red-bright:#EB5C54; --ink:#171717;--ink-soft:#5b5e63;--line:#ece6dc;--radius:22px;--maxw:1320px; --ease:cubic-bezier(.22,1,.36,1);--green:#1a7f4b;--amber:#9a6a00} *{box-sizing:border-box;margin:0;padding:0} /* Indispensable : `display:grid` sur .tgrid/.tskel/.tpanel bat la règle `[hidden]{display:none}` de la feuille user-agent (simple sélecteur de type contre classe). Sans ce !important, masquer par l'attribut hidden en JS n'a aucun effet et les squelettes de chargement restent à l'écran. */ [hidden]{display:none!important} /* Réservé aux lecteurs d'écran : une lettre « C » seule ne veut rien dire sans son intitulé. */ .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden; clip:rect(0 0 0 0);white-space:nowrap;border:0} html{scroll-behavior:smooth} body{font-family:'Manrope',system-ui,sans-serif;background:var(--cream);color:var(--ink);-webkit-font-smoothing:antialiased;overflow-x:clip} a{color:inherit;text-decoration:none} img{display:block;max-width:100%} h1,h2,h3{font-family:'Space Grotesk',sans-serif;letter-spacing:-.02em;line-height:1.05} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px} .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-weight:700;font-size:15px;border:0;cursor:pointer;padding:13px 22px;border-radius:100px;transition:.25s var(--ease);white-space:nowrap} .btn-red{background:var(--red);color:#fff} .btn-red:hover{background:#7a1a1a;transform:translateY(-2px)} .lnk{background:none;border:0;color:var(--red);font:inherit;font-weight:700;cursor:pointer;text-decoration:underline} /* ── Hero ─────────────────────────────────────────────────────────────── */ .thero{background:var(--dark);color:#fff;position:relative;overflow:hidden} .thero::before{content:'';position:absolute;inset:0;background:radial-gradient(100% 120% at 85% -10%,rgba(235,92,84,.22),transparent 55%)} .thero .wrap{position:relative;z-index:1;padding:44px 24px 40px} .thead .crumb{font-size:13px;color:#aeb3bc;margin-bottom:8px} .thead .crumb a:hover{color:#fff} .thead .crumb .sep{margin:0 8px;opacity:.5} .thead h1{font-size:clamp(30px,4.4vw,48px);font-weight:700} .tsub{color:#cfd2d8;font-size:15.5px;line-height:1.6;max-width:64ch;margin-top:12px} /* Sélecteur de dimension : le point d'entrée obligatoire du catalogue. */ .tdim{margin-top:28px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12); border-radius:var(--radius);padding:20px 22px;backdrop-filter:blur(6px)} .tdim-lbl{display:block;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#aeb3bc;margin-bottom:12px} .tdim-selects{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap} /* Les champs se partagent la largeur de la carte au lieu de rester tassés à gauche : le formulaire respire, et les 5 critères tiennent sur une ligne. */ .tdim-selects label{display:flex;flex-direction:column;gap:6px;font-size:11px;font-weight:700; letter-spacing:.1em;text-transform:uppercase;color:#8d929b;flex:1 1 108px;min-width:0} .tdim-selects select{background:#fff;color:var(--ink);border:0;border-radius:12px;padding:12px 14px; font:600 17px/1 'Space Grotesk',sans-serif;min-width:0;width:100%;cursor:pointer} .tdim-selects .btn{flex:0 0 auto;white-space:nowrap} .tdim-sep{font:700 22px/1 'Space Grotesk',sans-serif;color:#5b5e63;padding-bottom:13px} .tdim-selects .btn{margin-left:6px} .tdim-hint{font-size:12.5px;color:#8d929b;margin-top:12px} /* ── Barre de filtres collante ────────────────────────────────────────── */ .tbar{position:sticky;top:0;z-index:40;background:rgba(253,250,245,.94);backdrop-filter:blur(10px); border-bottom:1px solid var(--line);padding:12px 0 0} .tbar-in{display:flex;align-items:center;gap:12px} .tbar-filters{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap;width:100%} .fld{display:flex;flex-direction:column;gap:5px;font-size:10.5px;font-weight:800; letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)} .fld select{background:#fff;border:1px solid var(--line);border-radius:11px;padding:9px 11px; font:600 14px/1 'Manrope',sans-serif;color:var(--ink);cursor:pointer;min-width:132px} .fld select:focus-visible{outline:2px solid var(--red);outline-offset:1px} .tbar-checks{display:flex;flex-direction:column;gap:5px;padding-bottom:2px} .chk{display:flex;align-items:center;gap:7px;font-size:13.5px;font-weight:600;cursor:pointer;color:var(--ink)} .chk input{width:15px;height:15px;accent-color:var(--red);cursor:pointer} .btn-more{background:var(--dark);color:#fff;padding:11px 18px;font-size:14px;margin-left:auto} .btn-more:hover{background:#23262d} .ico-sliders{width:15px;height:15px;flex:none;background:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 6h11M17 6h4M3 12h4M10 12h11M3 18h11M17 18h4M14 3v6M7 9v6M14 15v6' stroke='%23000' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 6h11M17 6h4M3 12h4M10 12h11M3 18h11M17 18h4M14 3v6M7 9v6M14 15v6' stroke='%23000' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat} .tbar-count{display:flex;align-items:center;justify-content:space-between;gap:16px; padding-top:12px;padding-bottom:12px;font-size:14px;color:var(--ink-soft);font-weight:600} .fld-sort{flex-direction:row;align-items:center;gap:8px} /* ── Grille ───────────────────────────────────────────────────────────── */ .tmain{padding:28px 24px 72px;min-height:40vh} .tgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(255px,1fr));gap:18px} .tcard{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius); padding:18px;display:flex;flex-direction:column;gap:12px;transition:.25s var(--ease)} .tcard:hover{transform:translateY(-3px);box-shadow:0 18px 40px -22px rgba(14,16,20,.4);border-color:#ddd4c6} .tcard-top{display:flex;gap:14px;align-items:flex-start} .tcard-img{width:84px;height:84px;flex:none;object-fit:contain;background:#faf7f2;border-radius:14px;padding:6px} .tcard-id{min-width:0;flex:1} .tbrand{font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)} .tmodel{font:700 16.5px/1.25 'Space Grotesk',sans-serif;margin-top:3px; overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical} .tdimtxt{font-size:13.5px;color:var(--ink-soft);font-weight:600;margin-top:4px} .ttags{display:flex;flex-wrap:wrap;gap:5px} .tag{font-size:10.5px;font-weight:800;letter-spacing:.04em;padding:3px 8px;border-radius:100px; background:#f4efe6;color:#6a5c46;text-transform:uppercase} .tag-season{background:#eef4ff;color:#2c4d8f} .tag-winter{background:#eaf3fb;color:#1f5f8b} .tag-all{background:#f0f7ef;color:#2f6b3d} .tag-hot{background:#fdecea;color:#a3281f} /* ── Étiquette européenne ───────────────────────────────────────────────── Lettres et couleurs sont normées : on garde le code officiel (vert A → rouge G) et on précède chaque classe de son pictogramme réglementaire — pompe = consommation, pluie = adhérence sur sol mouillé, haut-parleur = bruit extérieur. Les icônes sont des masques SVG inline : aucune requête réseau, et elles héritent de la couleur du texte. */ .teu{display:flex;gap:10px;align-items:center;font-size:11px;font-weight:800;color:var(--ink-soft);flex-wrap:wrap} .euitem{display:inline-flex;align-items:center;gap:4px} .euico{width:15px;height:15px;flex:none;background:currentColor;opacity:.75} .euico-fuel{-webkit-mask:var(--m-fuel) center/contain no-repeat;mask:var(--m-fuel) center/contain no-repeat} .euico-wet{-webkit-mask:var(--m-wet) center/contain no-repeat;mask:var(--m-wet) center/contain no-repeat} .euico-noise{-webkit-mask:var(--m-noise) center/contain no-repeat;mask:var(--m-noise) center/contain no-repeat} :root{ --m-fuel:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 21V5a2 2 0 0 1 2-2h5a2 2 0 0 1 2 2v16'/%3E%3Cpath d='M2.5 21h12'/%3E%3Cpath d='M6.5 8.5h4'/%3E%3Cpath d='M13 10h3.2a1.8 1.8 0 0 1 1.8 1.8v5.4a1.6 1.6 0 0 0 3.2 0V8.6L18.6 6'/%3E%3C/svg%3E"); --m-wet:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.5 15a3.5 3.5 0 0 0 .4-7 5.2 5.2 0 0 0-9.9-1.6A4.2 4.2 0 0 0 7.5 15'/%3E%3Cpath d='M8 18.5 7 21'/%3E%3Cpath d='M12.5 18.5 11.5 21'/%3E%3Cpath d='M17 18.5 16 21'/%3E%3C/svg%3E"); --m-noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9.5v5h3.2L12 19V5L7.2 9.5H4z'/%3E%3Cpath d='M16 9.2a4 4 0 0 1 0 5.6'/%3E%3Cpath d='M18.8 6.4a8 8 0 0 1 0 11.2'/%3E%3C/svg%3E"); } .eu{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px; padding:0 5px;border-radius:5px;color:#fff;font-size:11px;font-weight:800;line-height:1} .eu-A,.eu-1{background:#00a651}.eu-B,.eu-2{background:#51b747}.eu-C,.eu-3{background:#bfd730;color:#2c3a00} .eu-D{background:#fff200;color:#3a3600}.eu-E{background:#fdb913;color:#3d2900} .eu-F{background:#ef4023}.eu-G{background:#ed1c24} .eudb{font-weight:700;color:var(--ink-soft)} .tcard-foot{margin-top:auto;display:flex;align-items:flex-end;justify-content:space-between;gap:10px; padding-top:12px;border-top:1px solid var(--line)} .tprice{font:700 25px/1 'Space Grotesk',sans-serif;color:var(--ink)} .tprice small{font-size:13px;font-weight:600;color:var(--ink-soft);margin-left:3px} /* Mention exigée : l'éco-participation est comprise dans le prix affiché. */ .teco{font-size:11px;color:var(--ink-soft);margin-top:3px} .tstock{font-size:11.5px;font-weight:800;display:flex;align-items:center;gap:5px} .tstock::before{content:'';width:7px;height:7px;border-radius:50%;background:currentColor} .st-in_stock{color:var(--green)}.st-low{color:var(--amber)}.st-on_order{color:var(--ink-soft)} /* La carte entière est un lien vers la fiche : repère « Voir la fiche » à droite du pied, à la place de l'ancien bouton d'ajout inline. */ .tcard-cta{font:700 12.5px/1 'Manrope',sans-serif;color:var(--red);white-space:nowrap; display:inline-flex;align-items:center;gap:5px;transition:gap .2s var(--ease)} .tcard:hover .tcard-cta{gap:9px} .tempty{text-align:center;padding:64px 0;color:var(--ink-soft);font-size:16px;line-height:1.9} /* Squelettes : évitent le saut de mise en page pendant le chargement. */ .tskel{display:grid;grid-template-columns:repeat(auto-fill,minmax(255px,1fr));gap:18px} .tskel span{height:232px;border-radius:var(--radius);background:linear-gradient(100deg,#f3ede3 30%,#faf7f2 50%,#f3ede3 70%); background-size:200% 100%;animation:sk 1.2s var(--ease) infinite} @keyframes sk{to{background-position:-200% 0}} @media (prefers-reduced-motion:reduce){.tskel span{animation:none}.tcard:hover{transform:none}} /* ── Panneau « Plus de filtres » ──────────────────────────────────────── */ .tpanel{position:fixed;inset:0;z-index:80} .tpanel-bg{position:absolute;inset:0;background:rgba(14,16,20,.45);backdrop-filter:blur(2px)} .tpanel-in{position:absolute;top:0;right:0;bottom:0;width:min(400px,100%);background:var(--paper); display:flex;flex-direction:column;box-shadow:-20px 0 60px -30px rgba(0,0,0,.6)} .tpanel-in header{display:flex;align-items:center;justify-content:space-between; padding:20px 22px;border-bottom:1px solid var(--line)} .tpanel-in header h3{font-size:19px;font-weight:700} .tpanel-x{background:none;border:0;font-size:26px;line-height:1;cursor:pointer;color:var(--ink-soft)} .tpanel-body{padding:20px 22px;overflow-y:auto;flex:1;display:flex;flex-direction:column;gap:22px} .tpanel-body fieldset{border:0} /* Dimension du panneau : les 3 sélecteurs sur une ligne, séparés comme dans le hero (205 / 55 R 16) pour qu'on lise la dimension d'un coup d'œil. */ .tpanel-dim{display:flex;align-items:center;gap:8px} .tpanel-dim select{flex:1 1 0;min-width:0} .tpanel-dim span{font:700 16px/1 'Space Grotesk',sans-serif;color:var(--ink-soft);flex:0 0 auto} .tpanel-body legend{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase; color:var(--ink-soft);margin-bottom:10px} .tpanel-body select{width:100%;background:#fff;border:1px solid var(--line);border-radius:11px; padding:10px 12px;font:600 14px/1 'Manrope',sans-serif;cursor:pointer} .chklist{display:flex;flex-direction:column;gap:9px} /* Le