/* Lucille & Céleste — design system partagé */
:root{
  --ivory:#f7f1e9; --cream:#fdfaf5; --paper:#fffdfa;
  --blush:#e7d3c9; --blush-d:#caa79a; --taupe:#c8b8a4; --greige:#8f8676;
  --gold:#b3945c; --gold-d:#9a7d47; --ink:#3b332d; --soft:#8b8177; --line:#e6ddd0;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Jost',system-ui,sans-serif;color:var(--ink);background:var(--cream);line-height:1.7;font-weight:300;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.serif{font-family:'Cormorant Garamond',Georgia,serif}
.wrap{max-width:1280px;margin:0 auto;padding:0 28px}
.ph .note{position:absolute;top:12px;left:12px;background:rgba(255,255,255,.7);color:var(--greige);font-size:9px;letter-spacing:.1em;text-transform:uppercase;padding:4px 9px;border-radius:100px;z-index:2}
/* announcement */
.announce{background:var(--ink);color:#f2e9dd;text-align:center;font-size:12px;letter-spacing:.22em;text-transform:uppercase;padding:10px 16px}
/* nav */
header.nav{position:sticky;top:0;z-index:60;background:rgba(253,250,245,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.navrow{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:80px}
.navlinks{display:flex;gap:26px;font-size:12.5px;letter-spacing:.12em;text-transform:uppercase}
.navlinks a{color:var(--ink);opacity:.82;transition:.2s}
.navlinks a:hover,.navlinks a.on{opacity:1;color:var(--gold-d)}
.logo{font-family:'Cormorant Garamond',serif;font-size:29px;font-weight:500;letter-spacing:.04em;text-align:center;color:var(--ink);white-space:nowrap}
.logo .amp{color:var(--gold);font-style:italic;font-weight:400}
/* Le nom de la maison sert de retour a l'accueil. Le texte seul fait 26 px de
   haut, on ajoute 7 px au dessus et en dessous pour atteindre les 40 px tenus
   partout sur le site. La barre fait 64 px sur telephone, la place y est. */
a.logo{display:inline-block;padding:7px 0}
.navicons{display:flex;gap:20px;align-items:center;justify-content:flex-end}
.navicons a,.navicons button{background:none;border:none;cursor:pointer;color:var(--ink);padding:4px;position:relative;opacity:.85;display:flex;align-items:center;justify-content:center;min-width:44px;min-height:44px}
.navicons a:hover,.navicons button:hover{opacity:1}
.cartc{position:absolute;top:-5px;right:-8px;background:var(--gold);color:#fff;font-size:9.5px;min-width:15px;height:15px;border-radius:8px;display:flex;align-items:center;justify-content:center;padding:0 4px}
.burger{display:none;background:none;border:none;cursor:pointer;justify-self:start}
/* buttons */
.btn{display:inline-block;font-family:'Jost';font-size:12px;letter-spacing:.2em;text-transform:uppercase;font-weight:400;padding:15px 34px;border:1px solid var(--ink);color:var(--ink);background:transparent;transition:.3s;cursor:pointer;text-align:center}
.btn:hover{background:var(--ink);color:var(--cream)}
.btn.gold{background:var(--gold);border-color:var(--gold);color:#fff}
.btn.gold:hover{background:var(--gold-d);border-color:var(--gold-d)}
.btn.full{display:block;width:100%}
.btn.sm{padding:10px 18px;letter-spacing:.12em}
.btn[disabled]{opacity:.4;cursor:not-allowed}
/* page head */
.page-head{background:var(--ivory);text-align:center;padding:64px 24px 52px}
.page-head .kick{color:var(--gold-d);letter-spacing:.3em;text-transform:uppercase;font-size:12px;margin-bottom:14px}
.page-head h1{font-family:'Cormorant Garamond',serif;font-weight:400;font-size:clamp(34px,5vw,58px);color:var(--ink)}
.page-head p{color:var(--soft);margin-top:12px;font-weight:300}
.crumb{font-size:12px;letter-spacing:.08em;color:var(--soft);padding:11px 0}
/* Le fil d'ariane sert a revenir en arriere, la cible doit tenir sous le pouce.
   La ligne de texte fait 18 px, 11 px de part et d'autre amenent a 40 px. */
.crumb a{display:inline-block;padding:11px 0}
.crumb a:hover{color:var(--gold-d)}
/* filters */
.filters{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:38px}
/* Les filtres de la boutique sont la premiere chose qu'on touche en arrivant
   sur la grille. A 9 px de padding ils faisaient 38 px de haut, sous le
   plancher de 40 px tenu sur le site. 10 px les y ramenent. */
.chip{font-family:'Jost';font-size:12px;letter-spacing:.12em;text-transform:uppercase;padding:10px 18px;border:1px solid var(--line);background:var(--paper);color:var(--soft);border-radius:100px;cursor:pointer;transition:.2s}
.chip:hover{border-color:var(--greige);color:var(--ink)}
.chip.on{background:var(--ink);border-color:var(--ink);color:var(--cream)}
/* product grid */
.prods{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
.card{display:block;color:inherit}
.card .thumb{position:relative;aspect-ratio:3/4;overflow:hidden;margin-bottom:16px}
.card .thumb .sw{position:absolute;inset:0;transition:.5s}
.card .thumb picture{position:absolute;inset:0}
.card .thumb .pimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:.5s}
.card:hover .thumb .sw,.card:hover .thumb .pimg{transform:scale(1.045)}
.pdp .gallery picture{position:absolute;inset:0}
.pdp .gallery .gimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.card .lbl{position:absolute;left:12px;top:12px;background:rgba(255,255,255,.72);color:var(--greige);font-size:9px;letter-spacing:.1em;text-transform:uppercase;padding:4px 9px;border-radius:100px}
.card .tag{position:absolute;right:12px;top:12px;background:var(--paper);color:var(--gold-d);font-size:10px;letter-spacing:.1em;text-transform:uppercase;padding:5px 10px}
.card h4{font-family:'Cormorant Garamond',serif;font-size:21px;font-weight:500;letter-spacing:.01em}
.card .cat{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--soft);margin:1px 0 3px}
.card .price{color:var(--gold-d);font-size:14px;margin-top:2px;letter-spacing:.03em}
/* Promotions.
   L'ancien prix est barre et efface, le nouveau prend le poids. On evite le rouge
   vif des sites de destockage, il jure avec la palette et il devalue la marque.
   .sr masque un intitule qui reste lu par les lecteurs d'ecran, sinon un chiffre
   barre tout seul est annonce sans qu'on sache ce qu'il represente. */
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.oldp{color:var(--soft);opacity:.75;margin-right:6px;text-decoration-thickness:1px}
.newp{color:var(--gold-d);font-weight:500}
.pdp .info .price .newp{color:var(--ink)}
/* Le bandeau de remise sur la vignette. Il se pose en bas a gauche : .lbl occupe
   deja le haut gauche sur les pieces sans photo et .tag le haut droit. Les trois
   peuvent donc apparaitre ensemble sans jamais se recouvrir. */
.card .promo{position:absolute;left:12px;bottom:12px;background:var(--ink);color:var(--paper);font-size:10px;letter-spacing:.1em;text-transform:uppercase;padding:5px 10px;border-radius:100px}
.pdp .info .promo{display:inline-block;background:var(--ink);color:var(--paper);font-size:10px;letter-spacing:.1em;text-transform:uppercase;padding:5px 10px;border-radius:100px;margin-bottom:4px}
/* product detail */
.pdp{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px);align-items:start;padding:12px 0 40px}
/* La grande photo porte le format 4/5, plus la galerie entiere.
   Sinon la grande photo, en position absolue, recouvrait les miniatures. */
.pdp .gallery{position:relative}
.pdp .gallery.ph{aspect-ratio:4/5}
.pdp .gallery.ph .main{position:absolute;inset:0}
/* 3/4 comme les vignettes de la boutique, le format le plus proche des photos mode. */
.pdp .gallery:not(.ph) .main{position:relative;aspect-ratio:3/4;overflow:hidden;background:var(--ivory);cursor:zoom-in}
/* contain et pas cover, la photo entiere reste visible, tete et pieds compris. */
.pdp .gallery:not(.ph) .gimg{object-fit:contain}
/* fleches de defilement sur la grande photo */
.pdp .gnav{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:rgba(255,255,255,.9);color:var(--ink);font-size:16px;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:3;padding:0;transition:.2s}
.pdp .gnav:hover{background:#fff;border-color:var(--gold)}
.pdp .gprev{left:12px}
.pdp .gnext{right:12px}
.pdp .gcount{position:absolute;right:12px;bottom:12px;z-index:3;background:rgba(255,255,255,.86);color:var(--soft);font-size:11px;letter-spacing:.1em;padding:4px 10px;border-radius:100px;pointer-events:none}
.pdp .gzoom{position:absolute;left:12px;bottom:12px;z-index:3;background:rgba(255,255,255,.86);color:var(--soft);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;padding:4px 10px;border-radius:100px;pointer-events:none}
.pdp .gthumbs{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.pdp .gthumb{width:62px;height:74px;border-radius:8px;overflow:hidden;border:1px solid var(--line);padding:0;cursor:pointer;background:var(--ivory);flex:0 0 auto}
.pdp .gthumb.on{outline:2px solid var(--gold);outline-offset:-1px}
.pdp .gthumb img{width:100%;height:100%;object-fit:contain;display:block}
/* visionneuse plein ecran */
.lbox{position:fixed;inset:0;z-index:300;background:rgba(24,20,17,.94);display:none;align-items:center;justify-content:center;padding:60px 16px}
.lbox.open{display:flex}
.lbox img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;-webkit-user-select:none;user-select:none}
/* Fond sombre et opaque sur les boutons, sinon ils disparaissent sur une photo foncee. */
.lbox .lclose{position:absolute;top:14px;right:16px;width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.4);background:rgba(24,20,17,.72);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:#fff;font-size:19px;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;z-index:2}
.lbox .lnav{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.4);background:rgba(24,20,17,.72);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:#fff;font-size:19px;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;z-index:2}
.lbox .lnav:hover,.lbox .lclose:hover{background:rgba(24,20,17,.92);border-color:var(--gold)}
/* La bulle du chat ne doit pas passer devant la visionneuse. */
body.lbox-on .mc-fab,body.lbox-on .mc-panel{display:none!important}
.lbox .lprev{left:14px}
.lbox .lnext{right:14px}
.lbox .lcount{position:absolute;bottom:18px;left:0;right:0;text-align:center;color:rgba(255,255,255,.7);font-size:12px;letter-spacing:.12em}
.pdp .info .cat{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-d);margin-bottom:10px}
.pdp .info h1{font-family:'Cormorant Garamond',serif;font-weight:400;font-size:clamp(32px,4vw,46px);line-height:1.08}
.pdp .info .price{font-size:20px;color:var(--ink);margin:14px 0 4px}
.pdp .rating{color:var(--gold);font-size:13px;letter-spacing:2px;margin-bottom:22px}
.pdp .rating span{color:var(--soft);font-size:12px;letter-spacing:.04em;margin-left:8px}
.pdp .desc{color:#4a423b;font-size:15.5px;margin-bottom:24px}
.opt-label{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--soft);margin:0 0 10px}
/* Le nom du coloris choisi, colle au mot Coloris.
   .opt-label est en flex space-between pour la ligne Taille / Guide des tailles,
   donc le nom doit vivre dans le meme enfant que le libelle, sinon il part a droite. */
.opt-label .opt-val{color:var(--ink);letter-spacing:.1em}
.swatches{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:22px}
/* La pastille garde sa taille de 26 px, la zone tactile autour est portee a
   40 px, le plancher tenu sur tout le site. Choisir un coloris au pouce sur un
   ecran de 375 px demande cette marge, sinon on tape le coloris d'a cote.
   La couleur arrive par la variable --c posee sur le bouton. */
.swatches button{width:40px;height:40px;border-radius:50%;border:none;background:none;cursor:pointer;position:relative;padding:0;display:flex;align-items:center;justify-content:center;-webkit-tap-highlight-color:transparent}
.swatches button::before{content:"";width:26px;height:26px;border-radius:50%;border:1px solid var(--line);background:var(--c,var(--line))}
.swatches button.on::before{box-shadow:0 0 0 2px var(--paper),0 0 0 3px var(--gold)}
/* Coloris entierement epuise : la pastille reste visible, barree d'une diagonale. */
.swatches button.vide::before{opacity:.4}
.swatches button.vide::after{content:"";position:absolute;left:4px;right:4px;top:15px;height:1px;background:var(--ink);opacity:.6;transform:rotate(-45deg)}
/* Alerte retour en stock, sous le bouton d'ajout au panier. */
.restock{border:1px solid var(--line);background:var(--cream);padding:16px 16px 14px;margin:14px 0 4px}
.restock-t{font-family:'Cormorant Garamond',serif;font-size:19px;color:var(--ink);margin-bottom:5px}
.restock-p{font-size:12.5px;line-height:1.6;color:var(--soft);margin:0 0 11px}
.restock-f{display:flex;gap:8px;flex-wrap:wrap}
.restock-f select,.restock-f input[type=email]{flex:1 1 148px;min-width:0;padding:11px 12px;border:1px solid var(--line);background:var(--paper);font-family:'Jost';font-size:13.5px;color:var(--ink)}
.restock-f .btn{flex:0 0 auto;padding:11px 18px;font-size:12px}
.restock-m{font-size:12.5px;line-height:1.5;margin-top:9px;color:var(--soft)}
.restock-m.ok{color:#2f6b47}
.restock-m.err{color:#a33}
/* En colonne, flex-basis pilote la hauteur : on le neutralise sinon les champs s'etirent. */
@media(max-width:520px){.restock-f{flex-direction:column}.restock-f select,.restock-f input[type=email]{flex:0 0 auto;width:100%;padding:13px 12px}.restock-f .btn{width:100%;padding:15px 18px}}
.sizes{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:24px}
.sizes button{min-width:46px;padding:11px 12px;border:1px solid var(--line);background:var(--paper);font-family:'Jost';font-size:13px;color:var(--ink);cursor:pointer;transition:.2s}
.sizes button:hover{border-color:var(--greige)}
.sizes button.on{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.qtyrow{display:flex;align-items:center;gap:16px;margin-bottom:22px}
.qty{display:flex;align-items:center;border:1px solid var(--line)}
.qty button{width:40px;height:44px;background:var(--paper);border:none;font-size:17px;cursor:pointer;color:var(--ink)}
.qty span{width:44px;text-align:center;font-size:15px}
.pdp .meta{border-top:1px solid var(--line);margin:26px 0 0;padding-top:20px;font-size:14px;color:var(--soft)}
.pdp .meta b{color:var(--ink);font-weight:500}
.pdp .meta a{color:var(--gold-d);border-bottom:1px solid var(--line)}
/* Le lien vers le guide des tailles se pose à droite du libellé Taille,
   là où l'hésitation arrive. */
.opt-label{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
/* Le renvoi vers le guide des tailles est un lien qu'on touche au pouce,
   il lui faut 40 px de haut. Le soulignement reste cale sur le texte. */
.sz-help{font-size:12px;letter-spacing:.08em;color:var(--gold-d);text-transform:uppercase;padding:0 6px;display:inline-flex;align-items:center;min-height:40px}
.sz-help span,.sz-help{text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--line)}
/* Réassurance sous le bouton d'ajout : les quatre objections d'achat. */
.reass{list-style:none;margin:22px 0 0;padding:0;border-top:1px solid var(--line);padding-top:18px}
.reass li{position:relative;padding-left:22px;font-size:14px;color:#4a423b;margin-bottom:9px;line-height:1.5}
.reass li:before{content:"";position:absolute;left:2px;top:8px;width:6px;height:6px;border-radius:50%;background:var(--gold)}
.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(20px);background:var(--ink);color:var(--cream);padding:14px 24px;font-size:13px;letter-spacing:.06em;opacity:0;transition:.3s;z-index:200;border-radius:2px}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
/* cart */
.cart-grid{display:grid;grid-template-columns:1.7fr 1fr;gap:44px;align-items:start;padding:10px 0 40px}
.cart-line{display:grid;grid-template-columns:88px 1fr auto;grid-template-areas:'img info price';gap:18px;padding:22px 0;border-bottom:1px solid var(--line);align-items:center}
.cart-line .th{position:relative;aspect-ratio:3/4;width:88px;overflow:hidden;background:var(--ivory)}
/* La ligne de panier montre la vraie photo, pas un aplat de couleur.
   Sans ces règles, .pimg et .sw ne sont positionnés que dans .card .thumb. */
.cart-line .th img,.cart-line .th .sw{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.cart-line h4{font-family:'Cormorant Garamond',serif;font-size:20px;font-weight:500}
.cart-line .opt{font-size:12.5px;color:var(--soft);letter-spacing:.04em;margin-top:2px}
.cart-line .rm{background:none;border:none;color:var(--soft);font-size:12px;cursor:pointer;margin-top:8px;text-decoration:underline;text-underline-offset:3px}
.cart-line .lp{text-align:right;font-size:15px}
/* width:max-content sinon le cadre flex s'etire sur toute la largeur de la ligne. */
.cart-line .qty{margin-top:8px;width:max-content}
/* Ligne de panier confrontee au stock reel. */
.cart-line.out h4{opacity:.55}
.cart-line .ligne-out{font-size:12px;color:#a33;margin-top:6px;letter-spacing:.03em}
.cart-line .ligne-low{font-size:12px;color:var(--gold-d);margin-top:6px;letter-spacing:.03em}
.summary .note.alerte{color:#a33}
.summary{background:var(--ivory);padding:30px 30px 34px;position:sticky;top:100px}
.summary h3{font-family:'Cormorant Garamond',serif;font-size:24px;font-weight:500;margin-bottom:20px}
.summary .row{display:flex;justify-content:space-between;font-size:14.5px;padding:9px 0;color:#4a423b}
.summary .row.tot{border-top:1px solid var(--line);margin-top:8px;padding-top:16px;font-size:17px;color:var(--ink)}
.summary .row.tot b{font-weight:500}
.summary .note{font-size:12.5px;color:var(--soft);margin:14px 0 20px;line-height:1.6}
.empty{text-align:center;padding:70px 20px}
.empty p{color:var(--soft);margin-bottom:24px}
/* footer */
footer{background:var(--ink);color:#c9beb0;padding:70px 0 32px;font-size:13.5px;font-weight:300;margin-top:40px}
.fgrid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:36px;margin-bottom:48px}
footer .logo{color:#f4ece0;text-align:left;margin-bottom:14px;font-size:26px}
footer .about{max-width:32ch;color:#a99f90;font-size:14px}
footer h5{color:#e7ddcd;font-size:12px;letter-spacing:.18em;text-transform:uppercase;margin-bottom:18px;font-weight:400}
footer ul{list-style:none;display:flex;flex-direction:column;gap:4px}
/* Le lien fait 16px de haut, on lui donne 6px de marge interne pour atteindre 28px au doigt. */
footer ul a{color:#c9beb0;opacity:.85;display:inline-block;padding:6px 0}footer ul a:hover{opacity:1;color:#f4ece0}
.fbot{border-top:1px solid rgba(255,255,255,.12);padding-top:24px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;color:#8f857a;font-size:12px;letter-spacing:.04em}
/* Les liens legaux du bas de page doivent rester attrapables au pouce. */
.fbot a{color:inherit;border-bottom:1px solid rgba(255,255,255,.25);display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;padding:7px 4px}
/* mobile menu */
.mmenu{position:fixed;inset:0;z-index:100;background:var(--cream);transform:translateX(100%);visibility:hidden;transition:transform .35s,visibility .35s;padding:22px 26px 40px;display:flex;flex-direction:column;overflow-y:auto;-webkit-overflow-scrolling:touch}
.mmenu.open{transform:none;visibility:visible}
.mmenu .top{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;flex:0 0 auto}
.mmenu a{font-family:'Cormorant Garamond',serif;font-size:25px;color:var(--ink);padding:12px 0;border-bottom:1px solid var(--line);flex:0 0 auto}
.mmenu .close{background:none;border:none;font-size:30px;cursor:pointer;color:var(--ink);line-height:1;padding:0;width:44px;height:44px;display:flex;align-items:center;justify-content:center;margin-right:-8px}

/* ===== recherche ===== */
.srch{position:fixed;inset:0;z-index:200;background:rgba(59,51,45,.35);backdrop-filter:blur(3px);opacity:0;pointer-events:none;transition:.22s}
.srch.open{opacity:1;pointer-events:auto}
.srch-panel{background:var(--cream);max-height:88vh;overflow-y:auto;-webkit-overflow-scrolling:touch;transform:translateY(-14px);transition:.22s;border-bottom:1px solid var(--line)}
.srch.open .srch-panel{transform:none}
.srch-bar{display:flex;align-items:center;gap:14px;max-width:820px;margin:0 auto;padding:26px 24px 20px}
.srch-bar input{flex:1;min-width:0;border:none;border-bottom:1px solid var(--greige);background:none;font-family:'Cormorant Garamond',serif;font-size:clamp(22px,4vw,30px);color:var(--ink);outline:none;padding:6px 2px}
.srch-bar input::placeholder{color:var(--taupe)}
.srch-bar button{background:none;border:none;font-size:26px;line-height:1;color:var(--soft);cursor:pointer;padding:0 2px}
.srch-res{max-width:820px;margin:0 auto;padding:0 24px 30px}
.srch-hint{color:var(--soft);font-size:13.5px;padding:4px 0 18px}
.srch-item{display:grid;grid-template-columns:62px 1fr auto;gap:16px;align-items:center;padding:12px 0;border-top:1px solid var(--line);color:inherit}
.srch-item .th{position:relative;aspect-ratio:3/4;overflow:hidden;background:var(--ivory)}
.srch-item .th img,.srch-item .th .sw{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.srch-item .t{min-width:0}
.srch-item .t b{display:block;font-family:'Cormorant Garamond',serif;font-size:19px;font-weight:500;line-height:1.25}
.srch-item .c{display:block;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--soft);margin-top:3px}
.srch-out{margin-left:8px;color:#b3512c}
.srch-item .p{color:var(--gold-d);font-size:14px;white-space:nowrap}
.srch-item:hover{background:var(--paper)}
.srch-sug .srch-item:first-child{border-top:1px solid var(--line)}
/* retour du formulaire newsletter, jusqu'ici muet */
.nmsg{font-size:13px;margin-top:12px;line-height:1.6}
.nmsg.ok{color:var(--gold-d)}
.nmsg.err{color:#b3512c}

/* ===== pages éditoriales (aide, faq, tailles, suivi, contact) ===== */
.doc{max-width:820px;margin:0 auto;padding:50px 0 20px}
.doc h2{font-family:'Cormorant Garamond',serif;font-weight:500;font-size:clamp(24px,3.4vw,32px);margin:44px 0 14px;color:var(--ink)}
.doc h2:first-child{margin-top:0}
.doc h3{font-family:'Cormorant Garamond',serif;font-weight:500;font-size:20px;margin:26px 0 8px}
.doc p{color:#4a423b;font-size:16px;margin-bottom:14px}
.doc .lead{font-size:17.5px;color:var(--soft)}
.doc a.inl{color:var(--gold-d);border-bottom:1px solid var(--line)}
.doc ul{margin:0 0 16px 20px;color:#4a423b;font-size:16px}
.doc li{margin-bottom:7px}
.panel{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:26px 28px;margin:22px 0}
.panel h3{margin-top:0}
.tbl{width:100%;border-collapse:collapse;margin:18px 0;font-size:15px}
.tbl th,.tbl td{border:1px solid var(--line);padding:11px 12px;text-align:left}
.tbl th{background:var(--ivory);font-weight:500;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--soft)}
.tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
/* Sur telephone un tableau ne glisse pas, il se replie en fiches. Chaque
   cellule reprend le nom de sa colonne dans data-th, sinon la valeur seule
   ne veut plus rien dire une fois l'entete retiree. */
@media(max-width:640px){
  .tbl-scroll{overflow-x:visible}
  .tbl,.tbl tbody,.tbl tr,.tbl td{display:block;width:100%}
  .tbl{margin:16px 0}
  .tbl thead{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
  .tbl tr{border:1px solid var(--line);border-radius:12px;margin-bottom:12px;overflow:hidden;background:#fff}
  .tbl td{border:0;border-bottom:1px solid var(--line);padding:12px 14px;font-size:15px}
  .tbl tr td:last-child{border-bottom:0}
  .tbl td::before{content:attr(data-th);display:block;font-size:12px;line-height:1.5;letter-spacing:.1em;text-transform:uppercase;color:var(--soft);margin-bottom:3px}
  .tbl td:empty{display:none}
}
.acc{border-top:1px solid var(--line)}
.acc details{border-bottom:1px solid var(--line)}
.acc summary{list-style:none;cursor:pointer;padding:18px 34px 18px 0;position:relative;font-family:'Cormorant Garamond',serif;font-size:21px;font-weight:500;color:var(--ink)}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"+";position:absolute;right:4px;top:50%;transform:translateY(-50%);color:var(--gold);font-size:22px;font-family:'Jost'}
.acc details[open] summary::after{content:"−"}
.acc details p{padding:0 0 18px;color:#4a423b;font-size:15.5px;margin:0}
.fld{margin-bottom:16px}
.fld label{display:block;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--soft);margin-bottom:7px}
.fld input,.fld textarea,.fld select{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:10px;font-family:'Jost';font-size:15px;background:#fff;color:var(--ink);outline:none;font-weight:300}
.fld textarea{min-height:130px;resize:vertical;line-height:1.6}
.fld input:focus,.fld textarea:focus{border-color:var(--gold)}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.msg{font-size:13.5px;padding:11px 13px;border-radius:8px;margin-bottom:14px;display:none;line-height:1.55}
.msg.err{display:block;background:#fbece4;color:#b3512c;border:1px solid #f0cdbf}
.msg.ok{display:block;background:#eef3e8;color:#5f7a4f;border:1px solid #d3e2c8}
/* moyens de paiement */
.paylist{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:12px}
.paylist span{background:#fff;border:1px solid var(--line);border-radius:7px;padding:5px 10px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--soft)}

/* Trois raccourcis sous la grille produits : ils répondent aux objections
   (taille, livraison, conseil) juste au moment où elles se posent. */
.shop-help{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:52px 0 20px}
.shop-help a{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:20px 18px;display:block;transition:border-color .2s}
.shop-help a:hover{border-color:var(--gold)}
.shop-help b{display:block;font-family:'Cormorant Garamond',serif;font-size:20px;font-weight:500;color:var(--ink);margin-bottom:5px}
.shop-help span{font-size:13.5px;color:var(--soft);line-height:1.55}
.grid-empty{grid-column:1/-1;text-align:center;color:var(--soft);font-size:15.5px;padding:40px 0}
.grid-empty a{color:var(--gold-d);border-bottom:1px solid var(--line)}

@media(max-width:900px){
  .prods{grid-template-columns:1fr 1fr}
  .pdp{grid-template-columns:1fr;gap:28px}
  /* Au doigt on balaye, l'invite au clic n'a pas de sens. */
  .pdp .gzoom{display:none}
  /* Les fleches de la galerie restent au plancher de 40 px, comme le reste. */
  .pdp .gnav{width:40px;height:40px}
  .pdp .gprev{left:8px}
  .pdp .gnext{right:8px}
  .lbox{padding:64px 10px}
  .cart-grid{grid-template-columns:1fr;gap:28px}
  .summary{position:static}
  .fgrid{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
  .navrow{grid-template-columns:auto 1fr auto;height:64px}
  .navlinks{display:none}.burger{display:block}.logo{font-size:21px}
  .navicons{gap:4px}
  /* Zones tactiles au doigt. Les icones dessinees font 19 px, la cible autour
     est portee a 40 x 44. La largeur est le poste contraint : a 375 px la
     barre doit loger le burger, le nom de la maison et trois icones. A 44 px
     de large chacune, le nom de la maison serait repousse hors ecran. 40 px
     est la limite basse tenue sur tout le site, la hauteur compense. */
  .navicons a,.navicons button{display:flex;align-items:center;justify-content:center;min-width:40px;min-height:44px;padding:0}
  .burger{padding:9px;margin-left:-9px}
  .prods{grid-template-columns:1fr 1fr;gap:16px}
  .cart-line{grid-template-columns:70px 1fr;grid-template-areas:'img info' 'img price'}
  .cart-line .th{width:70px}
  .doc{padding:34px 0 10px}
  .g2{grid-template-columns:1fr}
  .panel{padding:22px 20px}
  .srch-item{grid-template-columns:52px 1fr;row-gap:2px}
  .srch-item .th{grid-row:span 2}
  .srch-item .p{grid-column:2;text-align:left}
  .shop-help{grid-template-columns:1fr;margin-top:40px}
}
@media(max-width:360px){
  .logo{font-size:19px}
  .navicons{gap:3px}
}

/* =============================================================================
   Plancher de lisibilite sur telephone

   La charte pose des petites capitales tres espacees pour les surtitres, les
   categories et les pastilles. A 9, 10 ou 11 px, ces libelles passent sous le
   seuil de lisibilite au pouce, et ce sont justement eux qui portent le rayon,
   la mention Nouveau et le prix barre. On les remonte a 12 px en dessous de
   900 px de large. Le dessin ne bouge pas, l'espacement des lettres garde le
   meme caractere, seule la taille est ramenee au minimum lisible.

   Note de cascade. Une requete media n'ajoute aucune specificite. Les
   selecteurs ci-dessous doivent donc egaler ou depasser ceux qu'ils corrigent,
   sans quoi la regle d'origine gagne malgre sa position plus haute dans le
   fichier. C'est pour ca qu'on ecrit .card .lbl et non .lbl.
   ========================================================================== */
@media(max-width:900px){
  body .announce,
  .hero .eyebrow,
  .page-head .kick,
  .sec-head .kick,
  .cat span,
  .ph .note,
  .cartc,
  .card .lbl,
  .card .tag,
  .card .cat,
  .card .promo,
  .pdp .info .promo,
  .pdp .info .cat,
  .pdp .gcount,
  .pdp .gzoom,
  .opt-label,
  .srch-item .c,
  .fld label,
  .co-fld label,
  .paylist span,
  .pill,
  footer h5,
  .mc-head .s{font-size:12px}
  /* Le compteur du panier grossit avec son chiffre, on lui rend sa rondeur. */
  .cartc{min-width:19px;height:19px;line-height:19px;padding:0 5px}
}