:root{
    --mint:#1F9E76;
    --mint-dark:#167A5B;
    --mint-light:#E7F7F1;
    --navy:#101B2D;
    --ink:#2B3542;
    --muted:#6B7684;
    --border:#E7E9ED;
    --bg:#FFFFFF;
    --radius:6px;
    --serif:'Playfair Display',Georgia,serif;
    --mono:'JetBrains Mono','SF Mono','Courier New',monospace;
    --ease:cubic-bezier(.2,.7,.2,1);
  }
  *{box-sizing:border-box;margin:0;padding:0;}
  body{
    font-family:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
    color:var(--ink);
    background:var(--bg);
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }
  svg.ic{width:1em;height:1em;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;display:inline-block;vertical-align:-0.15em;}
  img{max-width:100%;display:block;}
  a{color:inherit;text-decoration:none;}
  /* padding-left/right et non le raccourci : padding:0 24px remettrait
     le rembourrage vertical des sections a zero, elles portent aussi
     la classe .container */
  .container{max-width:1180px;margin:0 auto;padding-left:24px;padding-right:24px;}
  /* every section opens with a lab label */
  .eyebrow{
    font-family:var(--mono);color:var(--muted);font-weight:500;font-size:11px;
    letter-spacing:.16em;text-transform:uppercase;text-align:center;
  }
  h1,h2,h3{color:var(--navy);letter-spacing:-0.01em;}
  h1,h2{font-family:var(--serif);font-weight:600;letter-spacing:-0.015em;}
  .js .reveal{opacity:0;transform:translateY(16px);transition:opacity .55s var(--ease), transform .55s var(--ease);}
  .reveal.in-view{opacity:1;transform:none;}
  /* children of a revealed section arrive one after another */
  .js .reveal .why-card, .js .reveal .review-card, .js .reveal .ws-tier, .js .reveal .guide-grid > div{
    opacity:0;transform:translateY(10px);
    transition:opacity .5s var(--ease), transform .5s var(--ease);transition-delay:calc(var(--i,0) * 45ms);
  }
  .reveal.in-view .why-card, .reveal.in-view .review-card, .reveal.in-view .ws-tier, .reveal.in-view .guide-grid > div{opacity:1;transform:none;}
  html{scroll-behavior:smooth;}
  :focus-visible{outline:2px solid var(--navy);outline-offset:3px;}
  .btn:active, .btn-view:active, .tab:active, .btn-link:active{transform:scale(.985);}
  @keyframes gridIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
  @keyframes bump{0%{transform:scale(1)}40%{transform:scale(1.4)}100%{transform:scale(1)}}
  @keyframes chromaDraw{to{stroke-dashoffset:0}}
  /* lab-trace motif: one clean peak, drawn on arrival */
  .chroma{display:block;width:100%;height:96px;overflow:visible;}
  .chroma-base{stroke:var(--border);stroke-width:1;fill:none;}
  .chroma-ticks line{stroke:var(--border);stroke-width:1;}
  .chroma-line{
    stroke:var(--navy);stroke-width:1.5;fill:none;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;
    stroke-dasharray:1400;stroke-dashoffset:1400;animation:chromaDraw 1.9s var(--ease) .25s forwards;
  }
  .chroma-sm{height:34px;}
  /* purity from the COA table, revealed on hover, always visible on touch screens */
  .purity-chip{
    position:absolute;right:10px;bottom:10px;font-family:var(--mono);font-size:10px;letter-spacing:.08em;
    color:var(--navy);background:#fff;border:1px solid var(--border);border-radius:3px;padding:3px 7px;
    opacity:0;transform:translateY(4px);transition:opacity .2s var(--ease), transform .2s var(--ease);pointer-events:none;
  }
  .product-card:hover .purity-chip{opacity:1;transform:none;}
  @media (hover:none){.purity-chip{opacity:1;transform:none;}}
  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
    *, *::before, *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;}
    .js .reveal, .js .reveal .why-card, .js .reveal .review-card, .js .reveal .ws-tier, .js .reveal .guide-grid > div{opacity:1;transform:none;}
    .chroma-line{stroke-dashoffset:0;}
  }
  .btn{
    display:inline-flex;align-items:center;justify-content:center;gap:6px;
    padding:13px 22px;border-radius:6px;font-weight:600;font-size:14.5px;letter-spacing:.01em;
    cursor:pointer;border:1px solid transparent;transition:.15s ease;
  }
  /* one primary action per screen, navy for contrast; mint stays an accent, not a button colour */
  .btn-primary{background:var(--navy);color:#fff;}
  .btn-primary:hover{background:#0A1220;}
  .btn-outline{background:#fff;color:var(--navy);border-color:var(--border);}
  .btn-outline:hover{border-color:var(--navy);}

  /* AGE GATE */
  .age-gate{
    position:fixed;inset:0;z-index:200;background:rgba(16,27,45,.55);backdrop-filter:blur(4px);
    display:flex;align-items:center;justify-content:center;padding:24px;
    transition:opacity .35s ease, visibility 0s linear .35s;
  }
  .age-gate.hide{opacity:0;visibility:hidden;pointer-events:none;}
  .age-gate-card{
    background:#fff;border-radius:6px;max-width:440px;width:100%;padding:40px 36px;text-align:center;
    box-shadow:0 30px 70px rgba(0,0,0,.25);
  }
  .age-gate-icon{color:var(--navy);display:flex;justify-content:center;font-size:26px;margin:0 auto 16px;}
  .age-gate-card h2{font-family:var(--serif);font-weight:600;font-size:21px;margin-bottom:12px;}
  .age-gate-card p{font-size:13.5px;color:var(--muted);line-height:1.65;margin-bottom:26px;}
  .age-gate-checks{text-align:left;margin-bottom:20px;display:flex;flex-direction:column;gap:10px;}
  .age-gate-checks label{display:flex;align-items:flex-start;gap:9px;font-size:12.5px;color:var(--ink);line-height:1.5;cursor:pointer;}
  .age-gate-checks input{margin-top:2px;accent-color:var(--navy);width:15px;height:15px;flex-shrink:0;}
  .age-gate-actions{display:flex;flex-direction:column;gap:12px;}
  .age-gate-actions .btn:disabled{opacity:.45;cursor:not-allowed;}
  .age-gate-no{font-size:12.5px;color:var(--muted);text-decoration:underline;}
  .age-gate-fine{font-size:10.5px;color:var(--muted);margin-top:16px;margin-bottom:0;line-height:1.5;}

  /* ACTIVITY TOAST */

  /* COA MODAL */
  .coa-modal{
    display:flex;position:fixed;inset:0;z-index:225;background:rgba(16,27,45,.6);backdrop-filter:blur(4px);
    align-items:center;justify-content:center;padding:24px;
    opacity:0;visibility:hidden;transition:opacity .22s ease, visibility 0s linear .22s;
  }
  .coa-modal.show{opacity:1;visibility:visible;transition:opacity .22s ease;}
  .coa-card{
    background:#fff;border-radius:6px;max-width:480px;width:100%;max-height:88vh;overflow-y:auto;
    box-shadow:0 30px 70px rgba(0,0,0,.3);position:relative;
    transform:translateY(12px) scale(.985);transition:transform .28s var(--ease);
  }
  .coa-modal.show .coa-card{transform:none;}
  .coa-close{
    position:absolute;top:10px;right:12px;background:none;border:none;font-size:22px;color:var(--muted);
    cursor:pointer;line-height:1;padding:6px 8px;
  }
  .coa-head{
    display:flex;align-items:flex-start;justify-content:space-between;padding:24px 44px 18px 28px;
    border-bottom:1px solid var(--navy);
  }
  .coa-trace{display:flex;align-items:flex-end;gap:12px;margin:2px 0 14px;padding-bottom:12px;border-bottom:1px solid var(--border);}
  .coa-trace .chroma{flex:1;}
  .coa-trace span{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);white-space:nowrap;padding-bottom:6px;}
  .coa-trace .chroma-line{animation-duration:1.2s;animation-delay:.35s;}
  /* printing the certificate prints only the certificate */
  @media print{
    @page{margin:14mm;}
    body > *:not(#coaModal){display:none!important;}
    .coa-modal{position:static;display:block;opacity:1;visibility:visible;background:none;backdrop-filter:none;padding:0;}
    .coa-card{max-width:none;max-height:none;overflow:visible;box-shadow:none;transform:none;border:1px solid #000;border-radius:0;}
    .coa-close, .coa-foot-actions{display:none!important;}
    .coa-trace .chroma-line{animation:none;stroke-dashoffset:0;}
    .coa-table td.pass{color:#000;}
  }
  .coa-brand{font-weight:800;font-size:16px;display:flex;align-items:center;gap:8px;}
  .coa-logo-img{height:22px;width:auto;}
  .coa-head-right{text-align:right;}
  .coa-doc-title{font-weight:600;font-size:13px;color:var(--navy);}
  .coa-ref{font-family:var(--mono);font-size:11.5px;color:var(--muted);margin-top:2px;}
  .coa-body{padding:20px 28px;}
  .coa-row{display:flex;justify-content:space-between;gap:12px;font-size:13px;padding:7px 0;border-bottom:1px solid var(--border);}
  .coa-row span{color:var(--muted);}
  .coa-row b{font-family:var(--mono);color:var(--navy);text-align:right;}
  .coa-table{width:100%;border-collapse:collapse;margin-top:16px;font-size:12.5px;}
  .coa-table th{text-align:left;color:var(--muted);font-family:var(--mono);font-weight:500;font-size:10px;letter-spacing:.1em;text-transform:uppercase;padding:6px 4px;border-bottom:1px solid var(--border);}
  .coa-table td{padding:8px 4px;border-bottom:1px solid var(--border);color:var(--ink);}
  .coa-table td.pass{font-family:var(--mono);color:var(--mint-dark);font-weight:700;}
  .coa-note{font-size:11.5px;color:var(--muted);margin-top:14px;line-height:1.5;}
  .coa-foot{
    padding:14px 28px;border-top:1px solid var(--border);font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;
    text-transform:uppercase;color:var(--muted);
    display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  }
  .coa-foot-actions{display:flex;gap:8px;}
  .coa-foot-actions button{
    padding:9px 14px;border-radius:6px;font-family:'Inter',sans-serif;font-size:12.5px;font-weight:600;letter-spacing:0;
    text-transform:none;cursor:pointer;border:1px solid var(--border);background:#fff;color:var(--navy);transition:.15s ease;
  }
  .coa-foot-actions button:hover{border-color:var(--navy);}
  .coa-foot-actions button.coa-buy{background:var(--navy);color:#fff;border-color:var(--navy);}
  .coa-foot-actions button.coa-buy:hover{background:#0A1220;}
  @media(max-width:480px){.coa-foot{flex-direction:column;align-items:flex-start;}}

  /* MINIMAL CARD + PRODUCT DETAIL MODAL */
  .product-card .product-detail{display:none;}
  .card-foot{
    display:flex;align-items:center;justify-content:space-between;gap:14px;
    margin-top:auto;padding-top:16px;border-top:1px solid var(--border);
  }
  .product-card .desc{margin-bottom:20px;}
  .from-price{font-family:var(--mono);font-size:13px;color:var(--muted);}
  .btn-view{
    display:inline-block;text-decoration:none;
    background:none;border:1px solid var(--border);border-radius:6px;padding:9px 16px;
    font-family:inherit;font-size:13px;font-weight:600;color:var(--navy);cursor:pointer;transition:.15s ease;
  }
  .btn-view:hover{border-color:var(--navy);}
  .product-modal{
    display:flex;position:fixed;inset:0;z-index:215;background:rgba(16,27,45,.45);
    align-items:flex-start;justify-content:center;padding:40px 20px;overflow-y:auto;
    opacity:0;visibility:hidden;transition:opacity .22s ease, visibility 0s linear .22s;
  }
  .product-modal.show{opacity:1;visibility:visible;transition:opacity .22s ease;}
  .product-modal-panel{
    background:#fff;border-radius:6px;max-width:640px;width:100%;position:relative;
    box-shadow:0 30px 80px rgba(16,27,45,.22);padding:40px 40px 34px;
    transform:translateY(14px) scale(.985);transition:transform .28s var(--ease);
  }
  .product-modal.show .product-modal-panel{transform:none;}
  .product-modal-close{
    position:absolute;top:16px;right:16px;background:none;border:1px solid var(--border);
    border-radius:50%;width:30px;height:30px;font-size:17px;color:var(--muted);cursor:pointer;line-height:1;
  }
  .pm-head{display:flex;gap:30px;align-items:flex-start;margin-bottom:8px;}
  .pm-media{
    width:176px;height:176px;flex-shrink:0;
    display:flex;align-items:center;justify-content:center;background:var(--media-bg,#fff);border-radius:6px;
  }
  .pm-media img{max-height:164px;max-width:100%;width:auto;}
  .pm-cat{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);}
  .pm-head h2{font-family:var(--serif);font-weight:500;font-size:27px;margin:8px 0 10px;letter-spacing:-0.01em;}
  .pm-desc{color:var(--muted);font-size:14.5px;line-height:1.65;}
  .product-modal .product-detail{display:block;}
  /* on phones the sheet slides up from the bottom */
  @media(max-width:600px){
    .product-modal{align-items:flex-end;padding:0;}
    .product-modal-panel{
      border-radius:14px 14px 0 0;max-height:92vh;overflow-y:auto;
      padding:14px 20px calc(24px + env(safe-area-inset-bottom));transform:translateY(40px);
    }
    .product-modal-panel::before{content:'';display:block;width:36px;height:4px;border-radius:2px;background:var(--border);margin:0 auto 20px;}
    .product-modal.show .product-modal-panel{transform:none;}
    .pm-head{flex-direction:row;gap:16px;align-items:center;}
    .pm-media{width:88px;height:88px;}
    .pm-media img{max-height:84px;}
    .pm-head h2{font-size:23px;margin:4px 0 6px;}
  }

  /* MINIMAL SECTION SYSTEM */
  .section-sub{color:var(--muted);font-size:15px;max-width:52ch;margin:12px auto 0;}

  /* WHOLESALE + GUIDE */
  .wholesale, .guide{padding-top:110px;padding-bottom:110px;border-top:1px solid var(--border);text-align:center;}
  .wholesale h2, .guide h2{font-weight:500;letter-spacing:-0.015em;font-size:clamp(26px,3.4vw,34px);}
  .ws-tiers{display:grid;grid-template-columns:repeat(4,1fr);gap:36px;margin:54px 0 36px;text-align:left;}
  .ws-tier b{display:block;font-family:var(--mono);font-size:26px;color:var(--navy);}
  .ws-tier span{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:8px 0 10px;}
  .ws-tier p{font-size:13.5px;color:var(--muted);line-height:1.6;}
  .ws-note{font-size:14px;color:var(--muted);padding-top:26px;border-top:1px solid var(--border);}
  .ws-note a, .guide-links a{color:var(--navy);font-weight:600;border-bottom:1px solid var(--border);padding-bottom:2px;}
  .guide-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px 56px;margin:50px 0 36px;text-align:left;}
  .guide-grid h3{font-size:15.5px;margin-bottom:10px;}
  .guide-grid h3 + p{margin-bottom:30px;}
  .guide-grid p{font-size:14.5px;color:var(--muted);line-height:1.75;}
  .guide-links{display:flex;gap:30px;justify-content:center;flex-wrap:wrap;font-size:14px;padding-top:26px;border-top:1px solid var(--border);}
  @media(max-width:860px){.ws-tiers{grid-template-columns:repeat(2,1fr);}.guide-grid{grid-template-columns:1fr;gap:0;}}
  @media(max-width:600px){.wholesale,.guide{padding-top:70px;padding-bottom:70px;}.ws-tiers{gap:26px;margin:36px 0 28px;}}

  /* CART DRAWER */
  .cart-drawer{
    position:fixed;inset:0;z-index:220;background:rgba(16,27,45,.5);backdrop-filter:blur(2px);
    opacity:0;visibility:hidden;transition:opacity .25s ease, visibility 0s linear .3s;
  }
  .cart-drawer.show{opacity:1;visibility:visible;transition:opacity .25s ease;}
  .cart-drawer-panel{
    position:absolute;top:0;right:0;bottom:0;width:100%;max-width:420px;background:#fff;
    display:flex;flex-direction:column;box-shadow:-20px 0 50px rgba(0,0,0,.2);
    transform:translateX(100%);transition:transform .32s var(--ease);
  }
  .cart-drawer.show .cart-drawer-panel{transform:translateX(0);}
  .cart-drawer-head{
    display:flex;align-items:center;justify-content:space-between;padding:22px 24px;border-bottom:1px solid var(--border);
  }
  .cart-drawer-head h2{font-family:var(--serif);font-size:19px;font-weight:600;}
  .cart-drawer-head h2 span{font-family:var(--mono);font-size:14px;color:var(--muted);font-weight:400;}
  .cart-drawer-close{background:none;border:1px solid var(--border);border-radius:50%;width:28px;height:28px;font-size:16px;color:var(--muted);cursor:pointer;line-height:1;}
  .cart-drawer-body{flex:1;overflow-y:auto;padding:20px 24px;}
  .cart-empty{color:var(--muted);font-size:14px;text-align:center;padding:40px 10px;}
  .cart-empty a{color:var(--navy);font-weight:600;border-bottom:1px solid var(--border);}
  /* what ships with the order, stated as a spec line rather than a gift banner */
  .cart-bonus{
    display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:10px 0 14px;
    border-bottom:1px solid var(--border);margin-bottom:4px;font-family:var(--mono);font-size:12px;
  }
  .cart-bonus span{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);}
  .cart-bonus b{font-weight:500;color:var(--navy);text-align:right;}
  .cart-item{display:flex;gap:14px;padding:18px 0;border-bottom:1px solid var(--border);}
  .cart-item img{width:56px;height:56px;object-fit:contain;background:#fff;flex-shrink:0;}
  .cart-item-info{flex:1;min-width:0;}
  .cart-item-name{font-weight:600;font-size:14.5px;color:var(--navy);margin-bottom:3px;}
  .cart-item-tier{font-family:var(--mono);font-size:11.5px;color:var(--muted);}
  .cart-item-amt{font-family:var(--mono);color:var(--muted);font-size:11.5px;margin-left:8px;}
  .cart-item-bottom{display:flex;align-items:center;justify-content:space-between;margin-top:10px;}
  .cart-item-price{font-family:var(--mono);font-weight:600;color:var(--navy);font-size:14px;}
  .cart-item-stepper{display:flex;align-items:center;border:1px solid var(--border);border-radius:4px;}
  .cart-item-stepper button{background:none;border:none;width:26px;height:26px;font-size:14px;cursor:pointer;color:var(--navy);font-family:var(--mono);}
  .cart-item-stepper span{width:22px;text-align:center;font-size:12.5px;font-weight:600;font-family:var(--mono);}
  .cart-item-remove{color:var(--muted);font-family:var(--mono);font-size:10.5px;cursor:pointer;background:none;border:none;padding:0;margin-top:8px;text-transform:uppercase;letter-spacing:.08em;}
  .cart-item-remove:hover{color:#B54A3F;}
  .cart-drawer-foot{border-top:1px solid var(--border);padding:20px 24px;}
  .cart-total-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;font-family:var(--mono);font-size:10.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.12em;}
  .cart-total-row b{font-size:24px;color:var(--navy);letter-spacing:0;font-weight:500;}
  .cart-checkout{
    width:100%;background:var(--navy);color:#fff;padding:15px;font-size:14px;font-weight:600;border-radius:6px;
    display:flex;align-items:center;justify-content:center;gap:9px;letter-spacing:.01em;
  }
  .cart-checkout svg{color:#fff;opacity:.8;}
  .cart-checkout:hover{background:#0A1220;}
  .cart-checkout-note{font-size:11.5px;color:var(--muted);margin-top:14px;line-height:1.5;padding-top:14px;border-top:1px solid var(--border);}
  .cart-checkout-note b{color:var(--navy);}

  /* CART ADD TOAST */
  .cart-toast{
    position:fixed;top:90px;right:20px;z-index:230;background:#fff;border:1px solid var(--border);
    border-top:2px solid var(--navy);border-radius:6px;box-shadow:0 20px 50px rgba(0,0,0,.14);width:320px;overflow:hidden;
    opacity:0;visibility:hidden;transform:translateY(-8px);
    transition:opacity .25s var(--ease), transform .25s var(--ease), visibility 0s linear .25s;
  }
  .cart-toast.show{opacity:1;visibility:visible;transform:none;transition:opacity .25s var(--ease), transform .25s var(--ease);}
  .cart-toast-head{display:flex;align-items:center;gap:10px;padding:16px 18px;font-weight:600;font-size:13.5px;color:var(--navy);}
  .cart-toast-head svg{color:var(--navy);flex-shrink:0;}
  .cart-toast-head button{margin-left:auto;background:none;border:none;font-size:16px;color:var(--muted);cursor:pointer;}
  .cart-toast-actions{display:flex;border-top:1px solid var(--border);}
  .cart-toast-actions button{flex:1;padding:13px;font-size:11.5px;font-weight:700;border:none;background:#fff;cursor:pointer;color:var(--navy);text-transform:uppercase;letter-spacing:.03em;}
  .cart-toast-actions .cart-toast-buy{background:var(--navy);color:#fff;}
  @media(max-width:480px){.cart-toast{left:16px;right:16px;width:auto;}}

  /* ANNOUNCEMENT BAR */

  /* HEADER */
  header.site{
    position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);
    backdrop-filter:blur(8px);border-bottom:1px solid var(--border);
  }
  .header-row{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;}
  .logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:19px;}
  .logo-img{height:34px;width:auto;display:block;}
  .header-actions{display:flex;align-items:center;gap:18px;}
  .cart{display:flex;align-items:center;gap:8px;font-weight:600;font-size:14px;color:var(--muted);background:none;border:none;cursor:pointer;font-family:inherit;padding:0;}
  .cart .badge{
    background:#C9D0D8;color:#fff;font-size:11px;font-weight:600;font-family:var(--mono);
    width:19px;height:19px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:background .2s ease;
  }
  .cart .badge.has{background:var(--navy);}
  .cart .badge.bump{animation:bump .35s var(--ease);}

  /* SUBNAV */
  .subnav{
    display:none;position:sticky;top:65px;z-index:40;background:rgba(255,255,255,.96);backdrop-filter:blur(8px);
    border-bottom:1px solid var(--border);
  }
  .subnav.show{display:block;}
  .subnav-row{display:flex;gap:30px;justify-content:center;padding:0 24px;font-size:13px;font-weight:600;color:var(--muted);overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
  .subnav-row::-webkit-scrollbar{display:none;}
  .subnav-row a{padding:14px 0 12px;border-bottom:2px solid transparent;white-space:nowrap;transition:color .15s ease, border-color .15s ease;}
  .subnav-row a:hover{color:var(--navy);}
  .subnav-row a.active{color:var(--navy);border-bottom-color:var(--navy);}

  /* HERO */
  .hero{padding:130px 0 80px;max-width:780px;margin:0 auto;text-align:left;}
  .hero-eyebrow{
    font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
    color:var(--muted);margin-bottom:28px;
  }
  .hero h1{
    font-size:clamp(38px,5.6vw,60px);font-weight:500;line-height:1.12;letter-spacing:-0.02em;
    color:var(--navy);margin-bottom:24px;max-width:16ch;
  }
  .hero p.sub{
    max-width:52ch;margin:0 0 40px;color:var(--muted);font-size:17px;line-height:1.7;
  }
  .hero-actions{display:flex;align-items:center;gap:26px;flex-wrap:wrap;margin-bottom:44px;}
  .hero-link{font-size:14px;font-weight:600;color:var(--navy);border-bottom:1px solid var(--border);padding-bottom:2px;}
  .hero-link:hover{border-bottom-color:var(--navy);}
  .hero-meta{
    font-family:var(--mono);font-size:11.5px;color:var(--muted);letter-spacing:.02em;
    padding-top:26px;border-top:1px solid var(--border);
  }
  .btn-dark{background:var(--navy);color:#fff;padding:15px 26px;border-radius:6px;font-size:14px;font-weight:600;letter-spacing:.01em;}
  .btn-dark:hover{background:#000;}

  /* CERTIFICATE PANEL */
  .cert-panel{border:1px solid var(--border);border-radius:6px;margin:32px 0 80px;background:#fff;}
  .cert-head{
    display:flex;align-items:center;gap:16px;padding:24px 32px;border-bottom:1px solid var(--border);
  }
  .cert-icon{color:var(--navy);display:flex;font-size:22px;flex-shrink:0;}
  .cert-title{font-family:var(--serif);font-weight:500;font-size:18px;color:var(--navy);}
  .cert-sub{font-size:13px;color:var(--muted);margin-top:2px;}
  .cert-link{
    margin-left:auto;font-size:13px;font-weight:600;color:var(--navy);white-space:nowrap;
    border-bottom:1px solid var(--border);padding-bottom:2px;transition:border-color .15s ease;
  }
  .cert-link:hover{border-color:var(--navy);}
  /* the trace is the roof of the panel: its peak stands above the purity figure,
     and a dotted guide drops onto it so the number reads off the graph */
  .cert-trace{border-bottom:1px solid var(--border);}
  .chroma-holder{position:relative;}
  .trace-drop{position:absolute;left:12.5%;top:87.5%;height:72px;border-left:1px dashed #C9D0D8;transition:border-color .15s var(--ease);}
  /* measurement cursor: the trace reads like a detector output */
  .trace-scan, .trace-dot, .trace-read{position:absolute;opacity:0;pointer-events:none;transition:opacity .15s var(--ease);}
  .trace-scan{top:0;bottom:0;width:0;border-left:1px solid #C9D0D8;}
  .trace-dot{width:7px;height:7px;margin:-4px 0 0 -4px;border-radius:50%;background:var(--navy);}
  .trace-read{
    top:8px;right:32px;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
    color:var(--navy);background:#fff;border:1px solid var(--border);border-radius:3px;padding:4px 9px;white-space:nowrap;
  }
  .chroma-holder.reading .trace-scan, .chroma-holder.reading .trace-dot, .chroma-holder.reading .trace-read{opacity:1;}
  .cert-panel.at-peak .trace-drop{border-left-color:var(--navy);}
  .cert-panel.at-peak .stats > div:first-child{background:#FAFBFC;}
  @media (hover:hover){.js .chroma-holder{cursor:crosshair;}}
  .chroma-labels{
    display:flex;justify-content:space-between;font-family:var(--mono);font-size:10.5px;color:var(--muted);
    letter-spacing:.06em;text-transform:uppercase;padding:6px 32px 14px;
    /* the left label starts past the peak so the dotted guide runs through clear space */
    padding-left:calc(12.5% + 22px);
  }

  /* STATS */
  .stats{display:grid;grid-template-columns:repeat(4,1fr);text-align:center;}
  .stats > div{padding:30px 16px;}
  .stats > div + div{border-left:1px solid var(--border);}
  .stats .num{font-size:30px;font-family:var(--mono);font-weight:500;color:var(--navy);letter-spacing:-0.01em;}
  .stats .lbl{font-family:var(--mono);font-size:10.5px;color:var(--muted);letter-spacing:.12em;text-transform:uppercase;margin-top:8px;}

  /* REVIEWS, the photo is the anchor of the card, the quote is set in italic serif */
  .reviews{padding-top:40px;padding-bottom:100px;text-align:center;}
  .reviews h2{font-size:clamp(28px,4vw,38px);font-weight:500;letter-spacing:-0.015em;margin:12px 0 18px;}
  .review-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0 44px;text-align:left;margin-top:58px;}
  .review-card{margin:0;border-top:1px solid var(--border);padding:26px 0 32px;display:flex;flex-direction:column;}
  /* romain et non italique : un pave en italique se lit mal et sonne
     comme une insistance, alors que la citation doit juste etre lue */
  .review-card blockquote{margin:0;font-family:var(--serif);font-weight:500;font-size:17px;line-height:1.58;color:var(--navy);}
  .review-card:not(.has-photo) blockquote{font-size:18px;position:relative;}
  /* le guillemet de 88px prenait la moitie de la carte pour rien */
  .review-card:not(.has-photo) blockquote::before{
    content:none;
  }
  .review-card figcaption{margin-top:auto;padding-top:22px;font-size:13.5px;color:var(--muted);}
  .review-card figcaption b{color:var(--navy);font-weight:600;}
  .rev-meta{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:6px;}
  .rev-thumb{
    display:block;width:100%;padding:0;border:none;border-radius:6px;overflow:hidden;background:#F3F4F6;
    cursor:zoom-in;position:relative;margin-bottom:22px;
  }
  .rev-thumb img{width:100%;height:auto;max-height:340px;object-fit:cover;display:block;transition:transform .6s var(--ease);}
  .rev-thumb:hover img{transform:scale(1.025);}
  .rev-zoom{
    position:absolute;right:10px;bottom:10px;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
    background:#fff;color:var(--navy);border:1px solid var(--border);border-radius:3px;padding:4px 8px;
    opacity:0;transform:translateY(4px);transition:opacity .2s var(--ease), transform .2s var(--ease);
  }
  .rev-thumb:hover .rev-zoom, .rev-thumb:focus-visible .rev-zoom{opacity:1;transform:none;}
  @media (hover:none){.rev-zoom{opacity:1;transform:none;}}
  .lightbox{
    display:flex;position:fixed;inset:0;z-index:230;background:rgba(16,27,45,.85);
    backdrop-filter:blur(4px);align-items:center;justify-content:center;padding:32px;
    opacity:0;visibility:hidden;transition:opacity .22s ease, visibility 0s linear .22s;
  }
  .lightbox.show{opacity:1;visibility:visible;transition:opacity .22s ease;}
  .lightbox img{transform:scale(.97);transition:transform .28s var(--ease);}
  .lightbox.show img{transform:none;}
  .lightbox img{max-width:min(880px,92vw);max-height:82vh;border-radius:6px;display:block;background:#fff;}
  .lb-close{
    position:absolute;top:14px;right:20px;background:none;border:none;color:#fff;
    font-size:34px;line-height:1;cursor:pointer;padding:6px 10px;
  }
  .lb-cap{
    position:absolute;bottom:24px;left:0;right:0;text-align:center;color:rgba(255,255,255,.72);
    font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  }

  /* CATALOGUE */
  .catalogue{padding-top:40px;padding-bottom:90px;}
  .cat-head{text-align:center;margin-bottom:34px;}
  .cat-head h2{font-size:clamp(28px,4vw,38px);}
  .cat-head p{color:var(--muted);margin-top:12px;font-size:15.5px;}
  .searchbar{
    max-width:560px;margin:30px auto 0;border:1px solid var(--border);border-radius:6px;
    padding:12px 16px;display:flex;align-items:center;gap:10px;color:var(--muted);font-size:14px;
    transition:border-color .15s ease;
  }
  .searchbar:focus-within{border-color:var(--navy);}
  .searchbar input{
    border:none;outline:none;background:none;font-family:inherit;font-size:14px;color:var(--ink);
    flex:1;min-width:0;
  }
  .searchbar input::placeholder{color:var(--muted);}
  .search-empty{
    display:none;max-width:560px;margin:12px auto 0;text-align:center;color:var(--muted);font-size:14px;
    padding:18px 0;border-bottom:1px solid var(--border);
  }
  .search-empty.show{display:block;}
  .search-empty a, .tab-note a{color:var(--navy);font-weight:600;border-bottom:1px solid var(--border);}
  /* category tabs as an underlined bar, scrollable on phones */
  .tabs{
    display:flex;gap:2px;justify-content:center;margin:26px 0 40px;border-bottom:1px solid var(--border);
    overflow-x:auto;scrollbar-width:none;
  }
  .tabs::-webkit-scrollbar{display:none;}
  .tab{
    padding:13px 15px;font-weight:500;font-size:13.5px;color:var(--muted);cursor:pointer;white-space:nowrap;
    border-bottom:2px solid transparent;margin-bottom:-1px;transition:color .15s ease, border-color .15s ease;
  }
  .tab:hover{color:var(--navy);}
  .tab.active{color:var(--navy);border-bottom-color:var(--navy);}
  .tab-note{
    display:none;text-align:center;color:var(--muted);font-size:14px;padding:26px 0;
    border-top:1px solid var(--border);border-bottom:1px solid var(--border);max-width:560px;margin:0 auto 30px;
  }
  .tab-note.show{display:block;}

  .product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;animation:gridIn .3s var(--ease) both;}
  @media(max-width:1100px){.product-grid{grid-template-columns:repeat(2,1fr);}}
  .product-card{
    border:1px solid var(--border);border-radius:var(--radius);padding:26px;background:#fff;position:relative;
    transition:border-color .25s ease;display:flex;flex-direction:column;
  }
  .product-card:hover{border-color:#C9D0D8;}
  .product-card h3{font-family:var(--serif);}
  .badge{font-size:11px;font-weight:800;letter-spacing:.04em;padding:4px 10px;border-radius:6px;text-transform:uppercase;}
  .product-media{
    background:var(--media-bg,#fff);border-radius:6px;overflow:hidden;position:relative;
    display:flex;align-items:center;justify-content:center;padding:18px;margin-bottom:16px;height:220px;
  }
  .product-media img{max-height:190px;width:auto;margin:0 auto;transition:transform .35s ease;}
  .product-card:hover .product-media img{transform:scale(1.04);}
  .cat-label{font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.14em;color:var(--mint-dark);text-transform:uppercase;}
  .product-card h3{font-size:21px;margin:6px 0 8px;}
  .product-card .desc{color:var(--muted);font-size:14px;margin-bottom:12px;}
  /* product sheet: quiet note, tier table, spec block, one primary action */
  .pm-note{font-size:14px;color:var(--muted);line-height:1.65;margin:0 0 24px;}
  .pm-label{
    font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
    padding-bottom:8px;border-bottom:1px solid var(--navy);
  }
  .duration-grid{margin-bottom:24px;}
  .dur{
    display:grid;grid-template-columns:22px 1fr 92px 92px 84px;align-items:center;column-gap:10px;
    padding:12px 6px 12px 2px;border-bottom:1px solid var(--border);cursor:pointer;
    font-family:var(--mono);font-size:13px;color:var(--navy);transition:background .15s ease;
  }
  .dur:hover{background:#FAFBFC;}
  .dur:focus-visible{outline:2px solid var(--navy);outline-offset:-2px;}
  .dur::before{
    content:'';grid-column:1;width:12px;height:12px;border-radius:50%;
    border:1.5px solid #C3CAD2;background:#fff;transition:.15s ease;
  }
  .dur .m{grid-column:2;font-family:'Inter',sans-serif;font-size:13.5px;font-weight:500;}
  .dur .amt{grid-column:3;color:var(--muted);text-align:right;}
  .dur .price{grid-column:4;font-weight:600;text-align:right;}
  .dur .permo{grid-column:5;color:var(--muted);text-align:right;font-size:12px;}
  .dur.chosen{background:#FAFBFC;}
  .dur.chosen::before{border-color:var(--navy);background:var(--navy);box-shadow:inset 0 0 0 2.5px #fff;}
  .dur.chosen .m{font-weight:600;}

  .pm-spec{font-family:var(--mono);font-size:12px;margin-bottom:28px;}
  .pm-spec>div{
    display:flex;justify-content:space-between;align-items:baseline;gap:16px;
    padding:9px 0;border-bottom:1px solid var(--border);
  }
  .pm-spec span{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);flex-shrink:0;}
  .pm-spec b{font-weight:500;color:var(--navy);text-align:right;}
  .pm-spec a{color:var(--navy);border-bottom:1px solid var(--border);transition:border-color .15s ease;}
  .pm-spec a:hover{border-color:var(--navy);}

  .card-actions{display:flex;align-items:center;gap:24px;}
  .add-cart{flex:1;padding:15px 22px;font-size:14px;}
  .btn-link{
    background:none;border:none;border-bottom:1px solid var(--border);padding:0 0 1px;
    font-family:inherit;font-size:13.5px;font-weight:500;color:var(--navy);cursor:pointer;white-space:nowrap;
    transition:border-color .15s ease, opacity .15s ease;
  }
  .btn-link:hover{border-color:var(--navy);}
  .btn-link.scanning{opacity:.45;}

  /* WHY US, an editorial list: sticky intro on the left, numbered rows on the right */
  .why{
    padding-top:100px;padding-bottom:100px;background:#fff;border-top:1px solid var(--border);
    display:grid;grid-template-columns:minmax(240px,360px) 1fr;gap:72px;align-items:start;
  }
  .why-intro{position:sticky;top:110px;text-align:left;}
  .why-intro .eyebrow{text-align:left;}
  .why h2{font-size:clamp(28px,3.4vw,38px);font-weight:500;letter-spacing:-0.015em;margin:12px 0 16px;line-height:1.15;}
  .why-lede{font-size:15.5px;color:var(--muted);line-height:1.65;max-width:34ch;}
  .why-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--border);}
  .why-card{display:grid;grid-template-columns:88px 1fr;gap:20px;padding:28px 0 30px;border-bottom:1px solid var(--border);align-items:start;}
  .why-idx{font-family:var(--serif);font-size:44px;line-height:.9;font-weight:500;color:var(--navy);opacity:.16;letter-spacing:-0.02em;transition:opacity .3s var(--ease);}
  .why-card:hover .why-idx{opacity:1;}
  .why-card h3{font-size:19px;font-weight:600;margin:4px 0 8px;letter-spacing:-0.01em;}
  .why-card p{font-size:15px;color:var(--muted);line-height:1.65;max-width:56ch;}
  .faq h2{text-align:center;margin-top:10px;font-size:clamp(28px,4vw,36px);font-weight:500;letter-spacing:-0.015em;}

  /* FAQ */
  .faq{padding-top:100px;padding-bottom:100px;}
  .faq-list{max-width:760px;margin:44px auto 0;border-top:1px solid var(--border);}
  .faq-item{border-bottom:1px solid var(--border);}
  .faq-q{
    padding:20px 0;display:flex;justify-content:space-between;align-items:center;gap:20px;cursor:pointer;
    font-weight:500;font-size:16px;color:var(--navy);transition:color .15s ease;
  }
  .faq-q:hover{color:#000;}
  .faq-q .plus{color:var(--muted);font-family:var(--mono);font-size:20px;font-weight:300;line-height:1;flex-shrink:0;transition:transform .25s var(--ease);}
  .faq-item.open .plus{transform:rotate(45deg);}
  /* answer height animates via grid rows, no magic max-height */
  .faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s var(--ease);color:var(--muted);font-size:14.5px;line-height:1.7;max-width:62ch;}
  .faq-a > div{overflow:hidden;padding-bottom:0;transition:padding .3s var(--ease);}
  .faq-item.open .faq-a{grid-template-rows:1fr;}
  .faq-item.open .faq-a > div{padding-bottom:22px;}
  .faq-more{text-align:center;margin-top:30px;}

  /* WHATSAPP CTA */
  .wa-cta{margin:0 auto;border-top:1px solid var(--border);padding:64px 24px;text-align:center;}
  .wa-cta .eyebrow{margin-bottom:14px;}
  .wa-cta h2{font-size:clamp(24px,3vw,30px);font-weight:500;letter-spacing:-0.015em;margin-bottom:14px;}
  .wa-cta p{color:var(--muted);max-width:560px;margin:0 auto 24px;line-height:1.65;}

  /* FINAL CTA */
  .final-cta{text-align:center;padding-top:100px;padding-bottom:100px;border-top:1px solid var(--border);}
  .final-cta h2{font-size:clamp(30px,5vw,46px);font-weight:500;letter-spacing:-0.015em;margin-bottom:16px;}
  .final-cta p{color:var(--muted);margin-bottom:26px;}
  .final-cta .actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}

  /* FOOTER */
  footer{border-top:1px solid var(--border);padding:56px 0 26px;background:#FAFBFC;}
  .research-strip{
    background:var(--navy);color:#C9D2DC;font-size:10.5px;font-weight:600;letter-spacing:.02em;
    text-align:center;padding:12px 20px;line-height:1.6;
  }
  .foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px;margin-bottom:40px;}
  .foot-grid h4{font-size:11px;letter-spacing:.12em;color:var(--muted);text-transform:uppercase;margin-bottom:14px;}
  .foot-grid ul{list-style:none;}
  .foot-grid li{margin-bottom:9px;font-size:14px;color:var(--muted);}
  .foot-brand{font-weight:800;font-size:19px;margin-bottom:10px;display:flex;align-items:center;gap:10px;}
  .foot-logo-img{height:30px;width:auto;}
  .foot-desc{color:var(--muted);font-size:14px;max-width:340px;margin-bottom:16px;}
  .foot-contact a{display:block;color:var(--navy);font-weight:600;font-size:14px;margin-bottom:6px;}
  .foot-bottom{border-top:1px solid var(--border);padding-top:22px;font-size:12.5px;color:var(--muted);text-align:center;}
  .foot-bottom .made{margin-top:6px;}

  @media(max-width:860px){
    .stats{grid-template-columns:repeat(2,1fr);}
    .stats > div + div{border-left:none;}
    .stats > div:nth-child(even){border-left:1px solid var(--border);}
    .stats > div:nth-child(n+3){border-top:1px solid var(--border);}
    .cert-head{flex-wrap:wrap;}
    .trace-drop{display:none;}
    .cert-link{margin-left:0;}
    .review-grid{grid-template-columns:1fr;}
    .product-grid{grid-template-columns:repeat(2,1fr);}
    .why{grid-template-columns:1fr;gap:44px;}
    .why-intro{position:static;}
    .foot-grid{grid-template-columns:1fr;}
    .tabs{justify-content:flex-start;}
  }

  @media(max-width:600px){
    .product-grid{grid-template-columns:1fr;}
    body{overflow-x:hidden;}
    .container{padding-left:16px;padding-right:16px;}
    .header-row{padding:12px 16px;gap:10px;}
    .logo-img{height:28px;}
    .header-actions{gap:10px;}
    .header-actions .btn-outline{padding:9px 14px;font-size:13px;}
    .cart{font-size:13px;}
    .hero{padding-top:56px;padding-bottom:36px;}
    .hero h1{margin-bottom:16px;}
    .hero p.sub{font-size:15px;margin-bottom:28px;}
    .hero-actions{margin-bottom:34px;}
    .chroma{height:72px;}
    .chroma-labels{padding:6px 20px 12px;}
    .cert-panel{margin:24px 0 56px;}
    .cert-head{padding:20px 20px;}
    .stats > div{padding:20px 10px;}
    .stats .num{font-size:24px;}
    .tabs{margin:22px -16px 30px;padding:0 16px;-webkit-mask-image:linear-gradient(90deg,#000 86%,transparent);mask-image:linear-gradient(90deg,#000 86%,transparent);}
    .tab{padding:12px 12px;font-size:13px;}
    .product-card{padding:18px;}
    .why{padding-top:64px;padding-bottom:64px;}
    .why-card{grid-template-columns:52px 1fr;gap:14px;padding:22px 0 24px;}
    .why-idx{font-size:30px;}
    .review-card blockquote{font-size:16.5px;}
    .review-card:not(.has-photo) blockquote{font-size:17px;}
    .dur{grid-template-columns:22px 1fr 78px 84px;font-size:12.5px;}
    .dur .permo{display:none;}
    .pm-spec>div{flex-direction:column;align-items:flex-start;gap:3px;}
    .pm-spec b{text-align:left;}
    .card-actions{flex-direction:column;align-items:stretch;gap:16px;}
    .btn-link{align-self:center;}
    .faq{padding-top:64px;padding-bottom:64px;}
    .faq-q{font-size:15px;padding:17px 0;}
    .final-cta{padding-top:64px;padding-bottom:64px;}
    .wa-cta{padding:48px 0;}
    .foot-grid{gap:28px;}
    .cart-drawer-panel{max-width:100%;}
    .cart-drawer-head, .cart-drawer-body, .cart-drawer-foot{padding-left:18px;padding-right:18px;}
    .coa-card{max-width:94vw;}
    .coa-head, .coa-body{padding-left:20px;padding-right:20px;}
    .age-gate-card{padding:32px 22px;max-width:94vw;}
    .research-strip{font-size:9.5px;padding:10px 14px;}
  }

  /* ===== PAGES GENEREES : fiche produit, categorie, catalogue ===== */
  .crumb{
    padding-top:26px;font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;
    color:var(--muted);display:flex;flex-wrap:wrap;gap:8px;align-items:center;
  }
  .crumb a{color:var(--muted);border-bottom:1px solid transparent;}
  .crumb a:hover{color:var(--navy);border-bottom-color:var(--border);}
  .crumb i{font-style:normal;opacity:.4;}
  .crumb span{color:var(--navy);}

  .product-page{padding-top:34px;padding-bottom:80px;}
  .product-solo{
    display:grid;grid-template-columns:minmax(0,400px) 1fr;column-gap:60px;align-items:start;
    border:none;border-radius:0;padding:0;
  }
  .product-solo:hover{border-color:transparent;}
  .product-solo .product-media{grid-column:1;grid-row:1 / span 4;height:auto;aspect-ratio:1/1;margin-bottom:0;}
  .product-solo .product-media img{max-height:none;width:100%;height:100%;object-fit:contain;}
  .product-solo .cat-label, .product-solo h1, .product-solo .desc, .product-solo .product-detail{grid-column:2;}
  .product-solo .product-detail{display:block;}
  .product-solo h1{
    font-family:var(--serif);font-weight:500;font-size:clamp(30px,4vw,42px);letter-spacing:-0.02em;
    margin:8px 0 14px;line-height:1.1;
  }
  .product-solo .desc{font-size:16.5px;color:var(--muted);line-height:1.65;margin-bottom:30px;}

  .related{padding-bottom:90px;}
  .related h2, .cat-block h2{font-size:20px;font-weight:600;margin-bottom:22px;letter-spacing:-0.01em;}
  .rel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
  .rel-grid.wide{grid-template-columns:repeat(4,1fr);}
  .rel-card{
    border:1px solid var(--border);border-radius:6px;padding:20px;display:flex;flex-direction:column;
    transition:border-color .2s var(--ease);
  }
  .rel-card:hover{border-color:var(--navy);}
  .rel-card img{width:100%;height:130px;object-fit:contain;margin-bottom:14px;}
  .rel-name{font-weight:600;color:var(--navy);font-size:15px;}
  .rel-desc{font-size:13px;color:var(--muted);line-height:1.55;margin-top:6px;}
  .rel-price{font-family:var(--mono);font-size:12px;color:var(--muted);margin-top:auto;padding-top:14px;}

  .cat-page{padding-top:34px;padding-bottom:80px;}
  .cat-page .eyebrow{text-align:left;}
  .cat-page h1{
    font-family:var(--serif);font-weight:500;font-size:clamp(30px,4.4vw,44px);letter-spacing:-0.02em;
    margin:12px 0 16px;
  }
  .cat-page .section-sub{margin:0 0 44px;max-width:64ch;}
  .cat-block{padding-top:44px;border-top:1px solid var(--border);margin-top:44px;}
  .cat-block h2 a{color:var(--navy);}
  .cat-block h2 span{font-family:var(--mono);font-size:12px;color:var(--muted);font-weight:400;margin-left:8px;}
  .cat-block > p{color:var(--muted);font-size:14.5px;margin:-14px 0 22px;}

  @media(max-width:860px){
    .product-solo{grid-template-columns:1fr;}
    .product-solo .product-media{grid-row:auto;max-width:360px;margin-bottom:24px;}
    .rel-grid, .rel-grid.wide{grid-template-columns:repeat(2,1fr);}
  }
  @media(max-width:600px){
    .rel-grid, .rel-grid.wide{grid-template-columns:1fr;}
    .product-page, .cat-page, .related{padding-bottom:56px;}
  }

  /* prose des fiches produit */
  .prose{max-width:74ch;margin-top:58px;padding-top:40px;border-top:1px solid var(--border);}
  .prose h2{font-size:19px;font-weight:600;letter-spacing:-0.01em;margin:38px 0 12px;}
  .prose h2:first-child{margin-top:0;}
  .prose p{font-size:15.5px;line-height:1.75;color:var(--ink);margin-bottom:16px;}
  .prose p:first-of-type{font-size:17px;color:var(--navy);line-height:1.65;}
  .spec-table{width:100%;border-collapse:collapse;margin:18px 0 24px;font-size:13.5px;}
  .spec-table th{
    text-align:left;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
    color:var(--muted);font-weight:500;padding:9px 12px 9px 0;border-bottom:1px solid var(--border);
    vertical-align:top;white-space:nowrap;
  }
  .spec-table td{
    padding:9px 12px 9px 0;border-bottom:1px solid var(--border);color:var(--navy);
    font-family:var(--mono);font-size:12.5px;
  }
  .spec-table thead th{color:var(--navy);}
  .spec-table tbody th{width:34%;}
  @media(max-width:600px){
    .prose{margin-top:40px;padding-top:30px;}
    .spec-table{font-size:12px;}
    .spec-table th, .spec-table td{padding-right:8px;}
  }

  .cat-head-link{margin-top:14px;font-size:14px;}
  .cat-head-link a{color:var(--navy);border-bottom:1px solid var(--border);padding-bottom:2px;}
  .cat-head-link a:hover{border-color:var(--navy);}
  .pm-full{
    display:block;margin-top:26px;padding-top:18px;border-top:1px solid var(--border);
    font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
    color:var(--muted);transition:color .15s var(--ease);
  }
  .pm-full:hover{color:var(--navy);}

  /* guides d'achat */
  .guide-page{padding-top:34px;padding-bottom:80px;}
  .guide-head{max-width:74ch;}
  .guide-head .eyebrow{text-align:left;}
  .guide-head h1{
    font-family:var(--serif);font-weight:500;font-size:clamp(30px,4.2vw,44px);letter-spacing:-0.02em;
    margin:12px 0 12px;line-height:1.12;
  }
  .guide-meta{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);}
  .guide-prose{margin-top:34px;padding-top:34px;}
  .guide-prose h3{font-size:16px;font-weight:600;margin:26px 0 8px;}
  .guide-cta{
    display:grid;grid-template-columns:96px 1fr;gap:20px;align-items:center;
    border:1px solid var(--border);border-radius:6px;padding:20px 22px;margin:28px 0 30px;background:#FAFBFC;
  }
  .guide-cta img{width:96px;height:96px;object-fit:contain;}
  .guide-cta-label{
    font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
  }
  .guide-cta b{display:block;font-size:19px;color:var(--navy);margin:4px 0 2px;}
  .guide-cta-price{display:block;font-family:var(--mono);font-size:12.5px;color:var(--muted);margin-bottom:14px;}
  .guide-cta .btn{padding:11px 18px;font-size:13.5px;}
  .compare-table td:last-child a{color:var(--navy);border-bottom:1px solid var(--border);}
  .compare-table td:last-child a:hover{border-color:var(--navy);}
  .guide-faq{max-width:none;margin:18px 0 0;}
  .guide-end{
    margin-top:40px;padding:26px;border:1px solid var(--border);border-radius:6px;background:#FAFBFC;
  }
  .guide-end p{margin-bottom:16px;}
  .guide-grid .rel-card{min-height:150px;}
  @media(max-width:600px){
    .guide-cta{grid-template-columns:1fr;text-align:left;}
    .guide-cta img{width:72px;height:72px;}
  }

  /* ------------------------------------------------------------------
     Reservation de place avant chargement.
     Sans ces regles, le navigateur ignore la taille d'une image tant
     qu'elle n'est pas arrivee, et la page saute au moment ou elle
     s'affiche. Les rapports declares sont ceux des fichiers, donc le
     rendu final est identique, seul le decalage disparait.
     Les vignettes d'avis et les logos etaient les seuls concernes :
     .product-media et .pm-media reservent deja par leur hauteur fixe. */
  .logo-img, .foot-logo-img, .coa-logo-img{aspect-ratio:764/221;}
  .rev-thumb img[src$="review-1.jpg"]{aspect-ratio:1080/607;}
  .rev-thumb img[src$="review-2.jpg"]{aspect-ratio:1080/897;}
  .rev-thumb img[src$="review-3.jpg"]{aspect-ratio:1400/506;}
  .rev-thumb img[src$="review-4.jpg"]{aspect-ratio:768/1024;}

  /* SELECTEUR DE PROTOCOLE */
  .finder .section-sub{max-width:660px;margin-bottom:0;}
  .finder-box{
    max-width:680px;margin:44px auto 0;border:1px solid var(--border);
    border-radius:var(--radius);background:#fff;overflow:hidden;
  }
  .finder-bar{height:2px;background:var(--border);}
  .finder-bar span{
    display:block;height:100%;width:0;background:var(--mint);
    transition:width .3s var(--ease);
  }
  .finder-step{padding:34px 34px 30px;}
  .finder-n{
    font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
    color:var(--muted);margin-bottom:12px;
  }
  .finder-step h2{font-family:var(--serif);font-weight:500;font-size:26px;margin-bottom:22px;}
  .finder-opts{display:flex;flex-direction:column;gap:10px;}
  .finder-opt{
    display:block;width:100%;text-align:left;cursor:pointer;
    padding:14px 16px;border:1px solid var(--border);border-radius:var(--radius);
    background:#fff;font:inherit;font-size:15px;font-weight:600;color:var(--ink);
    transition:border-color .18s var(--ease), background .18s var(--ease);
  }
  .finder-opt:hover{border-color:var(--navy);background:#FAFBFC;}
  .finder-opt small{
    display:block;margin-top:4px;font-size:13px;font-weight:400;color:var(--muted);
  }

  .finder-out{margin-top:44px;}
  .finder-out h2{font-family:var(--serif);font-weight:500;font-size:28px;margin-bottom:6px;}
  .finder-note{
    font-size:14px;color:var(--muted);background:#FAFBFC;border:1px solid var(--border);
    border-radius:var(--radius);padding:12px 16px;margin-bottom:24px;max-width:660px;
  }
  .finder-out .rel-grid{margin-top:26px;}
  .finder-again{margin-top:34px;}
  .finder-again .btn-link{font-size:14px;}

  @media(max-width:600px){
    .finder-step{padding:26px 20px 24px;}
    .finder-step h2{font-size:22px;}
  }

  .cat-finder{margin:-8px 0 34px;font-size:15px;}
  .cat-finder a{
    color:var(--navy);font-weight:600;
    border-bottom:1px solid var(--border);padding-bottom:2px;
  }
  .cat-finder a:hover{border-color:var(--navy);}

  /* selecteur, elements de la version approfondie */
  .finder-help{
    font-size:13.5px;color:var(--muted);line-height:1.6;
    margin:-12px 0 20px;max-width:520px;
  }
  .finder-back{margin:22px 0 0;padding:18px 34px 0;border-top:1px solid var(--border);}
  .finder-back .btn-link{font-size:13px;color:var(--muted);}
  .finder-back .btn-link:hover{color:var(--ink);}
  .finder-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 8px;}
  .finder-chips span{
    font-family:var(--mono);font-size:11px;letter-spacing:.06em;
    color:var(--muted);background:#FAFBFC;border:1px solid var(--border);
    border-radius:999px;padding:5px 11px;
  }
  .rel-card .rel-bac{
    display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;
    color:var(--mint-dark);margin-top:4px;
  }
  @media(max-width:600px){.finder-back{padding:16px 20px 0;}}

  /* bouton d'ouverture d'une grille plafonnee */
  .grid-more{
    display:block;width:100%;margin:22px 0 0;padding:14px 18px;
    background:#fff;border:1px solid var(--border);border-radius:var(--radius);
    font:inherit;font-size:14px;font-weight:600;color:var(--navy);cursor:pointer;
    transition:border-color .18s var(--ease), background .18s var(--ease);
  }
  .grid-more:hover{border-color:var(--navy);background:#FAFBFC;}
  .grid-more[hidden]{display:none;}

  /* --- section Buyer's guide --- */
  /* Quatre titres suivis de quatre paragraphes se lisaient comme un article.
     On reprend le motif deja present sur le site, celui de .why-card : un
     grand chiffre en serif estompe qui ancre chaque point et rend la section
     parcourable au lieu d'obliger a tout lire. */
  .guide-grid{counter-reset:pwguide;gap:0 56px;text-align:left;}
  .guide-grid h3{
    counter-increment:pwguide;position:relative;
    padding-left:66px;font-size:18px;font-weight:600;
    letter-spacing:-0.01em;line-height:1.3;margin:0 0 9px;
  }
  .guide-grid h3::before{
    content:counter(pwguide,decimal-leading-zero);
    position:absolute;left:0;top:-9px;
    font-family:var(--serif);font-size:40px;line-height:.9;font-weight:500;
    color:var(--navy);opacity:.16;letter-spacing:-0.02em;
    transition:opacity .3s var(--ease);
  }
  .guide-grid h3:hover::before{opacity:1;}
  .guide-grid h3 + p{
    padding-left:66px;font-size:15px;line-height:1.7;color:var(--muted);
    max-width:52ch;margin:0 0 30px;padding-bottom:30px;
    border-bottom:1px solid var(--border);
  }
  /* le dernier point d'une colonne n'a pas besoin de filet */
  .guide-grid > div > h3:last-of-type + p{
    border-bottom:none;margin-bottom:0;padding-bottom:0;
  }

  @media(max-width:860px){
    /* sur une colonne, la premiere moitie retrouve son filet de separation */
    .guide-grid > div:first-child > h3:last-of-type + p{
      border-bottom:1px solid var(--border);margin-bottom:30px;padding-bottom:30px;
    }
  }
  @media(max-width:600px){
    .guide-grid h3{padding-left:52px;font-size:17px;}
    .guide-grid h3::before{font-size:30px;top:-4px;}
    .guide-grid h3 + p{
      padding-left:52px;font-size:14.5px;margin-bottom:26px;padding-bottom:26px;
    }
  }

  /* --- rangee de liens : grille plutot que flex centre --- */
  .guide-links{
    display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));
    gap:0;margin-top:20px;padding-top:0;text-align:left;
    border-top:1px solid var(--border);
  }
  .guide-links a{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    padding:17px 20px 17px 0;border-bottom:1px solid var(--border);
    font-size:14px;
  }
  .guide-links a::after{content:"\2192";color:var(--muted);font-weight:400;}
  .guide-links a:hover{color:var(--mint-dark);}
  .guide-links a:hover::after{color:var(--mint-dark);}
  @media(max-width:600px){
    .guide-links{grid-template-columns:1fr;}
    .guide-links a{padding:15px 0;}
  }

  /* Sur deux colonnes l'oeil lit en travers : 01 02 sur la premiere ligne,
     03 04 sur la seconde. Le compteur suit l'ordre du document, qui est
     l'ordre des colonnes, donc on force la valeur au-dela de 860px.
     En dessous, tout est empile et le compteur redevient juste. */
  @media(min-width:861px){
    .guide-grid > div:nth-child(1) > h3:nth-of-type(1)::before{content:"01";}
    .guide-grid > div:nth-child(2) > h3:nth-of-type(1)::before{content:"02";}
    .guide-grid > div:nth-child(1) > h3:nth-of-type(2)::before{content:"03";}
    .guide-grid > div:nth-child(2) > h3:nth-of-type(2)::before{content:"04";}
  }

  /* --- courbe HPLC au doigt --- */
  /* pan-y laisse le defilement vertical passer, mais capte le glissement
     horizontal pour lire la trace : sans ca, le doigt fait defiler la page */
  .chroma-holder{touch-action:pan-y;}
  @media (hover:none){
    .chroma-holder::after{
      content:"Drag to read";
      /* au-dessus de la partie plate, a droite du pic : sous la courbe
         le repere tombait sur la legende HPLC TRACE / MAIN PEAK */
      position:absolute;right:2px;top:4px;text-align:right;
      font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;
      text-transform:uppercase;color:var(--muted);
      opacity:1;transition:opacity .2s var(--ease);pointer-events:none;
    }
    .chroma-holder.reading::after{opacity:0;}
    /* la pastille et le trait sont plus visibles au doigt qu'a la souris */
    .chroma-holder .trace-dot{width:9px;height:9px;margin:-5px 0 0 -5px;}
  }

  /* ================= WHOLESALE : paliers en cartes ================= */
  .ws-tiers{
    grid-template-columns:repeat(4,1fr);gap:16px;margin:48px 0 32px;
    counter-reset:wstier;
  }
  .ws-tier{
    counter-increment:wstier;position:relative;
    border:1px solid var(--border);border-radius:var(--radius);
    padding:24px 20px 22px;background:#fff;
    transition:border-color .22s var(--ease), background .22s var(--ease);
  }
  .ws-tier:hover{border-color:#C9D0D8;background:#FCFDFD;}
  /* le dernier palier est le haut de gamme : on le distingue sans crier */
  .ws-tier:last-child{background:#FAFBFC;border-color:#DDE2E8;}
  .ws-tier b{
    font-family:var(--mono);font-size:30px;line-height:1;
    letter-spacing:-0.02em;color:var(--navy);
  }
  .ws-tier span{
    display:inline-block;margin:12px 0 10px;padding:4px 9px;
    font-family:var(--mono);font-size:9.5px;letter-spacing:.11em;
    text-transform:uppercase;color:var(--mint-dark);
    background:var(--mint-light);border-radius:999px;
  }
  .ws-tier p{font-size:13.5px;color:var(--muted);line-height:1.6;margin:0;}
  /* un trait relie les paliers pour lire la progression de gauche a droite */
  .ws-tier:not(:last-child)::after{
    content:"";position:absolute;top:50%;right:-16px;width:16px;height:1px;
    background:var(--border);
  }

  @media(max-width:860px){
    .ws-tiers{grid-template-columns:repeat(2,1fr);gap:14px;}
    /* en deux colonnes le trait ne relierait plus rien de coherent */
    .ws-tier:not(:last-child)::after{display:none;}
  }
  @media(max-width:600px){
    .ws-tiers{gap:12px;margin:34px 0 26px;}
    .ws-tier{padding:20px 16px 18px;}
    .ws-tier b{font-size:26px;}
  }

  /* ===================== FAQ : plus d'air et d'etats ===================== */
  .faq-q{
    padding-left:18px;padding-right:18px;border-radius:var(--radius);
    transition:background .18s var(--ease);
  }
  .faq-q:hover{background:#FAFBFC;}
  .faq-q .plus{
    display:inline-flex;align-items:center;justify-content:center;
    width:26px;height:26px;border:1px solid var(--border);border-radius:50%;
    font-size:15px;line-height:1;
    transition:transform .25s var(--ease), border-color .18s var(--ease),
               background .18s var(--ease), color .18s var(--ease);
  }
  .faq-q:hover .plus{border-color:#C9D0D8;}
  .faq-item.open .plus{
    background:var(--navy);border-color:var(--navy);color:#fff;
  }
  /* un liseret marque la question ouverte, on retrouve son debut d'un coup d'oeil */
  .faq-item{position:relative;}
  .faq-item::before{
    content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
    background:var(--mint);opacity:0;transition:opacity .22s var(--ease);
  }
  .faq-item.open::before{opacity:1;}
  .faq-a{padding-left:18px;padding-right:18px;}
  @media(max-width:600px){
    .faq-q{padding-left:14px;padding-right:14px;}
    .faq-a{padding-left:14px;padding-right:14px;}
  }

  /* --- panneau de conseils du selecteur --- */
  /* Il precede la liste de produits : ce qu'il faut verifier compte avant
     ce qu'il faut acheter, c'est la promesse du site. */
  .finder-advice{margin:26px 0 34px;}
  .fc-title{
    font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.16em;
    text-transform:uppercase;color:var(--muted);margin:0 0 16px;
  }
  .fc-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px;}
  .fc-item{
    border:1px solid var(--border);border-left:2px solid var(--mint);
    border-radius:var(--radius);padding:20px 22px;background:#FAFBFC;
  }
  .fc-item h3{font-size:15.5px;font-weight:600;margin:0 0 8px;letter-spacing:-0.01em;}
  .fc-item p{font-size:14px;line-height:1.65;color:var(--muted);margin:0 0 12px;max-width:54ch;}
  .fc-item a{
    font-size:13px;font-weight:600;color:var(--navy);
    border-bottom:1px solid var(--border);padding-bottom:2px;
  }
  .fc-item a:hover{border-color:var(--navy);}
  @media(max-width:600px){
    .fc-list{grid-template-columns:1fr;}
    .fc-item{padding:18px 16px;}
  }

  /* ============ temoignages : mise en forme ============ */
  /* deux colonnes pour un 2x2 plein, et align-items:start pour que chaque
     carte prenne sa hauteur au lieu d'etre etiree sur celle de sa voisine */
  .review-grid{
    grid-template-columns:repeat(2,1fr);gap:0 56px;align-items:start;
    max-width:940px;margin-left:auto;margin-right:auto;
  }
  .review-card{display:block;padding:28px 0 30px;}
  /* la signature suit la citation : margin-top:auto la plaquait en bas de la
     carte etiree et ouvrait un vide au milieu */
  .review-card figcaption{margin-top:0;padding-top:16px;}

  /* toutes les photos dans le meme cadre : sans ca, une photo portrait et une
     photo paysage cote a cote ne s'alignent sur rien */
  .rev-thumb{aspect-ratio:4/3;margin-bottom:18px;}
  .rev-thumb img{
    width:100%;height:100%;max-height:none;object-fit:cover;object-position:center 22%;
  }
  /* le rapport declare par fichier ne sert plus, le cadre est fixe */
  .rev-thumb img[src$="review-1.jpg"],
  .rev-thumb img[src$="review-2.jpg"],
  .rev-thumb img[src$="review-3.jpg"],
  .rev-thumb img[src$="review-4.jpg"]{aspect-ratio:auto;}

  /* une carte sans photo garde le meme depart que ses voisines */
  .review-card:not(.has-photo) blockquote{padding-top:0;}

  @media(max-width:860px){
    .review-grid{grid-template-columns:1fr;gap:0;max-width:none;}
    .review-card{padding:24px 0 26px;}
    .rev-thumb{aspect-ratio:3/2;margin-bottom:16px;}
  }

  /* une citation sans photo devient un panneau : elle prend la hauteur de sa
     voisine au lieu de laisser un blanc, et son fond remplit la place */
  .review-card:not(.has-photo){
    align-self:stretch;display:flex;flex-direction:column;justify-content:center;
    background:#FAFBFC;border:1px solid var(--border);border-left:2px solid var(--mint);
    border-radius:var(--radius);padding:30px 28px;
  }
  .review-card:not(.has-photo) blockquote{font-size:19px;line-height:1.5;}
  .review-card:not(.has-photo) figcaption{padding-top:20px;}
  @media(max-width:860px){
    .review-card:not(.has-photo){padding:24px 20px;}
    .review-card:not(.has-photo) blockquote{font-size:17px;}
  }