/* Polices servies depuis le serveur : aucun appel a Google. Licence OFL. */
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:400;font-display:swap;src:url('../fonts/cormorant-400-italic-latinext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:400;font-display:swap;src:url('../fonts/cormorant-400-italic-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/cormorant-400-normal-latinext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/cormorant-400-normal-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/cormorant-500-normal-latinext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/cormorant-500-normal-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/cormorant-600-normal-latinext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/cormorant-600-normal-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Jost';font-style:normal;font-weight:300;font-display:swap;src:url('../fonts/jost-300-normal-latinext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Jost';font-style:normal;font-weight:300;font-display:swap;src:url('../fonts/jost-300-normal-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Jost';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/jost-400-normal-latinext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Jost';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/jost-400-normal-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Jost';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/jost-500-normal-latinext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Jost';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/jost-500-normal-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@charset "UTF-8";
/* ==========================================================================
   Meirea — thème
   Registre : maison française, pierres et bijoux. Guérande & Vannes.
   Palette prise sur la devanture réelle : bleu nuit et or.
   Composition centrée, cartes blanches sur crème, filets ornementaux.
   ========================================================================== */

/* --- 1. Jetons ----------------------------------------------------------- */
:root{
  --creme:#FBF8F3;      /* fond de page */
  --creme2:#F4EDE1;     /* bande alternée */
  --creme3:#EDE4D4;
  --blanc:#FFFFFF;      /* les cartes */
  --nuit:#1E2A3A;       /* le bleu de la devanture */
  --nuit2:#2C3D53;
  --or:#B8934C;
  --or-clair:#D3B478;
  --or-pale:#EFE3CB;
  --encre:#232830;
  --gris:#6A6F77;
  --gris-clair:#9A9EA5;
  --filet:#E7DECE;
  --filet2:#D6C9B2;
  --rouge:#9C4A34;
  --vert:#4A6B57;
  --serif:"Cormorant Garamond",Cormorant,Garamond,"Iowan Old Style",Georgia,serif;
  --sans:"Jost",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --r:14px;             /* les cartes sont adoucies */
  --rb:2px;             /* les boutons restent nets */
  --ombre:0 10px 40px rgba(30,42,58,.07);
  --ombre-f:0 18px 54px rgba(30,42,58,.13);
}
@media (prefers-color-scheme: dark){
  :root{
    --creme:#14181E; --creme2:#191E26; --creme3:#20262F;
    --blanc:#1B2027; --nuit:#0F141A; --nuit2:#1A222C;
    --or:#C9A868; --or-clair:#DFC392; --or-pale:#3A3225;
    --encre:#F1EDE6; --gris:#A5A9B0; --gris-clair:#787D85;
    --filet:#2A313B; --filet2:#3A424E;
    --rouge:#C4705A; --vert:#7BA189;
    --ombre:0 10px 40px rgba(0,0,0,.34);
    --ombre-f:0 18px 54px rgba(0,0,0,.46);
  }
}
:root[data-theme="dark"]{
  --creme:#14181E; --creme2:#191E26; --creme3:#20262F;
  --blanc:#1B2027; --nuit:#0F141A; --nuit2:#1A222C;
  --or:#C9A868; --or-clair:#DFC392; --or-pale:#3A3225;
  --encre:#F1EDE6; --gris:#A5A9B0; --gris-clair:#787D85;
  --filet:#2A313B; --filet2:#3A424E;
  --rouge:#C4705A; --vert:#7BA189;
  --ombre:0 10px 40px rgba(0,0,0,.34); --ombre-f:0 18px 54px rgba(0,0,0,.46);
}
:root[data-theme="light"]{
  --creme:#FBF8F3; --creme2:#F4EDE1; --creme3:#EDE4D4;
  --blanc:#FFFFFF; --nuit:#1E2A3A; --nuit2:#2C3D53;
  --or:#B8934C; --or-clair:#D3B478; --or-pale:#EFE3CB;
  --encre:#232830; --gris:#6A6F77; --gris-clair:#9A9EA5;
  --filet:#E7DECE; --filet2:#D6C9B2;
  --rouge:#9C4A34; --vert:#4A6B57;
  --ombre:0 10px 40px rgba(30,42,58,.07); --ombre-f:0 18px 54px rgba(30,42,58,.13);
}

/* --- 2. Assise ----------------------------------------------------------- */
html{-webkit-text-size-adjust:100%}
body{
  background:var(--creme); color:var(--encre);
  font-family:var(--sans); font-size:16px; font-weight:400; line-height:1.7;
  -webkit-font-smoothing:antialiased; letter-spacing:.005em;
}
#wrapper,#main{background:transparent; padding-top:0}
#wrapper>.container{max-width:1280px}
img{max-width:100%; height:auto}
a{color:var(--encre); text-decoration:none; transition:color .18s}
a:hover,a:focus{color:var(--or); text-decoration:none}
:focus-visible{outline:2px solid var(--or); outline-offset:3px}
hr{border-color:var(--filet)}
::selection{background:var(--or-pale); color:var(--nuit)}

h1,h2,h3,h4,.h1,.h2,.h3,.h4{
  font-family:var(--serif); font-weight:500; color:var(--encre);
  letter-spacing:.002em; line-height:1.18; text-wrap:balance; margin-top:0;
}
h1,.h1{font-size:clamp(34px,4.4vw,54px); font-weight:400}
h2,.h2{font-size:clamp(26px,3.1vw,40px); font-weight:400}
h3,.h3{font-size:clamp(20px,2vw,25px)}
h4,.h4{font-size:19px}
p{margin:0 0 1.1em}
strong,b{font-weight:500}

/* Le filet doré sous un intertitre : la signature de la maison. */
.mr-eyebrow,.mr-sur{
  display:block; font-family:var(--sans); font-size:11px; font-weight:400;
  letter-spacing:.24em; text-transform:uppercase; color:var(--or);
}
.mr-tete{text-align:center; max-width:720px; margin:0 auto 44px}
.mr-tete .mr-eyebrow{margin-bottom:16px}
.mr-tete h2{margin:0 0 18px}
.mr-tete h2 em{font-style:italic; font-weight:400}
.mr-tete p{color:var(--gris); font-size:16.5px; margin:0}
.mr-filet{
  width:56px; height:1px; background:var(--or); border:0;
  margin:0 auto 18px; opacity:.85;
}

.price,.product-price,.regular-price,.quantity,.pagination,
.product-quantity input,.tax-shipping-delivery-label{font-variant-numeric:tabular-nums}

/* --- 3. Bandeaux de tête ------------------------------------------------- */
#header{background:transparent; color:var(--encre); box-shadow:none; border:0}
#header .header-banner{
  background:var(--nuit); border:0; color:var(--or-clair);
  font-size:12.5px; letter-spacing:.1em; text-align:center; padding:11px 0;
  font-weight:300;
}
#header .header-banner a{color:var(--or-clair); text-decoration:underline; text-underline-offset:3px}
#header .header-nav{
  background:var(--creme2); border-bottom:1px solid var(--filet);
  max-height:none; padding:9px 0; font-size:12px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--gris); font-weight:400;
}
#header .header-nav a{color:var(--gris)}
#header .header-nav a:hover{color:var(--or)}
#header .header-top{
  background:var(--creme); padding:22px 0 20px;
  border-bottom:1px solid var(--filet);
}
#header .header-top>.container>.row{align-items:center}
#header .logo,#header img.logo{max-height:66px; width:auto}
#_desktop_logo{display:flex; align-items:center}

#_desktop_user_info a,.user-info a,.blockcart a{
  font-size:11.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--gris); font-weight:400;
}
#_desktop_user_info a:hover,.blockcart a:hover{color:var(--or)}
.blockcart,.blockcart.active{background:transparent!important; padding:0}
.blockcart .cart-products-count{color:var(--or)}
#header .material-icons{color:var(--gris); vertical-align:middle; font-size:21px}
#header a:hover .material-icons{color:var(--or)}

/* Recherche */
#search_widget,.search-widgets{max-width:340px; margin-left:auto}
#search_widget form,.search-widgets form{position:relative}
#search_widget form input[type=text],.search-widgets input[type=text]{
  background:var(--blanc); border:1px solid var(--filet); border-radius:100px;
  color:var(--encre); padding:11px 40px 11px 42px; font-size:14px; width:100%;
  font-family:var(--sans); font-weight:300; box-shadow:none;
}
#search_widget form input::placeholder{color:var(--gris-clair)}
#search_widget form input:focus{border-color:var(--or); outline:none}
#search_widget form button[type=submit],#search_widget form .search,
.search-widgets .material-icons.search{
  position:absolute; left:14px; top:50%; transform:translateY(-50%);
  background:transparent; border:0; color:var(--gris-clair); padding:0;
  font-size:19px; line-height:1; pointer-events:none;
}
#search_widget form .clear,.search-widgets .material-icons.clear{
  position:absolute; right:13px; top:50%; transform:translateY(-50%);
  color:var(--gris-clair); font-size:18px; cursor:pointer;
}

/* --- 4. Menu principal --------------------------------------------------- */
#_desktop_top_menu{background:transparent; flex:1 1 auto; min-width:0}
.top-menu,#_desktop_top_menu .top-menu{background:transparent; margin:0}
.top-menu>li{border:0}
.top-menu a.dropdown-item,.top-menu>li>a{
  font-family:var(--sans); font-size:12.5px; font-weight:400;
  letter-spacing:.15em; text-transform:uppercase; color:var(--encre);
  padding:12px 16px; border:0; position:relative;
}
.top-menu>li>a:hover,.top-menu>li:hover>a{color:var(--or); background:transparent}
.top-menu>li>a::after{
  content:""; position:absolute; left:16px; right:16px; bottom:4px; height:1px;
  background:var(--or); transform:scaleX(0); transform-origin:center;
  transition:transform .26s cubic-bezier(.2,.6,.2,1);
}
.top-menu>li:hover>a::after,.top-menu>li.current>a::after{transform:scaleX(1)}
.top-menu .sub-menu,.top-menu .popover{
  background:var(--blanc); border:0; border-radius:var(--r);
  box-shadow:var(--ombre-f); margin-top:6px; padding:22px 26px;
}
.top-menu .sub-menu a{
  font-family:var(--sans); font-size:14px; font-weight:300; letter-spacing:0;
  text-transform:none; color:var(--gris); padding:6px 0;
}
.top-menu .sub-menu a:hover{color:var(--or)}
.menu-sub-item .h3,.top-menu .sub-menu li.category>a{
  font-family:var(--serif); font-size:17px; color:var(--encre); font-weight:500;
}

/* --- 5. Fil d'Ariane ----------------------------------------------------- */
.breadcrumb{
  background:transparent; padding:22px 0 0; margin:0;
  font-size:11.5px; letter-spacing:.13em; text-transform:uppercase; font-weight:300;
}
.breadcrumb li{display:inline}
.breadcrumb li a,.breadcrumb li span{color:var(--gris-clair)}
.breadcrumb li a:hover{color:var(--or)}
.breadcrumb li:not(:last-child)::after{content:"·"; color:var(--filet2); margin:0 9px}
.breadcrumb li:last-child span{color:var(--gris)}

/* --- 6. Boutons ---------------------------------------------------------- */
.btn,.btn-primary,.btn-secondary,.btn-tertiary,button.btn{
  border-radius:var(--rb); font-family:var(--sans); font-size:11.5px;
  letter-spacing:.19em; text-transform:uppercase; font-weight:400;
  padding:16px 32px; box-shadow:none;
  transition:background .2s,color .2s,border-color .2s,transform .2s;
}
.btn-primary,.btn-primary:not(:disabled):not(.disabled){
  background:var(--or); border:1px solid var(--or); color:#fff;
}
.btn-primary:hover,.btn-primary:focus,.btn-primary:active,
.btn-primary:not(:disabled):not(.disabled):active{
  background:var(--nuit); border-color:var(--nuit); color:#fff;
  box-shadow:none; transform:translateY(-1px);
}
.btn-secondary,.btn-tertiary{
  background:transparent; border:1px solid var(--filet2); color:var(--encre);
}
.btn-secondary:hover,.btn-tertiary:hover{
  background:var(--nuit); border-color:var(--nuit); color:#fff;
}
.btn-primary:disabled,.btn.disabled{
  background:var(--creme3); border-color:var(--filet); color:var(--gris-clair);
}
/* Le lien fléché doré, discret, qui clôt une carte. */
.mr-lien{
  font-size:11.5px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--or); font-weight:400; display:inline-flex; align-items:center; gap:8px;
}
.mr-lien::after{content:"→"; transition:transform .22s}
.mr-lien:hover::after{transform:translateX(4px)}

/* --- 7. Cartes et grilles produits -------------------------------------- */
/* Classic pose « .featured-products .products » en (0,2,0) : il faut la même. */
#products .products,.featured-products .products,.product-accessories .products,
.crossselling-products .products,.products,.product_list{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(228px,1fr));
  gap:24px; background:transparent; border:0; margin:0 0 40px; padding:0;
}
#products .products>*,.featured-products .products>*,
.product-accessories .products>*,.crossselling-products .products>*,
.products>*,.product_list>*{
  width:auto; max-width:none; min-width:0; flex:none;
  padding:0; margin:0; float:none; display:flex; flex-direction:column;
}
.product-miniature{
  display:flex; flex-direction:column; width:auto; margin:0; height:100%;
  background:var(--blanc); border-radius:var(--r); overflow:hidden;
  box-shadow:var(--ombre); transition:box-shadow .3s,transform .3s;
}
.product-miniature:hover{box-shadow:var(--ombre-f); transform:translateY(-3px)}
.product-miniature .thumbnail-container{
  width:auto; height:auto; margin:0; background:transparent;
  border:0; border-radius:0; box-shadow:none; padding:0;
  display:flex; flex-direction:column;
}
.product-miniature .thumbnail-container:hover{box-shadow:none}
.product-miniature .thumbnail-top{flex:0 0 auto}
.product-miniature .product-thumbnail{display:block; overflow:hidden; background:#fff}
.product-miniature .product-thumbnail img{
  width:100%; aspect-ratio:1/1; object-fit:cover; display:block;
  transition:transform .6s cubic-bezier(.2,.6,.2,1);
}
.product-miniature:hover .product-thumbnail img{transform:scale(1.055)}
.product-miniature .product-description{
  position:static; width:auto; height:auto; background:transparent;
  padding:20px 22px 22px; border:0; text-align:center; flex:1 1 auto;
  display:flex; flex-direction:column;
}
.product-miniature .product-title{margin:0 0 10px}
.product-miniature .product-title a{
  font-family:var(--serif); font-size:19px; line-height:1.28; font-weight:500;
  color:var(--encre); text-transform:none; letter-spacing:0;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.product-miniature:hover .product-title a{color:var(--or)}
.product-miniature .product-price-and-shipping{
  margin-top:auto; padding-top:12px; text-align:center;
}
.product-miniature .product-price-and-shipping .price,.product-miniature .price{
  font-family:var(--sans); font-size:16px; color:var(--or); font-weight:500;
  letter-spacing:.02em;
}
.product-miniature .regular-price{
  color:var(--gris-clair); font-size:13px; text-decoration:line-through; margin-right:8px;
}
.product-miniature .discount-percentage,.product-miniature .discount-amount{
  background:var(--rouge); color:#fff; border-radius:100px; font-size:11px;
  padding:2px 9px; margin-left:8px; letter-spacing:.04em;
}
.product-miniature .product-flags{top:14px; left:14px; margin:0; width:auto; z-index:2}
.product-miniature .product-flags li.product-flag{
  position:static; background:var(--blanc); color:var(--nuit);
  border:0; border-radius:100px; font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; padding:6px 13px; margin:0 0 7px;
  box-shadow:var(--ombre); min-height:0; line-height:1.4; font-weight:400;
}
.product-miniature .product-flag.discount,.product-miniature .product-flag.on-sale{
  background:var(--rouge); color:#fff;
}
.product-miniature .highlighted-informations,.product-miniature .variant-links,
.product-miniature .quick-view,.product-miniature .product-list-reviews{display:none}

/* --- 8. Page catégorie --------------------------------------------------- */
#category h1.h1,.block-category h1,.featured-products .products-section-title,
.subcategory-name,.subcategory-heading,.products-section-title{text-transform:none!important}

#js-product-list-header .block-category,.block-category.card,.block-category{
  min-height:0; background:transparent; border:0; border-radius:0;
  box-shadow:none; padding:0 0 30px; margin:0 0 34px;
  border-bottom:1px solid var(--filet); text-align:center;
}
.block-category h1{margin:20px 0 16px}
.block-category .block-category-inner{
  display:flex; gap:30px; align-items:center; justify-content:center;
  flex-direction:column;
}
.block-category .block-category-inner .category-cover{margin:0; flex:0 0 auto}
.block-category .block-category-inner .category-cover img{
  width:200px; height:200px; object-fit:cover; display:block;
  border:0; border-radius:50%; box-shadow:var(--ombre); background:#fff;
}
.block-category #category-description{margin:0 auto; color:var(--gris); max-width:74ch}

#subcategories,#subcategories.card{
  background:transparent; border:0; border-radius:0; box-shadow:none;
  padding:0; margin:0 0 50px;
}
#subcategories .subcategory-heading,#subcategories p.subcategory-heading{
  font-family:var(--serif); font-weight:400; font-size:clamp(25px,2.8vw,34px);
  color:var(--encre); border:0; padding:0; margin:0 0 30px;
  letter-spacing:.002em; text-align:center;
}
#subcategories ul.subcategories-list,#subcategories ul{
  list-style:none; margin:0; padding:0; border:0;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(196px,1fr)); gap:22px;
}
#subcategories ul>li{
  margin:0; padding:0; width:auto; max-width:none; flex:none; float:none;
  background:var(--blanc); border:0; border-radius:var(--r); overflow:hidden;
  box-shadow:var(--ombre); text-align:center; display:flex; flex-direction:column;
  transition:box-shadow .3s,transform .3s;
}
#subcategories ul>li:hover{box-shadow:var(--ombre-f); transform:translateY(-3px)}
#subcategories .subcategory-image{margin:0; padding:0}
#subcategories .subcategory-image a{display:block; overflow:hidden; background:#fff}
#subcategories .subcategory-image img{
  width:100%; aspect-ratio:1/1; object-fit:cover; display:block; max-width:none;
  border:0; border-radius:0; box-shadow:none;
  transition:transform .6s cubic-bezier(.2,.6,.2,1);
}
#subcategories ul>li:hover .subcategory-image img{transform:scale(1.055)}
#subcategories h5,#subcategories .h5{margin:0; padding:0; flex:1 1 auto}
#subcategories .subcategory-name{
  display:block; padding:18px 16px 20px; font-family:var(--serif);
  font-size:18px; font-weight:500; color:var(--encre); border:0;
  text-align:center; letter-spacing:0;
}
#subcategories ul>li:hover .subcategory-name{color:var(--or)}
#subcategories .cat_desc{display:none}

