:root{
  --paper:#F5F5F2; --paper-2:#EFEFEB; --ink:#14161A; --ink-soft:#3B4046;
  --anthracite:#22262B; --graphite:#2C3137; --silver:#C7CBCF; --hair:#E2E2DD;
  --hair-2:#D6D6D0;
  /* Gris du texte secondaire. Etait #8A9098, soit 2.95 sur le papier et 3.22
     sur le blanc -- sous les 4.5 exiges, sur 27 elements de la seule page
     modele. #686E76 donne 4.71 / 5.15. La contrainte est le papier, pas le
     blanc : depuis que la carte d'annonce n'a plus de fond, son texte
     secondaire repose sur le papier. */
  --mute:#686E76;
  /* L'or, en deux encres selon le fond. #C39B5E ne tient que sur le sombre
     (6.4 sur la navy) : sur le papier clair il tombe a 2.35, tres en dessous
     des 4.5 exiges pour du texte. --gold-ink est l'or utilisable sur clair
     (4.6 sur le papier, 5.0 sur le blanc), y compris en aplat sous du texte
     blanc. Les cinq verts precedents (--accent, --bordeaux et leurs
     variantes) sont remplaces par ces deux encres. */
  --gold:#C39B5E; --gold-ink:#8A6A2F; --gold-ink-2:#6B4F22;
  --accent-ink:#2A2118;
  /* Indicateurs de prix : semantiques, ils restent rouge/vert. */
  --up:#8C2F2F; --down:#1E5E3F;
  --white:#FFFFFF;
  --mono:'Space Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --shadow:0 1px 2px rgba(20,22,26,.05),0 8px 30px rgba(20,22,26,.06);
  --shadow-lg:0 24px 70px rgba(20,22,26,.18);
  /* Rayons. Trois roles, pas dix-sept valeurs : un controle, un panneau, et
     ce qui doit etre rond l'est vraiment. Serre volontairement -- l'angle net
     est ce qui separe la salle des ventes de l'application grand public.
     --r-btn regroupe ce qui etait en pilule 999px : y remettre 999px suffit
     a revenir en arriere d'un seul coup. */
  --r:0px; --r-sm:0px; --r-btn:var(--r-sm); --r-round:50%; --maxw:1280px;
  /* Echelle typographique. Pas a pas de 1px sous le corps (15px), ou la
     lisibilite exige de la finesse ; intervalles plus larges au-dessus, ou
     c'est la hierarchie qui parle. Toute nouvelle taille doit tomber sur un
     de ces barreaux -- c'est ce qui evitait les 26 valeurs d'avant. */
  --fs-10:10px; --fs-11:11px; --fs-12:12px; --fs-13:13px; --fs-14:14px;
  --fs-15:15px; --fs-16:16px; --fs-18:18px; --fs-22:22px; --fs-26:26px;
  --fs-30:30px; --fs-38:38px; --fs-46:46px; --fs-56:56px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:Inter,system-ui,sans-serif;background:var(--paper);color:var(--ink);
  -webkit-font-smoothing:antialiased;line-height:1.5;font-size:var(--fs-15);
  padding-bottom:env(safe-area-inset-bottom);
}
h1,h2,h3,h4{margin:0;font-weight:600;letter-spacing:-.01em}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit}
img{max-width:100%}
.serif{font-family:"Playfair Display",Georgia,serif;font-weight:600;letter-spacing:-.015em}
.ui{font-family:Manrope,Inter,sans-serif}
.eyebrow{font-family:Manrope,Inter,sans-serif;font-style:normal;font-weight:700;
  font-size:var(--fs-11);letter-spacing:.14em;text-transform:uppercase;color:var(--gold-ink)}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.muted{color:var(--mute)}
.hair{border:0;border-top:1px solid var(--hair);margin:0}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:8px;font-family:Manrope,sans-serif;font-weight:600;
  font-size:var(--fs-14);padding:11px 18px;border-radius:var(--r-btn);border:1px solid transparent;transition:.15s;white-space:nowrap}
