:root{
  --cuivre:#CC7033; --cuivre-fonce:#A9561F; --cuivre-clair:#E3945B;
  --texte:#342419; --texte-doux:#7A6A5E; --fond:#FBFAF9; --carte:#fff; --trait:#EDE6E0;
  --titre:'Forum',Georgia,serif; --corps:'Source Sans 3','Source Sans Pro',system-ui,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{background:var(--fond);color:var(--texte);font:17px/1.55 var(--corps);display:flex;flex-direction:column;min-height:100vh;-webkit-font-smoothing:antialiased}
[hidden]{display:none!important}

.bandeau{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:calc(12px + env(safe-area-inset-top)) clamp(18px,5vw,56px) 12px;
  background:
    radial-gradient(120% 220% at 15% 0%,rgba(255,255,255,.20),transparent 55%),
    radial-gradient(90% 200% at 90% 100%,rgba(90,40,10,.28),transparent 60%),
    linear-gradient(115deg,#D9803F 0%,#CC7033 45%,#B85F26 100%);
  box-shadow:0 2px 14px rgba(120,60,20,.25);
}
.bandeau .logo{height:84px;width:auto;display:block;filter:drop-shadow(0 2px 5px rgba(80,35,5,.45))}
.bandeau-droite{display:flex;align-items:center;gap:18px;color:#fff;font-size:15px}
.qui{opacity:.92}
.lien-blanc{background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.45);color:#fff;font:600 14px var(--corps);padding:8px 16px;border-radius:999px;cursor:pointer;transition:background .2s}
.lien-blanc:hover{background:rgba(255,255,255,.28)}

main{flex:1;width:100%}
.centre{display:flex;align-items:center;justify-content:center;padding:clamp(28px,6vw,72px) 18px}
.carte{background:var(--carte);border-radius:22px;box-shadow:0 10px 40px rgba(52,36,25,.09);border:1px solid var(--trait)}
.carte-login{width:100%;max-width:440px;padding:clamp(26px,5vw,44px)}
.sur-titre{margin:0 0 8px;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--cuivre);font-weight:600}
h1{font:400 clamp(30px,5vw,44px)/1.12 var(--titre);margin:0 0 10px;color:var(--texte)}
h2{font:400 24px/1.2 var(--titre);margin:18px 0 6px}
.intro{margin:0 0 22px;color:var(--texte-doux)}
label{display:block;font-size:14px;font-weight:600;margin:16px 0 6px}
input{width:100%;font:inherit;padding:13px 15px;border:1px solid #DDD2C9;border-radius:12px;background:#FFFEFD;color:var(--texte);transition:border-color .2s,box-shadow .2s}
input:focus{outline:none;border-color:var(--cuivre);box-shadow:0 0 0 4px rgba(204,112,51,.16)}
.bouton{width:100%;margin-top:22px;padding:14px 18px;border:0;border-radius:999px;font:600 17px var(--corps);color:#fff;cursor:pointer;background:linear-gradient(135deg,#D9803F,#B85F26);box-shadow:0 6px 18px rgba(184,95,38,.32);transition:transform .15s,box-shadow .15s}
.bouton:hover{transform:translateY(-1px);box-shadow:0 9px 22px rgba(184,95,38,.38)}
.bouton:disabled{opacity:.6;cursor:wait;transform:none}
.aide{margin:14px 0 0;font-size:14px;color:var(--texte-doux);text-align:center}
.erreur{margin:14px 0 0;padding:10px 14px;background:#FCEDE7;color:#A33A1B;border-radius:10px;font-size:15px}
.centre-texte{text-align:center;max-width:560px;margin:24px auto 0}

.portail{max-width:1080px;margin:0 auto;padding:clamp(30px,6vw,72px) clamp(18px,5vw,40px) 40px}
.accueil{margin-bottom:34px}
.accueil .intro{margin-bottom:0;font-size:18px}
.tuiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:22px}
.tuile{
  display:flex;flex-direction:column;text-decoration:none;color:inherit;
  background:var(--carte);border:1px solid var(--trait);border-radius:22px;padding:28px 28px 24px;
  box-shadow:0 6px 24px rgba(52,36,25,.07);position:relative;overflow:hidden;cursor:pointer;
  transition:transform .2s,box-shadow .2s,border-color .2s;
}
.tuile::after{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:linear-gradient(90deg,#D9803F,#B85F26);opacity:.9}
.tuile:hover{transform:translateY(-4px);box-shadow:0 16px 38px rgba(184,95,38,.20);border-color:#E7C6AE}
.tuile.charge{opacity:.7;pointer-events:none}
.pastille-old{width:58px;height:58px;border-radius:16px;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,#D9803F,#B85F26);box-shadow:0 6px 16px rgba(184,95,38,.3)}
.pastille svg{width:30px;height:30px}
.tuile p{margin:0 0 20px;color:var(--texte-doux);flex:1}
.ouvrir{font-weight:600;color:var(--cuivre-fonce);display:inline-flex;gap:8px;align-items:center}
.ouvrir i{font-style:normal;transition:transform .2s}
.tuile:hover .ouvrir i{transform:translateX(5px)}
.vide{text-align:center;color:var(--texte-doux);margin-top:30px}
.pied{padding:22px 18px calc(22px + env(safe-area-inset-bottom));text-align:center;font-size:13.5px;color:var(--texte-doux);border-top:1px solid var(--trait)}

@media (max-width:560px){
  .bandeau .logo{height:42px}
  .qui{display:none}
}

.logo-app{width:76px;height:76px;border-radius:20px;display:block;box-shadow:0 6px 18px rgba(52,36,25,.22);border:1px solid var(--trait)}
.logo-login{height:96px;width:auto;display:block;margin:0 auto 14px}
#vue-login .carte-login{text-align:center}
#vue-login form{text-align:left}
@media (max-width:560px){.bandeau .logo{height:62px}}

label.souvenir{display:flex;align-items:center;gap:10px;font-weight:400;font-size:15px;margin:18px 0 0;cursor:pointer;color:var(--texte-doux)}
label.souvenir input{width:20px;height:20px;padding:0;accent-color:var(--cuivre);flex:none}