/* ─────────────────────────────────────────────────────────────
   B.R.M — pages éditoriales de la maison
   Feuille commune à maison, univers, revendeurs, bijoux et
   nouveautés. Elle ne contient que ce qui se répète d'une de ces
   pages à l'autre : le bandeau d'ouverture, le sommaire ancré,
   les citations, la frise, les grilles de détails, la barre de
   recherche. Tout ce qui n'existe qu'une fois reste dans le
   <style> de sa page.

   Elle ne redéfinit aucun jeton : les couleurs, les fontes et le
   rythme viennent de site.css, qui reste la seule source.
   ───────────────────────────────────────────────────────────── */

/* ═══ Petits marqueurs ══════════════════════════════════════ */
/* Le sur-titre rouge et le filet qui le suit : ils ouvrent
   pratiquement chaque bloc de ces cinq pages. */
.sur-titre{display:block;font-size:.7rem;letter-spacing:.32em;text-transform:uppercase;
  font-weight:600;color:var(--laque)}
.filet{display:block;width:44px;height:2px;background:var(--laque);margin-top:22px}

/* ═══ Bandeau d'ouverture ═══════════════════════════════════ */
/* Une photo pleine largeur, un voile orienté, un bloc de texte.
   L'orientation du voile suit celle du texte : on ne noircit que
   le côté où les mots se posent, le reste de l'image reste lisible.
   Par défaut le texte est à gauche ; `.hero.a-droite` l'envoie de
   l'autre côté et retourne le dégradé.

   Sur téléphone, on arrête de superposer : la photo reprend sa
   place dans le flux, le voile disparaît, le texte passe dessous
   sur fond noir. Un titre par-dessus une photo de 390 px de large
   n'est jamais confortable. */
.hero{position:relative;background:var(--noir);color:#fff;overflow:hidden}
.hero-img{position:absolute;inset:0}
.hero-img img{width:100%;height:100%;object-fit:cover;object-position:var(--cadrage,50% 50%)}
.hero-voile{position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(8,8,10,.93) 0%,rgba(8,8,10,.78) 34%,
    rgba(8,8,10,.3) 64%,rgba(8,8,10,.08) 100%)}
.hero.a-droite .hero-voile{
  background:linear-gradient(90deg,rgba(8,8,10,.1) 0%,rgba(8,8,10,.3) 30%,
    rgba(8,8,10,.8) 58%,rgba(8,8,10,.93) 100%)}
.hero-in{position:relative;z-index:2;width:100%;
  min-height:min(calc(100vh - var(--header) - 40px),640px);
  display:flex;align-items:center;padding-block:clamp(48px,7vw,72px)}
.hero.a-droite .hero-in{justify-content:flex-end}
.hero.court .hero-in{min-height:min(52vh,440px)}
.hero-txt{max-width:600px}
.hero h1{font-family:var(--display);font-size:clamp(2.2rem,5vw,4.2rem);line-height:.96;
  text-transform:uppercase;margin-top:18px;letter-spacing:.015em;text-wrap:balance}
.hero-txt>p{margin-top:22px;color:rgba(255,255,255,.82);font-weight:300;max-width:50ch}
.hero .btn{margin-top:30px}
@media(max-width:860px){
  .hero-img{position:relative;inset:auto;aspect-ratio:16/10}
  .hero-img img{object-position:var(--cadrage-mobile,50% 50%)}
  .hero-voile{display:none}
  .hero-in,.hero.court .hero-in{min-height:0;justify-content:flex-start;
    padding-block:32px 46px}
  .hero-txt{max-width:none}
}

/* ═══ Sommaire ancré ════════════════════════════════════════ */
/* Une barre de liens vers les sections de la page. Elle se colle
   sous le header : sur une page longue, on garde toujours sous la
   main le moyen de sauter ailleurs. L'entrée de la section qu'on
   lit se marque toute seule (classe posée par la page).

   Un `scroll-margin-top` sur les cibles évite que le header
   recouvre le titre quand on arrive par l'ancre. */
.somm{position:sticky;top:var(--header);z-index:40;background:rgba(255,255,255,.95);
  backdrop-filter:blur(14px) saturate(1.4);
  border-block:1px solid var(--trait)}
.somm-in{display:flex;gap:8px;align-items:center;padding-block:14px;
  overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.somm-in::-webkit-scrollbar{display:none}
.somm-tit{font-size:var(--micro);letter-spacing:var(--piste);text-transform:uppercase;
  font-weight:600;color:var(--encre-tres-doux);white-space:nowrap;margin-right:10px;
  flex:0 0 auto}
.somm-lien{flex:0 0 auto;display:inline-flex;align-items:center;gap:9px;
  border:1px solid var(--trait);background:#fff;padding:10px 16px;min-height:44px;
  white-space:nowrap;
  transition:border-color .25s var(--ease),color .25s var(--ease),
             background .25s var(--ease)}
.somm-lien b{font-family:var(--display);font-size:.95rem;text-transform:uppercase;
  letter-spacing:.03em;font-weight:400}
.somm-lien i{font-style:normal;font-size:0.66rem;letter-spacing:.14em;
  color:var(--encre-tres-doux);transition:color .25s var(--ease)}
.somm-lien:hover{border-color:var(--laque);color:var(--laque)}
.somm-lien:hover i{color:var(--laque)}
.somm-lien.actif{background:var(--encre);border-color:var(--encre);color:#fff}
.somm-lien.actif i{color:rgba(255,255,255,.6)}
section[id],article[id],div[id].ancre{scroll-margin-top:calc(var(--header) + 76px)}

/* ═══ Chiffres clés ═════════════════════════════════════════ */
/* Une bande sombre, quelques nombres. Chaque nombre est vérifiable :
   ce qui n'est pas sourcé n'y figure pas. */
.chiffres{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));
  gap:clamp(26px,3vw,44px);text-align:center}