.btn:focus-visible{outline:2px solid var(--gold-ink);outline-offset:2px}
.btn-primary{background:#0B1E33;color:#F5F1E6;border:2px solid #D9B679}
.btn-primary:hover{background:#123049}
.btn-dark{background:#0B1E33;color:#F5F1E6;border:2px solid #D9B679}
.btn-dark:hover{background:#123049}
.btn-ghost{border-color:var(--hair-2);color:var(--ink);background:var(--white)}
.btn-ghost:hover{border-color:var(--silver);background:var(--paper-2)}
.btn-sm{padding:8px 14px;font-size:var(--fs-13)}
.contact-menu{position:relative;display:inline-flex}
.contact-menu-dd{position:absolute;top:calc(100% + 8px);left:0;background:var(--white);border:1px solid var(--hair-2);
  border-radius:var(--r);box-shadow:var(--shadow-lg);padding:6px;min-width:190px;display:none;flex-direction:column;gap:2px;z-index:50}
.contact-menu-dd.open{display:flex}
.contact-menu-dd a,.contact-menu-dd button{display:block;width:100%;text-align:left;padding:10px 12px;border-radius:var(--r-sm);
  font-family:Manrope,sans-serif;font-weight:600;font-size:var(--fs-13);color:var(--ink);background:none;border:0}
.contact-menu-dd a:hover,.contact-menu-dd button:hover{background:var(--paper-2)}
.share-menu .contact-menu-dd{left:auto;right:0;min-width:170px}
.chip{display:inline-flex;align-items:center;gap:7px;font-family:Manrope,sans-serif;font-weight:600;font-size:var(--fs-13);
  padding:8px 14px;border-radius:var(--r-btn);border:1px solid var(--hair-2);background:var(--white);color:var(--ink-soft);transition:.15s}
.chip:hover{border-color:var(--silver);color:var(--ink)}
.chip.on{background:var(--gold-ink);border-color:var(--gold-ink);color:#fff}
.chip.active{background:var(--ink);color:var(--paper);border-color:var(--ink)}

/* ---------- Header ---------- */
header.top{position:sticky;top:0;z-index:60;background:rgba(245,245,242,.86);backdrop-filter:saturate(1.2) blur(12px);border-bottom:1px solid var(--hair);transition:background-color .2s ease,border-color .2s ease}
header.top{background-color:#0B1E33;background-repeat:repeat;background-position:left top;background-size:48px 100%;
  background-image:linear-gradient(90deg,transparent,transparent 47px,rgba(195,155,94,.32) 47px,rgba(195,155,94,.32) 48px);border-bottom:none}

.topbar .nav a{color:#F5F1E6;transition:color .2s ease}
.topbar .nav a:hover{background:rgba(255,255,255,.14);color:#fff}
.topbar .nav a.on{color:#fff}
.topbar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:22px;height:104px}
.logo{display:flex;align-items:center;gap:10px;font-family:"Playfair Display",serif;font-weight:600;font-size:var(--fs-22);letter-spacing:-.02em;justify-self:center}
.logo .mark{width:80px;height:80px;flex:0 0 auto;object-fit:contain}
.nav{display:flex;align-items:center;gap:4px;margin-left:8px}
.nav a{font-family:Manrope,sans-serif;font-weight:600;font-size:var(--fs-13);color:var(--ink-soft);padding:8px 11px;border-radius:var(--r-sm);transition:.12s;white-space:nowrap}
.nav a:hover{background:var(--paper-2);color:var(--ink)}
.nav a.on{color:var(--ink)}
#navMobile{display:none}
.top-actions{justify-self:end;display:flex;align-items:center;gap:10px}
.selects{display:flex;align-items:center;gap:6px}
.sel{font-family:Manrope,sans-serif;font-weight:600;font-size:var(--fs-13);color:var(--ink-soft);border:1px solid var(--hair-2);
  background:var(--white);border-radius:var(--r-sm);padding:7px 9px;cursor:pointer}
.sel:hover{border-color:var(--silver)}
.iconbtn{width:38px;height:38px;border-radius:var(--r-sm);border:1px solid var(--hair-2);background:var(--white);display:inline-flex;align-items:center;justify-content:center}
.iconbtn:hover{border-color:var(--silver)}
.fav-count{position:absolute;top:-6px;right:-6px;background:var(--gold-ink);color:#fff;font-family:Manrope;font-weight:700;font-size:var(--fs-10);min-width:16px;height:16px;border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;padding:0 3px}
.burger{display:none}

/* ---------- Hero ---------- */
.hero{margin-top:-2px;padding:22px 0 48px;text-align:center;position:relative;
  background-color:#0B1E33}
/* Les rayures quittent le fond du .hero pour un pseudo-element : c'est ce
   qui permet de les reveler au chargement. Un balayage unique de gauche a
   droite, puis plus rien -- une boucle perpetuelle derriere un champ de
   recherche serait une nuisance, pas un ornement. Le garde .stripes-shown
   est pose par render() : sans lui l'animation rejouerait a chaque rendu,
   et l'accueil en fait deux (squelette, puis donnees). */
.hero::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-repeat:repeat;background-position:left top;background-size:48px 100%;
  background-image:linear-gradient(90deg,transparent,transparent 47px,rgba(195,155,94,.32) 47px,rgba(195,155,94,.32) 48px)}
body:not(.stripes-shown) .hero::before{animation:stripe-sweep 1.1s cubic-bezier(.22,.61,.36,1) both}
@keyframes stripe-sweep{
  from{clip-path:inset(0 100% 0 0);opacity:0}
  35%{opacity:1}
  to{clip-path:inset(0 0 0 0);opacity:1}}
.hero .wrap{position:relative;z-index:1}
.hero .brand-lockup{margin-top:0;margin-bottom:18px;transform-origin:top center;transition:transform .25s ease,opacity .25s ease;position:relative;z-index:70;pointer-events:none}
.hero .brand-lockup .mark{width:130px;height:130px;margin:-25px auto -5px;display:block}
.hero .brand-lockup .word{display:block;margin:0;font-family:"Playfair Display",serif;font-weight:600;font-size:clamp(46px,9vw,84px);line-height:1;letter-spacing:.04em;color:#F5F1E6}
.topbar .logo{transition:transform .25s ease,opacity .25s ease}
.topbar .logo{color:#F5F1E6}
body[data-page="home"] .topbar .logo{opacity:0;transform:scale(.7)}
.hero .eyebrow{margin-bottom:8px;color:#C39B5E;font-size:var(--fs-18)}
.hero .sub{max-width:560px;margin:18px auto 0;color:rgba(245,241,230,.72);font-size:var(--fs-16)}
/* Suggestions de marques sous la recherche : traitees comme des index de
   cadran — angles vifs, filet fin dore, le serif de la marque. Pas de fond,
   pour laisser voir les rayures du hero. Au survol, le filet passe a l'or
   plein : un seul changement, discret. */
/* Suggestions de marques : plus de boite. Cinq rectangles identiques lisaient
   comme une barre d'outils et affaiblissaient des noms qui portent deja seuls.
   Pas de filet de separation ici, contrairement au reste du site : le fond
   du hero est raye verticalement, et un separateur vertical dore par-dessus
   des rayures dorees faisait ligne sur ligne. L'espace suffit. Le
   soulignement au survol reste celui de "Tout voir" (.link-arrow) ; le
   <span> le limite au mot. */
.hero .chip{font-family:"Playfair Display",serif;font-weight:500;font-size:var(--fs-16);letter-spacing:.02em;
  padding:8px 0;border:0;border-radius:0;background:transparent;color:#F5F1E6;transition:none}
.hero .chip>span{position:relative;display:inline-block}
.hero .chip>span::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:1px;
  background:var(--gold);transform:scaleX(0);transform-origin:left;
  transition:transform .28s cubic-bezier(.4,0,.2,1)}
.hero .chip:hover>span::after,.hero .chip:focus-visible>span::after{transform:scaleX(1)}
.hero .chip:focus-visible{outline:1px solid var(--gold);outline-offset:4px}
.hero .stat{color:rgba(245,241,230,.72)}
.hero .stat .dot{background:#C39B5E}
.hero.hero-models{padding:30px 0 0;overflow:hidden}
.hero-models .wrap{max-width:1000px;z-index:6}
.hero-models .brand-lockup{margin-bottom:10px}
.hero-models .brand-lockup .mark{width:104px;height:104px;margin:-16px auto -8px}
.hero-models .brand-lockup .word{font-size:clamp(46px,6.4vw,70px)}
.hero-models .hero-subtitle{margin:0;font-family:Manrope,Inter,sans-serif;font-style:normal;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#C39B5E;font-size:var(--fs-12)}
.hero-models .searchwrap{margin:24px auto 0;max-width:740px;z-index:90}
.hero-models .ac{z-index:120}
.hero-models .searchbox{border-radius:var(--r-sm);padding:8px 8px 8px 18px}
.hero-models .suggests{margin-top:20px}
.home-stats{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:0 14px;
  margin:22px auto 0;max-width:620px;text-align:center;
  font-family:var(--mono);font-size:var(--fs-12);letter-spacing:.11em;text-transform:uppercase;
  color:rgba(245,241,230,.72)}
.home-stat{display:inline-flex;align-items:baseline;gap:6px;white-space:nowrap}
.home-stat-sep{color:#C39B5E;opacity:.7}
.home-stat{display:flex;align-items:center;gap:10px;min-width:0}
.home-stat-icon{width:19px;height:19px;flex:0 0 auto;color:#C39B5E}
.home-stats .n{font-family:Manrope,Inter,sans-serif;font-weight:700;font-size:var(--fs-16);color:#F5F1E6;line-height:1.08;font-variant-numeric:tabular-nums}
.home-stats .n.txt{font-size:var(--fs-16);line-height:1.18;max-width:210px}
.home-stat-direct .n.txt{font-size:var(--fs-15);line-height:1.2;max-width:200px}
.home-stats .l{font-family:Manrope,sans-serif;font-size:var(--fs-12);line-height:1.25;color:rgba(245,241,230,.72);margin-top:1px}
.home-model-stage{position:relative;z-index:1;margin:24px auto 0;height:244px;max-width:1180px;padding:0 24px}
.home-model-stage::after{content:"";position:absolute;left:0;right:0;bottom:0;height:70px;background:linear-gradient(180deg,rgba(11,30,51,0),#0B1E33);pointer-events:none}
.hero-model-rail{position:relative;z-index:1;display:flex;align-items:flex-start;justify-content:space-between;height:100%;width:min(1080px,100%);margin:0 auto;padding:0 32px}
/* C'est l'IMAGE qui monte au survol, jamais la carte. Quand la carte se
   deplacait elle-meme, sa zone sensible montait avec elle : le curseur se
   retrouvait sous la carte, le survol se coupait, elle redescendait, et le
   cycle recommencait — d'ou le tremblement. La carte reste donc fixe et sert
   de cible stable ; l'image, rendue transparente au pointeur, se contente de
   bouger. */
/* Chaque vignette prend la largeur de SA montre, et space-between repartit le
   reste : ce sont les espaces qui sont egaux, pas les centres. Avec des
   cellules de largeur identique (flex:1 1 0) les centres tombaient juste mais
   les montres non — la Tank ne fait que 92px de large la ou les autres en font
   114, ce qui ouvrait 9px de vide a sa droite quand les suivantes se
   chevauchaient de 2px. L'oeil lit les bords, pas les centres.

   La largeur est CALCULEE a partir de --h, la hauteur naturelle de l'image
   posee en attribut, et jamais mesuree sur l'image elle-meme : les quatre
   dernieres vignettes sont en loading="lazy", une largeur deduite du contenu
   vaudrait zero tant qu'elles n'ont pas charge et toute la rangee se tasserait
   a gauche avant de sauter en place. Les trois constantes sont celles de la
   regle img juste en dessous — hauteur de rendu, largeur naturelle, plafond. */
.hero-model-card{position:relative;--img-h:174px;--img-nat:252;--img-max:114px;
  flex:0 0 min(var(--img-max),calc(var(--img-h) * var(--img-nat) / var(--h,411)));
  min-width:0;height:224px;display:flex;align-items:flex-start;justify-content:center;
  padding-top:var(--rail);cursor:pointer;
  transition:opacity .32s ease,filter .32s ease;opacity:.94}
.hero-model-card img{height:174px;width:auto;max-width:114px;object-fit:contain;display:block;pointer-events:none;
  filter:drop-shadow(0 14px 24px rgba(0,0,0,.42));
  transition:transform .32s cubic-bezier(.22,.61,.36,1)}
.hero-model-rail:hover .hero-model-card{opacity:.28;filter:saturate(.35) brightness(.82)}
.hero-model-rail .hero-model-card:hover{opacity:1;filter:none}
.hero-model-card:hover img{transform:translateY(calc(-38px - var(--rail)))}
.hero-model-name{position:absolute;left:50%;bottom:0;transform:translateX(-50%) translateY(calc(5px + var(--rail)));white-space:nowrap;
  display:flex;flex-direction:column;align-items:center;gap:2px;
  font-family:"Playfair Display",serif;font-size:var(--fs-15);line-height:1;color:#F5F1E6;opacity:0;
  text-shadow:0 2px 12px rgba(0,0,0,.55);
  transition:opacity .3s ease,transform .3s ease;pointer-events:none;z-index:2}
/* La carte ne bougeant plus, le nom porte seul le deplacement : il part de
   5px sous le bas de carte et vient se poser 38px au-dessus, soit exactement
   la position qu'il occupait quand la carte l'emportait avec elle. */
.hero-model-card:hover .hero-model-name{opacity:1;transform:translateX(-50%) translateY(-38px)}
.hero-model-count{font-family:Manrope,sans-serif;font-size:var(--fs-10);line-height:1.1;color:#C39B5E;margin-left:0;
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}

/* Hero en deux colonnes, desktop uniquement — sur mobile (<821px) le hero
   reste tel qu'il était (une colonne, centré, sans photo), inchangé. La
   photo a sa propre colonne dédiée : n'importe quelle photo bien cadrée
   fonctionne, pas besoin de composition avec un centre vide comme pour un
   fond plein cadre. */
@media(min-width:821px){
  /* Le contenu du hero reste centre dans sa colonne : essaye aligne a gauche,
     ecarte a la relecture. Seule la revelation des rayures est conservee. */
  .hero-split{display:grid;grid-template-columns:1.1fr 1fr;align-items:stretch}
  .hero-split .hero{margin-top:0;padding:64px 40px}
  .hero-split .hero .wrap{max-width:none;margin:0;padding:0}
  .hero-split .hero .brand-lockup .mark{width:104px;height:104px}
  .hero-split .hero .brand-lockup .word{font-size:var(--fs-56)}
  .hero-split .hero .searchwrap{margin:32px auto 0}
  .hero-photo-col{position:relative;overflow:hidden;background:#07121E}
  .hero-photo-col img{width:100%;height:100%;object-fit:cover;display:block}
  .hero-photo-col::after{
    content:"";position:absolute;inset:0;
    background:
      linear-gradient(90deg,rgba(11,30,51,.87) 0%,rgba(11,30,51,.57) 11%,transparent 28%),
      linear-gradient(0deg,rgba(7,18,30,.88) 0%,rgba(7,18,30,.55) 22%,transparent 46%),
      linear-gradient(180deg,rgba(11,30,51,.55) 0%,transparent 14%);
  }
  .hero-trust-overlay{
    position:absolute;left:0;right:0;bottom:0;z-index:1;
    display:flex;gap:0;padding:22px 28px 24px;
  }
  .hero-trust-item{flex:1;display:flex;align-items:center;gap:10px;padding-right:16px}
  .hero-trust-item svg{flex:0 0 auto;color:#C39B5E}
  .hero-trust-item .n{font-family:Manrope,sans-serif;font-weight:700;font-size:var(--fs-14);color:#F5F1E6;line-height:1.3}
  .hero-trust-item .l{font-family:Manrope,sans-serif;font-size:var(--fs-11);color:rgba(245,241,230,.75);line-height:1.3}
  /* La légende superposée remplace le bandeau blanc sur desktop (photo
     présente) ; le bandeau reste affiché sur mobile, où il n'y a pas de photo. */
  .trustbar{display:none}
}
@media(max-width:820px){
  .hero-photo-col{display:none}
  .hero.hero-models{padding:44px 0 0}
  .hero-models .brand-lockup .mark{width:112px;height:112px}
  .home-stats{gap:0 10px;margin-top:20px;max-width:none;font-size:var(--fs-11);letter-spacing:.09em}
  .home-stat{justify-content:flex-start;align-items:center}
  .home-stat-icon{width:18px;height:18px}
  .home-stats .n{font-size:var(--fs-16)}
  .home-stats .n.txt{font-size:var(--fs-16);max-width:none}
  .home-stat-direct .n.txt{font-size:var(--fs-15)}
  .home-stats .l{font-size:var(--fs-12)}
  .home-model-stage{height:168px;max-width:none;padding:0;margin-top:24px;overflow:hidden}
  .home-model-stage::after{display:none}
  .hero-model-rail{width:100%;justify-content:flex-start;align-items:flex-end;gap:16px;overflow-x:auto;padding:8px 22px 20px;scroll-padding:0 22px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;touch-action:pan-x}
  .hero-model-rail::-webkit-scrollbar{height:0}
  .hero-model-card{flex:0 0 86px;height:136px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:7px;padding-top:0;scroll-snap-align:start;opacity:1;filter:none;transform:none;transition:none}
  .hero-model-card:nth-child(even){margin-bottom:12px}
  .hero-model-card img{height:94px;max-width:70px}
  .hero-model-rail:hover .hero-model-card{opacity:1;filter:none}
  .hero-model-rail .hero-model-card:hover{opacity:1;filter:none;transform:none}
  .hero-model-card:hover img{transform:none}
  .hero-model-rail .hero-model-card.is-active,.hero-model-rail .hero-model-card:focus-visible{opacity:1;filter:none;transform:none}
  .hero-model-name{position:static;left:auto;bottom:auto;display:flex;flex-direction:column;align-items:center;gap:1px;width:100%;max-width:86px;min-height:27px;margin:0;text-align:center;transform:none;opacity:1;white-space:normal;line-height:1.08;font-size:var(--fs-11);text-shadow:none;transition:none}
  .hero-model-card:hover .hero-model-name{opacity:1;transform:none}
  .hero-model-card.is-active .hero-model-name,.hero-model-card:focus-visible .hero-model-name{opacity:1;transform:none}
  .hero-model-count{display:block;margin:0;font-size:var(--fs-10);line-height:1.1}
}
@media(max-width:480px){
  .home-model-stage{height:158px;margin-top:22px}
  .hero-model-rail{gap:14px;padding:8px 20px 18px;scroll-padding:0 20px}
  .hero-model-card{flex-basis:80px;height:128px}
  .hero-model-card:nth-child(even){margin-bottom:10px}
  .hero-model-card img{height:88px;max-width:66px}
  .hero-model-name{max-width:80px;font-size:var(--fs-10)}
}
.searchwrap{max-width:680px;margin:44px auto 0;position:relative}
.searchbox{display:flex;align-items:center;gap:10px;background:var(--white);border:1px solid var(--hair-2);
  border-radius:var(--r-btn);padding:8px 8px 8px 20px;box-shadow:var(--shadow);transition:.15s}
.searchbox:focus-within{border-color:var(--gold-ink);box-shadow:0 0 0 4px rgba(138,106,47,.08),var(--shadow)}
.searchbox svg{flex:0 0 auto;color:var(--mute)}
.searchbox input{flex:1;border:0;outline:0;background:transparent;font-size:var(--fs-16);font-family:Inter;color:var(--ink);min-width:0}
.searchbox input::placeholder{color:var(--mute)}
.search-clear{flex:0 0 auto;align-items:center;justify-content:center;width:26px;height:26px;border-radius:var(--r-round);background:var(--paper-2);color:var(--ink-soft);border:0;cursor:pointer}
.search-clear:hover{background:var(--hair-2);color:var(--ink)}
.suggests{display:flex;align-items:center;gap:34px;justify-content:center;flex-wrap:wrap;margin-top:26px}
.ac{position:absolute;left:0;right:0;top:calc(100% + 8px);background:var(--white);border:1px solid var(--hair-2);border-radius:var(--r);box-shadow:var(--shadow-lg);z-index:40;overflow:hidden;text-align:left}
.ac:empty{display:none;border:none;box-shadow:none}
.ac-item{display:flex;align-items:center;gap:12px;padding:11px 18px;cursor:pointer}
.ac-item:hover,.ac-item.hl{background:var(--paper-2)}
.ac-item .k{font-family:Manrope;font-weight:600;font-size:var(--fs-14)}
.ac-item .m{color:var(--mute);font-size:var(--fs-12);margin-left:auto}
.ac-note{padding:10px 18px;font-size:var(--fs-13);color:var(--ink-soft);border-top:1px solid var(--hair);background:var(--paper)}
.ac-note b{color:var(--gold-ink);cursor:pointer;text-decoration:underline}
.stats{position:static;display:flex;flex-wrap:wrap;gap:26px;justify-content:center;padding:0 24px;margin-top:28px}
.stat{display:flex;align-items:center;gap:9px;font-family:Manrope;font-weight:600;font-size:var(--fs-13);color:var(--ink-soft)}
.stat .dot{width:6px;height:6px;border-radius:var(--r-sm);background:var(--gold-ink)}

/* ---------- Sections ---------- */
section.blk{padding:42px 0}
/* Trois composants jouent le meme role -- un bloc de titre pose au-dessus
   d'un contenu -- et avaient trois marges basses differentes : 22, 18 et 24.
   Le meme defaut que les titres de section figes en inline, cote espacement.
   Ils partagent desormais la meme valeur. */
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:24px}
.sec-head h2{font-size:clamp(var(--fs-26),3vw,var(--fs-30));font-family:"Playfair Display",serif}
/* Titre de section MINEUR : au-dessus d'un tableau ou d'une liste, la ou le
   titre annonce des donnees plutot qu'il n'invite. Remplace les
   `style="font-size:22px"` poses en dur dans le JS, qui figeaient le clamp
   au minimum et donnaient 30px sur l'accueil contre 22px ailleurs. */
.sec-head.minor h2{font-size:var(--fs-26)}
.sec-head .eyebrow{margin-bottom:8px}
.link-arrow{font-family:Manrope;font-weight:600;font-size:var(--fs-13);color:var(--gold-ink);display:inline-flex;gap:6px;align-items:center;position:relative;text-decoration:none}
/* Micro-interaction : un soulignement qui se deploie de gauche a droite au
   survol, a la place d'une fleche appendue au texte. */
.link-arrow::after{content:"";position:absolute;left:0;bottom:-3px;width:100%;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .28s cubic-bezier(.4,0,.2,1)}
.link-arrow:hover::after,.link-arrow:focus-visible::after{transform:scaleX(1)}
.seo-home-copy p{max-width:760px;color:var(--ink-soft);font-size:var(--fs-15);margin:0 0 20px}
.seo-link-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@media(max-width:900px){.seo-link-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.seo-link-grid{grid-template-columns:1fr}}
/* Fil d'Ariane des pages marque/modele : repere de navigation pour le
   visiteur, et hierarchie explicite pour les moteurs (schema BreadcrumbList
   pose en parallele dans chaque page). */
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 22px;
  font-family:Manrope,sans-serif;font-weight:600;font-size:var(--fs-12)}
.crumbs a{color:var(--mute);transition:color .15s}
.crumbs a:hover{color:var(--ink)}
.crumbs span[aria-current]{color:var(--ink)}
.crumbs .crumb-sep{color:var(--silver)}
/* Page d'atterrissage des liens d'alerte. Page transactionnelle : un seul
   bloc centre, un seul message, une seule action. Pas de bandeau de titre
   pleine largeur, qui creusait la page pour trois lignes de texte. */
.alerte-page{display:flex;justify-content:center;padding:64px 24px 80px}
.alerte-carte{width:100%;max-width:520px;text-align:center;background:var(--white);
  border:1px solid var(--hair);border-radius:var(--r);padding:44px 40px}
.alerte-marque{width:34px;height:34px;margin:0 auto 22px;border-radius:var(--r-round);
  border:1px solid var(--gold-ink);color:var(--gold-ink);display:flex;align-items:center;justify-content:center}
.alerte-carte .eyebrow{margin-bottom:10px}
.alerte-carte h1{font-family:"Playfair Display",serif;font-weight:600;
  font-size:clamp(var(--fs-22),3vw,var(--fs-30));line-height:1.15;margin:0 0 14px}
.alerte-carte p{color:var(--ink-soft);font-size:var(--fs-15);line-height:1.7;margin:0 auto 26px;max-width:40ch}
.alerte-carte .btn{width:100%;justify-content:center}
.alerte-secondaire{margin:18px 0 0;font-size:var(--fs-13)}
@media(max-width:600px){
  .alerte-page{padding:36px 18px 56px}
  .alerte-carte{padding:34px 24px}
}
.seo-detail{border-top:1px solid var(--hair);background:var(--paper-2)}
.seo-detail-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(240px,.65fr);gap:56px;align-items:start}
.seo-detail-copy{max-width:760px}
.seo-detail h2{font-family:"Playfair Display",serif;font-size:clamp(var(--fs-26),3vw,var(--fs-30));margin:0 0 18px}
.seo-detail h3{font-family:"Playfair Display",serif;font-size:var(--fs-18);margin:28px 0 10px}
.seo-detail-copy p{color:var(--ink-soft);font-size:var(--fs-15);line-height:1.75;margin:0 0 15px}
.seo-detail-copy a{color:var(--gold-ink);text-decoration:underline;text-underline-offset:3px}
/* Genealogies de references : une liste se lit mieux qu'un paragraphe quand
   il s'agit d'enumerer des references et leurs annees. Tiret dore plutot que
   puce ronde, pour rester dans la ponctuation maison. */
.seo-detail-copy ul{margin:0 0 15px;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.seo-detail-copy li{position:relative;padding-left:20px;color:var(--ink-soft);font-size:var(--fs-15);line-height:1.7}
.seo-detail-copy li::before{content:"";position:absolute;left:0;top:12px;width:8px;height:1px;background:var(--gold-ink)}
.seo-detail-copy li b{color:var(--ink);font-family:Manrope,sans-serif;font-weight:700;font-size:var(--fs-14)}
.seo-facts{border-left:1px solid var(--hair);padding-left:28px}
.seo-facts h2{font-family:Manrope,sans-serif;font-size:var(--fs-14);text-transform:uppercase;margin-bottom:18px}
.seo-facts dl{margin:0}
.seo-facts dl div{padding:11px 0;border-top:1px solid var(--hair)}
.seo-facts dl div:first-child{border-top:0;padding-top:0}
.seo-facts dt{font-family:Manrope,sans-serif;font-size:var(--fs-11);text-transform:uppercase;color:var(--mute);font-weight:700}
.seo-facts dd{margin:4px 0 0;color:var(--ink-soft);font-size:var(--fs-14);line-height:1.5}
.seo-facts .link-arrow{margin-top:22px}
@media(max-width:760px){
  .seo-detail-grid{grid-template-columns:1fr;gap:30px}
  .seo-facts{border-left:0;border-top:1px solid var(--hair);padding:26px 0 0}
}

/* ---------- Bandeau de confiance (sous le hero) ---------- */
.trustbar{background:var(--white);border-bottom:1px solid var(--hair-2)}

/* ---------- Bandeau de logos partenaires ----------
   Les 9 boutiques defilent lentement en continu. Le masque en degrade sur les
   deux bords est ce qui empeche les logos de se couper net contre la marge --
   il est necessaire, pas decoratif. La piste est dupliquee et l'animation
   translate d'exactement -50% : la boucle est donc invisible. */
.logostrip{background:var(--white);border-bottom:1px solid var(--hair-2);padding:20px 0;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 90px,#000 calc(100% - 90px),transparent);
          mask-image:linear-gradient(90deg,transparent,#000 90px,#000 calc(100% - 90px),transparent)}
/* L'espacement est porte par chaque element (margin-right) et non par un
   `gap` de flex : avec un gap, la piste vaut 18 logos + 17 intervalles, donc
   -50% tombe a un demi-intervalle pres et la boucle saute visiblement
   (mesure : 32px d'erreur, la moitie des 64px). Avec une marge par element,
   la moitie de la piste vaut exactement une passe. */
.logostrip-track{display:flex;align-items:center;width:max-content;
  animation:logostrip-run 46s linear infinite}
.logostrip-track>*{margin-right:40px}
.logostrip:hover .logostrip-track,.logostrip:focus-within .logostrip-track{animation-play-state:paused}
/* Cellule de taille fixe. Vos 9 logos ont des proportions tres inegales --
   Berenger est carre (225x225), Cezame fait 200x30 -- et un simple
   `max-height` les rendait de 37px a 150px de large : les carres passaient
   pour des points a cote des logotypes. La cellule fixe egalise le rythme,
   et rend en prime la piste stable avant meme le chargement des images. */
.logostrip-item{flex:0 0 auto;width:132px;height:48px;display:flex;align-items:center;justify-content:center;text-decoration:none}
.logostrip-item:hover img,.logostrip-item:focus-visible img{filter:grayscale(0);opacity:1}
.logostrip-item img{max-width:100%;max-height:48px;width:auto;height:auto;object-fit:contain;
  filter:grayscale(1);opacity:.62;transition:filter .3s ease,opacity .3s ease}
.logostrip-item img:hover{filter:grayscale(0);opacity:1}
@keyframes logostrip-run{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}

/* ---------- Lumiere sur la photo (au pointeur) ----------
   Repond au geste de l'utilisateur, donc legitime la ou une animation
   perpetuelle ne le serait pas. Un halo dore tres bas, cale sur la position du
   curseur : la lumiere qui glisse sur un boitier qu'on incline, pas le halo
   generique pose autour d'une carte. */
.card .art::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;
  transition:opacity .35s ease;
  background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%),
             rgba(195,155,94,.30),rgba(195,155,94,.10) 42%,transparent 68%);
  mix-blend-mode:soft-light}
.card:hover .art::after{opacity:1}

.trustbar-row{max-width:var(--maxw);margin:0 auto;padding:22px 24px;display:grid;grid-template-columns:repeat(3,1fr)}
.trustbar-item{display:flex;align-items:center;gap:12px;padding:0 20px;border-left:1px solid var(--hair-2)}
.trustbar-item:first-child{border-left:none;padding-left:0}
.trustbar-item svg{flex:0 0 auto;color:var(--gold-ink)}
.trustbar-item .n{font-family:Manrope;font-weight:700;font-size:var(--fs-15);color:var(--ink);line-height:1.3}
.trustbar-item .l{font-family:Manrope;font-size:var(--fs-12);color:var(--mute);line-height:1.3}
@media(max-width:820px){
  .trustbar-row{grid-template-columns:1fr;gap:14px;padding:18px 24px}
  .trustbar-item{border-left:none;border-top:1px solid var(--hair-2);padding:14px 0 0}
  .trustbar-item:first-child{border-top:none;padding-top:0}
}

/* ---------- Coup de cœur (carrousel) ---------- */
.picks-scroll{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,340px));justify-content:center;gap:22px;max-width:var(--maxw);margin:0 auto;padding:4px 24px 8px}
.picks-card{position:relative;cursor:pointer}
.picks-img{position:relative;width:100%;aspect-ratio:4/3;border-radius:var(--r);overflow:hidden;background:#FFFFFF;border:1px solid var(--hair)}
.picks-img img{width:100%;height:100%;object-fit:cover;transition:.25s}
.picks-card:hover .picks-img img{transform:scale(1.03)}
.picks-img-btn{position:absolute;right:12px;bottom:12px;box-shadow:0 2px 10px rgba(0,0,0,.25);z-index:2}
.picks-name{font-family:"Playfair Display",serif;font-size:var(--fs-18);margin-top:14px;color:var(--ink)}
.picks-meta{display:flex;align-items:center;gap:6px;font-family:Manrope;font-size:var(--fs-13);color:var(--mute);margin-top:4px}
.link-arrow:hover{color:var(--gold-ink-2)}

/* ---------- Coup de cœur accueil ---------- */
.home-picks-head{align-items:flex-end;margin-bottom:24px}
.home-picks-head p{max-width:600px;margin:7px 0 0;color:var(--mute);font-size:var(--fs-14);line-height:1.55}
.home-picks-layout{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.home-picks-layout.is-single{grid-template-columns:minmax(0,380px);justify-content:center}
/* Trois cartes identiques : photo et titre, rien d'autre. Le reste des infos
   est la recompense du clic — c'est une selection editoriale, pas une grille
   de resultats. Les prix restent visibles juste en dessous, dans « Dernieres
   annonces ». Format vertical : les photos de montres le sont presque
   toujours (0,75 / 0,67 / 0,67 sur la selection du moment). */
.home-pick-carte{min-width:0}
.home-pick-carte a{display:block;text-decoration:none;color:inherit}
.home-pick-photo{display:block;position:relative;aspect-ratio:5/4;overflow:hidden;
  border:1px solid var(--hair);border-radius:var(--r);background:#EEE9DD}
.home-pick-photo img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .4s ease}
.home-pick-photo svg{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);height:150px}
.home-pick-carte:hover .home-pick-photo{border-color:var(--silver)}
.home-pick-carte:hover .home-pick-photo img,
.home-pick-carte a:focus-visible .home-pick-photo img{transform:scale(1.03)}
.home-pick-titre{margin:14px 0 0;font-family:"Playfair Display",Georgia,serif;font-size:var(--fs-22);
  font-weight:500;line-height:1.25;color:var(--ink);letter-spacing:0;
  display:inline;background-image:linear-gradient(var(--gold-ink),var(--gold-ink));
  background-repeat:no-repeat;background-position:0 100%;background-size:0 1px;
  transition:background-size .4s ease}
.home-pick-carte:hover .home-pick-titre,
.home-pick-carte a:focus-visible .home-pick-titre{background-size:100% 1px}
/* Le filet se dessine ; il ne saute pas. Respecte le reglage systeme. */
@media (prefers-reduced-motion:reduce){
  .home-pick-photo img{transition:none}
  .home-pick-titre{transition:none}
  .home-pick-carte:hover .home-pick-photo img{transform:none}
}
.home-pick-carte a:focus-visible .home-pick-photo{outline:2px solid var(--gold);outline-offset:3px}

/* ---------- Dernières annonces (accueil) ---------- */
.latest-home{padding-top:36px}
.latest-head{align-items:flex-end}
.latest-head p{max-width:520px;margin:6px 0 0;color:var(--mute);font-size:var(--fs-14);line-height:1.55}
.latest-grid{display:flex;overflow-x:auto;gap:18px;padding-bottom:8px;
  scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
.latest-grid::-webkit-scrollbar{height:0}
.latest-grid>.fiche{flex:0 0 300px;scroll-snap-align:start}
.latest-card{position:relative;background:rgba(255,255,255,.48);border:1px solid var(--hair);border-radius:0;overflow:hidden;cursor:pointer;transition:border-color .18s ease,background-color .18s ease}
.latest-card:hover{border-color:var(--silver);background:rgba(255,255,255,.72)}
.latest-img{position:relative;aspect-ratio:16/10;background:#EEE9DD;overflow:hidden}
.latest-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .25s ease}
.latest-card:hover .latest-img img{transform:scale(1.025)}
.latest-img .badge{position:absolute;top:12px;left:12px;z-index:2}
.latest-body{padding:17px 20px 18px}
.latest-body h3{font-family:"Playfair Display",Georgia,serif;font-size:var(--fs-22);line-height:1.15;color:var(--ink);margin:0 0 8px}
.latest-specs,.latest-source{font-family:Manrope,Inter,sans-serif;font-size:var(--fs-13);line-height:1.4;color:var(--mute)}
.latest-source{margin-top:6px}
.latest-country{display:inline-flex;align-items:center;gap:5px}
.latest-country img{display:block}
.latest-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:14px;font-family:Manrope,Inter,sans-serif}
.latest-foot strong{font-size:var(--fs-15);color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums}
.latest-action{position:relative;z-index:2;font-size:var(--fs-13);font-weight:700;color:var(--gold-ink)}
.latest-action:hover{color:var(--gold-ink-2)}

/* ---------- Histoire de la semaine (accueil) ---------- */
.home-story-section{padding-top:28px;padding-bottom:54px}
.home-story-card{position:relative;display:grid;grid-template-columns:minmax(300px,.92fr) minmax(0,1.08fr);overflow:hidden;
  min-height:314px;background:#0B1E33;color:#F5F1E6;border:1px solid rgba(195,155,94,.38);box-shadow:0 18px 50px rgba(11,30,51,.16)}
.home-story-card::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:linear-gradient(90deg,rgba(255,255,255,.06),transparent 18%,transparent 82%,rgba(195,155,94,.10))}
.home-story-media{position:relative;z-index:1;display:block;min-height:314px;background:#07121E;overflow:hidden}
.home-story-media img{width:100%;height:100%;object-fit:cover;object-position:center 58%;display:block;transition:transform .45s ease}
.home-story-card:hover .home-story-media img{transform:scale(1.035)}
.home-story-media svg{position:absolute;top:50%;left:50%;width:62%;height:auto;transform:translate(-50%,-50%);opacity:.9}
.home-story-media::after{display:none}
.home-story-badge{position:absolute;top:18px;left:18px;z-index:2;font-family:Manrope,Inter,sans-serif;font-weight:800;font-size:var(--fs-10);
  letter-spacing:.12em;text-transform:uppercase;color:#F5F1E6;background:rgba(20,22,26,.86);border:1px solid rgba(217,182,121,.42);padding:7px 10px}
.home-story-content{position:relative;z-index:2;display:flex;flex-direction:column;padding:34px 38px 32px;min-width:0;
  background-image:repeating-linear-gradient(90deg,transparent,transparent 47px,rgba(195,155,94,.20) 47px,rgba(195,155,94,.20) 48px)}
.home-story-kicker{font-family:Manrope,Inter,sans-serif;font-size:var(--fs-11);font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#D9B679}
.home-story-title{display:block;margin-top:11px;color:#F5F1E6;font-size:clamp(var(--fs-26),3.1vw,var(--fs-38));line-height:1.05;letter-spacing:0;max-width:650px}
.home-story-subject{display:block;margin-top:10px;font-family:Manrope,Inter,sans-serif;font-size:var(--fs-14);font-weight:700;color:#D9B679}
.home-story-excerpt{display:block;margin-top:12px;max-width:620px;font-family:Manrope,Inter,sans-serif;font-size:var(--fs-15);line-height:1.62;color:rgba(245,241,230,.78)}
.home-story-bottom{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-top:auto;padding-top:24px}
.home-story-meta{display:flex;align-items:center;flex-wrap:wrap;font-family:Manrope,Inter,sans-serif;font-size:var(--fs-12);font-weight:600;color:rgba(245,241,230,.68)}
.home-story-action{flex:0 0 auto}

.directory-tools{display:flex;align-items:center;gap:12px;margin-bottom:18px;flex-wrap:wrap}
.directory-search{flex:1;min-width:260px;max-width:520px}
.directory-search .searchbox{box-shadow:none;border:1px solid var(--hair);background:var(--white)}
.directory-tools .opt-list{margin:0}
.directory-country{display:flex;align-items:center;gap:8px;font-family:Manrope;font-size:var(--fs-13);color:var(--ink-soft)}
.directory-country select{min-width:170px;font-family:Manrope;font-size:var(--fs-14);padding:10px 34px 10px 12px;border:1px solid var(--hair);border-radius:var(--r-sm);background:#fff;color:var(--ink);outline:0}
.directory-country select:focus{border-color:var(--gold-ink)}
#accountMenu{display:none!important}
.boutiques-grid .art{display:flex;align-items:center;justify-content:center;padding:26px;background:#fff}
.boutique-logo-img{max-width:76%;max-height:66%;width:auto;height:auto;object-fit:contain}

/* ---------- Annuaire boutiques ---------- */
.boutiques-hdr{padding:44px 0 30px}
.boutiques-hero{display:grid;grid-template-columns:minmax(0,1fr) 230px;gap:28px;align-items:end}
.boutiques-hero h1{font-family:"Playfair Display",Georgia,serif;font-size:clamp(var(--fs-30),4vw,var(--fs-38));line-height:1.08}
.boutiques-hero p{color:var(--ink-soft);max-width:610px;margin:10px 0 0;font-size:var(--fs-15);line-height:1.55}
.boutiques-count{border-left:1px solid var(--hair-2);padding-left:22px;font-family:Manrope,Inter,sans-serif}
.boutiques-count strong{display:block;font-size:var(--fs-38);line-height:1;color:var(--ink);font-weight:700}
.boutiques-count span{display:block;margin-top:5px;color:var(--mute);font-size:var(--fs-13);font-weight:600}
.boutiques-page .directory-tools{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;margin-bottom:26px}
.boutiques-page .directory-search{max-width:none}
.boutiques-page .directory-search .searchbox{padding:10px 14px;background:var(--white)}
.boutiques-page .directory-search input{font-size:var(--fs-14)}
.boutique-directory-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.boutique-card{position:relative;display:grid;grid-template-columns:104px minmax(0,1fr);gap:18px;min-height:174px;padding:18px;
  background:rgba(255,255,255,.62);border:1px solid var(--hair);color:var(--ink);transition:border-color .18s ease,background-color .18s ease,transform .18s ease}
.boutique-card:hover{border-color:var(--gold);background:rgba(255,255,255,.88);transform:translateY(-2px)}
.boutique-card:focus-visible{outline:2px solid var(--gold-ink);outline-offset:3px}
.boutique-card-logo{height:104px;align-self:start;display:flex;align-items:center;justify-content:center;background:var(--white);border:1px solid var(--hair);
  padding:16px;overflow:hidden}
.boutique-card-logo .boutique-logo-img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;transform:none}
.boutique-logo-initials{font-family:"Playfair Display",Georgia,serif;font-size:var(--fs-26);line-height:1;color:var(--ink);font-weight:500}
.boutique-card-main{display:flex;flex-direction:column;min-width:0}
.boutique-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.boutique-card-name{display:block;font-family:"Playfair Display",Georgia,serif;font-size:var(--fs-22);font-weight:500;line-height:1.12;color:var(--ink)}
.boutique-card-location{display:flex;align-items:center;gap:5px;margin-top:5px;font-family:Manrope,Inter,sans-serif;font-size:var(--fs-12);line-height:1.35;color:var(--mute)}
.boutique-card-count{flex:0 0 auto;text-align:right;font-family:Manrope,Inter,sans-serif;color:var(--mute);font-size:var(--fs-11);font-weight:700;text-transform:uppercase;letter-spacing:.08em}
.boutique-card-count strong{display:block;color:var(--ink);font-size:var(--fs-22);line-height:1;font-weight:700;letter-spacing:0;text-transform:none}
.boutique-card-count span{display:block;margin-top:4px}
.boutique-card-desc{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-top:13px;max-width:440px;
  font-family:Manrope,Inter,sans-serif;color:var(--mute);font-size:var(--fs-13);line-height:1.48}
.boutique-card-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:auto;padding-top:16px;font-family:Manrope,Inter,sans-serif}
.boutique-card-domain{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink-soft);font-size:var(--fs-12);font-weight:600}
.boutique-card-link{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;color:var(--gold-ink);font-size:var(--fs-13);font-weight:800}
.boutique-card-link::after{content:"→";font-size:var(--fs-15);line-height:1;transition:transform .18s ease}
.boutique-card:hover .boutique-card-link::after{transform:translateX(3px)}

/* popular model cards */
.pop-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.pop{position:relative;border:1px solid var(--hair);border-radius:var(--r);overflow:hidden;background:var(--white);transition:.18s;cursor:pointer}
.pop:hover{border-color:var(--silver);box-shadow:var(--shadow);transform:translateY(-2px)}
.pop-link{display:block;height:100%}
.pop .art{height:190px;display:flex;align-items:center;justify-content:center;background:linear-gradient(160deg,#F0F0EC,#E7E7E2)}
.pop .art svg{height:132px}
.pop .body{padding:16px 18px;display:flex;align-items:center;justify-content:space-between}
.pop .body h3{font-size:var(--fs-16)}
.pop .body .cnt{font-family:Manrope;font-size:var(--fs-12);color:var(--mute);font-weight:600}
.pop .body .from{font-family:Manrope;font-weight:700;font-size:var(--fs-14);text-align:right}
.pop .body .from small{display:block;font-weight:600;color:var(--mute);font-size:var(--fs-10);letter-spacing:.05em;text-transform:uppercase}

/* listing grid */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:38px 26px}
/* La carte n'est plus un conteneur : ni fond, ni bordure, ni ombre. La photo
   tient le cadre, la typographie tient le reste, et le blanc de la grille
   separe. Seule l'image garde un filet : mesure faite sur les 9 boutiques,
   Cezame et Berenger photographient sur blanc pur (255,255,255 et 254,254,254)
   et leurs 36 annonces se dissoudraient dans le fond sans lui. */
.card{position:relative;background:transparent;border:0;border-radius:0;cursor:pointer;display:flex;flex-direction:column}
.card:hover .art{border-color:var(--silver)}
.card-cover-link{position:absolute;inset:0;z-index:2}
.card-cover-link span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.card .art{position:relative;width:100%;aspect-ratio:4/3;flex:none;background:#FFFFFF;overflow:hidden;
  border:1px solid var(--hair);transition:border-color .2s ease}
.card .art svg{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);height:168px}
.card .art img,.opp .art img{transform:scale(1.04);transform-origin:center}
.card .badges{position:absolute;top:10px;left:10px;display:flex;flex-direction:column;gap:6px;align-items:flex-start;z-index:3}
/* Separateur de metadonnees : un filet vertical fin plutot qu'un point median.
   Le point median assemblant des chaines ("A · B · C") est un marqueur
   d'interface generee ; le filet est un dispositif structurel, il se regle
   depuis la feuille de style et suit la couleur du texte environnant. */
.metasep::before{content:"";display:inline-block;width:1px;height:.8em;
  background:currentColor;opacity:.32;margin:0 9px;vertical-align:-.06em}

.badge{font-family:Manrope;font-weight:700;font-size:var(--fs-10);letter-spacing:.03em;padding:4px 9px;border-radius:var(--r-sm);background:var(--white);color:var(--ink);border:1px solid var(--hair-2)}
.badge.new{background:var(--gold-ink);color:#fff;border-color:transparent}
.badge.drop{background:var(--down);color:#fff;border-color:transparent}
.badge.set{background:var(--ink);color:var(--paper);border-color:transparent}
.badge.vrf{background:#fff;color:var(--gold-ink);border-color:var(--gold-ink)}
.heart,.card-share{position:absolute;top:9px;right:9px;width:34px;height:34px;border-radius:var(--r-sm);background:rgba(255,255,255,.9);
  display:flex;align-items:center;justify-content:center;border:1px solid var(--hair);transition:.15s;z-index:3}
.heart:hover,.card-share:hover{background:#fff;border-color:var(--silver)}
.heart svg,.card-share svg{width:18px;height:18px;color:var(--ink-soft)}
.heart.on svg{color:var(--up);fill:var(--up)}
.card-share{right:51px}
.card .body{padding:15px 0 0;display:flex;flex-direction:column;gap:4px;flex:1}
.card .brand{font-family:Manrope;font-weight:700;font-size:var(--fs-11);letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.card .model{font-size:var(--fs-15);font-weight:600;line-height:1.25}
.card .ref{font-family:Manrope;font-size:var(--fs-12);color:var(--ink-soft)}
.card .meta{font-family:Manrope;font-size:var(--fs-11);color:var(--mute);margin-top:2px;display:flex;align-items:center;flex-wrap:wrap;gap:4px}
.card .meta .ctry{display:inline-flex;align-items:center;gap:5px}
.card .meta .ctry img{display:block}
.mini-specs{display:flex;align-items:center;gap:0;flex-wrap:wrap;margin-top:7px}
.mini-specs span{font-family:Manrope;font-size:var(--fs-11);font-weight:600;color:var(--ink-soft);
  background:transparent;border:0;border-radius:0;padding:0}
.mini-specs span+span::before{content:"";display:inline-block;width:1px;height:.8em;
  background:currentColor;opacity:.32;margin:0 9px;vertical-align:-.06em}
.card .price{margin-top:auto;padding-top:10px;display:flex;align-items:flex-end;justify-content:space-between;gap:8px;font-variant-numeric:tabular-nums}
.card .price .big{font-family:Manrope;font-weight:700;font-size:var(--fs-18);letter-spacing:-.01em}
.card .price .orig{font-family:Manrope;font-size:var(--fs-11);color:var(--mute)}
.card .foot{display:flex;align-items:center;justify-content:space-between;margin-top:9px}
.card .src{font-family:Manrope;font-size:var(--fs-11);color:var(--ink-soft);display:flex;align-items:center;gap:5px}
.card .foot .src{position:relative;z-index:3}
.card .flag{font-size:var(--fs-13)}
.pdiff{font-family:Manrope;font-weight:700;font-size:var(--fs-11);padding:3px 7px;border-radius:var(--r-sm)}
.pdiff.under{color:var(--down);background:rgba(30,94,63,.09)}
.pdiff.over{color:var(--up);background:rgba(140,47,47,.08)}
.pdiff.fair{color:var(--ink-soft);background:var(--paper-2)}

/* opportunities */
.opp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.opp{border:1px solid var(--hair);border-radius:var(--r);background:var(--white);padding:18px;display:flex;gap:16px;align-items:center;cursor:pointer;transition:.18s}
.opp:hover{border-color:var(--silver);box-shadow:var(--shadow)}
.opp .art{width:78px;height:92px;flex:0 0 auto;border-radius:var(--r-sm);background:linear-gradient(160deg,#F1F1ED,#E6E6E1);display:flex;align-items:center;justify-content:center}
.opp .art svg{height:80px}
.opp h4{font-size:var(--fs-14)}
.opp .ref{font-family:Manrope;font-size:var(--fs-11);color:var(--mute)}
.opp .rows{margin-top:8px;font-family:Manrope;font-size:var(--fs-12)}
.opp .rows div{display:flex;justify-content:space-between;gap:12px;padding:1px 0}
.opp .rows .demand{font-weight:700}
.opp .rows .gap{color:var(--down);font-weight:700}

/* brands strip */
.brands-strip{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
/* ---------- Couche technique : Space Mono ----------
   Trois polices, trois roles, sans recouvrement :
     Playfair Display  les titres, l'editorial
     Manrope           la prose, les libelles, les boutons
     Space Mono        tout ce qui se lit comme une donnee — chiffres, prix,
                       references, comptages, filtres
   La regle pour arbitrer : si la valeur vient de la base ou d'un calcul, elle
   est en mono ; si elle vient d'un redacteur, elle ne l'est pas. */

/* Chiffres du hero. Le troisieme est une phrase (« Aucune commission »), pas
   une donnee : il reste en Manrope, d'ou le :not(.txt). */
.home-stats .n:not(.txt){font-family:var(--mono);font-weight:700;letter-spacing:-.01em}

/* Prix, references, comptages. .hero-model-count en est sorti le 02/10/2026 :
   il affiche « Découvrir » et non plus un prix, et les chiffres tabulaires du
   mono elargissaient les lettres. */
.selection-compte,
.price .big,
.latest-foot strong,
.ref{font-family:var(--mono);font-variant-numeric:tabular-nums}
.card .ref,.latest-card .ref{font-family:var(--mono);letter-spacing:-.02em}
.home-selections .selection-compte{font-family:var(--mono);letter-spacing:.06em}

/* Ligne de caracteristiques des cartes annonce */
.latest-card .latest-specs{font-family:var(--mono);font-size:var(--fs-11);letter-spacing:-.01em}

/* Panneau de filtres : libelles en capitales et champs de saisie. C'est la
   que l'utilisateur tape une reference, le mono l'y aide. */
.fgroup > .lbl{font-family:var(--mono);font-weight:700;letter-spacing:.06em}
.frow input,.fgroup select,.fgroup input{font-family:var(--mono);font-size:var(--fs-12)}

/* Selections editoriales de l'accueil : trois cartes d'appel, photo pleine,
   titre et bouton. Le catalogue complet est sur /selections/**, pas ici. */
.selection-cartes{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:22px}
.selection-carte{position:relative;display:block;overflow:hidden;border-radius:6px;aspect-ratio:1/1;
  text-decoration:none;color:#fff;background:#0B1E33;isolation:isolate}
.selection-fond{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
  transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.selection-carte:hover .selection-fond{transform:scale(1.06)}
/* Le voile garantit la lisibilite quelle que soit la photo du vendeur : on ne
   controle pas ce qui arrive des boutiques, le texte doit tenir dessus. */
.selection-voile{position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(11,30,51,.10) 0%,rgba(11,30,51,.34) 46%,rgba(11,30,51,.88) 100%)}
.selection-corps{position:absolute;left:0;right:0;bottom:0;z-index:2;display:flex;flex-direction:column;
  align-items:flex-start;gap:7px;padding:22px 20px 20px}
.selection-compte{font-family:Manrope,sans-serif;font-size:var(--fs-11);letter-spacing:.09em;
  text-transform:uppercase;color:#C39B5E}
.selection-titre{font-size:var(--fs-22);line-height:1.15;color:#fff}
.selection-accroche{font-family:Manrope,sans-serif;font-size:var(--fs-12);line-height:1.5;color:rgba(255,255,255,.78)}
.selection-bouton{margin-top:6px;display:inline-flex;align-items:center;gap:7px;padding:8px 17px;border-radius:999px;
  border:1px solid rgba(255,255,255,.55);font-family:Manrope,sans-serif;font-size:var(--fs-12);font-weight:600;
  color:#fff;transition:background .2s,border-color .2s,color .2s}
.selection-bouton::after{content:"\2192"}
.selection-carte:hover .selection-bouton{background:#fff;border-color:#fff;color:#0B1E33}
.selection-carte:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
/* Les liens de marques ne sont plus des tuiles : ils gardent leur role de
   chemin vers les pages /marques/**, sans peser visuellement. */
.seo-link-inline{display:flex;flex-wrap:wrap;gap:8px 0;align-items:center}
.seo-link-inline a{font-family:Manrope,sans-serif;font-size:var(--fs-13);color:var(--mute);text-decoration:none;padding:0 14px;border-left:1px solid var(--hair)}
.seo-link-inline a:first-child{padding-left:0;border-left:0}
.seo-link-inline a:hover{color:var(--gold);text-decoration:underline}
@media(max-width:900px){
  .selection-cartes{grid-template-columns:1fr;gap:14px}
  .selection-carte{aspect-ratio:16/10}
  .selection-titre{font-size:var(--fs-18)}
}
.brand-tile{border:1px solid var(--hair);border-radius:var(--r);background:var(--white);padding:20px 12px;text-align:center;cursor:pointer;transition:.15s}
.brand-tile:hover{border-color:var(--silver);background:var(--paper-2)}
.brand-tile .bn{font-family:"Playfair Display",serif;font-size:var(--fs-16)}
.brand-tile .bc{font-family:Manrope;font-size:var(--fs-11);color:var(--mute);margin-top:3px}

/* annuaire complet des marques (/marques/) */
.marques-directory-search{margin-bottom:24px}
.marques-directory-search input{width:100%;max-width:420px;font-family:Manrope,sans-serif;font-size:var(--fs-14);
  border:1px solid var(--hair-2);border-radius:var(--r-btn);padding:12px 18px;background:var(--white);color:var(--ink)}
.marques-directory-search input:focus{outline:2px solid var(--gold-ink);outline-offset:1px}
.marques-directory-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.marque-tile{border:1px solid var(--hair);border-radius:var(--r);background:var(--white);padding:18px 12px;
  text-align:center;cursor:pointer;transition:.15s;display:flex;flex-direction:column;align-items:center;gap:8px}
.marque-tile:hover{border-color:var(--silver);background:var(--paper-2);transform:translateY(-1px)}
.marque-tile-logo{width:76px;height:76px;border-radius:var(--r-round);background:var(--paper-2);border:1px solid var(--hair);
  display:flex;align-items:center;justify-content:center;overflow:hidden;flex:0 0 auto}
.marque-tile-logo img{width:100%;height:100%;object-fit:contain;padding:6px}
.marque-tile-initial{font-family:"Playfair Display",serif;font-size:var(--fs-26);color:var(--ink-soft);width:100%;height:100%;align-items:center;justify-content:center}
.marque-tile-name{font-family:"Playfair Display",serif;font-size:var(--fs-14);line-height:1.25}
.marque-tile-count{font-family:Manrope,sans-serif;font-size:var(--fs-10);color:var(--mute)}

/* CTA blocks */
.cta{border-radius:var(--r);padding:22px;display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.cta.story{padding:14px;flex-wrap:nowrap;align-items:center;gap:22px}
.cta.alert{background:linear-gradient(120deg,#F8F6F0,#F2ECDD);border:1px solid rgba(195,155,94,.3);color:var(--ink)}
.cta.alert .btn-ondark{background:#0B1E33;color:#F5F1E6;border:2px solid #D9B679}
.cta.alert .btn-ondark:hover{background:#123049}
.cta.pro{background:var(--white);border:1px solid var(--hair-2)}
.cta.muted{background:var(--paper-2);border:1px solid var(--hair-2)}
.cta.story{background:var(--paper-2);border:1px solid var(--hair-2)}
.cta h3{font-family:"Playfair Display",serif;font-size:var(--fs-26)}
.cta .txt{flex:1;min-width:260px}
.cta .cover{width:200px;height:200px;border-radius:var(--r);object-fit:cover;object-position:center 75%;flex:0 0 auto}
.cta.story .cover{width:min(36vw,390px);height:220px;border-radius:var(--r)}
.cta.alert .sub{color:var(--ink-soft);margin-top:8px}
.cta.pro .sub{color:var(--ink-soft);margin-top:8px}
.cta.muted .sub{color:var(--ink-soft);margin-top:8px}
.cta.story .eyebrow{color:var(--gold-ink)}
.cta.story h3{color:var(--ink);margin-top:8px;font-size:var(--fs-26)}
.cta.story .divider{color:var(--gold-ink);margin:12px 0;letter-spacing:.3em;font-size:var(--fs-13)}
.cta.story .sub{color:var(--ink-soft);margin-top:4px;max-width:620px;line-height:1.45}
.cta.story .storylink{display:inline-block;margin-top:12px;color:var(--gold-ink);font-weight:700;font-size:var(--fs-14);text-decoration:none;border-bottom:1px solid rgba(138,106,47,.35);padding-bottom:3px;cursor:pointer}
.cta.story .storylink:hover{color:var(--gold-ink-2);border-color:var(--gold-ink-2)}
.cta.story .acts{align-items:center;justify-content:flex-end;flex:0 0 auto}
.cta.story .acts .btn{background:var(--ink);color:var(--paper);padding:11px 18px;border-radius:var(--r-btn)}
.cta .slogan{font-family:"Playfair Display",serif;font-style:italic;font-weight:400;color:var(--ink-soft);margin-top:10px;padding-left:14px;border-left:2px solid var(--gold);font-size:var(--fs-16);letter-spacing:.01em}
.cta .acts{display:flex;gap:12px;flex-wrap:wrap}
.cta.muted .acts .btn{background:var(--ink);color:var(--paper)}
.btn-ondark{background:#EDEFEC;color:var(--accent-ink)}
.btn-ondark:hover{background:#fff}
.btn-ondark.ghost{background:transparent;color:#EDEFEC;border:1px solid rgba(255,255,255,.35)}
.story-magnify-btn{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;gap:10px;
  background:rgba(20,22,26,.96);color:#F5F1E6;border:1px solid rgba(217,182,121,.86);padding:13px 22px;box-shadow:none;
  transition:transform .18s ease,border-color .18s ease,background-color .18s ease}
.story-magnify-btn>span{position:relative;z-index:2;color:#F5F1E6;transition:transform .22s ease}
.story-magnify-btn::before{content:"";position:absolute;left:18px;top:50%;z-index:1;width:42px;height:42px;border-radius:50%;
  border:1px solid rgba(217,182,121,.55);background:radial-gradient(circle at 34% 30%,rgba(255,255,255,.28),rgba(217,182,121,.10) 46%,rgba(217,182,121,0) 72%);
  opacity:0;transform:translate(-45%,-50%) scale(.42);transition:left .34s cubic-bezier(.22,.61,.36,1),opacity .22s ease,transform .34s cubic-bezier(.22,.61,.36,1)}
.story-magnify-icon{position:relative;z-index:2;color:#D9B679;transition:transform .24s cubic-bezier(.22,.61,.36,1)}
.story-magnify-btn:hover{background:#1F2328;border-color:#D9B679;transform:translateY(-1px)}
.story-magnify-btn:hover::before{left:calc(100% - 30px);opacity:1;transform:translate(-50%,-50%) scale(1)}
.story-magnify-btn:hover>span{transform:translateX(-2px)}
.story-magnify-btn:hover .story-magnify-icon{transform:translateX(2px) scale(1.16) rotate(-8deg)}

/* sponsored */
.sponsored{border:1px dashed var(--hair-2);border-radius:var(--r);background:var(--paper-2);padding:16px 18px;display:flex;align-items:center;gap:16px}
.sponsored .tag{font-family:Manrope;font-weight:700;font-size:var(--fs-10);letter-spacing:.14em;text-transform:uppercase;color:var(--mute);border:1px solid var(--hair-2);padding:3px 7px;border-radius:var(--r-sm);background:#fff}
.sponsored .sp-body{flex:1}
.sponsored h4{font-size:var(--fs-15)}
.sponsored p{margin:2px 0 0;font-size:var(--fs-13);color:var(--ink-soft)}

/* ---------- Search page ---------- */
.searchtop{background-color:#0B1E33;background-repeat:repeat;background-position:left top;background-size:48px 100%;
  background-image:linear-gradient(90deg,transparent,transparent 47px,rgba(195,155,94,.32) 47px,rgba(195,155,94,.32) 48px);padding:24px 0}.searchtop .searchbox{max-width:640px;margin:0 auto;box-shadow:none}
.searchtop .ac{margin:0 auto}
.results-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:24px 0 24px}
.results-head h1{font-size:var(--fs-26);font-family:"Playfair Display",serif}
.results-head .count{font-family:Manrope;color:var(--mute);font-weight:600;font-size:var(--fs-14)}
.toolbar{display:flex;align-items:center;gap:10px}
.viewtoggle{display:flex;border:1px solid var(--hair-2);border-radius:var(--r-sm);overflow:hidden}
.viewtoggle button{width:38px;height:36px;display:flex;align-items:center;justify-content:center;color:var(--mute)}
.viewtoggle button.on{background:var(--ink);color:var(--paper)}
.layout{display:grid;grid-template-columns:262px 1fr;gap:26px;align-items:start;padding-bottom:60px}
.filters{position:sticky;top:80px;border:1px solid var(--hair);border-radius:var(--r);background:var(--white);padding:6px 0;max-height:calc(100vh - 100px);overflow:auto}
.filters .fhead{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--hair)}
.filters .fhead h3{font-family:Manrope;font-size:var(--fs-14);font-weight:700}
.filters .clr{font-family:Manrope;font-size:var(--fs-12);color:var(--gold-ink);font-weight:600}
.fgroup{border-bottom:1px solid var(--hair);padding:14px 18px}
.fgroup:last-child{border-bottom:0}
.fgroup > .lbl{font-family:Manrope;font-weight:700;font-size:var(--fs-11);letter-spacing:.09em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:10px;display:flex;justify-content:space-between;cursor:pointer}
.frow{display:flex;gap:8px}
.frow input,.fgroup select{width:100%;font-family:Manrope;font-size:var(--fs-13);padding:8px 10px;border:1px solid var(--hair-2);border-radius:var(--r-sm);background:#fff;color:var(--ink);outline:0}
.fgroup select:focus,.frow input:focus{border-color:var(--gold-ink)}
.checks{display:flex;flex-direction:column;gap:8px}
.chk{display:flex;align-items:center;gap:9px;font-family:Manrope;font-size:var(--fs-13);color:var(--ink-soft);cursor:pointer}
.chk input{width:16px;height:16px;accent-color:var(--gold-ink)}
.opt-list{display:flex;flex-wrap:wrap;gap:7px}
.opt{font-family:Manrope;font-size:var(--fs-12);font-weight:600;padding:6px 10px;border:1px solid var(--hair-2);border-radius:var(--r-btn);color:var(--ink-soft);cursor:pointer}
.opt.on{background:var(--gold-ink);color:#fff;border-color:var(--gold-ink)}
.mobile-filter-btn{display:none}

/* list mode */
/* Vue liste : meme principe que la grille, applique a une ligne. La photo
   garde son filet, le texte n'a plus de caisson, et c'est le blanc entre
   les lignes qui separe -- comme une liste de lots de catalogue. */
.grid.list{grid-template-columns:1fr;gap:26px}
.grid.list .card{flex-direction:row;min-height:250px}
.grid.list.boutiques-grid .card{min-height:220px}
.grid.list .card .art{position:absolute;top:0;left:0;bottom:0;width:320px;height:auto;aspect-ratio:auto;border:1px solid var(--hair)}
.grid.list .card .art img{width:100%;height:100%}
.grid.list .card .art svg{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);height:130px}
.grid.list .card .body{margin-left:348px;padding:2px 0 0}

/* skeleton */
.sk{border:1px solid var(--hair);border-radius:var(--r);background:var(--white);overflow:hidden}
.sk .a{height:190px;background:linear-gradient(90deg,#eee,#f4f4f0,#eee);background-size:200% 100%;animation:sh 1.2s infinite}
.sk .b{padding:14px 15px}
.sk .l{height:11px;border-radius:var(--r-sm);background:#ececE8;margin-bottom:9px;animation:sh 1.2s infinite;background-image:linear-gradient(90deg,#ececE8,#f5f5f1,#ececE8);background-size:200% 100%}
.sk .l.s{width:55%}.sk .l.m{width:80%}
@keyframes sh{0%{background-position:200% 0}100%{background-position:-200% 0}}

.empty{border:1px dashed var(--hair-2);border-radius:var(--r);padding:60px 24px;text-align:center;background:var(--white)}
.empty h3{font-family:"Playfair Display",serif;font-size:var(--fs-22);margin-bottom:8px}
.empty p{color:var(--ink-soft);max-width:420px;margin:0 auto 18px}
.loadmore{display:flex;justify-content:center;margin-top:26px}
.pagination{display:flex;justify-content:center;align-items:center;gap:6px;margin-top:32px;flex-wrap:wrap}
.pg-btn{min-width:38px;height:38px;padding:0 10px;border-radius:var(--r-sm);border:1px solid var(--hair-2);background:var(--white);color:var(--ink-soft);font-family:Manrope,sans-serif;font-weight:600;font-size:var(--fs-14);cursor:pointer;transition:.15s}
.pg-btn:hover:not(:disabled){border-color:var(--silver);color:var(--ink)}
.pg-btn.on{background:var(--gold-ink);border-color:var(--gold-ink);color:#fff}
.pg-btn:disabled{opacity:.4;cursor:default}
.pg-ellipsis{color:var(--mute);font-size:var(--fs-13);padding:0 2px}

/* ---------- Detail panel ---------- */
.overlay{position:fixed;inset:0;background:rgba(20,22,26,.42);backdrop-filter:blur(2px);z-index:100;opacity:0;pointer-events:none;transition:.25s}
.overlay.open{opacity:1;pointer-events:auto}
.panel{position:fixed;top:50%;left:50%;height:auto;max-height:88vh;width:min(920px,92vw);background:var(--paper);z-index:101;
  border-radius:var(--r);transform:translate(-50%,-48%) scale(.97);opacity:0;pointer-events:none;
  transition:transform .3s cubic-bezier(.4,0,.2,1),opacity .25s;overflow:auto;box-shadow:var(--shadow-lg)}
.panel.open{transform:translate(-50%,-50%) scale(1);opacity:1;pointer-events:auto}
.panel.panel-page{position:static;transform:none;opacity:1;pointer-events:auto;
  width:100%;margin:0 0 28px;max-height:none;box-shadow:var(--shadow)}
.panel .ph{position:sticky;top:0;background:rgba(245,245,242,.9);backdrop-filter:blur(8px);z-index:5;display:flex;align-items:center;gap:12px;padding:14px 20px;border-bottom:1px solid var(--hair)}
.panel .ph .eyebrow{margin:0}
.panel .ph .x{width:36px;height:36px;border-radius:var(--r-sm);border:1px solid var(--hair-2);background:#fff;display:flex;align-items:center;justify-content:center}
.pgrid{display:grid;grid-template-columns:1.3fr 1fr;gap:32px;padding:22px}
.pgallery-col{align-self:start}
.pgallery-col .pgallery{position:relative;width:100%;height:0;padding-bottom:75%;background:#FFFFFF;border:1px solid var(--hair);cursor:zoom-in;border-radius:var(--r);overflow:hidden}
.pgallery .main{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.pgallery .main svg{height:250px}
.thumbs{display:flex;gap:8px;padding:12px 0;overflow:auto}
.thumb{width:64px;height:64px;flex:0 0 auto;border-radius:var(--r-sm);border:1px solid var(--hair-2);background:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer}
.thumb svg{height:52px}
.thumb.on{border-color:var(--gold-ink)}
.pinfo-col h2{font-family:"Playfair Display",serif;font-size:var(--fs-26);line-height:1.15}
.pinfo-col .pref{font-family:Manrope;color:var(--mute);font-weight:600;font-size:var(--fs-13);margin-top:4px;display:flex;align-items:center;flex-wrap:wrap;gap:6px}
.pinfo-col .pref .ctry{display:inline-flex;align-items:center;gap:5px}
.pinfo-col .pref .ctry img{display:block}
.pinfo-col .btns{display:flex;gap:10px}
.pinfo-col .btns .btn{flex:1;justify-content:center}
.pinfo-col .btns .btn.icon-action{flex:0 0 auto;padding:11px 14px}
.pinfo-col .btns .btns-icons{display:flex;gap:10px;flex:0 0 auto}
.pinfo-col .btns .panel-main-btn{flex:2}
.pinfo-col .note{font-size:var(--fs-11);color:var(--mute);margin:10px 0 16px}
.pprice{display:flex;align-items:baseline;gap:12px;margin:14px 0}
.pprice .big{font-family:Manrope;font-weight:700;font-size:var(--fs-30);letter-spacing:-.02em}
.pprice .orig{font-family:Manrope;color:var(--mute);font-size:var(--fs-14)}
.trust-strip{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:-2px 0 14px}
.trust-strip span{font-family:Manrope;font-size:var(--fs-12);font-weight:700;color:var(--ink-soft);background:#fff;border:1px solid var(--hair);border-radius:var(--r-btn);padding:6px 10px}
.trust-strip b{color:var(--ink)}
.estim{border:1px solid var(--hair);background:var(--white);border-radius:var(--r);padding:16px;margin:16px 0}
.estim .row{display:flex;justify-content:space-between;font-family:Manrope;font-size:var(--fs-13);padding:5px 0}
.estim .row b{font-weight:700}
.soon{font-family:Manrope;font-size:var(--fs-10);font-weight:700;letter-spacing:.06em;background:var(--paper-2);color:var(--mute);padding:2px 6px;border-radius:var(--r-sm);text-transform:uppercase}

/* ---------- Brand / Model pages ---------- */
.hdrpage{background:var(--white);border-bottom:1px solid var(--hair);padding:40px 0}
.pagebackbtn{width:36px;height:36px;border-radius:var(--r-sm);border:1px solid var(--hair-2);background:#fff;display:flex;align-items:center;justify-content:center;margin-bottom:20px;cursor:pointer}
.pagebackbtn:hover{background:var(--paper-2)}
.brandhero{display:flex;gap:30px;align-items:center;flex-wrap:wrap}
.brandhero .em{width:96px;height:96px;border-radius:var(--r);background:var(--paper-2);border:1px solid var(--hair);color:var(--ink-soft);display:flex;align-items:center;justify-content:center;font-family:"Playfair Display",serif;font-size:var(--fs-38);flex:0 0 auto;overflow:hidden}
.brandhero .em img{width:100%;height:100%;object-fit:contain;padding:14px}
.brandhero .em-initial{width:100%;height:100%;align-items:center;justify-content:center}
.brandhero h1{font-family:"Playfair Display",serif;font-size:var(--fs-38)}
.brandhero p{color:var(--ink-soft);max-width:560px;margin:8px 0 0}
.kpis{display:flex;gap:34px;margin-top:20px;flex-wrap:wrap}
.kpi .n{font-family:Manrope;font-weight:700;font-size:var(--fs-26)}
.kpi .l{font-family:Manrope;font-size:var(--fs-11);letter-spacing:.08em;text-transform:uppercase;color:var(--mute);font-weight:700}
.chart{border:1px solid var(--hair);border-radius:var(--r);background:var(--white);padding:20px}
.reftable{width:100%;border-collapse:collapse;font-family:Manrope;font-size:var(--fs-13);font-variant-numeric:tabular-nums}
.reftable th,.reftable td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--hair)}
.reftable th{font-size:var(--fs-11);letter-spacing:.06em;text-transform:uppercase;color:var(--mute);font-weight:700}
.reftable td.num{font-weight:700;text-align:right}
.reftable tr{cursor:pointer}
.reftable tbody tr:hover{background:var(--paper-2)}

/* ---------- Favorites / Alerts / Pro / Static ---------- */
.pagepad{padding-top:36px;padding-bottom:70px}
.pagehead{margin-bottom:24px}
.pagehead h1{font-family:"Playfair Display",serif;font-size:var(--fs-30)}
.pagehead p{color:var(--ink-soft);margin-top:6px}
.alert-card{border:1px solid var(--hair);background:var(--white);border-radius:var(--r);padding:18px 20px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.alert-card .info{flex:1;min-width:200px}
.alert-card h4{font-size:var(--fs-16)}
.alert-card .crit{font-family:Manrope;font-size:var(--fs-12);color:var(--ink-soft);margin-top:4px}
.pill{font-family:Manrope;font-weight:700;font-size:var(--fs-11);padding:3px 9px;border-radius:var(--r-btn);background:var(--paper-2);color:var(--ink-soft)}
.pill.live{background:rgba(30,94,63,.1);color:var(--down)}
.pill.paused{background:rgba(140,47,47,.09);color:var(--up)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.field label{font-family:Manrope;font-weight:700;font-size:var(--fs-11);letter-spacing:.07em;text-transform:uppercase;color:var(--ink-soft);display:block;margin-bottom:6px}
.field input,.field select{width:100%;font-family:Manrope;font-size:var(--fs-14);padding:10px 12px;border:1px solid var(--hair-2);border-radius:var(--r-sm);background:#fff;outline:0}
.field input:focus,.field select:focus{border-color:var(--gold-ink)}
.dash-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.dash-kpi{border:1px solid var(--hair);background:var(--white);border-radius:var(--r);padding:18px}
.dash-kpi .n{font-family:Manrope;font-weight:700;font-size:var(--fs-26)}
.dash-kpi .l{font-family:Manrope;font-size:var(--fs-11);letter-spacing:.07em;text-transform:uppercase;color:var(--mute);font-weight:700;margin-bottom:6px}
.dash-kpi .d{font-family:Manrope;font-size:var(--fs-11);font-weight:700;margin-top:6px}
.dash-kpi .d.up{color:var(--down)} .dash-kpi .d.dn{color:var(--up)}
.panelbox{border:1px solid var(--hair);background:var(--white);border-radius:var(--r);padding:20px}
.bar{display:flex;align-items:center;gap:12px;margin:10px 0;font-family:Manrope;font-size:var(--fs-13)}
.bar .track{flex:1;height:8px;background:var(--paper-2);border-radius:var(--r-sm);overflow:hidden}
.bar .fill{height:100%;background:var(--gold-ink);border-radius:var(--r-sm)}
.prose{max-width:720px}
.prose h2{font-family:"Playfair Display",serif;font-size:var(--fs-26);margin:28px 0 10px}
.prose p{color:var(--ink-soft);margin:10px 0}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:8px}
.step{border:1px solid var(--hair);border-radius:var(--r);background:var(--white);padding:22px}
.step .no{font-family:"Playfair Display",serif;font-size:var(--fs-30);color:var(--gold-ink)}
.step h4{margin-top:8px;font-size:var(--fs-16)}
.step p{color:var(--ink-soft);font-size:var(--fs-13);margin-top:6px}

/* ---------- Info pages ---------- */
.info-page{padding-bottom:76px}
.info-page footer{margin-top:0}
.info-hero{background:var(--white);border-bottom:1px solid var(--hair);padding:68px 0 96px}
.info-hero-inner{max-width:820px}
.info-hero-centered{text-align:center;margin:0 auto}
.info-hero .eyebrow{margin-bottom:14px}
.info-hero h1{font-family:"Playfair Display",Georgia,serif;font-size:var(--fs-56);line-height:1.02;font-weight:600;color:var(--ink)}
.info-hero p{max-width:720px;margin:18px auto 0;color:var(--ink-soft);font-size:var(--fs-18)}
.info-hero-actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:28px}
.info-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:0;background:#0B1E33;color:#F5F1E6;border:1px solid rgba(195,155,94,.42);box-shadow:var(--shadow);padding:0}
.info-stats-overlap{margin-top:-44px;position:relative;z-index:2}
.info-stat{min-height:132px;padding:26px 28px;display:grid;grid-template-columns:auto 1fr;column-gap:18px;align-items:center;border-right:1px solid rgba(195,155,94,.32)}
.info-stat:last-child{border-right:0}
.info-stat-rule{width:3px;height:54px;background:var(--gold);display:block}
.info-stat strong{display:block;font-family:Manrope,Inter,sans-serif;font-size:var(--fs-30);line-height:1;font-weight:800;color:#fff}
.info-stat span:last-child{display:block;margin-top:6px;color:#C9CDCB;font-family:Manrope,Inter,sans-serif;font-size:var(--fs-14);line-height:1.45}
.info-section{padding-top:70px}
.info-section-head{max-width:680px;margin-bottom:24px}
.info-section-head.compact{margin-bottom:20px}
.info-section-head .eyebrow{margin-bottom:8px}
.info-section-head h2,.info-copy h2,.info-mission h2,.info-feature-copy h2,.info-contact-aside h2{font-family:"Playfair Display",Georgia,serif;font-size:var(--fs-38);line-height:1.08;font-weight:600}
.info-step-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.info-step{background:var(--white);border:1px solid var(--hair);border-radius:var(--r);padding:22px;min-height:220px}
.info-step-no{font-family:Manrope,Inter,sans-serif;font-weight:800;color:var(--gold-ink);font-size:var(--fs-13);letter-spacing:.08em;margin-bottom:44px}
.info-step h3{font-size:var(--fs-18);margin-bottom:8px}
.info-step p{color:var(--ink-soft);font-size:var(--fs-14);margin:0}
.info-split{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:46px;align-items:center;margin-top:64px}
.info-split-dark{background:#0B1E33;color:#F5F1E6;border:1px solid rgba(195,155,94,.38);padding:34px;background-repeat:repeat;background-position:left top;background-size:48px 100%;background-image:linear-gradient(90deg,transparent,transparent 47px,rgba(195,155,94,.22) 47px,rgba(195,155,94,.22) 48px)}
.info-split-dark .eyebrow{color:var(--gold)}
.info-split-dark p,.info-split-dark li{color:#C9CDCB}
.info-visual{background:var(--paper);border:1px solid rgba(255,255,255,.26);min-height:330px;padding:28px;position:relative;overflow:hidden}
.info-search-visual{display:flex;flex-direction:column;justify-content:center;gap:16px}
.info-visual-bar{height:50px;background:var(--white);border:1px solid var(--hair-2);box-shadow:0 16px 34px rgba(0,0,0,.12)}
.info-visual-row{height:16px;width:72%;background:#D7DAD8}
.info-visual-row.strong{height:24px;width:88%;background:#9EA7AD}
.info-visual-row.short{width:46%}
.info-visual-price{position:absolute;right:24px;bottom:24px;background:#0B1E33;color:#F5F1E6;border:2px solid var(--gold);padding:12px 16px;font-family:Manrope,Inter,sans-serif;font-weight:800}
.info-product-visual{min-height:400px;padding:26px;background:#F7F7F4;display:grid;grid-template-columns:minmax(190px,260px) minmax(200px,1fr);gap:16px;align-items:center;justify-content:center;overflow:hidden}
.moonshot{position:relative;width:76%;max-width:380px;min-height:390px;background:var(--white);border:1px solid var(--hair-2);box-shadow:0 26px 54px rgba(0,0,0,.22);padding:14px;display:flex;flex-direction:column;gap:12px}
.moonshot-real{width:260px;max-width:100%;height:auto;min-height:0;padding:0;display:block;overflow:hidden;border:6px solid var(--white);box-shadow:0 26px 54px rgba(0,0,0,.24)}
.moonshot-real img{display:block;width:100%;height:auto;object-fit:contain}
.moonshot-detail-zoom{height:250px;min-width:0;position:relative;background:#fff;border:6px solid #fff;box-shadow:0 24px 52px rgba(0,0,0,.18);overflow:hidden;align-self:center}
.moonshot-detail-zoom .zoom-label{position:absolute;left:14px;top:14px;z-index:2;font-family:Manrope,Inter,sans-serif;font-size:var(--fs-10);font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-ink);background:rgba(255,255,255,.88);padding:5px 7px;border:1px solid rgba(195,155,94,.28)}
.moonshot-detail-zoom img{position:absolute;width:440px;max-width:none;height:auto;left:10px;top:-322px}
.moonshot-top{height:38px;background:#0B1E33;color:#F5F1E6;display:flex;align-items:center;justify-content:space-between;padding:0 14px;background-repeat:repeat;background-position:left top;background-size:24px 100%;background-image:linear-gradient(90deg,transparent,transparent 23px,rgba(195,155,94,.25) 23px,rgba(195,155,94,.25) 24px)}
.moonshot-top strong{font-family:"Playfair Display",Georgia,serif;font-size:var(--fs-18);line-height:1}
.moonshot-top span{font-family:Manrope,Inter,sans-serif;font-size:var(--fs-10);font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--gold)}
.moonshot-search{height:48px;border:1px solid var(--hair-2);display:grid;grid-template-columns:1fr auto;align-items:center;background:#fff}
.moonshot-search span{font-family:Manrope,Inter,sans-serif;color:var(--ink-soft);padding-left:14px;font-size:var(--fs-13)}
.moonshot-search b{height:100%;display:flex;align-items:center;background:#0B1E33;color:#F5F1E6;padding:0 14px;border-left:2px solid var(--gold);font-family:Manrope,Inter,sans-serif;font-size:var(--fs-11)}
.moonshot-layout{display:grid;grid-template-columns:86px 1fr;gap:12px;min-height:270px}
.moonshot-filters{background:var(--paper);border:1px solid var(--hair);padding:12px 10px;display:grid;align-content:start;gap:8px}
.moonshot-filters span{font-family:Manrope,Inter,sans-serif;font-size:var(--fs-10);font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.moonshot-filters em{display:block;height:8px;width:100%;background:#CFD3D4}
.moonshot-filters em.short{width:72%}
.moonshot-results{display:grid;gap:9px;align-content:start}
.moonshot-card{min-height:72px;background:var(--white);border:1px solid var(--hair);display:grid;grid-template-columns:56px 1fr;gap:10px;align-items:center;padding:8px}
.moonshot-card img{width:56px;height:56px;object-fit:contain;filter:drop-shadow(0 8px 10px rgba(20,22,26,.16))}
.moonshot-card strong{display:block;font-family:"Playfair Display",Georgia,serif;font-size:var(--fs-14);line-height:1.1;color:var(--ink)}
.moonshot-card span{display:block;margin-top:4px;font-family:Manrope,Inter,sans-serif;font-size:var(--fs-10);font-weight:700;color:var(--mute)}
.info-copy p,.info-mission-text p,.info-feature-copy p{color:var(--ink-soft);font-size:var(--fs-16);margin:14px 0 0}
.info-split-dark .info-copy p,.info-split-dark .info-checklist li{color:#C9CDCB}
.info-checklist{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:10px}
.info-checklist li{position:relative;padding-left:20px;font-family:Manrope,Inter,sans-serif;font-size:var(--fs-14)}
.info-checklist li::before{content:"";position:absolute;left:0;top:.72em;width:7px;height:7px;background:var(--gold);border-radius:var(--r-round)}
.info-mission{padding-top:72px}
.info-mission-text{max-width:760px;margin-bottom:30px}
.info-mission-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.info-mission-grid article{background:var(--white);border:1px solid var(--hair);border-radius:var(--r);padding:24px}
.info-mission-grid span{font-family:Manrope,Inter,sans-serif;font-weight:800;color:var(--gold-ink);font-size:var(--fs-12);letter-spacing:.1em}
.info-mission-grid h3{font-size:var(--fs-22);margin:18px 0 8px}
.info-mission-grid p{color:var(--ink-soft);font-size:var(--fs-14);margin:0}
.info-feature-band{margin-top:54px;background:#0B1E33;color:#F5F1E6;border:1px solid rgba(195,155,94,.38);display:grid;grid-template-columns:.85fr 1.15fr;gap:44px;padding:38px;background-repeat:repeat;background-position:left top;background-size:48px 100%;background-image:linear-gradient(90deg,transparent,transparent 47px,rgba(195,155,94,.2) 47px,rgba(195,155,94,.2) 48px)}
.info-feature-band .eyebrow{color:var(--gold)}
.info-feature-band p{color:#C9CDCB}
.info-feature-list{display:grid;gap:0;border-top:1px solid rgba(195,155,94,.26)}
.info-feature-list div{padding:18px 0;border-bottom:1px solid rgba(195,155,94,.26)}
.info-feature-list strong{display:block;color:#fff;font-size:var(--fs-16);margin-bottom:4px}
.info-feature-list span{display:block;color:#C9CDCB;font-size:var(--fs-14)}
.info-contact-hero{padding:58px 0}
.info-contact-hero-grid{display:grid;grid-template-columns:minmax(0,1.1fr) 360px;gap:48px;align-items:center}
.info-contact-hero h1{font-size:var(--fs-38);line-height:1.1}
.info-contact-hero p{margin-left:0;margin-right:0}
.info-contact-card{background:#0B1E33;color:#F5F1E6;border:1px solid rgba(195,155,94,.45);padding:26px;min-height:210px;display:flex;flex-direction:column;justify-content:flex-end;background-repeat:repeat;background-position:left top;background-size:48px 100%;background-image:linear-gradient(90deg,transparent,transparent 47px,rgba(195,155,94,.24) 47px,rgba(195,155,94,.24) 48px)}
.info-contact-card strong{font-family:"Playfair Display",Georgia,serif;font-size:var(--fs-30);line-height:1}
.info-contact-card span{color:#C9CDCB;margin:10px 0 18px}
.info-contact-card a{color:var(--gold);font-family:Manrope,Inter,sans-serif;font-weight:800}
.info-contact-layout{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(280px,.8fr);gap:26px;padding-top:48px}
.info-contact-form,.info-contact-aside{background:var(--white);border:1px solid var(--hair);border-radius:var(--r);padding:28px}
.contact-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.contact-form-grid .full{grid-column:1/-1}
.field textarea{width:100%;font-family:Manrope;font-size:var(--fs-14);padding:10px 12px;border:1px solid var(--hair-2);border-radius:var(--r-sm);background:#fff;outline:0;resize:vertical;min-height:150px}
.field textarea:focus{border-color:var(--gold-ink)}
.info-contact-form .btn{margin-top:18px}
.info-contact-aside{align-self:start}
.info-contact-notes{margin-top:20px;border-top:1px solid var(--hair)}
.info-contact-notes div{padding:17px 0;border-bottom:1px solid var(--hair)}
.info-contact-notes strong{display:block;font-size:var(--fs-15);margin-bottom:4px}
.info-contact-notes span{display:block;color:var(--ink-soft);font-size:var(--fs-14)}

/* footer */
footer{background-color:#0B1E33;background-repeat:repeat;background-position:left top;background-size:48px 100%;
  background-image:linear-gradient(90deg,transparent,transparent 47px,rgba(195,155,94,.32) 47px,rgba(195,155,94,.32) 48px);color:#C9CDCB;padding:52px 0 28px;margin-top:20px}
footer .logo{color:#fff}
footer .cols{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px}
footer .footer-logo{flex-direction:column;align-items:center;gap:4px;font-size:var(--fs-30)}
footer .footer-logo .mark{width:84px;height:84px;margin-top:-5px}
footer h5{font-family:Manrope;font-size:var(--fs-11);letter-spacing:.12em;text-transform:uppercase;color:#C39B5E;margin:0 0 14px;font-weight:700}
footer a{display:block;padding:5px 0;font-size:var(--fs-13);color:#C9CDCB;transition:.15s}
footer a:hover{color:#fff}
.disclaimer{border-top:1px solid rgba(195,155,94,.25);margin-top:36px;padding-top:18px;font-size:var(--fs-11);color:#888F8C;line-height:1.6}

/* auth modal */
.modal{position:fixed;inset:0;z-index:120;display:none;align-items:center;justify-content:center;padding:20px}
.modal.open{display:flex}
.modal .bg{position:absolute;inset:0;background:rgba(20,22,26,.5)}
.modal .card2{position:relative;background:var(--paper);border-radius:var(--r);width:min(420px,100%);padding:30px;box-shadow:var(--shadow-lg)}
.modal h3{font-family:"Playfair Display",serif;font-size:var(--fs-26)}
.modal .tabs{display:flex;gap:6px;margin:16px 0;background:var(--paper-2);padding:4px;border-radius:var(--r-sm)}
.modal .tabs button{flex:1;padding:9px;font-family:Manrope;font-weight:600;font-size:var(--fs-13);border-radius:var(--r-sm);color:var(--ink-soft)}
.modal .tabs button.on{background:#fff;color:var(--ink);box-shadow:var(--shadow)}

/* mobile bottom nav */
.mobnav{display:none;position:fixed;bottom:0;left:0;right:0;z-index:70;background:rgba(245,245,242,.95);backdrop-filter:blur(10px);border-top:1px solid var(--hair);padding:8px 0 calc(8px + env(safe-area-inset-bottom));grid-template-columns:repeat(4,1fr)}
.mobnav a{display:flex;flex-direction:column;align-items:center;gap:3px;font-family:Manrope;font-size:var(--fs-10);font-weight:600;color:var(--mute)}
.mobnav a.on{color:var(--gold-ink)}
.mobnav svg{width:22px;height:22px}

/* toast */
.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(20px);background:var(--ink);color:var(--paper);
  font-family:Manrope;font-weight:600;font-size:var(--fs-13);padding:12px 20px;border-radius:var(--r-btn);box-shadow:var(--shadow-lg);z-index:200;opacity:0;transition:.25s;pointer-events:none}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* responsive */
@media(max-width:1080px){
  .grid{grid-template-columns:repeat(3,1fr)}
  .pop-grid,.opp-grid{grid-template-columns:repeat(2,1fr)}
  .brands-strip{grid-template-columns:repeat(3,1fr)}
  footer .cols{grid-template-columns:1fr 1fr;row-gap:32px}
}
@media(max-width:820px){
  .nav,.selects{display:none}
  .burger{display:inline-flex}
  .topbar{display:flex;align-items:center;justify-content:space-between}
  #navMobile{z-index:81;box-shadow:var(--shadow)}
  #navMobile.open{display:flex;position:absolute;top:64px;left:0;right:0;background:var(--paper);flex-direction:column;padding:10px;border-bottom:1px solid var(--hair);gap:2px}
  #navMobile a{color:var(--ink-soft);background:transparent}
  #navMobile a:hover,#navMobile a.on{color:var(--ink);background:var(--paper-2)}
  .layout{grid-template-columns:1fr}
  .filters{display:none;position:fixed;inset:auto 0 0 0;top:auto;max-height:82vh;border-radius:var(--r) var(--r) 0 0;z-index:105;max-width:100%}
  .filters.mopen{display:block}
  .mobile-filter-btn{display:inline-flex}
  .top-actions{padding-right:6px}
  .cta{flex-direction:column;text-align:center;align-items:center}
  .cta .txt{min-width:0}
  .cta .acts{justify-content:center}
  .cta.story{flex-wrap:wrap;gap:16px}
  .cta.story .cover{width:100%;height:240px}
  .cta.story .acts{width:100%;justify-content:center}
  .grid{grid-template-columns:repeat(2,1fr)}
  .picks-scroll{display:flex;grid-template-columns:none;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:24px;-webkit-overflow-scrolling:touch}
  .picks-scroll::-webkit-scrollbar{height:0}
  .picks-card{flex:0 0 260px;scroll-snap-align:start}
  .home-picks-head{align-items:flex-start}
  .home-picks-layout{display:flex;grid-template-columns:none;overflow-x:auto;gap:16px;padding:0 24px 6px;margin:0 -24px;scroll-snap-type:x mandatory;scroll-padding-left:24px;-webkit-overflow-scrolling:touch}
  .home-picks-layout::-webkit-scrollbar{height:0}
  .home-picks-layout>.fiche{flex:0 0 250px;scroll-snap-align:start}
  .home-pick-titre{font-size:var(--fs-18)}
  .latest-head{align-items:flex-start}
  .latest-grid{display:flex;grid-template-columns:none;overflow-x:auto;gap:16px;padding:0 24px 6px;margin:0 -24px;scroll-snap-type:x mandatory;scroll-padding-left:24px;-webkit-overflow-scrolling:touch}
  .latest-grid::-webkit-scrollbar{height:0}
  .latest-grid>.fiche{flex:0 0 280px;scroll-snap-align:start}
  .home-story-section{padding-top:20px;padding-bottom:42px}
  .home-story-card{grid-template-columns:1fr;min-height:0}
  .home-story-media{min-height:220px}
  .home-story-media::after{background:linear-gradient(180deg,rgba(11,30,51,.06),rgba(11,30,51,.42))}
  .home-story-content{padding:24px}
  .home-story-title{font-size:var(--fs-26)}
  .home-story-bottom{align-items:flex-start;flex-direction:column;gap:16px;padding-top:22px}
  .home-story-action{width:100%;justify-content:center}
  .boutiques-hero{grid-template-columns:1fr;gap:18px}
  .boutiques-count{border-left:0;border-top:1px solid var(--hair-2);padding-left:0;padding-top:16px}
  .boutiques-page .directory-tools{grid-template-columns:1fr}
  .boutique-directory-grid{grid-template-columns:1fr}
  .boutique-card{grid-template-columns:88px minmax(0,1fr);gap:14px;min-height:0;padding:14px}
  .boutique-card-logo{height:88px;padding:12px}
  .boutique-card-name{font-size:var(--fs-18)}
  .boutique-card-head{gap:10px}
  .boutique-card-count strong{font-size:var(--fs-18)}
  .boutique-card-desc{-webkit-line-clamp:2;margin-top:10px}
  .dash-kpis{grid-template-columns:repeat(2,1fr)}
  .form-grid,.steps{grid-template-columns:1fr}
  .info-page{padding-bottom:48px}
  .info-hero{padding:42px 0 72px}
  .info-hero h1{font-size:var(--fs-38);line-height:1.08}
  .info-hero p{font-size:var(--fs-16)}
  .info-stats{grid-template-columns:1fr}
  .info-stats-overlap{margin-top:-34px}
  .info-stat{min-height:0;border-right:0;border-bottom:1px solid rgba(195,155,94,.3);padding:22px}
  .info-stat:last-child{border-bottom:0}
  .info-step-grid,.info-mission-grid,.info-feature-band,.info-contact-hero-grid,.info-contact-layout{grid-template-columns:1fr}
  .info-step{min-height:0}
  .info-step-no{margin-bottom:24px}
  .info-split{grid-template-columns:1fr;gap:26px;margin-top:42px}
  .info-split-dark,.info-feature-band{padding:24px}
  .info-visual{min-height:250px}
  .info-product-visual{min-height:0;overflow:hidden;padding:22px;grid-template-columns:1fr;gap:14px}
  .moonshot{width:86%;max-width:360px;min-height:340px}
  .moonshot-real{width:252px;max-width:100%;height:auto;min-height:0;justify-self:center}
  .moonshot-detail-zoom{width:min(100%,252px);height:138px;justify-self:center}
  .moonshot-detail-zoom img{width:382px;left:8px;top:-280px}
  .info-section-head h2,.info-copy h2,.info-mission h2,.info-feature-copy h2,.info-contact-aside h2{font-size:var(--fs-30)}
  .info-mission{padding-top:54px}
  .info-contact-hero{padding:42px 0}
  .info-contact-card{min-height:180px}
  .contact-form-grid{grid-template-columns:1fr}
  .contact-form-grid .full{grid-column:auto}
  .hero{padding:44px 0 48px}
  .stats{position:static;left:auto;right:auto;bottom:auto;flex-direction:column;align-items:center;margin-top:24px;padding:0}
  .grid.list .card{flex-direction:column}
  .grid.list .card .art{position:static;width:auto;height:280px;aspect-ratio:auto}
  .grid.list .card .body{margin-left:0;padding:15px 0 0}
  .panel{width:100%;max-height:100%;height:100%;top:0;left:0;border-radius:0;transform:translateY(4%);}
  .panel.open{transform:translateY(0)}
  .pgallery-col .pgallery{height:280px;padding-bottom:0}
  .pgallery .main{position:static;height:100%}
  .pgrid{grid-template-columns:1fr;gap:20px;padding:16px}
  footer .cols{grid-template-columns:1fr 1fr;text-align:center;gap:32px 20px}
  footer .cols>div{display:flex;flex-direction:column;align-items:center}
  footer .cols>div:first-child,footer .cols>div:last-child{grid-column:1/-1}
  footer .footer-logo{align-items:center}
  .repairers-hero{grid-template-columns:1fr!important}
  .repairers-hero>div:last-child{display:none!important}
  .repairers-layout{grid-template-columns:1fr!important}
  .repairer-card{flex-direction:column}
}
@media(max-width:520px){
  .grid,.pop-grid,.opp-grid,.brands-strip{grid-template-columns:1fr}
  .pinfo-col .btns .panel-main-btn{flex:1 0 100%}
  /* Sur cette largeur le bouton partage repasse à gauche de la ligne : le
     menu doit s'ouvrir vers la droite pour ne pas sortir de l'écran. */
  .share-menu .contact-menu-dd{left:0;right:auto}
  .picks-card{flex-basis:78%}
  .home-picks-layout>.fiche{flex-basis:76%}
  .home-pick-titre{font-size:var(--fs-16)}
  .latest-grid>.fiche{flex-basis:82%}
  .latest-body h3{font-size:var(--fs-18)}
  .home-story-media{min-height:190px}
  .home-story-content{padding:22px 20px 20px}
  .home-story-title{font-size:var(--fs-22);line-height:1.12}
  .home-story-excerpt{font-size:var(--fs-14);line-height:1.55}
  .info-hero h1{font-size:var(--fs-30)}
  .info-hero-actions .btn{width:100%;justify-content:center}
  .info-stats-overlap{margin-left:20px;margin-right:20px}
  .info-stat{grid-template-columns:1fr;gap:12px}
  .info-stat-rule{width:42px;height:3px}
  .info-product-visual{min-height:0;padding:16px}
  .moonshot{width:100%;min-height:318px;padding:10px;gap:9px}
  .moonshot-real{width:236px;max-width:100%;height:auto;padding:0}
  .moonshot-detail-zoom{width:min(100%,236px);height:128px}
  .moonshot-detail-zoom img{width:356px;left:7px;top:-260px}
  .moonshot-layout{grid-template-columns:64px 1fr;gap:8px;min-height:220px}
  .moonshot-filters{padding:10px 8px}
  .moonshot-card{grid-template-columns:44px 1fr;gap:8px;min-height:62px;padding:7px}
  .moonshot-card img{width:44px;height:44px}
  .info-contact-form,.info-contact-aside{padding:22px}
  .boutiques-hdr{padding:34px 0 24px}
  .boutiques-hero h1{font-size:var(--fs-30)}
  .boutiques-page{padding-top:28px}
  .boutique-card{grid-template-columns:76px minmax(0,1fr);gap:12px}
  .boutique-card-logo{height:76px;padding:10px}
  .boutique-logo-initials{font-size:var(--fs-22)}
  .boutique-card-head{display:block}
  .boutique-card-count{display:flex;align-items:baseline;gap:5px;text-align:left;margin-top:10px}
  .boutique-card-count strong{font-size:var(--fs-18)}
  .boutique-card-count span{margin-top:0}
  .boutique-card-desc{display:none}
  .boutique-card-foot{align-items:flex-start;flex-direction:column;gap:8px}
  .wrap{padding:0 20px}
  .stats{gap:14px}
  .cta{padding:20px}
  .suggests .chip:nth-child(n+4){display:none}
  .topbar{height:auto;padding-top:10px;padding-bottom:10px;gap:10px}
  .logo{gap:6px;font-size:var(--fs-16)}
  .logo .mark{width:60px;height:60px}
  .top-actions{gap:6px;padding-right:4px}
  .btn-dark.btn-sm{padding:0 12px;font-size:var(--fs-12)}
}

/* ---------- Carte Horlogers (MapLibre GL, chargé uniquement sur horlogers.html) ---------- */
/* MapLibre met ses contrôles à z-index:2 mais son canevas WebGL peut malgré
   tout passer au-dessus du header sticky (z-index:60) une fois la carte
   défilée sous lui ; un z-index explicite sur le conteneur règle ça. */
.maplibregl-map{z-index:1}
.maplibregl-ctrl-group{border:none!important;box-shadow:var(--shadow)!important;border-radius:8px!important;overflow:hidden;background:var(--white)!important}
.maplibregl-ctrl-group button{width:26px!important;height:26px!important}
.maplibregl-ctrl-group button:hover{background:var(--paper-2)!important}
.moonlist-popup .maplibregl-popup-content{border-radius:var(--r);box-shadow:var(--shadow-lg);padding:12px 14px;font-family:Manrope,sans-serif;min-width:150px}
.moonlist-map-popup strong{font-family:"Playfair Display",serif;font-size:var(--fs-15);display:block;margin-bottom:2px}
.moonlist-map-popup .city{color:var(--mute);font-size:var(--fs-12);margin-bottom:10px}
.moonlist-map-popup-btn{
  background-color:#0B1E33;
  background-image:linear-gradient(90deg,transparent,transparent 11px,rgba(195,155,94,.35) 11px,rgba(195,155,94,.35) 12px);
  background-size:12px 100%;background-repeat:repeat;
  color:#F5F1E6!important;
}
.moonlist-map-popup-btn:hover{background-color:#0C2A1D}
.leaflet-control-zoom a:hover{background:var(--paper-2)!important}
.leaflet-control-attribution{background:rgba(255,255,255,.85)!important;font-size:var(--fs-10)!important;border-radius:6px 0 0 0}

/* Mouvement reduit : le soulignement et le filet des chips apparaissent
   sans animation. */
@media (prefers-reduced-motion:reduce){
  .link-arrow::after{transition:none}
  .hero .chip>span::after{transition:none}
  /* Les rayures sont la des le premier rendu, sans balayage. */
  body:not(.stripes-shown) .hero::before{animation:none}
  /* Le bandeau de logos s'arrete et se centre. */
  .logostrip-track{animation:none;justify-content:center;width:100%;flex-wrap:wrap;row-gap:18px;gap:0}
  .logostrip-track>*{margin-right:28px}
  .logostrip-item[aria-hidden="true"]{display:none}
  .card .art::after{transition:none}
  .story-magnify-btn,.story-magnify-btn::before,.story-magnify-btn>span,.story-magnify-icon{transition:none}
}

/* Alertes e-mail. Quatre controles : modele, prix, adresse, bouton. Une
   seule ligne serait illisible, deux lignes empilees casseraient le boitier —
   donc une grille 2x2 dans un cadre unique, qui se replie en colonne sur
   mobile. */
.alertbox{max-width:680px;margin:0 auto;position:relative}
.alertbox-grille{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);
  background:var(--white);border:1px solid var(--hair-2);border-radius:var(--r-btn);
  box-shadow:var(--shadow);overflow:visible;transition:.15s}
.alertbox-grille:focus-within{border-color:var(--gold-ink);box-shadow:0 0 0 4px rgba(138,106,47,.08),var(--shadow)}
.alertbox-cellule{position:relative;display:flex;align-items:center;min-width:0}
.alertbox-cellule-prix,.alertbox-cellule-action{border-left:1px solid var(--hair-2)}
.alertbox-cellule-email,.alertbox-cellule-action{border-top:1px solid var(--hair-2)}
.alertbox-cellule-action{padding:8px}
.alertbox-input{width:100%;min-width:0;border:0;outline:0;background:transparent;
  font-family:Inter,sans-serif;font-size:var(--fs-15);color:var(--ink);padding:13px 16px}
.alertbox-input::placeholder{color:var(--mute)}
.alertbox-cellule-action .btn{width:100%;justify-content:center}
/* La liste de suggestions se place sous le champ modele, pas sous la grille. */
.alertbox-ac{top:calc(100% + 6px)}
.alertbox-note{margin:12px auto 0;max-width:560px;text-align:center;font-size:var(--fs-13);color:var(--ink-soft)}
.alertbox-note b{color:var(--gold-ink);cursor:pointer;border-bottom:1px solid currentColor}
.alertbox-note-sec{display:block;color:var(--mute);font-size:var(--fs-12);margin-top:4px}
.alertbox-consent{margin:10px auto 0;max-width:560px;text-align:center;font-size:var(--fs-12);color:var(--mute)}
/* Confirmation d'alerte : la pastille verte dit « c'est fait » avant meme
   qu'on lise. Le titre et l'accroche du bloc disparaissent — ils posent une
   question a laquelle le visiteur vient de repondre. */
.alerte-ok{display:flex;flex-direction:column;align-items:center;gap:15px;text-align:center;padding:4px 0 2px}
.alerte-ok-pastille{display:flex;align-items:center;justify-content:center;width:54px;height:54px;border-radius:50%;
  background:var(--down);color:#fff;flex:0 0 auto}
.alerte-ok-pastille svg{width:27px;height:27px;display:block}
.alerte-ok-texte{margin:0;max-width:40ch;font-family:Manrope,sans-serif;font-weight:600;font-size:var(--fs-15);line-height:1.5;color:var(--ink)}
.alerte-envoyee .sec-head,.alerte-envoyee .alert-home-sub,.alerte-envoyee .alertbox-lead{display:none}
.alert-home{text-align:center}
.alert-home .sec-head{justify-content:center;text-align:center}
.alert-home p.alert-home-sub{color:var(--ink-soft);max-width:520px;margin:0 auto 22px}
.empty .alertbox{margin-top:18px}
.empty .alertbox-lead{margin-top:32px;color:var(--ink-soft);max-width:420px;margin-left:auto;margin-right:auto}

@media (max-width:820px){
  /* Champs a 16px : en dessous, iOS zoome sur le champ au focus. */
  .alertbox-grille{grid-template-columns:1fr}
  .alertbox-cellule-prix,.alertbox-cellule-action{border-left:0}
  .alertbox-cellule-prix{border-top:1px solid var(--hair-2)}
  .alertbox-input{font-size:var(--fs-16);padding:12px 14px}
  .alertbox-cellule-action{padding:10px}
}

/* Genealogies de references : une liste se lit mieux qu'un paragraphe quand
   il s'agit d'enumerer des references et leurs annees. Tiret dore plutot que
   puce ronde, pour rester dans la ponctuation maison. */
.seo-detail-copy ul{margin:0 0 15px;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.seo-detail-copy li{position:relative;padding-left:20px;color:var(--ink-soft);font-size:var(--fs-15);line-height:1.7}
.seo-detail-copy li::before{content:"";position:absolute;left:0;top:12px;width:8px;height:1px;background:var(--gold-ink)}
.seo-detail-copy li b{color:var(--ink);font-family:Manrope,sans-serif;font-weight:700;font-size:var(--fs-14)}
.seo-facts{border-left:1px solid var(--hair);padding-left:28px}
.seo-facts h2{font-family:Manrope,sans-serif;font-size:var(--fs-14);text-transform:uppercase;margin-bottom:18px}
.seo-facts dl{margin:0}
.seo-facts dl div{padding:11px 0;border-top:1px solid var(--hair)}
.seo-facts dl div:first-child{border-top:0;padding-top:0}
.seo-facts dt{font-family:Manrope,sans-serif;font-size:var(--fs-11);text-transform:uppercase;color:var(--mute);font-weight:700}
.seo-facts dd{margin:4px 0 0;color:var(--ink-soft);font-size:var(--fs-14);line-height:1.5}
.seo-facts .link-arrow{margin-top:22px}
@media(max-width:760px){
  .seo-detail-grid{grid-template-columns:1fr;gap:30px}
  .seo-facts{border-left:0;border-top:1px solid var(--hair);padding:26px 0 0}
}

/* ---------- Bandeau de confiance (sous le hero) ---------- */
.trustbar{background:var(--white);border-bottom:1px solid var(--hair-2)}

/* ---------- Bandeau de logos partenaires ----------
   Les 9 boutiques defilent lentement en continu. Le masque en degrade sur les
   deux bords est ce qui empeche les logos de se couper net contre la marge --
   il est necessaire, pas decoratif. La piste est dupliquee et l'animation
   translate d'exactement -50% : la boucle est donc invisible. */
.logostrip{background:var(--white);border-bottom:1px solid var(--hair-2);padding:20px 0;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 90px,#000 calc(100% - 90px),transparent);
          mask-image:linear-gradient(90deg,transparent,#000 90px,#000 calc(100% - 90px),transparent)}
/* L'espacement est porte par chaque element (margin-right) et non par un
   `gap` de flex : avec un gap, la piste vaut 18 logos + 17 intervalles, donc
   -50% tombe a un demi-intervalle pres et la boucle saute visiblement
   (mesure : 32px d'erreur, la moitie des 64px). Avec une marge par element,
   la moitie de la piste vaut exactement une passe. */
.logostrip-track{display:flex;align-items:center;width:max-content;
  animation:logostrip-run 46s linear infinite}
.logostrip-track>*{margin-right:40px}
.logostrip:hover .logostrip-track,.logostrip:focus-within .logostrip-track{animation-play-state:paused}
/* Cellule de taille fixe. Vos 9 logos ont des proportions tres inegales --
   Berenger est carre (225x225), Cezame fait 200x30 -- et un simple
   `max-height` les rendait de 37px a 150px de large : les carres passaient
   pour des points a cote des logotypes. La cellule fixe egalise le rythme,
   et rend en prime la piste stable avant meme le chargement des images. */
.logostrip-item{flex:0 0 auto;width:132px;height:48px;display:flex;align-items:center;justify-content:center;text-decoration:none}
.logostrip-item:hover img,.logostrip-item:focus-visible img{filter:grayscale(0);opacity:1}
.logostrip-item img{max-width:100%;max-height:48px;width:auto;height:auto;object-fit:contain;
  filter:grayscale(1);opacity:.62;transition:filter .3s ease,opacity .3s ease}
.logostrip-item img:hover{filter:grayscale(0);opacity:1}
@keyframes logostrip-run{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}

/* ---------- Lumiere sur la photo (au pointeur) ----------
   Repond au geste de l'utilisateur, donc legitime la ou une animation
   perpetuelle ne le serait pas. Un halo dore tres bas, cale sur la position du
   curseur : la lumiere qui glisse sur un boitier qu'on incline, pas le halo
   generique pose autour d'une carte. */
.card .art::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;
  transition:opacity .35s ease;
  background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%),
             rgba(195,155,94,.30),rgba(195,155,94,.10) 42%,transparent 68%);
  mix-blend-mode:soft-light}
.card:hover .art::after{opacity:1}

.trustbar-row{max-width:var(--maxw);margin:0 auto;padding:22px 24px;display:grid;grid-template-columns:repeat(3,1fr)}
.trustbar-item{display:flex;align-items:center;gap:12px;padding:0 20px;border-left:1px solid var(--hair-2)}
.trustbar-item:first-child{border-left:none;padding-left:0}
.trustbar-item svg{flex:0 0 auto;color:var(--gold-ink)}
.trustbar-item .n{font-family:Manrope;font-weight:700;font-size:var(--fs-15);color:var(--ink);line-height:1.3}
.trustbar-item .l{font-family:Manrope;font-size:var(--fs-12);color:var(--mute);line-height:1.3}
@media(max-width:820px){
  .trustbar-row{grid-template-columns:1fr;gap:14px;padding:18px 24px}
  .trustbar-item{border-left:none;border-top:1px solid var(--hair-2);padding:14px 0 0}
  .trustbar-item:first-child{border-top:none;padding-top:0}
}

/* ---------- Coup de cœur (carrousel) ---------- */
.picks-scroll{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,340px));justify-content:center;gap:22px;max-width:var(--maxw);margin:0 auto;padding:4px 24px 8px}
.picks-card{position:relative;cursor:pointer}
.picks-img{position:relative;width:100%;aspect-ratio:4/3;border-radius:var(--r);overflow:hidden;background:#FFFFFF;border:1px solid var(--hair)}
.picks-img img{width:100%;height:100%;object-fit:cover;transition:.25s}
.picks-card:hover .picks-img img{transform:scale(1.03)}
.picks-img-btn{position:absolute;right:12px;bottom:12px;box-shadow:0 2px 10px rgba(0,0,0,.25);z-index:2}
.picks-name{font-family:"Playfair Display",serif;font-size:var(--fs-18);margin-top:14px;color:var(--ink)}
.picks-meta{display:flex;align-items:center;gap:6px;font-family:Manrope;font-size:var(--fs-13);color:var(--mute);margin-top:4px}
.link-arrow:hover{color:var(--gold-ink-2)}

/* ---------- Coup de cœur accueil ---------- */
.home-picks-head{align-items:flex-end;margin-bottom:24px}
.home-picks-head p{max-width:600px;margin:7px 0 0;color:var(--mute);font-size:var(--fs-14);line-height:1.55}
.home-picks-layout{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.home-picks-layout.is-single{grid-template-columns:minmax(0,380px);justify-content:center}
/* Trois cartes identiques : photo et titre, rien d'autre. Le reste des infos
   est la recompense du clic — c'est une selection editoriale, pas une grille
   de resultats. Les prix restent visibles juste en dessous, dans « Dernieres
   annonces ». Format vertical : les photos de montres le sont presque
   toujours (0,75 / 0,67 / 0,67 sur la selection du moment). */
.home-pick-carte{min-width:0}
.home-pick-carte a{display:block;text-decoration:none;color:inherit}
.home-pick-photo{display:block;position:relative;aspect-ratio:5/4;overflow:hidden;
  border:1px solid var(--hair);border-radius:var(--r);background:#EEE9DD}
.home-pick-photo img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .4s ease}
.home-pick-photo svg{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);height:150px}
.home-pick-carte:hover .home-pick-photo{border-color:var(--silver)}
.home-pick-carte:hover .home-pick-photo img,
.home-pick-carte a:focus-visible .home-pick-photo img{transform:scale(1.03)}
.home-pick-titre{margin:14px 0 0;font-family:"Playfair Display",Georgia,serif;font-size:var(--fs-22);
  font-weight:500;line-height:1.25;color:var(--ink);letter-spacing:0;
  display:inline;background-image:linear-gradient(var(--gold-ink),var(--gold-ink));
  background-repeat:no-repeat;background-position:0 100%;background-size:0 1px;
  transition:background-size .4s ease}
.home-pick-carte:hover .home-pick-titre,
.home-pick-carte a:focus-visible .home-pick-titre{background-size:100% 1px}
/* Le filet se dessine ; il ne saute pas. Respecte le reglage systeme. */
@media (prefers-reduced-motion:reduce){
  .home-pick-photo img{transition:none}
  .home-pick-titre{transition:none}
  .home-pick-carte:hover .home-pick-photo img{transform:none}
}
.home-pick-carte a:focus-visible .home-pick-photo{outline:2px solid var(--gold);outline-offset:3px}

/* ---------- Dernières annonces (accueil) ---------- */
.latest-home{padding-top:36px}
.latest-head{align-items:flex-end}
.latest-head p{max-width:520px;margin:6px 0 0;color:var(--mute);font-size:var(--fs-14);line-height:1.55}
.latest-grid{display:flex;overflow-x:auto;gap:18px;padding-bottom:8px;
  scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
.latest-grid::-webkit-scrollbar{height:0}
.latest-grid>.fiche{flex:0 0 300px;scroll-snap-align:start}
.latest-card{position:relative;background:rgba(255,255,255,.48);border:1px solid var(--hair);border-radius:0;overflow:hidden;cursor:pointer;transition:border-color .18s ease,background-color .18s ease}
.latest-card:hover{border-color:var(--silver);background:rgba(255,255,255,.72)}
.latest-img{position:relative;aspect-ratio:16/10;background:#EEE9DD;overflow:hidden}
.latest-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .25s ease}
.latest-card:hover .latest-img img{transform:scale(1.025)}
.latest-img .badge{position:absolute;top:12px;left:12px;z-index:2}
.latest-body{padding:17px 20px 18px}
.latest-body h3{font-family:"Playfair Display",Georgia,serif;font-size:var(--fs-22);line-height:1.15;color:var(--ink);margin:0 0 8px}
.latest-specs,.latest-source{font-family:Manrope,Inter,sans-serif;font-size:var(--fs-13);line-height:1.4;color:var(--mute)}
.latest-source{margin-top:6px}
.latest-country{display:inline-flex;align-items:center;gap:5px}
.latest-country img{display:block}
.latest-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:14px;font-family:Manrope,Inter,sans-serif}
.latest-foot strong{font-size:var(--fs-15);color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums}
.latest-action{position:relative;z-index:2;font-size:var(--fs-13);font-weight:700;color:var(--gold-ink)}
.latest-action:hover{color:var(--gold-ink-2)}

/* ---------- Histoire de la semaine (accueil) ---------- */
.home-story-section{padding-top:28px;padding-bottom:54px}
.home-story-card{position:relative;display:grid;grid-template-columns:minmax(300px,.92fr) minmax(0,1.08fr);overflow:hidden;
  min-height:314px;background:#0B1E33;color:#F5F1E6;border:1px solid rgba(195,155,94,.38);box-shadow:0 18px 50px rgba(11,30,51,.16)}
.home-story-card::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:linear-gradient(90deg,rgba(255,255,255,.06),transparent 18%,transparent 82%,rgba(195,155,94,.10))}
.home-story-media{position:relative;z-index:1;display:block;min-height:314px;background:#07121E;overflow:hidden}
.home-story-media img{width:100%;height:100%;object-fit:cover;object-position:center 58%;display:block;transition:transform .45s ease}
.home-story-card:hover .home-story-media img{transform:scale(1.035)}
.home-story-media svg{position:absolute;top:50%;left:50%;width:62%;height:auto;transform:translate(-50%,-50%);opacity:.9}
.home-story-media::after{display:none}
.home-story-badge{position:absolute;top:18px;left:18px;z-index:2;font-family:Manrope,Inter,sans-serif;font-weight:800;font-size:var(--fs-10);
  letter-spacing:.12em;text-transform:uppercase;color:#F5F1E6;background:rgba(20,22,26,.86);border:1px solid rgba(217,182,121,.42);padding:7px 10px}
.home-story-content{position:relative;z-index:2;display:flex;flex-direction:column;padding:34px 38px 32px;min-width:0;
  background-image:repeating-linear-gradient(90deg,transparent,transparent 47px,rgba(195,155,94,.20) 47px,rgba(195,155,94,.20) 48px)}
.home-story-kicker{font-family:Manrope,Inter,sans-serif;font-size:var(--fs-11);font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#D9B679}
.home-story-title{display:block;margin-top:11px;color:#F5F1E6;font-size:clamp(var(--fs-26),3.1vw,var(--fs-38));line-height:1.05;letter-spacing:0;max-width:650px}
.home-story-subject{display:block;margin-top:10px;font-family:Manrope,Inter,sans-serif;font-size:var(--fs-14);font-weight:700;color:#D9B679}
.home-story-excerpt{display:block;margin-top:12px;max-width:620px;font-family:Manrope,Inter,sans-serif;font-size:var(--fs-15);line-height:1.62;color:rgba(245,241,230,.78)}
.home-story-bottom{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-top:auto;padding-top:24px}
.home-story-meta{display:flex;align-items:center;flex-wrap:wrap;font-family:Manrope,Inter,sans-serif;font-size:var(--fs-12);font-weight:600;color:rgba(245,241,230,.68)}
.home-story-action{flex:0 0 auto}

.directory-tools{display:flex;align-items:center;gap:12px;margin-bottom:18px;flex-wrap:wrap}
.directory-search{flex:1;min-width:260px;max-width:520px}
.directory-search .searchbox{box-shadow:none;border:1px solid var(--hair);background:var(--white)}
.directory-tools .opt-list{margin:0}
.directory-country{display:flex;align-items:center;gap:8px;font-family:Manrope;font-size:var(--fs-13);color:var(--ink-soft)}
.directory-country select{min-width:170px;font-family:Manrope;font-size:var(--fs-14);padding:10px 34px 10px 12px;border:1px solid var(--hair);border-radius:var(--r-sm);background:#fff;color:var(--ink);outline:0}
.directory-country select:focus{border-color:var(--gold-ink)}
#accountMenu{display:none!important}
.boutiques-grid .art{display:flex;align-items:center;justify-content:center;padding:26px;background:#fff}
.boutique-logo-img{max-width:76%;max-height:66%;width:auto;height:auto;object-fit:contain}

/* ---------- Annuaire boutiques ---------- */
.boutiques-hdr{padding:44px 0 30px}
.boutiques-hero{display:grid;grid-template-columns:minmax(0,1fr) 230px;gap:28px;align-items:end}
.boutiques-hero h1{font-family:"Playfair Display",Georgia,serif;font-size:clamp(var(--fs-30),4vw,var(--fs-38));line-height:1.08}
.boutiques-hero p{color:var(--ink-soft);max-width:610px;margin:10px 0 0;font-size:var(--fs-15);line-height:1.55}
.boutiques-count{border-left:1px solid var(--hair-2);padding-left:22px;font-family:Manrope,Inter,sans-serif}
.boutiques-count strong{display:block;font-size:var(--fs-38);line-height:1;color:var(--ink);font-weight:700}
.boutiques-count span{display:block;margin-top:5px;color:var(--mute);font-size:var(--fs-13);font-weight:600}
.boutiques-page .directory-tools{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;margin-bottom:26px}
.boutiques-page .directory-search{max-width:none}
.boutiques-page .directory-search .searchbox{padding:10px 14px;background:var(--white)}
.boutiques-page .directory-search input{font-size:var(--fs-14)}
.boutique-directory-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.boutique-card{position:relative;display:grid;grid-template-columns:104px minmax(0,1fr);gap:18px;min-height:174px;padding:18px;
  background:rgba(255,255,255,.62);border:1px solid var(--hair);color:var(--ink);transition:border-color .18s ease,background-color .18s ease,transform .18s ease}
.boutique-card:hover{border-color:var(--gold);background:rgba(255,255,255,.88);transform:translateY(-2px)}
.boutique-card:focus-visible{outline:2px solid var(--gold-ink);outline-offset:3px}
.boutique-card-logo{height:104px;align-self:start;display:flex;align-items:center;justify-content:center;background:var(--white);border:1px solid var(--hair);
  padding:16px;overflow:hidden}
.boutique-card-logo .boutique-logo-img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;transform:none}
.boutique-logo-initials{font-family:"Playfair Display",Georgia,serif;font-size:var(--fs-26);line-height:1;color:var(--ink);font-weight:500}
.boutique-card-main{display:flex;flex-direction:column;min-width:0}
.boutique-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.boutique-card-name{display:block;font-family:"Playfair Display",Georgia,serif;font-size:var(--fs-22);font-weight:500;line-height:1.12;color:var(--ink)}
.boutique-card-location{display:flex;align-items:center;gap:5px;margin-top:5px;font-family:Manrope,Inter,sans-serif;font-size:var(--fs-12);line-height:1.35;color:var(--mute)}
.boutique-card-count{flex:0 0 auto;text-align:right;font-family:Manrope,Inter,sans-serif;color:var(--mute);font-size:var(--fs-11);font-weight:700;text-transform:uppercase;letter-spacing:.08em}
.boutique-card-count strong{display:block;color:var(--ink);font-size:var(--fs-22);line-height:1;font-weight:700;letter-spacing:0;text-transform:none}
.boutique-card-count span{display:block;margin-top:4px}
.boutique-card-desc{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-top:13px;max-width:440px;
  font-family:Manrope,Inter,sans-serif;color:var(--mute);font-size:var(--fs-13);line-height:1.48}
.boutique-card-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:auto;padding-top:16px;font-family:Manrope,Inter,sans-serif}
.boutique-card-domain{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink-soft);font-size:var(--fs-12);font-weight:600}
.boutique-card-link{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;color:var(--gold-ink);font-size:var(--fs-13);font-weight:800}
.boutique-card-link::after{content:"→";font-size:var(--fs-15);line-height:1;transition:transform .18s ease}
.boutique-card:hover .boutique-card-link::after{transform:translateX(3px)}

/* popular model cards */
.pop-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.pop{position:relative;border:1px solid var(--hair);border-radius:var(--r);overflow:hidden;background:var(--white);transition:.18s;cursor:pointer}
.pop:hover{border-color:var(--silver);box-shadow:var(--shadow);transform:translateY(-2px)}
.pop-link{display:block;height:100%}
.pop .art{height:190px;display:flex;align-items:center;justify-content:center;background:linear-gradient(160deg,#F0F0EC,#E7E7E2)}
.pop .art svg{height:132px}
.pop .body{padding:16px 18px;display:flex;align-items:center;justify-content:space-between}
.pop .body h3{font-size:var(--fs-16)}
.pop .body .cnt{font-family:Manrope;font-size:var(--fs-12);color:var(--mute);font-weight:600}
.pop .body .from{font-family:Manrope;font-weight:700;font-size:var(--fs-14);text-align:right}
.pop .body .from small{display:block;font-weight:600;color:var(--mute);font-size:var(--fs-10);letter-spacing:.05em;text-transform:uppercase}

/* listing grid */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:38px 26px}
/* La carte n'est plus un conteneur : ni fond, ni bordure, ni ombre. La photo
   tient le cadre, la typographie tient le reste, et le blanc de la grille
   separe. Seule l'image garde un filet : mesure faite sur les 9 boutiques,
   Cezame et Berenger photographient sur blanc pur (255,255,255 et 254,254,254)
   et leurs 36 annonces se dissoudraient dans le fond sans lui. */
.card{position:relative;background:transparent;border:0;border-radius:0;cursor:pointer;display:flex;flex-direction:column}
.card:hover .art{border-color:var(--silver)}
.card-cover-link{position:absolute;inset:0;z-index:2}
.card-cover-link span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.card .art{position:relative;width:100%;aspect-ratio:4/3;flex:none;background:#FFFFFF;overflow:hidden;
  border:1px solid var(--hair);transition:border-color .2s ease}
.card .art svg{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);height:168px}
.card .art img,.opp .art img{transform:scale(1.04);transform-origin:center}
.card .badges{position:absolute;top:10px;left:10px;display:flex;flex-direction:column;gap:6px;align-items:flex-start;z-index:3}
/* Separateur de metadonnees : un filet vertical fin plutot qu'un point median.
   Le point median assemblant des chaines ("A · B · C") est un marqueur
   d'interface generee ; le filet est un dispositif structurel, il se regle
   depuis la feuille de style et suit la couleur du texte environnant. */
.metasep::before{content:"";display:inline-block;width:1px;height:.8em;
  background:currentColor;opacity:.32;margin:0 9px;vertical-align:-.06em}

.badge{font-family:Manrope;font-weight:700;font-size:var(--fs-10);letter-spacing:.03em;padding:4px 9px;border-radius:var(--r-sm);background:var(--white);color:var(--ink);border:1px solid var(--hair-2)}
.badge.new{background:var(--gold-ink);color:#fff;border-color:transparent}
.badge.drop{background:var(--down);color:#fff;border-color:transparent}
.badge.set{background:var(--ink);color:var(--paper);border-color:transparent}
.badge.vrf{background:#fff;color:var(--gold-ink);border-color:var(--gold-ink)}
.heart,.card-share{position:absolute;top:9px;right:9px;width:34px;height:34px;border-radius:var(--r-sm);background:rgba(255,255,255,.9);
  display:flex;align-items:center;justify-content:center;border:1px solid var(--hair);transition:.15s;z-index:3}
.heart:hover,.card-share:hover{background:#fff;border-color:var(--silver)}
.heart svg,.card-share svg{width:18px;height:18px;color:var(--ink-soft)}
.heart.on svg{color:var(--up);fill:var(--up)}
.card-share{right:51px}
.card .body{padding:15px 0 0;display:flex;flex-direction:column;gap:4px;flex:1}
.card .brand{font-family:Manrope;font-weight:700;font-size:var(--fs-11);letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.card .model{font-size:var(--fs-15);font-weight:600;line-height:1.25}
.card .ref{font-family:Manrope;font-size:var(--fs-12);color:var(--ink-soft)}
.card .meta{font-family:Manrope;font-size:var(--fs-11);color:var(--mute);margin-top:2px;display:flex;align-items:center;flex-wrap:wrap;gap:4px}
.card .meta .ctry{display:inline-flex;align-items:center;gap:5px}
.card .meta .ctry img{display:block}
.mini-specs{display:flex;align-items:center;gap:0;flex-wrap:wrap;margin-top:7px}
.mini-specs span{font-family:Manrope;font-size:var(--fs-11);font-weight:600;color:var(--ink-soft);
  background:transparent;border:0;border-radius:0;padding:0}
.mini-specs span+span::before{content:"";display:inline-block;width:1px;height:.8em;
  background:currentColor;opacity:.32;margin:0 9px;vertical-align:-.06em}
.card .price{margin-top:auto;padding-top:10px;display:flex;align-items:flex-end;justify-content:space-between;gap:8px;font-variant-numeric:tabular-nums}
.card .price .big{font-family:Manrope;font-weight:700;font-size:var(--fs-18);letter-spacing:-.01em}
.card .price .orig{font-family:Manrope;font-size:var(--fs-11);color:var(--mute)}
.card .foot{display:flex;align-items:center;justify-content:space-between;margin-top:9px}
.card .src{font-family:Manrope;font-size:var(--fs-11);color:var(--ink-soft);display:flex;align-items:center;gap:5px}
.card .foot .src{position:relative;z-index:3}
.card .flag{font-size:var(--fs-13)}
.pdiff{font-family:Manrope;font-weight:700;font-size:var(--fs-11);padding:3px 7px;border-radius:var(--r-sm)}
.pdiff.under{color:var(--down);background:rgba(30,94,63,.09)}
.pdiff.over{color:var(--up);background:rgba(140,47,47,.08)}
.pdiff.fair{color:var(--ink-soft);background:var(--paper-2)}

/* opportunities */
.opp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.opp{border:1px solid var(--hair);border-radius:var(--r);background:var(--white);padding:18px;display:flex;gap:16px;align-items:center;cursor:pointer;transition:.18s}
.opp:hover{border-color:var(--silver);box-shadow:var(--shadow)}
.opp .art{width:78px;height:92px;flex:0 0 auto;border-radius:var(--r-sm);background:linear-gradient(160deg,#F1F1ED,#E6E6E1);display:flex;align-items:center;justify-content:center}
.opp .art svg{height:80px}
.opp h4{font-size:var(--fs-14)}
.opp .ref{font-family:Manrope;font-size:var(--fs-11);color:var(--mute)}
.opp .rows{margin-top:8px;font-family:Manrope;font-size:var(--fs-12)}
.opp .rows div{display:flex;justify-content:space-between;gap:12px;padding:1px 0}
.opp .rows .demand{font-weight:700}
.opp .rows .gap{color:var(--down);font-weight:700}

/* brands strip */
.brands-strip{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.brand-tile{border:1px solid var(--hair);border-radius:var(--r);background:var(--white);padding:20px 12px;text-align:center;cursor:pointer;transition:.15s}
.brand-tile:hover{border-color:var(--silver);background:var(--paper-2)}
.brand-tile .bn{font-family:"Playfair Display",serif;font-size:var(--fs-16)}
.brand-tile .bc{font-family:Manrope;font-size:var(--fs-11);color:var(--mute);margin-top:3px}

/* annuaire complet des marques (/marques/) */
.marques-directory-search{margin-bottom:24px}
.marques-directory-search input{width:100%;max-width:420px;font-family:Manrope,sans-serif;font-size:var(--fs-14);
  border:1px solid var(--hair-2);border-radius:var(--r-btn);padding:12px 18px;background:var(--white);color:var(--ink)}
.marques-directory-search input:focus{outline:2px solid var(--gold-ink);outline-offset:1px}
.marques-directory-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.marque-tile{border:1px solid var(--hair);border-radius:var(--r);background:var(--white);padding:18px 12px;
  text-align:center;cursor:pointer;transition:.15s;display:flex;flex-direction:column;align-items:center;gap:8px}
.marque-tile:hover{border-color:var(--silver);background:var(--paper-2);transform:translateY(-1px)}
.marque-tile-logo{width:76px;height:76px;border-radius:var(--r-round);background:var(--paper-2);border:1px solid var(--hair);
  display:flex;align-items:center;justify-content:center;overflow:hidden;flex:0 0 auto}
.marque-tile-logo img{width:100%;height:100%;object-fit:contain;padding:6px}
.marque-tile-initial{font-family:"Playfair Display",serif;font-size:var(--fs-26);color:var(--ink-soft);width:100%;height:100%;align-items:center;justify-content:center}
.marque-tile-name{font-family:"Playfair Display",serif;font-size:var(--fs-14);line-height:1.25}
.marque-tile-count{font-family:Manrope,sans-serif;font-size:var(--fs-10);color:var(--mute)}

/* CTA blocks */
.cta{border-radius:var(--r);padding:22px;display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.cta.story{padding:14px;flex-wrap:nowrap;align-items:center;gap:22px}
.cta.alert{background:linear-gradient(120deg,#F8F6F0,#F2ECDD);border:1px solid rgba(195,155,94,.3);color:var(--ink)}
.cta.alert .btn-ondark{background:#0B1E33;color:#F5F1E6;border:2px solid #D9B679}
.cta.alert .btn-ondark:hover{background:#123049}
.cta.pro{background:var(--white);border:1px solid var(--hair-2)}
.cta.muted{background:var(--paper-2);border:1px solid var(--hair-2)}
.cta.story{background:var(--paper-2);border:1px solid var(--hair-2)}
.cta h3{font-family:"Playfair Display",serif;font-size:var(--fs-26)}
.cta .txt{flex:1;min-width:260px}
.cta .cover{width:200px;height:200px;border-radius:var(--r);object-fit:cover;object-position:center 75%;flex:0 0 auto}
.cta.story .cover{width:min(36vw,390px);height:220px;border-radius:var(--r)}
.cta.alert .sub{color:var(--ink-soft);margin-top:8px}
.cta.pro .sub{color:var(--ink-soft);margin-top:8px}
.cta.muted .sub{color:var(--ink-soft);margin-top:8px}
.cta.story .eyebrow{color:var(--gold-ink)}
.cta.story h3{color:var(--ink);margin-top:8px;font-size:var(--fs-26)}
.cta.story .divider{color:var(--gold-ink);margin:12px 0;letter-spacing:.3em;font-size:var(--fs-13)}
.cta.story .sub{color:var(--ink-soft);margin-top:4px;max-width:620px;line-height:1.45}
.cta.story .storylink{display:inline-block;margin-top:12px;color:var(--gold-ink);font-weight:700;font-size:var(--fs-14);text-decoration:none;border-bottom:1px solid rgba(138,106,47,.35);padding-bottom:3px;cursor:pointer}
.cta.story .storylink:hover{color:var(--gold-ink-2);border-color:var(--gold-ink-2)}
.cta.story .acts{align-items:center;justify-content:flex-end;flex:0 0 auto}
.cta.story .acts .btn{background:var(--ink);color:var(--paper);padding:11px 18px;border-radius:var(--r-btn)}
.cta .slogan{font-family:"Playfair Display",serif;font-style:italic;font-weight:400;color:var(--ink-soft);margin-top:10px;padding-left:14px;border-left:2px solid var(--gold);font-size:var(--fs-16);letter-spacing:.01em}
.cta .acts{display:flex;gap:12px;flex-wrap:wrap}
.cta.muted .acts .btn{background:var(--ink);color:var(--paper)}
.btn-ondark{background:#EDEFEC;color:var(--accent-ink)}
.btn-ondark:hover{background:#fff}
.btn-ondark.ghost{background:transparent;color:#EDEFEC;border:1px solid rgba(255,255,255,.35)}
.story-magnify-btn{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;gap:10px;
  background:rgba(20,22,26,.96);color:#F5F1E6;border:1px solid rgba(217,182,121,.86);padding:13px 22px;box-shadow:none;
  transition:transform .18s ease,border-color .18s ease,background-color .18s ease}
.story-magnify-btn>span{position:relative;z-index:2;color:#F5F1E6;transition:transform .22s ease}
.story-magnify-btn::before{content:"";position:absolute;left:18px;top:50%;z-index:1;width:42px;height:42px;border-radius:50%;
  border:1px solid rgba(217,182,121,.55);background:radial-gradient(circle at 34% 30%,rgba(255,255,255,.28),rgba(217,182,121,.10) 46%,rgba(217,182,121,0) 72%);
  opacity:0;transform:translate(-45%,-50%) scale(.42);transition:left .34s cubic-bezier(.22,.61,.36,1),opacity .22s ease,transform .34s cubic-bezier(.22,.61,.36,1)}
.story-magnify-icon{position:relative;z-index:2;color:#D9B679;transition:transform .24s cubic-bezier(.22,.61,.36,1)}
.story-magnify-btn:hover{background:#1F2328;border-color:#D9B679;transform:translateY(-1px)}
.story-magnify-btn:hover::before{left:calc(100% - 30px);opacity:1;transform:translate(-50%,-50%) scale(1)}
.story-magnify-btn:hover>span{transform:translateX(-2px)}
.story-magnify-btn:hover .story-magnify-icon{transform:translateX(2px) scale(1.16) rotate(-8deg)}

/* sponsored */
.sponsored{border:1px dashed var(--hair-2);border-radius:var(--r);background:var(--paper-2);padding:16px 18px;display:flex;align-items:center;gap:16px}
.sponsored .tag{font-family:Manrope;font-weight:700;font-size:var(--fs-10);letter-spacing:.14em;text-transform:uppercase;color:var(--mute);border:1px solid var(--hair-2);padding:3px 7px;border-radius:var(--r-sm);background:#fff}
.sponsored .sp-body{flex:1}
.sponsored h4{font-size:var(--fs-15)}
.sponsored p{margin:2px 0 0;font-size:var(--fs-13);color:var(--ink-soft)}

/* ---------- Search page ---------- */
.searchtop{background-color:#0B1E33;background-repeat:repeat;background-position:left top;background-size:48px 100%;
  background-image:linear-gradient(90deg,transparent,transparent 47px,rgba(195,155,94,.32) 47px,rgba(195,155,94,.32) 48px);padding:24px 0}.searchtop .searchbox{max-width:640px;margin:0 auto;box-shadow:none}
.searchtop .ac{margin:0 auto}
.results-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:24px 0 24px}
.results-head h1{font-size:var(--fs-26);font-family:"Playfair Display",serif}
.results-head .count{font-family:Manrope;color:var(--mute);font-weight:600;font-size:var(--fs-14)}
.toolbar{display:flex;align-items:center;gap:10px}
.viewtoggle{display:flex;border:1px solid var(--hair-2);border-radius:var(--r-sm);overflow:hidden}
.viewtoggle button{width:38px;height:36px;display:flex;align-items:center;justify-content:center;color:var(--mute)}
.viewtoggle button.on{background:var(--ink);color:var(--paper)}
.layout{display:grid;grid-template-columns:262px 1fr;gap:26px;align-items:start;padding-bottom:60px}
.filters{position:sticky;top:80px;border:1px solid var(--hair);border-radius:var(--r);background:var(--white);padding:6px 0;max-height:calc(100vh - 100px);overflow:auto}
.filters .fhead{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--hair)}
.filters .fhead h3{font-family:Manrope;font-size:var(--fs-14);font-weight:700}
.filters .clr{font-family:Manrope;font-size:var(--fs-12);color:var(--gold-ink);font-weight:600}
.fgroup{border-bottom:1px solid var(--hair);padding:14px 18px}
.fgroup:last-child{border-bottom:0}
.fgroup > .lbl{font-family:Manrope;font-weight:700;font-size:var(--fs-11);letter-spacing:.09em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:10px;display:flex;justify-content:space-between;cursor:pointer}
.frow{display:flex;gap:8px}
.frow input,.fgroup select{width:100%;font-family:Manrope;font-size:var(--fs-13);padding:8px 10px;border:1px solid var(--hair-2);border-radius:var(--r-sm);background:#fff;color:var(--ink);outline:0}
.fgroup select:focus,.frow input:focus{border-color:var(--gold-ink)}
.checks{display:flex;flex-direction:column;gap:8px}
.chk{display:flex;align-items:center;gap:9px;font-family:Manrope;font-size:var(--fs-13);color:var(--ink-soft);cursor:pointer}
.chk input{width:16px;height:16px;accent-color:var(--gold-ink)}
.opt-list{display:flex;flex-wrap:wrap;gap:7px}
.opt{font-family:Manrope;font-size:var(--fs-12);font-weight:600;padding:6px 10px;border:1px solid var(--hair-2);border-radius:var(--r-btn);color:var(--ink-soft);cursor:pointer}
.opt.on{background:var(--gold-ink);color:#fff;border-color:var(--gold-ink)}
.mobile-filter-btn{display:none}

/* list mode */
/* Vue liste : meme principe que la grille, applique a une ligne. La photo
   garde son filet, le texte n'a plus de caisson, et c'est le blanc entre
   les lignes qui separe -- comme une liste de lots de catalogue. */
.grid.list{grid-template-columns:1fr;gap:26px}
.grid.list .card{flex-direction:row;min-height:250px}
.grid.list.boutiques-grid .card{min-height:220px}
.grid.list .card .art{position:absolute;top:0;left:0;bottom:0;width:320px;height:auto;aspect-ratio:auto;border:1px solid var(--hair)}
.grid.list .card .art img{width:100%;height:100%}
.grid.list .card .art svg{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);height:130px}
.grid.list .card .body{margin-left:348px;padding:2px 0 0}

/* skeleton */
.sk{border:1px solid var(--hair);border-radius:var(--r);background:var(--white);overflow:hidden}
.sk .a{height:190px;background:linear-gradient(90deg,#eee,#f4f4f0,#eee);background-size:200% 100%;animation:sh 1.2s infinite}
.sk .b{padding:14px 15px}
.sk .l{height:11px;border-radius:var(--r-sm);background:#ececE8;margin-bottom:9px;animation:sh 1.2s infinite;background-image:linear-gradient(90deg,#ececE8,#f5f5f1,#ececE8);background-size:200% 100%}
.sk .l.s{width:55%}.sk .l.m{width:80%}
@keyframes sh{0%{background-position:200% 0}100%{background-position:-200% 0}}

.empty{border:1px dashed var(--hair-2);border-radius:var(--r);padding:60px 24px;text-align:center;background:var(--white)}
.empty h3{font-family:"Playfair Display",serif;font-size:var(--fs-22);margin-bottom:8px}
.empty p{color:var(--ink-soft);max-width:420px;margin:0 auto 18px}
.loadmore{display:flex;justify-content:center;margin-top:26px}
.pagination{display:flex;justify-content:center;align-items:center;gap:6px;margin-top:32px;flex-wrap:wrap}
.pg-btn{min-width:38px;height:38px;padding:0 10px;border-radius:var(--r-sm);border:1px solid var(--hair-2);background:var(--white);color:var(--ink-soft);font-family:Manrope,sans-serif;font-weight:600;font-size:var(--fs-14);cursor:pointer;transition:.15s}
.pg-btn:hover:not(:disabled){border-color:var(--silver);color:var(--ink)}
.pg-btn.on{background:var(--gold-ink);border-color:var(--gold-ink);color:#fff}
.pg-btn:disabled{opacity:.4;cursor:default}
.pg-ellipsis{color:var(--mute);font-size:var(--fs-13);padding:0 2px}

/* ---------- Detail panel ---------- */
.overlay{position:fixed;inset:0;background:rgba(20,22,26,.42);backdrop-filter:blur(2px);z-index:100;opacity:0;pointer-events:none;transition:.25s}
.overlay.open{opacity:1;pointer-events:auto}
.panel{position:fixed;top:50%;left:50%;height:auto;max-height:88vh;width:min(920px,92vw);background:var(--paper);z-index:101;
  border-radius:var(--r);transform:translate(-50%,-48%) scale(.97);opacity:0;pointer-events:none;
  transition:transform .3s cubic-bezier(.4,0,.2,1),opacity .25s;overflow:auto;box-shadow:var(--shadow-lg)}
.panel.open{transform:translate(-50%,-50%) scale(1);opacity:1;pointer-events:auto}
.panel.panel-page{position:static;transform:none;opacity:1;pointer-events:auto;
  width:100%;margin:0 0 28px;max-height:none;box-shadow:var(--shadow)}
.panel .ph{position:sticky;top:0;background:rgba(245,245,242,.9);backdrop-filter:blur(8px);z-index:5;display:flex;align-items:center;gap:12px;padding:14px 20px;border-bottom:1px solid var(--hair)}
.panel .ph .eyebrow{margin:0}
.panel .ph .x{width:36px;height:36px;border-radius:var(--r-sm);border:1px solid var(--hair-2);background:#fff;display:flex;align-items:center;justify-content:center}
.pgrid{display:grid;grid-template-columns:1.3fr 1fr;gap:32px;padding:22px}
.pgallery-col{align-self:start}
.pgallery-col .pgallery{position:relative;width:100%;height:0;padding-bottom:75%;background:#FFFFFF;border:1px solid var(--hair);cursor:zoom-in;border-radius:var(--r);overflow:hidden}
.pgallery .main{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.pgallery .main svg{height:250px}
.thumbs{display:flex;gap:8px;padding:12px 0;overflow:auto}
.thumb{width:64px;height:64px;flex:0 0 auto;border-radius:var(--r-sm);border:1px solid var(--hair-2);background:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer}
.thumb svg{height:52px}
.thumb.on{border-color:var(--gold-ink)}
.pinfo-col h2{font-family:"Playfair Display",serif;font-size:var(--fs-26);line-height:1.15}
.pinfo-col .pref{font-family:Manrope;color:var(--mute);font-weight:600;font-size:var(--fs-13);margin-top:4px;display:flex;align-items:center;flex-wrap:wrap;gap:6px}
.pinfo-col .pref .ctry{display:inline-flex;align-items:center;gap:5px}
.pinfo-col .pref .ctry img{display:block}
.pinfo-col .btns{display:flex;gap:10px}
.pinfo-col .btns .btn{flex:1;justify-content:center}
.pinfo-col .btns .btn.icon-action{flex:0 0 auto;padding:11px 14px}
.pinfo-col .btns .btns-icons{display:flex;gap:10px;flex:0 0 auto}
.pinfo-col .btns .panel-main-btn{flex:2}
.pinfo-col .note{font-size:var(--fs-11);color:var(--mute);margin:10px 0 16px}
.pprice{display:flex;align-items:baseline;gap:12px;margin:14px 0}
.pprice .big{font-family:Manrope;font-weight:700;font-size:var(--fs-30);letter-spacing:-.02em}
.pprice .orig{font-family:Manrope;color:var(--mute);font-size:var(--fs-14)}
.trust-strip{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:-2px 0 14px}
.trust-strip span{font-family:Manrope;font-size:var(--fs-12);font-weight:700;color:var(--ink-soft);background:#fff;border:1px solid var(--hair);border-radius:var(--r-btn);padding:6px 10px}
.trust-strip b{color:var(--ink)}
.estim{border:1px solid var(--hair);background:var(--white);border-radius:var(--r);padding:16px;margin:16px 0}
.estim .row{display:flex;justify-content:space-between;font-family:Manrope;font-size:var(--fs-13);padding:5px 0}
.estim .row b{font-weight:700}
.soon{font-family:Manrope;font-size:var(--fs-10);font-weight:700;letter-spacing:.06em;background:var(--paper-2);color:var(--mute);padding:2px 6px;border-radius:var(--r-sm);text-transform:uppercase}

/* ---------- Brand / Model pages ---------- */
.hdrpage{background:var(--white);border-bottom:1px solid var(--hair);padding:40px 0}
.pagebackbtn{width:36px;height:36px;border-radius:var(--r-sm);border:1px solid var(--hair-2);background:#fff;display:flex;align-items:center;justify-content:center;margin-bottom:20px;cursor:pointer}
.pagebackbtn:hover{background:var(--paper-2)}
.brandhero{display:flex;gap:30px;align-items:center;flex-wrap:wrap}
.brandhero .em{width:96px;height:96px;border-radius:var(--r);background:var(--paper-2);border:1px solid var(--hair);color:var(--ink-soft);display:flex;align-items:center;justify-content:center;font-family:"Playfair Display",serif;font-size:var(--fs-38);flex:0 0 auto;overflow:hidden}
.brandhero .em img{width:100%;height:100%;object-fit:contain;padding:14px}
.brandhero .em-initial{width:100%;height:100%;align-items:center;justify-content:center}
.brandhero h1{font-family:"Playfair Display",serif;font-size:var(--fs-38)}
.brandhero p{color:var(--ink-soft);max-width:560px;margin:8px 0 0}
.kpis{display:flex;gap:34px;margin-top:20px;flex-wrap:wrap}
.kpi .n{font-family:Manrope;font-weight:700;font-size:var(--fs-26)}
.kpi .l{font-family:Manrope;font-size:var(--fs-11);letter-spacing:.08em;text-transform:uppercase;color:var(--mute);font-weight:700}
.chart{border:1px solid var(--hair);border-radius:var(--r);background:var(--white);padding:20px}
.reftable{width:100%;border-collapse:collapse;font-family:Manrope;font-size:var(--fs-13);font-variant-numeric:tabular-nums}
.reftable th,.reftable td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--hair)}
.reftable th{font-size:var(--fs-11);letter-spacing:.06em;text-transform:uppercase;color:var(--mute);font-weight:700}
.reftable td.num{font-weight:700;text-align:right}
.reftable tr{cursor:pointer}
.reftable tbody tr:hover{background:var(--paper-2)}

/* ---------- Favorites / Alerts / Pro / Static ---------- */
.pagepad{padding-top:36px;padding-bottom:70px}
.pagehead{margin-bottom:24px}
.pagehead h1{font-family:"Playfair Display",serif;font-size:var(--fs-30)}
.pagehead p{color:var(--ink-soft);margin-top:6px}
.alert-card{border:1px solid var(--hair);background:var(--white);border-radius:var(--r);padding:18px 20px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.alert-card .info{flex:1;min-width:200px}
.alert-card h4{font-size:var(--fs-16)}
.alert-card .crit{font-family:Manrope;font-size:var(--fs-12);color:var(--ink-soft);margin-top:4px}
.pill{font-family:Manrope;font-weight:700;font-size:var(--fs-11);padding:3px 9px;border-radius:var(--r-btn);background:var(--paper-2);color:var(--ink-soft)}
.pill.live{background:rgba(30,94,63,.1);color:var(--down)}
.pill.paused{background:rgba(140,47,47,.09);color:var(--up)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.field label{font-family:Manrope;font-weight:700;font-size:var(--fs-11);letter-spacing:.07em;text-transform:uppercase;color:var(--ink-soft);display:block;margin-bottom:6px}
.field input,.field select{width:100%;font-family:Manrope;font-size:var(--fs-14);padding:10px 12px;border:1px solid var(--hair-2);border-radius:var(--r-sm);background:#fff;outline:0}
.field input:focus,.field select:focus{border-color:var(--gold-ink)}
.dash-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.dash-kpi{border:1px solid var(--hair);background:var(--white);border-radius:var(--r);padding:18px}
.dash-kpi .n{font-family:Manrope;font-weight:700;font-size:var(--fs-26)}
.dash-kpi .l{font-family:Manrope;font-size:var(--fs-11);letter-spacing:.07em;text-transform:uppercase;color:var(--mute);font-weight:700;margin-bottom:6px}
.dash-kpi .d{font-family:Manrope;font-size:var(--fs-11);font-weight:700;margin-top:6px}
.dash-kpi .d.up{color:var(--down)} .dash-kpi .d.dn{color:var(--up)}
.panelbox{border:1px solid var(--hair);background:var(--white);border-radius:var(--r);padding:20px}
.bar{display:flex;align-items:center;gap:12px;margin:10px 0;font-family:Manrope;font-size:var(--fs-13)}
.bar .track{flex:1;height:8px;background:var(--paper-2);border-radius:var(--r-sm);overflow:hidden}
.bar .fill{height:100%;background:var(--gold-ink);border-radius:var(--r-sm)}
.prose{max-width:720px}
.prose h2{font-family:"Playfair Display",serif;font-size:var(--fs-26);margin:28px 0 10px}
.prose p{color:var(--ink-soft);margin:10px 0}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:8px}
.step{border:1px solid var(--hair);border-radius:var(--r);background:var(--white);padding:22px}
.step .no{font-family:"Playfair Display",serif;font-size:var(--fs-30);color:var(--gold-ink)}
.step h4{margin-top:8px;font-size:var(--fs-16)}
.step p{color:var(--ink-soft);font-size:var(--fs-13);margin-top:6px}

/* ---------- Info pages ---------- */
.info-page{padding-bottom:76px}
.info-page footer{margin-top:0}
.info-hero{background:var(--white);border-bottom:1px solid var(--hair);padding:68px 0 96px}
.info-hero-inner{max-width:820px}
.info-hero-centered{text-align:center;margin:0 auto}
.info-hero .eyebrow{margin-bottom:14px}
.info-hero h1{font-family:"Playfair Display",Georgia,serif;font-size:var(--fs-56);line-height:1.02;font-weight:600;color:var(--ink)}
.info-hero p{max-width:720px;margin:18px auto 0;color:var(--ink-soft);font-size:var(--fs-18)}
.info-hero-actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:28px}
.info-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:0;background:#0B1E33;color:#F5F1E6;border:1px solid rgba(195,155,94,.42);box-shadow:var(--shadow);padding:0}
.info-stats-overlap{margin-top:-44px;position:relative;z-index:2}
.info-stat{min-height:132px;padding:26px 28px;display:grid;grid-template-columns:auto 1fr;column-gap:18px;align-items:center;border-right:1px solid rgba(195,155,94,.32)}
.info-stat:last-child{border-right:0}
.info-stat-rule{width:3px;height:54px;background:var(--gold);display:block}
.info-stat strong{display:block;font-family:Manrope,Inter,sans-serif;font-size:var(--fs-30);line-height:1;font-weight:800;color:#fff}
.info-stat span:last-child{display:block;margin-top:6px;color:#C9CDCB;font-family:Manrope,Inter,sans-serif;font-size:var(--fs-14);line-height:1.45}
.info-section{padding-top:70px}
.info-section-head{max-width:680px;margin-bottom:24px}
.info-section-head.compact{margin-bottom:20px}
.info-section-head .eyebrow{margin-bottom:8px}
.info-section-head h2,.info-copy h2,.info-mission h2,.info-feature-copy h2,.info-contact-aside h2{font-family:"Playfair Display",Georgia,serif;font-size:var(--fs-38);line-height:1.08;font-weight:600}
.info-step-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.info-step{background:var(--white);border:1px solid var(--hair);border-radius:var(--r);padding:22px;min-height:220px}
.info-step-no{font-family:Manrope,Inter,sans-serif;font-weight:800;color:var(--gold-ink);font-size:var(--fs-13);letter-spacing:.08em;margin-bottom:44px}
.info-step h3{font-size:var(--fs-18);margin-bottom:8px}
.info-step p{color:var(--ink-soft);font-size:var(--fs-14);margin:0}
.info-split{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:46px;align-items:center;margin-top:64px}
.info-split-dark{background:#0B1E33;color:#F5F1E6;border:1px solid rgba(195,155,94,.38);padding:34px;background-repeat:repeat;background-position:left top;background-size:48px 100%;background-image:linear-gradient(90deg,transparent,transparent 47px,rgba(195,155,94,.22) 47px,rgba(195,155,94,.22) 48px)}
.info-split-dark .eyebrow{color:var(--gold)}
.info-split-dark p,.info-split-dark li{color:#C9CDCB}
.info-visual{background:var(--paper);border:1px solid rgba(255,255,255,.26);min-height:330px;padding:28px;position:relative;overflow:hidden}
.info-search-visual{display:flex;flex-direction:column;justify-content:center;gap:16px}
.info-visual-bar{height:50px;background:var(--white);border:1px solid var(--hair-2);box-shadow:0 16px 34px rgba(0,0,0,.12)}
.info-visual-row{height:16px;width:72%;background:#D7DAD8}
.info-visual-row.strong{height:24px;width:88%;background:#9EA7AD}
.info-visual-row.short{width:46%}
.info-visual-price{position:absolute;right:24px;bottom:24px;background:#0B1E33;color:#F5F1E6;border:2px solid var(--gold);padding:12px 16px;font-family:Manrope,Inter,sans-serif;font-weight:800}
.info-product-visual{min-height:400px;padding:26px;background:#F7F7F4;display:grid;grid-template-columns:minmax(190px,260px) minmax(200px,1fr);gap:16px;align-items:center;justify-content:center;overflow:hidden}
.moonshot{position:relative;width:76%;max-width:380px;min-height:390px;background:var(--white);border:1px solid var(--hair-2);box-shadow:0 26px 54px rgba(0,0,0,.22);padding:14px;display:flex;flex-direction:column;gap:12px}
.moonshot-real{width:260px;max-width:100%;height:auto;min-height:0;padding:0;display:block;overflow:hidden;border:6px solid var(--white);box-shadow:0 26px 54px rgba(0,0,0,.24)}
.moonshot-real img{display:block;width:100%;height:auto;object-fit:contain}
.moonshot-detail-zoom{height:250px;min-width:0;position:relative;background:#fff;border:6px solid #fff;box-shadow:0 24px 52px rgba(0,0,0,.18);overflow:hidden;align-self:center}
.moonshot-detail-zoom .zoom-label{position:absolute;left:14px;top:14px;z-index:2;font-family:Manrope,Inter,sans-serif;font-size:var(--fs-10);font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-ink);background:rgba(255,255,255,.88);padding:5px 7px;border:1px solid rgba(195,155,94,.28)}
.moonshot-detail-zoom img{position:absolute;width:440px;max-width:none;height:auto;left:10px;top:-322px}
.moonshot-top{height:38px;background:#0B1E33;color:#F5F1E6;display:flex;align-items:center;justify-content:space-between;padding:0 14px;background-repeat:repeat;background-position:left top;background-size:24px 100%;background-image:linear-gradient(90deg,transparent,transparent 23px,rgba(195,155,94,.25) 23px,rgba(195,155,94,.25) 24px)}
.moonshot-top strong{font-family:"Playfair Display",Georgia,serif;font-size:var(--fs-18);line-height:1}
.moonshot-top span{font-family:Manrope,Inter,sans-serif;font-size:var(--fs-10);font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--gold)}
.moonshot-search{height:48px;border:1px solid var(--hair-2);display:grid;grid-template-columns:1fr auto;align-items:center;background:#fff}
.moonshot-search span{font-family:Manrope,Inter,sans-serif;color:var(--ink-soft);padding-left:14px;font-size:var(--fs-13)}
.moonshot-search b{height:100%;display:flex;align-items:center;background:#0B1E33;color:#F5F1E6;padding:0 14px;border-left:2px solid var(--gold);font-family:Manrope,Inter,sans-serif;font-size:var(--fs-11)}
.moonshot-layout{display:grid;grid-template-columns:86px 1fr;gap:12px;min-height:270px}
.moonshot-filters{background:var(--paper);border:1px solid var(--hair);padding:12px 10px;display:grid;align-content:start;gap:8px}
.moonshot-filters span{font-family:Manrope,Inter,sans-serif;font-size:var(--fs-10);font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.moonshot-filters em{display:block;height:8px;width:100%;background:#CFD3D4}
.moonshot-filters em.short{width:72%}
.moonshot-results{display:grid;gap:9px;align-content:start}
.moonshot-card{min-height:72px;background:var(--white);border:1px solid var(--hair);display:grid;grid-template-columns:56px 1fr;gap:10px;align-items:center;padding:8px}
.moonshot-card img{width:56px;height:56px;object-fit:contain;filter:drop-shadow(0 8px 10px rgba(20,22,26,.16))}
.moonshot-card strong{display:block;font-family:"Playfair Display",Georgia,serif;font-size:var(--fs-14);line-height:1.1;color:var(--ink)}
.moonshot-card span{display:block;margin-top:4px;font-family:Manrope,Inter,sans-serif;font-size:var(--fs-10);font-weight:700;color:var(--mute)}
.info-copy p,.info-mission-text p,.info-feature-copy p{color:var(--ink-soft);font-size:var(--fs-16);margin:14px 0 0}
.info-split-dark .info-copy p,.info-split-dark .info-checklist li{color:#C9CDCB}
.info-checklist{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:10px}
.info-checklist li{position:relative;padding-left:20px;font-family:Manrope,Inter,sans-serif;font-size:var(--fs-14)}
.info-checklist li::before{content:"";position:absolute;left:0;top:.72em;width:7px;height:7px;background:var(--gold);border-radius:var(--r-round)}
.info-mission{padding-top:72px}
.info-mission-text{max-width:760px;margin-bottom:30px}
.info-mission-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.info-mission-grid article{background:var(--white);border:1px solid var(--hair);border-radius:var(--r);padding:24px}
.info-mission-grid span{font-family:Manrope,Inter,sans-serif;font-weight:800;color:var(--gold-ink);font-size:var(--fs-12);letter-spacing:.1em}
.info-mission-grid h3{font-size:var(--fs-22);margin:18px 0 8px}
.info-mission-grid p{color:var(--ink-soft);font-size:var(--fs-14);margin:0}
.info-feature-band{margin-top:54px;background:#0B1E33;color:#F5F1E6;border:1px solid rgba(195,155,94,.38);display:grid;grid-template-columns:.85fr 1.15fr;gap:44px;padding:38px;background-repeat:repeat;background-position:left top;background-size:48px 100%;background-image:linear-gradient(90deg,transparent,transparent 47px,rgba(195,155,94,.2) 47px,rgba(195,155,94,.2) 48px)}
.info-feature-band .eyebrow{color:var(--gold)}
.info-feature-band p{color:#C9CDCB}
.info-feature-list{display:grid;gap:0;border-top:1px solid rgba(195,155,94,.26)}
.info-feature-list div{padding:18px 0;border-bottom:1px solid rgba(195,155,94,.26)}
.info-feature-list strong{display:block;color:#fff;font-size:var(--fs-16);margin-bottom:4px}
.info-feature-list span{display:block;color:#C9CDCB;font-size:var(--fs-14)}
.info-contact-hero{padding:58px 0}
.info-contact-hero-grid{display:grid;grid-template-columns:minmax(0,1.1fr) 360px;gap:48px;align-items:center}
.info-contact-hero h1{font-size:var(--fs-38);line-height:1.1}
.info-contact-hero p{margin-left:0;margin-right:0}
.info-contact-card{background:#0B1E33;color:#F5F1E6;border:1px solid rgba(195,155,94,.45);padding:26px;min-height:210px;display:flex;flex-direction:column;justify-content:flex-end;background-repeat:repeat;background-position:left top;background-size:48px 100%;background-image:linear-gradient(90deg,transparent,transparent 47px,rgba(195,155,94,.24) 47px,rgba(195,155,94,.24) 48px)}
.info-contact-card strong{font-family:"Playfair Display",Georgia,serif;font-size:var(--fs-30);line-height:1}
.info-contact-card span{color:#C9CDCB;margin:10px 0 18px}
.info-contact-card a{color:var(--gold);font-family:Manrope,Inter,sans-serif;font-weight:800}
.info-contact-layout{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(280px,.8fr);gap:26px;padding-top:48px}
.info-contact-form,.info-contact-aside{background:var(--white);border:1px solid var(--hair);border-radius:var(--r);padding:28px}
.contact-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.contact-form-grid .full{grid-column:1/-1}
.field textarea{width:100%;font-family:Manrope;font-size:var(--fs-14);padding:10px 12px;border:1px solid var(--hair-2);border-radius:var(--r-sm);background:#fff;outline:0;resize:vertical;min-height:150px}
.field textarea:focus{border-color:var(--gold-ink)}
.info-contact-form .btn{margin-top:18px}
.info-contact-aside{align-self:start}
.info-contact-notes{margin-top:20px;border-top:1px solid var(--hair)}
.info-contact-notes div{padding:17px 0;border-bottom:1px solid var(--hair)}
.info-contact-notes strong{display:block;font-size:var(--fs-15);margin-bottom:4px}
.info-contact-notes span{display:block;color:var(--ink-soft);font-size:var(--fs-14)}

/* footer */
footer{background-color:#0B1E33;background-repeat:repeat;background-position:left top;background-size:48px 100%;
  background-image:linear-gradient(90deg,transparent,transparent 47px,rgba(195,155,94,.32) 47px,rgba(195,155,94,.32) 48px);color:#C9CDCB;padding:52px 0 28px;margin-top:20px}
footer .logo{color:#fff}
footer .cols{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px}
footer .footer-logo{flex-direction:column;align-items:center;gap:4px;font-size:var(--fs-30)}
footer .footer-logo .mark{width:84px;height:84px;margin-top:-5px}
footer h5{font-family:Manrope;font-size:var(--fs-11);letter-spacing:.12em;text-transform:uppercase;color:#C39B5E;margin:0 0 14px;font-weight:700}
footer a{display:block;padding:5px 0;font-size:var(--fs-13);color:#C9CDCB;transition:.15s}
footer a:hover{color:#fff}
.disclaimer{border-top:1px solid rgba(195,155,94,.25);margin-top:36px;padding-top:18px;font-size:var(--fs-11);color:#888F8C;line-height:1.6}

/* auth modal */
.modal{position:fixed;inset:0;z-index:120;display:none;align-items:center;justify-content:center;padding:20px}
.modal.open{display:flex}
.modal .bg{position:absolute;inset:0;background:rgba(20,22,26,.5)}
.modal .card2{position:relative;background:var(--paper);border-radius:var(--r);width:min(420px,100%);padding:30px;box-shadow:var(--shadow-lg)}
.modal h3{font-family:"Playfair Display",serif;font-size:var(--fs-26)}
.modal .tabs{display:flex;gap:6px;margin:16px 0;background:var(--paper-2);padding:4px;border-radius:var(--r-sm)}
.modal .tabs button{flex:1;padding:9px;font-family:Manrope;font-weight:600;font-size:var(--fs-13);border-radius:var(--r-sm);color:var(--ink-soft)}
.modal .tabs button.on{background:#fff;color:var(--ink);box-shadow:var(--shadow)}

/* mobile bottom nav */
.mobnav{display:none;position:fixed;bottom:0;left:0;right:0;z-index:70;background:rgba(245,245,242,.95);backdrop-filter:blur(10px);border-top:1px solid var(--hair);padding:8px 0 calc(8px + env(safe-area-inset-bottom));grid-template-columns:repeat(4,1fr)}
.mobnav a{display:flex;flex-direction:column;align-items:center;gap:3px;font-family:Manrope;font-size:var(--fs-10);font-weight:600;color:var(--mute)}
.mobnav a.on{color:var(--gold-ink)}
.mobnav svg{width:22px;height:22px}

/* toast */
.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(20px);background:var(--ink);color:var(--paper);
  font-family:Manrope;font-weight:600;font-size:var(--fs-13);padding:12px 20px;border-radius:var(--r-btn);box-shadow:var(--shadow-lg);z-index:200;opacity:0;transition:.25s;pointer-events:none}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* responsive */
@media(max-width:1080px){
  .grid{grid-template-columns:repeat(3,1fr)}
  .pop-grid,.opp-grid{grid-template-columns:repeat(2,1fr)}
  .brands-strip{grid-template-columns:repeat(3,1fr)}
  footer .cols{grid-template-columns:1fr 1fr;row-gap:32px}
}
@media(max-width:820px){
  .nav,.selects{display:none}
  .burger{display:inline-flex}
  .topbar{display:flex;align-items:center;justify-content:space-between}
  #navMobile{z-index:81;box-shadow:var(--shadow)}
  #navMobile.open{display:flex;position:absolute;top:64px;left:0;right:0;background:var(--paper);flex-direction:column;padding:10px;border-bottom:1px solid var(--hair);gap:2px}
  #navMobile a{color:var(--ink-soft);background:transparent}
  #navMobile a:hover,#navMobile a.on{color:var(--ink);background:var(--paper-2)}
  .layout{grid-template-columns:1fr}
  .filters{display:none;position:fixed;inset:auto 0 0 0;top:auto;max-height:82vh;border-radius:var(--r) var(--r) 0 0;z-index:105;max-width:100%}
  .filters.mopen{display:block}
  .mobile-filter-btn{display:inline-flex}
  .top-actions{padding-right:6px}
  .cta{flex-direction:column;text-align:center;align-items:center}
  .cta .txt{min-width:0}
  .cta .acts{justify-content:center}
  .cta.story{flex-wrap:wrap;gap:16px}
  .cta.story .cover{width:100%;height:240px}
  .cta.story .acts{width:100%;justify-content:center}
  .grid{grid-template-columns:repeat(2,1fr)}
  .picks-scroll{display:flex;grid-template-columns:none;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:24px;-webkit-overflow-scrolling:touch}
  .picks-scroll::-webkit-scrollbar{height:0}
  .picks-card{flex:0 0 260px;scroll-snap-align:start}
  .home-picks-head{align-items:flex-start}
  .home-picks-layout{display:flex;grid-template-columns:none;overflow-x:auto;gap:16px;padding:0 24px 6px;margin:0 -24px;scroll-snap-type:x mandatory;scroll-padding-left:24px;-webkit-overflow-scrolling:touch}
  .home-picks-layout::-webkit-scrollbar{height:0}
  .home-picks-layout>.fiche{flex:0 0 250px;scroll-snap-align:start}
  .home-pick-titre{font-size:var(--fs-18)}
  .latest-head{align-items:flex-start}
  .latest-grid{display:flex;grid-template-columns:none;overflow-x:auto;gap:16px;padding:0 24px 6px;margin:0 -24px;scroll-snap-type:x mandatory;scroll-padding-left:24px;-webkit-overflow-scrolling:touch}
  .latest-grid::-webkit-scrollbar{height:0}
  .latest-grid>.fiche{flex:0 0 280px;scroll-snap-align:start}
  .home-story-section{padding-top:20px;padding-bottom:42px}
  .home-story-card{grid-template-columns:1fr;min-height:0}
  .home-story-media{min-height:220px}
  .home-story-media::after{background:linear-gradient(180deg,rgba(11,30,51,.06),rgba(11,30,51,.42))}
  .home-story-content{padding:24px}
  .home-story-title{font-size:var(--fs-26)}
  .home-story-bottom{align-items:flex-start;flex-direction:column;gap:16px;padding-top:22px}
  .home-story-action{width:100%;justify-content:center}
  .boutiques-hero{grid-template-columns:1fr;gap:18px}
  .boutiques-count{border-left:0;border-top:1px solid var(--hair-2);padding-left:0;padding-top:16px}
  .boutiques-page .directory-tools{grid-template-columns:1fr}
  .boutique-directory-grid{grid-template-columns:1fr}
  .boutique-card{grid-template-columns:88px minmax(0,1fr);gap:14px;min-height:0;padding:14px}
  .boutique-card-logo{height:88px;padding:12px}
  .boutique-card-name{font-size:var(--fs-18)}
  .boutique-card-head{gap:10px}
  .boutique-card-count strong{font-size:var(--fs-18)}
  .boutique-card-desc{-webkit-line-clamp:2;margin-top:10px}
  .dash-kpis{grid-template-columns:repeat(2,1fr)}
  .form-grid,.steps{grid-template-columns:1fr}
  .info-page{padding-bottom:48px}
  .info-hero{padding:42px 0 72px}
  .info-hero h1{font-size:var(--fs-38);line-height:1.08}
  .info-hero p{font-size:var(--fs-16)}
  .info-stats{grid-template-columns:1fr}
  .info-stats-overlap{margin-top:-34px}
  .info-stat{min-height:0;border-right:0;border-bottom:1px solid rgba(195,155,94,.3);padding:22px}
  .info-stat:last-child{border-bottom:0}
  .info-step-grid,.info-mission-grid,.info-feature-band,.info-contact-hero-grid,.info-contact-layout{grid-template-columns:1fr}
  .info-step{min-height:0}
  .info-step-no{margin-bottom:24px}
  .info-split{grid-template-columns:1fr;gap:26px;margin-top:42px}
  .info-split-dark,.info-feature-band{padding:24px}
  .info-visual{min-height:250px}
  .info-product-visual{min-height:0;overflow:hidden;padding:22px;grid-template-columns:1fr;gap:14px}
  .moonshot{width:86%;max-width:360px;min-height:340px}
  .moonshot-real{width:252px;max-width:100%;height:auto;min-height:0;justify-self:center}
  .moonshot-detail-zoom{width:min(100%,252px);height:138px;justify-self:center}
  .moonshot-detail-zoom img{width:382px;left:8px;top:-280px}
  .info-section-head h2,.info-copy h2,.info-mission h2,.info-feature-copy h2,.info-contact-aside h2{font-size:var(--fs-30)}
  .info-mission{padding-top:54px}
  .info-contact-hero{padding:42px 0}
  .info-contact-card{min-height:180px}
  .contact-form-grid{grid-template-columns:1fr}
  .contact-form-grid .full{grid-column:auto}
  .hero{padding:44px 0 48px}
  .stats{position:static;left:auto;right:auto;bottom:auto;flex-direction:column;align-items:center;margin-top:24px;padding:0}
  .grid.list .card{flex-direction:column}
  .grid.list .card .art{position:static;width:auto;height:280px;aspect-ratio:auto}
  .grid.list .card .body{margin-left:0;padding:15px 0 0}
  .panel{width:100%;max-height:100%;height:100%;top:0;left:0;border-radius:0;transform:translateY(4%);}
  .panel.open{transform:translateY(0)}
  .pgallery-col .pgallery{height:280px;padding-bottom:0}
  .pgallery .main{position:static;height:100%}
  .pgrid{grid-template-columns:1fr;gap:20px;padding:16px}
  footer .cols{grid-template-columns:1fr 1fr;text-align:center;gap:32px 20px}
  footer .cols>div{display:flex;flex-direction:column;align-items:center}
  footer .cols>div:first-child,footer .cols>div:last-child{grid-column:1/-1}
  footer .footer-logo{align-items:center}
  .repairers-hero{grid-template-columns:1fr!important}
  .repairers-hero>div:last-child{display:none!important}
  .repairers-layout{grid-template-columns:1fr!important}
  .repairer-card{flex-direction:column}
}
@media(max-width:520px){
  .grid,.pop-grid,.opp-grid,.brands-strip{grid-template-columns:1fr}
  .pinfo-col .btns .panel-main-btn{flex:1 0 100%}
  /* Sur cette largeur le bouton partage repasse à gauche de la ligne : le
     menu doit s'ouvrir vers la droite pour ne pas sortir de l'écran. */
  .share-menu .contact-menu-dd{left:0;right:auto}
  .picks-card{flex-basis:78%}
  .home-picks-layout>.fiche{flex-basis:76%}
  .home-pick-titre{font-size:var(--fs-16)}
  .latest-grid>.fiche{flex-basis:82%}
  .latest-body h3{font-size:var(--fs-18)}
  .home-story-media{min-height:190px}
  .home-story-content{padding:22px 20px 20px}
  .home-story-title{font-size:var(--fs-22);line-height:1.12}
  .home-story-excerpt{font-size:var(--fs-14);line-height:1.55}
  .info-hero h1{font-size:var(--fs-30)}
  .info-hero-actions .btn{width:100%;justify-content:center}
  .info-stats-overlap{margin-left:20px;margin-right:20px}
  .info-stat{grid-template-columns:1fr;gap:12px}
  .info-stat-rule{width:42px;height:3px}
  .info-product-visual{min-height:0;padding:16px}
  .moonshot{width:100%;min-height:318px;padding:10px;gap:9px}
  .moonshot-real{width:236px;max-width:100%;height:auto;padding:0}
  .moonshot-detail-zoom{width:min(100%,236px);height:128px}
  .moonshot-detail-zoom img{width:356px;left:7px;top:-260px}
  .moonshot-layout{grid-template-columns:64px 1fr;gap:8px;min-height:220px}
  .moonshot-filters{padding:10px 8px}
  .moonshot-card{grid-template-columns:44px 1fr;gap:8px;min-height:62px;padding:7px}
  .moonshot-card img{width:44px;height:44px}
  .info-contact-form,.info-contact-aside{padding:22px}
  .boutiques-hdr{padding:34px 0 24px}
  .boutiques-hero h1{font-size:var(--fs-30)}
  .boutiques-page{padding-top:28px}
  .boutique-card{grid-template-columns:76px minmax(0,1fr);gap:12px}
  .boutique-card-logo{height:76px;padding:10px}
  .boutique-logo-initials{font-size:var(--fs-22)}
  .boutique-card-head{display:block}
  .boutique-card-count{display:flex;align-items:baseline;gap:5px;text-align:left;margin-top:10px}
  .boutique-card-count strong{font-size:var(--fs-18)}
  .boutique-card-count span{margin-top:0}
  .boutique-card-desc{display:none}
  .boutique-card-foot{align-items:flex-start;flex-direction:column;gap:8px}
  .wrap{padding:0 20px}
  .stats{gap:14px}
  .cta{padding:20px}
  .suggests .chip:nth-child(n+4){display:none}
  .topbar{height:auto;padding-top:10px;padding-bottom:10px;gap:10px}
  .logo{gap:6px;font-size:var(--fs-16)}
  .logo .mark{width:60px;height:60px}
  .top-actions{gap:6px;padding-right:4px}
  .btn-dark.btn-sm{padding:0 12px;font-size:var(--fs-12)}
}

/* ---------- Carte Horlogers (MapLibre GL, chargé uniquement sur horlogers.html) ---------- */
/* MapLibre met ses contrôles à z-index:2 mais son canevas WebGL peut malgré
   tout passer au-dessus du header sticky (z-index:60) une fois la carte
   défilée sous lui ; un z-index explicite sur le conteneur règle ça. */
.maplibregl-map{z-index:1}
.maplibregl-ctrl-group{border:none!important;box-shadow:var(--shadow)!important;border-radius:8px!important;overflow:hidden;background:var(--white)!important}
.maplibregl-ctrl-group button{width:26px!important;height:26px!important}
.maplibregl-ctrl-group button:hover{background:var(--paper-2)!important}
.moonlist-popup .maplibregl-popup-content{border-radius:var(--r);box-shadow:var(--shadow-lg);padding:12px 14px;font-family:Manrope,sans-serif;min-width:150px}
.moonlist-map-popup strong{font-family:"Playfair Display",serif;font-size:var(--fs-15);display:block;margin-bottom:2px}
.moonlist-map-popup .city{color:var(--mute);font-size:var(--fs-12);margin-bottom:10px}
.moonlist-map-popup-btn{
  background-color:#0B1E33;
  background-image:linear-gradient(90deg,transparent,transparent 11px,rgba(195,155,94,.35) 11px,rgba(195,155,94,.35) 12px);
  background-size:12px 100%;background-repeat:repeat;
  color:#F5F1E6!important;
}
.moonlist-map-popup-btn:hover{background-color:#0C2A1D}
.leaflet-control-zoom a:hover{background:var(--paper-2)!important}
.leaflet-control-attribution{background:rgba(255,255,255,.85)!important;font-size:var(--fs-10)!important;border-radius:6px 0 0 0}

/* Mouvement reduit : le soulignement et le filet des chips apparaissent
   sans animation. */
@media (prefers-reduced-motion:reduce){
  .link-arrow::after{transition:none}
  .hero .chip>span::after{transition:none}
  /* Les rayures sont la des le premier rendu, sans balayage. */
  body:not(.stripes-shown) .hero::before{animation:none}
  /* Le bandeau de logos s'arrete et se centre. */
  .logostrip-track{animation:none;justify-content:center;width:100%;flex-wrap:wrap;row-gap:18px;gap:0}
  .logostrip-track>*{margin-right:28px}
  .logostrip-item[aria-hidden="true"]{display:none}
  .card .art::after{transition:none}
  .story-magnify-btn,.story-magnify-btn::before,.story-magnify-btn>span,.story-magnify-icon{transition:none}
}

/* Alertes e-mail — meme boitier que la recherche, sur l'accueil et dans
   l'etat vide de la recherche. */
.alertbox{max-width:680px;margin:0 auto}
.alertbox-row{display:flex;align-items:center;gap:10px;background:var(--white);border:1px solid var(--hair-2);
  border-radius:var(--r-btn);padding:8px 8px 8px 20px;box-shadow:var(--shadow);transition:.15s}
.alertbox-row:focus-within{border-color:var(--gold-ink);box-shadow:0 0 0 4px rgba(138,106,47,.08),var(--shadow)}
.alertbox-input{flex:1 1 0;min-width:0;border:0;outline:0;background:transparent;font-family:Inter,sans-serif;
  font-size:var(--fs-15);color:var(--ink)}
.alertbox-input::placeholder{color:var(--mute)}
.alertbox-input+.alertbox-input{border-left:1px solid var(--hair-2);padding-left:16px}
.alertbox-consent{margin:10px auto 0;max-width:560px;text-align:center;font-size:var(--fs-12);color:var(--mute)}
.alert-home{text-align:center}
.alert-home .sec-head{justify-content:center;text-align:center}
.alert-home p.alert-home-sub{color:var(--ink-soft);max-width:520px;margin:0 auto 22px}
.empty .alertbox{margin-top:18px}
.empty .alertbox-lead{margin-top:32px;color:var(--ink-soft);max-width:420px;margin-left:auto;margin-right:auto}

@media (max-width:820px){
  /* Champs a 16px : en dessous, iOS zoome sur le champ au focus. */
  .alertbox-row{flex-direction:column;align-items:stretch;gap:8px;padding:12px;border-radius:var(--r)}
  .alertbox-input{padding:11px 12px;border:1px solid var(--hair-2);border-radius:var(--r-sm);font-size:var(--fs-16)}
  .alertbox-input+.alertbox-input{padding-left:12px}
  .alertbox-row .btn{width:100%;justify-content:center}
}

/* ---------- Direction : la vitrine et le catalogue ----------
   Le defaut de la page etait d'avoir un seul registre repete. Elle en a deux
   maintenant, qui alternent comme les pages d'un magazine :
     la vitrine   fond marine pleine largeur, peu d'objets, beaucoup d'air
     le catalogue papier, dense, factuel, sans cadre
   Les titres de section passent de 30 a 46 px, les titres d'objet de 22 a 16.
   Le rapport passe de 1,36 a 2,9 : c'est lui qui fait qu'une page se compose
   au lieu de s'empiler. */

.sec-head h2,h2.serif{font-size:var(--fs-46);letter-spacing:-.022em;line-height:1.04}
/* Le chapo n'est plus une bande pleine largeur : 52 caracteres, une colonne. */
.wrap .sec-head p{max-width:52ch;font-size:var(--fs-15);line-height:1.6}

/* Les eyebrows dorees etaient de la signaletique de gabarit — une etiquette
   au-dessus de chaque titre. Un magazine n'en pose pas. */
.alert-home .eyebrow{display:none}

/* Plus de cadre autour des objets : la photo repose sur la page, la legende
   dessous. Le cadre est ce qu'on met quand on n'a pas tranche de mise en page. */
.home-pick-photo{border:0}
.latest-grid .latest-card{background:none;border:0}

/* Le titre d'une montre descend a 16 px : c'est la photo qui porte, pas le
   texte. La reference monte en visibilite — c'est le vocabulaire des
   collectionneurs, et c'est ainsi que les horlogers nomment leurs pieces. */
.home-pick-titre{font-size:var(--fs-16);letter-spacing:0}
.latest-grid .latest-card h3{font-size:var(--fs-16);letter-spacing:0;line-height:1.3}

/* ---- La vitrine ---- */
/* Pleine largeur, hors du conteneur, pour que le chapitre se voie. */
.home-picks{position:relative;background:#0B1E33;color:#F5F1E6;padding:88px 0 96px;margin-top:8px;isolation:isolate}
/* Memes bandes que le hero, au meme pas de 48 px : les deux zones marine se
   repondent au lieu de se juxtaposer. Un cran plus discretes qu'en haut de
   page — ici elles passent derriere des photos, pas derriere du vide. */
.home-picks::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-repeat:repeat;background-position:left top;background-size:48px 100%;
  background-image:linear-gradient(90deg,transparent,transparent 47px,rgba(195,155,94,.16) 47px,rgba(195,155,94,.16) 48px)}
.home-picks > .wrap{position:relative;z-index:1}
.home-picks .sec-head h2{color:#F5F1E6}
.home-picks .sec-head p{color:rgba(245,241,230,.86)}
.home-picks .home-pick-titre{color:#F5F1E6}
.home-picks .home-pick-photo{background:#12293f}


/* Trois cartes egales font une rangee, pas une composition. La premiere
   occupe la colonne large sur toute la hauteur, les deux autres s'empilent a
   cote : l'oeil entre par la grande et descend. C'est ce desequilibre qui
   distingue une page composee d'une grille de resultats. */
@media(max-width:900px){
  .sec-head h2,h2.serif{font-size:var(--fs-30);letter-spacing:-.018em}
  .home-picks{padding:56px 0 60px}
  .sec-head p{max-width:none}
}

/* ---------- La fiche ----------
   Structure unique pour « Coup de coeur » et « Dernieres annonces ». La
   marque et le modele occupent deux lignes distinctes : elles ne se
   concatenent jamais, donc la repetition « IWC SCHAFFHAUSEN IWC Portugieser »
   devient structurellement impossible, au lieu d'etre corrigee apres coup. */
/* align-self:stretch, et surtout pas height:100% : dans le rail flexe des
   dernieres annonces, une hauteur en pourcentage rend la taille de la fiche
   definie, ce qui annule l'etirement. Les fiches gardaient alors chacune la
   hauteur de son propre texte, et une annonce au titre sur deux lignes
   decalait vendeur, ville et prix d'une ligne par rapport a ses voisines. */
.fiche{position:relative;display:flex;flex-direction:column;min-width:0;align-self:stretch}
.fiche-photo{position:relative;aspect-ratio:1/1;overflow:hidden;background:#EEE9DD}
.fiche-photo img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .4s ease}
.fiche:hover .fiche-photo img{transform:scale(1.03)}
.fiche-photo svg{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);height:120px}
.fiche-photo .heart{position:absolute;top:12px;right:12px;z-index:3}

.fiche-corps{padding:20px 0 0;display:flex;flex-direction:column;gap:9px;flex:1 1 auto}
/* La marque en capitales fines : elle situe, elle ne domine pas. */
.fiche-marque{font-family:var(--mono);font-size:var(--fs-13);letter-spacing:.06em;
  text-transform:uppercase;color:var(--mute);line-height:1.2;min-height:1.2em}
.fiche-modele{margin:0;font-family:"Playfair Display",Georgia,serif;font-size:var(--fs-22);
  font-weight:500;line-height:1.24;letter-spacing:-.012em;color:var(--ink);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.fiche-contexte{margin:3px 0 0;font-family:Manrope,sans-serif;font-size:var(--fs-13);
  line-height:1.55;color:var(--mute);max-width:none;margin-top:auto;min-height:1.55em;
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.fiche-vendeur{margin:11px 0 0;padding-top:0;font-family:Manrope,sans-serif;
  font-size:var(--fs-12);color:var(--mute);display:flex;align-items:center;gap:6px}
.fiche-vendeur .latest-country{display:inline-flex;align-items:center;gap:5px}

/* Le prix et l'acces, separes du reste par un filet : c'est la ligne de
   decision, elle ne se melange pas a la description. */
.fiche-pied{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  margin:15px 0 0;padding-top:15px;border-top:1px solid var(--hair)}
.fiche-prix{font-family:var(--mono);font-size:var(--fs-16);font-weight:700;
  font-variant-numeric:tabular-nums;color:var(--ink)}
.fiche-action{font-family:Manrope,sans-serif;font-size:var(--fs-13);font-weight:600;
  color:var(--gold-ink);position:relative;display:inline-flex;align-items:center;gap:7px}
.fiche-action::after{content:"\2197";font-size:1.05em;line-height:1;
  transition:transform .3s ease}
.fiche:hover .fiche-action{color:var(--gold-ink-2)}
.fiche:hover .fiche-action::after{transform:translate(2px,-2px)}
@media (prefers-reduced-motion:reduce){ .fiche-action::after{transition:none} }

/* Sur la vitrine sombre, la fiche inverse ses encres. */
.home-picks .fiche-modele,.home-picks .fiche-prix{color:#F5F1E6}
.home-picks .fiche-marque{color:rgba(245,241,230,.70)}
.home-picks .fiche-contexte,.home-picks .fiche-vendeur{color:rgba(245,241,230,.86)}
.home-picks .fiche-pied{border-top-color:rgba(245,241,230,.18)}
.home-picks .fiche-action{color:#C39B5E}
.home-picks .fiche-photo{background:#12293f}

@media(max-width:900px){
  .fiche-modele{font-size:var(--fs-18)}
  .fiche-contexte{max-width:none}
}

/* ---------- La fiche, sur les pages de recherche ----------
   Meme structure que sur l'accueil, avec ce que la comparaison exige en plus :
   badges, partage, prix d'origine. La grille reste celle de la recherche. */
.fiche-photo .badges{position:absolute;top:12px;left:12px;z-index:3;display:flex;flex-wrap:wrap;gap:6px}
.fiche-photo .card-share{position:absolute;top:12px;right:52px;z-index:3}
.fiche-photo .card-cover-link{position:absolute;inset:0;z-index:2}
/* priceBlock rend une pile (prix converti, puis prix d'origine) : elle doit
   rester alignee sur la ligne de base du lien, pas l'etirer. */
.fiche-pied .price{display:flex;flex-direction:column;gap:1px}
.fiche-pied .price .big{font-family:var(--mono);font-size:var(--fs-16);font-weight:700;
  font-variant-numeric:tabular-nums;color:var(--ink);line-height:1.15}
.fiche-pied .price .orig{font-family:var(--mono);font-size:var(--fs-11);color:var(--mute)}
.fiche-boutique{color:inherit;text-decoration:underline;text-underline-offset:2px}
.fiche-boutique:hover{color:var(--gold-ink)}
.fiche-vendeur{flex-wrap:wrap}

/* ---------- La fiche en mode liste ----------
   La vue liste n'est pas une vue grille etiree : c'est celle ou l'on balaie
   une colonne de prix. Trois colonnes, tout aligne sur l'axe vertical du
   milieu : vignette, texte, puis prix et acces a droite.

   La version precedente empilait le prix sous le texte, sur toute la largeur.
   Avec une photo de 240 px et quatre lignes courtes, ça creusait un vide au
   milieu de chaque ligne et separait le prix de son lien par 700 px. */
.grid.list{gap:0}
.grid.list .fiche{display:grid;grid-template-columns:132px minmax(0,1fr) auto;
  gap:0 24px;align-items:center;padding:16px 0;border-bottom:1px solid var(--hair)}
.grid.list .fiche:first-child{border-top:1px solid var(--hair)}
.grid.list .fiche-photo{aspect-ratio:1/1;border:1px solid var(--hair)}
/* Les boutons d'action quittent la vignette : a 132 px ils la mangeraient.
   Ils rejoignent la colonne de droite, au-dessus du prix. */
.grid.list .fiche-photo .heart,.grid.list .fiche-photo .card-share,
.grid.list .fiche-photo .badges{display:none}
.grid.list .fiche-corps{padding:0;gap:3px}
/* Plus de reserve de deux lignes : en liste chaque ligne se dimensionne sur
   la vignette, un titre court ne creuse donc aucun blanc. */
.grid.list .fiche-modele{min-height:0;-webkit-line-clamp:1;font-size:var(--fs-18)}
.grid.list .fiche-contexte{min-height:0;-webkit-line-clamp:1;margin-top:1px}
.grid.list .fiche-vendeur{margin:2px 0 0;padding-top:0}
/* La colonne de droite : le prix, puis le lien. Alignes a droite, l'un sous
   l'autre, a hauteur du regard. */
.grid.list .fiche-pied{flex-direction:column;align-items:flex-end;gap:6px;
  margin:0;padding:0;border:0;min-width:150px;text-align:right}
.grid.list .fiche-pied .price{align-items:flex-end}
.grid.list .fiche-pied .price .big{font-size:var(--fs-18)}

@media(max-width:900px){
  .grid.list .fiche{grid-template-columns:96px minmax(0,1fr);gap:0 14px;padding:14px 0}
  .grid.list .fiche-pied{grid-column:2;align-items:flex-start;min-width:0;text-align:left;margin-top:8px}
  .grid.list .fiche-pied .price{align-items:flex-start}
  .grid.list .fiche-modele{font-size:var(--fs-16)}
}
}

/* Le filet qui separe la boutique du drapeau et de la ville. */
.fiche-vendeur .metasep{display:inline-flex;align-items:center;flex:0 0 auto}
.fiche-vendeur .metasep::before{content:"";display:block;width:1px;height:12px;
  background:var(--silver)}

/* ---------- Page marque sans stock ----------
   « Rolex Daytona occasion » est l'une des requetes les plus cherchees du
   secteur, et c'est la page la plus vide du site. Plutot qu'une grille sans
   rien, on capte l'intention — le mecanisme d'alerte existe deja — et on
   propose le stock de la marque en attendant. */
.marque-alerte{border:1px solid var(--hair);background:var(--white);
  padding:30px 32px;max-width:560px}
.marque-alerte h3{margin:0;font-family:"Playfair Display",Georgia,serif;
  font-size:var(--fs-26);font-weight:500;line-height:1.2;letter-spacing:-.012em;color:var(--ink)}
.marque-alerte p{margin:9px 0 0;font-family:Manrope,sans-serif;font-size:var(--fs-14);
  line-height:1.6;color:var(--mute);max-width:46ch}
.marque-alerte-form{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap}
.marque-alerte-form input{flex:1 1 220px;min-width:0;font-family:var(--mono);
  font-size:var(--fs-13);padding:11px 13px;border:1px solid var(--hair-2);
  background:#fff;color:var(--ink);outline:0}
.marque-alerte-form input:focus{border-color:var(--gold-ink)}
.marque-alerte-form .btn{flex:0 0 auto}
.marque-alerte-note{margin-top:12px;font-size:var(--fs-13);color:var(--up)}
.marque-alerte-note.est-ok{color:var(--down)}
/* Sur une page qui a deja quelques annonces, l'encart s'efface : il propose,
   il ne reclame pas. */
.marque-alerte.est-discret{margin-top:34px;background:none;border-style:dashed}
.marque-alerte.est-discret h3{font-size:var(--fs-22)}

.marque-repli{margin-top:44px}
.marque-repli h3{margin:0 0 20px;font-family:"Playfair Display",Georgia,serif;
  font-size:var(--fs-22);font-weight:500;letter-spacing:-.012em;color:var(--ink)}

@media(max-width:900px){
  .marque-alerte{padding:24px 22px}
  .marque-alerte h3{font-size:var(--fs-22)}
}

/* ---------- Page boutique ----------
   Le bandeau marine a ete abandonne : la barre de navigation est deja marine,
   donc un second aplat juste en dessous ne creait pas un chapitre — il
   fabriquait un seul bloc sombre occupant le tiers du premier ecran.

   A la place, une bande des montres de la boutique. Une boutique horlogere
   EST sa collection, et c'est le seul visuel que les dix possedent : toutes
   n'ont pas de vitrine a photographier. Le cadrage est volontairement tres
   plat — a cette hauteur les montres se lisent comme une matiere, pas comme
   des cartes, et la bande ne concurrence donc pas la grille plus bas. */
.boutique-bande{display:grid;grid-template-columns:repeat(5,1fr);gap:2px;
  height:clamp(150px,19vw,230px);background:var(--hair);overflow:hidden}
.boutique-bande-case{display:block;overflow:hidden;background:#EEE9DD}
.boutique-bande-case img{width:100%;height:100%;object-fit:cover;display:block}

.boutique-tete{padding-top:26px}
.boutique-fil{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-bottom:24px}
.boutique-tete .crumbs{margin-bottom:0}
/* Le bouton retour du site, la fleche seule, pose sur la ligne du fil
   d'Ariane : sa marge basse servait a l'isoler quand il est seul sur sa ligne.
   C'est un lien, et non un bouton comme ailleurs — il mene reellement a la
   liste des boutiques, donc il fonctionne sans JavaScript et annonce sa
   destination au survol. Le script ne s'en sert que pour remonter d'un cran
   quand le visiteur vient d'ailleurs sur le site. */
.boutique-fil .pagebackbtn{margin-bottom:0;flex:0 0 auto;color:var(--ink);text-decoration:none}
.boutique-fil .pagebackbtn:focus-visible{outline:2px solid var(--gold-ink);outline-offset:2px}
.boutique-tete-corps{display:flex;align-items:flex-end;justify-content:space-between;
  gap:28px;flex-wrap:wrap;padding-bottom:22px;border-bottom:1px solid var(--hair)}
.boutique-identite{display:flex;align-items:center;gap:22px;min-width:0}
/* Le logo porte la page : c'est lui qui donne a chaque boutique sa couleur,
   la ou un gabarit marine les rendait toutes identiques. */
.boutique-identite>img{width:112px;height:112px;object-fit:contain;padding:12px;
  background:var(--white);border:1px solid var(--hair);flex:0 0 auto}
.boutique-identite h1{margin:12px 0 0;font-size:var(--fs-46);line-height:1.02;
  letter-spacing:-.022em;color:var(--ink)}
.boutique-lieu{display:flex;align-items:center;gap:8px;font-family:var(--mono);
  font-size:var(--fs-11);letter-spacing:.11em;text-transform:uppercase;color:var(--gold-ink)}
.boutique-actions{display:flex;align-items:center;gap:10px;flex:0 0 auto;padding-bottom:4px}

.boutique-intro{display:flex;align-items:flex-start;justify-content:space-between;
  gap:40px;padding:24px 0 0}
.boutique-bio{max-width:62ch}
.boutique-bio p{margin:0;font-family:Manrope,sans-serif;font-size:var(--fs-15);
  line-height:1.65;color:var(--ink-soft);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.boutique-bio.est-ouvert p{-webkit-line-clamp:unset;display:block}
.boutique-bio-toggle{margin-top:6px;background:none;border:0;padding:0;cursor:pointer;
  font-family:Manrope,sans-serif;font-size:var(--fs-13);font-weight:600;
  color:var(--gold-ink);text-decoration:underline;text-underline-offset:3px}
.boutique-bio-toggle:hover{color:var(--gold-ink-2)}

.boutique-compte{display:inline-flex;align-items:baseline;gap:9px;cursor:pointer;
  flex:0 0 auto;color:var(--ink);text-decoration:none}
.boutique-compte strong{font-family:var(--mono);font-size:var(--fs-26);font-weight:700;
  font-variant-numeric:tabular-nums}
.boutique-compte span{font-family:Manrope,sans-serif;font-size:var(--fs-14);color:var(--mute)}
.boutique-compte svg{align-self:center;color:var(--gold-ink)}
.boutique-compte:hover strong{color:var(--gold-ink)}

.boutique-collection .sec-head{align-items:baseline;justify-content:space-between}

/* Filtrer par marque, sur le stock deja charge : la grille se refait sans
   recharger la page ni remonter en haut. Le compte dans chaque pastille dit
   d'avance ce que le clic va donner — sept Rolex, une Chaumet. */
.boutique-marques{display:flex;flex-wrap:wrap;gap:8px;margin:2px 0 26px}
.boutique-marque span{font-family:var(--mono);font-size:var(--fs-11);
  font-variant-numeric:tabular-nums;color:var(--mute)}
.boutique-marque.active span{color:var(--gold)}
.boutique-marques:not(.est-deploye) .boutique-marque.est-repliee{display:none}
.boutique-marques-plus{align-self:center;background:none;border:0;padding:4px 2px;cursor:pointer;
  font-family:Manrope,sans-serif;font-size:var(--fs-13);font-weight:600;
  color:var(--gold-ink);text-decoration:underline;text-underline-offset:3px}
.boutique-marques-plus:hover{color:var(--gold-ink-2)}
.boutique-collection-nom{font-family:Manrope,sans-serif;font-size:var(--fs-13);color:var(--mute)}

@media(max-width:900px){
  /* Cinq images a 375 px feraient des timbres : on en garde trois. */
  .boutique-bande{grid-template-columns:repeat(3,1fr);height:128px}
  .boutique-bande-case:nth-child(n+4){display:none}
  .boutique-identite>img{width:76px;height:76px;padding:8px}
  .boutique-identite h1{font-size:var(--fs-30);margin-top:9px}
  .boutique-identite{gap:14px}
  .boutique-tete-corps{align-items:flex-start}
  .boutique-actions{width:100%;padding-bottom:0}
  .boutique-intro{flex-direction:column;gap:18px;padding-top:20px}
  .boutique-bio{max-width:none}
  /* Seize marques repliees font quand meme quatre rangees sur un telephone,
     soit cent-soixante-dix pixels avant la premiere montre. On reprend le
     rail horizontal des selections : une seule ligne, les marques les mieux
     fournies en tete, et plus besoin de replier quoi que ce soit. */
  .boutique-marques{flex-wrap:nowrap;overflow-x:auto;gap:8px;
    padding:0 24px 8px;margin:2px -24px 20px;-webkit-overflow-scrolling:touch;touch-action:pan-x}
  .boutique-marque{flex:0 0 auto}
  .boutique-marques:not(.est-deploye) .boutique-marque.est-repliee{display:inline-flex}
  .boutique-marques-plus{display:none}
}

/* ---------------------------------------------------------------------------
   Horlogers-reparateurs. Cinq ateliers, aucune photo — ni portrait, ni atelier,
   ni galerie. La page les representait par le meme pictogramme de montre
   repete cinq fois : ils se ressemblaient tous. Faute d'image, la page tient
   par la typographie et par la carte.

   Et par la suppression : un champ de recherche, quatre menus deroulants et
   sept pastilles de specialite surmontaient « 5 professionnels trouves ». Avec
   cinq fiches, on montre les cinq.
--------------------------------------------------------------------------- */
.horlogers-tete{padding-block:38px 30px;max-width:720px}
.horlogers-tete h1{margin:10px 0 0;font-family:"Playfair Display",Georgia,serif;
  font-size:var(--fs-46);font-weight:500;line-height:1.04;letter-spacing:-.022em;color:var(--ink)}
.horlogers-tete p{margin:16px 0 0;font-family:Manrope,sans-serif;font-size:var(--fs-16);
  line-height:1.6;color:var(--ink-soft);max-width:60ch}

/* La carte vient apres l'en-tete, jamais avant : son fond est sombre, et la
   coller sous la barre de navigation marine souderait les deux en un seul
   bloc — l'erreur commise puis corrigee sur les pages boutique. */
/* Recherche et filtres : quatre villes aujourd'hui, mais le carnet grandira, et
   le mecanisme se construit avant d'en avoir besoin. Ils refont la liste ET la
   carte — filtrer a moitie serait pire que ne pas filtrer. */
.horlogers-filtres{display:flex;flex-wrap:wrap;gap:10px;padding-bottom:26px}
.horlogers-champ{flex:1 1 260px;min-width:0;border:1px solid var(--hair-2);
  background:var(--white);border-radius:var(--r-sm);padding:11px 15px;
  font-family:Manrope,sans-serif;font-size:var(--fs-14);color:var(--ink)}
.horlogers-champ:focus{outline:2px solid var(--gold-ink);outline-offset:1px;border-color:transparent}
.horlogers-filtres .sel{flex:0 1 auto;padding:11px 13px}

/* Le compte est passe au-dessus des deux colonnes : tant qu'il vivait dans la
   colonne de gauche, la premiere fiche demarrait plus bas que le premier bloc
   de droite et les deux colonnes ne s'alignaient pas. */
.horlogers-compte{display:flex;align-items:baseline;justify-content:space-between;
  gap:16px;flex-wrap:wrap;padding-bottom:16px}
.horlogers-compte span{font-family:Manrope,sans-serif;font-size:var(--fs-14);color:var(--mute)}
.horlogers-compte strong{font-family:var(--mono);font-size:var(--fs-16);color:var(--ink);
  font-variant-numeric:tabular-nums}
.horlogers-raz{background:none;border:0;padding:0;cursor:pointer;font-family:Manrope,sans-serif;
  font-size:var(--fs-13);font-weight:600;color:var(--gold-ink);
  text-decoration:underline;text-underline-offset:3px}
.horlogers-raz:hover{color:var(--gold-ink-2)}

/* La France est plus haute que large : une bande trop plate obligeait la carte
   a s'elargir jusqu'a la Croatie pour caser la latitude de Bayonne a
   Strasbourg. La hauteur suit la proportion du pays — mais plafonnee, parce
   qu'un fond de carte met une dizaine de secondes a arriver et qu'un vide
   sombre de six cents pixels est un mauvais premier ecran. */
.horlogers-carte{position:relative;background:var(--paper-2);
  border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.horlogers-carte #repairersMap{height:clamp(300px,34vw,440px)}
.horlogers-carte-attente{position:absolute;inset:0;display:flex;align-items:center;
  justify-content:center;pointer-events:none;z-index:2;
  font-family:var(--mono);font-size:var(--fs-11);letter-spacing:.11em;
  text-transform:uppercase;color:rgba(245,241,230,.6);transition:opacity .45s ease}
.horlogers-carte-attente.est-parti{opacity:0}

/* Deux colonnes : les ateliers a gauche, ce qu'il faut savoir avant d'en
   choisir un a droite. J'avais supprime cette colonne en la jugeant
   generique — elle l'etait : quatre coches « preserver la valeur de votre
   montre », « travail realise par des experts ». Elle revient avec ce qu'un
   collectionneur peut reellement verifier avant de deposer sa piece. */
.horlogers-corps{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:34px;
  align-items:start;padding-top:34px}
.horlogers-liste{display:grid;gap:14px;align-content:start}
.horlogers-cote{display:grid;gap:14px;position:sticky;top:96px}
.horlogers-bloc{background:var(--white);border:1px solid var(--hair);padding:20px 22px}
.horlogers-bloc h3{margin:0;font-family:"Playfair Display",Georgia,serif;
  font-size:var(--fs-18);font-weight:500;letter-spacing:-.01em;color:var(--ink)}
.horlogers-bloc p{margin:10px 0 0;font-family:Manrope,sans-serif;font-size:var(--fs-13);
  line-height:1.6;color:var(--ink-soft)}
.horlogers-bloc ul{margin:12px 0 0;padding:0;list-style:none;display:grid;gap:11px}
.horlogers-bloc-titre-icone{display:flex;align-items:center;gap:9px}
.horlogers-bloc-titre-icone svg{color:var(--gold-ink);flex:0 0 auto}

.horlogers-coches li{position:relative;padding-left:22px;font-family:Manrope,sans-serif;
  font-size:var(--fs-13);line-height:1.55;color:var(--ink-soft)}
.horlogers-coches li::before{content:"\2713";position:absolute;left:0;top:0;
  color:var(--gold-ink);font-weight:700}

.horlogers-reperes{margin-top:0}
.horlogers-reperes li{display:flex;align-items:flex-start;gap:11px}
.horlogers-reperes svg{color:var(--gold-ink);flex:0 0 auto;margin-top:1px}
.horlogers-reperes strong{display:block;font-family:Manrope,sans-serif;font-weight:700;
  font-size:var(--fs-13);color:var(--ink)}
.horlogers-reperes span{display:block;margin-top:2px;font-family:Manrope,sans-serif;
  font-size:var(--fs-12);line-height:1.5;color:var(--mute)}
.horlogers-bloc.est-sombre{background:var(--anthracite);border-color:transparent}
.horlogers-bloc.est-sombre h3{color:#F5F1E6}
.horlogers-bloc.est-sombre p{color:rgba(245,241,230,.72)}
.horlogers-bloc.est-sombre .btn{margin-top:14px}
.horloger-carte{position:relative;background:var(--white);border:1px solid var(--hair);
  padding:26px 28px;transition:border-color .18s ease}
.horloger-carte:hover{border-color:var(--silver)}
.horloger-entete{display:flex;align-items:flex-start;justify-content:space-between;gap:22px;flex-wrap:wrap}
.horloger-lieu{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-family:var(--mono);
  font-size:var(--fs-11);letter-spacing:.11em;text-transform:uppercase;color:var(--gold-ink)}
/* La distance ne s'affiche que sur une recherche par commune. Elle se detache
   du lieu : l'une est une adresse, l'autre une reponse a la question posee. */
.horloger-distance{padding-left:9px;border-left:1px solid var(--hair-2);color:var(--mute)}
.horloger-carte h3{margin:9px 0 0;font-family:"Playfair Display",Georgia,serif;
  font-size:var(--fs-26);font-weight:500;line-height:1.1;letter-spacing:-.014em;color:var(--ink)}

/* Deux horlogers sur cinq ont une note Google, et l'une d'elles vaut 3,4. On
   l'affiche telle quelle : une note qu'on ne montrerait que lorsqu'elle est
   bonne ne vaut rien. La provenance est dite, et l'infobulle rappelle que
   MoonList ne l'a pas verifiee. */
.horloger-note{display:flex;align-items:baseline;gap:7px;flex:0 0 auto;
  font-family:Manrope,sans-serif;font-size:var(--fs-13);color:var(--mute)}
.horloger-note svg{color:var(--gold);align-self:center}
.horloger-note strong{font-family:var(--mono);font-size:var(--fs-15);color:var(--ink);
  font-variant-numeric:tabular-nums}

.horloger-marques{margin-top:14px;font-family:var(--mono);font-size:var(--fs-12);
  letter-spacing:.04em;color:var(--ink-soft)}
.horloger-bio{margin:12px 0 0;font-family:Manrope,sans-serif;font-size:var(--fs-14);
  line-height:1.6;color:var(--ink-soft);max-width:72ch;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* Le tarif est l'information la plus utile de la page et elle etait en petits
   caracteres tout en bas. Deux ateliers sur cinq l'annoncent : en la rendant
   visible, l'absence le devient aussi. */
.horloger-tarifs{display:flex;gap:10px;align-items:baseline;margin-top:12px;
  font-family:Manrope,sans-serif;font-size:var(--fs-13);color:var(--ink)}
.horloger-tarifs-cle{flex:0 0 auto;font-family:var(--mono);font-size:var(--fs-11);
  letter-spacing:.09em;text-transform:uppercase;color:var(--gold-ink)}

.horloger-pied{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  margin-top:18px;padding-top:16px;border-top:1px solid var(--hair)}
.horloger-adresse{font-family:Manrope,sans-serif;font-size:var(--fs-13);color:var(--mute)}


@media(max-width:900px){
  .horlogers-tete{padding-block:26px 22px}
  .horlogers-tete h1{font-size:var(--fs-30)}
  .horlogers-carte #repairersMap{height:260px}
  /* En dessous de 900 px la colonne passe sous la liste et cesse de coller. */
  .horlogers-corps{grid-template-columns:minmax(0,1fr);gap:22px;padding-top:24px}
  .horlogers-cote{position:static;top:auto}
  .horlogers-bloc{padding:18px}
  .horlogers-filtres{gap:8px;padding-bottom:20px}
  .horlogers-champ{flex:1 1 100%}
  .horlogers-filtres .sel{flex:1 1 calc(50% - 4px)}
  .horloger-carte{padding:20px 18px}
  .horloger-carte h3{font-size:var(--fs-22)}
  .horloger-entete{gap:10px}
}

/* Les marques traitees, avec leur logo quand il existe. Sept des neuf marques
   citees par les cinq ateliers en ont un dans assets/brand-logos/ ; les deux
   autres retombent sur leur initiale, comme l'annuaire des marques. Deposer un
   fichier suffit a faire apparaitre un logo, sans toucher au code. */
/* Une grille, pas un alignement libre : « Audemars Piguet » tient sur deux
   lignes quand « Omega » en occupe une, et en rangee souple cette seule
   difference decalait tout ce qui suivait. Les colonnes sont donc fixes et le
   nom reserve ses deux lignes, que la marque en ait besoin ou non. */
.horloger-marques-logos{display:grid;grid-template-columns:repeat(auto-fill,88px);
  justify-content:start;gap:18px 14px;align-items:start;margin-top:14px}
.horloger-marque-logo{display:flex;flex-direction:column;align-items:center;gap:9px}
.horloger-marque-vignette{width:64px;height:64px;border-radius:var(--r-round);
  background:var(--white);border:1px solid var(--hair);display:flex;align-items:center;
  justify-content:center;overflow:hidden;flex:0 0 auto}
.horloger-marque-vignette img{width:100%;height:100%;object-fit:contain;padding:11px}
.horloger-marque-initiale{font-family:"Playfair Display",Georgia,serif;font-size:var(--fs-22);
  color:var(--ink-soft);width:100%;height:100%;align-items:center;justify-content:center}
.horloger-marque-nom{font-family:Manrope,sans-serif;font-size:var(--fs-12);line-height:1.3;
  min-height:2.6em;text-align:center;color:var(--ink-soft)}

@media(max-width:900px){
  .horloger-marques-logos{grid-template-columns:repeat(auto-fill,76px);gap:16px 10px}
  .horloger-marque-vignette{width:56px;height:56px}
  .horloger-marque-vignette img{padding:9px}
}

/* ---------------------------------------------------------------------------
   Fiche d'un horloger, d'apres le prototype de Gautier. Trois choses qu'il
   montrait n'existent pas en base et ne sont donc pas ici : la photo de
   vitrine (aucun des cinq n'en a), les horaires d'ouverture (pas de colonne),
   et l'annee de creation. Les horaires surtout : les inventer enverrait un
   collectionneur devant une porte close.
--------------------------------------------------------------------------- */
.fiche-horloger-tete{padding-block:30px 0}
.fiche-horloger-fil{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  font-family:Manrope,sans-serif;font-size:var(--fs-13);color:var(--mute)}
.fiche-horloger-retour{display:inline-flex;align-items:center;gap:7px;
  color:var(--ink);text-decoration:none;font-weight:600}
.fiche-horloger-retour svg{color:var(--gold-ink)}
.fiche-horloger-retour:hover{color:var(--gold-ink)}
.fiche-horloger-fil-ville{color:var(--mute)}

.fiche-horloger-lieu{display:flex;align-items:center;gap:8px;margin-top:26px;
  font-family:var(--mono);font-size:var(--fs-11);letter-spacing:.11em;
  text-transform:uppercase;color:var(--gold-ink)}

/* Le titre n'a plus de bouton a sa droite : les deux actions vivent ensemble
   dans la colonne, l'une sous l'autre, ou elles se lisent comme une suite —
   appeler, sinon aller voir — au lieu de se repondre d'un bout a l'autre de
   l'ecran. */
.fiche-horloger-titre{margin-top:10px}
.fiche-horloger-titre h1{margin:0;font-family:"Playfair Display",Georgia,serif;
  font-size:clamp(2.4rem,5.2vw,4rem);font-weight:500;line-height:1.02;
  letter-spacing:-.026em;color:var(--ink)}
/* Une seule des deux actions peut etre le pave noir : deux paves cote a cote
   ne guident plus, ils font choisir. Le site prend ce role — c'est la ou le
   visiteur verra le stock, les prix et l'atelier — et le telephone passe en
   lien souligne dessous. Quand l'atelier ne publie pas de site, c'est le
   telephone qui devient le bouton : il n'a plus de concurrent. */
.fiche-horloger-lien{display:inline-flex;align-items:center;gap:7px;
  font-family:Manrope,sans-serif;font-size:var(--fs-14);color:var(--mute);
  text-decoration:underline;text-underline-offset:3px}
.fiche-horloger-lien:hover{color:var(--gold-ink)}
.fiche-horloger-meta{margin-top:16px}

.fiche-horloger-corps{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:56px;
  align-items:start;padding-block:40px 0}
.fiche-horloger-bloc{padding-top:34px;margin-top:34px;border-top:1px solid var(--hair)}
.fiche-horloger-bloc:first-child{padding-top:0;margin-top:0;border-top:0}
.fiche-horloger-bloc h2{margin:0 0 20px;font-family:"Playfair Display",Georgia,serif;
  font-size:var(--fs-26);font-weight:500;letter-spacing:-.014em;color:var(--ink)}
.fiche-horloger-texte{margin:14px 0 0;font-family:Manrope,sans-serif;font-size:var(--fs-16);
  line-height:1.7;color:var(--ink-soft);max-width:62ch}

/* Les prestations numerotees, comme le prototype. Ce n'est pas une sequence —
   on ne fait pas 01 avant 02 — mais la numerotation donne le rythme d'un
   sommaire, et c'est la lecture que Gautier a choisie. */
.fiche-horloger-prestations{margin:0;padding:0;list-style:none;display:grid}
.fiche-horloger-prestations li{display:grid;grid-template-columns:44px minmax(0,1fr);
  gap:14px;padding:16px 0;border-top:1px solid var(--hair)}
.fiche-horloger-prestations li:first-child{border-top:0;padding-top:0}
.fiche-horloger-num{font-family:var(--mono);font-size:var(--fs-11);color:var(--gold-ink);
  font-variant-numeric:tabular-nums;padding-top:3px}
.fiche-horloger-prestations strong{display:block;font-family:Manrope,sans-serif;
  font-weight:700;font-size:var(--fs-14);color:var(--ink)}
.fiche-horloger-prestations span{display:block;margin-top:4px;font-family:Manrope,sans-serif;
  font-size:var(--fs-13);line-height:1.55;color:var(--mute)}

/* Un filet dore ouvre la colonne, comme dans le prototype : c'est ce qui la
   detache sans avoir a l'encadrer. */
.fiche-horloger-cote{padding-top:22px;border-top:2px solid var(--gold)}
.fiche-horloger-cote h2{margin:12px 0 0;font-family:"Playfair Display",Georgia,serif;
  font-size:var(--fs-26);font-weight:500;line-height:1.14;letter-spacing:-.014em;color:var(--ink)}
.fiche-horloger-adresse{margin:20px 0 8px;font-family:Manrope,sans-serif;
  font-size:var(--fs-15);line-height:1.6;color:var(--ink)}
.fiche-horloger-faits{margin:22px 0 0;padding-top:20px;border-top:1px solid var(--hair);
  display:grid;gap:10px 18px}
.fiche-horloger-faits dt{font-family:var(--mono);font-size:var(--fs-11);letter-spacing:.09em;
  text-transform:uppercase;color:var(--gold-ink)}
.fiche-horloger-faits dd{margin:0 0 6px;font-family:Manrope,sans-serif;font-size:var(--fs-14);
  line-height:1.55;color:var(--ink)}
/* Le bouton reste le geste principal meme quand le seul canal est le site :
   sans telephone ni courriel — c'est le cas des cinq — c'est lui qui mene au
   vendeur, et il ne doit pas se retrouver reduit a un lien discret. Un filet
   l'annonce, comme dans le prototype. */
.fiche-horloger-actions{display:grid;gap:14px;justify-items:center;
  margin-top:26px;padding-top:24px;border-top:1px solid var(--hair)}
.fiche-horloger-actions .btn{width:100%;justify-content:center;gap:9px;padding:14px 20px}

.fiche-horloger-autres{padding-block:52px 8px;margin-top:44px;border-top:1px solid var(--hair)}
.fiche-horloger-autres-tete{display:flex;align-items:flex-end;justify-content:space-between;
  gap:24px;flex-wrap:wrap}
.fiche-horloger-autres-tete h2{margin:0;font-family:"Playfair Display",Georgia,serif;
  font-size:var(--fs-26);font-weight:500;letter-spacing:-.014em;color:var(--ink)}
.fiche-horloger-autres-tete p{margin:6px 0 0;font-family:Manrope,sans-serif;
  font-size:var(--fs-14);color:var(--mute)}
.fiche-horloger-autres-liste{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:1px;margin-top:26px;background:var(--hair)}
.fiche-horloger-autre{display:block;padding:18px 20px;background:var(--white);text-decoration:none}
.fiche-horloger-autre-ville{display:block;font-family:var(--mono);font-size:var(--fs-11);
  letter-spacing:.09em;text-transform:uppercase;color:var(--gold-ink)}
.fiche-horloger-autre strong{display:block;margin-top:7px;font-family:"Playfair Display",Georgia,serif;
  font-size:var(--fs-18);font-weight:500;color:var(--ink)}
.fiche-horloger-autre:hover strong{color:var(--gold-ink)}

@media(max-width:900px){
  .fiche-horloger-corps{grid-template-columns:minmax(0,1fr);gap:30px;padding-top:28px}
  .fiche-horloger-bloc{padding-top:26px;margin-top:26px}
  .fiche-horloger-bloc h2,.fiche-horloger-cote h2,.fiche-horloger-autres-tete h2{font-size:var(--fs-22)}
  .fiche-horloger-autres{padding-top:36px;margin-top:32px}
}

/* La photo du prototype. Aucun des cinq ateliers n'en a aujourd'hui — le bloc
   ne s'affiche donc pour personne — mais la colonne photo_url existe deja en
   base et le champ est deja dans le Scraper Manager : y deposer une adresse
   suffira a allumer ce bloc, sans toucher au code. */
.fiche-horloger-photo{position:relative;margin:34px auto 0;overflow:hidden;background:#EEE9DD}
.fiche-horloger-photo img{display:block;width:100%;aspect-ratio:16/7;object-fit:cover}
.fiche-horloger-photo-agrandir{position:absolute;right:16px;bottom:16px;display:flex;
  align-items:center;justify-content:center;width:38px;height:38px;
  background:rgba(11,30,51,.82);color:#F5F1E6;backdrop-filter:blur(2px);transition:background .18s}
.fiche-horloger-photo-agrandir:hover{background:#0B1E33}

.fiche-horloger-galerie{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
  gap:10px;margin-top:10px}
.fiche-horloger-galerie img{display:block;width:100%;aspect-ratio:1;object-fit:cover;background:#EEE9DD}

@media(max-width:900px){
  .fiche-horloger-photo{margin-top:24px}
  .fiche-horloger-photo img{aspect-ratio:4/3}
}

/* Faute de photo de vitrine, les montres de l'atelier quand il est aussi une
   boutique partenaire. Meme cadrage plat que la bande des pages boutique :
   a cette hauteur, les montres se lisent comme une matiere, pas comme des
   cartes, et la bande n'a pas l'air d'une grille de produits. */
.fiche-horloger-bande{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;
  margin-top:34px;background:var(--hair);overflow:hidden}
.fiche-horloger-bande span{display:block;overflow:hidden;background:#EEE9DD;aspect-ratio:1/1}
.fiche-horloger-bande img{width:100%;height:100%;object-fit:cover;display:block}

@media(max-width:900px){
  .fiche-horloger-bande{grid-template-columns:repeat(3,1fr);margin-top:24px}
  .fiche-horloger-bande span:nth-child(n+4){display:none}
}

/* La marque « Verifie par MoonList », la ou le bloc de droite promet qu'elle
   se trouve. Un bouclier dore accole au nom, jamais seul : le titre l'explique
   pour l'oeil, l'infobulle et le texte cache pour le reste. */
.horloger-verifie{display:inline-flex;align-items:center;vertical-align:middle;
  margin-left:9px;color:var(--gold-ink)}
/* Ces deux regles ont ete emportees par erreur en retirant l'ancien style de
   la fiche : sans la seconde, « Verifie par MoonList » s'affichait en toutes
   lettres dans le titre, a cote du bouclier. */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Les horaires, quand la boutique les publie. Deux des cinq le font dans les
   donnees structurees de leur propre site ; les trois autres n'en publient
   pas, et le bloc reste absent chez eux plutot que d'afficher une plage
   plausible. Un horaire faux envoie quelqu'un devant une porte close. */
.fiche-horloger-horaires{margin-top:24px;padding-top:22px;border-top:1px solid var(--hair)}
.fiche-horloger-horaires h3{margin:0 0 14px;font-family:Manrope,sans-serif;font-weight:600;
  font-size:var(--fs-14);color:var(--ink)}
.fiche-horloger-horaires dl{margin:0;display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:11px 16px}
.fiche-horloger-horaires dt{font-family:Manrope,sans-serif;font-size:var(--fs-13);color:var(--ink-soft)}
.fiche-horloger-horaires dd{margin:0;font-family:Manrope,sans-serif;font-size:var(--fs-13);
  color:var(--mute);text-align:right}

/* Faute de logo — ou quand le logo ne repond plus — la boutique doit garder sa
   place dans la page : le meme cadre que l'image, avec l'initiale au centre.
   Sans cette regle, .em n'etait stylee que sous .brandhero et laissait ici une
   lettre nue de huit pixels a cote d'un titre de quarante-six. */
.boutique-identite .em{width:112px;height:112px;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
  background:var(--white);border:1px solid var(--hair);
  font-family:"Playfair Display",Georgia,serif;font-size:var(--fs-38);
  font-weight:500;line-height:1;color:var(--ink)}

@media(max-width:900px){
  .boutique-identite .em{width:76px;height:76px;font-size:var(--fs-26)}
}

/* La liste des horlogers n'affichait aucune image : cinq cartes qui ne se
   distinguaient que par leur titre. Le logo tient dans un cadre fixe, a gauche
   du lieu et du nom, pour que l'oeil retrouve la meme colonne d'une carte a
   l'autre — y compris chez l'atelier qui n'a pas encore fourni le sien, ou ce
   sont ses initiales qui occupent la place. */
.horloger-logo{flex:0 0 auto;width:64px;height:64px;display:flex;align-items:center;
  justify-content:center;background:var(--white);border:1px solid var(--hair);overflow:hidden}
.horloger-logo-img{max-width:100%;max-height:100%;width:auto;height:auto;
  object-fit:contain;padding:7px}
.horloger-logo-initiales{font-family:"Playfair Display",Georgia,serif;font-size:var(--fs-18);
  font-weight:500;line-height:1;color:var(--ink)}
.horloger-identite{flex:1 1 220px;min-width:0}
.horloger-entete{align-items:center}
.horloger-identite h3{margin-top:7px}

@media(max-width:560px){
  .horloger-logo{width:52px;height:52px}
  .horloger-logo-initiales{font-size:var(--fs-15)}
}

/* Sur la fiche, le logo precede le nom sans lui disputer la vedette : le titre
   reste l'element qu'on lit en premier. Faute de logo, rien ne s'affiche — pas
   d'initiale ici, elle ferait doublon avec le nom qui la suit en grand. */
.fiche-horloger-titre{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.fiche-horloger-logo{flex:0 0 auto;width:78px;height:78px;display:flex;align-items:center;
  justify-content:center;background:var(--white);border:1px solid var(--hair);overflow:hidden}
.fiche-horloger-logo img{max-width:100%;max-height:100%;width:auto;height:auto;
  object-fit:contain;padding:8px}
.fiche-horloger-titre h1{flex:1 1 320px}

@media(max-width:560px){
  .fiche-horloger-logo{width:60px;height:60px}
  .fiche-horloger-titre{gap:14px}
}

/* Les liens vers les boutiques et les horlogers, en bas des pages marques.
   Ils repondent a deux questions qu'on se pose vraiment sur une page modele —
   ou en voir une, qui l'entretient — et ils portent au passage le signal qui
   manquait : au 28/09/2026, quinze pages partenaires ne recevaient qu'un seul
   lien chacune, et vingt-quatre pages du site restaient « detectees, jamais
   explorees » par Google. */
.crossblk{border-top:1px solid var(--hair);padding-block:44px 8px}
.crossgroupe + .crossgroupe{margin-top:34px;padding-top:30px;border-top:1px solid var(--hair)}
.crossgroupe h2{margin:0;font-family:"Playfair Display",Georgia,serif;
  font-size:var(--fs-26);font-weight:500;letter-spacing:-.014em;color:var(--ink)}
.crossgroupe > p{margin:7px 0 0;max-width:62ch;font-family:Manrope,sans-serif;
  font-size:var(--fs-14);line-height:1.55;color:var(--mute)}
.crossliens{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
  gap:1px;margin-top:20px;background:var(--hair)}
.crosslien{display:block;padding:14px 16px;background:var(--white);text-decoration:none}
.crosslien span{display:block;font-family:Manrope,sans-serif;font-size:var(--fs-14);
  font-weight:600;color:var(--ink)}
.crosslien small{display:block;margin-top:4px;font-family:var(--mono);font-size:var(--fs-11);
  letter-spacing:.07em;text-transform:uppercase;color:var(--mute)}
.crosslien:hover span{color:var(--gold-ink)}

@media(max-width:560px){
  .crossblk{padding-block:32px 4px}
  .crossliens{grid-template-columns:minmax(0,1fr)}
}

/* Reserver la place des annonces tant qu'elles ne sont pas arrivees.
   Ces grilles sont remplies par JavaScript apres le chargement : sur la page
   Submariner, la section passait de 180 a 913 pixels en 400 ms et poussait
   tout le reste vers le bas. Mesure du 30/09/2026 : 0,082 de decalage
   cumule sur les 0,087 de la page, pour ce seul mouvement.

   La reserve vaut une rangee — 494 px, soit la hauteur d'une carte, identique
   a trois colonnes et a une seule. Elle ne s'applique qu'a l'etat vide : des
   que le premier element est rendu, :empty cesse de correspondre et la
   hauteur redevient celle du contenu. Aucun blanc ne peut donc subsister,
   meme quand une page n'a aucune annonce a montrer. */
#marquesListings:empty,
#selectionListings:empty{min-height:494px}

@media(max-width:900px){
  #marquesListings:empty,
  #selectionListings:empty{min-height:420px}
}