/* COBY BOUTIQUE — Système de design. Sections numérotées ci-dessous. Notes techniques détaillées : AUDIT-ET-PLAN.md. */ /* ============================ 1. JETONS ================================= */ :root{ /* — Couleurs : surface */ --paper:#FFFFFF; /* fond de page */ --card:#FFFFFF; /* surface élevée */ --panel:#FAFAFB; /* gris à peine perceptible */ --well:#FFFFFF; /* plan des visuels produit */ --panel-2:#F1F1F4; /* gris de survol */ --line:#D4D4DC; /* filet décoratif (1,5:1) */ --surface:#FCFCFD; /* surface des cartes */ --line-2:#C9C9D1; /* filet accentué */ --field:#8A8A92; /* frontière de CONTRÔLE — 3,4:1 sur blanc, exigé par WCAG 1.4.11 : sur fond blanc, le trait est la seule chose qui signale le champ */ /* — Couleurs : texte */ --ink:#111114; /* titres, texte fort */ --text:#2A2A30; /* texte courant (12.9:1) */ --muted:#6A6A73; /* texte secondaire (5.3:1) */ --on-accent:#FFFFFF; /* — Couleurs : marque & états */ /* Accent — bleu Apple (#0071E3, la teinte des boutons d'apple.com). 4,70:1 sur blanc : conforme AA pour le texte courant et pour le blanc posé dessus, mais sans la marge de l'ancien bleu-pétrole (7,43:1). Les survols et le texte sur surface claire passent donc par --accent-deep. Les couleurs d'état (--ok, --warn, --sale, --wa) restent indépendantes. */ --accent:#0071E3; --accent-deep:#005BB5; /* survol / actif — 6,64:1 sur blanc */ --accent-soft:#EAF2FE; /* surface légère — --accent-deep dessus : 5,89:1 */ --wa:#0F9D58; /* contact WhatsApp */ --wa-deep:#0B7C45; --sale:#C31D3E; /* promotion (5.9:1) */ --sale-soft:#FCEBEF; --ok:#0F7A4A; --ok-soft:#E7F6EE; --warn:#8A5A00; --warn-soft:#FFF5E0; /* — Effets */ --sh-1:0 1px 2px rgba(17,17,20,.06), 0 1px 1px rgba(17,17,20,.04); --sh-2:0 4px 14px rgba(17,17,20,.07), 0 1px 3px rgba(17,17,20,.05); --sh-3:0 18px 44px rgba(17,17,20,.13), 0 4px 12px rgba(17,17,20,.06); --ring:0 0 0 4px var(--accent-soft); /* — Rayons */ --r-xs:8px; --r-sm:12px; --r:16px; --r-lg:22px; --r-xl:30px; --pill:999px; /* — Espacements (échelle 4) */ --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s7:32px; --s8:40px; --s9:56px; --s10:80px; --s11:112px; /* — Structure */ --maxw:1240px; --gutter:20px; --hdr-h:62px; --mb-h:60px; /* hauteur reelle de la barre mobile : elle porte padding-bottom:env(safe-area). Le repli 0px est indispensable — sans lui le calc() entier devient invalide. */ /* .mb mesure 61 px : 60 px de liens + sa bordure superieure. Sans ce 1 px, .stick se posait dessus et masquait la bordure. */ --mb-safe:calc(var(--mb-h) + 1px + env(safe-area-inset-bottom,0px)); /* — Profondeurs */ --z-sticky:40; --z-mobilebar:45; --z-header:50; --z-overlay:60; --z-drawer:61; --z-toast:70; --z-lightbox:80; /* — Mouvement */ --ease:cubic-bezier(.22,.8,.28,1); --d1:.14s; --d2:.24s; --d3:.42s; /* — Typographie */ --font:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; --fs-xs:12px; --fs-sm:13.5px; --fs-md:15px; --fs-lg:17px; } /* LE SITE EST BLANC, TOUJOURS — `color-scheme: light` verrouillé sur . Choix de marque. Rétablir une palette sombre : AUDIT-ET-PLAN.md. */ /* ====================== 2. BASE & TYPOGRAPHIE =========================== */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;color-scheme:light} /* Les boutons/liens ont déjà leur propre retour tactile (:active{scale}) : le flash gris/bleu par défaut d'Android et le délai de 300 ms avant tap n'ont plus lieu d'être. */ a,button{-webkit-tap-highlight-color:transparent;touch-action:manipulation} html.js{scroll-behavior:smooth} body{ margin:0; background:var(--paper); color:var(--text); font-family:var(--font); font-size:var(--fs-md); line-height:1.5; font-synthesis-weight:none; -webkit-font-smoothing:antialiased; overflow-wrap:break-word; } h1,h2,h3,h4{color:var(--ink);margin:0;font-weight:640;letter-spacing:-.021em;text-wrap:balance;line-height:1.12} h1{font-size:clamp(30px,5.4vw,54px);letter-spacing:-.028em;font-weight:680} h2{font-size:clamp(23px,3vw,36px);letter-spacing:-.025em;font-weight:680} h3{font-size:clamp(17px,1.6vw,20px)} h4{font-size:var(--fs-md)} p{margin:0} a{color:inherit;text-decoration:none} button,input,select,textarea{font:inherit;color:inherit} /* 16px minimum sur les champs texte : sous ce seuil, iOS Safari zoome automatiquement la page au focus (bond visuel, sortie de zoom hasardeuse au blur). Le corps de texte reste à --fs-md ailleurs ; seuls les champs remontent d'un cran. */ input,select,textarea{font-size:16px} button{cursor:pointer;border:0;background:none;padding:0} img{max-width:100%;height:auto;display:block} address{font-style:normal} svg{width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} table{border-collapse:collapse;width:100%} ::selection{background:var(--accent);color:var(--on-accent)} /* L'attribut hidden doit l'emporter sur tout display: déclaré plus bas. */ [hidden]{display:none!important} :focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px} :focus:not(:focus-visible){outline:none} /* Le

reçoit le focus par script à chaque changement de route (annonce pour lecteur d'écran) — jamais par Tab, puisque tabindex="-1" l'exclut de l'ordre de tabulation. L'anneau visuel n'a donc aucune valeur pour un utilisateur au clavier ici ; le garder ferait croire à une navigation clavier alors que le clic était à la souris. Le focus lui-même reste. */ main h1:focus{outline:none} .skip{ position:fixed;top:-100px;left:var(--s4);z-index:99; background:var(--ink);color:var(--paper);padding:12px 18px;border-radius:var(--r-sm); font-weight:600;transition:top var(--d2) var(--ease); } .skip:focus{top:var(--s4)} /* ========================= 3. UTILITAIRES =============================== */ .wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)} .sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0} .num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"} .eyebrow{font-size:var(--fs-xs);font-weight:640;letter-spacing:.06em;text-transform:uppercase;color:var(--accent)} .lead{color:var(--muted);font-size:clamp(15px,1.7vw,18px);line-height:1.55;max-width:56ch} .sec{padding-block:clamp(40px,6vw,var(--s10))} .sec.tight{padding-top:0} .sec-h{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s4);margin-bottom:var(--s7)} .sec-h .more{color:var(--accent);font-weight:600;font-size:var(--fs-sm);white-space:nowrap;display:inline-flex;align-items:center;gap:4px;min-height:44px} .sec-h .more:hover{text-decoration:underline} .sec-h p{color:var(--muted);font-size:var(--fs-sm);margin-top:6px;max-width:58ch} /* Révélation au défilement (masquée seulement si JS actif) */ .js .rv{opacity:0;transform:translateY(16px);transition:opacity var(--d3) var(--ease),transform var(--d3) var(--ease)} .js .rv.in{opacity:1;transform:none} /* ===================== 3 bis. MOUVEMENT ================================= */ /* Règle absolue : une animation ne peut JAMAIS masquer du contenu. Tout passe par .rv, qui a trois filets côté script. Uniquement transform et opacity — les deux seules propriétés animées sans recalcul de mise en page. */ /* — Cascade : les cartes d'une grille arrivent l'une après l'autre. -------- 40 ms d'écart, plafonnés à 240 ms : au-delà, le retard devient une attente. */ .grid > .rv:nth-child(1){transition-delay:0ms} .grid > .rv:nth-child(2){transition-delay:40ms} .grid > .rv:nth-child(3){transition-delay:80ms} .grid > .rv:nth-child(4){transition-delay:120ms} .grid > .rv:nth-child(5){transition-delay:160ms} .grid > .rv:nth-child(6){transition-delay:200ms} .grid > .rv:nth-child(7){transition-delay:240ms} .grid > .rv:nth-child(8){transition-delay:240ms} .grid > .rv:nth-child(9){transition-delay:240ms} .grid > .rv:nth-child(10){transition-delay:240ms} .grid > .rv:nth-child(11){transition-delay:240ms} .grid > .rv:nth-child(12){transition-delay:240ms} /* Mise à jour de filtre : même effet, mais resserré. Une cascade de 660 ms convient à l'arrivée sur une page, pas à un clic sur une case à cocher. */ .grid.maj > .rv{transition-duration:.18s!important;transition-delay:0ms!important} /* — Entrée échelonnée d'un bloc (héros, bande produit). ------------------- */ /* Pas de 40 ms, plafond 240 ms — cadence que le projet s'impose. */ .stagger > .rv:nth-child(1){transition-delay:0ms} .stagger > .rv:nth-child(2){transition-delay:40ms} .stagger > .rv:nth-child(3){transition-delay:80ms} .stagger > .rv:nth-child(4){transition-delay:120ms} .stagger > .rv:nth-child(5){transition-delay:160ms} .stagger > .rv:nth-child(n+6){transition-delay:200ms} /* — Accordéon : ouverture instantanée, volontairement. La transition de hauteur (`::details-content` + `interpolate-size`) laissait le contenu plaqué à 0 px tout en étant dans le DOM — donc invisible. Retirée jusqu'à ce que la fonctionnalité soit fiable. Seule la flèche pivote. */ /* — Transition entre pages. Seul le contenu principal est animé : le nommer l'extrait de l'instantané racine, en-tête et pied restent immobiles. */ #contenu{view-transition-name:page} @media (prefers-reduced-motion:no-preference){ ::view-transition-group(root){animation:none} ::view-transition-old(root),::view-transition-new(root){animation:none} ::view-transition-old(page){animation:vt-sortie .16s var(--ease) both} ::view-transition-new(page){animation:vt-entree .3s var(--ease) both} } @keyframes vt-sortie{to{opacity:0;transform:translateY(-8px)}} @keyframes vt-entree{from{opacity:0;transform:translateY(12px)}} /* — Pastille du panier : brève impulsion quand le contenu change. --------- */ @keyframes pastille{0%{transform:scale(1)}38%{transform:scale(1.42)}100%{transform:scale(1)}} .badge.pulse{animation:pastille .42s var(--ease)} /* — Parallaxe très légère sur les visuels de récit. ----------------------- Amplitude pilotée par le script via --par, plafonnée à 16 px. */ .story figure,.spot figure{will-change:transform} .js .story figure,.js .spot figure{transform:translate3d(0,var(--par,0px),0)} /* ========================= 4. COMPOSANTS ================================ */ /* — Boutons ------------------------------------------------------------- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:8px; min-height:48px;padding:0 22px;border-radius:var(--pill); font-weight:590;font-size:var(--fs-md);letter-spacing:-.01em;white-space:nowrap; border:1px solid transparent; transition:background var(--d1) var(--ease),border-color var(--d1) var(--ease), color var(--d1) var(--ease),transform var(--d1) var(--ease),box-shadow var(--d1) var(--ease); } .btn:active{transform:scale(.975)} .btn svg{width:19px;height:19px} .btn[disabled],.btn[aria-disabled="true"]{opacity:.45;pointer-events:none} .btn.primary{background:var(--accent);color:var(--on-accent)} .btn.primary:hover{background:var(--accent-deep)} .btn.dark{background:var(--ink);color:var(--paper)} .btn.dark:hover{opacity:.86} .btn.wa{background:var(--wa-deep);color:#fff} .btn.wa:hover{background:#096338} .btn.line{background:var(--card);color:var(--ink);border-color:var(--field)} .btn.line:hover{border-color:var(--ink);background:var(--panel)} .btn.cl{background:#fff;color:var(--ink)} .btn.cl:hover{background:#E6EDF2} .btn.quiet{background:var(--panel);color:var(--ink);border-color:var(--field)} .btn.quiet:hover{background:var(--panel-2)} .btn.sm{min-height:44px;padding:0 16px;font-size:var(--fs-sm)} .btn.lg{min-height:56px;padding:0 30px;font-size:var(--fs-lg)} .btn.block{width:100%} @keyframes spin{to{transform:rotate(1turn)}} /* — Étiquettes ---------------------------------------------------------- */ .badge{ position:absolute;top:-4px;right:-2px;min-width:19px;height:19px;padding:0 5px; border-radius:var(--pill);background:var(--accent);color:var(--on-accent); font-size:11px;font-weight:700;display:grid;place-items:center; border:2px solid var(--card);box-sizing:content-box; } .tag{ display:inline-flex;align-items:center;gap:5px; font-size:var(--fs-xs);font-weight:640;letter-spacing:.01em; padding:4px 9px;border-radius:var(--pill); background:var(--paper);color:var(--ink);border:1px solid var(--line); } .tag.sale{background:var(--sale-soft);color:var(--sale);border-color:transparent} .tag.new{background:var(--accent-soft);color:var(--accent-deep);border-color:transparent} .tag.ok{background:var(--ok-soft);color:var(--ok);border-color:transparent} .tag.warn{background:var(--warn-soft);color:var(--warn);border-color:transparent} /* — Barre d'annonce ----------------------------------------------------- */ .ann{background:var(--ink);color:var(--paper);font-size:var(--fs-sm)} .ann .wrap{display:flex;align-items:center;justify-content:center;gap:var(--s3);min-height:38px;position:relative} .ann p{text-align:center;padding:9px 44px} .ann strong{font-weight:640} .ann button{ position:absolute;right:6px;width:44px;height:44px;display:grid;place-items:center; color:var(--paper);opacity:.65;border-radius:50%; } .ann button:hover{opacity:1} .ann button svg{width:16px;height:16px;stroke-width:2} /* — En-tête ------------------------------------------------------------- */ .hdr{ position:sticky;top:0;z-index:var(--z-header); background:color-mix(in srgb,var(--paper) 82%,transparent); -webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px); border-bottom:1px solid transparent;transition:border-color var(--d2) var(--ease),box-shadow var(--d2) var(--ease); } @supports not (backdrop-filter:blur(1px)){.hdr{background:var(--paper)}} .hdr.scrolled{background:var(--paper);border-bottom-color:var(--line);box-shadow:var(--sh-1)} .hdr .row{display:flex;align-items:center;gap:var(--s3);min-height:var(--hdr-h)} .logo{display:inline-flex;align-items:center;gap:9px;min-height:44px;flex:none} /* Marque COBY : monogramme officiel (trait noir sur fond transparent). L'image porte son ratio propre (256×244) ; on ne fixe que la hauteur. */ .logo .mark{height:30px;width:auto;flex:none;display:block} .wordmark{display:flex;flex-direction:column;line-height:1;letter-spacing:-.03em} .wordmark b{font-size:18px;font-weight:680;color:var(--ink)} .wordmark span{font-size:9.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-top:3px} .search{flex:1;min-width:0;position:relative;display:flex;align-items:center;gap:8px; background:var(--paper);border:1px solid var(--field);border-radius:var(--pill);padding:0 8px 0 14px;height:44px; transition:border-color var(--d1) var(--ease),box-shadow var(--d1) var(--ease),background var(--d1) var(--ease)} .search:focus-within{background:var(--card);border-color:var(--accent);box-shadow:var(--ring)} .search .mag{width:18px;height:18px;color:var(--muted)} .search input{flex:1;min-width:0;height:100%;border:0;background:none;outline:0} .search input::-webkit-search-decoration,.search input::-webkit-search-cancel-button{-webkit-appearance:none} .search .clr{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:var(--muted)} .search .clr:hover{background:var(--panel-2);color:var(--ink)} .search .clr svg{width:15px;height:15px;stroke-width:2} /* Panneau de suggestions : de simples liens, pas un motif combobox ARIA. */ .sug{ position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:2;margin:0;padding:6px;list-style:none; background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-3); max-height:min(60vh,420px);overflow:auto; } .sug li a{display:flex;align-items:center;gap:11px;padding:8px 10px;border-radius:var(--r-xs);min-height:48px} .sug li a:hover,.sug li a:focus-visible{background:var(--panel)} .sug img{width:38px;height:38px;object-fit:contain;background:var(--well);border-radius:7px;flex:none} .sug .t{font-size:var(--fs-sm);font-weight:590;color:var(--ink);line-height:1.25} .sug .m{font-size:12px;color:var(--muted)} .sug .p{margin-left:auto;font-size:var(--fs-sm);font-weight:640;color:var(--ink);white-space:nowrap} .sug .all{display:block;text-align:center;padding:11px;font-size:var(--fs-sm);font-weight:600;color:var(--accent);min-height:44px} .hbtn{ position:relative;display:inline-flex;align-items:center;justify-content:center;gap:7px;flex:none; min-height:44px;min-width:44px;padding:0 14px;border-radius:var(--pill); font-size:var(--fs-sm);font-weight:590; transition:background var(--d1) var(--ease),color var(--d1) var(--ease); } .hbtn svg{width:20px;height:20px} .hbtn .lbl{white-space:nowrap} .hbtn.wa{background:var(--wa-deep);color:#fff} .hbtn.wa:hover{background:#096338} .hbtn.cart{background:var(--paper);color:var(--ink);border:1px solid var(--field)} .hbtn.cart:hover{background:var(--panel)} /* La .row fait 62 px pour un champ de 44 px : 9 px de mou incident sous la recherche. Ce mou n'est pas une respiration voulue, d'ou le padding-top explicite qui porte l'ecart recherche -> marques a 17 px. */ .nav{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none; padding-top:var(--s2);padding-bottom:var(--s3);-webkit-overflow-scrolling:touch} .nav::-webkit-scrollbar{display:none} .nav a{ flex:none;font-size:var(--fs-sm);font-weight:540;color:var(--muted); padding:11px 13px;border-radius:var(--pill);min-height:44px;display:inline-flex;align-items:center; transition:background var(--d1) var(--ease),color var(--d1) var(--ease); } .nav a:hover{color:var(--ink);background:var(--panel)} .nav a[aria-current="page"]{color:var(--on-accent);background:var(--accent);font-weight:620} /* — Fil d'Ariane -------------------------------------------------------- */ .crumb{font-size:var(--fs-sm);color:var(--muted);padding-top:var(--s5);display:flex;flex-wrap:wrap;gap:6px;align-items:center;min-height:44px} /* .nav a, .mb a, .ftr nav a et .legal nav a imposent tous 44 px de cible tactile ; le fil d'Ariane etait le seul a s'en dispenser (20 px). */ .crumb a{border-radius:4px;display:inline-flex;align-items:center;min-height:44px} .crumb a:hover{color:var(--ink);text-decoration:underline} .crumb span[aria-hidden]{opacity:.5} /* — Bandeau de réassurance ---------------------------------------------- */ .trust{border-block:1px solid var(--line);background:var(--card)} .trust ul{ display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s4); list-style:none;margin:0;padding-block:var(--s6); } .trust li{display:flex;gap:12px;align-items:center;font-size:var(--fs-sm)} .trust .ic{width:40px;height:40px;border-radius:12px;background:var(--paper);border:1px solid var(--line);color:var(--accent);display:grid;place-items:center;flex:none} .trust .ic svg{width:20px;height:20px} .trust b{display:block;color:var(--ink);font-weight:640;font-size:var(--fs-sm)} .trust small{color:var(--muted);font-size:var(--fs-xs)} /* — Formulaires --------------------------------------------------------- */ .fld{margin-bottom:var(--s4)} .fld label,.fld .lgd{display:block;font-size:var(--fs-sm);font-weight:620;color:var(--ink);margin-bottom:7px} .fld .opt{color:var(--muted);font-weight:500} .fld input,.fld select,.fld textarea{ width:100%;min-height:50px;background:var(--card);color:var(--text); border:1px solid var(--field);border-radius:var(--r-sm);padding:12px 14px; font-size:16px; /* évite le zoom automatique iOS */ transition:border-color var(--d1) var(--ease),box-shadow var(--d1) var(--ease); } .fld textarea{min-height:88px;resize:vertical;line-height:1.5} .fld select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%); background-position:calc(100% - 20px) 22px,calc(100% - 14px) 22px;background-size:6px 6px;background-repeat:no-repeat;padding-right:42px} .fld input:focus,.fld select:focus,.fld textarea:focus{outline:0;border-color:var(--accent);box-shadow:var(--ring)} .fld .err{display:none;color:var(--sale);font-size:var(--fs-xs);margin-top:6px;font-weight:560} .fld.bad input,.fld.bad select{border-color:var(--sale)} .fld.bad .err{display:flex;align-items:center;gap:5px} .fld fieldset{border:0;margin:0;padding:0;min-width:0} /* — Accordéon ----------------------------------------------------------- */ .acc{border-top:1px solid var(--line)} .acc details{border-bottom:1px solid var(--line)} .acc summary{ cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px; padding:18px 2px;min-height:56px;font-weight:590;color:var(--ink);font-size:var(--fs-md); border-radius:6px; } .acc summary::-webkit-details-marker{display:none} .acc summary:hover{color:var(--accent)} .acc summary::after{ content:"";width:11px;height:11px;flex:none; border-right:2px solid var(--muted);border-bottom:2px solid var(--muted); transform:rotate(45deg) translateY(-3px);transition:transform var(--d2) var(--ease); } .acc details[open] summary::after{transform:rotate(-135deg) translateY(-3px)} .acc .a{padding:0 2px 20px;color:var(--muted);font-size:14.5px;line-height:1.6;max-width:72ch} .acc .a ul{margin:0;padding-left:20px} .acc .a li{margin:5px 0} .acc .a p+p{margin-top:10px} /* — Notification -------------------------------------------------------- */ .toast{ position:fixed;left:50%;bottom:calc(var(--mb-h) + 20px);z-index:var(--z-toast); transform:translate(-50%,16px);opacity:0;pointer-events:none; display:flex;align-items:center;gap:12px;max-width:min(92vw,440px); background:var(--ink);color:var(--paper);padding:12px 14px 12px 18px;border-radius:var(--pill); font-size:var(--fs-sm);font-weight:560;box-shadow:var(--sh-3); transition:opacity var(--d2) var(--ease),transform var(--d2) var(--ease); } .toast.on{opacity:1;transform:translate(-50%,0);pointer-events:auto} .toast button{background:color-mix(in srgb,var(--paper) 18%,transparent);color:var(--paper); padding:10px 16px;border-radius:var(--pill);font-size:var(--fs-sm);font-weight:600;min-height:44px;white-space:nowrap} .toast button:hover{background:color-mix(in srgb,var(--paper) 30%,transparent)} /* — États vides & chargement -------------------------------------------- */ .empty{text-align:center;padding:clamp(48px,9vw,var(--s11)) var(--gutter);color:var(--muted);max-width:52ch;margin-inline:auto} .empty .ic{width:64px;height:64px;border-radius:20px;background:var(--paper);border:1px solid var(--line);color:var(--muted);display:grid;place-items:center;margin:0 auto var(--s5)} .empty .ic svg{width:30px;height:30px} .empty h2{margin-bottom:8px} .empty p{margin-bottom:var(--s6)} /* ====================== 5. GRILLE & FICHES PRODUIT ====================== */ .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s5)} .card{ position:relative;display:flex;flex-direction:column; /* Une pointe de gris sépare la carte de la page sans introduire d'aplat : le puits de l'image, lui, reste blanc pur pour la photo. */ background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden; transition:border-color var(--d2) var(--ease),box-shadow var(--d2) var(--ease),transform var(--d2) var(--ease); } .card:hover{border-color:var(--line-2);box-shadow:var(--sh-1);transform:translateY(-3px)} .card:focus-within{border-color:var(--accent);box-shadow:var(--ring)} /* Puits d'image : le ratio carré doit tenir quelle que soit la photo, donc le visuel est positionné en absolu — sinon il pousse la hauteur. */ .card .im{position:relative;aspect-ratio:1;padding:var(--s6);background:var(--well); border-radius:var(--r-lg) var(--r-lg) 0 0; /* minmax(0,1fr) : sans lui, une image haute repousserait le puits et le carré serait rompu — les cartes d'une rangée n'auraient plus la même hauteur. */ /* overflow:hidden ramène la taille minimale automatique à zéro : sans lui, une image plus haute que le carré le repousserait et les cartes d'une rangée n'auraient plus la même hauteur. */ overflow:hidden;display:grid;grid-template:minmax(0,1fr) / minmax(0,1fr);place-items:center} /* --iw / --ih : plafond ×1,6 calculé par pic() sur la taille native. Une vignette de 82 px monte à 131 px, nette, au lieu de 165 px floues sur un affichage 2×. Le puits blanc absorbe l'écart. */ .card .im img{width:min(100%, var(--cap, 100%));height:auto;aspect-ratio:1; object-fit:contain;transition:transform var(--d3) var(--ease)} .card .im .ph{position:absolute;inset:0;display:grid;place-items:center} .card:hover .im img{transform:scale(1.045)} .card .im .ph{color:var(--line-2)} .card .im .ph svg{width:52px;height:52px} /* Cadre « visuel en cours de mise à jour » : calme, explicite, sans image. */ .noimg{display:grid;place-items:center;gap:9px;padding:10px;text-align:center; background:var(--well);color:var(--muted)} .noimg svg{width:38%;max-width:54px;height:auto;color:var(--line-2);stroke-width:1.1} .noimg b{font-size:11px;font-weight:620;line-height:1.35} .noimg.mini{gap:0} .noimg.mini b{display:none} /* Une seule ligne, toujours. Avec flex-wrap le -17 % passait sous l'etiquette d'etat sur les cartes etroites : deux pastilles desalignees d'une carte a l'autre. space-between remplace le margin-left:auto (qui se comporte mal apres un retour a la ligne) et fixe le bord droit de la remise a 12 px. */ .card .tags{position:absolute;top:var(--s3);left:var(--s3);right:var(--s3); display:flex;flex-wrap:nowrap;justify-content:space-between;gap:6px;pointer-events:none} .card .tags .tag{height:24px;padding-block:0;white-space:nowrap} /* L'etiquette d'etat cede la place ; la remise garde sa largeur entiere. */ .card .tags .tag:not(.sale){min-width:0;overflow:hidden;text-overflow:ellipsis;display:block;line-height:22px} .card .tags .sale{flex:none;margin-left:auto} /* seule sur sa ligne : reste a droite */ .card .bd{display:flex;flex-direction:column;gap:3px;padding:0 var(--s4) var(--s4);flex:1} .card .v{font-size:var(--fs-xs);font-weight:620;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)} .card .t{font-size:14.5px;font-weight:600;color:var(--ink);line-height:1.3;letter-spacing:-.012em;margin-top:2px} .card .t a{display:inline-block} .card .t a::after{content:"";position:absolute;inset:0;border-radius:inherit} /* toute la carte devient cliquable */ .card:focus-within .t a::after{outline:none} .card .meta{font-size:var(--fs-xs);color:var(--muted);margin-top:2px} .card .price{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-top:auto;padding-top:10px} .card .now{font-size:16.5px;font-weight:660;color:var(--ink);letter-spacing:-.015em} .card .was{font-size:12.5px;color:var(--muted);text-decoration:line-through} .card .stk{display:flex;align-items:center;gap:6px;font-size:var(--fs-xs);color:var(--muted);margin-top:6px} .card .stk i{width:6px;height:6px;border-radius:50%;background:var(--ok);flex:none} .card .stk.out i{background:var(--warn)} .card .act{display:flex;gap:6px;padding:0 var(--s4) var(--s4);position:relative;z-index:1} .card .act .btn{flex:1;min-width:0;min-height:44px;font-size:var(--fs-sm);padding:0 10px} .card .act .ico{flex:none;width:44px;padding:0;background:var(--card)} .card .act .ico svg{width:18px;height:18px} .card .act .ico[aria-pressed="true"]{background:var(--sale-soft);color:var(--sale);border-color:var(--sale-soft)} .card .act .ico[aria-pressed="true"] svg{fill:currentColor} /* Carte éditoriale insérée dans la grille */ .card.edito{background:var(--paper);border-style:dashed;justify-content:center;padding:var(--s6);gap:10px;text-align:left} .card.edito:hover{transform:none;box-shadow:none;border-color:var(--accent)} .card.edito .ic{width:44px;height:44px;border-radius:13px;background:var(--card);color:var(--accent);display:grid;place-items:center} .card.edito h3{font-size:17px} .card.edito p{font-size:var(--fs-sm);color:var(--muted)} .card.edito .go{color:var(--accent);font-weight:620;font-size:var(--fs-sm);margin-top:4px} /* ============================= 6. PAGES ================================= */ /* — Héros --------------------------------------------------------------- */ .hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line);background:var(--paper)} .hero .wrap{display:grid;grid-template-columns:1.02fr 1fr;gap:clamp(28px,4.5vw,64px);align-items:center; padding-block:clamp(40px,7vw,var(--s11))} .hero h1{margin-top:var(--s4)} /* Signature de marque : plus affirmée qu'un texte courant, jamais concurrente du H1. Un seul palier de graisse et de taille les sépare. */ .hero .sig{margin-top:var(--s4);font-size:clamp(17px,1.9vw,21px);font-weight:560; color:var(--accent);letter-spacing:-.012em} .hero .lead{margin-top:var(--s3);max-width:46ch} .hero .cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:var(--s7)} .hero .proof{display:flex;gap:var(--s6);flex-wrap:wrap;margin-top:var(--s7);padding-top:var(--s5); border-top:1px solid var(--line);list-style:none;padding-left:0} .hero .proof li{font-size:var(--fs-sm);color:var(--muted);display:flex;flex-direction:column;gap:2px} .hero .proof b{color:var(--ink);font-size:var(--fs-md);font-weight:640} /* Héros : une image fixe. Pas de carrousel — rien à surveiller, rien à mettre en pause, et le plus grand élément se peint tout de suite. */ .visual{position:relative;aspect-ratio:4/3;border-radius:var(--r-xl);overflow:hidden; background:var(--well);border:1px solid var(--line)} .visual img{width:100%;height:100%;object-fit:cover} .visual figcaption{position:absolute;inset:auto 0 0 0;display:flex;align-items:flex-end; justify-content:space-between;gap:14px;padding:64px var(--s5) var(--s5);color:#fff; background:linear-gradient(to top,rgba(0,0,0,.8) 0%,rgba(0,0,0,.4) 46%,transparent 100%)} .visual .k{font-size:20px;font-weight:660;letter-spacing:-.02em;line-height:1.2} .visual .k small{display:block;font-size:13.5px;font-weight:450;color:#DEDEE4;margin-top:5px;letter-spacing:0} .visual .p{flex:none;background:#fff;color:#111114;padding:11px 18px;border-radius:var(--pill); font-weight:660;font-size:var(--fs-sm);white-space:nowrap;min-height:44px;display:inline-flex;align-items:center} .visual .p:hover{background:#EDEDF2} /* — Raccourcis guidés (une seule barre, fusionnée avec les catégories) ---- */ .guided{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:var(--s6)} .guided a{display:inline-flex;align-items:center;gap:9px;min-height:48px;padding:0 18px 0 14px; border:1px solid var(--field);border-radius:var(--pill);background:var(--paper); font-size:var(--fs-sm);font-weight:590;color:var(--ink); transition:border-color var(--d1) var(--ease),background var(--d1) var(--ease)} .guided a:hover{border-color:var(--ink);background:var(--panel)} /* Variante en colonnes : intention + précision. Les pastilles des « Raccourcis » gardent leur forme simple. */ .guided.cols{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s3)} .guided.cols a{align-items:flex-start;padding:15px 17px;min-height:0;border-radius:var(--r-sm); font-weight:540;line-height:1.35} .guided.cols svg{margin-top:2px;flex:none} .guided.cols b{display:block;font-weight:620;color:var(--ink)} .guided.cols small{display:block;color:var(--muted);font-size:var(--fs-xs);margin-top:3px} .guided svg{width:18px;height:18px;color:var(--accent)} /* — Bande produit vedette (l'iPhone au centre du commerce) --------------- */ .spot{border-block:1px solid var(--line);background:var(--paper)} .spot .head{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(24px,4vw,64px); align-items:center;padding-block:clamp(40px,5vw,72px)} .spot h2{font-size:clamp(28px,4vw,46px)} .spot .lead{margin-top:16px} .spot .cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:var(--s6)} .spot figure{position:relative;margin:0;border-radius:var(--r-xl);overflow:hidden;background:var(--well); border:1px solid var(--line);aspect-ratio:4/3} .spot figure img{width:100%;height:100%;object-fit:cover} /* Photo détourée posée sur le blanc, pas recadrée. Dimensions calculées et non « auto » : sinon l'image garde sa taille intrinsèque et flotte. */ .spot figure.plain{--pad:clamp(24px,3.5vw,56px)} .spot figure.plain img{position:absolute;inset:var(--pad);margin:auto; width:min(100%, var(--cap, 100%));height:auto;aspect-ratio:1;object-fit:contain} .spot .rail{padding-bottom:clamp(40px,5vw,72px)} /* — Invitation au comparateur ------------------------------------------- */ /* Seul temps fort sombre de l'accueil, valeurs portées ici et non dans les jetons globaux. L'accent tombe à 2,05:1 sur ce fond : eyebrow éclairci, CTA en clair. */ .advband{display:grid;grid-template-columns:1fr auto;gap:clamp(24px,4vw,56px);align-items:center; border-radius:var(--r-xl);padding:clamp(32px,5vw,64px);background:#132833;color:#fff} .advband h2{color:#fff} .advband .eyebrow{color:#7FB6F5} .advband p{color:#9FB3C0;margin-top:14px;max-width:46ch;font-size:var(--fs-lg);line-height:1.55} .advband :focus-visible{outline-color:#fff} .advband .btn{margin-top:var(--s6)} .advband .stack{display:flex;gap:14px} .advband .stack figure{margin:0;width:132px;aspect-ratio:1;border-radius:var(--r-lg); border:1px solid var(--line);background:var(--well);padding:14px;position:relative} .advband .stack img{position:absolute;inset:14px;width:calc(100% - 28px);height:calc(100% - 28px);object-fit:contain} /* — Catégories ---------------------------------------------------------- */ .cats{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--s3)} .cat{display:flex;flex-direction:column;gap:9px;padding:var(--s5) var(--s4);background:var(--card); border:1px solid var(--line);border-radius:var(--r);color:var(--ink); transition:border-color var(--d2) var(--ease),background var(--d2) var(--ease)} .cat:hover{border-color:var(--line-2);background:var(--panel)} .cat .ic{color:var(--ink)} .cat b{font-size:14px;font-weight:620;letter-spacing:-.01em} .cat small{color:var(--muted);font-size:var(--fs-xs);line-height:1.35} /* — Récit produit ------------------------------------------------------- */ .story{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:clamp(28px,5vw,72px); background:var(--paper);border-radius:var(--r-xl);padding:0} .story.rev{direction:rtl} .story.rev>*{direction:ltr} .story h2{margin-bottom:14px} .story p{color:var(--muted);font-size:clamp(15px,1.6vw,17px);line-height:1.6;max-width:46ch} .story .btn{margin-top:var(--s6)} .story figure{position:relative;margin:0;border-radius:var(--r-xl);overflow:hidden; background:var(--well);aspect-ratio:4/3;border:1px solid var(--line)} .story figure img{width:100%;height:100%;object-fit:cover} .story figure.plain{--pad:clamp(24px,3.5vw,56px)} .story figure.plain img{position:absolute;inset:var(--pad);margin:auto; width:min(100%, var(--cap, 100%));height:auto;aspect-ratio:1;object-fit:contain} /* — Engagements & étapes ------------------------------------------------ */ .why{background:var(--paper);border-block:1px solid var(--line)} .tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line); border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;margin-top:var(--s7)} .tiles .it{background:var(--paper);padding:var(--s6)} .tiles .it .ic{color:var(--accent);margin-bottom:var(--s4)} .tiles .it b{display:block;font-size:var(--fs-md);font-weight:640;color:var(--ink);margin-bottom:6px;letter-spacing:-.015em} .tiles .it p{color:var(--muted);font-size:14px;line-height:1.55} .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5);counter-reset:st} .step{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s6);display:flex;gap:var(--s4)} .step .n{counter-increment:st;width:34px;height:34px;border-radius:50%;background:var(--accent);color:var(--on-accent); display:grid;place-items:center;font-weight:700;font-size:var(--fs-sm);flex:none} .step .n::before{content:counter(st)} .step b{display:block;color:var(--ink);font-weight:640;margin-bottom:5px;letter-spacing:-.015em} .step p{color:var(--muted);font-size:14px;line-height:1.55} /* — Avis ---------------------------------------------------------------- */ .revs{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5)} .rev{position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s6)} .rev .stars{color:var(--warn);font-size:14px;letter-spacing:2px} .rev blockquote{margin:12px 0 16px;font-size:15px;line-height:1.55;color:var(--text)} .rev cite{font-style:normal;font-weight:640;font-size:var(--fs-sm);color:var(--ink);display:block} .rev small{color:var(--muted);font-size:var(--fs-xs)} .rev .ex{position:absolute;top:14px;right:14px} .note-src{font-size:var(--fs-xs);color:var(--muted);margin-top:var(--s4);max-width:70ch} /* — Bandeau WhatsApp ---------------------------------------------------- */ .wab{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-xl);padding:clamp(28px,4vw,52px); display:flex;align-items:center;justify-content:space-between;gap:var(--s6);flex-wrap:wrap} .wab p{color:var(--muted);margin-top:10px;max-width:52ch;font-size:var(--fs-lg)} .wab .eyebrow{color:var(--wa-deep)} /* — Page catégorie ------------------------------------------------------ */ .col-h{padding-block:var(--s5) var(--s7);max-width:70ch} .col-h h1{font-size:clamp(28px,4vw,44px)} .col-h p{color:var(--muted);margin-top:10px} .shop{display:grid;grid-template-columns:248px 1fr;gap:var(--s7);align-items:start;padding-bottom:var(--s9)} .flt{position:sticky;top:calc(var(--hdr-h) + 20px);max-height:calc(100vh - var(--hdr-h) - 40px);overflow:auto; padding-right:4px;scrollbar-width:thin} .flt fieldset{border:0;margin:0 0 var(--s7);padding:0;min-width:0} .flt legend{font-size:var(--fs-xs);font-weight:660;color:var(--muted);letter-spacing:.05em; text-transform:uppercase;margin-bottom:9px;padding:0} .flt .opts{display:flex;flex-direction:column;gap:2px} .flt label{display:flex;align-items:center;gap:10px;padding:10px 8px;border-radius:var(--r-xs); font-size:var(--fs-sm);color:var(--text);cursor:pointer;min-height:44px} .flt label:hover{background:var(--panel)} /* L'état sélectionné ne reposait que sur la case native. Une surface le rend lisible d'un coup d'œil, sans dépendre de la seule couleur de la case. */ .flt label:has(input:checked){background:var(--accent-soft);color:var(--ink);font-weight:560} .flt input{width:18px;height:18px;accent-color:var(--accent);flex:none;margin:0} .flt label .c{margin-left:auto;color:var(--muted);font-size:var(--fs-xs)} /* Présent, mais secondaire : c'est une sortie de secours, pas une action mise en avant. Souligné plutôt que coloré en accent. */ .flt .clear{color:var(--muted);font-weight:560;font-size:var(--fs-sm);min-height:44px;display:inline-flex; align-items:center;text-decoration:underline;text-underline-offset:3px} .flt .clear:hover{color:var(--ink)} .tools{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);flex-wrap:wrap;margin-bottom:var(--s6)} .tools .count{font-size:var(--fs-sm);color:var(--muted)} .tools .count b{color:var(--ink);font-weight:660} /* Etait un style inline dans app.js : impossible a masquer en CSS au moment ou la pastille Trier de .fbar prend le relais. */ .tools .sortsel{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--muted)} .tools select{min-height:44px;border-radius:var(--pill);border:1px solid var(--field);background:var(--card); color:var(--text);padding:0 38px 0 16px;font-size:16px;appearance:none; background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%); background-position:calc(100% - 20px) 19px,calc(100% - 14px) 19px;background-size:6px 6px;background-repeat:no-repeat} .active-flt{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:var(--s4)} .active-flt button{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 8px 0 13px; border-radius:var(--pill);background:var(--accent-soft);color:var(--accent-deep);font-size:var(--fs-sm);font-weight:600} .active-flt button svg{width:13px;height:13px;stroke-width:2.4} .active-flt button:hover{background:var(--accent);color:var(--on-accent)} /* Barre flottante Filtrer / Trier. Centree, elle etait le seul element de la page a ignorer la gouttiere : 64 px de retrait de chaque cote alors que cartes, fil d'Ariane et compteur sont a fleur des 16 px. flex:1 aligne les deux boutons sur la grille et supprime l'asymetrie 114 / 105 px. */ .fbar{display:none;position:sticky;bottom:calc(var(--mb-safe) + 12px);z-index:var(--z-sticky); gap:10px;padding-top:var(--s4)} .fbar .btn{flex:1;box-shadow:var(--sh-3)} /* — Page produit -------------------------------------------------------- */ .pp{display:grid;grid-template-columns:1.06fr 1fr;gap:clamp(28px,4vw,64px);align-items:start;padding-block:var(--s6) var(--s9)} .gal{position:sticky;top:calc(var(--hdr-h) + 20px)} .gal .main{position:relative;background:var(--well);border:1px solid var(--line);border-radius:var(--r-xl); aspect-ratio:1;padding:clamp(28px,4vw,56px);overflow:hidden; display:grid;grid-template:minmax(0,1fr) / minmax(0,1fr);place-items:center} /* Plafond identique partout : la fiche produit montait à ×2,4, soit plus flou que les cartes. Une seule règle, plus simple à défendre et à maintenir. */ /* L'image etait en absolu avec inset : sur un element positionne, width:100% se resout sur la padding-box du parent (341 px), pas sur la zone d'inset (283 px). Elle depassait donc a droite, rognee par overflow:hidden, et margin:auto ne pouvait plus centrer. Meme grille que .card .im : le 100% porte sur la content-box, le centrage est structurel. max-height couvre le .main en 4/3 du mobile, plus bas que large. */ .gal .main img{width:min(100%, var(--cap, 100%));height:auto;max-height:100%; aspect-ratio:1;object-fit:contain} .gal .main .ph{position:absolute;inset:0;display:grid;place-items:center} .gal .zoom{position:absolute;inset:0;width:100%;height:100%;cursor:zoom-in;background:none;border-radius:inherit} .gal .hint{position:absolute;bottom:14px;right:14px;display:inline-flex;align-items:center;gap:6px; background:var(--panel);color:var(--muted);padding:7px 12px;border-radius:var(--pill);font-size:var(--fs-xs);font-weight:560;pointer-events:none} .gal .hint svg{width:14px;height:14px} .gal .tags{position:absolute;top:16px;left:16px;display:flex;gap:6px;flex-wrap:wrap} .gal .photo-kind{position:absolute;left:16px;bottom:16px;z-index:2;padding:7px 11px; border-radius:var(--pill);background:color-mix(in srgb,var(--panel) 92%,transparent); box-shadow:0 3px 14px rgba(0,0,0,.08);color:var(--muted);font-size:var(--fs-xs);font-weight:620; pointer-events:none} .gal .ph{color:var(--line-2)} .gal .main.pregal{background:#000} .pregal-arrow{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;border:0; border-radius:50%;background:rgba(255,255,255,.9);color:var(--ink);display:grid;place-items:center; font-size:22px;line-height:1;cursor:pointer;z-index:2;box-shadow:0 2px 10px rgba(0,0,0,.18)} .pregal-arrow:hover{background:#fff} .pregal-arrow.prev{left:14px} .pregal-arrow.next{right:14px} .pregal-dots{position:absolute;left:0;right:0;bottom:14px;display:flex;justify-content:center;gap:7px;z-index:2} .pregal-dot{width:8px;height:8px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.55);cursor:pointer} .pregal-dot[aria-current="true"]{background:#fff;width:20px;border-radius:5px} .gal .ph svg{width:90px;height:90px} .color-gallery{margin-top:14px} .color-gallery-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:10px} .color-gallery-head p{margin:0;color:var(--ink);font-size:var(--fs-sm);font-weight:650} .color-gallery-head span{color:var(--muted);font-size:var(--fs-xs)} .color-thumbs{display:flex;gap:10px;overflow-x:auto;padding:3px 3px 9px;scrollbar-width:thin} .color-thumb{flex:0 0 92px;min-height:116px;padding:8px 7px 7px;border:1px solid var(--line); border-radius:14px;background:var(--card);color:var(--muted);font:inherit;font-size:11px;line-height:1.25; cursor:pointer;transition:border-color var(--d1) var(--ease),box-shadow var(--d1) var(--ease),transform var(--d1) var(--ease)} .color-thumb img{display:block;width:72px;height:76px;object-fit:contain;margin:0 auto 5px;mix-blend-mode:multiply} .color-thumb:hover{border-color:var(--ink);transform:translateY(-2px)} .color-thumb[aria-pressed="true"]{border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 24%,transparent);color:var(--ink);font-weight:650} .color-thumb:focus-visible{outline:3px solid var(--accent);outline-offset:2px} .pi .v{font-size:var(--fs-xs);font-weight:640;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)} .pi h1{font-size:clamp(26px,3.2vw,40px);margin:8px 0 10px} .pi .sub{color:var(--muted);font-size:var(--fs-lg);line-height:1.5;max-width:44ch} .pi .pr{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:var(--s7) 0 6px} .pi .pr .now{font-size:clamp(28px,3.2vw,36px);font-weight:680;color:var(--ink);letter-spacing:-.025em} .pi .pr .was{font-size:var(--fs-lg);color:var(--muted);text-decoration:line-through} .pi .save{display:inline-flex;align-items:center;gap:6px;background:var(--sale-soft);color:var(--sale); font-weight:660;font-size:var(--fs-sm);padding:6px 12px;border-radius:var(--pill)} .pi .taxes{font-size:var(--fs-xs);color:var(--muted)} .pi .stock{display:flex;align-items:center;gap:9px;font-size:var(--fs-sm);color:var(--text);margin:13px 0 var(--s7)} .pi .stock i{width:8px;height:8px;border-radius:50%;background:var(--ok);flex:none;box-shadow:0 0 0 4px var(--ok-soft)} .pi .stock.out i{background:var(--warn);box-shadow:0 0 0 4px var(--warn-soft)} .opt{margin-bottom:var(--s6)} .opt .l{display:flex;justify-content:space-between;gap:10px;font-size:var(--fs-sm);color:var(--muted);margin-bottom:10px} .opt .l b{color:var(--ink);font-weight:640} .opt .vals{display:flex;flex-wrap:wrap;gap:8px} .opt .val{min-height:44px;padding:0 17px;border-radius:var(--pill);border:1px solid var(--field); background:var(--card);font-size:var(--fs-sm);font-weight:560;color:var(--text); display:inline-flex;align-items:center;transition:border-color var(--d1) var(--ease),background var(--d1) var(--ease),color var(--d1) var(--ease)} .opt .val:hover{border-color:var(--ink)} .opt .val[aria-pressed="true"]{border-color:var(--accent);background:var(--accent);color:var(--on-accent);font-weight:620} .opt .val[disabled]{opacity:.4;text-decoration:line-through} .gift{display:flex;gap:13px;align-items:flex-start;background:var(--paper);border:1px solid var(--ok);border-radius:var(--r); padding:14px 16px;margin-bottom:var(--s5);font-size:14px;line-height:1.5;color:var(--text)} .gift .ic{color:var(--ok);flex:none} .gift b{color:var(--ink);font-weight:640} /* Le CTA se détache par l'air qui le précède, pas par un cadre. */ .ctas{display:grid;gap:10px;margin-top:var(--s6)} .ctas .row{display:grid;grid-template-columns:1fr 1fr;gap:10px} .ctas .row.one{grid-template-columns:1fr} /* action secondaire seule */ .reass{display:grid;grid-template-columns:1fr 1fr;gap:11px 16px;margin:var(--s6) 0;font-size:14px;list-style:none;padding:0} .reass li{display:flex;gap:10px;align-items:flex-start;line-height:1.45} .reass svg{width:17px;height:17px;color:var(--accent);margin-top:1px} .trade{display:flex;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap; border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;margin-bottom:var(--s6)} .trade b{display:block;color:var(--ink);font-weight:640;font-size:var(--fs-md)} .trade small{color:var(--muted);font-size:var(--fs-sm)} .spec td{padding:12px 0;border-bottom:1px solid var(--line);vertical-align:top;font-size:14px} .spec tr:last-child td{border-bottom:0} .spec th{text-align:left;padding:12px 0;border-bottom:1px solid var(--line);font-size:14px;font-weight:560;color:var(--muted);width:40%} /* Barre d'achat fixe (mobile) */ .stick{position:fixed;inset:auto 0 0 0;z-index:var(--z-sticky);display:none;align-items:center;gap:12px; padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom)); background:color-mix(in srgb,var(--card) 92%,transparent); -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border-top:1px solid var(--line)} .stick .p{flex:1;min-width:0;font-size:var(--fs-lg);font-weight:660;color:var(--ink);letter-spacing:-.02em} .stick .p small{display:block;font-size:var(--fs-xs);font-weight:450;color:var(--muted);letter-spacing:0; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .stick .btn{min-height:46px} /* — Panier & commande --------------------------------------------------- */ .co{display:grid;grid-template-columns:1fr .78fr;gap:var(--s7);align-items:start;padding-bottom:var(--s9)} .pane{background:var(--card);border:1px solid var(--line);border-radius:var(--r-xl);padding:clamp(20px,3vw,32px)} .pane>h2{margin-bottom:6px} .pane .hint{color:var(--muted);font-size:14.5px;margin-bottom:var(--s6)} /* 4 moyens de paiement : grille 2×2. En 3 colonnes, Moov Money restait seul sur sa ligne. La requête média plus bas repasse à 1 colonne. */ .pay{display:grid;grid-template-columns:repeat(2,1fr);gap:9px} .pay label{display:flex;flex-direction:column;gap:3px;padding:14px 12px;min-height:44px;cursor:pointer; border:1px solid var(--field);border-radius:var(--r-sm);background:var(--card); transition:border-color var(--d1) var(--ease),background var(--d1) var(--ease)} .pay label:hover{border-color:var(--ink)} .pay label b{font-size:var(--fs-sm);font-weight:640;color:var(--ink)} .pay label small{color:var(--muted);font-size:12px;line-height:1.35} .pay input{position:absolute;opacity:0;width:0;height:0} .pay label:has(input:checked){border-color:var(--accent);background:var(--accent-soft);box-shadow:var(--ring)} .pay input:focus-visible+b{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px} .sum{position:sticky;top:calc(var(--hdr-h) + 20px);background:var(--card);border:1px solid var(--line); border-radius:var(--r-xl);padding:clamp(20px,3vw,26px)} .sum h2{font-size:var(--fs-lg);margin-bottom:var(--s4)} .sum .li{display:flex;gap:12px;align-items:center;padding:11px 0;border-bottom:1px solid var(--line);font-size:var(--fs-sm)} .sum .li img{width:46px;height:46px;object-fit:contain;background:var(--well);border:1px solid var(--line);border-radius:10px;flex:none} .sum .li .ph{width:46px;height:46px;background:var(--panel);border-radius:10px;display:grid;place-items:center;color:var(--muted);flex:none} .sum .li b{display:block;font-size:13px;font-weight:620;color:var(--ink);line-height:1.3} .sum .li .q{color:var(--muted);font-size:12px} .sum .li .p{margin-left:auto;font-weight:640;color:var(--ink);white-space:nowrap} .sum .row{display:flex;justify-content:space-between;gap:10px;padding:9px 0;font-size:14.5px} .sum .row.t{border-top:1px solid var(--line);margin-top:6px;padding-top:15px;font-size:var(--fs-lg);font-weight:680;color:var(--ink)} .sum .free{color:var(--ok);font-weight:660} .safe{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:var(--s5);font-size:12.5px;color:var(--muted);list-style:none;padding:0} .safe li{display:flex;gap:8px;align-items:center;line-height:1.35} .safe svg{width:15px;height:15px;color:var(--accent)} .ci{display:grid;grid-template-columns:76px 1fr auto;gap:14px;padding:16px 0;border-bottom:1px solid var(--line);align-items:center} .ci:last-child{border-bottom:0} .ci .im{width:76px;height:76px;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--well); display:grid;place-items:center;padding:8px;color:var(--line-2)} .ci .im img{width:100%;height:100%;object-fit:contain} .ci .im .ph{display:grid;place-items:center;width:100%;height:100%} .ci .t{font-size:14px;font-weight:620;color:var(--ink);line-height:1.3} .ci .o{font-size:var(--fs-xs);color:var(--muted);margin-top:2px} .ci .q{display:inline-flex;align-items:center;border:1px solid var(--field);border-radius:var(--pill);margin-top:9px} .ci .q button{width:44px;height:44px;display:grid;place-items:center;color:var(--ink);border-radius:50%} .ci .q button:hover{background:var(--panel)} .ci .q button svg{width:15px;height:15px;stroke-width:2.2} .ci .q .n{min-width:26px;text-align:center;font-weight:660;font-size:14px} .ci .pr{text-align:right;font-weight:660;color:var(--ink);font-size:var(--fs-md)} .ci .rm{display:inline-flex;align-items:center;justify-content:flex-end;min-height:44px;margin-top:2px; font-size:var(--fs-xs);color:var(--muted)} .ci .rm:hover{color:var(--sale);text-decoration:underline} /* — Confirmation -------------------------------------------------------- */ .done{max-width:620px;margin-inline:auto;padding-block:var(--s9) var(--s10);text-align:center} .done .ok{width:80px;height:80px;border-radius:50%;background:var(--ok);color:#fff;display:grid;place-items:center; margin:0 auto var(--s6);animation:pop .5s var(--ease)} .done .ok svg{width:38px;height:38px;stroke-width:2.6} @keyframes pop{from{transform:scale(.4);opacity:0}} .done .ref{display:inline-block;font-size:22px;font-weight:700;letter-spacing:.08em;color:var(--ink); background:var(--paper);border:1px solid var(--line);padding:10px 20px;border-radius:var(--r-sm);margin:var(--s4) 0 var(--s5)} .done .tl{text-align:left;display:grid;gap:var(--s4);margin:var(--s7) 0;background:var(--card); border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s6)} .done .tl div{display:flex;gap:15px;align-items:flex-start;font-size:14px;color:var(--muted);line-height:1.5} .done .tl .ic{width:36px;height:36px;border-radius:50%;background:var(--paper);border:1px solid var(--line);color:var(--accent); display:grid;place-items:center;flex:none} .done .tl b{display:block;color:var(--ink);font-size:14.5px;font-weight:640;margin-bottom:2px} /* — Pages éditoriales --------------------------------------------------- */ .prose{max-width:74ch;font-size:15.5px;line-height:1.68;color:var(--text)} .prose h2{font-size:clamp(20px,2.2vw,26px);margin:var(--s8) 0 var(--s3)} .prose h2:first-child{margin-top:0} .prose p+p,.prose ul,.prose ol{margin-top:var(--s4)} .prose ul,.prose ol{padding-left:22px} .prose li{margin:7px 0} .prose a{color:var(--accent);font-weight:560;text-decoration:underline;text-underline-offset:3px} .prose .callout{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:18px 20px;margin-top:var(--s5);font-size:14.5px} .prose dl{margin:var(--s4) 0 0;display:grid;gap:12px} .prose dt{font-weight:640;color:var(--ink)} .prose dd{margin:2px 0 0;color:var(--muted)} .nojs{padding-block:var(--s8)} .nojs ul{line-height:2} /* ================ 7. PANIER, TIROIRS, SUPERPOSITIONS =================== */ .ov{position:fixed;inset:0;z-index:var(--z-overlay);background:rgba(10,10,14,.45); opacity:0;transition:opacity var(--d2) var(--ease);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)} .ov.on{opacity:1} .dr{position:fixed;inset:0 0 0 auto;z-index:var(--z-drawer);width:min(452px,100%); background:var(--card);display:flex;flex-direction:column;box-shadow:var(--sh-3); transform:translateX(100%);transition:transform var(--d3) var(--ease)} .dr.on{transform:none} .dh{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px var(--s5);border-bottom:1px solid var(--line)} .dh h2{font-size:var(--fs-lg)} .dh .x{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--paper);border:1px solid var(--line);color:var(--ink)} .dh .x:hover{background:var(--panel-2)} .dh .x svg{width:17px;height:17px;stroke-width:2.2} .db{flex:1;overflow:auto;padding:var(--s2) var(--s5);overscroll-behavior:contain} .df{padding:var(--s5);border-top:1px solid var(--line);background:var(--card)} .df .tot{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px} .df .tot b{font-size:22px;font-weight:700;color:var(--ink);letter-spacing:-.02em} .df .note{font-size:12.5px;color:var(--muted);margin-bottom:var(--s4);line-height:1.45} .ups{margin-top:var(--s5);padding-top:var(--s5);border-top:1px solid var(--line)} .ups .l{font-size:var(--fs-xs);font-weight:640;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin-bottom:11px} .ups .it{display:flex;gap:11px;align-items:center;padding:9px;border:1px solid var(--line);border-radius:var(--r-sm);margin-bottom:7px} .ups .it img{width:44px;height:44px;object-fit:contain;background:var(--well);border-radius:8px;flex:none} .ups .it .ph{width:44px;height:44px;background:var(--panel);border-radius:9px;display:grid;place-items:center;color:var(--muted);flex:none} .ups .it b{display:block;font-size:13px;font-weight:620;color:var(--ink);line-height:1.3} .ups .it span{font-size:12.5px;color:var(--muted)} .ups .it .btn{margin-left:auto;min-height:44px;padding:0 13px;font-size:12.5px} .lb{position:fixed;inset:0;z-index:var(--z-lightbox);background:rgba(8,8,12,.94);display:grid;place-items:center;padding:var(--s7)} .lb img{max-width:min(100%,900px);max-height:86vh;object-fit:contain} .lb img[style*="max-width"]{width:auto;height:auto} .lb .x{position:absolute;top:16px;right:16px;width:48px;height:48px;border-radius:50%; background:rgba(255,255,255,.14);color:#fff;display:grid;place-items:center} .lb .x:hover{background:rgba(255,255,255,.26)} .lb.reserve{background:rgba(20,20,26,.55)} .lb.reserve .pane{max-width:440px;width:100%;max-height:85vh;overflow:auto;text-align:left;position:relative} .lb.reserve h2{margin:0 0 8px;font-size:22px} .lb.reserve .x{position:absolute;top:14px;right:14px;width:40px;height:40px;background:var(--panel);color:var(--ink);font-size:22px;line-height:1} .lb.reserve .x:hover{background:var(--line)} /* — Bannière de consentement (affichée seulement si un outil est branché) - */ .consent{position:fixed;left:var(--gutter);right:var(--gutter);bottom:var(--gutter);z-index:var(--z-toast); display:flex;align-items:center;justify-content:space-between;gap:var(--s5);flex-wrap:wrap; max-width:var(--maxw);margin-inline:auto;padding:18px 22px; background:var(--paper);border:1px solid var(--field);border-radius:var(--r-lg);box-shadow:var(--sh-3); opacity:0;transform:translateY(14px);transition:opacity var(--d2) var(--ease),transform var(--d2) var(--ease)} .consent.on{opacity:1;transform:none} .consent p{font-size:14px;color:var(--text);max-width:64ch;line-height:1.5} .consent a{color:var(--accent);font-weight:560;text-decoration:underline;text-underline-offset:3px} .consent .acts{display:flex;gap:10px;flex-wrap:wrap} @media (max-width:900px){.consent{bottom:calc(var(--mb-safe) + 12px)}} /* — Navigation mobile & bouton flottant --------------------------------- */ .mb{display:none;position:fixed;inset:auto 0 0 0;z-index:var(--z-mobilebar); grid-template-columns:repeat(4,1fr);padding-bottom:env(safe-area-inset-bottom); background:color-mix(in srgb,var(--card) 92%,transparent); -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border-top:1px solid var(--line)} .mb a{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px; min-height:var(--mb-h);font-size:10.5px;font-weight:560;color:var(--muted)} .mb a[aria-current="page"]{color:var(--accent)} .mb a svg{width:22px;height:22px} .mb .badge{top:3px;right:calc(50% - 24px)} .fwa{position:fixed;right:22px;bottom:22px;z-index:44;width:56px;height:56px;border-radius:50%; background:var(--wa);color:#fff;display:grid;place-items:center;box-shadow:var(--sh-3); transition:transform var(--d2) var(--ease)} .fwa:hover{transform:scale(1.07)} .fwa svg{width:28px;height:28px} /* — Pied de page -------------------------------------------------------- */ .ftr{background:var(--paper);border-top:1px solid var(--line);padding-block:var(--s9) var(--s7); color:var(--muted);font-size:14px;margin-top:var(--s8)} .ftr .g{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:var(--s7) var(--s6)} .ftr h2{font-size:var(--fs-sm);font-weight:660;color:var(--ink);margin-bottom:12px;letter-spacing:-.01em} .ftr nav a{display:flex;align-items:center;min-height:44px;color:var(--muted)} .ftr nav a:hover{color:var(--ink);text-decoration:underline} .ftr .sig{margin:14px 0 12px;color:var(--ink);font-weight:560} /* Meme convention que .ftr nav a, juste au-dessus : le telephone tombait a 17 px de haut. */ .ftr address a{color:var(--muted);display:inline-flex;align-items:center;min-height:44px} .ftr address a:hover{color:var(--ink);text-decoration:underline} .freass{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s4);list-style:none;padding:var(--s6) 0 0;margin:var(--s7) 0 0; border-top:1px solid var(--line);font-size:13px} .freass li{display:flex;align-items:center;gap:9px} .freass svg{width:17px;height:17px;color:var(--accent)} .legal{margin-top:var(--s6);padding-top:var(--s5);border-top:1px solid var(--line);font-size:12px;line-height:1.6} .legal nav{display:flex;gap:var(--s5);flex-wrap:wrap;margin-bottom:12px} .legal nav a{min-height:44px;display:inline-flex;align-items:center} .legal nav a:hover{color:var(--ink);text-decoration:underline} /* =============== 8. RESPONSIVE & PRÉFÉRENCES UTILISATEUR =============== */ @media (max-width:1100px){ .grid{grid-template-columns:repeat(3,1fr)} .cats{grid-template-columns:repeat(4,1fr)} .shop{grid-template-columns:220px 1fr;gap:var(--s6)} } @media (max-width:960px){ html,body{overflow-x:clip} :root{--gutter:18px} .hdr .row{flex-wrap:wrap;padding-top:10px} /* Recherche sur sa propre ligne, collee au bas de la .row : le mou de 9 px du mode large disparait, on le recompose ici. */ .nav{padding-top:var(--s3);max-width:calc(100vw - 2 * var(--gutter))} .search{order:3;flex-basis:100%;height:44px} .hbtn .lbl{display:none} .hbtn{padding:0 12px} .hero .wrap{grid-template-columns:1fr} /* order:0 et non -1 : la photo passait AVANT le titre, ce qui repoussait le H1 a 585 px et le CTA principal a 770 px sur un ecran de 812. Le heros mene par sa promesse ; la photo suit. */ .visual{aspect-ratio:16/11} .spot .head{grid-template-columns:1fr} .spot figure{order:-1} .advband{grid-template-columns:1fr} .guided.cols{grid-template-columns:repeat(2,1fr)} .hero .proof{gap:var(--s5)} .pp{grid-template-columns:1fr;gap:var(--s6)} .gal{position:static} .gal .main{aspect-ratio:4/3;padding:var(--s6)} /* minmax(0,1fr) et non 1fr : le formulaire de commande a une largeur min-content de 409 px ; avec 1fr la piste s'élargissait au-delà de son conteneur de 343 px et la page de commande débordait à 375 px. */ .co{grid-template-columns:minmax(0,1fr)} .sum{position:static} .tiles{grid-template-columns:repeat(2,1fr)} .story{grid-template-columns:1fr;direction:ltr} .story figure{order:-1} .story.rev>*{direction:ltr} } @media (max-width:900px){ body{padding-bottom:var(--mb-safe)} .mb{display:grid} .fwa{display:none} .toast{bottom:calc(var(--mb-h) + 16px)} .stick{bottom:var(--mb-safe);display:flex} .stick.hide{display:none} /* Les filtres deviennent un tiroir latéral */ .shop{grid-template-columns:1fr} .flt{position:fixed;inset:0 auto 0 0;z-index:var(--z-drawer);width:min(360px,88%);max-height:none; background:var(--card);box-shadow:var(--sh-3);transform:translateX(-100%); transition:transform var(--d3) var(--ease);padding:0;overflow:hidden;display:flex;flex-direction:column} .flt.on{transform:none} .flt .fhead{display:flex;align-items:center;justify-content:space-between;gap:12px; padding:16px var(--s5);border-bottom:1px solid var(--line);flex:none} .flt .fbody{flex:1;overflow:auto;padding:var(--s5);overscroll-behavior:contain} .flt .ffoot{padding:var(--s4) var(--s5);border-top:1px solid var(--line);flex:none} /* Masquée par défaut : fbarVisibility() (app.js) ajoute .show une fois que .tools est entré dans le viewport, pour ne pas flotter sur l'intro. */ .fbar{display:none} .fbar.show{display:flex} /* La pastille Trier de .fbar prend le relais : deux controles de tri simultanes (l'un inline, l'autre en tiroir) sur le meme ecran. */ .tools .sortsel{display:none} .revs{grid-template-columns:1fr} .steps{grid-template-columns:1fr} .freass{grid-template-columns:1fr 1fr} } @media (min-width:901px){ .flt .fhead,.flt .ffoot,.flt .sortset{display:none} } @media (max-width:760px){ :root{--gutter:16px} .grid{grid-template-columns:repeat(2,1fr);gap:12px} .cats{grid-template-columns:repeat(3,1fr)} .trust ul{grid-template-columns:1fr 1fr;gap:14px} .trust small{display:none} /* Sauf les moyens de paiement : information décisive à Abidjan. +54 px. */ .trust li:nth-child(2) small{display:block} .ftr .g{grid-template-columns:1fr 1fr} .ftr .fbrand{grid-column:1/-1} .card .bd{padding:0 12px 12px} .card .act{padding:0 12px 12px} .card .im{padding:var(--s4)} .card .t{font-size:13.5px} .reass,.safe{grid-template-columns:1fr} .pay{grid-template-columns:1fr} .wab{text-align:left} .sec-h{flex-direction:column;align-items:flex-start;gap:10px} .ci{grid-template-columns:64px 1fr;gap:12px} .ci .im{width:64px;height:64px} .ci .pr{grid-column:2;text-align:left;margin-top:4px} .ci .rm{justify-content:flex-start} .visual figcaption{padding:24px var(--s4) var(--s4);flex-direction:column;align-items:flex-start;gap:12px} .visual .k{font-size:17px} .guided{gap:8px} .guided a{min-height:44px;padding:0 14px 0 12px;font-size:13px} .advband .stack figure{width:96px} .guided.cols{grid-template-columns:1fr} .done .tl{padding:var(--s5)} } @media (max-width:520px){ /* CTA d'achat sur sa propre ligne : à 166 px il était comprimé à 40 px. */ .card .act{flex-wrap:wrap} .card .act .btn:not(.ico){flex:1 0 100%} .cats{grid-template-columns:repeat(2,1fr)} .hero .cta .btn{flex:1 1 100%} .tiles{grid-template-columns:1fr} .ctas .row{grid-template-columns:1fr} .toast{left:var(--s3);right:var(--s3);transform:translateY(16px);max-width:none} .toast.on{transform:none} } /* Impression : catalogue lisible, chrome retiré. */ @media print{ .hdr,.mb,.fwa,.stick,.dr,.ov,.toast,.ann,.skip,.fbar,.flt,.ftr .freass{display:none!important} body{padding:0;background:#fff;color:#000} .card,.pane,.sum{break-inside:avoid;border-color:#ccc} a[href^="#"]::after{content:""} } /* Respect strict de « réduire les animations ». */ @media (prefers-reduced-motion:reduce){ html.js{scroll-behavior:auto} *,*::before,*::after{ animation-duration:.01ms!important;animation-iteration-count:1!important; animation-delay:0ms!important; transition-duration:.01ms!important;transition-delay:0ms!important; scroll-behavior:auto!important; } .story figure,.spot figure{transform:none!important} .js .rv{opacity:1;transform:none} .card:hover{transform:none} .card:hover .im img{transform:none} } /* Contraste renforcé : on épaissit les filets plutôt que de changer les teintes. */ @media (prefers-contrast:more){ :root{--line:#8A8A93;--line-2:#5A5A63;--muted:#4A4A52} .btn.line,.card,.pane,.sum{border-width:1.5px} }