/* Encore · L'objet v2 — les sections et leurs moments animés. */

/* ---- Ce que le carton ne dit pas ---- */
.carton{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(32px,5vw,88px);align-items:center}
.retourne{position:relative;perspective:1600px;display:grid;place-items:center;min-height:420px}
.retourne .face{grid-area:1/1;backface-visibility:hidden;-webkit-backface-visibility:hidden;transition:transform 1s var(--ease)}
.retourne .face.encore{transform:rotateY(0)}
.retourne .face.kraft{transform:rotateY(-180deg)}
.js .carton:not(.apres) .face.encore{transform:rotateY(180deg)}
.js .carton:not(.apres) .face.kraft{transform:rotateY(0)}
.kraft-carte{--cw:clamp(440px,34vw,600px);width:var(--cw);max-width:100%;aspect-ratio:1.586;border-radius:10px;position:relative;padding:calc(var(--cw)*.06);color:#4A2E22;
  background:
    radial-gradient(circle at 78% 70%,transparent 38px,rgba(120,72,40,.18) 39px,rgba(120,72,40,.1) 44px,transparent 46px),
    radial-gradient(120% 80% at 10% 0%,rgba(255,255,255,.28),transparent 60%),
    repeating-linear-gradient(95deg,rgba(90,60,30,.035) 0 2px,transparent 2px 5px),
    #D8C19A;
  box-shadow:0 1px 1px rgba(60,40,20,.25),0 24px 50px rgba(60,40,20,.28);transform-origin:center;display:flex;flex-direction:column;gap:calc(var(--cw)*.03)}