.chiffre b{display:block;font-family:var(--display);font-size:clamp(1.7rem,3vw,2.4rem);
  color:var(--laque);line-height:1;letter-spacing:.01em}
.chiffre span{display:block;font-size:0.66rem;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.6);margin-top:10px;line-height:1.5}

/* ═══ Bande image + texte, alternée ═════════════════════════ */
/* Le motif de base du récit : une photo d'un côté, un paragraphe de
   l'autre, et on inverse à chaque rangée. Empilé sur téléphone, le
   visuel passe toujours devant le texte, quel que soit le sens. */
.duo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center}
.duo+.duo{border-top:1px solid var(--trait)}
.duo-img{aspect-ratio:4/3;overflow:hidden;background:var(--creme)}
.duo-img img{width:100%;height:100%;object-fit:cover;object-position:var(--cadrage,50% 50%);
  transition:transform .8s var(--ease)}
.duo:hover .duo-img img{transform:scale(1.03)}
.duo-txt{padding:clamp(28px,5vw,80px)}
.duo-txt .num{display:block;font-family:var(--display);font-size:.95rem;color:var(--laque);
  letter-spacing:.06em}
.duo-txt .sur-titre{margin-top:14px;color:var(--encre-doux)}
.duo-txt h2{font-family:var(--display);font-size:clamp(1.8rem,3.6vw,2.8rem);
  text-transform:uppercase;line-height:1.02;margin-top:12px;text-wrap:balance}
.duo-txt p{color:var(--encre-doux);margin-top:18px;font-weight:300;max-width:46ch;
  line-height:1.72}
.duo.inverse .duo-img{order:2}
@media(max-width:900px){
  .duo{grid-template-columns:minmax(0,1fr)}
  .duo.inverse .duo-img{order:0}
  .duo-img{aspect-ratio:16/10}
  .duo-txt{padding:30px 24px 44px}
}

/* ═══ Grille de détails ═════════════════════════════════════ */
/* Les « signatures » d'une collection, ou les matériaux : un titre
   court, deux lignes. Des cellules d'un pixel de gouttière, comme
   la réassurance du bas de page — c'est la même écriture. */
.details{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:1px;background:var(--trait);border:1px solid var(--trait)}
.detail{background:#fff;padding:clamp(22px,2.6vw,32px);
  transition:background .35s var(--ease)}
.detail:hover{background:var(--creme)}
.detail b{display:block;font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;
  font-weight:600;line-height:1.5}
.detail p{color:var(--encre-doux);font-size:.86rem;font-weight:300;margin-top:10px;
  line-height:1.62}
