@font-face{font-family:"Awesome Serif";src:url("/polices/AwesomeSerif-Regular.otf") format("opentype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Awesome Serif";src:url("/polices/AwesomeSerif-MediumRegular.otf") format("opentype");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Awesome Serif";src:url("/polices/AwesomeSerif-SemiBoldRegular.otf") format("opentype");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Awesome Serif";src:url("/polices/AwesomeSerif-BoldRegular.otf") format("opentype");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Awesome Serif";src:url("/polices/AwesomeSerifItalic-Regular.otf") format("opentype");font-weight:400;font-style:italic;font-display:swap}
:root{ --titre:"Awesome Serif","Iowan Old Style",Georgia,serif; }

:root{
  --noir:#0a0a0a;--gris:#6e6e6e;--gris2:#9a9a9a;--filet:#e8e8e6;--filet2:#f2f2f0;
  --fond:#fff;--doux:#fafaf9;--surbrillance:#f4f4f2;
  --vert:#2f7d4f;--rouge:#a53535;--orange:#b5731f;--bleu:#3b5bdb;
  --ombre:0 1px 2px rgba(0,0,0,.04),0 8px 24px rgba(0,0,0,.05);
  --barre:56px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
body{font-family:"Inter","Helvetica Neue",Helvetica,Arial,sans-serif;color:var(--noir);background:var(--fond);-webkit-font-smoothing:antialiased;font-size:14.5px}
button,input,select,textarea{font:inherit;color:inherit}
::selection{background:#0a0a0a;color:#fff}

/* ---------- porte ---------- */
#porte{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:var(--fond)}
#porte .boite{width:300px;text-align:center}
#porte img{width:50px;margin-bottom:18px}
#porte .marque{font-size:17px;font-weight:500}
#porte .sub{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--gris2);margin:5px 0 26px}
#porte input{width:100%;padding:12px 14px;margin-bottom:8px;border:1px solid var(--filet);border-radius:6px;font-size:14px;outline:none;transition:border-color .15s}
#porte input:focus{border-color:var(--noir)}
#porte button{width:100%;margin-top:6px;padding:12px;border:none;border-radius:6px;background:var(--noir);color:#fff;font-size:12px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
#porte button:hover{opacity:.85}
#err{color:var(--rouge);font-size:12.5px;margin-top:12px;height:18px}

/* ---------- barre ---------- */
/* Le verre depoli est porte par un calque derriere la barre, pas par la
   barre elle-meme : un backdrop-filter force sa propre couche de
   composition, et les menus qui debordent en dessous se retrouvaient
   peints sous le contenu de la page. Le rendu est identique. */
.barre{position:fixed;top:0;left:0;right:0;height:var(--barre);border-bottom:1px solid var(--filet);display:flex;align-items:center;gap:18px;padding:0 18px;z-index:40}
.barre::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(255,255,255,.9);backdrop-filter:saturate(180%) blur(12px)}
.barre .id{display:flex;align-items:center;gap:10px;flex:none}
.barre .id img{width:26px}
.barre .id b{font-size:14px;font-weight:500;line-height:1.1;display:block}
.barre .id span{font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--gris2)}
.onglets{display:flex;gap:4px;flex:1;min-width:0}
.onglet{padding:6px 12px;border:none;background:none;border-radius:6px;font-size:13.5px;color:var(--gris);cursor:pointer;white-space:nowrap}
.onglet:hover{background:var(--surbrillance);color:var(--noir)}
.onglet.on{background:var(--noir);color:#fff}
.actions{display:flex;align-items:center;gap:8px;flex:none}
.btn{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border:1px solid var(--filet);border-radius:6px;background:#fff;font-size:13px;color:var(--gris);cursor:pointer;text-decoration:none;transition:.15s}
.btn:hover{border-color:#ccc;color:var(--noir)}
.btn.primaire{background:var(--noir);color:#fff;border-color:var(--noir)}
.btn.primaire:hover{opacity:.85;color:#fff}
.moi{font-size:12.5px;color:var(--gris2);padding:0 4px}

/* ---------- accueil ---------- */
main.accueil{padding:52px 26px 60px;max-width:860px;margin:0 auto}
main.accueil h1{font-size:30px;font-weight:300;letter-spacing:-.02em;margin:0 0 8px}
main.accueil .intro{font-size:15px;color:var(--gris);margin:0 0 30px;max-width:58ch;line-height:1.65}
main.accueil .grille{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:14px}
main.accueil .carte{display:block;border:1px solid var(--filet);border-radius:10px;padding:20px;text-decoration:none;color:inherit;background:#fff;transition:.16s}
main.accueil .carte:hover{border-color:#d2d2d0;box-shadow:var(--ombre);transform:translateY(-1px)}
main.accueil .carte .h{font-size:17px;font-weight:500;margin-bottom:7px}
main.accueil .carte .d{font-size:13.5px;color:var(--gris);line-height:1.6}
a.id{text-decoration:none;color:inherit}

/* la marque, sur la page de connexion */
#porte .marque{font-family:var(--titre);font-size:23px;font-weight:600;letter-spacing:-.01em;margin-bottom:26px}