/* ══ A v5 — La Collection de Noël (collection/index.html, généré par outils/collection.py) ══════════════
   Chargé après site.css, menu-g.css, noel3.css et assets/v5/v5.css : mêmes jetons (--v5-*), mêmes polices
   (Oswald = var(--display), Inter = var(--texte)). Velours vert sapin et bordeaux, or, crème ; médaillons crème
   bordés d'or ; séparateurs en ruban satin avec le nœud 3D. Sans personnages. prefers-reduced-motion : rien ne bouge. */
html{scroll-padding-top:calc(var(--header,78px) + 72px)}
body.col{background:var(--v5-vert-900);color:var(--v5-creme)}
.col .entete,.col .entete.pose{background:rgba(255,255,255,.97);border-bottom:1px solid rgba(14,58,43,.12);box-shadow:0 1px 24px rgba(3,20,14,.12)}
.col main{display:block}

/* ── petits éléments communs ── */
.col-sur{display:flex;align-items:center;gap:12px;font-family:var(--display);font-weight:500;text-transform:uppercase;letter-spacing:.24em;font-size:.78rem;color:var(--v5-or-clair)}
.col-flocon{flex:none;width:12px;height:12px;transform:rotate(45deg);background:conic-gradient(var(--v5-or) 25%,transparent 0 50%,var(--v5-or) 0 75%,transparent 0) 0 0/6px 6px}
.col-titre{font-family:var(--display);font-weight:600;text-transform:uppercase;line-height:.96;letter-spacing:.005em;font-size:clamp(2.4rem,5.6vw,4.6rem);color:var(--v5-creme);text-wrap:balance}
.col-titre em,.col-h1 em{font-style:normal;color:var(--v5-or-clair)}
.col-dit{font-size:clamp(.95rem,1.1vw,1.05rem);line-height:1.6;max-width:56ch;color:rgba(246,239,227,.82)}
.col-note{font-family:var(--display);font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;color:var(--v5-or-clair)}
.col-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 28px;border:1px solid rgba(241,217,160,.7);border-radius:999px;
  font-family:var(--display);font-weight:500;font-size:.86rem;letter-spacing:.16em;text-transform:uppercase;color:var(--v5-or-clair);background:rgba(3,20,14,.18);
  transition:background .35s var(--v5-ease),color .35s,border-color .35s,transform .35s var(--v5-ease)}