/* Sur fond sombre, on retourne la cellule plutôt que de la percer. */
.details.sombre{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.14)}
.details.sombre .detail{background:var(--noir);color:#fff}
.details.sombre .detail:hover{background:var(--graphite)}
.details.sombre .detail p{color:rgba(255,255,255,.7)}

/* ═══ Citation ══════════════════════════════════════════════ */
/* Le mot d'un ambassadeur ou du fondateur. Les guillemets sont
   dessinés en gros derrière le texte : décoratifs, donc retirés de
   l'arbre d'accessibilité. */
.citation{position:relative;max-width:62ch;margin-inline:auto;text-align:center}
.citation::before{content:'“';position:absolute;top:-.36em;left:50%;transform:translateX(-50%);
  font-family:var(--display);font-size:clamp(5rem,11vw,9rem);line-height:1;
  color:var(--laque);opacity:.16;pointer-events:none}
.citation blockquote{position:relative;font-family:var(--display);font-weight:400;
  font-size:clamp(1.15rem,2.3vw,1.7rem);line-height:1.42;text-wrap:balance}
.citation cite{display:block;font-style:normal;margin-top:22px;font-size:.66rem;
  letter-spacing:.2em;text-transform:uppercase;font-weight:600}
.citation cite small{display:block;font-size:.66rem;letter-spacing:.06em;font-weight:400;
  text-transform:none;color:var(--encre-doux);margin-top:7px}
.citation.sur-sombre cite small{color:rgba(255,255,255,.6)}

/* ═══ Frise chronologique ═══════════════════════════════════ */
/* Les modèles qui ont marqué la maison, un par vignette, dans
   l'ordre. Sur grand écran c'est une grille ; en dessous, une piste
   qui défile au doigt avec accrochage — jamais de flèches à viser.
   Le trait horizontal derrière les vignettes matérialise le temps. */
.frise{position:relative}
.frise-piste{display:grid;grid-auto-flow:column;
  grid-auto-columns:minmax(196px,1fr);gap:1px;background:var(--trait);
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scrollbar-width:thin}
/* La couleur du texte est posée explicitement : la frise vit dans une
   bande sombre, et sans cette ligne le nom du modèle héritait du blanc
   de la bande — blanc sur cellule blanche, invisible. */
.frise-item{background:#fff;color:var(--encre);padding:24px 20px 28px;text-align:center;
  scroll-snap-align:start;transition:background .35s var(--ease)}
.frise-item:hover{background:var(--creme)}
.frise-an{display:block;font-family:var(--display);font-size:1.5rem;color:var(--laque);
  line-height:1}
.frise-img{margin:16px auto 0;width:100%;max-width:150px;aspect-ratio:1;
  display:grid;place-items:center}
.frise-img img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.frise-nom{display:block;margin-top:14px;font-family:var(--display);font-size:1.02rem;
  text-transform:uppercase;letter-spacing:.04em}
.frise-item p{margin-top:9px;font-size:.8rem;font-weight:300;color:var(--encre-doux);
  line-height:1.58}
/* Repère de défilement : sur les écrans où la piste déborde, on le dit. */
.frise-note{margin-top:14px;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--encre-tres-doux);font-weight:500}
/* Trois colonnes et non cinq : la frise compte neuf pièces, et cinq
   colonnes laissaient une cellule vide au bout de la seconde rangée —
   un trou qui se lit comme un défaut. On borne la largeur pour que les
   vignettes gardent une taille de carte, pas de bandeau. */
@media(min-width:1200px){
  .frise-piste{grid-auto-flow:row;grid-template-columns:repeat(3,minmax(0,1fr));
    max-width:1120px;margin-inline:auto;overflow:visible;scroll-snap-type:none}
  .frise-note{display:none}
}

/* ═══ Barre d'outils : recherche et filtres ═════════════════ */
/* Utilisée par l'annuaire des revendeurs et par la grille des
   bijoux. Elle se colle sous le header : on filtre sans remonter. */
.barre{position:sticky;top:var(--header);z-index:40;background:rgba(255,255,255,.96);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--trait)}
.barre-in{max-width:var(--max);margin-inline:auto;padding:15px var(--gouttiere);
  display:flex;gap:13px;align-items:center;flex-wrap:wrap}
.recherche{flex:1 1 260px;display:flex;align-items:center;gap:11px;
  border:1px solid var(--trait);padding:0 15px;min-height:46px;background:#fff;
  transition:border-color .25s var(--ease)}
.recherche:focus-within{border-color:var(--encre)}
/* 16 px pile : en dessous, iOS grossit la page à chaque prise de focus. */
.recherche input{border:0;outline:0;font-family:var(--texte);font-size:1rem;width:100%;
  align-self:stretch;background:none;min-width:0}
.recherche span{font-size:.9rem;opacity:.45;flex:0 0 auto}
.puces{display:flex;gap:8px;flex-wrap:wrap}
.puce{border:1px solid var(--trait);padding:9px 15px;min-height:44px;font-size:.67rem;
  letter-spacing:.14em;text-transform:uppercase;font-weight:500;white-space:nowrap;
  display:inline-flex;align-items:center;gap:7px;background:#fff;
  transition:background .25s var(--ease),border-color .25s var(--ease),
             color .25s var(--ease)}
.puce:hover{border-color:var(--encre)}
.puce[aria-pressed="true"],.puce.on{background:var(--encre);color:#fff;border-color:var(--encre)}
.puce em{font-style:normal;opacity:.55;font-size:.66rem}
.compteur{font-size:.67rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;
  white-space:nowrap;color:var(--encre-doux);margin-left:auto}
@media(max-width:640px){.compteur{margin-left:0}}

/* L'état « rien ne correspond ». Toujours une porte de sortie. */
.rien{padding:clamp(40px,6vw,80px) var(--gouttiere);text-align:center;
  color:var(--encre-doux);font-weight:300}
.rien b{display:block;font-family:var(--display);font-size:1.3rem;text-transform:uppercase;
  color:var(--encre);margin-bottom:10px}

/* ═══ Mouvement ═════════════════════════════════════════════ */
/* Les apparitions au défilement viennent de site.css (.reveal), qui
   n'agit que si le script tourne. On n'ajoute ici qu'un décalage en
   cascade pour les grilles : les cellules arrivent l'une après
   l'autre, de 40 ms en 40 ms, et jamais plus de six fois — au-delà
   l'attente se verrait. */
.js .cascade>*{transition-delay:calc(var(--rang,0) * 40ms)}
@media(prefers-reduced-motion:reduce){
  .js .cascade>*{transition-delay:0s}
  .frise-piste{scroll-snap-type:none}
}