/* Pinces Bloom — même univers que le flyer « Le geste juste. » : blanc, halo bleu doux, Poppins, point final bleu. */
@font-face { font-family: "Poppins"; font-weight: 400; font-display: swap; src: url(fonts/poppins-regular.woff2) format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 500; font-display: swap; src: url(fonts/poppins-medium.woff2) format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 600; font-display: swap; src: url(fonts/poppins-semibold.woff2) format("woff2"); }
:root {
  --ink: #1d1d1f; --gr: #6e6e73; --gf: #f5f5f7; --filet: #e0e0e5; --bleu: #1180be; --halo: 190, 220, 255;
  --nuit: #05090f; --or: #d6b56c; --or-clair: #f1dfae;
  --doux: cubic-bezier(.16, 1, .3, 1); --page: min(1180px, 100% - 40px);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: #fff; color: var(--ink); font: 400 17px/1.55 "Poppins", system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
img, video { display: block; max-width: 100%; }
a { color: inherit; }
.point { color: var(--bleu); }
.sur { font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--bleu); margin: 0 0 14px; }
.cadre { width: var(--page); margin-inline: auto; }

/* ---------- en-tête ---------- */
.tete { position: fixed; inset: 0 0 auto; z-index: 30; display: flex; align-items: center; justify-content: space-between; padding: 14px max(20px, calc(50% - 590px));
  background: rgba(255, 255, 255, .78); -webkit-backdrop-filter: saturate(180%) blur(18px); backdrop-filter: saturate(180%) blur(18px); border-bottom: 1px solid rgba(0, 0, 0, .06); transition: background .4s; }
.tete.nuit { background: rgba(5, 9, 15, .62); border-color: rgba(255, 255, 255, .08); }
.tete.nuit .logo { filter: brightness(0) invert(1); }
.logo { height: 26px; width: auto; transition: filter .4s; }
.bouton { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 26px; border-radius: 999px; border: 0; background: var(--bleu); color: #fff;
  font: 500 16px "Poppins", sans-serif; text-decoration: none; cursor: pointer; transition: transform .25s var(--doux), background .25s; }