/* Colonne de filtres */
#left-column,#right-column{padding-top:10px}
#search_filters,#search_filters_brands,.block-categories,#left-column .block,.card{
  background:var(--blanc); border:0; border-radius:var(--r);
  box-shadow:var(--ombre); padding:26px 24px; margin-bottom:24px;
}
#search_filters .facet{border-top:1px solid var(--filet); padding-top:18px; margin-top:18px}
#search_filters .facet:first-child{border-top:0; padding-top:0; margin-top:0}
#search_filters .facet .facet-title,#left-column .h6,
.block-categories .category-top-menu>li>a{
  font-family:var(--sans); font-size:11px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--or); font-weight:400;
}
#search_filters .facet .facet-label a,.block-categories a{
  color:var(--gris); font-size:15px; font-weight:300;
}
#search_filters .facet .facet-label a:hover,.block-categories a:hover{color:var(--or)}
.block-categories .category-sub-menu li{border:0}
#left-column .block-categories .category-top-menu>li>a{
  display:block; padding-bottom:14px; margin-bottom:14px;
  border-bottom:1px solid var(--filet);
}
#left-column .block-categories .category-sub-menu a{display:block; padding:6px 0}
.custom-checkbox input[type=checkbox]+span{
  border:1px solid var(--filet2); border-radius:3px; background:var(--blanc);
}
.custom-checkbox input[type=checkbox]:checked+span{background:var(--or); border-color:var(--or)}
.custom-checkbox input[type=checkbox]+span .checkbox-checked{color:#fff}

/* Barre de tri */
#js-product-list-top,.products-selection{
  background:transparent; border:0; border-bottom:1px solid var(--filet);
  padding:0 0 18px; margin-bottom:32px;
}
.products-selection .total-products p,.showing{
  font-size:11.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--gris-clair); margin:0; font-weight:300;
}
.products-sort-order .select-title{
  background:var(--blanc); border:1px solid var(--filet); border-radius:100px;
  color:var(--gris); font-size:13.5px; padding:9px 18px; box-shadow:none;
}
.products-sort-order .dropdown-menu{
  background:var(--blanc); border:0; border-radius:var(--r); box-shadow:var(--ombre-f);
}
.products-sort-order .dropdown-menu .select-list{color:var(--gris)}
.products-sort-order .dropdown-menu .select-list:hover{background:var(--creme2); color:var(--or)}

/* --- 9. Page produit ----------------------------------------------------- */
#product #content,#product .product-container{background:transparent}
.product-cover,.images-container .product-cover{
  background:var(--blanc); border:0; border-radius:var(--r);
  box-shadow:var(--ombre); overflow:hidden;
}
.product-cover img{border:0; box-shadow:none; width:100%; border-radius:var(--r)}
.js-qv-mask .thumb,.product-images img,.images-container .thumb{
  border:1px solid var(--filet); border-radius:8px; background:var(--blanc);
}
.product-images li.thumb-container .thumb.selected,
.product-images li.thumb-container .thumb:hover{border-color:var(--or)}
#product h1{margin-bottom:16px}
#product .product-reference,.product-reference{
  font-size:11.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--gris-clair); font-weight:300;
}
.product-prices{
  background:transparent; border-top:1px solid var(--filet);
  border-bottom:1px solid var(--filet); padding:22px 0; margin:24px 0;
}
.product-prices .current-price span,.product-price,.current-price .price{
  font-family:var(--serif); font-size:38px; color:var(--or); font-weight:500;
}
.product-prices .tax-shipping-delivery-label{
  font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gris-clair); font-weight:300;
}
#product-description-short,.product-description-short{
  color:var(--gris); font-size:17px; font-weight:300;
}
.product-actions .product-add-to-cart{border:0; padding:0}
.product-quantity .qty .input-group,.product-quantity input.form-control{
  background:var(--blanc); border:1px solid var(--filet); border-radius:var(--rb);
  color:var(--encre);
}
.product-quantity .btn-touchspin{background:var(--blanc); border:1px solid var(--filet); color:var(--gris)}
.product-variants>.product-variants-item{margin:20px 0}
.product-variants>.product-variants-item .form-control-label,.product-variants label{
  font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--or);
}
.product-variants .input-color+span,.product-variants .color{
  border-radius:50%; border:1px solid var(--filet2);
}
.product-variants .input-color:checked+span{
  border-color:var(--or); box-shadow:0 0 0 2px var(--creme),0 0 0 3px var(--or);
}
#product-availability .product-available{color:var(--vert)}
#product-availability .product-unavailable,#product-availability .product-last-items{color:var(--rouge)}
.product-additional-info{border-top:1px solid var(--filet); padding-top:22px; margin-top:22px}

.tabs{
  background:var(--blanc); border-radius:var(--r); box-shadow:var(--ombre);
  padding:34px 38px; margin-top:52px;
}
.tabs .nav-tabs{border-bottom:1px solid var(--filet)}
.tabs .nav-tabs .nav-link{
  font-size:11.5px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--gris-clair); border:0; border-bottom:2px solid transparent;
  padding:12px 0; margin-right:32px; font-weight:400;
}
.tabs .nav-tabs .nav-link.active,.tabs .nav-tabs .nav-link:hover{
  color:var(--encre); border-bottom-color:var(--or); background:transparent;
}
.tabs .tab-content{padding:30px 0 0}
.data-sheet{display:grid; grid-template-columns:1fr 1fr; gap:0}
.data-sheet dt,.data-sheet dd{
  background:transparent; border-bottom:1px solid var(--filet); padding:13px 0; margin:0;
}
.data-sheet dt,#product-details .label,.product-features dt{
  font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--gris-clair); font-weight:400;
}
.data-sheet dd{font-size:15px; color:var(--encre)}

/* --- 10. Blocs rédactionnels (mr-*) -------------------------------------- */
.mr-intro{padding-bottom:26px; border-bottom:1px solid var(--filet); margin-bottom:32px}
.mr-intro p{font-size:19px; color:var(--gris); max-width:74ch; font-weight:300; line-height:1.75}
.mr-toc{
  background:var(--blanc); border:0; border-radius:var(--r);
  box-shadow:var(--ombre); padding:28px 32px; margin:0 0 40px;
}
.mr-toc>strong,.mr-toc .mr-toc-t{
  display:block; font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--or); margin-bottom:16px; font-weight:400;
}
.mr-toc ol,.mr-toc ul{margin:0; padding:0; list-style:none; columns:2; column-gap:40px}
.mr-toc li{margin:0 0 9px; font-size:15px}
.mr-toc a{color:var(--gris); font-weight:300}
.mr-toc a:hover{color:var(--or)}

.mr-row{
  display:grid; grid-template-columns:minmax(130px,190px) 1fr; gap:0 24px;
  border-bottom:1px solid var(--filet); align-items:baseline;
}
.mr-row>*{padding:15px 0}
.mr-row>strong,.mr-row>dt,.mr-row .mr-k{
  font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--gris-clair); font-weight:400;
}
.mr-row>span,.mr-row>dd,.mr-row .mr-v{margin:0; font-size:15.5px; font-weight:300}
.mr-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(360px,1fr)); gap:0 36px; margin:30px 0}

.mr-chips{display:flex; flex-wrap:wrap; gap:9px; margin:18px 0 30px; padding:0; list-style:none}
.mr-chips li,.mr-chip{
  font-size:12px; letter-spacing:.06em; border:1px solid var(--filet2);
  color:var(--gris); padding:7px 15px; background:var(--blanc); border-radius:100px;
  transition:border-color .2s;
}
.mr-chips a{color:var(--gris)}
.mr-chips li:hover,.mr-chip:hover{border-color:var(--or)}
.mr-chips li:hover a{color:var(--or)}

.mr-sci,.mr-tra,.mr-note,.mr-card{
  background:var(--blanc); border:0; border-radius:var(--r);
  box-shadow:var(--ombre); padding:28px 32px; margin:30px 0;
}
.mr-sci>strong:first-child,.mr-tra>strong:first-child,.mr-note>strong:first-child{
  display:block; font-size:10.5px; letter-spacing:.2em; text-transform:uppercase;
  margin-bottom:14px; font-weight:400;
}
.mr-sci>strong:first-child{color:var(--nuit2)}
.mr-tra>strong:first-child,.mr-note>strong:first-child{color:var(--or)}

.mr-src{
  border-top:1px solid var(--filet); margin-top:54px; padding-top:26px;
  font-size:13.5px; color:var(--gris-clair); font-weight:300;
}
.mr-src strong{color:var(--gris)}
.mr-src a{color:var(--gris-clair); text-decoration:underline; text-underline-offset:3px}
.mr-src a:hover{color:var(--or)}
.mr-src ol,.mr-src ul{padding-left:20px}
.mr-src li{margin-bottom:6px}

details{border-bottom:1px solid var(--filet)}
details summary{
  cursor:pointer; padding:19px 0; font-family:var(--serif); font-size:21px;
  font-weight:500; color:var(--encre); list-style:none; position:relative; padding-right:40px;
}
details summary::-webkit-details-marker{display:none}
details summary::after{
  content:"+"; position:absolute; right:8px; top:50%; transform:translateY(-50%);
  font-family:var(--sans); font-size:22px; font-weight:300; color:var(--or);
}
details[open] summary::after{content:"\2013"}
details summary:hover{color:var(--or)}
details>*:not(summary){padding-bottom:22px; color:var(--gris); max-width:78ch; font-weight:300}

#category-description.text-muted,#category-description,
.product-description,.rte,#description{color:var(--gris); font-weight:300}
.product-description h2,.rte h2,#description h2{margin:46px 0 18px}
.product-description h3,.rte h3{margin:32px 0 12px; color:var(--encre)}
.product-description p,.rte p,#description p{max-width:78ch}
.product-description a,.rte a{color:var(--or); text-decoration:underline; text-underline-offset:3px}
.product-description ul,.rte ul{padding-left:22px}
.product-description li,.rte li{margin-bottom:7px}

/* --- 11. Pagination, formulaires ----------------------------------------- */
.pagination{background:transparent; margin:40px 0; padding:0}
.pagination .page-list{background:transparent; box-shadow:none; padding:0; display:flex; gap:8px}
.pagination a,.pagination li a{
  font-size:13.5px; color:var(--gris); border:1px solid var(--filet);
  padding:10px 17px; background:var(--blanc); border-radius:var(--rb);
}
.pagination .current a{background:var(--or); border-color:var(--or); color:#fff}
.pagination a:hover{border-color:var(--or); color:var(--or)}

.form-control,input[type=text],input[type=email],input[type=password],
input[type=tel],input[type=search],textarea,select,.custom-select{
  background:var(--blanc); border:1px solid var(--filet); border-radius:var(--rb);
  color:var(--encre); box-shadow:none; padding:13px 15px; font-size:15px;
  font-family:var(--sans); font-weight:300;
}
.form-control:focus,input:focus,textarea:focus,select:focus{
  background:var(--blanc); border-color:var(--or); color:var(--encre);
  box-shadow:none; outline:none;
}
.form-control::placeholder{color:var(--gris-clair)}
.form-control-label,label{
  font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--gris); font-weight:400;
}
.form-control-comment{color:var(--gris-clair); font-size:12.5px}
.alert{
  border-radius:var(--r); border:0; background:var(--blanc);
  color:var(--gris); box-shadow:var(--ombre); padding:20px 24px;
}
.alert-success{border:1px solid var(--vert); color:var(--vert)}
.alert-danger,.alert-warning{border:1px solid var(--rouge); color:var(--rouge)}
.alert-success strong,.alert-danger strong,.alert-warning strong{color:inherit}

/* --- 12. Pied de page ---------------------------------------------------- */
#footer{background:var(--nuit); border:0; padding-top:0; color:#c9cdd4}
.footer-container{
  background:transparent; box-shadow:none; margin-top:0;
  padding:64px 0 32px; color:#c9cdd4;
}
.footer-container li{margin-bottom:10px}
.footer-container a{color:#c9cdd4; font-size:14.5px; font-weight:300}
.footer-container a:hover{color:var(--or-clair)}
.footer-container .h3,.footer-container h3,.footer-container .myaccount-title,
#footer .block-contact .block-contact-title,.links .h3{
  font-family:var(--sans); font-size:11px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--or-clair); font-weight:400; margin-bottom:20px;
}
#footer .block-contact{border:0; padding-left:0; color:#c9cdd4}
#footer .bottom-footer{
  border-top:1px solid rgba(255,255,255,.1); padding:22px 0; margin-top:34px;
}
#footer .bottom-footer p,#footer .bottom-footer a{
  font-size:12px; letter-spacing:.08em; color:#8c939d;
}
.block_newsletter{background:transparent; box-shadow:none; padding:0; margin-bottom:30px}
.block_newsletter input[type=email]{
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16); color:#fff;
}
.block_newsletter input[type=email]::placeholder{color:#8c939d}
.block_newsletter .btn-primary{padding:13px 24px}

/* --- 13. Divers ---------------------------------------------------------- */
.text-muted{color:var(--gris-clair)}
.modal-content,.dropdown-menu{
  background:var(--blanc); border:0; border-radius:var(--r); box-shadow:var(--ombre-f);
}
.featured-products,.product-accessories,.crossselling-products{margin-top:64px}
table{width:100%; border-collapse:collapse}
table th,table td{border-bottom:1px solid var(--filet); padding:12px 14px; text-align:left}
table th{font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--gris-clair); font-weight:400}
blockquote{
  border:0; background:var(--blanc); border-radius:var(--r); box-shadow:var(--ombre);
  padding:26px 30px; margin:30px 0; font-family:var(--serif); font-size:20px;
  font-style:italic; color:var(--gris);
}

/* --- 14. Écrans étroits -------------------------------------------------- */
@media (max-width:991px){
  .mr-toc ol,.mr-toc ul{columns:1}
  .mr-row{grid-template-columns:1fr; gap:0}
  .mr-row>strong,.mr-row>dt,.mr-row .mr-k{padding-bottom:2px}
  .mr-row>span,.mr-row>dd,.mr-row .mr-v{padding-top:0}
  .data-sheet{grid-template-columns:1fr}
  #header .header-top{padding:14px 0}
  #header .logo,#header img.logo{max-height:52px}
  .product-prices .current-price span,.product-price{font-size:30px}
  .tabs{padding:24px 22px}
}
@media (max-width:575px){
  body{font-size:15.5px}
  #products .products,.products,.product_list{grid-template-columns:repeat(2,1fr); gap:14px}
  #subcategories ul{grid-template-columns:repeat(2,1fr); gap:14px}
  .product-miniature .product-description{padding:14px 12px 16px}
  .product-miniature .product-title a{font-size:16px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important; transition-duration:.01ms!important}
}
@media print{
  #header,#footer,#left-column,.breadcrumb,.mr-toc{display:none}
  body{background:#fff; color:#000}
}

/* ==========================================================================
   15. Page d'accueil — bandes alternées, compositions centrées
   ========================================================================== */
.page-home{padding-bottom:0}
/* Les bandes sortent de la gouttière Bootstrap pour toucher les deux bords. */
.page-home>section{margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); width:100vw}
.page-home .container{max-width:1280px; margin:0 auto; padding:0 26px}
.mr-bande{padding:88px 0}
.mr-bande-creme{background:var(--creme2)}
.mr-bande-nuit{background:var(--nuit); color:#c9cdd4}
.mr-bande-nuit h2,.mr-bande-nuit h3{color:#f4f1ea}
.mr-bande-nuit .mr-tete p{color:#a8aeb7}
.mr-bande-nuit .mr-eyebrow{color:var(--or-clair)}
.mr-bande-nuit .mr-filet{background:var(--or-clair)}

/* --- Héros ---------------------------------------------------------------- */
.mr-hero{
  position:relative; overflow:hidden; display:flex; align-items:center;
  min-height:clamp(460px,58vw,640px); background:var(--nuit);
}
.mr-hero>img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center 50%;
}
.mr-hero::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(100deg,rgba(14,18,24,.72) 0%,rgba(14,18,24,.5) 42%,rgba(14,18,24,.06) 78%);
}
.mr-hero-in{
  position:relative; z-index:1; max-width:1280px; width:100%;
  margin:0 auto; padding:0 26px;
}
.mr-hero-in .mr-eyebrow{color:var(--or-clair); margin-bottom:20px}
.mr-hero-in h1{
  color:#fdfbf7; margin:0 0 20px; max-width:24ch;
  text-shadow:0 2px 30px rgba(0,0,0,.35);
}
.mr-hero-in h1 em{font-style:italic; font-weight:400; color:var(--or-clair)}
.mr-hero-in p{
  color:#d8d3ca; font-size:17.5px; font-weight:300; max-width:46ch; margin:0 0 34px;
  text-shadow:0 1px 18px rgba(0,0,0,.4);
}
.mr-hero-btn{display:flex; gap:14px; flex-wrap:wrap}
.mr-hero .btn-clair{
  background:transparent; border:1px solid rgba(253,251,247,.5); color:#fdfbf7;
}
.mr-hero .btn-clair:hover{background:#fdfbf7; border-color:#fdfbf7; color:var(--nuit)}

/* --- Bande de chiffres ---------------------------------------------------- */
.mr-chiffres{
  display:grid; grid-template-columns:repeat(4,1fr); gap:0;
  background:var(--blanc); border-radius:var(--r); box-shadow:var(--ombre);
  overflow:hidden; max-width:940px; margin:0 auto;
}
.mr-chiffres>div{
  padding:30px 20px; text-align:center; border-right:1px solid var(--filet);
}
.mr-chiffres>div:last-child{border-right:0}
.mr-chiffres strong{
  display:block; font-family:var(--serif); font-size:34px; font-weight:500;
  color:var(--encre); line-height:1.1; margin-bottom:8px;
  font-variant-numeric:tabular-nums;
}
.mr-chiffres span{
  font-size:10.5px; letter-spacing:.19em; text-transform:uppercase; color:var(--gris-clair);
}

/* --- Rayons --------------------------------------------------------------- */
.mr-rayons{display:grid; grid-template-columns:repeat(4,1fr); gap:26px}
.mr-rayons>a{
  background:var(--blanc); border-radius:var(--r); overflow:hidden;
  box-shadow:var(--ombre); display:flex; flex-direction:column;
  text-align:center; transition:box-shadow .3s,transform .3s;
}
.mr-rayons>a:hover{box-shadow:var(--ombre-f); transform:translateY(-4px)}
.mr-vis{display:block; overflow:hidden; background:#fff}
.mr-vis img{
  width:100%; aspect-ratio:4/5; object-fit:cover; object-position:center 50%;
  display:block; transition:transform .6s cubic-bezier(.2,.6,.2,1);
}
.mr-rayons>a:hover .mr-vis img{transform:scale(1.055)}
.mr-rayons strong{
  display:block; font-family:var(--serif); font-size:23px; font-weight:500;
  color:var(--encre); padding:22px 22px 6px;
}
.mr-rayons em{
  font-style:normal; font-size:14px; color:var(--gris); font-weight:300;
  line-height:1.55; display:block; padding:0 22px 16px; flex:1 1 auto;
}
.mr-rayons .mr-lien{padding:0 22px 24px; justify-content:center}
.mr-rayons>a:hover strong{color:var(--or)}

/* --- Entrer par la pierre ------------------------------------------------- */
.mr-pgrid{display:grid; grid-template-columns:repeat(4,1fr); gap:24px}
.mr-pgrid>a{
  background:var(--blanc); border-radius:var(--r); overflow:hidden;
  box-shadow:var(--ombre); display:flex; flex-direction:column; text-align:center;
  transition:box-shadow .3s,transform .3s;
}
.mr-pgrid>a:hover{box-shadow:var(--ombre-f); transform:translateY(-4px)}
.mr-pgrid img{
  width:100%; aspect-ratio:1/1; object-fit:cover; object-position:center 48%;
  display:block; background:#fff; transition:transform .6s cubic-bezier(.2,.6,.2,1);
}
.mr-pgrid>a:hover img{transform:scale(1.055)}
.mr-pgrid strong{
  display:block; font-family:var(--serif); font-size:20px; font-weight:500;
  color:var(--encre); padding:18px 16px 4px;
}
.mr-pgrid>a:hover strong{color:var(--or)}
.mr-pgrid span{
  display:block; font-size:10.5px; letter-spacing:.17em; text-transform:uppercase;
  color:var(--gris-clair); padding:0 16px 20px; font-variant-numeric:tabular-nums;
}

/* --- Boutiques ------------------------------------------------------------ */
.mr-bgrid{display:grid; grid-template-columns:repeat(2,1fr); gap:30px; max-width:1000px; margin:0 auto}
.mr-bgrid article{
  background:rgba(255,255,255,.05); border-radius:var(--r); overflow:hidden;
  display:flex; flex-direction:column; border:1px solid rgba(255,255,255,.09);
}
.mr-bgrid img{width:100%; aspect-ratio:16/9; object-fit:cover; display:block}
.mr-bgrid>article>div{padding:26px 28px 30px; text-align:center}
.mr-bgrid h3{font-size:26px; margin:0 0 12px; font-weight:400}
.mr-bgrid p{margin:0 0 8px; font-size:15px; color:#a8aeb7; font-weight:300; line-height:1.6}
.mr-bgrid p:last-child{margin:0}
.mr-bgrid a{color:var(--or-clair); font-size:16px}
.mr-bgrid a:hover{color:#fff}

/* --- Les modules d'accueil natifs ---------------------------------------- */
.page-home .featured-products{margin:0}
.page-home .featured-products h2,.page-home .featured-products .h2,
.featured-products .products-section-title{
  font-family:var(--serif); font-size:clamp(26px,3.1vw,40px); font-weight:400;
  border:0; padding:0; margin:0 0 40px; text-align:center;
  text-transform:none!important; letter-spacing:.002em; color:var(--encre);
}
.page-home .all-product-link{
  font-size:11.5px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--or); display:block; text-align:center; margin-top:22px;
}
#block-reassurance{
  background:transparent; border:0; margin:44px 0 0; box-shadow:none;
}
#block-reassurance ul{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:22px; margin:0; padding:0; list-style:none;
}
#block-reassurance li{
  background:var(--blanc); border:0; border-radius:var(--r);
  box-shadow:var(--ombre); margin:0;
}
#block-reassurance .block-reassurance-item{
  padding:22px 24px; display:flex; gap:14px; align-items:center; justify-content:center;
}
#block-reassurance img,#block-reassurance svg{width:24px; height:24px; opacity:.6}
#block-reassurance span{font-size:13.5px; color:var(--gris); line-height:1.45; font-weight:300}

