.page-produits{--accent:#76512e;--accent-2:#684326;--accent-texte:#684326;--accent-clair:#eee1ce;--papier:#f5f2ec}
.produits-hero{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.85fr);gap:64px;align-items:center;padding-block:76px 90px}
.produits-hero h1{font-size:clamp(44px,4.6vw,68px);max-width:15ch;line-height:1.06;letter-spacing:-.045em}
.produits-hero .chapeau{font-size:19px;max-width:47ch;margin-top:28px}
.produits-objet{margin:0;min-width:0}
.produits-objet-scene{position:relative;height:490px;background:radial-gradient(ellipse at 50% 48%,#f5efe2 0%,#e8ddca 60%,#e3d6bf 100%);border-radius:48% 48% 8px 8px;display:grid;place-items:center}
.produits-objet-scene canvas{max-width:100%;display:block;position:relative;z-index:1}
.produits-objet figcaption{font-size:15px;line-height:1.5;margin-top:22px;color:var(--encre-2);text-align:center}
.produits-plaque-secours{width:170px;min-height:244px;background:#f9f7f0;border-radius:10px;box-shadow:18px 24px 34px #76512e38;padding:25px;text-align:center;display:grid;place-items:center;font-size:15px;transform:rotate(-5deg)}
.produits-plaque-secours strong{font-size:23px;line-height:1.1}.produits-sans-contact{font-size:46px;color:#76512e}.produits-objet-scene [hidden]{display:none!important}
.produits-geste{background:#eae5db;padding-block:88px}.produits-geste-grille,.produits-compris-grille{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:90px;align-items:center}
.produits-geste h2,.produits-pose h2,.produits-compris h2,.produits-honnetete h2,.produits-deroule h2,.produits-contact h2{font-size:clamp(34px,3.8vw,50px);letter-spacing:-.035em}
.produits-demo{background:#f7f4ee;border:1px solid #d6cebf;padding:28px;border-radius:16px;min-width:0}
.produits-demo-choix{display:flex;gap:8px;flex-wrap:wrap}.produits-demo-choix button{border:1px solid #c8bcaa;border-radius:999px;background:none;padding:10px 14px;font-size:14px;min-height:44px;cursor:pointer}.produits-demo-choix button[aria-pressed=true]{background:#76512e;color:#fff;border-color:#76512e}
.produits-parcours{display:flex;gap:15px;align-items:center;justify-content:center;padding-block:40px}.produits-parcours-source{font-size:15px;border-bottom:2px solid #76512e;padding-bottom:8px}.produits-parcours-fleche{font-size:26px;color:#76512e}.produits-page-avis{background:#fffdf9;border:1px solid #d6cebf;border-radius:18px;padding:24px 20px;display:grid;gap:10px;max-width:210px;box-shadow:0 16px 24px #17161a09}.produits-page-avis strong{font-size:20px;line-height:1.2}.produits-page-avis span{font-size:13px;color:#57545e}.produits-demo-resultat{font-size:16px;min-height:3.2em;margin-bottom:10px}.produits-demo-note{font-size:13px;margin:0}
.produits-pose,.produits-deroule{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:90px}.produits-pose{padding-block:100px}.produits-compris{padding-block:84px;border-block:1px solid var(--ligne)}.produits-compris-grille{align-items:start}.produits-faits{margin:0}.produits-faits>div{border-top:1px solid var(--ligne);padding-block:22px}.produits-faits>div:first-child{padding-top:0;border-top:0}.produits-faits dt{font-weight:700;font-size:20px;margin-bottom:8px}.produits-faits dd{margin:0;color:var(--encre-2);font-size:16px}
.produits-honnetete{padding-block:104px;max-width:820px}.produits-honnetete h2{font-size:clamp(42px,5vw,66px)}.produits-honnetete .chapeau{margin-top:26px}.produits-deroule{padding-block:80px;border-top:1px solid var(--ligne)}.produits-deroule .frise h3{font-size:24px}.produits-deroule .frise p{font-size:16px}.produits-questions{padding-block:80px 104px}.produits-questions h2{margin-bottom:40px}.produits-contact{padding-block:88px;background:#e8ddca}.produits-contact h2{margin-bottom:30px}.produits-contact p:not(.surtitre){margin-top:35px;max-width:48ch}
@media(max-width:900px){.produits-hero{gap:32px}.produits-hero h1{font-size:clamp(38px,5.8vw,56px)}.produits-objet-scene{height:400px}.produits-geste-grille,.produits-compris-grille,.produits-pose,.produits-deroule{gap:40px}}
@media(max-width:680px){.produits-hero,.produits-geste-grille,.produits-compris-grille,.produits-pose,.produits-deroule{grid-template-columns:1fr}.produits-hero{padding-block:44px 60px;gap:34px}.produits-hero h1{font-size:clamp(40px,10.3vw,56px);max-width:16ch}.produits-hero .chapeau{font-size:18px;margin-top:24px}.produits-objet-scene{height:360px;max-width:360px;margin:auto}.produits-objet figcaption{font-size:14px}.produits-geste,.produits-compris,.produits-contact{padding-block:60px}.produits-pose,.produits-honnetete,.produits-deroule,.produits-questions{padding-block:60px}.produits-demo{padding:20px}.produits-parcours{gap:10px}.produits-page-avis{padding:20px 14px}.produits-parcours-source{font-size:13px}.produits-questions h2{font-size:32px}.produits-demo-resultat{min-height:4.8em}}


/* Le comptoir se joue dans le meme registre de nuit que la fidelite. */
.page-produits .produits-hero{min-height:calc(100svh - 72px);padding-block:60px 68px;gap:40px}
.page-produits .produits-hero h1{font-size:clamp(48px,5.1vw,76px);max-width:16ch}
.page-produits .produits-hero .chapeau{font-size:18px;max-width:44ch}
.page-produits .produits-objet-scene{height:clamp(390px,42vw,540px)}
.produits-plaque-secours{color:#17161a}
.page-produits .produits-geste{background:transparent;padding-block:90px;min-height:calc(100svh - 72px);display:grid;align-items:center}
.produits-geste-grille{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:48px}
.page-produits .produits-geste h2{font-size:clamp(46px,5.2vw,74px);line-height:1.04;letter-spacing:-.035em;margin-bottom:26px}
.produits-geste-texte>p:not(.surtitre){max-width:35ch;color:var(--encre-2)}
.produits-geste-texte .produits-demo-choix{margin-top:32px;gap:10px}
.page-produits .produits-demo-choix button{padding:11px 18px;color:var(--encre);background:transparent;border-color:var(--ligne);font-size:14px}
.page-produits .produits-demo-choix button[aria-pressed=true]{color:var(--papier);background:var(--encre);border-color:var(--encre)}
.produits-demo-resultat{font-size:15px;margin-top:22px;min-height:3.2em;max-width:39ch}
.page-produits .produits-demo{position:relative;height:530px;padding:0;border:0;border-radius:0;overflow:visible;background:radial-gradient(ellipse at 55% 50%,#282a2d70,transparent 66%);isolation:isolate}
.produits-comptoir-ligne{position:absolute;left:1%;right:1%;top:85%;height:1px;background:linear-gradient(90deg,transparent,#ffffff24,transparent)}
.produits-mini-plaque{position:absolute;left:11%;top:32%;width:142px;height:206px;padding:24px 17px 15px;display:flex;align-items:center;flex-direction:column;justify-content:space-between;background:#f2f0ea;color:#17161a;border-radius:9px;box-shadow:6px 8px 0 #bbb8b0,12px 24px 34px #0006;transform:perspective(700px) rotateY(-14deg) rotateZ(-6deg);z-index:1}
.produits-mini-plaque strong{font-size:19px;line-height:1.08;text-align:center;letter-spacing:-.02em}
.produits-mini-plaque small{font-size:10px;color:#17161a;line-height:1.1}.produits-mini-contact{font-weight:700;font-size:20px;line-height:1}
.produits-qr-dessin{position:relative;width:62px;height:62px;background:repeating-conic-gradient(#17161a 0 25%,#f3f1eb 0 50%) 50% / 9px 9px;border:5px solid #f3f1eb}
.produits-qr-dessin>i{position:absolute;left:0;top:0;width:19px;height:19px;background:#17161a;border:4px solid #17161a;box-shadow:inset 0 0 0 3px #f3f1eb}.produits-qr-dessin>i:nth-child(2){left:auto;right:0}.produits-qr-dessin>i:nth-child(3){top:auto;bottom:0}.produits-qr-dessin>span{position:absolute;bottom:3px;right:3px;width:10px;height:10px;background:#17161a;border:2px solid #f3f1eb}
.produits-telephone{position:absolute;width:210px;height:426px;right:9%;top:6%;padding:7px;border-radius:36px;background:#111216;box-shadow:0 28px 70px #0009,inset 0 0 0 1px #ffffff3d;transform:rotate(5deg);transition:transform 1s cubic-bezier(.2,.75,.25,1);z-index:3}
.produits-tel-ecran{height:100%;border-radius:30px;background:radial-gradient(ellipse at 70% 40%,#353641,#111218 75%);overflow:hidden;position:relative;color:#f1ede6}
.produits-tel-statut{position:absolute;top:12px;left:17px;right:14px;display:flex;align-items:center;justify-content:space-between;font-size:11px;font-weight:700;z-index:7}.produits-tel-statut svg{width:46px;height:8px}
.produits-tel-ilot{position:absolute;top:11px;left:50%;transform:translateX(-50%);width:62px;height:19px;border-radius:99px;background:#050507;z-index:8}
.produits-tel-barre{position:absolute;bottom:7px;left:50%;transform:translateX(-50%);width:76px;height:4px;border-radius:9px;background:#f1ede6;z-index:7}
.produits-tel-attente,.produits-tel-camera,.produits-tel-avis{position:absolute;inset:0;transition:opacity .5s ease,transform .5s ease}
.produits-tel-attente{display:flex;flex-direction:column;align-items:center;padding-top:88px;gap:28px;text-align:center;font-size:13px;line-height:1.5}
.produits-tel-heure{font-size:54px;font-weight:500;line-height:1;letter-spacing:-.035em}
.produits-tel-nfc{margin-top:30px;border:1px solid #ffffff28;border-radius:16px;padding:18px 22px;opacity:0;transform:translateY(10px);transition:opacity .4s,transform .4s;font-size:12px}
.produits-tel-camera{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;background:#15161a;opacity:0;font-size:12px;text-align:center;padding:22px}
.produits-viseur{width:132px;height:148px;position:relative;border:1px solid #f1ede68c;border-radius:14px;display:grid;place-items:center}.produits-viseur .produits-qr-dessin{width:78px;height:78px;background-size:11px 11px}.produits-ligne-scan{position:absolute;left:0;right:0;top:12%;height:2px;background:#f1ede6;box-shadow:0 0 12px #f1ede6;opacity:0}
.produits-tel-avis{opacity:0;transform:translateY(18px);background:#f4f2ec;color:#17161a;padding:55px 19px 24px;display:flex;flex-direction:column;gap:18px}
.produits-tel-adresse{font-size:10px;background:#e6e3dc;padding:8px 10px;border-radius:99px;text-align:center}
.produits-tel-avis>p{font-size:13px;margin:12px 0 0;color:#57545e}.produits-tel-avis>strong{font-size:31px;line-height:1.06;letter-spacing:-.03em}
.produits-zone-avis{font-size:12px;color:#57545e;border:1px solid #cac6bc;border-radius:9px;min-height:92px;padding:14px 10px}.produits-tel-avis>span{font-size:10px;color:#57545e;margin-top:auto;text-align:center}
.produits-ondes{position:absolute;left:31%;top:27%;width:130px;height:130px;z-index:2;opacity:0;transition:opacity .3s}
.produits-ondes i{position:absolute;inset:20px;border:1px solid #f1ede676;border-radius:50%;animation:produits-onde 1.4s ease-out infinite}.produits-ondes i:nth-child(2){animation-delay:.3s}.produits-ondes i:nth-child(3){animation-delay:.6s}
.produits-scene-legende{position:absolute;bottom:2%;left:5%;right:5%;font-size:12px;color:var(--encre-2);text-align:center}
.produits-demo[data-chemin=nfc][data-etape=lecture] .produits-telephone{transform:translate(-70px,8px) rotate(-7deg)}
.produits-demo[data-chemin=nfc][data-etape=lecture] .produits-ondes,.produits-demo[data-chemin=nfc][data-etape=lecture] .produits-tel-nfc{opacity:1;transform:none}
.produits-demo[data-chemin=qr] .produits-tel-attente{opacity:0}.produits-demo[data-chemin=qr] .produits-tel-camera{opacity:1}.produits-demo[data-chemin=qr][data-etape=lecture] .produits-ligne-scan{opacity:1;animation:produits-lecture 1.5s ease-in-out infinite}
.produits-demo[data-etape=ouvert] .produits-tel-avis{opacity:1;transform:none;z-index:5}.produits-demo[data-etape=ouvert] .produits-tel-statut{color:#17161a}.produits-demo[data-etape=ouvert] .produits-tel-barre{background:#17161a}
.page-produits .produits-pose,.page-produits .produits-compris,.page-produits .produits-honnetete,.page-produits .produits-deroule{min-height:65svh;align-items:center;padding-block:100px}
.page-produits .produits-honnetete{min-height:75svh;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;max-width:900px}
.page-produits .produits-honnetete h2{font-size:clamp(48px,5.5vw,76px)}
.page-produits .produits-compris{border:0}.produits-compris-grille{align-items:center}
.produits-faits>div{padding-block:19px}.produits-faits dt{font-size:18px}.produits-faits dd{font-size:15px;max-width:49ch}
@keyframes produits-onde{from{transform:scale(.55);opacity:.8}to{transform:scale(1.7);opacity:0}}
@keyframes produits-lecture{0%,100%{top:12%}50%{top:88%}}
@media(max-width:900px){.produits-geste-grille{gap:24px}.produits-mini-plaque{left:4%;width:120px;height:182px;padding:18px 12px}.produits-mini-plaque strong{font-size:17px}.produits-telephone{right:0;width:192px;height:390px}.page-produits .produits-demo{height:470px}.produits-demo[data-chemin=nfc][data-etape=lecture] .produits-telephone{transform:translate(-35px,8px) rotate(-7deg)}}
@media(max-width:680px){.page-produits .produits-hero{min-height:auto;padding-block:46px 68px}.page-produits .produits-hero h1{font-size:clamp(41px,10.6vw,64px)}.page-produits .produits-geste{padding-block:60px}.produits-geste-grille{grid-template-columns:1fr;gap:12px}.page-produits .produits-geste h2{font-size:clamp(43px,11vw,62px)}.page-produits .produits-demo{height:440px;width:min(100%,400px);margin-inline:auto}.produits-telephone{right:6%;top:3%;width:182px;height:370px}.produits-mini-plaque{left:7%;top:32%;width:122px;height:182px}.produits-tel-attente{padding-top:75px;gap:24px}.produits-tel-heure{font-size:48px}.produits-tel-nfc{margin-top:12px}.produits-tel-avis{padding:48px 17px 20px;gap:14px}.produits-tel-avis>strong{font-size:27px}.produits-zone-avis{min-height:76px}.produits-scene-legende{bottom:0}.produits-demo-resultat{min-height:3.2em}.page-produits .produits-pose,.page-produits .produits-compris,.page-produits .produits-honnetete,.page-produits .produits-deroule{min-height:auto;padding-block:70px}.page-produits .produits-honnetete h2{font-size:clamp(43px,11vw,60px)}}
html[data-anim=off] .produits-demo *,html[data-anim=off] .produits-demo *::before{animation:none!important;transition:none!important}

/* Finition Produits : l'objet, puis le geste, puis les informations de pose. */
.page-produits main .produits-hero{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:48px;padding-block:32px 44px}
.page-produits main .produits-hero h1{font-size:clamp(48px,5.1vw,78px);max-width:15ch;line-height:1.04;letter-spacing:-.045em}
.page-produits main .produits-hero .chapeau{max-width:40ch;line-height:1.6;margin-top:28px}
.page-produits main .surtitre{letter-spacing:.025em;text-transform:none;font-size:14px;margin-bottom:24px}
.page-produits main .produits-objet-scene{height:clamp(360px,34vw,450px);background:radial-gradient(ellipse at 50% 42%,#36383d50,transparent 65%)}
.produits-objet-scene::after{content:'';position:absolute;bottom:7%;left:24%;width:52%;height:8%;background:#0008;border-radius:50%;filter:blur(14px);pointer-events:none}
.page-produits main .produits-geste{padding-block:88px;min-height:0;background:transparent}
.page-produits main .produits-geste h2{font-size:clamp(40px,4vw,60px);line-height:1.06}
.page-produits main .produits-demo-choix button{border-color:#797874;min-height:48px;padding:12px 18px;font-size:14px}
.page-produits main .produits-demo-choix button:focus-visible{outline:2px solid var(--encre);outline-offset:5px}
.page-produits main .produits-demo-resultat{min-height:3.4em;line-height:1.55}
.page-produits main .produits-demo{background:radial-gradient(ellipse at 52% 58%,#30323665,transparent 65%)}
.produits-demo[data-chemin=nfc][data-etape=lecture] .produits-telephone{transform:translate(-155px,24px) rotate(-9deg)}
.produits-demo[data-chemin=qr][data-etape=lecture] .produits-telephone{transform:translate(-28px,0) rotate(0deg)}
.produits-demo[data-chemin=nfc][data-etape=lecture] .produits-ondes{left:26%;top:25%}
.page-produits main .produits-pose,.page-produits main .produits-compris,.page-produits main .section.produits-deroule{min-height:0;padding-block:80px}
.page-produits main .produits-honnetete{min-height:0;padding-block:88px;max-width:var(--largeur)}
.page-produits main .produits-honnetete h2{font-size:clamp(40px,4.1vw,62px)}
.page-produits main .produits-honnetete>p:not(.surtitre){max-width:54ch}
.page-produits main .produits-compris{background:transparent;border-block:1px solid var(--ligne)}
.page-produits main .produits-faits dd{font-size:16px;line-height:1.6}
.page-produits main .produits-faits dt{font-size:19px}
.page-produits main .section.produits-questions{padding-block:64px 88px}
.page-produits main .produits-contact{background:transparent;border-top:1px solid var(--ligne);padding-block:80px}
@media(max-width:1000px){
  .page-produits main .produits-hero{gap:24px}
  .page-produits main .produits-hero h1{font-size:clamp(43px,5.2vw,58px)}
  .produits-demo[data-chemin=nfc][data-etape=lecture] .produits-telephone{transform:translate(-75px,16px) rotate(-9deg)}
}
@media(max-width:760px){
  .page-produits main .produits-hero{grid-template-columns:1fr;min-height:0;padding-block:44px 56px;gap:22px}
  .page-produits main .produits-hero h1{font-size:clamp(43px,10.8vw,64px);max-width:15ch}
  .page-produits main .produits-hero .chapeau{font-size:17px;margin-top:24px;max-width:42ch}
  .page-produits main .produits-objet-scene{height:360px;width:100%;max-width:400px;margin-inline:auto}
  .page-produits main .produits-geste{padding-block:56px}
  .page-produits main .produits-geste h2{font-size:clamp(38px,9.8vw,56px)}
  .page-produits main .produits-geste-grille,.page-produits main .produits-compris-grille,.page-produits main .produits-pose,.page-produits main .section.produits-deroule{grid-template-columns:1fr;gap:32px}
  .page-produits main .produits-demo{width:min(100%,400px);margin-inline:auto}
  .produits-demo[data-chemin=nfc][data-etape=lecture] .produits-telephone{transform:translate(-50px,14px) rotate(-9deg)}
  .page-produits main .produits-pose,.page-produits main .produits-compris,.page-produits main .section.produits-deroule,.page-produits main .produits-honnetete,.page-produits main .section.produits-questions,.page-produits main .produits-contact{padding-block:56px}
  .page-produits main .produits-honnetete h2{font-size:clamp(38px,9.8vw,56px)}
}