.bouton:hover { background: #0d6fa7; } .bouton:active { transform: scale(.97); }
.bouton.petit { min-height: 38px; padding: 0 18px; font-size: 14px; }
.bouton.clair { background: #fff; color: var(--ink); border: 1px solid var(--filet); }
.bouton.clair:hover { background: var(--gf); }
.bouton svg { width: 20px; height: 20px; flex: none; }
:focus-visible { outline: 3px solid rgba(17, 128, 190, .45); outline-offset: 3px; }

/* ---------- 1-2. une seule scène blanche : la pince s'assemble, puis se pose dans le coffret au défilement ---------- */
.scene { position: relative; height: 520vh; background: #fff; }
.scene-fixe { position: sticky; top: 0; height: 100svh; overflow: hidden; background: #fff; }
.ecran { position: absolute; inset: 66px 0 0; will-change: transform; }   /* sous l'en-tête : le haut du coffret ouvert n'est jamais caché */
.ecran > * { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }   /* film entier, sans recadrage : ses marges sont du même blanc que la page */
.film-a { opacity: 0; }   /* le film sort déjà en blanc 255 : aucun filtre, raccord exact avec le film B */
.film-b { opacity: 0; }
.joue .film-a { opacity: 1; } .en-b .film-a { opacity: 0; transition: opacity .35s; } .en-b .film-b { opacity: 1; }
.texte { position: absolute; z-index: 2; left: max(20px, calc(50% - 590px)); width: min(500px, 34vw); }
.t1 { top: 50%; translate: 0 -50%; }
.t2, .t3 { top: calc(66px + 11vh); width: min(380px, 25vw); opacity: 0; pointer-events: none; }   /* en haut à gauche : la zone vide de l'image, au-dessus du coffret */
.emblème { width: 46px; height: auto; margin-bottom: 10px; }
.scene h1 { font-size: clamp(52px, 7.4vw, 108px); line-height: .98; letter-spacing: -.035em; font-weight: 600; margin: 0 0 22px; }
.scene h2 { font-size: clamp(30px, 3.2vw, 48px); line-height: 1.08; letter-spacing: -.025em; font-weight: 600; margin: 0; }
.scene .or { color: #9c7a35; }   /* or foncé : lisible sur le blanc (l'or clair du coffret n'y suffit pas) */
.accroche { font-size: clamp(18px, 1.6vw, 22px); color: var(--gr); margin: 0 0 26px; max-width: 26ch; }
.verbes { display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 0; margin: 0 0 34px; list-style: none; font-weight: 500; }
.verbes li { white-space: nowrap; } .verbes span { color: var(--bleu); font-size: 13px; margin-right: 6px; }
/* le titre n'apparaît qu'une fois la pince montée (si le script tourne) */
.js .t1 > * { opacity: 0; transform: translateY(24px); }
.monte .t1 > * { opacity: 1; transform: none; transition: opacity .9s ease-out, transform 1s var(--doux); }
.monte .t1 > :nth-child(2) { transition-delay: .12s; } .monte .t1 > :nth-child(3) { transition-delay: .24s; }
.monte .t1 > :nth-child(4) { transition-delay: .36s; } .monte .t1 > :nth-child(5) { transition-delay: .48s; } .monte .t1 > :nth-child(6) { transition-delay: .6s; }
.defiler { position: absolute; z-index: 2; left: 50%; bottom: 22px; translate: -50% 0; width: 26px; height: 42px; border: 2px solid rgba(29, 29, 31, .25); border-radius: 14px; }
.defiler::after { content: ""; position: absolute; left: 50%; top: 8px; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: rgba(29, 29, 31, .4); animation: roule 1.8s infinite; }
@keyframes roule { 0% { opacity: 0; transform: translateY(0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(14px); } }
.lecteur { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* sans script ou « moins d'animations » : la pince montée, le titre, sans scène collante */
.no-js .scene, .calme .scene { height: auto; } .no-js .scene-fixe, .calme .scene-fixe { position: relative; height: 100svh; }
.no-js .film-a, .no-js .film-b, .calme .film-a, .calme .film-b, .no-js .t2, .no-js .t3, .calme .t2, .calme .t3 { display: none; }

/* ---------- 3. les cinq pinces ---------- */
.gamme-titre { text-align: center; padding: 120px 20px 30px; }
.gamme-titre h2 { font-size: clamp(36px, 5vw, 64px); line-height: 1.04; letter-spacing: -.03em; margin: 0 0 14px; font-weight: 600; }
.gamme-titre p { color: var(--gr); margin: 0; font-size: 19px; }
.pince { width: var(--page); margin: 0 auto; padding: 90px 0; display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px 70px; align-items: start; border-top: 1px solid var(--filet); }
.pince:first-of-type { border-top: 0; }
.pince-vue { position: sticky; top: 110px; border-radius: 30px; background: radial-gradient(70% 60% at 50% 50%, rgba(var(--halo), .75), rgba(var(--halo), 0) 72%), var(--gf); aspect-ratio: 1 / .82; display: grid; place-items: center; overflow: hidden; }
.pince-vue img { width: 82%; height: 78%; object-fit: contain; filter: drop-shadow(0 26px 26px rgba(20, 45, 90, .2)); }
.pince-vue .numero { position: absolute; top: 22px; left: 26px; font-weight: 500; color: var(--bleu); font-size: 15px; letter-spacing: .08em; }
.pince h3 { font-size: clamp(44px, 5.4vw, 72px); line-height: 1; letter-spacing: -.035em; margin: 6px 0 14px; font-weight: 600; }
.pince .nom { font-size: 20px; font-weight: 500; margin: 0 0 2px; }
.pince .effet { color: var(--bleu); margin: 0 0 30px; }
.video { position: relative; width: min(300px, 100%); aspect-ratio: 9 / 16; border-radius: 22px; overflow: hidden; background: #000; margin: 0 0 34px; box-shadow: 0 24px 50px rgba(20, 45, 90, .16); }
.video button { all: unset; position: absolute; inset: 0; cursor: pointer; display: grid; place-items: center; }
.video button img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.video button::before { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 55%, rgba(0, 0, 0, .55)); }
.video .lecture { position: relative; width: 66px; height: 66px; border-radius: 50%; background: rgba(255, 255, 255, .9); display: grid; place-items: center; transition: transform .3s var(--doux); }
.video button:hover .lecture { transform: scale(1.08); }
.video .lecture svg { width: 24px; height: 24px; margin-left: 4px; fill: var(--ink); }
.video .duree { position: absolute; left: 16px; bottom: 14px; color: #fff; font-size: 14px; font-weight: 500; }
.video video { width: 100%; height: 100%; object-fit: cover; }
.usage { display: grid; gap: 0; border-top: 1px solid var(--filet); }
.usage details { border-bottom: 1px solid var(--filet); }
.usage summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; padding: 18px 0; font-size: 13px; font-weight: 600; letter-spacing: .14em; color: var(--bleu); }
.usage summary::-webkit-details-marker { display: none; }
.usage summary::after { content: "+"; font-size: 24px; font-weight: 400; letter-spacing: 0; color: var(--gr); transition: transform .3s var(--doux); }
.usage details[open] summary::after { transform: rotate(45deg); }
.usage p { margin: 0 0 20px; color: var(--ink); max-width: 46ch; }
.js [data-apparait] { opacity: 0; transform: translateY(46px); transition: opacity 1s ease-out, transform 1.2s var(--doux); }
.js .pince-vue[data-apparait] { transform: translateY(46px) scale(.96); }
.js [data-apparait].vu { opacity: 1; transform: none; }

/* ---------- 4. commande ---------- */
.commande { padding: 110px 20px; background: linear-gradient(#fff, var(--gf)); }
.carte { width: min(1000px, 100%); margin: 0 auto; border-radius: 34px; background: #fff; box-shadow: 0 30px 80px rgba(20, 45, 90, .1); display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; }
.carte-image { background: #fff; display: grid; place-items: center; padding: 30px; }   /* le coffret L réaliste, sur le blanc du studio */
.carte-texte { padding: 54px 50px; }
.carte h2 { font-size: clamp(30px, 3.4vw, 42px); letter-spacing: -.025em; margin: 0 0 6px; font-weight: 600; line-height: 1.1; }
.prix { font-size: clamp(44px, 5vw, 60px); font-weight: 600; letter-spacing: -.03em; margin: 18px 0 2px; }
.prix small { font-size: 20px; font-weight: 500; color: var(--gr); letter-spacing: 0; }
.livraison { color: var(--gr); margin: 0 0 30px; }
.livraison strong { color: var(--ink); font-weight: 500; }
.carte .bouton { width: 100%; }
.ou { text-align: center; color: var(--gr); font-size: 14px; margin: 18px 0 12px; }
.contacts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.contacts .bouton { padding: 0 10px; font-size: 15px; }

/* ---------- 5. contact ---------- */
.contact { text-align: center; padding: 100px 20px 90px; }
.contact h2 { font-size: clamp(30px, 3.6vw, 44px); letter-spacing: -.025em; margin: 0 0 26px; font-weight: 600; }
.contact .contacts { width: min(620px, 100%); margin: 0 auto 28px; }
.coordonnees { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 30px; color: var(--gr); }
.coordonnees a { text-decoration: none; } .coordonnees a:hover { color: var(--bleu); }

/* ---------- 6. pied ---------- */
.pied { border-top: 1px solid var(--filet); padding: 34px 20px 46px; text-align: center; color: var(--gr); font-size: 14px; }
.pied p { margin: 6px 0; } .pied .devise { color: var(--ink); font-weight: 500; font-size: 16px; }
.pied a { color: var(--bleu); text-decoration: none; font-weight: 500; }

/* ---------- téléphone ---------- */
@media (max-width: 860px) {
  body { font-size: 16px; }
  .tete { padding: 12px 18px; } .logo { height: 22px; }
  .defiler { display: none; }
  /* téléphone : film vertical (4:5) en haut, textes dessous, dans le blanc */
  .scene { height: 460vh; }
  .ecran { inset: 52px 0 auto; height: 125vw; max-height: 62svh; }
  .texte, .t2, .t3 { left: 20px; right: 20px; width: auto; top: auto; bottom: max(20px, env(safe-area-inset-bottom)); translate: none; }
  .scene h1 { font-size: clamp(44px, 12.5vw, 60px); margin-bottom: 12px; } .emblème { width: 36px; margin-bottom: 4px; }
  .accroche { margin-bottom: 14px; font-size: 17px; } .verbes { margin-bottom: 18px; font-size: 15px; gap: 4px 14px; }
  .scene h2 { font-size: clamp(28px, 8vw, 36px); }
  .t2, .t3 { top: calc(52px + min(125vw, 62svh) + 22px); bottom: auto; }   /* juste sous le film (le titre d'entrée, plus long, reste calé en bas) */
  .pince { grid-template-columns: 1fr; padding: 60px 0; gap: 26px; }
  .pince-vue { position: relative; top: 0; border-radius: 24px; }
  .video { width: 100%; max-width: 360px; margin-inline: auto; }
  .carte { grid-template-columns: 1fr; border-radius: 26px; } .carte-texte { padding: 34px 24px 30px; }
  .contacts { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .js .t1 > *, .js [data-apparait] { opacity: 1; transform: none; }
}