@media (max-width:1199px){
  .mr-rayons,.mr-pgrid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:991px){
  .mr-bande{padding:60px 0}
  .mr-hero{min-height:400px}
  .mr-chiffres{grid-template-columns:repeat(2,1fr)}
  .mr-chiffres>div:nth-child(2){border-right:0}
  .mr-chiffres>div:nth-child(-n+2){border-bottom:1px solid var(--filet)}
  .mr-rayons,.mr-pgrid{grid-template-columns:repeat(2,1fr)}
  .mr-bgrid{grid-template-columns:1fr}
}
@media (max-width:575px){
  .mr-bande{padding:46px 0}
  .mr-hero{min-height:340px}
  .mr-rayons{grid-template-columns:1fr}
  .mr-pgrid{grid-template-columns:repeat(2,1fr); gap:14px}
}

/* ==========================================================================
   16. Récit de la maison et bande double
   ========================================================================== */
.mr-bande-serree{padding:44px 0}
.mr-filet-g{margin-left:0; margin-right:0}

/* Le récit : trois photos d'archive à gauche, le texte à droite. */
.mr-hgrid{display:grid; grid-template-columns:400px 1fr; gap:60px; align-items:start}
.mr-hphotos{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin:0; justify-items:center}
/* Chaque photo est recadrée par sa boîte : les liserés bleus décoratifs de
   l'infographie d'origine tombent hors champ. */
.mr-hphotos>span{
  display:block; overflow:hidden; background:var(--creme3); box-shadow:var(--ombre);
}
.mr-hphotos img{width:100%; height:100%; object-fit:cover; display:block; transform:scale(1.05)}
.mr-hp1{grid-column:1 / -1; width:210px; aspect-ratio:1/1; border-radius:50%}
.mr-hp2,.mr-hp3{width:100%; aspect-ratio:3/4; border-radius:var(--r)}
.mr-hp2 img,.mr-hp3 img{filter:grayscale(1) contrast(1.06) brightness(1.02)}
.mr-hphotos figcaption{
  grid-column:1 / -1; font-size:12.5px; line-height:1.5; text-align:center; font-weight:300;
}
.mr-htexte .mr-eyebrow{margin-bottom:14px}
.mr-htexte h2{margin:0 0 20px}
.mr-htexte .mr-chapeau{
  font-family:var(--serif); font-size:22px; font-style:italic; font-weight:400;
  color:var(--gris); line-height:1.5; margin:0 0 28px; max-width:56ch;
}
.mr-htexte h3{
  font-size:20px; font-weight:500; color:var(--encre); margin:26px 0 8px;
}
.mr-htexte h3:first-of-type{margin-top:0}
.mr-htexte p{color:var(--gris); font-weight:300; max-width:64ch; margin:0 0 14px}
.mr-htexte p strong{color:var(--encre); font-weight:500}

/* Bande double : une photo pleine hauteur, un texte à côté. */
.mr-duo{display:grid; grid-template-columns:1fr 1fr; align-items:stretch; background:var(--blanc)}
.mr-duo-img{overflow:hidden; background:var(--creme3)}
.mr-duo-img img{width:100%; height:100%; min-height:380px; object-fit:cover; display:block}
.mr-duo-txt{
  padding:64px clamp(30px,5vw,80px); display:flex; flex-direction:column;
  justify-content:center; max-width:640px;
}
.mr-duo-txt .mr-eyebrow{margin-bottom:14px}
.mr-duo-txt h2{margin:0 0 18px}
.mr-duo-txt h2 em{font-style:italic}
.mr-duo-txt p{color:var(--gris); font-weight:300; margin:0 0 28px; max-width:52ch}
.mr-duo-txt .btn{align-self:flex-start}

@media (max-width:991px){
  .mr-hgrid{grid-template-columns:1fr; gap:36px}
  .mr-hphotos{max-width:440px}
  .mr-duo{grid-template-columns:1fr}
  .mr-duo-img img{min-height:280px; aspect-ratio:16/10}
  .mr-duo-txt{padding:44px 26px; max-width:none}
}

/* ==========================================================================
   22. Page catégorie
   Le bloc porte id="subcategories" et non une classe : les sélecteurs
   doivent viser l'identifiant, sinon rien ne prend.
   ========================================================================== */

/* Plus de capitales forcées sur les titres. */
#category h1.h1,.block-category h1,
.featured-products .products-section-title,
.subcategory-name,.subcategory-heading{text-transform:none!important}

/* Bandeau de catégorie : Classic impose min-height 13.75rem, d'où la boîte
   vide. On le remet à la hauteur de son contenu. */
#js-product-list-header .block-category,
.block-category.card,.block-category{
  min-height:0; background:transparent; border:0; border-radius:0;
  box-shadow:none; padding:0 0 24px; margin:0 0 28px;
  border-bottom:1px solid var(--filet);
}
.block-category h1{margin:16px 0 14px; font-size:clamp(28px,3.4vw,42px)}
.block-category .block-category-inner{
  display:flex; gap:26px; align-items:flex-start; justify-content:flex-start;
}
.block-category .block-category-inner .category-cover{margin:0; flex:0 0 auto}
.block-category .block-category-inner .category-cover img{
  width:180px; height:180px; object-fit:cover; display:block;
  border:1px solid var(--filet); background:#fff;
}
.block-category #category-description{margin:0; color:var(--craie); flex:1 1 auto}
.block-category #category-description p{max-width:74ch}

/* Sous-catégories : une grille de spécimens, comme les produits. */
#subcategories,#subcategories.card{
  background:transparent; border:0; border-radius:0; box-shadow:none;
  padding:0; margin:0 0 44px;
}
#subcategories .subcategory-heading,#subcategories p.subcategory-heading{
  font-family:var(--serif); font-weight:500; font-size:clamp(21px,2.2vw,28px);
  color:var(--encre); border-bottom:1px solid var(--filet);
  padding-bottom:12px; margin:0 0 0; letter-spacing:-.01em; text-align:left;
}
#subcategories ul.subcategories-list,#subcategories ul{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(186px,1fr));
  gap:0; border-left:1px solid var(--filet); border-top:1px solid var(--filet);
}
#subcategories ul.subcategories-list>li,#subcategories ul>li{
  margin:0; padding:0; width:auto; max-width:none; flex:none; float:none;
  background:var(--sol2); text-align:left;
  border-right:1px solid var(--filet); border-bottom:1px solid var(--filet);
  transition:background .18s; display:flex; flex-direction:column;
}
#subcategories ul>li:hover{background:var(--sol3)}
#subcategories .subcategory-image{margin:0; padding:0}
#subcategories .subcategory-image a{display:block; overflow:hidden; background:#fff}
#subcategories .subcategory-image img{
  width:100%; aspect-ratio:1/1; object-fit:cover; display:block;
  border:0; border-radius:0; box-shadow:none; max-width:none;
  transition:transform .45s cubic-bezier(.2,.6,.2,1);
}
#subcategories ul>li:hover .subcategory-image img{transform:scale(1.05)}
#subcategories h5,#subcategories .h5{margin:0; padding:0; flex:1 1 auto}
#subcategories .subcategory-name{
  display:block; padding:14px 16px 16px; font-family:var(--serif);
  font-size:15.5px; font-weight:400; color:var(--encre);
  border-top:1px solid var(--filet); text-align:left; letter-spacing:0;
}
#subcategories ul>li:hover .subcategory-name{color:var(--or)}
#subcategories .cat_desc{display:none}

/* Colonne de gauche */
#left-column .block-categories .category-top-menu>li>a{
  display:block; padding-bottom:12px; margin-bottom:12px;
  border-bottom:1px solid var(--filet);
}
#left-column .block-categories .category-sub-menu a{display:block; padding:5px 0; font-weight:400}

/* Le bandeau est centré, pas le texte long : des paragraphes de 600 px
   centrés sont pénibles à lire. */
.block-category #category-description,
#category-description,.block-category .block-category-inner #category-description{
  text-align:left; max-width:none;
}
#category-description>p,#category-description .mr-intro p{max-width:78ch}
#category-description h2{margin:44px 0 16px; text-align:left}
#category-description h3{margin:30px 0 10px; text-align:left}
#category-description a{
  color:var(--or); text-decoration:underline; text-underline-offset:3px;
}
#category-description a:hover{color:var(--or-vif)}
#category-description table{margin:22px 0 30px; max-width:820px}
#category-description .mr-note{text-align:left; max-width:820px}
#category-description details{max-width:860px}
#category-description .mr-chips{justify-content:flex-start}
#category-description .mr-chips li a{text-decoration:none}
#category-description .mr-grid{max-width:900px}

/* ==========================================================================
   17. Menu déroulant
   PrestaShop rend les sous-menus avec la classe Bootstrap « collapse », qui
   les met en display:none. Sur mobile un bouton les ouvre ; sur desktop rien
   ne les ouvrait. On les ouvre au survol, sans écart de souris entre l'entrée
   et le panneau, sinon le menu se referme dès qu'on descend.
   ========================================================================== */
@media (min-width:992px){
  #_desktop_top_menu{position:static}
  #_desktop_top_menu>.top-menu>li{position:relative}

  /* Zone tampon invisible sous l'entrée : la souris ne traverse pas de vide. */
  #_desktop_top_menu>.top-menu>li>a::before{
    content:""; position:absolute; left:0; right:0; top:100%; height:16px;
  }

  #_desktop_top_menu>.top-menu>li>.sub-menu,
  #_desktop_top_menu>.top-menu>li>.popover.sub-menu{
    display:block!important; visibility:hidden; opacity:0; pointer-events:none;
    position:absolute; top:100%; left:0; right:auto; margin:0;
    width:max-content; min-width:320px; max-width:min(1080px,92vw);
    max-height:76vh; overflow-y:auto; z-index:1000;
    background:var(--blanc); border:0; border-radius:var(--r);
    box-shadow:var(--ombre-f); padding:30px 34px;
    transform:translateY(10px);
    transition:opacity .2s ease,visibility .2s ease,transform .2s ease;
  }
  /* Les derniers rayons s'ouvrent vers la gauche pour rester dans l'écran. */
  #_desktop_top_menu>.top-menu>li:nth-last-child(-n+2)>.sub-menu{left:auto; right:0}

  #_desktop_top_menu>.top-menu>li:hover>.sub-menu,
  #_desktop_top_menu>.top-menu>li:focus-within>.sub-menu{
    visibility:visible; opacity:1; pointer-events:auto; transform:translateY(0);
  }

  /* Dans le panneau, tout est déplié : plus d'accordéons ni de chevrons. */
  #_desktop_top_menu .sub-menu .collapse{display:block!important; height:auto!important}
  #_desktop_top_menu .sub-menu .collapse-icons,
  #_desktop_top_menu .sub-menu .navbar-toggler,
  #_desktop_top_menu .sub-menu .float-xs-right{display:none!important}

  /* Chaque entrée est un bloc : sans ça les libellés se collent entre eux. */
  #_desktop_top_menu .sub-menu ul{
    list-style:none; margin:0; padding:0; columns:auto; display:block;
  }
  #_desktop_top_menu .sub-menu li{
    display:block; width:auto; float:none; margin:0; padding:0; border:0;
  }
  #_desktop_top_menu .sub-menu a{display:block}

  /* Niveau 2 en colonnes de rubriques. Colonnes CSS plutôt que grille :
     les rubriques se tassent au lieu de s'aligner sur la plus longue. */
  #_desktop_top_menu .sub-menu>ul.top-menu{
    columns:4 178px; column-gap:34px; display:block;
  }
  #_desktop_top_menu .sub-menu>ul.top-menu>li{
    margin:0 0 22px; break-inside:avoid; page-break-inside:avoid;
    -webkit-column-break-inside:avoid;
  }

  /* Niveau 2 : un intertitre. */
  #_desktop_top_menu .sub-menu>ul.top-menu>li>a{
    font-family:var(--serif); font-size:16.5px; font-weight:500; color:var(--encre);
    text-transform:none; letter-spacing:0; padding:0 0 7px; margin:0 0 9px;
    border-bottom:1px solid var(--filet); line-height:1.3;
  }
  #_desktop_top_menu .sub-menu>ul.top-menu>li>a:hover{color:var(--or)}

  /* Niveau 3 : la liste. */
  #_desktop_top_menu .sub-menu ul ul a{
    font-family:var(--sans); font-size:13.5px; font-weight:300; color:var(--gris);
    padding:3px 0; border:0; margin:0; text-transform:none; letter-spacing:0;
    line-height:1.45;
  }
  #_desktop_top_menu .sub-menu ul ul a:hover{color:var(--or)}
}

/* Rien ne doit rogner le panneau. */
#header .header-top,#header .header-top>.container,
#header .header-top>.container>.row{overflow:visible}

/* Bouton de dépliage des listes longues du méga-menu. */
@media (min-width:992px){
  #_desktop_top_menu .sub-menu li.mr-plus{margin-top:6px}
  #_desktop_top_menu .sub-menu li.mr-plus button{
    background:none; border:0; padding:3px 0; cursor:pointer;
    font-family:var(--sans); font-size:12px; font-weight:400;
    letter-spacing:.06em; color:var(--or-texte); text-align:left;
  }
  #_desktop_top_menu .sub-menu li.mr-plus button:hover{color:var(--encre)}
  #_desktop_top_menu .sub-menu li.mr-plus button:focus-visible{
    outline:2px solid var(--or); outline-offset:2px;
  }
  #_desktop_top_menu .sub-menu li[hidden]{display:none!important}
}

/* ==========================================================================
   18. Fiche produit
   Le gabarit PrestaShop enferme les onglets dans la colonne de droite
   (col-md-6). Le texte long se retrouvait comprimé sur la moitié de l'écran,
   l'autre moitié restant vide. On les fait sortir sur toute la largeur.
   ========================================================================== */
@media (min-width:768px){
  #product .tabs{
    width:calc(200% + 30px);
    margin-left:calc(-100% - 30px);
    margin-top:56px;
  }
}
#product .tabs{padding:40px clamp(24px,4vw,56px)}

/* Le contenu rédactionnel reprend une longueur de ligne lisible. */
#product .tabs .product-description,#product .tabs .rte{max-width:none}
#product .tabs .product-description>p,#product .tabs .rte>p,
#product .tabs .product-description>ul,#product .tabs .mr-intro p{max-width:80ch}
#product .tabs .mr-toc{max-width:none}
#product .tabs .mr-toc ol,#product .tabs .mr-toc ul{columns:3}

/* Titre : Cormorant ne supporte pas les capitales forcées. */
#product h1,#product h1.h1,.product-container h1{
  text-transform:none!important; letter-spacing:.002em;
}

/* Pastilles d'état : Classic les laisse en cyan vif. */
#product .product-flags{position:absolute; top:16px; left:16px; margin:0; padding:0; z-index:3}
#product .product-flags li.product-flag,.product-flag{
  position:static; display:inline-block; background:var(--blanc); color:var(--nuit);
  border:0; border-radius:100px; font-family:var(--sans); font-size:10.5px;
  letter-spacing:.14em; text-transform:uppercase; font-weight:400;
  padding:7px 15px; margin:0 0 8px; box-shadow:var(--ombre); min-height:0; line-height:1.4;
}
#product .product-flag.out_of_stock,#product .product-flag.discount,
#product .product-flag.on-sale,.product-flag.out_of_stock{
  background:var(--rouge); color:#fff;
}
#product .product-flag.new,#product .product-flag.pack{background:var(--nuit); color:#fff}

/* La photo remplit sa carte au lieu de flotter dans du blanc. */
#product .images-container{position:relative}
#product .product-cover{padding:0; overflow:hidden; position:relative}
#product .product-cover img{width:100%; height:auto; display:block; border-radius:var(--r)}
#product .product-cover .layer{border-radius:var(--r)}
#product .js-qv-mask .thumb-container,#product .product-images li{margin:0 10px 10px 0}
#product .product-images img{width:88px; height:88px; object-fit:cover}

/* Colonne de droite : on resserre les blocs, l'espace vide était énorme. */
#product .product-information{padding-top:4px}
#product .product-actions{margin-top:4px}
#product .product-additional-info{margin-top:20px}
#product .social-sharing{margin-top:22px}
#product .social-sharing ul li{margin-right:8px}
#product .blockreassurance_product{
  margin-top:24px; padding-top:20px; border-top:1px solid var(--filet);
}
#product .blockreassurance_product .item-product{opacity:.6}
#product .blockreassurance_product span{font-size:13.5px; color:var(--gris); font-weight:300}

/* Le rappel de stock ne doit pas ressembler à une alerte d'erreur. */
#product #stock_availability,#product .product-quantities{
  font-size:13.5px; color:var(--gris); font-weight:300;
}

/* Produits associés : pleine largeur eux aussi. */
@media (min-width:768px){
  #product .product-accessories,#product .crossselling-products{margin-top:64px}
}
#product .product-accessories h2,#product .product-accessories .h2,
#product .crossselling-products h2{
  font-family:var(--serif); font-size:clamp(24px,2.8vw,34px); font-weight:400;
  text-align:center; text-transform:none!important; border:0; padding:0; margin:0 0 34px;
}

@media (max-width:767px){
  #product .tabs{width:auto; margin-left:0; padding:26px 20px}
  #product .tabs .mr-toc ol,#product .tabs .mr-toc ul{columns:1}
}

/* Correctif : « background » écrasait l'image de fond qui porte l'icône.
   On ne touche qu'à la couleur. */
#product .social-sharing ul li{background-color:var(--creme2)}
#product .social-sharing ul li i,#product .social-sharing ul li svg{color:var(--gris)}
#product .social-sharing ul li:hover i,#product .social-sharing ul li:hover svg{color:var(--or)}

/* Le bloc « prévenez-moi » s'étalait sur toute la largeur en laissant
   la moitié gauche vide. On le recentre et on le borne. */