.kraft-carte::before{content:"";position:absolute;inset:0;border-radius:inherit;clip-path:polygon(0 0,100% 0,100% 82%,94% 100%,0 100%);background:transparent;box-shadow:inset 0 0 0 2px rgba(74,46,34,.18)}
.kraft-carte::after{content:"";position:absolute;right:0;bottom:0;width:9%;height:18%;background:linear-gradient(135deg,#C9AE82 50%,var(--papier) 50%);border-bottom-right-radius:10px}
.kraft-carte .k-h{display:flex;justify-content:space-between;align-items:baseline;border-bottom:1.5px dashed rgba(74,46,34,.35);padding-bottom:calc(var(--cw)*.02)}
.kraft-carte .k-h b{font-family:var(--dis);font-weight:800;text-transform:uppercase;letter-spacing:.04em;font-size:calc(var(--cw)*.05)}
.kraft-carte .k-h small{font-size:calc(var(--cw)*.026);letter-spacing:.14em;text-transform:uppercase;font-weight:700;opacity:.7}
.kraft-carte .cases{display:grid;grid-template-columns:repeat(5,1fr);gap:calc(var(--cw)*.028);flex:1;align-content:center}
.kraft-carte .case{aspect-ratio:1;border-radius:50%;border:1.5px solid rgba(74,46,34,.45);position:relative}
.kraft-carte .case svg{position:absolute;inset:-8%;width:116%;height:116%;fill:#7A2E24;opacity:.82}
.kraft-carte .case.double svg + svg{transform:translate(18%,-10%) rotate(24deg);opacity:.6}
.kraft-carte .k-b{display:flex;justify-content:space-between;padding-inline-end:11%;font-size:calc(var(--cw)*.028);font-weight:600;opacity:.75}
.epingle{position:absolute;width:30px;height:30px;border-radius:50%;background:var(--encre);color:#fff;display:grid;place-items:center;font-family:var(--dis);font-weight:800;font-size:13px;
  box-shadow:0 0 0 4px var(--papier),var(--sh1);z-index:3;transition:transform .4s var(--rebond),background .3s}
.carton.apres .epingle{background:var(--valide);transform:scale(1.05)}
.retourne .face.encore{--cw:clamp(440px,34vw,600px)}
.defauts{list-style:none;display:flex;flex-direction:column;gap:0;margin-top:28px}
.defauts li{display:grid;grid-template-columns:30px 1fr;gap:16px;padding:18px 0;border-top:1px solid var(--ligne)}
.defauts li:last-child{border-bottom:1px solid var(--ligne)}
.defauts li > i{width:30px;height:30px;border-radius:50%;background:var(--encre);color:#fff;display:grid;place-items:center;font-family:var(--dis);font-weight:800;font-size:13px;font-style:normal;transition:background .3s}
.carton.apres .defauts li > i{background:var(--valide)}
.defauts .deux{display:grid}
.defauts .deux > *{grid-area:1/1;transition:opacity .45s var(--ease),transform .45s var(--ease)}
.defauts s{text-decoration:none;color:var(--encre-2);font-size:17px}
.defauts s em{font-style:normal;display:block;font-family:var(--dis);font-weight:700;color:var(--encre);font-size:18px;letter-spacing:-.01em}
.defauts b{font-weight:400;color:var(--encre-2);font-size:17px}
.defauts b em{font-style:normal;display:block;font-family:var(--dis);font-weight:700;color:var(--valide);font-size:18px;letter-spacing:-.01em}
.carton.apres .defauts s,.no-js-fin .defauts s{opacity:0;transform:translateY(-8px)}
.carton:not(.apres) .defauts b{opacity:0;transform:translateY(8px)}
.defauts li:nth-child(2) .deux > *{transition-delay:.12s}.defauts li:nth-child(3) .deux > *{transition-delay:.24s}.defauts li:nth-child(4) .deux > *{transition-delay:.36s}
html:not(.js) .carton .defauts s{display:none}
.bascule{margin-top:22px;display:inline-flex;align-items:center;gap:10px;font-family:var(--dis);font-weight:700;font-size:15px;color:var(--encre);padding:10px 14px 10px 10px;border-radius:12px;box-shadow:inset 0 0 0 1.5px var(--ligne-2)}
.bascule i{width:26px;height:26px;border-radius:8px;background:var(--encre);color:#fff;display:grid;place-items:center;font-style:normal}
@media (max-width:980px){.carton{grid-template-columns:1fr}.kraft-carte,.retourne .face.encore{--cw:440px}}
@media (max-width:520px){.retourne{min-height:250px}.kraft-carte,.retourne .face.encore{--cw:330px}.epingle{width:24px;height:24px;font-size:11px}}

/* ---- Trois portes ---- */
.portes{display:grid;grid-template-columns:1fr 1.45fr 1fr;gap:clamp(16px,2vw,28px);align-items:stretch}
.porte{display:flex;flex-direction:column;gap:22px}
.porte .socle{height:clamp(560px,34vw,640px);border-radius:26px;background:linear-gradient(180deg,var(--encre-p),#0E1A31);box-shadow:inset 0 1px 0 rgba(255,255,255,.07),inset 0 0 0 1px rgba(255,255,255,.06);
  display:flex;align-items:center;justify-content:center;padding:28px 18px;overflow:hidden;position:relative}
.porte .socle::before{content:none;position:absolute;inset:auto 10% -40% 10%;height:60%;background:radial-gradient(closest-side,rgba(240,168,28,.18),transparent);pointer-events:none}
.porte .tel{--tw:clamp(250px,17vw,310px)}
.porte .tab{--tbw:clamp(560px,38vw,780px)}
.porte .legende h3{color:#fff}
.porte .legende h3 span{color:rgba(255,255,255,.5);font-weight:600}
.porte .legende p{color:rgba(255,255,255,.7);font-size:16px;margin-top:6px}
@media (max-width:1180px){.portes{grid-template-columns:1fr 1fr}.porte.p-tab{grid-column:1/-1;order:-1}}
@media (max-width:700px){.portes{grid-template-columns:1fr}.porte .socle{height:auto;min-height:0}.porte .tab{--tbw:340px}}

/* ---- Carnet et club ---- */
.argent{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,88px);align-items:center}
.tickets{display:flex;gap:22px;justify-content:center;align-items:flex-start;flex-wrap:wrap;min-height:380px;padding-top:30px}
.ticket{width:clamp(270px,19vw,330px);background:#fff;border-radius:8px 8px 0 0;padding:22px 22px 18px;box-shadow:var(--sh2);position:relative;display:flex;flex-direction:column;gap:12px}
.ticket::after{content:"";position:absolute;left:0;right:0;bottom:-9px;height:9px;background:radial-gradient(circle at 9px 0,transparent 6px,#fff 6.5px) 0 0/18px 9px}
.ticket .ens{font-family:var(--carte);font-size:24px;line-height:1}
.ticket .t{font-family:var(--dis);font-weight:700;font-size:16px}
.ticket .l{display:flex;justify-content:space-between;gap:10px;font-size:14px;color:var(--encre-2);border-top:1px dashed var(--ligne-2);padding-top:9px}
.ticket .l b{font-variant-numeric:tabular-nums;color:var(--encre)}
.ticket .trous{display:grid;grid-template-columns:repeat(5,1fr);gap:9px}
.ticket .trou{aspect-ratio:1;border-radius:50%;background:var(--safran);position:relative;transition:background .3s}
.ticket .trou.v{background:var(--papier);box-shadow:inset 0 1px 3px rgba(16,30,54,.25)}
.ticket .tot{display:flex;justify-content:space-between;font-family:var(--dis);font-weight:800;font-size:19px;letter-spacing:-.02em}
.ticket .tot span:last-child{font-variant-numeric:tabular-nums}
.ticket.carnet{transform:rotate(-2.5deg)}
.ticket.club{transform:rotate(2.5deg);margin-top:40px}
.tampon-encre{position:absolute;right:12px;top:14px;padding:6px 10px;border:2.5px solid var(--valide);color:var(--valide);border-radius:8px;font-family:var(--dis);font-weight:800;font-size:15px;letter-spacing:.1em;transform:rotate(-12deg);opacity:.85;mix-blend-mode:multiply}
.faits{display:flex;flex-direction:column;gap:14px;margin-top:10px}
.faits div{display:grid;grid-template-columns:92px 1fr;gap:16px;align-items:baseline;color:var(--encre-2)}
.faits b{font-family:var(--dis);font-weight:800;font-size:26px;letter-spacing:-.03em;color:var(--encre);font-variant-numeric:tabular-nums}
@media (max-width:980px){.argent{grid-template-columns:1fr}}

/* ---- Le calcul ---- */
.calcul{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,88px);align-items:start}
.calcul .reglages{display:flex;flex-direction:column;gap:26px;margin-top:34px;max-width:520px}
.calcul .metiers span{box-shadow:inset 0 0 0 1.5px rgba(16,30,54,.25);color:var(--encre)}
.calcul .metiers input:checked + span{background:var(--encre);color:#fff}
.curseur{display:flex;flex-direction:column;gap:10px}
.curseur .t{display:flex;justify-content:space-between;align-items:baseline;font-weight:600}
.curseur .t b{font-family:var(--dis);font-size:26px;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.curseur input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:28px;background:transparent;cursor:pointer}
.curseur input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:3px;background:linear-gradient(var(--encre),var(--encre)) 0/var(--p,50%) 100% no-repeat,rgba(16,30,54,.18)}
.curseur input[type=range]::-moz-range-track{height:6px;border-radius:3px;background:rgba(16,30,54,.18)}
.curseur input[type=range]::-moz-range-progress{height:6px;border-radius:3px;background:var(--encre)}
.curseur input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;border-radius:50%;background:var(--encre);margin-top:-10px;box-shadow:0 0 0 5px var(--safran),0 2px 6px rgba(16,30,54,.35)}
.curseur input[type=range]::-moz-range-thumb{width:26px;height:26px;border-radius:50%;background:var(--encre);border:0;box-shadow:0 0 0 5px var(--safran)}
.imprimante{position:relative;display:flex;flex-direction:column;align-items:center}
.imprimante .fente{width:min(460px,100%);height:26px;border-radius:13px;background:linear-gradient(#0B1426,#1E2E4D);box-shadow:inset 0 3px 6px rgba(0,0,0,.5);position:relative;z-index:2}
.imprimante .rouleau{width:min(400px,92%);margin-top:-12px;overflow:hidden;padding:12px 10px 22px}
.recu{background:#FFFEFB;font-family:var(--mono);font-size:14.5px;color:#1B2536;padding:26px 24px 20px;position:relative;box-shadow:0 20px 40px rgba(16,30,54,.25)}
.recu::after{content:"";position:absolute;left:0;right:0;bottom:-10px;height:10px;background:linear-gradient(135deg,#FFFEFB 50%,transparent 50%) 0 0/14px 10px,linear-gradient(225deg,#FFFEFB 50%,transparent 50%) 0 0/14px 10px}
.recu .c{text-align:center}
.recu .ent b{display:block;font-weight:700;font-size:16px;letter-spacing:.06em;text-transform:uppercase}
.recu .ent small{display:block;color:#6B7486;font-size:12px;margin-top:2px}
.recu .sep{border-top:1.5px dashed #B9B2A4;margin:12px 0}
.recu .sep2{border-top:3px double #1B2536;margin:12px 0}
.recu .ln{display:flex;justify-content:space-between;gap:12px;padding:3px 4px;border-radius:4px;transition:background .6s}
.recu .ln span:last-child{text-align:end;font-variant-numeric:tabular-nums;white-space:nowrap}
.recu .ln.fort{font-weight:700;font-size:17px}
.recu .ln.flash{background:var(--safran-soft);transition:none}
.recu .note{font-size:12px;color:#6B7486;margin-top:4px}
.recu .code-barre{height:34px;margin:14px auto 4px;width:70%;background:repeating-linear-gradient(90deg,#1B2536 0 2px,transparent 2px 4px,#1B2536 4px 5px,transparent 5px 8px,#1B2536 8px 11px,transparent 11px 12px)}
@media (max-width:980px){.calcul{grid-template-columns:1fr}}

/* ---- Au comptoir ---- */
.comptoir{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(32px,5vw,88px);align-items:center}
.points{display:grid;grid-template-columns:1fr 1fr;gap:26px 32px;margin-top:34px}
.points div{border-top:2px solid var(--encre);padding-top:14px;display:flex;flex-direction:column;gap:6px}
.points small{font-family:var(--dis);font-weight:700;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--safran-fonce)}
.points b{font-family:var(--dis);font-size:19px;letter-spacing:-.015em;line-height:1.2}
.points span{font-size:15.5px;color:var(--encre-2)}
.scene-comptoir{position:relative;display:flex;justify-content:center;align-items:center;gap:0;min-height:600px}
.scene-comptoir .fiche{--fw:clamp(330px,23vw,430px);transform:rotate(-3deg) translateX(-2%)}
.scene-comptoir .tel{--tw:clamp(270px,19vw,340px);transform:translate(3%,6%) rotate(2deg);z-index:2}
@media (max-width:980px){.comptoir{grid-template-columns:1fr}}
@media (max-width:560px){.scene-comptoir{min-height:0;flex-direction:column;gap:24px}.scene-comptoir .fiche,.scene-comptoir .tel{transform:none}.points{grid-template-columns:1fr}}

/* ---- Pour la direction ---- */
.pilotage{position:relative;display:grid;grid-template-columns:1fr;gap:40px}
.pilotage .scene{position:relative;padding-inline-end:230px}
.pilotage .tel{--tw:clamp(280px,19vw,340px);position:absolute;inset-inline-end:0;bottom:-90px;z-index:2}
.pilotage .faits4{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;margin-top:40px}
.pilotage .faits4 div{border-top:1px solid rgba(255,255,255,.2);padding-top:14px;display:flex;flex-direction:column;gap:6px}
.pilotage .faits4 b{font-family:var(--dis);font-weight:700}
.pilotage .faits4 span{font-size:15px;color:rgba(255,255,255,.68)}
@media (max-width:1100px){.pilotage .scene{padding-inline-end:0}.pilotage .tel{position:relative;bottom:auto;margin:30px auto 0}.pilotage .navig{overflow-x:auto}}
@media (max-width:760px){.pilotage .faits4{grid-template-columns:1fr 1fr}.taux{min-width:640px}}

/* ---- Tout le reste ---- */
.reste-l{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(28px,5vw,80px);list-style:none}
.reste-l li{display:grid;grid-template-columns:44px 1fr;gap:18px;padding:22px 0;border-bottom:1px solid var(--ligne)}
.reste-l li i{width:44px;height:44px;border-radius:13px;background:var(--encre);display:grid;place-items:center;position:relative;overflow:hidden}
.reste-l li i::after{content:"";position:absolute;inset:0;background:radial-gradient(80% 60% at 20% 0%,rgba(240,168,28,.35),transparent 70%)}
.reste-l li i svg{width:21px;height:21px;stroke:#fff;fill:none;stroke-width:1.8;position:relative;z-index:1}
.reste-l b{display:block;font-family:var(--dis);font-size:19px;letter-spacing:-.015em;margin-bottom:4px}
.reste-l span{color:var(--encre-2);font-size:16px}
.reste-l li{grid-template-columns:170px 1fr}
.reste-l li i.ou{width:auto;height:auto;background:none;display:block;overflow:visible;font-style:normal;font-family:var(--dis);font-weight:700;font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--safran-fonce);padding-top:6px}
.reste-l li i.ou::after{content:none}
@media (max-width:760px){.reste-l{grid-template-columns:1fr}.reste-l li{grid-template-columns:1fr;gap:6px}}

/* ---- Les enseignes ---- */
.enseignes{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.vitrine{display:flex;flex-direction:column;gap:18px}
.vitrine .photo{position:relative;aspect-ratio:4/3.2;border-radius:22px;overflow:visible;
  background:repeating-linear-gradient(135deg,#EFEAE0 0 12px,#F5F1E9 12px 24px);border:1px solid var(--ligne);display:grid;place-items:start center;padding-top:22%}
.vitrine .photo .manque{display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--encre-4);font-size:13px;font-weight:600}
.vitrine .photo .manque svg{width:26px;height:26px;stroke:currentColor;fill:none;stroke-width:1.7}
.vitrine .photo .objet{--cw:300px;position:absolute;left:50%;bottom:-14%;transform:translateX(-50%) rotate(-3deg)}
.vitrine .nom{font-family:var(--dis);font-weight:800;font-size:clamp(24px,2.3vw,32px);letter-spacing:-.03em;line-height:1;margin-top:58px}
.vitrine .quoi{color:var(--encre-2);font-size:16px}
.vitrine .etiquettes{display:flex;flex-wrap:wrap;gap:6px}
.vitrine .etiquettes span{font-size:13px;font-weight:600;padding:5px 10px;border-radius:999px;background:var(--blanc);box-shadow:inset 0 0 0 1px var(--ligne)}
.vitrine.vous .photo{background:transparent;border:2px dashed var(--ligne-2)}
.vitrine.vous .objet{--f1:#2A3F66;--f2:#1C2D50;--f3:#13223F}
@media (max-width:1020px){.enseignes{grid-template-columns:1fr 1fr}.vitrine.vous{grid-column:1/-1;max-width:520px}}
@media (max-width:640px){.enseignes{grid-template-columns:1fr}.vitrine .photo .objet{--cw:270px}}

/* ---- Tarifs ---- */
.grille{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
/* Le titre enonce « un prix par chaine » ; cette ligne fait la multiplication
   a la place du gerant de trois cafes. */
#tarifs .lead-chiffre{margin-top:12px;font-family:var(--dis);font-weight:700;font-size:clamp(17px,1.2vw,19px);color:var(--encre);max-width:62ch}
.offre{background:var(--blanc);border:1px solid var(--ligne);border-radius:20px;padding:28px 26px 26px;display:flex;flex-direction:column;gap:18px;transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.offre:hover{transform:translateY(-4px);box-shadow:var(--sh2)}
.offre .tranche{font-family:var(--dis);font-weight:700;font-size:16px;color:var(--encre-2)}
.offre .prix{display:flex;align-items:baseline;gap:8px;line-height:1;flex-wrap:wrap}
.offre .prix b{font-family:var(--dis);font-weight:800;font-size:48px;letter-spacing:-.045em;font-variant-numeric:tabular-nums;white-space:nowrap}
.offre .prix span{font-size:14.5px;color:var(--encre-3)}
.offre .devis b{font-size:34px}
.offre .pour{font-size:14.5px;color:var(--encre-3);margin-top:-8px}
.offre .quota{display:flex;align-items:center;gap:10px;font-size:14.5px;padding:13px 0;border-block:1px solid var(--ligne)}
.offre .quota b{font-family:var(--dis);font-size:19px;white-space:nowrap;font-variant-numeric:tabular-nums}
.offre .btn{margin-top:auto}
.inclus{margin-top:28px;background:var(--blanc);border:1px solid var(--ligne);border-radius:20px;padding:28px 30px;display:grid;grid-template-columns:auto 1fr;gap:16px 48px}
.inclus ul{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:10px 28px;font-size:15.5px}
.inclus li{display:flex;gap:10px}
.inclus li::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--safran);flex:none;margin-top:9px}
.notes{margin-top:18px;display:flex;flex-wrap:wrap;gap:8px 28px;font-size:14.5px;color:var(--encre-3)}
.notes b{color:var(--encre);font-weight:600}
@media (max-width:1020px){.grille{grid-template-columns:1fr 1fr}.inclus{grid-template-columns:1fr}.inclus ul{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.grille{grid-template-columns:1fr}.inclus ul{grid-template-columns:1fr}}

/* ---- Démo ---- */
.demo{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(32px,5vw,88px);align-items:center}
.demo h2{color:#fff}
.wa-cta{display:inline-flex;align-items:center;gap:12px;margin-top:26px;font-family:var(--dis);font-weight:700;padding:12px 18px 12px 12px;border-radius:16px;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.22)}
.wa-cta:hover{box-shadow:inset 0 0 0 1.5px var(--safran)}
.wa-cta i{width:40px;height:40px;border-radius:12px;background:#25D366;display:grid;place-items:center}
.wa-cta i svg{width:22px;height:22px}
.wa-cta small{display:block;font-family:var(--txt);font-weight:400;font-size:13px;color:rgba(255,255,255,.6)}
.form{display:flex;flex-direction:column;gap:14px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:22px;padding:24px}
.form label{display:flex;flex-direction:column;gap:6px;font-size:13.5px;font-weight:600;color:rgba(255,255,255,.75)}
.form input{height:50px;border-radius:12px;border:1.5px solid rgba(255,255,255,.18);background:rgba(255,255,255,.04);color:#fff;padding:0 14px;font-size:15.5px}
.form input::placeholder{color:rgba(255,255,255,.35)}
.form input:focus{border-color:var(--safran);outline:none}
@media (max-width:900px){.demo{grid-template-columns:1fr}}

footer{padding-block:44px 52px}
footer .l1{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
footer .l1 img{height:24px;width:auto}
footer nav{display:flex;gap:24px;flex-wrap:wrap;font-size:14.5px;color:var(--encre-2)}
footer .l2{margin-top:22px;font-size:13.5px;color:var(--encre-3)}

/* ======== Les moments animés (déclenchés par .joue, à l'arrivée) ======== */
@keyframes monte{from{opacity:0;transform:translateY(26px)}}
@keyframes tombe{0%{opacity:0;transform:translateY(-140%) scale(1.5)}60%{opacity:1;transform:translateY(8%) scale(.92)}100%{transform:none}}
@keyframes bulle{from{opacity:0;transform:translateY(12px) scale(.96)}}
@keyframes glisse-bas{from{opacity:0;transform:translateY(-120%)}}
@keyframes imprime{from{transform:translateY(-100%)}}
@keyframes tamponne{0%{opacity:0;transform:rotate(-12deg) scale(2.2)}70%{opacity:.9;transform:rotate(-12deg) scale(.94)}100%{opacity:.85;transform:rotate(-12deg) scale(1)}}
@keyframes poinconne{0%{background:var(--safran)}40%{transform:scale(.7)}100%{background:var(--papier);box-shadow:inset 0 1px 3px rgba(16,30,54,.25)}}
@keyframes entre{from{opacity:0;max-height:0;padding-block:0}to{max-height:4em}}
@keyframes pousse{from{width:0}}
@keyframes grandit{from{height:0}}

.js .apparait{opacity:1}
.joue .apparait{animation:monte .8s var(--ease) backwards;animation-delay:calc(var(--i,0) * 90ms)}
.scene-heros.joue .objet.devant{animation:monte .9s var(--ease) backwards}
.scene-heros.joue .objet.derriere{animation:monte .9s .35s var(--ease) backwards}
.scene-heros.joue .pastille.derniere{animation:tombe .7s .75s var(--rebond) backwards}
.scene-heros.joue .notif{animation:bulle .6s 1.35s var(--ease) backwards}
.p-wa.joue .wb,.p-wa.joue .wa-bouton{animation:bulle .5s var(--ease) backwards}
.p-wa.joue .wb:nth-child(1){animation-delay:.3s}.p-wa.joue .wb:nth-child(2){animation-delay:1.1s}.p-wa.joue .wa-bouton{animation-delay:1.8s}
.p-wallet.joue .banniere{animation:glisse-bas .7s 1s var(--rebond) backwards}
.p-wallet.joue .pastille.derniere{animation:tombe .7s 1.5s var(--rebond) backwards}
.tickets.joue .carnet{animation:imprime .9s var(--ease) backwards}
.tickets.joue .trou.consomme{animation:poinconne .6s 1.1s var(--ease) both}
.tickets.joue .tampon-encre{animation:tamponne .45s 1.5s var(--ease) backwards}
.imprimante.joue .recu{animation:imprime 1.1s var(--ease) backwards}
.scene-comptoir.joue .geste.nouveau{animation:entre .6s 1s var(--ease) backwards}
.scene-comptoir.joue .fiche{animation:monte .9s var(--ease) backwards}
.pilotage.joue .jauge span{animation:pousse 1.2s .3s var(--ease) backwards}
.pilotage.joue .barres i{animation:grandit .7s var(--ease) backwards;animation-delay:calc(.4s + var(--j,0) * 60ms)}
.pilotage.joue .tel{animation:monte 1s .5s var(--ease) backwards}
.pilotage.joue .action{animation:bulle .5s var(--ease) backwards;animation-delay:calc(1s + var(--j,0) * 250ms)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* ---- Le calcul, v3 : le même mois sans carte puis avec ---- */
.calcul2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(32px,5vw,96px);align-items:start}
.calcul-t{display:flex;flex-direction:column;gap:28px}
.calcul2 .metiers span{box-shadow:inset 0 0 0 1.5px rgba(16,30,54,.25);color:var(--encre)}
.calcul2 .metiers input:checked + span{background:var(--encre);color:#fff}
.groupes{display:grid;grid-template-columns:1fr 1fr;gap:28px 40px}
.groupes fieldset{border:0;display:flex;flex-direction:column;gap:18px;min-width:0}
.groupes legend{font-family:var(--dis);font-weight:700;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--encre-2);margin-bottom:6px;padding:0}
.groupes .curseur .t{font-size:15px;gap:12px}
.groupes .curseur .t span{line-height:1.3}
.groupes .curseur .t b{font-size:22px;white-space:nowrap}
.deux-tickets{display:grid;grid-template-columns:1fr 1fr;gap:18px 22px;align-items:start}
.deux-tickets .colonne{display:flex;flex-direction:column;gap:10px;min-width:0}
.tete-ticket{font-family:var(--dis);font-weight:700;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--encre-2)}
.deux-tickets .recu{font-size:13px;padding:22px 18px 18px}
.deux-tickets .recu.court{opacity:.78;transform:rotate(-1.2deg)}
.deux-tickets .recu.long{transform:rotate(1deg)}
.deux-tickets .recu .ln{padding:3px 2px}
.deux-tickets .recu .plus > span:last-child{color:var(--valide);font-weight:700}
.deux-tickets .recu .plus > span:last-child::before{content:"+ "}
.deux-tickets .recu .moins > span:last-child::before{content:"− "}
.deux-tickets .recu .note{font-size:11px;margin:0 2px 6px}
.difference{grid-column:1/-1;display:flex;align-items:baseline;gap:18px;flex-wrap:wrap;background:var(--encre);color:#fff;border-radius:20px;padding:22px 26px;margin-top:10px}
.difference b{font-family:var(--dis);font-weight:800;font-size:clamp(40px,4.4vw,68px);letter-spacing:-.045em;line-height:1;color:var(--safran-clair)}
.difference span{color:rgba(255,255,255,.75);font-size:16px}
.avance{grid-column:1/-1;display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;padding:4px 6px}
.avance b{font-family:var(--dis);font-weight:800;font-size:24px;letter-spacing:-.03em}
.avance span{color:var(--encre-2);font-size:15px;max-width:60ch}
.deux-tickets.joue .recu.long{animation:imprime 1.1s var(--ease) backwards}
.deux-tickets.joue .difference{animation:monte .8s .9s var(--ease) backwards}
@media (max-width:1100px){.calcul2{grid-template-columns:1fr}}
@media (max-width:640px){.groupes{grid-template-columns:1fr}.deux-tickets{grid-template-columns:1fr}.deux-tickets .recu.court,.deux-tickets .recu.long{transform:none}}

/* Enseignes sans photo (pas de photos pour le moment) : la carte seule, posée sur son socle */
.vitrine .photo{aspect-ratio:auto;min-height:clamp(260px,20vw,320px);background:var(--blanc);border:1px solid var(--ligne);border-radius:22px;display:grid;place-items:center;padding:36px 20px;overflow:hidden}
.vitrine .photo .objet{position:relative;left:auto;bottom:auto;--cw:clamp(280px,21vw,360px);transform:rotate(-3deg)}
.vitrine.vous .photo{background:transparent;border:2px dashed var(--ligne-2)}
.vitrine .nom{margin-top:18px}
@media (max-width:640px){.vitrine .photo .objet{--cw:270px}}

/* ---- Inclus : tableau comparatif léger (les barres sombres ont été rejetées) ---- */
.inclus-t{margin-top:44px}
.comparatif{width:100%;border-collapse:collapse;font-size:15.5px}
.comparatif caption{caption-side:top;text-align:start;font-family:var(--dis);font-weight:700;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--encre-3);padding:0 16px 14px}
.comparatif th,.comparatif td{padding:18px 16px;border-bottom:1px solid var(--ligne);text-align:center;vertical-align:middle}
.comparatif thead th{font-family:var(--dis);font-weight:700;font-size:14.5px;color:var(--encre-2);border-bottom:1.5px solid var(--encre);padding-block:12px}
.comparatif th[scope=row]{text-align:start;width:36%}
.comparatif th[scope=row] b{display:block;font-family:var(--dis);font-weight:700;font-size:17px;letter-spacing:-.01em;color:var(--encre)}
.comparatif th[scope=row] small{display:block;font-weight:400;font-size:14.5px;color:var(--encre-3);margin-top:3px}
.comparatif td{width:16%}
.comparatif .coche-t{display:block;width:22px;height:22px;margin-inline:auto;stroke:var(--safran-fonce);stroke-width:2.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
.comparatif tr.varie td{font-family:var(--dis);font-weight:800;font-size:21px;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--encre)}
.comparatif tbody tr{transition:background .2s}
.comparatif tbody tr:hover{background:rgba(16,30,54,.03)}
.comparatif .partout{display:none}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.inclus-t .a-part{margin:18px 16px 0;font-size:15px;color:var(--encre-2);max-width:none}
.inclus-t .a-part b{color:var(--encre);font-weight:600}
@keyframes coche{from{stroke-dashoffset:24}to{stroke-dashoffset:0}}
.inclus-t.joue .coche-t path{stroke-dasharray:24;animation:coche .45s var(--ease) backwards;animation-delay:calc(var(--r,0) * 80ms + var(--c,0) * 70ms)}
@media (max-width:760px){
  .comparatif thead{display:none}
  .comparatif,.comparatif tbody,.comparatif tr,.comparatif th,.comparatif th[scope=row]{display:block;width:auto}
  .comparatif td.partout,.comparatif tr.varie td{width:auto}
  .comparatif caption{display:block;padding-inline:0}
  .comparatif tr{border-bottom:1px solid var(--ligne);padding:14px 0}
  .comparatif th,.comparatif td{border:0;padding:0}
  .comparatif td{display:none}
  .comparatif td.partout{display:block;text-align:start;margin-top:6px;font-size:13px;font-weight:700;color:var(--safran-fonce)}
  .comparatif tr.varie td{display:inline-block;width:auto;text-align:start;margin:8px 16px 0 0;font-size:17px}
  .comparatif tr.varie td::before{content:attr(data-tranche) " : ";font-family:var(--txt);font-weight:500;font-size:13px;color:var(--encre-3)}
  .inclus-t .a-part{margin-inline:0}
}

/* Les messages, expliqués dans chaque carte de prix : ce qui est gratuit, ce qui se paie */
.offre .messages{display:flex;flex-direction:column;gap:10px;padding:14px 0;border-block:1px solid var(--ligne);font-size:14px;line-height:1.4;color:var(--encre-3)}
.offre .messages p{margin:0}
.offre .messages b{display:block;color:var(--encre);font-weight:600;font-size:14.5px}
/* LE VOLUME REEL, sous « gratuites et illimitees ». Un adjectif ne se compare
   pas, un chiffre si : en face, un concurrent annonce un nombre d'e-mails
   inclus, et le seul chiffre que cette page donnait sur les messages etait un
   COUT. Ce n'est pas un quota — la ligne au-dessus dit « illimitees » ; c'est
   le volume qu'un point de vente echange vraiment (150 tickets/jour, un tiers
   identifies, arithmetique de la section « Le calcul »). */
.offre .messages .volume{display:block;margin-top:4px;font-size:13px;line-height:1.45;color:var(--encre-3);font-variant-numeric:tabular-nums}

.comparatif tr.varie td{font-size:18px}

/* ---- Le carton, allégé : trois paires, une ligne chacune (retour user « trop chargé ») ---- */
.paires{list-style:none;margin-top:30px;display:flex;flex-direction:column}
.paires li{display:flex;flex-direction:column;gap:4px;padding:18px 0;border-top:1px solid var(--ligne)}
.paires li:last-child{border-bottom:1px solid var(--ligne)}
.paires s{text-decoration:none;font-size:17px;color:var(--encre-3)}
.paires b{display:flex;gap:10px;align-items:baseline;font-family:var(--dis);font-weight:700;font-size:clamp(19px,1.6vw,24px);letter-spacing:-.015em;color:var(--encre);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.paires b::before{content:"→";color:var(--safran-fonce)}
.js .carton:not(.apres) .paires b{opacity:0;transform:translateX(-8px)}
.paires li:nth-child(2) b{transition-delay:.12s}
.paires li:nth-child(3) b{transition-delay:.24s}
.retourne{cursor:pointer}

/* WhatsApp : le client écrit, « en train d'écrire », puis la carte arrive */
@keyframes frappe{0%{max-height:0;opacity:0;padding-block:0}12%{max-height:3em;opacity:1;padding-block:.6em}82%{max-height:3em;opacity:1;padding-block:.6em}100%{max-height:0;opacity:0;padding-block:0}}
.p-wa.joue .wb.moi{animation:bulle .5s .3s var(--ease) backwards}
.p-wa.joue .wb.frappe{animation:frappe 1.3s .7s var(--ease) both}
.p-wa.joue .wb.reponse{animation:bulle .6s 2s var(--ease) backwards}
.p-wa.joue .wa-bouton{animation:bulle .5s 2.6s var(--ease) backwards}
.p-wa.joue .jour{animation:bulle .4s var(--ease) backwards}
/* La réponse ne réserve pas sa place avant d'arriver : elle pousse la conversation vers le haut */
@keyframes pousse-h{from{max-height:0;opacity:0;padding-block:0;margin-top:-.5em}to{max-height:40em;opacity:1}}
.p-wa.joue .wb.reponse{overflow:hidden;animation:pousse-h .8s 2s var(--ease) backwards}
.p-wa.joue .wa-bouton{overflow:hidden;animation:pousse-h .5s 2.7s var(--ease) backwards}

/* Wallet : le pass est là, la notification descend, le 7e tampon tombe, la notification repart */
@keyframes notif-wallet{0%{opacity:0;transform:translateY(-140%)}12%,78%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-140%)}}
.p-wallet.joue .banniere2{animation:notif-wallet 3.2s .9s var(--ease) both}
.p-wallet.joue .pass2{animation:monte .8s .2s var(--ease) backwards}
.p-wallet.joue .pass2 .pastille.derniere{animation:tombe .7s 1.5s var(--rebond) backwards}

/* ---- Démo, v2 : la carte du visiteur, un formulaire qui qualifie, essayer tout de suite ---- */
#demo{border-top:1px solid var(--ligne)}
.demo2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,96px);align-items:start}
.demo-g{display:flex;flex-direction:column;gap:34px}
.demo-carte{--cw:clamp(320px,32vw,560px);position:relative;width:var(--cw);max-width:100%;aspect-ratio:1.586;perspective:1600px;margin-block:8px}
.demo-carte .face{position:absolute;inset:0;width:100%;backface-visibility:hidden;-webkit-backface-visibility:hidden;transition:transform .9s var(--ease)}
.demo-carte .recto{transform:rotateY(0) rotate(-2deg)}
.demo-carte .verso{transform:rotateY(180deg) rotate(-2deg);border-radius:calc(var(--cw)*.056);background:var(--encre);color:#fff;display:flex;flex-direction:column;justify-content:center;gap:12px;padding:calc(var(--cw)*.08);box-shadow:var(--sh3)}
.demo2.envoye .demo-carte .recto{transform:rotateY(-180deg) rotate(-2deg)}
.demo2.envoye .demo-carte .verso{transform:rotateY(0) rotate(-2deg)}
.demo-carte .verso svg{width:46px;height:46px;border-radius:50%;background:var(--valide);padding:11px;stroke:#fff;stroke-width:3;fill:none;stroke-linecap:round;stroke-linejoin:round}
.demo-carte .verso b{font-family:var(--dis);font-weight:800;font-size:clamp(24px,2.2vw,36px);letter-spacing:-.03em;line-height:1.1}
.demo-carte .verso p{color:rgba(255,255,255,.72);font-size:16px}
.garanties{list-style:none;display:flex;flex-direction:column}
.garanties li{display:grid;grid-template-columns:18px 1fr;gap:2px 12px;padding:15px 0;border-top:1px solid var(--ligne)}
.garanties li::before{content:"";grid-row:span 2;width:9px;height:9px;border-radius:50%;background:var(--safran);margin-top:9px}
.garanties b{font-family:var(--dis);font-weight:700;font-size:18px;letter-spacing:-.01em}
.garanties span{grid-column:2;color:var(--encre-2);font-size:15.5px}
.form2{background:var(--blanc);border:1px solid var(--ligne);border-radius:24px;padding:clamp(22px,2.4vw,38px);box-shadow:var(--sh2);display:flex;flex-direction:column;gap:20px}
.form2 h3{font-size:clamp(22px,1.8vw,30px)}
.form2 .sous{color:var(--encre-3);font-size:15px;margin-top:-12px}
.champs2{display:grid;grid-template-columns:1fr 1fr;gap:14px 16px}
.champs2 label{display:flex;flex-direction:column;gap:6px;font-size:13.5px;font-weight:600;color:var(--encre-2)}
.champs2 input{height:50px;border-radius:12px;border:1.5px solid var(--ligne-2);background:var(--papier);padding:0 14px;font-size:16px;font-weight:500;width:100%;min-width:0}
.champs2 input::placeholder{color:var(--encre-4);font-weight:400}
.champs2 input:focus{outline:none;border-color:var(--encre);background:#fff}
.puces{border:0;padding:0;margin:0;min-width:0}
.puces legend{font-size:13.5px;font-weight:600;color:var(--encre-2);padding:0;margin-bottom:8px}
.puces .metiers span{height:40px;padding:0 15px;box-shadow:inset 0 0 0 1.5px var(--ligne-2)}
.form2 .btn{height:58px;font-size:17px;margin-top:4px}
.form2 .btn[disabled]{background:var(--valide);color:#fff;box-shadow:none;cursor:default;transform:none}
.essai{margin-top:16px;display:flex;align-items:center;justify-content:space-between;gap:14px 24px;flex-wrap:wrap;border:1.5px dashed var(--ligne-2);border-radius:20px;padding:18px 20px}
.essai > div{flex:1 1 260px;display:flex;flex-direction:column;gap:2px}
.essai b{font-family:var(--dis);font-weight:700;font-size:17px}
.essai span{color:var(--encre-2);font-size:15px}
.btn-wa{background:#1DA851;color:#fff;box-shadow:0 3px 0 #13843F}
.btn-wa:hover{background:#22B95A}
@media (max-width:1020px){.demo2{grid-template-columns:1fr}}
@media (max-width:560px){.champs2{grid-template-columns:1fr}.demo-carte{--cw:320px}.essai .btn{width:100%;justify-content:center}}
@media (max-width:380px){.demo-carte{--cw:290px}}
@media (prefers-reduced-motion:reduce){.demo-carte .face{transition:none}}
.form2 .btn[disabled] svg{display:none}

/* ---- Carte NFC sécurisée : option payante, sous le tableau des tarifs ---- */
.nfc{margin-top:40px;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:center;background:var(--blanc);border:1px solid var(--ligne);border-radius:24px;padding:clamp(16px,2.2vw,32px)}
.nfc-scene{position:relative;min-height:clamp(360px,30vw,460px);border-radius:18px;background:radial-gradient(80% 70% at 35% 60%,#FFFFFF,#EFEAE0);display:flex;align-items:center;justify-content:center;overflow:hidden}
.presentoir{--aw:clamp(170px,13vw,220px);position:relative;display:flex;flex-direction:column;align-items:center;transform:translateX(-26%)}
.acrylique{position:relative;z-index:1;width:var(--aw);aspect-ratio:.72;border-radius:14px;padding:14px;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(255,255,255,.74));border:1px solid rgba(16,30,54,.12);box-shadow:inset 0 0 0 5px rgba(255,255,255,.6),0 18px 30px rgba(16,30,54,.14)}
.acrylique::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(115deg,rgba(255,255,255,.75),transparent 40%);pointer-events:none}
.acrylique b{font-family:var(--carte);font-weight:400;font-size:calc(var(--aw)*.11);line-height:1.05;color:var(--encre)}
.nfc-ico{width:calc(var(--aw)*.34);height:calc(var(--aw)*.34);color:var(--safran-fonce)}
.acrylique .fr{font-family:var(--dis);font-weight:700;font-size:calc(var(--aw)*.068);line-height:1.2;color:var(--encre)}
.acrylique .ar{font-size:calc(var(--aw)*.066);color:var(--encre-2)}
.acrylique small{font-family:var(--dis);font-weight:700;font-size:calc(var(--aw)*.045);letter-spacing:.16em;color:var(--encre-4);margin-top:4px}
.socle-nfc{display:block;width:calc(var(--aw)*1.15);height:18px;margin-top:-6px;border-radius:6px;background:linear-gradient(#2E2E33,#111114);box-shadow:0 12px 20px rgba(16,30,54,.2)}
.onde{position:absolute;left:50%;top:40%;width:calc(var(--aw)*.9);aspect-ratio:1;margin:calc(var(--aw)*-.45) 0 0 calc(var(--aw)*-.45);border-radius:50%;border:2px solid var(--safran);opacity:0;z-index:2;pointer-events:none}
.nfc-tel{--tw:clamp(140px,11vw,180px);position:absolute;left:50%;top:50%;margin-top:calc(var(--tw)*-1.07);transform:translate(10%,0) rotate(-4deg);z-index:3}
.nfc-tel > .ecr{font-size:calc(var(--tw)*.05)}
.nfc-tel .fil{padding:.6em}
.nfc-t{display:flex;flex-direction:column;gap:16px}
.nfc-t h3{font-size:clamp(26px,2.4vw,38px);letter-spacing:-.03em}
.nfc .prix{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.nfc .prix b{font-family:var(--dis);font-weight:800;font-size:clamp(40px,3.6vw,58px);letter-spacing:-.045em;line-height:1}
.nfc .prix span{color:var(--encre-3);font-size:15px}
.nfc-points{list-style:none;display:flex;flex-direction:column}
.nfc-points li{display:flex;flex-direction:column;gap:2px;padding:12px 0;border-top:1px solid var(--ligne)}
.nfc-points b{font-family:var(--dis);font-weight:700;font-size:17px;letter-spacing:-.01em}
.nfc-points span{color:var(--encre-2);font-size:15px}
.nfc-note{font-size:14px;color:var(--encre-3)}
@keyframes approche{0%,10%{transform:translate(85%,6%) rotate(10deg)}32%,72%{transform:translate(10%,0) rotate(-4deg)}92%,100%{transform:translate(85%,6%) rotate(10deg)}}
@keyframes ondes{0%,30%{opacity:0;transform:scale(.6)}38%{opacity:.9}66%,100%{opacity:0;transform:scale(1.7)}}
@keyframes bulle-nfc{0%,38%{opacity:0;transform:translateY(10px)}46%,74%{opacity:1;transform:none}86%,100%{opacity:0;transform:none}}
.nfc.joue .nfc-tel{animation:approche 5.5s var(--ease) infinite}
.nfc.joue .onde{animation:ondes 5.5s ease-out infinite}
.nfc.joue .onde.o2{animation-delay:.3s}
.nfc.joue .nfc-bulle{animation:bulle-nfc 5.5s ease infinite}
@media (max-width:1020px){.nfc{grid-template-columns:1fr}}
@media (max-width:520px){.presentoir{--aw:150px;transform:translateX(-34%)}.nfc-tel{--tw:130px;left:46%}}

/* Formulaire de démo en ligne (T3bis.1.3) : accord, loi 09-08, erreurs, pot de miel */
.accord{display:flex;align-items:flex-start;gap:10px;font-size:14.5px;color:var(--encre-2);line-height:1.45;cursor:pointer;flex-wrap:wrap}
.accord input{width:20px;height:20px;margin:1px 0 0;flex:none;accent-color:var(--encre)}
.accord span{flex:1 1 0;min-width:0}
.accord .erreur{flex-basis:100%}
.loi{font-size:12.5px;line-height:1.5;color:var(--encre-3);margin-top:-6px}
.loi a{color:var(--encre-2);text-underline-offset:2px}
.erreur{color:#B3261E;font-size:13px;font-weight:600}
.champs2 input[aria-invalid]{border-color:#B3261E;background:#fff}
.form-erreur{color:#B3261E;font-size:14.5px;font-weight:600;margin-top:-6px}
.form2 .btn.attente{background:var(--encre-3);color:#fff;box-shadow:none;cursor:progress}
.pot{position:absolute;inset-inline-start:-10000px;width:1px;height:1px;overflow:hidden}

/* Pages légales au style du site (T3bis.1.5) : français et arabe côte à côte */
.legal{padding-block:clamp(36px,5vw,80px) clamp(48px,6vw,96px)}
.legal-t{display:flex;justify-content:space-between;align-items:baseline;gap:10px 32px;flex-wrap:wrap;border-bottom:2px solid var(--encre);padding-bottom:18px}
.legal-t h1{font-size:clamp(30px,3.4vw,52px)}
.legal-t h1[lang="ar"]{font-family:'Noto Kufi Arabic',var(--dis);letter-spacing:0}
.legal-colonnes{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(32px,5vw,96px)}
.legal-col{min-width:0}
.legal-col h2{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--encre-3);margin:30px 0 8px}
.legal-col[dir="rtl"] h2{letter-spacing:0;text-transform:none;font-size:15px;font-family:'Noto Kufi Arabic',sans-serif}
.legal-col p{font-size:16.5px;line-height:1.7;max-width:62ch;color:var(--encre-2)}
.legal-col[dir="rtl"] p{font-family:'Noto Kufi Arabic',sans-serif;font-size:15.5px;line-height:1.9}
.legal-col .valeur{unicode-bidi:plaintext}
/* T6.3.1 — Les conditions generales : la date de mise a jour et le tableau des
   tranches, lues en base et non recopiees. */
.legal-col h3{font-size:15px;font-weight:700;margin:18px 0 8px;color:var(--encre)}
.legal-col[dir="rtl"] h3{font-family:'Noto Kufi Arabic',sans-serif}
.cgv-maj{font-size:14px!important;color:var(--encre-4)!important;margin-top:24px}
.cgv-tranches{list-style:none;margin:0 0 4px;padding:0;max-width:62ch;
  border:1px solid var(--ligne);border-radius:14px;overflow:hidden}
.cgv-tranches li{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding:11px 16px;font-size:15.5px;color:var(--encre-2);border-bottom:1px solid var(--ligne)}
.cgv-tranches li:last-child{border-bottom:0}
.cgv-tranches b{font-variant-numeric:tabular-nums;color:var(--encre);white-space:nowrap}
.legal-col[dir="rtl"] .cgv-tranches li{font-family:'Noto Kufi Arabic',sans-serif;font-size:14.5px}

.legal-autre{display:flex;gap:18px;flex-wrap:wrap;margin-top:40px;padding-top:16px;border-top:1px dashed var(--ligne-2)}
.legal-autre a{color:var(--encre);font-weight:600;text-underline-offset:3px}
@media (max-width:760px){.legal-colonnes{grid-template-columns:1fr}.legal-col[dir="rtl"]{margin-top:30px;border-top:1px dashed var(--ligne-2)}}

/* ======== T6.3.2 — LE PARCOURS, JOUE EN BOUCLE ========
   La section des trois portes montre trois surfaces a un instant donne ;
   celle-ci montre une histoire dans le temps. Douze secondes, puis ca
   recommence : un visiteur qui arrive en cours de route rattrape le tour
   suivant. Tout est en CSS — aucune donnee, aucun appel. */
.parcours{padding-block:clamp(40px,5vw,80px)}
.parcours-scene{display:grid;grid-template-columns:1fr;gap:clamp(28px,4vw,56px);align-items:center;justify-items:center}
@media (min-width:900px){.parcours-scene{grid-template-columns:auto 1fr;justify-items:start}}
.parcours-tel{--tw:clamp(260px,20vw,300px)}
/* Les tours occupent TOUS LA MEME CELLULE de grille : ils se remplacent au
   lieu de s'empiler, sinon le fil grandirait sans fin et sortirait du
   telephone. La grille garde la hauteur du plus grand, ce qu'un
   `position:absolute` aurait fait perdre. */
/* `.wa .fil` pose `display:flex` avec une specificite de deux classes : un
   `.parcours-fil` seul ne la battait pas, et les quatre tours s'empilaient
   au lieu de se remplacer. */
.ecr.wa .parcours-fil{display:grid;align-content:end;overflow:hidden}
.ecr.wa .parcours-fil .p-tour{grid-area:1/1;align-self:end;display:flex;flex-direction:column;gap:.5em;opacity:0}
.joue .p-tour{animation:p-tour 12s var(--ease) infinite;animation-delay:calc(var(--i) * 3s)}
@keyframes p-tour{
  0%{opacity:0;transform:translateY(10px)}
  4%,22%{opacity:1;transform:none}
  26%{opacity:0;transform:translateY(-8px)}
  100%{opacity:0;transform:translateY(-8px)}
}
.p-gagne{background:var(--safran-soft);border:1px solid var(--safran)}
.p-gagne b{color:var(--encre)}

/* Le meme compteur, vu du cote du commerce : les pastilles se posent une par
   une, au rythme des messages. */
.parcours-cote{display:flex;flex-direction:column;gap:clamp(22px,3vw,34px);max-width:460px}
.parcours-rang{display:flex;gap:10px;flex-wrap:wrap}
.parcours-rang i{width:30px;height:30px;border-radius:50%;background:var(--papier);
  box-shadow:inset 0 0 0 1.5px var(--ligne-2);opacity:.45}
.joue .parcours-rang i{animation:p-pose 12s var(--ease) infinite;animation-delay:calc(var(--j) * 1.5s)}
@keyframes p-pose{
  0%{opacity:.45;background:var(--papier);box-shadow:inset 0 0 0 1.5px var(--ligne-2)}
  6%{opacity:1;background:var(--safran);box-shadow:none;transform:scale(1.18)}
  10%,96%{opacity:1;background:var(--safran);box-shadow:none;transform:none}
  100%{opacity:.45;background:var(--papier);box-shadow:inset 0 0 0 1.5px var(--ligne-2)}
}

.parcours-jalons{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:16px;counter-reset:jalon}
.parcours-jalons li{display:flex;flex-direction:column;gap:3px;padding-inline-start:38px;position:relative;opacity:.4;transition:opacity .4s}
.parcours-jalons li::before{counter-increment:jalon;content:counter(jalon);position:absolute;inset-inline-start:0;top:1px;
  width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  background:var(--encre);color:#fff;font-family:var(--dis);font-size:13px;font-weight:700}
.joue .parcours-jalons li{animation:p-jalon 12s var(--ease) infinite;animation-delay:calc(var(--i) * 4s)}
@keyframes p-jalon{0%,2%{opacity:.4}6%,30%{opacity:1}34%,100%{opacity:.4}}
.parcours-jalons b{font-family:var(--dis);font-size:17px;font-weight:700;color:var(--encre)}
.parcours-jalons span{font-size:15px;color:var(--encre-2);line-height:1.5}

/* Moins d'animation demandee : tout se fige a l'etat FINI, pas a l'etat vide —
   une page immobile doit montrer le resultat, pas un ecran blanc. */
@media (prefers-reduced-motion:reduce){
  .joue .p-tour,.joue .parcours-rang i,.joue .parcours-jalons li{animation:none}
  .p-tour{opacity:1}
  /* Un seul tour visible quand rien ne bouge : le dernier, celui qui gagne. */
  .p-tour:not(.p-fin){display:none}
  .parcours-rang i{opacity:1;background:var(--safran);box-shadow:none}
  .parcours-jalons li{opacity:1}
}