/* Page "Mon compte" — mêmes couleurs que l'administration (thème Punchy). */
:root{--encre:#1d1838;--doux:#6f6a86;--trait:#e6e1f4;--violet:#7259ed;--rose:#ef4f83;--corail:#ff8a4c;--menthe:#21b7c8;--rouge:#d9466d;--fond:#17152f}
*{box-sizing:border-box}
html,body{min-height:100%}
body{margin:0;min-height:100vh;display:grid;place-items:center;padding:28px 16px;color:var(--encre);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;line-height:1.5;
  background:radial-gradient(circle at 78% 18%,#9b43c9 0,#4f36b8 32%,#241b54 66%,#17152f 100%);overflow-x:hidden}
.hidden{display:none!important}

.fond{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.bulle{position:absolute;border-radius:50%;filter:blur(2px);opacity:.55}
.b1{width:420px;height:420px;left:-140px;top:-120px;background:radial-gradient(circle,#ff8a4c55,transparent 70%)}
.b2{width:520px;height:520px;right:-200px;bottom:-220px;background:radial-gradient(circle,#21b7c84d,transparent 70%)}
.b3{width:260px;height:260px;right:12%;top:8%;background:radial-gradient(circle,#ef4f8355,transparent 70%)}

.cadre{position:relative;z-index:1;width:min(440px,100%)}
.marque{display:flex;align-items:center;gap:11px;margin:0 0 18px 4px;color:#fff}
.marque-logo{display:grid;place-items:center;width:40px;height:40px;border-radius:13px;font-weight:950;color:#fff;
  background:linear-gradient(145deg,#ff9d4d,#ff4f86 52%,#7259ed);box-shadow:0 10px 28px #ff5d8245}
.marque b{display:block;font-size:16px;letter-spacing:-.03em}
.marque small{display:block;color:#cfc4ef;font-size:11px}

.carte{padding:28px 26px;border-radius:24px;background:#fff;box-shadow:0 30px 80px #0d0a2466}
.pastille{display:inline-block;padding:5px 10px;border-radius:999px;color:var(--violet);background:#eeeaff;font-size:11px;font-weight:850}
h1{margin:14px 0 6px;font-size:27px;line-height:1.15;letter-spacing:-.04em}
.intro{margin:0 0 20px;color:var(--doux);font-size:14px}
.intro b{color:var(--encre);word-break:break-all}
label{display:block;margin:14px 0 7px;color:#524c6b;font-size:12px;font-weight:800}
input{width:100%;padding:13px 14px;border:1px solid var(--trait);border-radius:13px;background:#faf9fe;color:var(--encre);font:inherit;font-size:15px;outline:none;transition:border-color .15s,box-shadow .15s,background .15s}
input:focus{border-color:#8069eb;box-shadow:0 0 0 4px #ece8ff;background:#fff}
.champ-mdp{position:relative}
.champ-mdp input{padding-right:84px}
.voir{position:absolute;right:8px;top:50%;transform:translateY(-50%);border:0;background:transparent;color:var(--violet);font:inherit;font-size:12px;font-weight:800;padding:8px;cursor:pointer}

.force{height:6px;margin-top:9px;border-radius:999px;background:#eeeaf5;overflow:hidden}
.force i{display:block;height:100%;width:0;border-radius:999px;transition:width .35s cubic-bezier(.2,.8,.2,1),background .35s}
.force i.f0{background:#d9466d}.force i.f1{background:#ff8a4c}.force i.f2{background:#e3b52c}.force i.f3{background:#21b7c8}.force i.f4{background:linear-gradient(90deg,#21b7c8,#7259ed)}
.force-texte{margin-top:5px;color:var(--doux);font-size:11.5px}

.message{min-height:20px;margin-top:12px;color:var(--rouge);font-size:13px;font-weight:700}
.bouton{position:relative;display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;margin-top:6px;padding:14px 18px;
  border:0;border-radius:14px;color:#fff;font:inherit;font-size:15px;font-weight:850;text-decoration:none;cursor:pointer;
  background:linear-gradient(110deg,#7259ed,#a849cf 60%,#ef4f83);box-shadow:0 12px 26px #7259ed40;transition:transform .15s,box-shadow .15s,filter .15s}
.bouton:hover{transform:translateY(-1px);box-shadow:0 16px 32px #7259ed55}
.bouton:active{transform:translateY(1px) scale(.99)}
.bouton:disabled{cursor:wait;opacity:.8}
.bouton.secondaire{justify-content:center;color:var(--encre);background:#f3f0fb;box-shadow:none}
.bouton.secondaire:hover{background:#ebe6fa}
.bouton.occupe span{visibility:hidden}
.bouton.occupe::after{content:"";position:absolute;left:50%;top:50%;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;border:2px solid #ffffff55;border-top-color:#fff;animation:tourne .7s linear infinite}
.fleche{transition:transform .2s}
.bouton:hover .fleche{transform:translateX(3px)}
.retour{display:block;margin-top:16px;color:var(--doux);font-size:13px;text-align:center;text-decoration:none}
.retour:hover{color:var(--violet)}
.liens{display:grid;gap:8px}

.illustration{display:grid;place-items:center;width:74px;height:74px;margin-bottom:4px;border-radius:24px;font-size:34px;color:#fff;
  background:linear-gradient(145deg,#7259ed,#ef4f83);box-shadow:0 14px 30px #7259ed45}
.sablier{background:linear-gradient(145deg,#ff8a4c,#d9466d)}
.coche{width:78px;height:78px;margin-bottom:2px}
.coche circle{fill:none;stroke:#21b7c8;stroke-width:3}
.coche path{fill:none;stroke:#7259ed;stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.pied{margin:16px 6px 0;color:#cfc4ef;font-size:11.5px;text-align:center}

@keyframes tourne{to{transform:rotate(360deg)}}

@media (prefers-reduced-motion:no-preference){
  .b1{animation:derive 16s ease-in-out infinite alternate}
  .b2{animation:derive 21s ease-in-out infinite alternate-reverse}
  .b3{animation:derive 13s ease-in-out infinite alternate}
  .carte.entree{animation:monte .55s cubic-bezier(.2,.8,.2,1) both}
  .carte.entree h1,.carte.entree .intro,.carte.entree label,.carte.entree .champ-mdp,.carte.entree input,.carte.entree .bouton{animation:monte .55s cubic-bezier(.2,.8,.2,1) both}
  .carte.entree .intro{animation-delay:.05s}
  .carte.entree label,.carte.entree input,.carte.entree .champ-mdp{animation-delay:.1s}
  .carte.entree .bouton{animation-delay:.15s}
  .carte.secoue{animation:secoue .4s ease}
  .carte.entree .coche circle{stroke-dasharray:152;stroke-dashoffset:152;animation:trace .7s ease-out .1s forwards}
  .carte.entree .coche path{stroke-dasharray:40;stroke-dashoffset:40;animation:trace .4s ease-out .7s forwards}
  .carte.entree .coche{animation:rebond .5s cubic-bezier(.3,1.6,.5,1) 1s both}
  .enveloppe span{display:inline-block;animation:vole 2.2s ease-in-out infinite}
  .sablier span{display:inline-block;animation:bascule 2.4s ease-in-out infinite}
  .marque-logo{animation:pulse 3.5s ease-in-out infinite}
}
@keyframes derive{to{transform:translate(60px,40px) scale(1.08)}}
@keyframes monte{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes secoue{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
@keyframes trace{to{stroke-dashoffset:0}}
@keyframes rebond{0%{transform:scale(1)}50%{transform:scale(1.12)}100%{transform:scale(1)}}
@keyframes vole{0%,100%{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-6px) rotate(6deg)}}
@keyframes bascule{0%,40%{transform:rotate(0)}50%,90%{transform:rotate(180deg)}100%{transform:rotate(360deg)}}
@keyframes pulse{50%{box-shadow:0 10px 34px #ff5d8270}}

@media (max-width:480px){.carte{padding:24px 20px}h1{font-size:24px}}