#product .card:has(input[type="email"]),
#product form.js-mailalert{
  max-width:620px; margin-left:auto; margin-right:auto; text-align:center;
}
#product .card:has(input[type="email"]) .btn{margin-top:12px}

/* ==========================================================================
   19. Lisibilité
   Le doré #B8934C tombe à 2,71:1 sur le crème et 2,87:1 sur le blanc. Il tenait
   les liens, les surtitres et les prix : illisible. On garde ce doré pour les
   aplats et les filets, et on introduit un doré de texte à 4,7:1.
   Le gris clair passe de 2,54:1 à 4,50:1.
   ========================================================================== */
:root{
  --or-texte:#8A6A2E;
  --gris-clair:#6E737B;
  --gris:#5E636B;
}
@media (prefers-color-scheme: dark){
  :root{ --or-texte:#D9BE86; --gris-clair:#9298A1; --gris:#AEB3BA; }
}
:root[data-theme="dark"]{ --or-texte:#D9BE86; --gris-clair:#9298A1; --gris:#AEB3BA; }
:root[data-theme="light"]{ --or-texte:#8A6A2E; --gris-clair:#6E737B; --gris:#5E636B; }

/* --- Tout ce qui est doré ET porteur de sens passe au doré de texte --- */
a:hover,a:focus{color:var(--or-texte)}
.mr-eyebrow,.mr-sur{color:var(--or-texte)}
.mr-lien{color:var(--or-texte)}
.product-miniature .product-price-and-shipping .price,
.product-miniature .price,
.product-prices .current-price span,.product-price,.current-price .price{color:var(--or-texte)}
.product-description a,.rte a,#category-description a{color:var(--or-texte)}
#category-description a:hover{color:var(--encre)}
.mr-src a:hover,.mr-toc a:hover,.mr-chips li:hover a{color:var(--or-texte)}
.product-miniature:hover .product-title a{color:var(--or-texte)}
#search_filters .facet .facet-title,#left-column .h6,
.block-categories .category-top-menu>li>a{color:var(--or-texte)}
#search_filters .facet .facet-label a:hover,.block-categories a:hover{color:var(--or-texte)}
.product-variants>.product-variants-item .form-control-label,
.product-variants label{color:var(--or-texte)}
.page-home .all-product-link{color:var(--or-texte)}
.mr-rayons>a:hover strong,.mr-pgrid>a:hover strong{color:var(--or-texte)}
.mr-tra>strong:first-child,.mr-note>strong:first-child{color:var(--or-texte)}
.mr-toc>strong,.mr-toc .mr-toc-t{color:var(--or-texte)}
.top-menu>li>a:hover,.top-menu>li:hover>a{color:var(--or-texte)}
.top-menu .sub-menu a:hover{color:var(--or-texte)}
#_desktop_top_menu .sub-menu>ul.top-menu>li>a:hover,
#_desktop_top_menu .sub-menu ul ul a:hover{color:var(--or-texte)}
#header .header-nav a:hover,#header .header-top a:hover{color:var(--or-texte)}
#_desktop_user_info a:hover,.blockcart a:hover{color:var(--or-texte)}
#header a:hover .material-icons{color:var(--or-texte)}
.blockcart .cart-products-count{color:var(--or-texte)}
.breadcrumb li a:hover{color:var(--or-texte)}
details summary::after{color:var(--or-texte)}
details summary:hover{color:var(--or-texte)}
.pagination a:hover{border-color:var(--or-texte); color:var(--or-texte)}
.mr-bgrid a{color:var(--or-clair)}
.mr-boutiques .mr-ville,.mr-bgrid .mr-ville{color:var(--or-clair)}

/* Le doré reste sur les aplats et les filets : le contraste s'y joue
   entre le fond et le texte blanc, pas entre le doré et le crème. */
.btn-primary,.btn-primary:not(:disabled):not(.disabled){background:var(--or); border-color:var(--or)}
.mr-filet{background:var(--or)}
.pagination .current a{background:var(--or); border-color:var(--or); color:#fff}
.mr-toc{border-top-color:var(--or)}

/* Textes secondaires : plus de gris fantôme. */
.text-muted,.form-control-comment,.mr-src{color:var(--gris-clair)}
.product-miniature .regular-price{color:var(--gris-clair)}
.mr-pgrid span,.mr-chiffres span{color:var(--gris-clair)}
.products-selection .total-products p,.showing{color:var(--gris-clair)}
.breadcrumb li a,.breadcrumb li span{color:var(--gris-clair)}
.data-sheet dt,#product-details .label,.product-features dt,
.mr-row>strong,.mr-row>dt,.mr-row .mr-k,table th{color:var(--gris-clair)}
#product .product-reference,.product-reference,
.product-prices .tax-shipping-delivery-label{color:var(--gris-clair)}
.mr-hphotos figcaption{color:var(--gris-clair)}
.form-control::placeholder,#search_widget form input::placeholder{color:var(--gris-clair)}
/* ====================================================================
   20. Lisibilite : reprise des couleurs de texte heritees de Classic.
   #7a7a7a tombe a 4,05:1 sur le creme et portait 66 regles ;
   #24b9d7, le cyan des liens, etait a 2,20:1. Les selecteurs ci-dessous
   sont ceux de la feuille Classic, repris a l'identique.
   ==================================================================== */
a,
.btn-outline-primary,
.btn-link,
.page-link,
.text-primary,
#header .top-menu a[data-depth="0"]:hover,a:hover,
.block_newsletter form input[type=text]:focus+button .search,.btn-unstyle:focus .expand-more,.search-widget form input[type=text]:focus+button .search,
.carousel .carousel-control .icon-next:hover i,.carousel .carousel-control .icon-prev:hover i,.dropdown:hover .expand-more,.page-my-account #content .links a:hover i,.search-widget form button[type=submit] .search:hover,.top-menu .sub-menu a:hover,
.dropdown-item:focus,.dropdown-item:hover,
.product-miniature .highlighted-informations .quick-view:hover,
.pagination .current a,
#subcategories ul li .subcategory-name:hover,.block-categories .arrows .arrow-down:hover,.block-categories .arrows .arrow-right:hover,.block-categories .collapse-icons .add:hover,.block-categories .collapse-icons .remove:hover,.cart-grid-body a.label:hover,
.product-price,
.tabs .nav-tabs .nav-link.active,
#blockcart-modal .product-name,
.block-promo .promo-code-button.cancel-promo,
.account-list a:hover,.block_newsletter form button[type=submit] .search:hover,.footer-container li a:hover,
#header a:hover{color:var(--or-texte)}
#header .header-nav .blockcart a:hover{color:var(--or-texte)}
caption,
.thead-default th,
select.form-control:focus::-ms-value,
.form-check.disabled .form-check-label,
.form-check-inline.disabled,
.input-group-addon,
.custom-select,
.custom-select:focus::-ms-value,
.nav-tabs .nav-item.open .nav-link,.nav-tabs .nav-item.open .nav-link:focus,.nav-tabs .nav-item.open .nav-link:hover,.nav-tabs .nav-link.active,.nav-tabs .nav-link.active:focus,.nav-tabs .nav-link.active:hover,
.text-muted,
.page-content.page-cms ul,p,
.btn-tertiary,
.form-control,
input::-webkit-input-placeholder,textarea::-webkit-input-placeholder,
input::-moz-placeholder,textarea::-moz-placeholder,
input:-ms-input-placeholder,textarea:-ms-input-placeholder,
input:-moz-placeholder,textarea:-moz-placeholder,
.form-control-comment{color:var(--gris)}
.nav-item .nav-link,.nav-item .nav-separtor,
#mobile_top_menu_wrapper .js-top-menu-bottom a,.dropdown,body#checkout section.checkout-step small,
.block_newsletter form input[type=text],.search-widget form input[type=text],
.block_newsletter form button[type=submit],.search-widget form button[type=submit],
.top-menu a:not([data-depth="0"]),
body#checkout section.checkout-step.-reachable.-complete h1 .step-edit,
body#checkout section.checkout-step .delete-address,body#checkout section.checkout-step .edit-address,
body#checkout .cancel-address,
body#checkout #order-summary-content .step-edit,
#history .orders .order a h3,body#checkout #order-summary-content a .step-edit,
body#checkout #footer,
.page-customer-account #content,
.page-addresses .address .address-footer a,
.page-my-account #content .links a,
#products .all-product-link,.featured-products .all-product-link,.product-accessories .all-product-link,
.product-miniature .product-title a,
.product-miniature .highlighted-informations .quick-view,
.product-miniature .comments_note{color:var(--gris)}
.product-miniature .regular-price,
.product-miniature .count,
#products,
#products .up .btn-secondary,#products .up .btn-tertiary,
.block-category .block-category-inner #category-description strong,
.brands-sort,.products-sort-order,.suppliers-sort,
.facet-dropdown,
.pagination .disabled,
#product-description-short ol li,#product-description-short ul li,.product-information .product-description ol li,.product-information .product-description ul li,
.product-prices .tax-shipping-delivery-label,
.product-customization small,.product-discount,
.has-discount .product-unit-price,.product-unit-price,
.tabs .nav-tabs .nav-link,
.product-customization .custom-file,
.product-pack .pack-product-container .pack-product-name,
#header .header-nav .blockcart a,.account-list a,.products-selection .title,
.cart-grid-right .promo-discounts .cart-summary-line .label,
.product-line-grid-body>.product-line-info .unit-price-cart{color:var(--gris)}
#stores .page-stores .store-item-footer i.material-icons,
.block-contact,.footer-container li a,
.contact-rich,
.contact-form,
#pagenotfound .page-not-found,#products .page-not-found,
.block_newsletter form .row .col-xs-12:last-of-type .page-content.page-cms ul,.block_newsletter form .row .col-xs-12:last-of-type p,.page-content.page-cms .block_newsletter form .row .col-xs-12:last-of-type ul,
#header,
#header .header-nav .cart-preview .shopping-cart,
#header .header-top a[data-depth="0"],
#wrapper .breadcrumb li::after,
#wrapper .breadcrumb li:last-child,
.carousel .carousel-item .caption .caption-description .page-content.page-cms ul,.carousel .carousel-item .caption .caption-description h3,.carousel .carousel-item .caption .caption-description p,.page-content.page-cms .carousel .carousel-item .caption .caption-description ul{color:var(--gris)}
.blockquote-footer,
.figure-caption,
.table-inverse,
.form-control::-webkit-input-placeholder,
.form-control::-moz-placeholder,
.form-control:-ms-input-placeholder,
.form-control::-ms-input-placeholder,
.form-control::placeholder,
.btn-link:disabled:focus,.btn-link:disabled:hover,
.dropdown-item.disabled,.dropdown-item.disabled:focus,.dropdown-item.disabled:hover,
.dropdown-header,
.custom-select:disabled,
.nav-link.disabled,
.nav-link.disabled,.nav-link.disabled:focus,.nav-link.disabled:hover,
.nav-tabs .nav-link.disabled,.nav-tabs .nav-link.disabled:focus,.nav-tabs .nav-link.disabled:hover,
.breadcrumb-item+.breadcrumb-item::before,
.breadcrumb-item.active,
.page-item.disabled .page-link,.page-item.disabled .page-link:focus,.page-item.disabled .page-link:hover{color:var(--gris-clair)}
.list-group-item.disabled,.list-group-item.disabled:focus,.list-group-item.disabled:hover,
.list-group-item.disabled .list-group-item-text,.list-group-item.disabled:focus .list-group-item-text,.list-group-item.disabled:hover .list-group-item-text,
.tvblog_post .slick-prev,.tvblog_post .slick-next,
.tvblog_post .slick-prev.slick-disabled,.tvblog_post .slick-next.slick-disabled{color:var(--gris-clair)}
.has-success .custom-control,.has-success .form-check-inline,.has-success .form-check-label,.has-success .form-control-feedback,.has-success .form-control-label,
.has-success .input-group-addon,
.btn-outline-success,
.text-success,
.done,
#blockcart-modal .modal-title i.material-icons,
.product-line-grid-body>.product-line-info>.available{color:var(--vert)}
.has-warning .custom-control,.has-warning .form-check-inline,.has-warning .form-check-label,.has-warning .form-control-feedback,.has-warning .form-control-label,
.has-warning .input-group-addon,
.btn-outline-warning,
.text-warning,
.alert-warning .material-icons,
.block-promo .cart-summary-line .label,.block-promo .promo-name{color:var(--rouge)}

.form-control::placeholder,.form-control::-webkit-input-placeholder,
.form-control::-moz-placeholder,.form-control:-ms-input-placeholder{color:var(--gris-clair)}
.has-success .form-control-comment,.has-success .form-control-label{color:var(--vert)}
.has-error .form-control-comment,.has-error .form-control-label{color:var(--rouge)}
/* Les pastilles heritees restent en cyan vif : on les remet dans la palette. */
.product-flag,.product-flags li.product-flag{background:var(--nuit); color:#fff}
.product-flag.out_of_stock{background:var(--rouge); color:#fff}
.product-flag.discount,.product-flag.on-sale{background:var(--rouge); color:#fff}
.product-flag.new{background:var(--nuit); color:#fff}

/* ==========================================================================
   21. Pied de page et fonds sombres
   La reprise des couleurs de Classic a repeint en gris sombre des textes
   posés sur le bleu nuit : illisibles. Tout ce qui vit sur un fond sombre
   reprend une encre claire, quelle que soit la règle héritée.
   ========================================================================== */
#footer,#footer p,#footer li,#footer span,#footer div,#footer label,
#footer .block_newsletter p,#footer .block-contact,#footer .text-muted,
.mr-bande-nuit,.mr-bande-nuit p,.mr-bande-nuit li,.mr-bande-nuit span{
  color:#D5D9DF;
}
#footer a,#footer .footer-container a{color:#D5D9DF}
#footer a:hover,#footer .footer-container a:hover{color:var(--or-clair)}
#footer h1,#footer h2,#footer h3,#footer h4,#footer .h3,
#footer .myaccount-title,#footer .block-contact-title,#footer .links .h3{
  color:var(--or-clair);
}
#footer .block_newsletter input[type=email]{
  background:rgba(255,255,255,.09); border-color:rgba(255,255,255,.22); color:#fff;
}
#footer .block_newsletter input[type=email]::placeholder{color:#98A0AA}
#footer .bottom-footer,#footer .bottom-footer p,#footer .bottom-footer a{color:#9AA2AC}
#footer .material-icons{color:#9AA2AC}
/* Le doré de texte est calculé pour le crème : sur le bleu nuit il faut l'éclaircir. */
.mr-bande-nuit .mr-eyebrow,.mr-bande-nuit .mr-lien,
#footer .mr-eyebrow{color:var(--or-clair)}


/* ==========================================================================
   22. Méga-menu en deux volets
   ========================================================================== */
@media (min-width:992px){
  #_desktop_top_menu .sub-menu.mr-volets{
    display:grid; grid-template-columns:232px 1fr; gap:0;
    width:min(940px,88vw); min-width:0; padding:0; overflow:hidden; max-height:none;
  }
  .mr-volets .mr-rail{
    list-style:none; margin:0; padding:22px 0; background:var(--creme2);
    border-right:1px solid var(--filet); display:block;
  }
  .mr-volets .mr-rail li{display:block; margin:0}
  .mr-volets .mr-onglet{
    display:block; width:100%; text-align:left; background:none; border:0;
    padding:11px 24px; cursor:pointer; font-family:var(--serif); font-size:16.5px;
    font-weight:500; color:var(--encre); position:relative; line-height:1.3;
  }
  .mr-volets .mr-onglet::after{
    content:"›"; position:absolute; right:18px; top:50%; transform:translateY(-50%);
    font-family:var(--sans); color:var(--gris-clair); opacity:0; transition:opacity .18s;
  }
  .mr-volets .mr-onglet:hover{color:var(--or-texte)}
  .mr-volets .mr-onglet[aria-expanded="true"]{
    background:var(--blanc); color:var(--or-texte);
  }
  .mr-volets .mr-onglet[aria-expanded="true"]::after{opacity:1}
  .mr-volets .mr-onglet:focus-visible{outline:2px solid var(--or); outline-offset:-2px}

  .mr-volets .mr-scene{padding:26px 30px; background:var(--blanc); min-height:280px}
  .mr-volets .mr-vue-tete{
    display:inline-block; font-family:var(--serif); font-size:19px; font-weight:500;
    color:var(--encre); border-bottom:1px solid var(--filet); padding:0 0 8px;
    margin:0 0 16px; text-transform:none; letter-spacing:0;
  }
  .mr-volets .mr-vue-tete:hover{color:var(--or-texte)}
  .mr-volets .mr-vue ul{
    display:block; columns:3 150px; column-gap:28px; margin:0; padding:0; list-style:none;
  }
  .mr-volets .mr-vue ul li{display:block; break-inside:avoid; margin:0}
  .mr-volets .mr-vue ul a{
    display:block; padding:4px 0; font-family:var(--sans); font-size:13.5px;
    font-weight:300; color:var(--gris); border:0; margin:0;
    text-transform:none; letter-spacing:0; line-height:1.45;
  }
  .mr-volets .mr-vue ul a:hover{color:var(--or-texte)}
  .mr-volets .mr-vue ul ul{columns:1; margin-top:2px}
  /* le repli de la version precedente n'a plus lieu d'etre */
  .mr-volets li.mr-plus{display:none}
}

/* ==========================================================================
   23. Tableaux du contenu rédactionnel
   Mesuré au pixel sur la page rendue : les cellules restaient peintes en
   #7a7a7a, soit 4,05:1. La règle source n'a pas pu être isolée dans la
   feuille Classic, d'où la priorité explicite.
   ========================================================================== */
#category-description table td,
#category-description table td a,
#category-description table tbody th,
.product-description table td,.rte table td{color:var(--gris)!important}
#category-description table td a,.product-description table td a{color:var(--or-texte)!important}
#category-description table thead th,
.product-description table thead th,.rte table thead th{color:var(--gris-clair)!important}

/* La regle de base du panneau impose width:max-content et min-width:320px ;
   sur un panneau a deux volets il faut une largeur ferme. */
@media (min-width:992px){
  #_desktop_top_menu>.top-menu>li>.sub-menu.mr-volets,
  #_desktop_top_menu>.top-menu>li>.popover.sub-menu.mr-volets{
    display:grid!important; grid-template-columns:232px minmax(0,1fr)!important;
    width:min(940px,88vw)!important; max-width:none!important; min-width:0!important;
    max-height:none!important; overflow:hidden!important; padding:0!important;
  }
}

/* Un panneau de 940 px cale sur son entree de menu deborde de l'ecran.
   On le positionne sur le conteneur d'en-tete, qui est deja en position
   relative, plutot que sur l'entree elle-meme. */
@media (min-width:992px){
  #_desktop_top_menu>.top-menu>li:has(>.sub-menu.mr-volets){position:static}
  #_desktop_top_menu>.top-menu>li>.sub-menu.mr-volets{left:0!important; right:auto!important}
}

/* ==========================================================================
   24. Niveaux de titre oubliés
   Je n'avais stylé que h1 à h4. PrestaShop se sert de « h5 » et surtout de
   « .h6 » comme classes utilitaires pour du texte courant : le bloc de
   réassurance, les libellés de tri, les intertitres de tunnel. Faute de
   règle, ils retombaient sur le gris pâle de Classic.
   ========================================================================== */
h5,h6,.h5,.h6{
  font-family:var(--serif); font-weight:500; color:var(--encre);
  letter-spacing:.002em; line-height:1.35; margin-top:0;
}
h5,.h5{font-size:17px}
h6,.h6{font-size:15.5px}

/* Le bloc de réassurance : ce sont des phrases, pas des titres. */
#block-reassurance .block-reassurance-item span,
#block-reassurance .block-reassurance-item .h6,
.block-reassurance .block-reassurance-item span,
#product .blockreassurance_product span,
#product .blockreassurance_product .h6{
  font-family:var(--sans); font-size:13.5px; font-weight:400;
  color:var(--gris); line-height:1.5; letter-spacing:0;
}
#block-reassurance .block-reassurance-item{gap:14px; align-items:center}

/* Les autres emplois de .h6 comme texte courant. */
.products-sort-order .select-title,.products-selection .h6,
#js-product-list-top .h6,.cart-summary .h6,.checkout .h6{
  color:var(--gris);
}

/* ==========================================================================
   25. Le texte courant reprend de l'encre
   J'avais posé tout le corps de texte en gris (#5E636B) pendant que les
   titres restaient en quasi-noir. Le seuil de 4,5:1 était tenu, mais lire un
   paragraphe gris sous un titre noir donne une page délavée. Le gris ne sert
   plus qu'aux métadonnées : légendes, compteurs, en-têtes de colonne.
   ========================================================================== */
:root{ --encre-texte:#2E333B; }        /* 11,4:1 sur le crème */
@media (prefers-color-scheme: dark){ :root{ --encre-texte:#E4E1DA; } }
:root[data-theme="dark"]{ --encre-texte:#E4E1DA; }
:root[data-theme="light"]{ --encre-texte:#2E333B; }

body{color:var(--encre-texte)}

/* Contenu rédactionnel */
#category-description,#category-description p,#category-description li,
#category-description td,.product-description,.product-description p,
.product-description li,.rte,.rte p,.rte li,#description,#description p,
.mr-intro p,.mr-htexte p,.mr-tete p,.mr-chapo,
details>*:not(summary),blockquote,
#product-description-short,.product-description-short{
  color:var(--encre-texte);
}
#category-description table td,.product-description table td,.rte table td{
  color:var(--encre-texte)!important;
}
.mr-row>span,.mr-row>dd,.mr-row .mr-v,.data-sheet dd{color:var(--encre-texte)}
.mr-sci,.mr-tra,.mr-note,.mr-card{color:var(--encre-texte)}
.mr-htexte .mr-chapeau{color:var(--craie,#4A4F57)}

/* Navigation et listes */
#left-column .block-categories a,#search_filters .facet .facet-label a,
.mr-toc a,#subcategories .subcategory-name,
#_desktop_top_menu .sub-menu ul ul a,.mr-volets .mr-vue ul a,
.top-menu .sub-menu a,.footer-container a{
  color:var(--encre-texte);
}
#footer .footer-container a{color:#D5D9DF}
.mr-bande-nuit p,.mr-bgrid p{color:#C6CBD3}
.mr-rayons em,.mr-duo-txt p{color:var(--encre-texte)}

/* Le gris ne garde que le second plan : compteurs, légendes, en-têtes. */
.text-muted,.form-control-comment,.mr-src,.mr-hphotos figcaption,
.mr-pgrid span,.mr-chiffres span,.breadcrumb li a,.breadcrumb li span,
table thead th,.data-sheet dt,.mr-row>strong,.mr-row .mr-k,
.product-miniature .regular-price,#product .product-reference,
.products-selection .total-products p,.showing{
  color:var(--gris-clair);
}

/* Pastilles d'état : elles doivent se lire d'un coup d'œil. */
.product-miniature .product-flags li.product-flag,
#product .product-flags li.product-flag,.product-flag{
  background:var(--nuit); color:#fff; border:0; font-weight:400;
}
.product-flag.out_of_stock,.product-flag.discount,.product-flag.on-sale,
.product-miniature .product-flag.out_of_stock{background:var(--rouge); color:#fff}
.product-flag.new,.product-miniature .product-flag.new{background:var(--vert); color:#fff}

/* ==========================================================================
   27. Un seul thème
   Le catalogue est fait de packshots sur fond blanc : une variante sombre ne
   peut pas les servir. On fige le schéma clair plutôt que de maintenir deux
   versions dont une seule est regardée.
   ========================================================================== */
:root{
  color-scheme:only light;
  --creme:#FBF8F3; --creme2:#F4EDE1; --creme3:#EDE4D4;
  --blanc:#FFFFFF; --nuit:#1E2A3A; --nuit2:#2C3D53;
  --or:#B8934C; --or-clair:#D3B478; --or-pale:#EFE3CB; --or-texte:#8A6A2E;
  --encre:#232830; --encre-texte:#2E333B; --gris:#5E636B; --gris-clair:#6E737B;
  --filet:#E7DECE; --filet2:#D6C9B2; --rouge:#9C4A34; --vert:#4A6B57;
  --sur-or:#FFFFFF;
}

/* Le dossier rédactionnel, remonté sous la grille produits. */
.mr-dossier{
  margin:56px 0 0; padding:44px 0 0; border-top:1px solid var(--filet);
}
.mr-dossier-titre{
  font-family:var(--serif); font-size:clamp(24px,2.8vw,34px); font-weight:400;
  color:var(--encre); margin:0 0 28px; text-align:left;
}
.mr-dossier h2{margin:44px 0 16px}
.mr-dossier h3{margin:30px 0 10px}
.mr-dossier p,.mr-dossier li,.mr-dossier td{color:var(--encre-texte)}
.mr-dossier a{color:var(--or-texte); text-decoration:underline; text-underline-offset:3px}
.mr-dossier table{max-width:820px}
.mr-dossier details{max-width:860px}
/* Pages de guide : du texte, pas de catalogue.
   La rubrique ne porte aucun produit, PrestaShop y affiche donc sa grille
   vide et son avis « aucun produit ». On masque l'ensemble sur les seules
   pages concernees, designees par la classe que PrestaShop pose lui-meme. */
body#category.category-id-436 #js-product-list,
body#category.category-id-456 #js-product-list,
body#category.category-id-583 #js-product-list,
body#category.category-id-584 #js-product-list,
body#category.category-id-585 #js-product-list,
body#category.category-id-586 #js-product-list,
body#category.category-id-587 #js-product-list,
body#category.category-id-588 #js-product-list,
body#category.category-id-589 #js-product-list,
body#category.category-id-590 #js-product-list,
body#category.category-id-591 #js-product-list,
body#category.category-id-592 #js-product-list,
body#category.category-id-593 #js-product-list{display:none !important}

body#category.category-id-436 #js-product-list-top,
body#category.category-id-456 #js-product-list-top,
body#category.category-id-583 #js-product-list-top,
body#category.category-id-584 #js-product-list-top,
body#category.category-id-585 #js-product-list-top,
body#category.category-id-586 #js-product-list-top,
body#category.category-id-587 #js-product-list-top,
body#category.category-id-588 #js-product-list-top,
body#category.category-id-589 #js-product-list-top,
body#category.category-id-590 #js-product-list-top,
body#category.category-id-591 #js-product-list-top,
body#category.category-id-592 #js-product-list-top,
body#category.category-id-593 #js-product-list-top{display:none !important}

body#category.category-id-436 #js-product-list-bottom,
body#category.category-id-456 #js-product-list-bottom,
body#category.category-id-583 #js-product-list-bottom,
body#category.category-id-584 #js-product-list-bottom,
body#category.category-id-585 #js-product-list-bottom,
body#category.category-id-586 #js-product-list-bottom,
body#category.category-id-587 #js-product-list-bottom,
body#category.category-id-588 #js-product-list-bottom,
body#category.category-id-589 #js-product-list-bottom,
body#category.category-id-590 #js-product-list-bottom,
body#category.category-id-591 #js-product-list-bottom,
body#category.category-id-592 #js-product-list-bottom,
body#category.category-id-593 #js-product-list-bottom{display:none !important}

body#category.category-id-436 .products-selection,
body#category.category-id-456 .products-selection,
body#category.category-id-583 .products-selection,
body#category.category-id-584 .products-selection,
body#category.category-id-585 .products-selection,
body#category.category-id-586 .products-selection,
body#category.category-id-587 .products-selection,
body#category.category-id-588 .products-selection,
body#category.category-id-589 .products-selection,
body#category.category-id-590 .products-selection,
body#category.category-id-591 .products-selection,
body#category.category-id-592 .products-selection,
body#category.category-id-593 .products-selection{display:none !important}

body#category.category-id-436 #search_filters_wrapper,
body#category.category-id-456 #search_filters_wrapper,
body#category.category-id-583 #search_filters_wrapper,
body#category.category-id-584 #search_filters_wrapper,
body#category.category-id-585 #search_filters_wrapper,
body#category.category-id-586 #search_filters_wrapper,
body#category.category-id-587 #search_filters_wrapper,
body#category.category-id-588 #search_filters_wrapper,
body#category.category-id-589 #search_filters_wrapper,
body#category.category-id-590 #search_filters_wrapper,
body#category.category-id-591 #search_filters_wrapper,
body#category.category-id-592 #search_filters_wrapper,
body#category.category-id-593 #search_filters_wrapper{display:none !important}

body#category.category-id-436 .pagination,
body#category.category-id-456 .pagination,
body#category.category-id-583 .pagination,
body#category.category-id-584 .pagination,
body#category.category-id-585 .pagination,
body#category.category-id-586 .pagination,
body#category.category-id-587 .pagination,
body#category.category-id-588 .pagination,
body#category.category-id-589 .pagination,
body#category.category-id-590 .pagination,
body#category.category-id-591 .pagination,
body#category.category-id-592 .pagination,
body#category.category-id-593 .pagination{display:none !important}

body#category.category-id-436 #js-active-search-filters,
body#category.category-id-456 #js-active-search-filters,
body#category.category-id-583 #js-active-search-filters,
body#category.category-id-584 #js-active-search-filters,
body#category.category-id-585 #js-active-search-filters,
body#category.category-id-586 #js-active-search-filters,
body#category.category-id-587 #js-active-search-filters,
body#category.category-id-588 #js-active-search-filters,
body#category.category-id-589 #js-active-search-filters,
body#category.category-id-590 #js-active-search-filters,
body#category.category-id-591 #js-active-search-filters,
body#category.category-id-592 #js-active-search-filters,
body#category.category-id-593 #js-active-search-filters{display:none !important}

body#category.category-id-436 .block-category .category-cover,
body#category.category-id-456 .block-category .category-cover,
body#category.category-id-583 .block-category .category-cover,
body#category.category-id-584 .block-category .category-cover,
body#category.category-id-585 .block-category .category-cover,
body#category.category-id-586 .block-category .category-cover,
body#category.category-id-587 .block-category .category-cover,
body#category.category-id-588 .block-category .category-cover,
body#category.category-id-589 .block-category .category-cover,
body#category.category-id-590 .block-category .category-cover,
body#category.category-id-591 .block-category .category-cover,
body#category.category-id-592 .block-category .category-cover,
body#category.category-id-593 .block-category .category-cover{display:none !important}

/* la colonne de gauche ne sert a rien quand il n'y a pas de filtre */
body#category.category-id-436 #left-column,
body#category.category-id-456 #left-column,
body#category.category-id-583 #left-column,
body#category.category-id-584 #left-column,
body#category.category-id-585 #left-column,
body#category.category-id-586 #left-column,
body#category.category-id-587 #left-column,
body#category.category-id-588 #left-column,
body#category.category-id-589 #left-column,
body#category.category-id-590 #left-column,
body#category.category-id-591 #left-column,
body#category.category-id-592 #left-column,
body#category.category-id-593 #left-column
{display:none}
body#category.category-id-436 #content-wrapper,
body#category.category-id-456 #content-wrapper,
body#category.category-id-583 #content-wrapper,
body#category.category-id-584 #content-wrapper,
body#category.category-id-585 #content-wrapper,
body#category.category-id-586 #content-wrapper,
body#category.category-id-587 #content-wrapper,
body#category.category-id-588 #content-wrapper,
body#category.category-id-589 #content-wrapper,
body#category.category-id-590 #content-wrapper,
body#category.category-id-591 #content-wrapper,
body#category.category-id-592 #content-wrapper,
body#category.category-id-593 #content-wrapper
{width:100%;max-width:none;flex:0 0 100%}
/* ===================================================================
   Pages de guide
   Une page de guide est un article, pas une liste de produits. Elle se
   lit en colonne etroite, s'ouvre sur une image, et ne propose la
   marchandise qu'apres avoir explique de quoi il s'agit.
   =================================================================== */

.mr-guide-page{
  --mesure:66ch;
  color:var(--encre-texte,#2E333B);
}

/* ---------- image de tete ---------- */
.mr-guide-page .mr-hero{
  margin:0 0 2.75rem;
  border-radius:3px;
  overflow:hidden;
  background:#efe9dd;
}
.mr-guide-page .mr-hero img{
  display:block;width:100%;height:clamp(190px,30vw,340px);
  object-fit:cover;object-position:center 45%;
}

/* ---------- chapo ---------- */
.mr-guide-page .mr-intro{
  max-width:var(--mesure);
  margin:0 0 2.25rem;
}
.mr-guide-page .mr-intro p{
  font-size:clamp(1.09rem,1.6vw,1.28rem);
  line-height:1.62;
  color:var(--encre-texte,#2E333B);
  margin:0 0 .8rem;
  text-wrap:pretty;
}

/* ---------- sommaire ---------- */
.mr-guide-page .mr-toc{
  max-width:var(--mesure);
  margin:0 0 3rem;
  padding:1.35rem 1.6rem 1.5rem;
  border:1px solid rgba(30,54,102,.16);
  border-radius:3px;
  background:rgba(255,255,255,.55);
}
.mr-guide-page .mr-toc-t{
  margin:0 0 .7rem;
  font-family:var(--titre,Georgia,serif);
  font-size:1.02rem;
  color:var(--nuit,#1E3666);
}
.mr-guide-page .mr-toc ol{
  margin:0;padding:0;list-style:none;
  counter-reset:mrtoc;
  display:grid;gap:.42rem;
}
.mr-guide-page .mr-toc li{counter-increment:mrtoc;display:flex;gap:.6rem;align-items:baseline}
.mr-guide-page .mr-toc li::before{
  content:counter(mrtoc,decimal-leading-zero);
  font-size:.76rem;letter-spacing:.04em;
  color:var(--or-texte,#8A6204);
  font-variant-numeric:tabular-nums;
  flex:0 0 auto;
}
.mr-guide-page .mr-toc a{
  color:var(--encre-texte,#2E333B);
  text-decoration:none;
  border-bottom:1px solid rgba(30,54,102,.22);
  line-height:1.45;
}
.mr-guide-page .mr-toc a:hover,
.mr-guide-page .mr-toc a:focus-visible{
  color:var(--nuit,#1E3666);
  border-bottom-color:var(--or,#E4A206);
}

/* ---------- corps ---------- */
.mr-guide-page .mr-corps{max-width:var(--mesure)}
.mr-guide-page .mr-corps h2{
  margin:2.9rem 0 .9rem;
  font-family:var(--titre,Georgia,serif);
  font-size:clamp(1.42rem,2.4vw,1.86rem);
  line-height:1.22;
  color:var(--nuit,#1E3666);
  text-wrap:balance;
  scroll-margin-top:5rem;
}
.mr-guide-page .mr-corps h2:first-child{margin-top:0}
.mr-guide-page .mr-corps h2::after{
  content:"";display:block;width:2.4rem;height:2px;
  margin-top:.62rem;background:var(--or,#E4A206);
}
.mr-guide-page .mr-corps h3{
  margin:1.9rem 0 .6rem;
  font-family:var(--titre,Georgia,serif);
  font-size:1.16rem;color:var(--nuit,#1E3666);
}
.mr-guide-page .mr-corps p{
  margin:0 0 1.05rem;
  line-height:1.72;
  color:var(--encre-texte,#2E333B);
  text-wrap:pretty;
}
.mr-guide-page .mr-corps strong{color:var(--nuit,#1E3666);font-weight:600}
.mr-guide-page .mr-corps em{font-style:italic;color:var(--nuit,#1E3666)}
.mr-guide-page .mr-corps a{color:var(--or-texte,#8A6204)}

/* tableaux de correspondance */
.mr-guide-page .mr-grid{
  margin:1.35rem 0 1.8rem;
  border-top:1px solid rgba(30,54,102,.14);
}
.mr-guide-page .mr-row{
  display:grid;
  grid-template-columns:minmax(7.5rem,11rem) 1fr;
  gap:.35rem 1.4rem;
  padding:.72rem 0;
  border-bottom:1px solid rgba(30,54,102,.14);
}
.mr-guide-page .mr-row strong{
  color:var(--nuit,#1E3666);font-weight:600;line-height:1.45;
}
.mr-guide-page .mr-row span{
  color:var(--encre-texte,#2E333B);line-height:1.55;
}
@media(max-width:520px){
  .mr-guide-page .mr-row{grid-template-columns:1fr;gap:.15rem}
}

/* ---------- les pieces en vente ---------- */
.mr-guide-page .mr-vente{margin:3.6rem 0 0}
.mr-guide-page .mr-vente h2,
.mr-guide-page .mr-suite h2,
.mr-guide-page .mr-faq h2{
  margin:0 0 .35rem;
  font-family:var(--titre,Georgia,serif);
  font-size:clamp(1.42rem,2.4vw,1.86rem);
  color:var(--nuit,#1E3666);
  scroll-margin-top:5rem;
}
.mr-guide-page .mr-vente-s{
  margin:0 0 1.5rem;font-size:.93rem;
  color:#5C6270;
}
.mr-guide-page .mr-pieces{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(158px,1fr));
  gap:1.5rem 1.15rem;
}
.mr-guide-page .mr-piece{
  display:flex;flex-direction:column;gap:.42rem;
  text-decoration:none;color:inherit;
}
.mr-guide-page .mr-piece-i{
  display:block;overflow:hidden;border-radius:2px;
  background:#f2ece0;aspect-ratio:1;
}
.mr-guide-page .mr-piece-i img{
  display:block;width:100%;height:100%;object-fit:cover;
  transition:transform .55s cubic-bezier(.16,1,.3,1);
}
.mr-guide-page .mr-piece:hover .mr-piece-i img,
.mr-guide-page .mr-piece:focus-visible .mr-piece-i img{transform:scale(1.045)}
.mr-guide-page .mr-piece-n{
  font-size:.87rem;line-height:1.38;
  color:var(--encre-texte,#2E333B);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;
}
.mr-guide-page .mr-piece:hover .mr-piece-n{color:var(--nuit,#1E3666)}
.mr-guide-page .mr-piece-p{
  font-size:.93rem;font-weight:600;
  color:var(--nuit,#1E3666);
  font-variant-numeric:tabular-nums;
}

/* ---------- rubriques voisines ---------- */
.mr-guide-page .mr-suite{margin:3.4rem 0 0}
.mr-guide-page .mr-voisins{
  margin-top:1.4rem;
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
  gap:.85rem;
}
.mr-guide-page .mr-voisin{
  display:flex;align-items:center;gap:.85rem;
  padding:.5rem .95rem .5rem .5rem;
  border:1px solid rgba(30,54,102,.16);
  border-radius:3px;
  text-decoration:none;
  background:rgba(255,255,255,.5);
  transition:border-color .25s ease,background .25s ease;
}
.mr-guide-page .mr-voisin img{
  width:52px;height:52px;flex:0 0 52px;
  object-fit:cover;border-radius:2px;background:#f2ece0;
}
.mr-guide-page .mr-voisin span{
  font-size:.94rem;line-height:1.35;
  color:var(--encre-texte,#2E333B);
}
.mr-guide-page .mr-voisin:hover,
.mr-guide-page .mr-voisin:focus-visible{
  border-color:var(--or,#E4A206);
  background:#fff;
}
.mr-guide-page .mr-voisin:hover span{color:var(--nuit,#1E3666)}

/* ---------- questions frequentes ---------- */
.mr-guide-page .mr-faq{margin:3.4rem 0 0;max-width:var(--mesure)}
.mr-guide-page .mr-faq details{
  border-bottom:1px solid rgba(30,54,102,.14);
}
.mr-guide-page .mr-faq details:first-of-type{
  border-top:1px solid rgba(30,54,102,.14);
  margin-top:1.3rem;
}
.mr-guide-page .mr-faq summary{
  list-style:none;cursor:pointer;
  padding:.95rem 2rem .95rem 0;
  position:relative;
  font-size:1.02rem;line-height:1.45;
  color:var(--nuit,#1E3666);
}
.mr-guide-page .mr-faq summary::-webkit-details-marker{display:none}
.mr-guide-page .mr-faq summary::after{
  content:"";position:absolute;right:.35rem;top:1.32rem;
  width:9px;height:9px;
  border-right:1.5px solid var(--or-texte,#8A6204);
  border-bottom:1.5px solid var(--or-texte,#8A6204);
  transform:rotate(45deg);
  transition:transform .3s cubic-bezier(.16,1,.3,1);
}
.mr-guide-page .mr-faq details[open] summary::after{transform:rotate(-135deg);top:1.62rem}
.mr-guide-page .mr-faq details p{
  margin:0 0 1.1rem;padding-right:2rem;
  line-height:1.68;color:var(--encre-texte,#2E333B);
}

/* ---------- sources ---------- */
.mr-guide-page .mr-src{
  margin:3.4rem 0 0;padding-top:1.3rem;
  max-width:var(--mesure);
  border-top:1px solid rgba(30,54,102,.14);
}
.mr-guide-page .mr-src p{
  margin:0 0 .6rem;font-size:.86rem;line-height:1.6;
  color:#5C6270;
}
.mr-guide-page .mr-src strong{color:var(--nuit,#1E3666)}
.mr-guide-page .mr-src a{color:var(--or-texte,#8A6204)}

@media(prefers-reduced-motion:reduce){
  .mr-guide-page *{transition-duration:.01ms !important}
}

/* ---------- la page de guide n'est pas une fiche rubrique ---------- */
/* Le gabarit encadre la description dans une carte prevue pour un chapo
   de trois lignes. Sur un guide, ce cadre et ses filets n'ont plus de sens. */
body#category:has(.mr-guide-page) .block-category,
body#category:has(.mr-guide-page) .block-category-inner,
body#category:has(.mr-guide-page) #category-description{
  border:0;background:none;box-shadow:none;padding:0;margin:0;
}
body#category:has(.mr-guide-page) #js-product-list-header{margin-bottom:0}
body#category:has(.mr-guide-page) #category-description{color:inherit}
body#category:has(.mr-guide-page) .block-category h1{margin-bottom:2rem}

/* les intitules du tableau restent en bas de casse : ce sont des mesures */
.mr-guide-page .mr-row strong,
.mr-guide-page .mr-corps strong{
  text-transform:none;letter-spacing:normal;font-size:1rem;
}
.mr-guide-page .mr-row strong{font-size:.99rem}

/* Le gabarit impose sa propre hauteur aux images de rubrique : on tranche. */
.mr-guide-page .mr-hero img{
  height:clamp(220px,26vw,360px) !important;
  max-height:none !important;
}

/* La vignette de rubrique porte deja le logo et le titre incrustes : on n'en
   garde que la bande centrale, sinon le titre s'affiche deux fois. La hauteur
   est portee par la figure, pour ne dependre d'aucune taille intrinseque. */
.mr-guide-page .mr-hero{
  display:block;line-height:0;
  height:clamp(220px,26vw,360px);
  overflow:hidden;
}
.mr-guide-page .mr-hero img{
  height:100% !important;width:100% !important;
  object-fit:cover;object-position:center 42%;
}
.mr-guide-page .mr-hero img{
  object-fit:cover !important;
  object-position:center 38% !important;
}

/* ---------- image de tete, posee en fond ---------- */
.mr-guide-page figure.mr-hero{
  display:block;margin:0 0 2.75rem;padding:0;border-radius:3px;
  height:clamp(200px,24vw,330px);
  background-color:#efe9dd;
  background-size:cover;
  background-position:center 46%;
  background-repeat:no-repeat;
}

/* ==========================================================================
   29. Passe d'ergonomie
   ========================================================================== */

/* --- Le bandeau de rubrique -----------------------------------------------
   La vignette ronde recadrait des photos rectangulaires : bandes blanches en
   haut et en bas. Le titre et le chapô suffisent, les tuiles de sous-rubrique
   montrent déjà la marchandise. */
.block-category .block-category-inner .category-cover{display:none}
.block-category{text-align:left; padding-bottom:22px; margin-bottom:26px}
.block-category h1{margin:18px 0 12px}
.block-category .block-category-inner{display:block}
.block-category #category-description{margin:0; max-width:74ch}

/* --- La colonne de gauche -------------------------------------------------
   Elle affichait une carte blanche presque vide sur les rubriques sans
   sous-rubrique. On la réduit à ce qu'elle porte vraiment. */
#left-column .block-categories{padding:22px 24px}
#left-column .block-categories .category-top-menu>li>a{
  font-family:var(--serif); font-size:17px; font-weight:500; color:var(--encre);
  letter-spacing:0; text-transform:none;
}
#left-column .block-categories .category-sub-menu a{font-size:14.5px}
#left-column .block-categories .category-sub-menu li{position:relative}
/* les chevrons d'accordéon de Classic, discrets plutôt qu'envahissants */
#left-column .navbar-toggler,#left-column .collapse-icons{
  opacity:.45; transform:scale(.8); transition:opacity .18s;
}
#left-column .category-sub-menu li:hover .navbar-toggler{opacity:1}

/* --- Les tuiles de sous-rubrique -----------------------------------------
   Le nom passait sous la photo sans lien visuel. On l'ancre, et la carte
   entière devient la cible du clic. */
#subcategories ul>li{position:relative}
#subcategories .subcategory-name::after{
  content:""; position:absolute; inset:0; z-index:1;
}
#subcategories .subcategory-name{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
#subcategories .subcategory-name::before{
  content:"›"; order:2; font-family:var(--sans); font-size:18px;
  color:var(--gris-clair); transition:transform .2s,color .2s;
}
#subcategories ul>li:hover .subcategory-name::before{
  color:var(--or-texte); transform:translateX(3px);
}

/* --- La grille produits ---------------------------------------------------
   Les vignettes sautaient de deux pixels au survol, ce qui décale la ligne
   entière. Un relief plutôt qu'un saut. */
.product-miniature{transition:box-shadow .28s cubic-bezier(.2,.6,.2,1)}
.product-miniature:hover{transform:none; box-shadow:var(--ombre-f)}
.product-miniature .product-title a{min-height:2.6em; display:-webkit-box}
.product-miniature .product-description{padding:18px 18px 20px}

/* --- Cibles tactiles et clavier ------------------------------------------ */
.pagination a,.products-sort-order .select-title,
#left-column .block-categories a,.mr-chips li a{min-height:40px; display:flex; align-items:center}
#left-column .block-categories a{display:block; min-height:0; padding:7px 0}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{
  outline:2px solid var(--or-texte); outline-offset:3px; border-radius:2px;
}

/* --- Repères de lecture --------------------------------------------------- */
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
.mr-dossier h2[id],.mr-dossier h3[id],#category-description h2,#category-description h3{
  scroll-margin-top:24px;
}
/* Le sommaire suit la lecture sur les longues pages. */
@media (min-width:1200px){
  .mr-dossier .mr-toc{position:sticky; top:20px; z-index:2}
}

/* --- Le fil d'Ariane ------------------------------------------------------ */
.breadcrumb{padding:20px 0 4px}
.breadcrumb li:last-child span{color:var(--encre-texte); font-weight:400}

/* --- Écrans étroits ------------------------------------------------------- */
@media (max-width:767px){
  .block-category h1{font-size:30px}
  #subcategories ul{grid-template-columns:repeat(2,1fr); gap:12px}
  .mr-dossier{margin-top:36px; padding-top:30px}
  .breadcrumb{font-size:10.5px}
}

/* ==========================================================================
   30. Menu mobile
   Le panneau gardait la présentation de Classic : lignes serrées, chevrons
   minuscules, aucune hiérarchie. Sur un écran de 390 px c'est le premier
   contact avec le catalogue, il mérite mieux.
   ========================================================================== */
@media (max-width:991px){
  #mobile_top_menu_wrapper{
    background:var(--creme); margin:0; padding:0;
    border-top:1px solid var(--filet);
    max-height:78vh; overflow-y:auto; -webkit-overflow-scrolling:touch;
  }
  #_mobile_top_menu .top-menu{background:transparent; margin:0; padding:0}
  #_mobile_top_menu .top-menu li{border:0; margin:0; display:block}

  /* Niveau 1 : de vraies lignes, hautes et lisibles. */
  #_mobile_top_menu>.top-menu>li{border-bottom:1px solid var(--filet)}
  #_mobile_top_menu>.top-menu>li>a{
    font-family:var(--serif); font-size:19px; font-weight:500; color:var(--encre);
    text-transform:none; letter-spacing:0; padding:17px 20px; display:block;
    min-height:56px; line-height:1.3;
  }
  /* Niveau 2 */
  #_mobile_top_menu .sub-menu{
    background:var(--creme2); border:0; border-radius:0; box-shadow:none;
    padding:4px 0 10px; position:static; width:auto; max-width:none;
    visibility:visible; opacity:1; transform:none; max-height:none;
  }
  #_mobile_top_menu .sub-menu>ul>li>a{
    font-family:var(--sans); font-size:15.5px; font-weight:500; color:var(--encre);
    padding:13px 20px 13px 32px; display:block; min-height:46px;
    border-bottom:1px solid var(--filet);
  }
  /* Niveau 3 */
  #_mobile_top_menu .sub-menu ul ul a{
    font-size:14.5px; font-weight:300; color:var(--gris);
    padding:11px 20px 11px 46px; display:block; min-height:42px; border:0;
  }
  #_mobile_top_menu a:active{background:var(--or-pale)}

  /* Le chevron devient une vraie cible tactile de 48 px. */
  #_mobile_top_menu .navbar-toggler,
  #_mobile_top_menu .collapse-icons{
    position:absolute; right:0; top:0; width:56px; height:56px;
    display:flex!important; align-items:center; justify-content:center;
    opacity:1; transform:none; color:var(--gris); z-index:2;
  }
  #_mobile_top_menu .navbar-toggler .material-icons{font-size:26px}
  #_mobile_top_menu>.top-menu>li,
  #_mobile_top_menu .sub-menu>ul>li{position:relative}
  #_mobile_top_menu .sub-menu>ul>li>.navbar-toggler{width:48px; height:46px}
  /* l'icône « moins » ne doit apparaître qu'une fois ouvert */
  #_mobile_top_menu .collapse-icons .remove{display:none}
  #_mobile_top_menu .collapse-icons[aria-expanded="true"] .add{display:none}
  #_mobile_top_menu .collapse-icons[aria-expanded="true"] .remove{display:inline-block}

  /* Le bouton d'ouverture, dans l'en-tête. */
  #menu-icon,.js-top-menu-toggle,#header .menu-icon{
    display:flex; align-items:center; justify-content:center;
    width:48px; height:48px; margin-left:-8px;
  }
  #menu-icon .material-icons{font-size:28px; color:var(--encre)}

  /* En-tête compact : le logo ne doit pas manger l'écran. */
  #header .header-top{padding:10px 0}
  #header .logo,#header img.logo{max-height:44px}
  #search_widget,.search-widgets{max-width:none; margin:10px 0 0}
  #header .header-banner{font-size:11px; padding:7px 0; letter-spacing:.08em}

  /* La grille produits sur petit écran. */
  #products .products,.products,.product_list{gap:12px}
  .product-miniature .product-title a{font-size:15px; min-height:0}
  .mr-hero{min-height:340px}
  .mr-hero-in{padding:0 20px}
  .mr-bande{padding:44px 0}
  .page-home .container{padding:0 20px}
}

/* ==========================================================================
   31. Palette relevée sur la devanture
   Le vinyle de Guérande donne le bleu #1E3666 (20 924 px) et l'or #E4A206
   (16 454 px). L'or de marque plafonne à 2,09:1 sur le crème : il ne sert
   qu'en aplat. Pour le texte on descend à #8A6204, qui tient 5,18:1 tout en
   restant la même teinte. Sur le bleu, l'or de marque passe à 5,34:1.
   ========================================================================== */
:root{
  --nuit:#1E3666;          /* bleu Meirea */
  --nuit2:#2A4A85;
  --nuit-fonce:#17294E;
  --or:#E4A206;            /* or Meirea, aplats et filets */
  --or-clair:#EDB431;      /* sur fond bleu : 6,30:1 */
  --or-texte:#8A6204;      /* liens et libellés sur clair : 5,18:1 */
  --or-vif:#C08A05;
  --or-pale:#FBEFD2;
  --sur-or:#1B1405;        /* encre sur aplat doré : 8,4:1 */
  --creme2:#F5EFE3;
  --filet:#E8DDC8;
  --filet2:#D6C6A4;
}

/* L'or de marque porte les aplats ; le texte dessus vire à l'encre sombre. */
.btn-primary,.btn-primary:not(:disabled):not(.disabled){
  background:var(--or); border-color:var(--or); color:var(--sur-or); font-weight:500;
}
.btn-primary:hover,.btn-primary:focus,.btn-primary:active{
  background:var(--nuit); border-color:var(--nuit); color:#fff;
}
.pagination .current a{background:var(--or); border-color:var(--or); color:var(--sur-or)}
.product-flag.new{background:var(--or); color:var(--sur-or)}
.mr-filet{background:var(--or)}
.mr-toc{border-top-color:var(--or)}
.mr-tra,.mr-note{border-top-color:var(--or)}

/* Sur le bleu nuit, l'or reprend sa vivacité. */
.mr-bande-nuit .mr-eyebrow,.mr-bande-nuit .mr-filet,
#footer .footer-container .h3,#footer h3,#footer .myaccount-title,
#footer .block-contact-title,#footer .links .h3,
.mr-hero-in .mr-eyebrow,.mr-bgrid .mr-ville{color:var(--or-clair)}
.mr-bande-nuit .mr-filet{background:var(--or-clair)}
#footer a:hover,.mr-bgrid a{color:var(--or-clair)}
.mr-hero-in h1 em{color:var(--or-clair)}

/* Le bandeau de tête reprend le bleu de la devanture. */
#header .header-banner{background:var(--nuit-fonce); color:var(--or-clair)}
#footer{background:var(--nuit)}
.mr-bande-nuit{background:var(--nuit)}
.mr-hero::after{
  background:linear-gradient(100deg,rgba(23,41,78,.80) 0%,rgba(23,41,78,.58) 42%,rgba(23,41,78,.08) 78%);
}

/* ==========================================================================
   32. Vignettes produit
   Les packshots sont au format portrait 770x924. Recadrés en « cover » dans
   un carré, ils perdaient le haut et le bas de l'objet. En vente en ligne la
   pièce doit être entière : on passe en « contain » sur un fond blanc, au
   format 4/5 qui colle à la source, avec une marge pour que l'objet respire.
   ========================================================================== */
.product-miniature .product-thumbnail{background:#fff}
.product-miniature .product-thumbnail img{
  width:100%; aspect-ratio:4/5; object-fit:contain; object-position:center;
  background:#fff; padding:10px; display:block;
  transition:transform .5s cubic-bezier(.2,.6,.2,1);
}
.product-miniature:hover .product-thumbnail img{transform:scale(1.04)}

/* Les tuiles de sous-rubrique suivent la même règle. */
#subcategories .subcategory-image img{
  aspect-ratio:4/5; object-fit:contain; background:#fff; padding:10px;
}
/* Les visuels de rubrique sont composés au carré : eux gardent le cadrage. */
#subcategories ul>li .subcategory-image img[src*="_thumb-"]{object-fit:cover; padding:0}

/* Les entrées de l'accueil montrent des scènes, pas des packshots. */
.mr-pgrid img,.mr-vis img{object-fit:cover; padding:0; background:#fff}

/* La photo de la fiche produit ne doit rien perdre non plus. */
.product-cover img,#product .product-cover img{
  width:100%; height:auto; object-fit:contain; background:#fff;
}
#product .product-images img,.js-qv-mask .thumb{
  object-fit:contain; background:#fff; padding:4px;
}

/* Repères d'échelle : sans eux, une pierre de 2 cm et une de 20 cm se
   ressemblent. Le nom porte la dimension quand elle est connue. */
.product-miniature .product-description{padding:16px 16px 18px}
.product-miniature .product-title a{font-size:15.5px; line-height:1.35; min-height:2.7em}
.product-miniature .product-price-and-shipping{padding-top:10px; margin-top:6px}

@media (max-width:575px){
  .product-miniature .product-thumbnail img{padding:6px}
  .product-miniature .product-description{padding:12px 12px 14px}
}

/* Les rayons de la page d'accueil tenaient sur quatre colonnes, le cinquieme
   tombait seul a la ligne. La regle de categorie.css est plus specifique :
   on s'aligne dessus au lieu de lutter avec un selecteur plus faible. */
#subcategories ul.subcategories-list{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:1.15rem;
  margin:0;padding:0;list-style:none;float:none;
}
#subcategories ul.subcategories-list>li{
  float:none;width:auto;max-width:none;min-width:0;margin:0;padding:0;list-style:none;
}
@media(min-width:1180px){
  #subcategories ul.subcategories-list{grid-template-columns:repeat(5,minmax(0,1fr))}
}
#subcategories ul.subcategories-list>li>*,
#subcategories ul.subcategories-list .subcategory-image,
#subcategories ul.subcategories-list .subcategory-image img{
  min-width:0;max-width:100%;width:100%;
}

/* ==========================================================================
   33. Marques partenaires
   Les logos sont fournis en 254x80 sur fond blanc. On les pose sur une ligne
   de cartes, à niveau de gris au repos pour qu'ils ne se disputent pas la
   couleur avec le catalogue, en couleur au survol.
   ========================================================================== */
.mr-marques{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:1px; background:var(--filet); border:1px solid var(--filet);
  max-width:840px; margin:0 auto;
}
.mr-marques li{
  background:var(--blanc); display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:10px; padding:26px 20px;
  transition:background .2s;
}
.mr-marques li:hover{background:var(--creme2)}
.mr-marques img{
  max-width:170px; height:auto; display:block;
  filter:grayscale(1) contrast(.92); opacity:.72;
  transition:filter .25s,opacity .25s;
}
.mr-marques li:hover img{filter:none; opacity:1}
.mr-marques span{
  font-size:10.5px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--gris-clair);
}
@media (max-width:575px){
  .mr-marques{grid-template-columns:repeat(2,1fr)}
  .mr-marques li{padding:18px 12px}
}

/* Le menu mobile est desormais un tiroir a panneaux : voir tiroir.css. */
/* ==========================================================================
   Tiroir de navigation mobile

   Un panneau a la fois, pleine hauteur. Le titre du niveau reste en haut,
   le retour occupe toute la largeur en bas : c'est le geste le plus repete,
   il doit tomber sous le pouce. Les rangees font 58 px, au-dessus des 44 px
   minimum, parce qu'on navigue souvent d'une main dans une boutique.
   ========================================================================== */

.mrt{
  position:fixed;top:0;left:0;right:0;bottom:0;
  width:100%;height:100%;
  z-index:2000;display:block;margin:0;padding:0;
}
.mrt[hidden]{display:none}

.mrt-voile{
  position:absolute;inset:0;
  background:rgba(12,20,38,.52);
  opacity:0;transition:opacity .26s cubic-bezier(.16,1,.3,1);
}
.mrt.mrt-ouvert .mrt-voile{opacity:1}

.mrt-boite{
  position:absolute;top:0;left:0;right:0;bottom:0;
  width:100%;max-width:none;
  display:flex;flex-direction:column;
  background:#FAF7F2;
  transform:translateX(-100%);
  transition:transform .28s cubic-bezier(.16,1,.3,1);
  overscroll-behavior:contain;
}
.mrt.mrt-ouvert .mrt-boite{transform:none}

body.mrt-verrou{overflow:hidden}

/* ---------- bandeau de tete ---------- */
.mrt-tete{
  flex:0 0 auto;
  display:flex;align-items:center;gap:.75rem;
  min-height:60px;padding:0 .5rem 0 1.15rem;
  background:#1E3666;
  color:#FDFBF7;
}
.mrt-titre{
  margin:0;flex:1 1 auto;min-width:0;
  font-family:var(--titre,Georgia,serif);
  font-size:1.14rem;line-height:1.25;
  color:#FDFBF7;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.mrt-fermer{
  flex:0 0 auto;
  width:52px;height:52px;padding:0;
  background:none;border:0;cursor:pointer;
  position:relative;
}
.mrt-fermer::before,.mrt-fermer::after{
  content:"";position:absolute;left:50%;top:50%;
  width:19px;height:1.6px;background:#EDB431;
  transform-origin:center;
}
.mrt-fermer::before{transform:translate(-50%,-50%) rotate(45deg)}
.mrt-fermer::after{transform:translate(-50%,-50%) rotate(-45deg)}
.mrt-fermer:focus-visible{outline:2px solid #EDB431;outline-offset:-4px}

/* ---------- corps : les panneaux glissent ici ---------- */
.mrt-corps{
  position:relative;flex:1 1 auto;
  overflow-y:auto;overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
}
.mrt-panneau{
  position:absolute;inset:0 0 auto 0;
  min-height:100%;
  background:#FAF7F2;
  transition:transform .26s cubic-bezier(.16,1,.3,1),opacity .26s ease;
}
.mrt-entre-droite{transform:translateX(100%);opacity:.4}
.mrt-entre-gauche{transform:translateX(-100%);opacity:.4}
.mrt-sort-gauche{transform:translateX(-38%);opacity:0}
.mrt-sort-droite{transform:translateX(38%);opacity:0}

/* ---------- rangees ---------- */
.mrt-liste{margin:0;padding:0;list-style:none}
.mrt-item{margin:0;padding:0;list-style:none}
.mrt-item + .mrt-item{border-top:1px solid rgba(30,54,102,.13)}

.mrt-lien{
  display:flex;align-items:center;gap:.85rem;
  width:100%;min-height:58px;
  padding:.9rem 1.15rem;
  background:none;border:0;
  text-align:left;text-decoration:none;
  font-family:inherit;font-size:1.02rem;line-height:1.35;
  color:#2E333B;
  cursor:pointer;
  -webkit-tap-highlight-color:rgba(30,54,102,.08);
}
.mrt-nom{flex:1 1 auto;min-width:0}
.mrt-lien:active{background:rgba(30,54,102,.06)}
.mrt-lien:focus-visible{outline:2px solid #8A6204;outline-offset:-3px}

/* nombre de sous-rubriques : on sait ou l'on met les pieds */
.mrt-compte{
  flex:0 0 auto;
  font-size:.78rem;font-variant-numeric:tabular-nums;
  color:#6B7280;
  padding:.1rem .45rem;
  border:1px solid rgba(30,54,102,.18);
  border-radius:999px;
}
.mrt-chevron{
  flex:0 0 auto;width:8px;height:8px;
  border-right:1.6px solid #8A6204;
  border-bottom:1.6px solid #8A6204;
  transform:rotate(-45deg);
  margin-right:.15rem;
}

/* « voir tout » : la rubrique elle-meme, distincte de ses filles */
.mrt-tout{
  display:flex;align-items:center;
  min-height:54px;padding:.85rem 1.15rem;
  text-decoration:none;
  font-size:.94rem;letter-spacing:.01em;
  color:#8A6204;
  background:rgba(228,162,6,.07);
  border-bottom:1px solid rgba(228,162,6,.28);
}
.mrt-tout span{position:relative;padding-right:1.1rem}
.mrt-tout span::after{
  content:"";position:absolute;right:0;top:50%;
  width:7px;height:7px;margin-top:-4px;
  border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;
  transform:rotate(-45deg);
}
.mrt-tout:active{background:rgba(228,162,6,.14)}

/* liens de service, au bas du premier niveau */
.mrt-service{margin-top:1.6rem;border-top:1px solid rgba(30,54,102,.13)}
.mrt-lien-sec{color:#5C6270;font-size:.96rem;min-height:52px}

/* ---------- barre de retour, dans la zone du pouce ---------- */
.mrt-retour{
  flex:0 0 auto;
  display:flex;align-items:center;gap:.7rem;
  width:100%;min-height:62px;
  padding:0 1.15rem calc(env(safe-area-inset-bottom,0px)) 1.15rem;
  background:#FFFFFF;
  border:0;border-top:1px solid rgba(30,54,102,.16);
  font-family:inherit;font-size:1rem;
  color:#1E3666;
  cursor:pointer;
  text-align:left;
}
.mrt-retour[hidden]{display:none}
.mrt-retour:active{background:#F3EEE5}
.mrt-retour:focus-visible{outline:2px solid #8A6204;outline-offset:-3px}
.mrt-retour-fleche{
  flex:0 0 auto;width:9px;height:9px;
  border-left:1.7px solid #8A6204;
  border-bottom:1.7px solid #8A6204;
  transform:rotate(45deg);
}
.mrt-retour-txt{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mrt-retour-eti{color:#5C6270}
.mrt-retour-nom{color:#1E3666;font-weight:600}

/* ---------- le panneau du module ne sert plus a rien ---------- */
@media (max-width:991px){
  #mobile_top_menu_wrapper{display:none !important}
}
@media (min-width:992px){
  .mrt{display:none}
}

@media (prefers-reduced-motion:reduce){
  .mrt-boite,.mrt-voile,.mrt-panneau{transition:none}
  .mrt-entre-droite,.mrt-entre-gauche{transform:none;opacity:1}
}

/* mise au point : capture d ecran hors animation */
html.mrt-sans-anim .mrt-boite,
html.mrt-sans-anim .mrt-voile,
html.mrt-sans-anim .mrt-panneau{transition:none !important;animation:none !important}

/* Le theme colle des pastilles d icone sur les <li> et les liens de menu.
   Dans le tiroir, chaque rangee porte deja son chevron : on coupe le reste. */
.mrt-item::before,.mrt-item::after,
.mrt-lien::before,.mrt-lien::after,
.mrt-nom::before,.mrt-nom::after{content:none !important;display:none !important}
/* ==========================================================================
   Page d'accueil : rails de produits, guides, boutiques

   Un rail se fait défiler au doigt sur téléphone et se déplie en grille sur
   grand écran. Chaque rail porte son propre appel à l'action, en haut pour
   qui balaye la page, en bas pour qui l'a lue.
   ========================================================================== */

.page-home .mr-large{
  width:min(1240px,100% - 2.5rem);
  margin-inline:auto;
}

/* ---------- boutons ---------- */
.page-home .mr-btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;padding:.72rem 1.5rem;
  border-radius:2px;
  font-size:.94rem;letter-spacing:.02em;line-height:1.2;
  text-decoration:none;text-align:center;
  transition:background-color .3s cubic-bezier(.16,1,.3,1),
             color .3s ease,border-color .3s ease;
}
.page-home .mr-btn-plein{
  background:var(--or,#E4A206);color:#1B1405;
  border:1px solid var(--or,#E4A206);font-weight:600;
}
.page-home .mr-btn-plein:hover,.page-home .mr-btn-plein:focus-visible{
  background:#C88C05;border-color:#C88C05;color:#1B1405;
}
.page-home .mr-btn-ligne{
  background:none;color:var(--nuit,#1E3666);
  border:1px solid rgba(30,54,102,.3);
}
.page-home .mr-btn-ligne:hover,.page-home .mr-btn-ligne:focus-visible{
  border-color:var(--or,#E4A206);background:rgba(228,162,6,.08);
}
.page-home .mr-btn-clair{
  background:none;color:#FDFBF7;border:1px solid rgba(253,251,247,.45);
}
.page-home .mr-btn-clair:hover,.page-home .mr-btn-clair:focus-visible{
  background:var(--or,#E4A206);border-color:var(--or,#E4A206);color:#1B1405;
}

/* ---------- en-tête de rail ---------- */
.page-home .mr-rail{padding-block:clamp(3rem,6vw,4.6rem)}
.page-home .mr-rail-tete{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:1.5rem 2rem;flex-wrap:wrap;
  margin-bottom:2rem;
}
.page-home .mr-rail-tete h2{
  margin:0 0 .5rem;
  font-family:var(--titre,Georgia,serif);
  font-size:clamp(1.6rem,3.1vw,2.3rem);line-height:1.14;
  color:var(--nuit,#1E3666);
  text-wrap:balance;
}
.page-home .mr-rail-tete p{
  margin:0;max-width:56ch;
  font-size:1rem;line-height:1.62;
  color:var(--encre-texte,#2E333B);
  text-wrap:pretty;
}
.page-home .mr-rail-tete .mr-btn{flex:0 0 auto}
@media(max-width:719px){
  .page-home .mr-rail-tete .mr-btn-ligne{display:none}   /* le bouton du bas suffit */
}

/* ---------- la piste ---------- */
.page-home .mr-piste{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:minmax(158px,1fr);
  gap:1.4rem 1.1rem;
  overflow-x:auto;
  scroll-snap-type:x proximity;
  padding-bottom:.6rem;
  scrollbar-width:thin;
  overscroll-behavior-x:contain;
}
.page-home .mr-piste > *{scroll-snap-align:start}
@media(min-width:720px){
  .page-home .mr-piste{
    grid-auto-flow:row;
    grid-template-columns:repeat(auto-fill,minmax(170px,1fr));
    overflow:visible;
  }
}

/* ---------- une pièce ---------- */
.page-home .mr-p{
  display:flex;flex-direction:column;gap:.45rem;
  text-decoration:none;color:inherit;
}
.page-home .mr-p-i{
  display:block;overflow:hidden;border-radius:2px;
  background:#f2ece0;aspect-ratio:1;
}
.page-home .mr-p-i img{
  display:block;width:100%;height:100%;object-fit:cover;
  transition:transform .6s cubic-bezier(.16,1,.3,1);
}
.page-home .mr-p:hover .mr-p-i img,
.page-home .mr-p:focus-visible .mr-p-i img{transform:scale(1.05)}
.page-home .mr-p-n{
  font-size:.87rem;line-height:1.38;color:var(--encre-texte,#2E333B);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.page-home .mr-p:hover .mr-p-n{color:var(--nuit,#1E3666)}
.page-home .mr-p-x{
  font-size:.95rem;font-weight:600;color:var(--nuit,#1E3666);
  font-variant-numeric:tabular-nums;
}
.page-home .mr-rail-pied{margin-top:2.1rem;text-align:center}
@media(min-width:720px){
  .page-home .mr-rail-pied{display:none}                 /* déjà en haut */
}

/* ---------- guides ---------- */
.page-home .mr-grille-g{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  gap:.8rem;
}
.page-home .mr-g{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  min-height:62px;padding:.9rem 1.15rem;
  background:#fff;border:1px solid rgba(30,54,102,.14);border-radius:2px;
  text-decoration:none;
  transition:border-color .28s ease,transform .28s cubic-bezier(.16,1,.3,1);
}
.page-home .mr-g:hover,.page-home .mr-g:focus-visible{
  border-color:var(--or,#E4A206);transform:translateY(-2px);
}
.page-home .mr-g-n{
  font-size:.97rem;line-height:1.35;color:var(--encre-texte,#2E333B);
}
.page-home .mr-g:hover .mr-g-n{color:var(--nuit,#1E3666)}
.page-home .mr-g-f{
  flex:0 0 auto;width:8px;height:8px;
  border-right:1.6px solid var(--or-texte,#8A6204);
  border-bottom:1.6px solid var(--or-texte,#8A6204);
  transform:rotate(-45deg);
}

/* ---------- boutiques ---------- */
.page-home .mr-boutiques h2{
  margin:0 0 .6rem;
  font-family:var(--titre,Georgia,serif);
  font-size:clamp(1.7rem,3.2vw,2.4rem);color:#FDFBF7;
  text-wrap:balance;
}
.page-home .mr-b-c{
  margin:0 0 2.4rem;max-width:58ch;
  color:rgba(253,251,247,.86);line-height:1.65;
}
.page-home .mr-bs{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:1.3rem;
}
.page-home .mr-b{
  padding:1.7rem 1.6rem;
  background:rgba(253,251,247,.06);
  border:1px solid rgba(237,180,49,.28);
  border-radius:2px;
}
.page-home .mr-b h3{
  margin:0 0 .7rem;
  font-family:var(--titre,Georgia,serif);
  font-size:1.35rem;color:var(--or-clair,#EDB431);
}
.page-home .mr-b-a{
  margin:0 0 .8rem;white-space:pre-line;
  color:rgba(253,251,247,.9);line-height:1.55;font-size:.97rem;
}
.page-home .mr-b-t{
  display:inline-block;margin-bottom:1.2rem;
  color:#FDFBF7;text-decoration:none;
  font-variant-numeric:tabular-nums;letter-spacing:.06em;
  border-bottom:1px solid rgba(237,180,49,.5);
}
.page-home .mr-b-t:hover{color:var(--or-clair,#EDB431)}
.page-home .mr-b .mr-btn{width:100%}

/* ---------- révélation échelonnée ---------- */
.page-home .mr-p.mr-anim,
.page-home .mr-g.mr-anim,
.page-home .mr-b.mr-anim{
  opacity:0;transform:translateY(14px);
  transition:opacity .5s cubic-bezier(.16,1,.3,1),transform .5s cubic-bezier(.16,1,.3,1);
  transition-delay:calc(var(--i,0) * 45ms);
}
.page-home .mr-p.mr-vu,
.page-home .mr-g.mr-vu,
.page-home .mr-b.mr-vu{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  .page-home .mr-p,.page-home .mr-g,.page-home .mr-b,
  .page-home .mr-p-i img,.page-home .mr-btn{transition:none !important}
  .page-home .mr-p.mr-anim,.page-home .mr-g.mr-anim,.page-home .mr-b.mr-anim{
    opacity:1;transform:none;
  }
}

/* La seconde vue du produit apparait au survol : c'est l'animation la plus
   utile d'une boutique, elle sert la vente et pas la decoration. */
.page-home .mr-p-i{position:relative}
.page-home .mr-p-i2{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .45s cubic-bezier(.16,1,.3,1);
}
.page-home .mr-p:hover .mr-p-i2,
.page-home .mr-p:focus-visible .mr-p-i2{opacity:1}
@media(hover:none){.page-home .mr-p-i2{display:none}}
@media(prefers-reduced-motion:reduce){.page-home .mr-p-i2{transition:none}}
/* ==========================================================================
   Haut de page

   La première chose qu'on voit doit tenir en une seconde : la marque, une
   phrase, deux portes d'entrée. L'emblème arrive en premier, le titre se
   découvre ligne par ligne, le filet se trace, les boutons ferment la
   marche. Tout est joué en 1,4 s : au-delà, on fait attendre le visiteur.
   ========================================================================== */

.page-home .mr-hero{
  position:relative;
  min-height:clamp(560px,86vh,780px);
  display:flex;align-items:center;
  overflow:hidden;
  background:#12203C;
}
.page-home .mr-hero > img{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;object-position:center 42%;
  opacity:.62;
  transform:scale(1.06);
  animation:mr-fond 1.6s cubic-bezier(.16,1,.3,1) both;
}
@keyframes mr-fond{from{opacity:0;transform:scale(1.12)}to{opacity:.62;transform:scale(1.06)}}

/* voile : le texte doit rester lisible quelle que soit la photo */
.page-home .mr-hero::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(105deg,
    rgba(12,22,44,.93) 0%, rgba(12,22,44,.80) 42%,
    rgba(12,22,44,.42) 72%, rgba(12,22,44,.30) 100%);
}

.page-home .mr-hero-in{
  position:relative;z-index:2;
  width:min(1240px,100% - 2.5rem);
  margin-inline:auto;
  max-width:none;
  padding-block:clamp(3rem,7vw,5rem);
}

/* ---------- l'emblème, tracé puis rempli ----------
   Les traits du logo ont été vectorisés en contours : on ne peut donc pas
   les animer directement. On promène un trait épais LE LONG de ce contour,
   découpé par la forme elle-même : le dessin se remplit progressivement,
   comme sous une plume. Le tracé s'efface ensuite au profit de la forme
   pleine, qui rend les angles proprement.
   pathLength="100" évite d'avoir à mesurer chaque chemin. */
.page-home .mr-embleme{
  position:absolute;
  right:-2%;top:50%;
  width:min(46vw,430px);height:auto;
  transform:translateY(-50%);
  color:var(--or,#E4A206);
  opacity:.20;
  pointer-events:none;
  overflow:visible;
  animation:mr-derive 26s ease-in-out 2.6s infinite;
}
.page-home .mr-embleme .mr-t{
  stroke-dasharray:100;
  stroke-dashoffset:100;
  animation:mr-plume 1.15s cubic-bezier(.42,0,.32,1) both;
}
.page-home .mr-embleme .mr-t1{animation-delay:.30s}
.page-home .mr-embleme .mr-t2{animation-delay:.52s}
.page-home .mr-embleme .mr-t3{animation-delay:.80s;animation-duration:1.35s}
@keyframes mr-plume{to{stroke-dashoffset:0}}

.page-home .mr-embleme .mr-plein{
  opacity:0;
  animation:mr-apparait .45s ease 2.15s forwards;
}
@keyframes mr-apparait{to{opacity:1}}
.page-home .mr-embleme .mr-trace{
  animation:mr-efface .45s ease 2.15s forwards;
}
@keyframes mr-efface{to{opacity:0}}

@keyframes mr-derive{
  0%,100%{transform:translateY(-50%) scale(1) rotate(0)}
  50%    {transform:translateY(-52%) scale(1.03) rotate(2.5deg)}
}
@media(max-width:719px){
  .page-home .mr-embleme{right:-14%;top:16%;width:64vw;opacity:.14}
}

/* ---------- surtitre ---------- */
.page-home .mr-hero .mr-eyebrow{
  display:block;margin-bottom:1.25rem;
  font-size:.72rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--or-clair,#EDB431);
  animation:mr-monte .7s cubic-bezier(.16,1,.3,1) .15s both;
}

/* ---------- titre, ligne par ligne ---------- */
.page-home .mr-hero h1{
  margin:0 0 1.4rem;
  font-family:var(--titre,Georgia,serif);
  font-size:clamp(2.5rem,6.2vw,4.6rem);
  line-height:1.04;letter-spacing:-.015em;
  color:#FDFBF7;
  max-width:15ch;
}
.page-home .mr-hero h1 .mr-l{
  display:block;overflow:hidden;
  /* le masque rognait jambages et accents : on lui rend la place */
  padding-block:.06em .14em;margin-block:-.06em -.14em;
}
.page-home .mr-hero h1 .mr-l > span,
.page-home .mr-hero h1 .mr-l > em > span{
  display:block;
  animation:mr-ligne .95s cubic-bezier(.16,1,.3,1) both;
}
.page-home .mr-hero h1 .mr-l:nth-child(1) > span{animation-delay:.28s}
.page-home .mr-hero h1 .mr-l:nth-child(2) em > span{animation-delay:.42s}
.page-home .mr-hero h1 em{font-style:italic;color:var(--or-clair,#EDB431);display:block}
@keyframes mr-ligne{from{transform:translateY(105%)}to{transform:none}}

/* ---------- le filet se trace ---------- */
.page-home .mr-hero .mr-filet{
  display:block;width:74px;height:2px;
  background:var(--or,#E4A206);
  margin-bottom:1.5rem;
  transform-origin:left center;
  animation:mr-trait .8s cubic-bezier(.16,1,.3,1) .72s both;
}
@keyframes mr-trait{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ---------- texte et boutons ---------- */
.page-home .mr-hero p{
  margin:0 0 2.1rem;max-width:46ch;
  font-size:clamp(1.02rem,1.55vw,1.16rem);line-height:1.66;
  color:rgba(253,251,247,.9);
  text-wrap:pretty;
  animation:mr-monte .8s cubic-bezier(.16,1,.3,1) .82s both;
}
.page-home .mr-hero-btn{
  display:flex;flex-wrap:wrap;gap:.85rem;
  animation:mr-monte .8s cubic-bezier(.16,1,.3,1) .96s both;
}
@keyframes mr-monte{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* ---------- invitation à descendre ---------- */
.page-home .mr-descendre{
  display:inline-flex;align-items:center;gap:.7rem;
  margin-top:2.6rem;
  font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(253,251,247,.72);text-decoration:none;
  animation:mr-monte .8s cubic-bezier(.16,1,.3,1) 1.15s both;
}
.page-home .mr-descendre::after{
  content:"";width:8px;height:8px;
  border-right:1.5px solid var(--or-clair,#EDB431);
  border-bottom:1.5px solid var(--or-clair,#EDB431);
  transform:rotate(45deg);
  animation:mr-pouls 2.4s ease-in-out 2s infinite;
}
.page-home .mr-descendre:hover,
.page-home .mr-descendre:focus-visible{color:#FDFBF7}
@keyframes mr-pouls{
  0%,100%{transform:rotate(45deg) translate(0,0);opacity:.75}
  50%    {transform:rotate(45deg) translate(3px,3px);opacity:1}
}
@media(max-width:719px){
  .page-home .mr-descendre{display:none}   /* on descend déjà au doigt */
}

/* ---------- rien de tout cela sans le consentement du visiteur ---------- */
@media(prefers-reduced-motion:reduce){
  .page-home .mr-hero > img,
  .page-home .mr-embleme,
  .page-home .mr-hero .mr-eyebrow,
  .page-home .mr-hero h1 .mr-l > span,
  .page-home .mr-hero h1 .mr-l > em > span,
  .page-home .mr-hero .mr-filet,
  .page-home .mr-hero p,
  .page-home .mr-hero-btn,
  .page-home .mr-descendre,
  .page-home .mr-descendre::after{animation:none !important}
  .page-home .mr-hero > img{opacity:.62;transform:scale(1.04)}
  .page-home .mr-embleme{opacity:.20;transform:translateY(-50%)}
  .page-home .mr-embleme .mr-plein{opacity:1}
  .page-home .mr-embleme .mr-trace{opacity:0}
}

/* Contrôle : ?fige=1 arrête les animations du haut de page, sinon une
   capture d'écran tombe toujours au milieu du mouvement. */
html.mr-fige .page-home .mr-hero *,
html.mr-fige .page-home .mr-hero > img,
html.mr-fige .page-home .mr-embleme{animation:none !important}
html.mr-fige .page-home .mr-hero > img{opacity:.62;transform:scale(1.04)}
html.mr-fige .page-home .mr-embleme{opacity:.20;transform:translateY(-50%)}
html.mr-fige .page-home .mr-embleme .mr-plein{opacity:1}
html.mr-fige .page-home .mr-embleme .mr-trace{opacity:0}

/* Le thème centre les <span> de bandeau : le filet partait au milieu. */
.page-home .mr-hero .mr-filet{
  display:block !important;
  width:74px !important;
  margin:0 auto 1.5rem 0 !important;
  align-self:flex-start;
  float:none;
}

/* ==========================================================================
   Haut de page, second passage : plus de présence
   La photo continue de s'approcher après l'entrée, l'emblème s'affirme, le
   titre gagne en corps, et un grain très fin casse le lissé numérique.
   ========================================================================== */

.page-home .mr-hero{
  min-height:clamp(600px,92vh,880px);
}

/* la photo ne s'arrête pas : elle continue d'avancer, très lentement */
.page-home .mr-hero > img{
  animation:mr-fond 1.6s cubic-bezier(.16,1,.3,1) both,
            mr-approche 34s ease-in-out 1.6s infinite alternate;
}
@keyframes mr-approche{from{transform:scale(1.06)}to{transform:scale(1.15)}}

/* grain : un bruit fixe, posé au-dessus du voile */
.page-home .mr-hero-in::before{
  content:"";position:absolute;inset:-20%;
  z-index:-1;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}

/* l'emblème s'assume */
.page-home .mr-embleme{
  width:min(56vw,560px);
  right:-6%;
  opacity:.30;
}
@media(max-width:719px){
  .page-home .mr-embleme{right:-20%;top:14%;width:82vw;opacity:.17}
}

/* le titre prend la place qui lui revient */
.page-home .mr-hero h1{
  font-size:clamp(2.7rem,7vw,5.4rem);
  line-height:.99;letter-spacing:-.025em;
  max-width:16ch;
  margin-bottom:1.6rem;
}
.page-home .mr-hero p{max-width:48ch}

/* la signature de marque, à la verticale sur le bord */
.page-home .mr-verticale{
  position:absolute;left:-2.6rem;top:50%;
  transform:translateY(-50%) rotate(180deg);
  writing-mode:vertical-rl;
  font-size:.66rem;letter-spacing:.42em;text-transform:uppercase;
  color:rgba(237,180,49,.55);
  white-space:nowrap;pointer-events:none;
  animation:mr-monte 1s cubic-bezier(.16,1,.3,1) 1.3s both;
}
@media(max-width:1180px){.page-home .mr-verticale{display:none}}

@media(prefers-reduced-motion:reduce){
  .page-home .mr-hero > img{animation:none !important;transform:scale(1.06)}
  .page-home .mr-verticale{animation:none !important}
}
html.mr-fige .page-home .mr-hero > img{animation:none !important;transform:scale(1.1)}
html.mr-fige .page-home .mr-verticale{animation:none !important;opacity:1}
/* ==========================================================================
   Page « À propos » : un récit en chapitres, pas une plaquette.
   Colonne étroite pour le texte, photos en pleine largeur, et à chaque
   chapitre les pièces en vente qui s'y rattachent.
   ========================================================================== */
.hi{--mes:64ch;color:var(--encre-texte,#2E333B);max-width:none}
.hi-tete{margin:0 0 4rem}
.hi-sur{margin:0 0 .9rem;font-size:.72rem;letter-spacing:.26em;text-transform:uppercase;color:var(--or-texte,#8A6204)}
.hi-tete h2{margin:0 0 1.3rem;font-family:var(--titre,Georgia,serif);font-size:clamp(2.1rem,5vw,3.6rem);line-height:1.04;letter-spacing:-.02em;color:var(--nuit,#1E3666);max-width:18ch;text-wrap:balance}
.hi-chapo{max-width:var(--mes);margin:0 0 2.6rem;font-size:clamp(1.06rem,1.6vw,1.24rem);line-height:1.62;text-wrap:pretty}

.hi-ch{margin:0 0 4.6rem;padding-top:3rem;border-top:1px solid rgba(30,54,102,.14)}
.hi-num{margin:0 0 .5rem;font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;color:var(--or-texte,#8A6204)}
.hi-ch h3{margin:0 0 .4rem;font-family:var(--titre,Georgia,serif);font-size:clamp(1.6rem,3.2vw,2.4rem);line-height:1.12;color:var(--nuit,#1E3666);text-wrap:balance}
.hi-date{margin:0 0 1.7rem;font-size:.92rem;color:#5C6270;font-variant-numeric:tabular-nums}
.hi p{max-width:var(--mes);margin:0 0 1.15rem;line-height:1.72;text-wrap:pretty}
.hi em{font-style:italic;color:var(--nuit,#1E3666)}
.hi strong{color:var(--nuit,#1E3666);font-weight:600}

/* photos */
.hi-p{margin:2.2rem 0 2.4rem}
.hi-p picture{display:block;border-radius:3px;overflow:hidden;background:#efe9dd}
.hi-p img{display:block;width:100%;height:auto}
.hi-p-large img{max-height:min(74vh,620px);object-fit:cover;object-position:center 38%}
.hi-p figcaption{margin-top:.7rem;font-size:.86rem;line-height:1.5;color:#5C6270;max-width:56ch}
@media(min-width:900px){.hi-p-duo{max-width:62%}}

/* citation */
.hi-cit{margin:2.4rem 0;padding:0 0 0 1.5rem;border-left:2px solid var(--or,#E4A206);max-width:var(--mes)}
.hi-cit p{margin:0 0 .6rem;font-family:var(--titre,Georgia,serif);font-style:italic;font-size:clamp(1.2rem,2.2vw,1.55rem);line-height:1.36;color:var(--nuit,#1E3666)}
.hi-cit cite{font-style:normal;font-size:.86rem;color:#5C6270}

/* pièces en vente */
.hi-vente{margin:2.8rem 0 0;padding:1.7rem 1.6rem 1.5rem;background:rgba(255,255,255,.6);border:1px solid rgba(30,54,102,.13);border-radius:3px}
.hi-vente-t{margin:0 0 1.2rem;max-width:none;font-size:.95rem;line-height:1.45;color:var(--nuit,#1E3666)}
.hi-as{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:1.2rem 1rem;margin-bottom:1.4rem}
.hi-a{display:flex;flex-direction:column;gap:.4rem;text-decoration:none;color:inherit}
.hi-a-i{display:block;overflow:hidden;border-radius:2px;background:#f2ece0;aspect-ratio:1}
.hi-a-i img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .55s cubic-bezier(.16,1,.3,1)}
.hi-a:hover .hi-a-i img{transform:scale(1.05)}
.hi-a-n{font-size:.84rem;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hi-a-p{font-size:.92rem;font-weight:600;color:var(--nuit,#1E3666);font-variant-numeric:tabular-nums}

/* boutons */
.hi-btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:.7rem 1.4rem;border:1px solid rgba(30,54,102,.3);border-radius:2px;font-size:.93rem;text-decoration:none;color:var(--nuit,#1E3666);transition:border-color .28s ease,background .28s ease}
.hi-btn:hover{border-color:var(--or,#E4A206);background:rgba(228,162,6,.08);color:var(--nuit,#1E3666)}
.hi-btn-plein{background:var(--or,#E4A206);border-color:var(--or,#E4A206);color:#1B1405;font-weight:600}
.hi-btn-plein:hover{background:#C88C05;border-color:#C88C05;color:#1B1405}
.hi-cta{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2.2rem}

/* sources */
.hi-src{margin-top:4rem;padding-top:2rem;border-top:1px solid rgba(30,54,102,.14);max-width:var(--mes)}
.hi-src h3{margin:0 0 1rem;font-family:var(--titre,Georgia,serif);font-size:1.25rem;color:var(--nuit,#1E3666)}
.hi-src ul{margin:0 0 1.2rem;padding-left:1.1rem}
.hi-src li{margin-bottom:.55rem;font-size:.88rem;line-height:1.55;color:#5C6270}
.hi-note{font-size:.84rem;line-height:1.55;color:#5C6270}

@media(prefers-reduced-motion:reduce){.hi-a-i img{transition:none}}

/* Une photo d'archive ne se recadre pas comme une photo de studio : on la
   montre entière, sur un fond qui rappelle le tirage papier. */
.hi-p-archive picture{background:#efe7da;padding:clamp(.6rem,2vw,1.4rem)}
.hi-p-archive img{max-height:none;object-fit:contain}

/* Le module de menu ignore les pages CMS : le lien vit dans le bandeau du
   haut, en ligne avec le téléphone. Il ne doit jamais pousser le menu
   principal sur une seconde ligne. */
.mr-lien-histoire{
  display:inline-block;margin-left:1.6rem;
  font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--or-texte,#8A6204);text-decoration:none;
  border-bottom:1px solid transparent;white-space:nowrap;vertical-align:middle;
}
.mr-lien-histoire:hover,.mr-lien-histoire:focus-visible{
  color:var(--nuit,#1E3666);border-bottom-color:var(--or,#E4A206);
}
@media(max-width:991px){.mr-lien-histoire{display:none}}

/* ---------- « la femme derrière la maison », sur l'accueil ---------- */
.page-home .mr-histoire p{max-width:64ch;line-height:1.74;margin-bottom:1.1rem}
.page-home .mr-h-lead{font-size:clamp(1.06rem,1.5vw,1.2rem)}
.page-home .mr-h-fin{
  font-family:var(--titre,Georgia,serif);font-style:italic;
  font-size:clamp(1.14rem,1.8vw,1.4rem);color:var(--nuit,#1E3666);
  margin-top:1.6rem;
}
.page-home .mr-h-photo{margin:2.4rem 0 0}
.page-home .mr-h-photo img{width:100%;height:auto;border-radius:3px;display:block}
.page-home .mr-h-photo figcaption{
  margin-top:.6rem;font-size:.85rem;color:#5C6270;max-width:52ch;
}
/* ==========================================================================
   Profondeur : la page a trois plans au lieu d'un
   L'emblème recule quand on descend ; les rangées de pièces se redressent
   en arrivant. Tout passe par transform et opacity, les deux seules
   propriétés que le compositeur traite sans recalculer la mise en page.
   ========================================================================== */
html.mr-prof .page-home .mr-embleme{
  --mr-p:0;
  transform:translateY(-50%) translate3d(0, calc(var(--mr-p) * 12%), calc(var(--mr-p) * -180px))
            rotate(calc(var(--mr-p) * 14deg));
  opacity:calc(.30 - var(--mr-p) * .16);
  animation:none;
}

/* les rangées arrivent en perspective */
.page-home .mr-piste,
.page-home .mr-grille-g,
.page-home .mr-bs{perspective:1100px;perspective-origin:50% 20%}

.page-home .mr-prof-c{
  opacity:0;
  transform:translate3d(0,26px,-90px) rotateX(9deg);
  transform-origin:50% 100%;
  transition:opacity .62s cubic-bezier(.16,1,.3,1),
             transform .72s cubic-bezier(.16,1,.3,1);
  transition-delay:calc(var(--i,0) * 55ms);
}
.page-home .mr-prof-c.mr-prof-vu{
  opacity:1;
  transform:none;
}

@media(prefers-reduced-motion:reduce){
  html.mr-prof .page-home .mr-embleme{transform:translateY(-50%);opacity:.30}
  .page-home .mr-prof-c{opacity:1;transform:none;transition:none}
}
html.mr-fige .page-home .mr-prof-c{opacity:1;transform:none}
/* ==========================================================================
   Matieres de fond
   Les bandes de l'accueil etaient des aplats. On y pose l'ardoise et le lin
   generes pour la maison, en filigrane : assez pour donner de la matiere,
   assez peu pour ne jamais gener la lecture. Le fond est fixe, donc il
   defile plus lentement que le contenu — la profondeur vient de la.
   ========================================================================== */
.page-home .mr-rail,
.page-home .mr-guides,
.page-home .mr-bande-creme{position:relative;isolation:isolate}
.page-home .mr-rail::before,
.page-home .mr-guides::before,
.page-home .mr-bande-creme::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:url("../img/fond-lin.webp");
  background-size:cover;background-position:center;
  opacity:.16;mix-blend-mode:multiply;
}
/* une bande sur deux passe a l'ardoise, pour que la page respire */
.page-home #bracelets::before,
.page-home #mineraux::before,
.page-home .mr-guides::before{
  background-image:url("../img/fond-ardoise.webp");
  opacity:.10;
}
/* un filet dore separe les bandes, comme sur les vitrines */
.page-home .mr-rail + .mr-rail::after,
.page-home .mr-guides::after{
  content:"";position:absolute;left:50%;top:0;transform:translateX(-50%);
  width:min(1240px,100% - 2.5rem);height:1px;
  background:linear-gradient(90deg,transparent,rgba(228,162,6,.42),transparent);
}
@media(prefers-reduced-motion:reduce){
  .page-home .mr-rail::before,.page-home .mr-guides::before{background-attachment:scroll}
}

/* ==========================================================================
   35. Tiroir mobile : la règle précédente ne prenait pas
   « inset » puis « top » se contredisaient, et la spécificité était trop
   faible face aux règles de grille de Classic. On vise l'identifiant.
   ========================================================================== */
@media (max-width:991px){
  body.mr-menu-ouvert{overflow:hidden; position:relative}
  div#mobile_top_menu_wrapper.mr-ouvert{
    position:fixed!important; top:0!important; left:0!important;
    right:0!important; bottom:0!important; width:100%!important;
    max-width:none!important; height:100dvh!important; max-height:none!important;
    margin:0!important; padding:0!important; z-index:1200!important;
    background:var(--creme)!important; overflow-y:auto!important;
    border:0!important; display:block!important;
  }
  div#mobile_top_menu_wrapper.mr-ouvert>.js-top-menu{padding-bottom:60px}
  div#mobile_top_menu_wrapper.mr-ouvert::before{
    content:"Le catalogue"; display:flex; align-items:center;
    position:sticky; top:0; z-index:3; min-height:56px;
    background:var(--nuit); color:var(--or-clair);
    font-family:var(--sans); font-size:11px; letter-spacing:.2em;
    text-transform:uppercase; padding:0 20px;
  }
}

/* ==========================================================================
   36. Accueil : le mouvement
   Chaque bande se révèle à son entrée dans l'écran. Le contenu est visible
   par défaut : l'animation ne fait qu'adoucir l'arrivée, elle ne conditionne
   pas l'affichage. Une page rendue sans JavaScript reste complète.
   ========================================================================== */
@media (prefers-reduced-motion:no-preference){
  .page-home .mr-tete,
  .page-home .mr-chiffres>div,
  .page-home .mr-rayons>a,
  .page-home .mr-pgrid>a,
  .page-home .mr-marques li,
  .page-home .mr-bgrid article,
  .page-home .mr-hgrid>*,
  .page-home .mr-duo-txt{
    opacity:1; transform:none;
    transition:opacity .62s cubic-bezier(.16,.84,.32,1),
               transform .62s cubic-bezier(.16,.84,.32,1);
  }
  .page-home .mr-anim{opacity:0; transform:translateY(18px)}
  .page-home .mr-anim.mr-vu{opacity:1; transform:none}
  /* décalage en cascade dans une même rangée */
  .page-home .mr-anim:nth-child(2){transition-delay:.07s}
  .page-home .mr-anim:nth-child(3){transition-delay:.14s}
  .page-home .mr-anim:nth-child(4){transition-delay:.21s}
  .page-home .mr-anim:nth-child(5){transition-delay:.28s}
  /* le héros arrive tout de suite, sans attendre le défilement */
  .mr-hero-in>*{animation:mr-monte .7s cubic-bezier(.16,.84,.32,1) backwards}
  .mr-hero-in>*:nth-child(2){animation-delay:.09s}
  .mr-hero-in>*:nth-child(3){animation-delay:.18s}
  .mr-hero-in>*:nth-child(4){animation-delay:.27s}
  @keyframes mr-monte{from{opacity:0; transform:translateY(14px)}to{opacity:1; transform:none}}
  /* la photo du héros respire lentement */
  .mr-hero>img{animation:mr-souffle 26s ease-in-out infinite alternate}
  @keyframes mr-souffle{from{transform:scale(1)}to{transform:scale(1.05)}}
}

/* Bande de logos Meirea, en filigrane. */
.mr-signature{
  display:flex; align-items:center; justify-content:center; gap:22px;
  padding:34px 0 0; opacity:.5;
}
.mr-signature img{height:26px; width:auto}
.mr-signature span{
  font-size:10.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--gris-clair);
}