.col-btn::after{content:"→";letter-spacing:0}
.col-btn:hover{background:var(--v5-or);border-color:var(--v5-or);color:var(--v5-vert-950);transform:translateY(-2px)}
.col-btn-or{background:linear-gradient(180deg,#F1D9A0,#D4AF5F 55%,#B8924A);border-color:transparent;color:var(--v5-vert-950);box-shadow:0 14px 30px -14px rgba(0,0,0,.6)}
.col-btn-or:hover{filter:brightness(1.06)}
.col-aide{display:inline-flex;align-items:center;gap:6px;min-height:44px;font-size:.9rem;color:rgba(246,239,227,.78)}
.col-aide u{text-decoration:none;border-bottom:1px solid rgba(241,217,160,.6);color:var(--v5-or-clair);padding-bottom:1px}
.col-aide:hover u{border-bottom-color:currentColor;color:#fff}

/* ── les paillettes d'or, discrètes ── */
.col-paillettes{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.55;
  background-image:
    radial-gradient(1.6px 1.6px at 12% 18%,#F1D9A0 50%,transparent 51%),radial-gradient(1.2px 1.2px at 27% 72%,#F1D9A0 50%,transparent 51%),
    radial-gradient(2px 2px at 44% 30%,#D4AF5F 50%,transparent 51%),radial-gradient(1.2px 1.2px at 63% 84%,#F1D9A0 50%,transparent 51%),
    radial-gradient(1.6px 1.6px at 78% 12%,#F1D9A0 50%,transparent 51%),radial-gradient(1.2px 1.2px at 91% 56%,#D4AF5F 50%,transparent 51%),
    radial-gradient(1.4px 1.4px at 6% 88%,#D4AF5F 50%,transparent 51%),radial-gradient(1.2px 1.2px at 55% 8%,#F1D9A0 50%,transparent 51%);
  background-size:520px 520px}
.col-paillettes::after{content:"";position:absolute;inset:0;background-image:
    radial-gradient(1.4px 1.4px at 33% 44%,#F1D9A0 50%,transparent 51%),radial-gradient(1.8px 1.8px at 71% 38%,#D4AF5F 50%,transparent 51%),
    radial-gradient(1.2px 1.2px at 18% 62%,#F1D9A0 50%,transparent 51%),radial-gradient(1.4px 1.4px at 86% 90%,#F1D9A0 50%,transparent 51%);
  background-size:380px 380px;opacity:.8}
.noel-anime .col-paillettes::after{animation:col-scintille 5.5s ease-in-out infinite alternate}
@keyframes col-scintille{from{opacity:.15}to{opacity:.9}}

/* ═══ En-tête de la collection ══════════════════════════════════════════════════ */
.col-hero{position:relative;overflow:hidden;background:var(--v5-velours-vert);padding:calc(var(--header,78px) + clamp(36px,6vw,84px)) 0 clamp(48px,6vw,88px)}
.col-hero::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse 38% 46% at 74% 46%,rgba(241,217,160,.16),transparent 70%),linear-gradient(180deg,transparent 72%,rgba(3,20,14,.45))}
.col-hero-ruban{position:absolute;z-index:1;top:0;bottom:0;inset-inline-start:72%;width:clamp(18px,1.9vw,30px);translate:-50% 0;background:var(--v5-satin);box-shadow:0 0 0 1px rgba(0,0,0,.12),0 18px 40px rgba(0,0,0,.35);opacity:.92}
/* 13/11 (recette) : en arabe, le ruban passait sur le texte du héros ; il suit maintenant le sens de lecture */
html[dir="rtl"] .col-hero-ruban{translate:50% 0}
.col-hero-in{position:relative;z-index:2;max-width:1360px;margin:0 auto;padding-inline:var(--gouttiere);display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);align-items:center;gap:clamp(24px,4vw,64px)}
.col-hero-txt{display:flex;flex-direction:column;gap:clamp(16px,2vw,24px)}
.col-h1{font-family:var(--display);font-weight:600;text-transform:uppercase;line-height:1.02;font-size:clamp(2.9rem,6.6vw,5.8rem);color:var(--v5-creme);text-wrap:balance}
.col-h1 em{display:block}
.col-h-dit{font-size:clamp(1rem,1.3vw,1.18rem);line-height:1.6;max-width:44ch;color:rgba(246,239,227,.86)}
.col-h-liens{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:6px}
/* la vitrine : trois médaillons crème bordés d'or, le nœud satin posé sur celui du centre */
.col-vitrine{position:relative;height:clamp(340px,40vw,560px)}
.col-vm{position:absolute;display:block;border-radius:999px 999px 26px 26px;overflow:visible;
  background:radial-gradient(ellipse 62% 55% at 50% 42%,#FFFDF8 0%,#F6EFE3 60%,#E9DCC2 100%);
  box-shadow:0 0 0 2px var(--v5-or),0 0 0 7px rgba(246,239,227,.9),0 0 0 8px rgba(212,175,95,.8),0 30px 60px -24px rgba(0,0,0,.7)}
.col-vm img{position:absolute;inset:9% 10% 8%;width:80%;height:83%;object-fit:contain}
.col-vm-c{left:50%;top:6%;width:44%;height:86%;translate:-50% 0;z-index:3}
.col-vm-g{left:2%;top:30%;width:30%;height:58%;z-index:2;rotate:-5deg}
.col-vm-d{right:2%;top:24%;width:31%;height:62%;z-index:2;rotate:5deg}
.col-vm-c img.col-vm-noeud{inset:auto;left:50%;top:-15%;width:58%;height:auto;translate:-50% 0;filter:drop-shadow(0 12px 16px rgba(0,0,0,.4))}
.noel-anime .col-vm{animation:col-pose .9s var(--v5-ease) both}
.noel-anime .col-vm-g{animation-delay:.12s}.noel-anime .col-vm-d{animation-delay:.24s}
@keyframes col-pose{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
.noel-anime .col-vm-noeud{animation:col-noue 1s .5s cubic-bezier(.2,1.4,.4,1) both}
@keyframes col-noue{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}

/* ═══ La barre des familles, collante ═══════════════════════════════════════════ */
.col-nav{position:sticky;top:var(--header,78px);z-index:40;background:rgba(6,32,26,.96);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-top:1px solid rgba(241,217,160,.22);border-bottom:1px solid rgba(241,217,160,.22);box-shadow:0 12px 24px -18px rgba(0,0,0,.7)}
.col-nav-in{max-width:1360px;margin:0 auto;display:flex;justify-content:center;gap:4px;overflow-x:auto;scrollbar-width:none;padding-inline:calc(var(--gouttiere) - 12px)}
.col-nav-in::-webkit-scrollbar{display:none}
.col-nav a{flex:none;position:relative;display:flex;align-items:center;gap:9px;min-height:58px;padding:0 16px;font-family:var(--display);font-weight:500;
  font-size:.86rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(246,239,227,.7);transition:color .3s}
.col-nav a i{font-style:normal;display:inline-grid;place-items:center;min-width:24px;height:22px;padding:0 7px;border-radius:11px;border:1px solid rgba(241,217,160,.55);
  font-family:var(--texte);font-size:12px;letter-spacing:0;color:var(--v5-or-clair)}
.col-nav a::after{content:"";position:absolute;left:16px;right:16px;bottom:-1px;height:3px;background:var(--v5-satin-h);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--v5-ease)}
.col-nav a:hover,.col-nav a.on{color:var(--v5-creme)}
.col-nav a.on::after{transform:none}
.col-nav a.on i{background:var(--v5-or);border-color:var(--v5-or);color:var(--v5-vert-950)}

/* ═══ Les familles ═══════════════════════════════════════════════════════════════ */
.col-fam{position:relative;overflow:hidden;padding-block:clamp(64px,8vw,120px)}
.col-fond-vert{background:var(--v5-velours-vert)}
.col-fond-rouge{background:var(--v5-velours-rouge)}
.col-fond-nuit{background:radial-gradient(ellipse 70% 60% at 50% 30%,#134A37 0%,#0A2C21 45%,#03140E 100%)}
.col-fond-creme{background:linear-gradient(180deg,var(--v5-creme) 0%,#F1E6D2 100%);color:var(--v5-encre)}
.col-fam-in{position:relative;z-index:2;max-width:1360px;margin:0 auto;padding-inline:var(--gouttiere)}
.col-fam-tete{display:grid;gap:12px;margin-bottom:clamp(30px,4vw,52px)}
@media(min-width:960px){
  .col-fam-tete{grid-template-columns:minmax(0,1fr) minmax(0,460px);column-gap:60px;align-items:end}
  .col-fam-tete .col-sur,.col-fam-tete .col-titre{grid-column:1}
  .col-fam-tete .col-dit{grid-column:2;grid-row:2}
  .col-fam-tete .col-note{grid-column:2;grid-row:3}
}
.col-bloc+.col-bloc{margin-top:clamp(40px,5vw,72px)}
.col-h3{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 18px;margin-bottom:18px;padding-bottom:12px;border-bottom:1px solid rgba(241,217,160,.26);
  font-family:var(--display);font-weight:500;text-transform:uppercase;letter-spacing:.06em;font-size:clamp(1.25rem,1.9vw,1.7rem);color:var(--v5-creme)}
.col-h3 span{font-family:var(--texte);font-weight:400;text-transform:none;letter-spacing:0;font-size:.9rem;color:var(--v5-or-clair)}
.col-fam-pied{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px 30px;margin-top:clamp(36px,4vw,56px);padding-top:clamp(26px,3vw,36px);
  border-top:1px solid rgba(241,217,160,.22)}

/* ── les cartes : médaillon crème bordé d'or, prix en or ── */
.col-carte{position:relative;display:flex;flex-direction:column;border-radius:18px;overflow:hidden;color:var(--v5-creme);
  background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.025));border:1px solid rgba(241,217,160,.3);
  box-shadow:0 18px 34px -22px rgba(0,0,0,.65);transition:transform .45s var(--v5-ease),border-color .35s,box-shadow .45s}
.col-carte:hover{transform:translateY(-4px);border-color:var(--v5-or-clair);box-shadow:0 26px 44px -22px rgba(0,0,0,.7)}
.col-carte:focus-visible{outline:2px solid var(--v5-or-clair);outline-offset:3px}
.col-medaillon{position:relative;display:block;margin:10px 10px 0;aspect-ratio:340/380;border-radius:999px 999px 14px 14px;overflow:hidden;
  background:radial-gradient(ellipse 62% 55% at 50% 44%,#FFFDF8 0%,#F6EFE3 60%,#E9DCC2 100%);
  box-shadow:0 0 0 1px rgba(212,175,95,.95) inset,0 0 0 5px rgba(246,239,227,.6) inset,0 0 0 6px rgba(212,175,95,.55) inset}
.col-medaillon img{position:absolute;inset:7% 6% 5%;width:88%;height:88%;object-fit:contain;transition:transform .6s var(--v5-ease)}
.col-carte:hover .col-medaillon img{transform:scale(1.05)}
.col-badges{position:absolute;z-index:2;left:50%;bottom:8px;translate:-50% 0;display:flex;gap:5px;white-space:nowrap}
.col-badge{font-family:var(--display);font-weight:500;font-size:12px;letter-spacing:.1em;text-transform:uppercase;padding:3px 8px;border-radius:3px;background:var(--v5-rouge);color:#fff}
.col-badge-stock{background:var(--v5-vert-600)}
.col-carte-txt{display:flex;flex-direction:column;gap:4px;padding:14px 16px 18px;text-align:center;align-items:center;flex:1}
.col-nom{font-family:var(--display);font-weight:500;font-size:.98rem;letter-spacing:.03em;text-transform:uppercase;line-height:1.2;color:var(--v5-creme)}
.col-sous{font-style:normal;font-size:.8rem;color:rgba(246,239,227,.72)}
.col-prix{margin-top:2px;font-family:var(--display);font-weight:500;font-size:1.02rem;letter-spacing:.04em;color:var(--v5-or-clair);font-variant-numeric:tabular-nums}
.col-mention{margin-top:auto;padding-top:8px;font-size:12px;line-height:1.4;color:rgba(246,239,227,.66)}
.col-carte-l .col-nom{font-size:1.12rem}
/* sur crème : carte blanche, liseré d'or, prix en or foncé */
.col-fond-creme .col-carte{background:#fff;color:var(--v5-encre);border-color:rgba(184,146,74,.55);box-shadow:0 1px 0 rgba(0,0,0,.04),0 18px 32px -22px rgba(60,40,10,.45)}
.col-fond-creme .col-carte:hover{border-color:var(--v5-or-fonce)}
.col-fond-creme .col-nom{color:var(--v5-encre)}
.col-fond-creme .col-sous{color:#5f5750}
.col-fond-creme .col-prix{color:#7A5718}
.col-fond-creme .col-titre{color:var(--v5-vert-700)}
.col-fond-creme .col-titre em{color:var(--v5-rouge)}
.col-fond-creme .col-dit{color:#4d463f}
.col-fond-creme .col-sur,.col-fond-creme .col-note{color:var(--v5-or-fonce)}
.col-fond-creme .col-btn{color:var(--v5-vert-700);border-color:var(--v5-vert-700);background:transparent}
.col-fond-creme .col-btn:hover{background:var(--v5-vert-700);color:var(--v5-creme)}
.col-fond-creme .col-aide{color:#5f5750}
.col-fond-creme .col-aide u{color:var(--v5-rouge);border-bottom-color:rgba(189,50,56,.5)}
.col-fond-creme .col-fam-pied{border-top-color:rgba(14,58,43,.14)}

/* ── grilles ── */
.col-grille{display:grid;gap:clamp(12px,1.4vw,20px);grid-template-columns:repeat(2,minmax(0,1fr))}
@media(min-width:700px){.col-grille{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:1100px){.col-grille{grid-template-columns:repeat(4,minmax(0,1fr))}
  .col-grille-6{grid-template-columns:repeat(6,minmax(0,1fr))}.col-grille-5{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media(min-width:700px) and (max-width:1099px){.col-grille-6{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(min-width:700px){.col-grille-h{grid-template-columns:repeat(3,minmax(0,1fr))}}
.col-grille-6 .col-nom{font-size:.9rem}
.col-grille-h .col-medaillon{border-radius:999px 999px 18px 18px}
.col-grille-h .col-medaillon img{inset:5% 5% 3%;width:90%;height:92%}

/* ── rails (best-sellers, prêtes à partir) ── */
.col-rail-cadre{position:relative}
.col-rail{display:flex;gap:16px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:2px;padding:4px 2px 14px;
  scrollbar-width:thin;scrollbar-color:rgba(241,217,160,.45) transparent}
.col-rail::-webkit-scrollbar{height:6px}.col-rail::-webkit-scrollbar-thumb{background:rgba(241,217,160,.45);border-radius:3px}
.col-rail:focus-visible{outline:2px solid var(--v5-or-clair);outline-offset:4px;border-radius:8px}
.col-rail .col-carte{flex:0 0 calc((100% - 16px * 4) / 4.6);min-width:200px;scroll-snap-align:start}
@media(max-width:1100px){.col-rail .col-carte{flex-basis:calc((100% - 16px * 2) / 3.3)}}
@media(max-width:700px){.col-rail .col-carte{flex-basis:44vw;min-width:0}
  .col-rail{margin-inline:calc(var(--gouttiere) * -1);padding-inline:var(--gouttiere);scroll-padding-inline:var(--gouttiere)}}
.col-fl{position:absolute;z-index:3;top:40%;translate:0 -50%;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;font-size:1.1rem;
  background:rgba(3,20,14,.86);color:var(--v5-or-clair);border:1px solid rgba(241,217,160,.55);box-shadow:0 10px 24px -10px rgba(0,0,0,.6);transition:opacity .3s,background .3s}
.col-fl:hover{background:var(--v5-or);color:var(--v5-vert-950)}
.col-fl-g{left:-14px}.col-fl-d{right:-14px}
.col-rail-cadre.au-debut .col-fl-g,.col-rail-cadre.a-la-fin .col-fl-d{opacity:0;pointer-events:none}
@media(max-width:899px){.col-fl{display:none}}

/* ── filtres et tri des montres ── */
.col-filtres{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;margin-bottom:22px;padding:16px 18px;border-radius:16px;
  background:rgba(3,20,14,.32);border:1px solid rgba(241,217,160,.2)}
.col-f-groupe{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.col-f-nom{font-family:var(--display);font-size:.8rem;letter-spacing:.18em;text-transform:uppercase;color:var(--v5-or-clair)}
.col-f-chips{display:flex;flex-wrap:wrap;gap:8px}
.col-chip{min-height:44px;padding:0 16px;border-radius:999px;border:1px solid rgba(241,217,160,.4);background:transparent;color:var(--v5-creme);
  font-family:var(--texte);font-size:13px;line-height:1;white-space:nowrap;cursor:pointer;transition:background .25s,color .25s,border-color .25s}
.col-chip:hover{border-color:var(--v5-or-clair)}
.col-chip[aria-pressed="true"]{background:var(--v5-or);border-color:var(--v5-or);color:var(--v5-vert-950);font-weight:600}
.col-chip-stock::before{content:"";display:inline-block;width:8px;height:8px;margin-right:8px;border-radius:50%;background:#3FA772;vertical-align:1px}
.col-tri{display:inline-flex;align-items:center;gap:10px;font-family:var(--display);font-size:.8rem;letter-spacing:.18em;text-transform:uppercase;color:var(--v5-or-clair)}
.col-tri select{min-height:44px;padding:0 38px 0 14px;border-radius:999px;border:1px solid rgba(241,217,160,.4);color:var(--v5-creme);font-family:var(--texte);
  font-size:14px;letter-spacing:0;text-transform:none;-webkit-appearance:none;appearance:none;cursor:pointer;
  background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23F1D9A0' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 14px center}
.col-tri select option{color:#1A1512;background:#fff}
.col-f-bas{gap:12px 20px}
.col-f-compte{margin-left:auto;font-size:.9rem;color:rgba(246,239,227,.8)}
.col-f-compte b{font-family:var(--display);font-weight:500;font-size:1.1rem;color:var(--v5-or-clair)}
.col-grille [hidden]{display:none}
.col-vide{display:flex;flex-direction:column;align-items:center;gap:16px;padding:40px 0;text-align:center;color:rgba(246,239,227,.82)}
.col-vide[hidden]{display:none}
@media(max-width:700px){
  .col-filtres{padding:14px;gap:14px}
  .col-f-groupe{width:100%}
  .col-f-nom{width:100%}
  .col-f-compte{margin-left:0;width:100%}
  .col-chip{padding:0 13px}
}

/* ── séparateur en ruban, le nœud au milieu ── */
.col-sep{position:relative;z-index:5;height:14px;background:var(--v5-filet);box-shadow:0 6px 18px rgba(0,0,0,.35)}
.col-sep img{position:absolute;left:50%;top:50%;width:clamp(70px,7vw,96px);height:auto;translate:-50% -56%;filter:drop-shadow(0 8px 12px rgba(0,0,0,.45))}

/* ═══ C'est un cadeau ═══════════════════════════════════════════════════════════ */
.col-cadeau{position:relative;background:linear-gradient(180deg,#F1E6D2 0%,var(--v5-creme) 100%);color:var(--v5-encre);padding-block:clamp(64px,7vw,104px);border-top:12px solid transparent;border-image:var(--v5-filet) 1}
.col-cadeau-in{max-width:1360px;margin:0 auto;padding-inline:var(--gouttiere);display:grid;gap:14px;justify-items:center;text-align:center}
.col-cadeau .col-sur{color:var(--v5-or-fonce)}
.col-cadeau .col-titre{color:var(--v5-vert-700)}
.col-cadeau .col-titre em{color:var(--v5-rouge)}
.col-cadeau-liste{list-style:none;margin:clamp(20px,3vw,36px) 0 0;padding:0;display:grid;gap:18px;grid-template-columns:repeat(3,minmax(0,1fr));width:100%;max-width:1080px}
.col-cadeau-liste li{display:flex;flex-direction:column;align-items:center;gap:8px;padding:30px 36px 28px;border-radius:160px 160px 18px 18px;background:#fff;
  border:1px solid rgba(184,146,74,.55);box-shadow:0 0 0 5px rgba(246,239,227,.9) inset,0 0 0 6px rgba(212,175,95,.45) inset,0 18px 32px -24px rgba(60,40,10,.45)}
.col-cadeau-liste b{font-family:var(--display);font-weight:600;font-size:1.3rem;letter-spacing:.06em;text-transform:uppercase;color:var(--v5-vert-700);margin-top:18px}
.col-cadeau-liste span{font-size:.95rem;line-height:1.55;color:#4d463f;max-width:30ch}
@media(max-width:760px){.col-cadeau-liste{grid-template-columns:1fr}.col-cadeau-liste li{border-radius:22px;padding:22px 20px}.col-cadeau-liste b{margin-top:4px}}

/* ═══ Téléphone et tablette ═════════════════════════════════════════════════════ */
@media(max-width:959px){
  .col-hero-in{grid-template-columns:1fr}
  .col-vitrine{height:clamp(260px,64vw,420px);max-width:560px;width:100%;margin:8px auto 0}
  .col-hero-ruban{inset-inline-start:50%;top:auto;height:clamp(300px,74vw,480px);bottom:clamp(30px,5vw,60px);opacity:.75}
  .col-nav-in{justify-content:flex-start}
  .col-nav a{min-height:52px;padding:0 13px;font-size:.8rem;letter-spacing:.12em}
}
@media(max-width:600px){
  .col-h-liens{flex-direction:column;align-items:stretch}
  .col-h-liens .col-btn{width:100%}
  .col-h-liens .col-aide{justify-content:center}
  .col-fam-pied{flex-direction:column}
  .col-fam-pied .col-btn{width:100%;max-width:380px}
  .col-quoi{display:none}
  .col-carte-txt{padding:12px 10px 14px}
  .col-nom,.col-grille-6 .col-nom{font-size:.84rem}
  .col-carte-l .col-nom{font-size:.95rem}
  .col-prix{font-size:.95rem}
  .col-badges{flex-direction:column;align-items:center;gap:3px}
  .col-medaillon{margin:8px 8px 0}
}
@media (prefers-reduced-motion:reduce){.col-carte,.col-medaillon img,.col-nav a::after{transition:none}}

/* ── ajouts du 04/11/2026 : V5 et montres « Pour elle » (visuels détourés), « Voir plus », en-tête et pied à 12 px ── */
.col-medaillon img.col-img-p{inset:14% 16% 11%;width:68%;height:75%}
.col-plus{display:flex;justify-content:center;margin-top:26px}
.col-plus [hidden]{display:none}
.col-btn-plus::after{content:"↓"}
@media(min-width:1280px){[data-grille-montres]{grid-template-columns:repeat(5,minmax(0,1fr))}}
.col .entete a,.col .entete button,.col .entete .lang-code{font-size:12px}
.col .entete .pastille{font-size:12px}
.col footer h4,.col footer .foot-plier,.col footer a,.col footer span{font-size:max(12px,1em)}
@media(max-width:600px){.col-badges{flex-direction:row}.col-badges .col-badge:not(:last-child){display:none}}

/* ═══ Version courte (François, 04/11/2026 : « trop de produits, trop long ») ═══════════════════════
   Le principal par famille, puis de gros boutons or vers les pages dédiées du site. Environ 5 à 6 écrans. */
.col-hero{padding:calc(var(--header,78px) + clamp(28px,4vw,56px)) 0 clamp(36px,4vw,60px)}
.col-vitrine{height:clamp(300px,33vw,470px)}
.col-fam{padding-block:clamp(48px,5vw,76px)}
.col-fam-tete{margin-bottom:clamp(22px,2.6vw,36px);gap:8px}
.col-titre{font-size:clamp(2.1rem,3.8vw,3.4rem)}
.col-dit{font-size:clamp(.92rem,1vw,1rem)}
@media(min-width:1100px){
  .col-grille-6{grid-template-columns:repeat(6,minmax(0,1fr))}
  .col-grille-5{grid-template-columns:repeat(5,minmax(0,1fr))}
  .col-grille-4{grid-template-columns:repeat(4,minmax(0,1fr));max-width:1120px;margin-inline:auto}
}
@media(min-width:700px) and (max-width:1099px){.col-grille-5,.col-grille-6{grid-template-columns:repeat(3,minmax(0,1fr))}}
.col-mention{padding-top:6px}
/* les gros boutons de renvoi : or sur velours */
.col-fam-pied{flex-direction:column;gap:14px;margin-top:clamp(28px,3vw,40px);padding-top:0;border-top:0}
.col-renvois{display:flex;flex-wrap:wrap;justify-content:center;gap:14px}
.col-renvoi{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:60px;padding:0 34px;border-radius:999px;
  font-family:var(--display);font-weight:500;font-size:1rem;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;
  color:var(--v5-or-clair);border:1.5px solid var(--v5-or);background:rgba(212,175,95,.1);
  transition:transform .35s var(--v5-ease),filter .35s,background .35s,color .35s}
.col-renvoi::after{content:"→";letter-spacing:0}
.col-renvoi:hover{transform:translateY(-2px);background:var(--v5-or);color:var(--v5-vert-950)}
.col-renvoi-1{min-width:min(100%,380px);font-size:1.06rem;color:var(--v5-vert-950);border-color:transparent;
  background:linear-gradient(180deg,#F1D9A0,#D4AF5F 55%,#B8924A);box-shadow:0 16px 34px -14px rgba(0,0,0,.65),0 0 0 1px rgba(241,217,160,.5)}
.col-renvoi-1:hover{filter:brightness(1.07);background:linear-gradient(180deg,#F1D9A0,#D4AF5F 55%,#B8924A)}
/* téléphone : une rangée défilante par famille, et les boutons en pleine largeur */
@media(max-width:699px){
  .col-grille{display:flex;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;
    margin-inline:calc(var(--gouttiere) * -1);padding:4px var(--gouttiere) 8px;scroll-padding-inline:var(--gouttiere)}
  .col-grille::-webkit-scrollbar{display:none}
  .col-grille .col-carte{flex:0 0 46vw;scroll-snap-align:start}
  .col-renvois{flex-direction:column;align-items:stretch;width:100%;max-width:400px}
  .col-renvoi{width:100%;padding:0 20px;font-size:.92rem;letter-spacing:.12em}
  .col-fam-pied{align-items:center}
}
.col-fam{padding-block:clamp(44px,4.2vw,60px)}
@media(min-width:1100px){
  .col-grille-4{max-width:980px}
  .col-fam-pied{flex-direction:row;justify-content:center;gap:16px 34px;flex-wrap:wrap}
}
.col-cadeau{padding-block:clamp(44px,4.5vw,64px)}
.col-cadeau-liste{margin-top:clamp(14px,2vw,26px)}
.col-cadeau-liste li{padding:22px 32px 22px}
.col-cadeau-liste b{margin-top:8px}

/* ═══ Animations (François, 04/11/2026 : « ça manque d'animations ») ═══════════════════════════════
   Uniquement transform et opacity ; durées 0,4 à 0,9 s, courbes douces ; une seule fois au défilement
   (collection.js pose .vu par IntersectionObserver). Tout est sous .noel-anime : en prefers-reduced-motion
   (classe absente) ou sans JavaScript (classe .col-anim absente), la page est posée, rien ne bouge. */
:root{--col-doux:cubic-bezier(.22,.8,.24,1);--col-rebond:cubic-bezier(.34,1.56,.64,1)}

/* ── En-tête : titre ligne par ligne, ruban qui se déroule, médaillons qui flottent, neige légère ── */
.col-l{display:block;overflow:hidden;padding-bottom:.04em}
.col-l>span{display:block}
.noel-anime .col-l>span{animation:col-monte .9s var(--col-doux) both}
.noel-anime .col-l+.col-l>span,.noel-anime em.col-l>span{animation-delay:.14s}
@keyframes col-monte{from{transform:translateY(105%);opacity:0}to{transform:none;opacity:1}}
.noel-anime .col-hero .col-sur,.noel-anime .col-h-dit,.noel-anime .col-h-liens{animation:col-fondu .8s var(--col-doux) both}
.noel-anime .col-hero .col-sur{animation-delay:.05s}.noel-anime .col-h-dit{animation-delay:.35s}.noel-anime .col-h-liens{animation-delay:.5s}
@keyframes col-fondu{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.noel-anime .col-hero-ruban{transform-origin:50% 0;animation:col-deroule .9s .1s var(--col-doux) both}
@keyframes col-deroule{from{transform:scaleY(0)}to{transform:none}}
.noel-anime .col-vm{animation:col-pose .8s var(--col-doux) both,col-flotte 6s 1.2s ease-in-out infinite alternate}
.noel-anime .col-vm-c{animation-delay:.35s,1.3s}
.noel-anime .col-vm-g{animation-delay:.5s,1.6s;animation-duration:.8s,7s}
.noel-anime .col-vm-d{animation-delay:.65s,1.9s;animation-duration:.8s,6.5s}
@keyframes col-flotte{from{transform:translateY(0)}to{transform:translateY(-9px)}}
.noel-anime .col-vm-noeud{animation:col-noue .9s 1s var(--col-rebond) both}
@keyframes col-noue{from{opacity:0;transform:scale(.4) rotate(-12deg)}to{opacity:1;transform:none}}
.col-neige{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.col-neige::before,.col-neige::after{content:"";position:absolute;left:0;right:0;top:-100%;height:200%;opacity:.5;
  background-image:radial-gradient(2px 2px at 10% 12%,#fff 50%,transparent 51%),radial-gradient(1.5px 1.5px at 30% 40%,#fff 50%,transparent 51%),
    radial-gradient(2px 2px at 55% 22%,#fff 50%,transparent 51%),radial-gradient(1.5px 1.5px at 78% 64%,#fff 50%,transparent 51%),
    radial-gradient(2px 2px at 90% 30%,#fff 50%,transparent 51%),radial-gradient(1.5px 1.5px at 44% 80%,#fff 50%,transparent 51%);
  background-size:420px 420px}
.col-neige::after{background-size:300px 300px;opacity:.35}
.noel-anime .col-neige::before{animation:col-tombe 26s linear infinite}
.noel-anime .col-neige::after{animation:col-tombe 18s linear infinite}
@keyframes col-tombe{from{transform:translateY(0)}to{transform:translateY(50%)}}

/* ── Entrée en scène des familles, une seule fois ── */
.noel-anime .col-anim .col-fam:not(.vu) .col-fam-tete>*,.noel-anime .col-anim .col-fam:not(.vu) .col-carte,
.noel-anime .col-anim .col-fam:not(.vu) .col-fam-pied,.noel-anime .col-anim .col-cadeau:not(.vu) .col-cadeau-in>*{opacity:0;transform:translateY(26px)}
.noel-anime .col-anim .col-fam-tete>*,.noel-anime .col-anim .col-fam-pied,.noel-anime .col-anim .col-cadeau-in>*{transition:opacity .8s var(--col-doux),transform .8s var(--col-doux)}
.noel-anime .col-anim .col-fam-tete>:nth-child(2){transition-delay:.08s}.noel-anime .col-anim .col-fam-tete>:nth-child(3){transition-delay:.16s}
.noel-anime .col-anim .col-fam-tete>:nth-child(4){transition-delay:.22s}
.noel-anime .col-anim .col-fam .col-carte{transition:opacity .7s var(--col-doux) calc(var(--i,0) * 70ms + .2s),transform .7s var(--col-doux) calc(var(--i,0) * 70ms + .2s),border-color .35s,box-shadow .45s}
.noel-anime .col-anim .col-fam.vu .col-carte{transition:opacity .7s var(--col-doux) calc(var(--i,0) * 70ms + .2s),transform .45s var(--col-doux),border-color .35s,box-shadow .45s}
.noel-anime .col-anim .col-fam-pied{transition-delay:.45s}
.noel-anime .col-anim .col-cadeau-in>:nth-child(2){transition-delay:.1s}.noel-anime .col-anim .col-cadeau-in>:nth-child(3){transition-delay:.2s}
/* le ruban séparateur se trace depuis le centre, puis le nœud se pose */
.col-sep{background:none}
.col-sep-ruban{position:absolute;inset:0;background:var(--v5-filet);transform-origin:50% 50%}
.noel-anime .col-anim .col-sep:not(.vu) .col-sep-ruban{transform:scaleX(0)}
.noel-anime .col-anim .col-sep-ruban{transition:transform .9s var(--col-doux)}
.noel-anime .col-anim .col-sep:not(.vu) img{opacity:0;transform:scale(.4) rotate(-10deg)}
.noel-anime .col-anim .col-sep img{transition:opacity .6s .45s var(--col-doux),transform .7s .45s var(--col-rebond)}

/* ── Cartes : soulèvement, tilt, produit qui grossit et tourne, reflet doré, prix qui brille ── */
.col-carte{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
.col-carte:hover{transform:perspective(900px) translateY(-6px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
.col-carte:hover .col-medaillon img{transform:scale(1.07) rotate(-3deg)}
.col-medaillon::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;
  background:linear-gradient(105deg,transparent 30%,rgba(255,240,200,.0) 38%,rgba(255,236,190,.55) 48%,rgba(255,240,200,0) 58%,transparent 70%);transform:translateX(-70%)}
.noel-anime .col-carte:hover .col-medaillon::after{animation:col-reflet .9s var(--col-doux)}
@keyframes col-reflet{0%{opacity:0;transform:translateX(-70%)}20%{opacity:1}100%{opacity:0;transform:translateX(70%)}}
.col-prix{transition:text-shadow .4s,color .4s}
.col-carte:hover .col-prix{color:#FFE7A8;text-shadow:0 0 14px rgba(241,217,160,.55)}
/* horloges : la mécanique se balance doucement ; bracelets carbone : la cordelette ondule */
.noel-anime .col-anim .col-hz .col-medaillon img{transform-origin:50% 88%;animation:col-balance 5.5s ease-in-out infinite alternate;animation-delay:calc(var(--i,0) * -1.1s)}
@keyframes col-balance{from{transform:rotate(-1.6deg)}to{transform:rotate(1.6deg)}}
.noel-anime .col-anim .col-bj .col-carte:nth-child(-n+4) .col-medaillon img{transform-origin:50% 8%;animation:col-ondule 4.8s ease-in-out infinite alternate;animation-delay:calc(var(--i,0) * -1.2s)}
@keyframes col-ondule{0%{transform:rotate(-2.4deg) skewX(.8deg)}50%{transform:rotate(.6deg) skewX(-.6deg)}100%{transform:rotate(2.4deg) skewX(.4deg)}}
.noel-anime .col-anim .col-hz .col-carte:hover .col-medaillon img,.noel-anime .col-anim .col-bj .col-carte:hover .col-medaillon img{animation-play-state:paused}

/* ── Boutons or : un reflet passe régulièrement, léger rebond au survol ── */
.col-renvoi,.col-btn-or{position:relative;overflow:hidden;isolation:isolate}
.col-renvoi::before,.col-btn-or::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;transform:translateX(-120%);
  background:linear-gradient(105deg,transparent 35%,rgba(255,250,230,.6) 50%,transparent 65%)}
.noel-anime .col-renvoi-1::before,.noel-anime .col-btn-or::before{animation:col-luit 5.5s 1.5s ease-in-out infinite}
@keyframes col-luit{0%,72%{opacity:0;transform:translateX(-120%)}76%{opacity:1}92%{opacity:0;transform:translateX(120%)}100%{opacity:0;transform:translateX(120%)}}
.col-renvoi{transition:transform .45s var(--col-rebond),filter .35s,background .35s,color .35s}
.col-renvoi:hover{transform:translateY(-3px) scale(1.02)}

/* ── Barre des familles : un seul indicateur qui glisse ── */
.col-nav-in{position:relative}
.col-nav a::after{display:none}
.col-nav-ind{position:absolute;left:0;bottom:-1px;width:100px;height:3px;background:var(--v5-satin-h);transform-origin:0 50%;
  transform:translateX(var(--x,0)) scaleX(var(--s,0));transition:transform .55s var(--col-doux);pointer-events:none}

/* ── « C'est un cadeau » : les pictos s'animent à l'apparition ── */
.col-picto{width:58px;height:58px;fill:none;stroke:var(--v5-or-fonce);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.col-picto circle{fill:rgba(212,175,95,.18)}
.col-p-carte,.col-p-boucles,.col-p-couvercle{transform-box:fill-box}
.col-p-carte{transform-origin:50% 100%}.col-p-boucles{transform-origin:50% 100%}.col-p-couvercle{transform-origin:0% 100%}
.noel-anime .col-anim .col-cadeau:not(.vu) .col-p-carte{transform:translateY(14px);opacity:0}
.noel-anime .col-anim .col-cadeau:not(.vu) .col-p-boucles{transform:scale(.2) rotate(-25deg);opacity:0}
.noel-anime .col-anim .col-cadeau .col-p-carte{transition:transform .8s .5s var(--col-doux),opacity .6s .5s}
.noel-anime .col-anim .col-cadeau .col-p-boucles{transition:transform .8s .65s var(--col-rebond),opacity .5s .65s}
.noel-anime .col-anim .col-cadeau.vu .col-p-couvercle{animation:col-ouvre 1.6s .8s var(--col-doux) both}
@keyframes col-ouvre{0%{transform:none}45%,70%{transform:rotate(-24deg)}100%{transform:rotate(-14deg)}}
.col-cadeau-liste b{margin-top:6px}

/* ── Rangées qui glissent seules : la défilement automatique coupe le magnétisme ── */
.col-auto{scroll-snap-type:none!important}
@media (prefers-reduced-motion:reduce){.col-carte,.col-carte:hover{transform:none}.col-nav-ind{transition:none}}

/* ── Rangées défilantes : la suite se devine par un fondu du bord droit (mask-image), jamais par un calque coloré ── */
.col-rail{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 56px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 56px),transparent)}
.col-rail-cadre.a-la-fin .col-rail{-webkit-mask-image:none;mask-image:none}
@media(max-width:699px){
  .col-grille{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 44px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 44px),transparent)}
  .col-grille.a-la-fin{-webkit-mask-image:none;mask-image:none}
}