/* ==========================================================================
   BIJOUTERIE LA ROSE DU FASO — « sur velours ».
   Le sceau de la maison tient en deux couleurs : l'or et un violet-rose.
   Leurs photos sont des photos de studio sur fond clair ; la page est donc
   claire, d'un blanc chaud qui prolonge le fond des bustes, et le violet
   n'apparaît qu'en velours : le bandeau d'ouverture, les alliances, l'écrin
   de la sélection. Le reste est blanc, or et silence.
   ========================================================================== */

:root{
  --blanc:#FBFAF7;
  --creme:#F3F0EA;
  --encre:#1E1720;
  --gris:#6F6873;
  --gris-clair:#A8A2AB;
  --or:#B8891F;
  --or-clair:#D9B45B;
  --velours:#4A1A3F;
  --velours-2:#5C2350;
  --rose:#A03070;
  --trait:rgba(30,23,32,.10);
  --trait-or:rgba(184,137,31,.32);
  --wa:#1FAD55;
  --marge:clamp(20px,4.5vw,64px);
  --h-tete:74px;
  --t:.5s cubic-bezier(.22,.7,.2,1);
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--h-tete) + 28px)}
body{
  margin:0;color:var(--encre);background:var(--blanc);
  font-family:'Albert Sans',system-ui,-apple-system,sans-serif;
  font-size:16px;font-weight:300;line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
body.fige{overflow:hidden}
img{display:block;max-width:100%;height:auto}
button{font:inherit;color:inherit;background:none;border:0;padding:0}
a{color:inherit;text-decoration:none}
p{margin:0}
:focus-visible{outline:1px solid var(--velours);outline-offset:4px}
h1,h2,h3{font-family:'Gilda Display',Georgia,serif;font-weight:400;margin:0;letter-spacing:.003em}
i{font-style:normal;color:var(--or);padding:0 .2em}
.eti{font-size:10.5px;font-weight:500;letter-spacing:.28em;text-transform:uppercase;color:var(--or)}
.eti-clair{color:var(--or-clair)}
.dit{color:var(--gris);font-size:15.5px;line-height:1.75}

/* ---- bandeau maquette ---- */
.mention{
  padding:8px var(--marge);text-align:center;background:var(--creme);border-bottom:1px solid var(--trait);
  color:var(--gris);font-size:11.5px;letter-spacing:.02em;line-height:1.55;
}
.mention b{font-weight:500;color:var(--encre)}

/* ---- en-tête ---- */
.entete{
  position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:28px;
  padding:11px var(--marge);background:rgba(251,250,247,.92);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--trait);
}
.griffe{flex:none;display:flex;align-items:center;gap:12px}
.griffe img{height:50px;width:auto}
.griffe-mot{font-family:'Gilda Display',serif;font-size:14.5px;line-height:1.15;letter-spacing:.04em;text-transform:uppercase;color:var(--encre)}
.menu{margin-left:auto;display:flex;gap:34px}
.menu a{font-size:11px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--gris);padding:8px 0;position:relative;transition:color .3s}
.menu a::after{content:"";position:absolute;left:0;bottom:2px;height:1px;width:0;background:var(--or);transition:width var(--t)}
.menu a:hover{color:var(--encre)}
.menu a:hover::after{width:100%}
.bouton-panier{
  flex:none;cursor:pointer;display:inline-flex;align-items:center;gap:10px;
  border:1px solid var(--velours);color:var(--velours);padding:10px 18px;
  font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;transition:background .3s,color .3s;
}
.bouton-panier:hover{background:var(--velours);color:#fff}
.bp-n{min-width:20px;height:20px;border-radius:999px;background:var(--velours);color:#fff;display:grid;place-items:center;font-size:11px;letter-spacing:0;padding:0 5px;transition:background .3s,color .3s}
.bouton-panier:hover .bp-n{background:#fff;color:var(--velours)}
.burger{display:none;flex:none;width:42px;height:38px;cursor:pointer;border:1px solid var(--trait);padding:11px 10px;flex-direction:column;justify-content:space-between}
.burger span{display:block;height:1.5px;background:var(--encre);transition:transform .4s,opacity .2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---- voiles, tiroirs ---- */
.voile,.voile-panier{position:fixed;inset:0;z-index:45;background:rgba(30,23,32,.42);animation:fondu .35s ease}
@keyframes fondu{from{opacity:0}to{opacity:1}}
.tiroir,.panier{position:fixed;z-index:50;top:0;right:0;height:100dvh;display:flex;flex-direction:column;animation:glisse .45s cubic-bezier(.22,.7,.2,1)}
@keyframes glisse{from{transform:translateX(100%)}to{transform:translateX(0)}}
.tiroir{width:min(84vw,330px);padding:20px 28px 34px;background:var(--blanc);border-left:1px solid var(--trait)}
.tiroir-fermer{align-self:flex-end;cursor:pointer;color:var(--gris);font-size:26px;line-height:1;padding:2px 6px}
.tiroir-griffe{width:64px;margin:6px 0 26px}
.tiroir-liens{list-style:none;margin:0;padding:0}
.tiroir-liens a{display:block;padding:15px 0;border-bottom:1px solid var(--trait);font-family:'Gilda Display',serif;font-size:19px;transition:color .25s}
.tiroir-liens a:hover{color:var(--velours)}
.tiroir-mot{margin-top:auto;font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--gris-clair)}

/* ---- rythme ---- */
.bloc{padding:clamp(76px,9vw,132px) var(--marge)}
.cadre{max-width:1200px;margin:0 auto}
.tete{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px 48px;margin-bottom:clamp(36px,4.5vw,58px)}
.tete-mot{max-width:600px}
.tete h2{font-size:clamp(1.75rem,3.1vw,2.45rem);line-height:1.2;margin-top:14px;text-wrap:balance}
.tete .dit{max-width:46ch}

/* ---- ouverture : le velours ---- */
.ouverture{background:var(--velours);color:#fff;
  background-image:radial-gradient(900px 500px at 82% 20%,rgba(160,48,112,.35),transparent 65%)}
.ouverture-cadre{max-width:1200px;margin:0 auto;padding:clamp(56px,7vw,100px) var(--marge);
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(36px,6vw,96px);align-items:center}
.ouverture h1{font-size:clamp(2.1rem,4.3vw,3.4rem);line-height:1.14;margin-top:22px;text-wrap:balance;max-width:14ch}
.ouverture .dit{color:rgba(255,255,255,.72);margin-top:22px;max-width:42ch}
.actes{display:flex;flex-wrap:wrap;align-items:center;gap:16px 30px;margin-top:36px}
.bouton{
  display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 32px;cursor:pointer;
  background:var(--or);color:#1E1720;font-size:11px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;
  transition:background .3s,color .3s;
}
.bouton:hover{background:var(--or-clair)}
.bouton-clair{background:#fff;color:var(--velours)}
.bouton-clair:hover{background:var(--or-clair);color:#1E1720}
.lien-clair{font-size:11px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.85);
  padding-bottom:6px;border-bottom:1px solid rgba(255,255,255,.35);transition:color .3s,border-color .3s}
.lien-clair:hover{color:#fff;border-color:var(--or-clair)}
/* la photo d'ouverture : posée sur le velours, un simple filet d'or autour */
.ouverture-vue{margin:0;position:relative;max-width:520px;justify-self:end;width:100%}
.ouverture-vue::before{content:"";position:absolute;inset:-14px;border:1px solid rgba(217,180,91,.45);pointer-events:none}
.ouverture-vue img{width:100%;aspect-ratio:1;object-fit:cover}

/* ---- collection ---- */
.filtres{display:flex;flex-wrap:wrap;gap:4px 30px;margin:0 0 clamp(34px,4vw,50px);padding-bottom:8px;border-bottom:1px solid var(--trait)}
.puce{cursor:pointer;padding:6px 0 10px;position:relative;font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--gris-clair);transition:color .3s}
.puce sup{font-size:9px;letter-spacing:0;margin-left:5px;font-weight:400}
.puce::after{content:"";position:absolute;left:0;bottom:4px;height:1px;width:0;background:var(--velours);transition:width var(--t)}
.puce:hover{color:var(--gris)}
.puce[aria-pressed="true"]{color:var(--velours)}
.puce[aria-pressed="true"]::after{width:100%}
.grille{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(40px,4.5vw,64px) clamp(20px,2.6vw,36px)}
.piece{opacity:0;transition:opacity .7s ease}
.piece.vue{opacity:1}
.piece-vue{position:relative;overflow:hidden;aspect-ratio:1;background:var(--creme)}
.piece-vue img{width:100%;height:100%;object-fit:cover;transition:transform 1s cubic-bezier(.22,.7,.2,1)}
.piece:hover .piece-vue img{transform:scale(1.03)}
.piece-bas{margin-top:14px}
.piece h3{font-size:1.05rem;line-height:1.35}
.piece-fam{display:block;margin-top:4px;font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--gris-clair)}
.piece-det{margin-top:7px;color:var(--gris);font-size:13.5px;line-height:1.6}
.ajouter{
  display:inline-block;margin-top:12px;cursor:pointer;font-size:10.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  color:var(--velours);padding-bottom:4px;border-bottom:1px solid var(--trait-or);transition:color .3s,border-color .3s;
}
.ajouter:hover{border-color:var(--velours)}
.ajouter.faite{color:var(--or);border-color:var(--or)}
.rien{color:var(--gris-clair);font-size:14px}

/* ---- alliances : second velours ---- */
.alliances{background:var(--velours-2);color:#fff;padding:clamp(64px,8vw,110px) var(--marge)}
.alliances-cadre{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(36px,6vw,96px);align-items:center}
.alliances-vue{margin:0;position:relative;max-width:460px}
.alliances-vue::before{content:"";position:absolute;inset:-14px;border:1px solid rgba(217,180,91,.45);pointer-events:none}
.alliances-vue img{width:100%;aspect-ratio:1;object-fit:cover}
.alliances h2{font-size:clamp(1.75rem,3.1vw,2.45rem);line-height:1.2;margin-top:14px;text-wrap:balance}
.alliances .dit{color:rgba(255,255,255,.72);margin-top:18px;max-width:48ch}
.alliances .bouton{margin-top:30px;border:0}
.alliances .bouton.faite{background:var(--or-clair);color:#1E1720}

/* ---- la maison ---- */
.maison-cadre{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(36px,6vw,96px);align-items:center}
.maison-mot h2{font-size:clamp(1.75rem,3.1vw,2.45rem);line-height:1.2;margin-top:14px;text-wrap:balance}
.maison-mot .dit{margin-top:18px;max-width:50ch}
.reperes{list-style:none;margin:30px 0 0;padding:0;max-width:520px}
.reperes li{display:grid;grid-template-columns:110px 1fr;gap:16px;padding:14px 0;border-top:1px solid var(--trait);align-items:baseline}
.reperes li:last-child{border-bottom:1px solid var(--trait)}
.reperes span{font-size:10.5px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--or)}
.reperes b{font-weight:400;font-size:14.5px}
.maison-vue{margin:0;max-width:440px;justify-self:end;width:100%}
.maison-vue img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center 40%}
.maison-vue figcaption{margin-top:12px;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--gris-clair)}

/* ---- commander ---- */
.commander{background:var(--creme);border-top:1px solid var(--trait)}
.coordonnees{list-style:none;margin:0;padding:0;max-width:860px}
.coordonnees li{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:6px 24px;padding:18px 0;border-top:1px solid var(--trait)}
.coordonnees li:last-child{border-bottom:1px solid var(--trait)}
.coordonnees span{font-size:10.5px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--or)}
.coordonnees b{font-weight:400;font-size:15px;text-align:right}
.coordonnees b a{border-bottom:1px solid var(--trait-or);transition:color .3s,border-color .3s}
.coordonnees b a:hover{color:var(--velours);border-color:var(--velours)}

/* ---- l'écrin : la sélection ---- */
.panier{width:min(92vw,400px);background:var(--velours);color:#fff;border-left:1px solid rgba(217,180,91,.3)}
.panier-tete{display:flex;align-items:center;justify-content:space-between;padding:20px 24px 16px;border-bottom:1px solid rgba(255,255,255,.14)}
.panier-titre{font-size:10.5px;font-weight:500;letter-spacing:.26em;text-transform:uppercase;color:var(--or-clair)}
.panier-fermer{cursor:pointer;color:rgba(255,255,255,.7);font-size:26px;line-height:1;padding:2px 6px;transition:color .25s}
.panier-fermer:hover{color:#fff}
.panier-liste{list-style:none;margin:0;padding:0 24px;overflow-y:auto;flex:1}
.ligne{display:grid;grid-template-columns:58px 1fr;gap:16px;padding:18px 0;border-bottom:1px solid rgba(255,255,255,.12);animation:entre .4s ease}
@keyframes entre{from{opacity:0}to{opacity:1}}
.ligne.sort{animation:sort .3s ease forwards}
@keyframes sort{to{opacity:0;height:0;padding:0;border:0}}
.ligne img{width:58px;aspect-ratio:1;object-fit:cover;background:var(--creme)}
.ligne-nom{font-family:'Gilda Display',serif;font-size:15.5px;line-height:1.35}
.ligne-pied{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:10px}
.qte{display:flex;align-items:center;gap:10px}
.qte button{width:24px;height:24px;cursor:pointer;border:1px solid rgba(255,255,255,.3);display:grid;place-items:center;font-size:13px;line-height:1;color:#fff;transition:border-color .25s,background .25s}
.qte button:hover{border-color:var(--or-clair);background:rgba(255,255,255,.08)}
.qte b{min-width:16px;text-align:center;font-weight:400;font-size:13px;font-variant-numeric:tabular-nums}
.oter{cursor:pointer;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.55);transition:color .25s}
.oter:hover{color:var(--or-clair)}
.panier-vide{padding:26px 24px;color:rgba(255,255,255,.6);font-size:14px}
.panier-bas{padding:20px 24px 26px;border-top:1px solid rgba(255,255,255,.14);background:rgba(0,0,0,.14)}
.panier-note{margin-bottom:16px;font-size:12.5px;line-height:1.6;color:rgba(255,255,255,.62)}
.bouton-wa{display:flex;align-items:center;justify-content:center;gap:11px;min-height:50px;background:var(--wa);color:#04190D;font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;transition:opacity .3s}
.bouton-wa svg{width:18px;height:18px;fill:currentColor}
.bouton-wa[aria-disabled="true"]{opacity:.35;pointer-events:none}
.bouton-copier{margin-top:12px;width:100%;min-height:46px;cursor:pointer;border:1px solid rgba(255,255,255,.35);color:#fff;font-size:10.5px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;transition:border-color .3s,background .3s}
.bouton-copier:hover{border-color:var(--or-clair);background:rgba(255,255,255,.06)}
.bouton-copier.ok{border-color:var(--wa);color:var(--wa)}

/* ---- pied ---- */
.pied{padding:clamp(52px,6vw,84px) var(--marge) 36px;border-top:1px solid var(--trait);background:var(--blanc)}
.pied-zone{max-width:1200px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px 40px}
.pied-griffe{width:76px}
.pied-mot{font-family:'Gilda Display',serif;font-size:1.02rem;color:var(--gris)}
.pied-bas{max-width:1200px;margin:30px auto 0;padding-top:18px;border-top:1px solid var(--trait);display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 30px;color:var(--gris-clair);font-size:11.5px;letter-spacing:.04em}

/* ---- révélation ---- */
.leve{opacity:0;transition:opacity .8s ease}
.leve.vue{opacity:1}

/* ---- adaptations ---- */
@media (max-width:1080px){
  .menu{display:none}
  .burger{display:flex}
  .bouton-panier{margin-left:auto}
  .grille{grid-template-columns:repeat(3,1fr)}
  .ouverture-cadre,.alliances-cadre,.maison-cadre{grid-template-columns:1fr;gap:40px}
  .ouverture-vue,.maison-vue{justify-self:start}
  .ouverture h1{max-width:none}
}
@media (max-width:640px){
  .entete{gap:14px;padding:10px 18px}
  .griffe img{height:40px}
  .griffe-mot{display:none}
  .bouton-panier{padding:9px 12px;letter-spacing:.14em}
  .bp-mot{display:none}
  .grille{grid-template-columns:repeat(2,1fr);gap:32px 16px}
  .piece h3{font-size:.98rem}
  .piece-det{font-size:12.5px}
  .ajouter{font-size:9.5px;letter-spacing:.14em}
  .filtres{gap:0 18px}
  .bouton{width:100%}
  .reperes li{grid-template-columns:1fr;gap:4px}
  .coordonnees b{text-align:left}
  .ouverture-vue::before,.alliances-vue::before{inset:-9px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .leve,.piece{opacity:1}
}
.piece-prix{margin-top:7px;font-size:12.5px;color:var(--velours);font-weight:400}


/* ==========================================================================
   Les ornements. Une bijouterie ne se présente pas sur une page nue : on y
   met ce qu'on trouve dans l'atelier — le diamant du logo en filet d'or, la
   maille hexagonale d'un serti, les équerres d'un écrin, l'éclat d'une pierre.
   Toujours en filet, jamais en aplat ; présents, jamais criards.
   ========================================================================== */
.orne{position:absolute;pointer-events:none;fill:none;stroke:var(--or-clair);stroke-width:.8;stroke-linejoin:round;z-index:0}
.ouverture{position:relative;overflow:hidden}
.ouverture-cadre,.alliances-cadre{position:relative;z-index:1}
.orne-face{width:min(62vw,620px);height:min(62vw,620px);left:-14%;top:50%;transform:translateY(-50%);opacity:.16}
.alliances{position:relative;overflow:hidden}
.orne-profil{width:min(58vw,560px);height:min(58vw,560px);right:-8%;top:50%;transform:translateY(-50%) rotate(-8deg);opacity:.14}
.maison{position:relative;overflow:hidden}
.orne-maison{width:min(70vw,720px);height:min(70vw,720px);right:-22%;top:-18%;stroke:var(--or);opacity:.07;z-index:0}
.maison-cadre{position:relative;z-index:1}

/* la maille du serti, sur le velours seulement */
.ouverture{background-image:url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2056%2096'%20width%3D'56'%20height%3D'96'%3E%3Cg%20fill%3D'none'%20stroke%3D'%23D9B45B'%20stroke-opacity%3D'0.1'%20stroke-width%3D'1'%3E%3Cpath%20d%3D'M28%2C2%20L54%2C17%20L54%2C47%20L28%2C62%20L2%2C47%20L2%2C17%20Z'%2F%3E%3Cpath%20d%3D'M28%2C62%20L54%2C77%20L54%2C107%20M28%2C62%20L2%2C77%20L2%2C107%20M54%2C-13%20L28%2C2%20L2%2C-13'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"),radial-gradient(900px 500px at 82% 20%,rgba(160,48,112,.35),transparent 65%)}
.alliances{background-image:url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2056%2096'%20width%3D'56'%20height%3D'96'%3E%3Cg%20fill%3D'none'%20stroke%3D'%23D9B45B'%20stroke-opacity%3D'0.09'%20stroke-width%3D'1'%3E%3Cpath%20d%3D'M28%2C2%20L54%2C17%20L54%2C47%20L28%2C62%20L2%2C47%20L2%2C17%20Z'%2F%3E%3Cpath%20d%3D'M28%2C62%20L54%2C77%20L54%2C107%20M28%2C62%20L2%2C77%20L2%2C107%20M54%2C-13%20L28%2C2%20L2%2C-13'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E")}

/* le poinçon : l'hexagone du sceau, et l'année de la maison dedans */
.poincon{display:inline-grid;place-items:center;position:relative;width:34px;height:34px;margin-right:12px;vertical-align:middle;font-size:8.5px;letter-spacing:.06em;color:var(--or-clair)}
.poincon svg{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:var(--or-clair);stroke-width:4}
/* l'hexagone, en petit, devant chaque sur-titre */
.eti::before{content:"";display:inline-block;width:9px;height:10px;margin-right:10px;vertical-align:-1px;background:url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20100%20100'%3E%3Cpath%20d%3D'M50%2C4%20L92%2C27%20L92%2C73%20L50%2C96%20L8%2C73%20L8%2C27%20Z'%20fill%3D'none'%20stroke%3D'%23B8891F'%20stroke-width%3D'9'%2F%3E%3C%2Fsvg%3E") center / contain no-repeat}
.eti-clair::before{background-image:url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20100%20100'%3E%3Cpath%20d%3D'M50%2C4%20L92%2C27%20L92%2C73%20L50%2C96%20L8%2C73%20L8%2C27%20Z'%20fill%3D'none'%20stroke%3D'%23D9B45B'%20stroke-width%3D'9'%2F%3E%3C%2Fsvg%3E")}
.ouverture .eti::before{display:none}

/* le losange au milieu du filet, sous les têtes de section */
.tete{position:relative}
.tete::after{content:"";position:absolute;left:50%;bottom:-4px;width:7px;height:7px;background:var(--or);transform:translateX(-50%) rotate(45deg);box-shadow:0 0 0 6px var(--blanc)}
.commander .tete::after{box-shadow:0 0 0 6px var(--creme)}
.pied-bas{position:relative}
.pied-bas::before{content:"";position:absolute;left:50%;top:-4px;width:7px;height:7px;background:var(--or);transform:translateX(-50%) rotate(45deg);box-shadow:0 0 0 6px var(--blanc)}

/* les équerres d'écrin : quatre coins d'or sur chaque photo posée sur velours */
.ecrin::before{display:none}
.ecrin::after{content:"";position:absolute;inset:-14px;pointer-events:none;background:url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2042%2042'%3E%3Cg%20transform%3D'rotate(0%2021%2021)'%20fill%3D'none'%20stroke%3D'%23D9B45B'%20stroke-width%3D'1.3'%20stroke-opacity%3D'0.95'%3E%3Cpath%20d%3D'M2%2C40%20L2%2C2%20L40%2C2%20M2%2C2%20m6%2C6%20l3%2C-3%20l3%2C3%20l-3%2C3%20z'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") top left / 22px 22px no-repeat, url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2042%2042'%3E%3Cg%20transform%3D'rotate(90%2021%2021)'%20fill%3D'none'%20stroke%3D'%23D9B45B'%20stroke-width%3D'1.3'%20stroke-opacity%3D'0.95'%3E%3Cpath%20d%3D'M2%2C40%20L2%2C2%20L40%2C2%20M2%2C2%20m6%2C6%20l3%2C-3%20l3%2C3%20l-3%2C3%20z'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") top right / 22px 22px no-repeat, url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2042%2042'%3E%3Cg%20transform%3D'rotate(180%2021%2021)'%20fill%3D'none'%20stroke%3D'%23D9B45B'%20stroke-width%3D'1.3'%20stroke-opacity%3D'0.95'%3E%3Cpath%20d%3D'M2%2C40%20L2%2C2%20L40%2C2%20M2%2C2%20m6%2C6%20l3%2C-3%20l3%2C3%20l-3%2C3%20z'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") bottom right / 22px 22px no-repeat, url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2042%2042'%3E%3Cg%20transform%3D'rotate(270%2021%2021)'%20fill%3D'none'%20stroke%3D'%23D9B45B'%20stroke-width%3D'1.3'%20stroke-opacity%3D'0.95'%3E%3Cpath%20d%3D'M2%2C40%20L2%2C2%20L40%2C2%20M2%2C2%20m6%2C6%20l3%2C-3%20l3%2C3%20l-3%2C3%20z'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") bottom left / 22px 22px no-repeat}
/* et, plus discrètes, sur chaque pièce de la collection — elles s'allument au survol */
.piece-vue::after{content:"";position:absolute;inset:6px;pointer-events:none;background:url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2042%2042'%3E%3Cg%20transform%3D'rotate(0%2021%2021)'%20fill%3D'none'%20stroke%3D'%23B8891F'%20stroke-width%3D'1.3'%20stroke-opacity%3D'0.6'%3E%3Cpath%20d%3D'M2%2C40%20L2%2C2%20L40%2C2%20M2%2C2%20m6%2C6%20l3%2C-3%20l3%2C3%20l-3%2C3%20z'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") top left / 22px 22px no-repeat, url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2042%2042'%3E%3Cg%20transform%3D'rotate(90%2021%2021)'%20fill%3D'none'%20stroke%3D'%23B8891F'%20stroke-width%3D'1.3'%20stroke-opacity%3D'0.6'%3E%3Cpath%20d%3D'M2%2C40%20L2%2C2%20L40%2C2%20M2%2C2%20m6%2C6%20l3%2C-3%20l3%2C3%20l-3%2C3%20z'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") top right / 22px 22px no-repeat, url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2042%2042'%3E%3Cg%20transform%3D'rotate(180%2021%2021)'%20fill%3D'none'%20stroke%3D'%23B8891F'%20stroke-width%3D'1.3'%20stroke-opacity%3D'0.6'%3E%3Cpath%20d%3D'M2%2C40%20L2%2C2%20L40%2C2%20M2%2C2%20m6%2C6%20l3%2C-3%20l3%2C3%20l-3%2C3%20z'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") bottom right / 22px 22px no-repeat, url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2042%2042'%3E%3Cg%20transform%3D'rotate(270%2021%2021)'%20fill%3D'none'%20stroke%3D'%23B8891F'%20stroke-width%3D'1.3'%20stroke-opacity%3D'0.6'%3E%3Cpath%20d%3D'M2%2C40%20L2%2C2%20L40%2C2%20M2%2C2%20m6%2C6%20l3%2C-3%20l3%2C3%20l-3%2C3%20z'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") bottom left / 22px 22px no-repeat;transition:inset .4s}
.piece:hover .piece-vue::after{inset:4px;background:url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2042%2042'%3E%3Cg%20transform%3D'rotate(0%2021%2021)'%20fill%3D'none'%20stroke%3D'%23B8891F'%20stroke-width%3D'1.3'%20stroke-opacity%3D'1'%3E%3Cpath%20d%3D'M2%2C40%20L2%2C2%20L40%2C2%20M2%2C2%20m6%2C6%20l3%2C-3%20l3%2C3%20l-3%2C3%20z'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") top left / 22px 22px no-repeat, url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2042%2042'%3E%3Cg%20transform%3D'rotate(90%2021%2021)'%20fill%3D'none'%20stroke%3D'%23B8891F'%20stroke-width%3D'1.3'%20stroke-opacity%3D'1'%3E%3Cpath%20d%3D'M2%2C40%20L2%2C2%20L40%2C2%20M2%2C2%20m6%2C6%20l3%2C-3%20l3%2C3%20l-3%2C3%20z'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") top right / 22px 22px no-repeat, url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2042%2042'%3E%3Cg%20transform%3D'rotate(180%2021%2021)'%20fill%3D'none'%20stroke%3D'%23B8891F'%20stroke-width%3D'1.3'%20stroke-opacity%3D'1'%3E%3Cpath%20d%3D'M2%2C40%20L2%2C2%20L40%2C2%20M2%2C2%20m6%2C6%20l3%2C-3%20l3%2C3%20l-3%2C3%20z'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") bottom right / 22px 22px no-repeat, url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2042%2042'%3E%3Cg%20transform%3D'rotate(270%2021%2021)'%20fill%3D'none'%20stroke%3D'%23B8891F'%20stroke-width%3D'1.3'%20stroke-opacity%3D'1'%3E%3Cpath%20d%3D'M2%2C40%20L2%2C2%20L40%2C2%20M2%2C2%20m6%2C6%20l3%2C-3%20l3%2C3%20l-3%2C3%20z'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") bottom left / 22px 22px no-repeat}
.panier-tete{position:relative}
.panier-tete::before{content:"";position:absolute;inset:8px 8px auto 8px;height:22px;pointer-events:none;background:url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2042%2042'%3E%3Cg%20transform%3D'rotate(0%2021%2021)'%20fill%3D'none'%20stroke%3D'%23D9B45B'%20stroke-width%3D'1.3'%20stroke-opacity%3D'0.85'%3E%3Cpath%20d%3D'M2%2C40%20L2%2C2%20L40%2C2%20M2%2C2%20m6%2C6%20l3%2C-3%20l3%2C3%20l-3%2C3%20z'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") top left / 22px 22px no-repeat,url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2042%2042'%3E%3Cg%20transform%3D'rotate(90%2021%2021)'%20fill%3D'none'%20stroke%3D'%23D9B45B'%20stroke-width%3D'1.3'%20stroke-opacity%3D'0.85'%3E%3Cpath%20d%3D'M2%2C40%20L2%2C2%20L40%2C2%20M2%2C2%20m6%2C6%20l3%2C-3%20l3%2C3%20l-3%2C3%20z'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") top right / 22px 22px no-repeat}

/* l'éclat : quatre petites étoiles autour de la photo d'ouverture, qui scintillent lentement */
.eclat{position:absolute;width:22px;height:22px;fill:var(--or-clair);pointer-events:none;animation:scintille 4.2s ease-in-out infinite}
.e1{top:-26px;right:8%;width:26px;height:26px}
.e2{top:18%;left:-30px;width:16px;height:16px;animation-delay:1.1s;animation-duration:5.1s}
.e3{bottom:10%;right:-28px;width:20px;height:20px;animation-delay:2.3s;animation-duration:4.7s}
.e4{bottom:-24px;left:22%;width:13px;height:13px;animation-delay:.6s;animation-duration:5.6s}
@keyframes scintille{0%,100%{opacity:.18;transform:scale(.7) rotate(0deg)}50%{opacity:1;transform:scale(1) rotate(18deg)}}

@media (max-width:1080px){
  .orne-face{width:420px;height:420px;left:auto;right:-30%;top:-8%;transform:none;opacity:.12}
  .orne-profil{width:380px;height:380px;right:-24%;top:auto;bottom:-10%;transform:rotate(-8deg);opacity:.12}
  .orne-maison{width:460px;height:460px;right:-34%;top:-8%}
}
@media (max-width:640px){
  .ecrin::after{inset:-9px}
  .e1{top:-18px;right:6%;width:20px;height:20px}
  .e2{left:-16px} .e3{right:-14px} .e4{bottom:-16px}
  .poincon{width:30px;height:30px;font-size:8px;margin-right:9px}
  .eti-suite{display:none}
}
@media (prefers-reduced-motion:reduce){
  .eclat{animation:none;opacity:.7}
}