/* SOSERIM — feuille partagée des pages de l'espace membre connecté (mon-espace, profil,
   cotisations, inscriptions, documents, médiathèque, annuaire, notifications) : socle limité
   aux composants utilisés, puis les composants propres à l'espace.
   Source de vérité des composants partagés : style.css (design system). */
@font-face{font-family:"Poppins";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/poppins-400.woff2) format("woff2")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/poppins-500.woff2) format("woff2")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/poppins-600.woff2) format("woff2")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/poppins-700.woff2) format("woff2")}

:root{
--font:"Poppins",system-ui,sans-serif;
--ink:#221b4e;--body:#4d4966;--muted:#6e6890;
--primary:#4a38a8;--lav50:#f7f5fc;--lav100:#efebf9;--line:#e7e4f1;
--accent:#0b7d91;--accent100:#e0f3f6;
--err:#c2375d;--err50:#fbeef3; /* framboise diluée : fonds des signaux d'échéance, jamais décorative */
--grad:linear-gradient(92deg,#4a38a8,#3f63c9 55%,#129cb5);
--r:16px;--rs:10px;
--sh1:0 1px 2px rgba(34,27,78,.05),0 4px 16px rgba(34,27,78,.07);
--sh2:0 6px 14px rgba(34,27,78,.1),0 18px 44px rgba(34,27,78,.14);
}

/* Base — toile lavande : les panneaux blancs de l'espace s'y détachent */
*{box-sizing:border-box;margin:0}
html{font-size:112.5%;scroll-behavior:smooth} /* 18px : lectorat senior */
body{font:400 1rem/1.65 var(--font);color:var(--body);background:var(--lav50);-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
h1,h2,h3{color:var(--ink);font-weight:700;line-height:1.18;letter-spacing:-.01em;text-wrap:balance}
p{max-width:70ch}
.lead{font-size:1.125rem;color:var(--muted)}
a{color:var(--primary);text-underline-offset:3px}
::selection{background:var(--primary);color:#fff}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.skip{position:absolute;top:-100%;left:0;z-index:30;padding:.6rem 1.2rem;background:var(--primary);color:#fff;border-radius:0 0 var(--rs) 0}
.skip:focus{top:0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap} /* libellé réservé aux lecteurs d'écran */
[hidden]{display:none!important} /* une classe qui déclare son display l'emporterait sinon sur l'attribut */
.wrap{max-width:1350px;margin-inline:auto;padding-inline:clamp(1.25rem,4vw,2.5rem)}
.cy{color:var(--accent)}

/* Navigation : barre collante, ombre fondue dès que la page défile (classe posée par script.js) */
body>header{position:sticky;top:0;z-index:20}
.nav{padding-block:.7rem;background:#fff;border-bottom:1px solid var(--line);transition:box-shadow .3s}
.nav.pose{box-shadow:var(--sh1)}
.nav-in{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:2rem}
.nav-in>.btn{justify-self:end;padding:.6rem 1.4rem}
.nav-logo{display:flex;align-items:center;gap:.65rem;justify-self:start;color:var(--ink);text-decoration:none}
.nav-nom{display:block;font:700 1.15rem/1.15 var(--font);letter-spacing:-.01em}
.nav-nom i{display:block;font:400 .6875rem/1.3 var(--font);font-style:normal;color:var(--muted)}
.nav-logo img{height:48px;width:auto}
.nav-links{display:flex;justify-self:center;position:relative;gap:1.6rem;list-style:none;padding:0}
/* Aucun libellé ne se coupe : « Cours et formations » sur deux lignes ferait grandir la
   barre et désalignerait tout le menu. */
.nav-links a{white-space:nowrap;color:var(--body);text-decoration:none;font-weight:500;font-size:.9375rem;transition:color .25s}
.nav-links a:hover{color:var(--primary)}
/* Filet du menu : trait au dégradé du logo qui glisse d'une entrée à l'autre. Il se cale sous
   l'entrée courante, suit le survol et le focus ; script.js pose sa position et sa largeur. */
.nav-links::after{content:"";position:absolute;left:0;bottom:-.35rem;width:var(--w,0);height:2px;border-radius:2px;background:var(--grad);box-shadow:0 2px 10px rgba(18,156,181,.45);opacity:0;translate:var(--x,0) 0;transition:translate .42s cubic-bezier(.32,.72,0,1),width .42s cubic-bezier(.32,.72,0,1),opacity .3s}
.nav-links.filet::after{opacity:1}
.burger{display:none;flex-direction:column;gap:.32rem;align-items:center;justify-content:center;margin-left:auto;width:2.6rem;height:2.6rem;border:1px solid var(--line);border-radius:50%;background:#fff;cursor:pointer}
.burger i{width:1.1rem;height:2px;background:var(--ink);border-radius:2px}
/* Libellé du bouton de compte : la version courte prend le relais en tablette, où le
   libellé long casserait sur deux lignes dans sa pilule */
.nav .lib{font-size:13px}
.nav .lib-c{display:none}
/* Entre le tiroir et le desktop large, le menu à six entrées se resserre et le bouton de
   compte prend son libellé court */
@media(min-width:1001px) and (max-width:1300px){
.nav .lib{display:none}
.nav .lib-c{display:inline}
.nav-nom i{display:none}
.nav-in{gap:1.2rem}
.nav-links{gap:1rem}
.nav-links a{font-size:.875rem}
}

/* Boutons, liens, métas, icônes */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.8rem 1.6rem;border:1px solid transparent;border-radius:999px;font:600 .9375rem/1 var(--font);letter-spacing:.01em;color:#fff;background:var(--primary);cursor:pointer;text-decoration:none;transition:transform .2s,box-shadow .2s,filter .2s,border-color .2s}
.btn:hover{transform:translateY(-1px);box-shadow:var(--sh2);filter:brightness(1.07)}
.btn:active{transform:none;filter:brightness(.97)}
.btn-a{background:var(--accent)}
.btn-o{background:#fff;color:var(--primary);border-color:var(--line)}
.btn-o:hover{border-color:var(--primary);filter:none}
.btn-disc{display:grid;place-items:center;flex:none;width:1.3rem;height:1.3rem;margin:-.5rem 0 -.5rem -1rem;border-radius:50%;background:rgba(255,255,255,.2)}
.btn-disc .ico,.btn>.ico{width:1.05rem;height:1.05rem}
.link{display:inline-flex;align-items:center;gap:.4rem;font-weight:600;color:var(--primary);text-decoration:none}
.link .ico{transition:translate .2s}
.link:hover .ico{translate:4px 0}
.link-d:hover .ico{translate:0 3px} /* téléchargement : la flèche descend au lieu d'avancer */
.ico{width:1.25rem;height:1.25rem;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* Puces de statut : lavande (neutre), brume cyan (positif), framboise diluée (échéance) */
.chip{display:inline-flex;align-items:center;gap:.4rem;padding:.34rem .8rem;border-radius:999px;background:var(--lav100);color:var(--primary);font-size:.75rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase}
.chip-a{background:var(--accent100);color:#0a7183}
.chip-e{background:var(--err50);color:var(--err)}

/* Fil d'Ariane : chevron dessiné en CSS (ponctuation, pas une icône du set) */
.crumb{padding-block:1.05rem .2rem}
.crumb ol{display:flex;flex-wrap:wrap;align-items:center;gap:.65rem;list-style:none;padding:0;font-size:.875rem}
.crumb li{display:flex;align-items:center;gap:.65rem}
.crumb li+li::before{content:"";width:.32rem;height:.32rem;border-top:1.5px solid var(--muted);border-right:1.5px solid var(--muted);rotate:45deg;translate:0 -1px}
.crumb a{color:var(--muted);text-decoration:none}
.crumb a:hover{color:var(--primary)}
.crumb [aria-current=page]{color:var(--ink);font-weight:600}

/* Espacement vertical commun : chaque bloc de l'espace (bandeau, onglets, tuiles, panneaux)
   descend du même pas ; la page respire en pied avant la barre de mentions */
.esp-main{display:grid;gap:1.1rem;padding-block:.75rem 3.5rem}
/* Les blocs peuvent rétrécir sous leur largeur intrinsèque (min-width:auto des items de
   grille) : sans cela, la barre d'onglets élargit toute la grille et la page déborde en
   mobile au lieu de laisser les onglets défiler dans leur panneau */
.esp-main>*{min-width:0}

/* Bandeau de bienvenue : violet nuit sous halo (la profondeur des fonds sombres passe par
   le halo, jamais par une ombre), signature orbitale filaire à droite, répété sur toutes
   les pages de l'espace. Le « Bonjour » n'est un h1 que sur le tableau de bord. */
.esp{position:relative;isolation:isolate;overflow:hidden;display:grid;gap:.55rem;justify-items:start;padding:clamp(2.1rem,4.5vw,3.2rem) clamp(1.5rem,3.5vw,3rem);background:radial-gradient(46rem 30rem at 80% -30%,#3a2c86,transparent 70%),var(--ink);border-radius:var(--r);color:#c9c2e8}
.esp-orb{position:absolute;z-index:-1;inset:0 0 0 auto;width:min(44rem,74%);height:100%}
.esp-k{display:flex;align-items:center;gap:.55rem;font:600 .75rem/1.4 var(--font);letter-spacing:.14em;text-transform:uppercase;color:#5fd0e4}
.esp-k .ico{width:1.05rem;height:1.05rem}
.esp-t{font:700 clamp(1.85rem,4vw,2.9rem)/1.12 var(--font);letter-spacing:-.01em;color:#fff;text-wrap:balance} /* plancher mobile : un cran sous le h1 public */
.esp>p{max-width:54ch}
/* Déconnexion en pilule fantôme : le motif des actions secondaires sur fond sombre du site
   (bande adhésion, réseaux du footer) — repérable sans concurrencer les vraies actions */
.esp-out{position:absolute;top:1.35rem;right:1.5rem;display:inline-flex;align-items:center;gap:.45rem;padding:.55rem 1.05rem;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.4);border-radius:999px;font:600 .875rem/1 var(--font);color:#fff;text-decoration:none;transition:background .2s,border-color .2s}
.esp-out:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.65)}
.esp-out .ico{width:1.05rem;height:1.05rem}
.esp :focus-visible{outline-color:#5fd0e4} /* le cyan du système tomberait à 3,2:1 sur ce fond */

/* Barre d'onglets : la navigation de l'espace — panneau blanc, onglet courant violet sur voile
   lavande, filet 2 px en pied. Elle défile horizontalement quand la place manque. */
.tabs{background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh1)}
.tabs ul{display:flex;list-style:none;padding:0;overflow-x:auto;scrollbar-width:thin;border-radius:var(--r)}
.tab{display:flex;align-items:center;gap:.5rem;padding:1rem 1.1rem;border-bottom:2px solid transparent;font:600 .9375rem/1 var(--font);color:var(--body);text-decoration:none;white-space:nowrap;transition:color .2s}
.tab .ico{width:1.1rem;height:1.1rem}
.tab:hover{color:var(--primary)}
.tab[aria-current=page]{color:var(--primary);background:var(--lav50);border-color:var(--primary)}

/* Panneau : bloc de contenu blanc. En-tête : pastille d'icône, titre, action à droite. */
.pan{padding:clamp(1.5rem,3vw,2.1rem);background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh1)}
.pan-head{display:flex;flex-wrap:wrap;align-items:center;gap:.9rem}
.pan-head :is(h1,h2){font-size:1.3rem}
.pan-head .pic{width:2.6rem;height:2.6rem}
.pan-head>:is(a,.link){margin-left:auto}
.pan-lead{margin-top:.55rem;font-size:.9375rem;color:var(--muted)}
.pan-t{margin-top:1.6rem;font-size:1.05rem} /* sous-titre de groupe dans un panneau */
/* Pastilles d'icône : lavande/violet par défaut dans tout l'espace ; la brume cyan marque
   l'accompli ou le positif, le blanc/framboise reste à la bande prioritaire */
.pic{display:grid;place-items:center;flex:none;border-radius:50%;background:var(--lav100);color:var(--primary)}
.pic-a{background:var(--accent100);color:var(--accent)}

/* Tuiles chiffrées : l'état du compte en un regard, chaque tuile mène à son onglet */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,13.5rem),1fr));gap:1.1rem;list-style:none;padding:0}
.kpi{display:grid;align-content:start;gap:.7rem;padding:1.3rem 1.35rem;background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh1);color:inherit;text-decoration:none;transition:transform .25s,box-shadow .25s}
.kpi:hover{transform:translateY(-4px);box-shadow:var(--sh2)}
.kpi-t{display:flex;align-items:center;gap:.7rem;font:600 .9375rem/1.3 var(--font);color:var(--ink)}
.kpi-t .pic{width:2.5rem;height:2.5rem}
.kpi>b{font-size:clamp(1.9rem,2.6vw,2.4rem);font-weight:700;line-height:1;letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums}
.kpi>b small{font-size:.5em;font-weight:600;letter-spacing:0} /* unité monétaire, jamais à l'échelle du chiffre */
.kpi-m{display:flex;align-items:center;justify-content:space-between;gap:.6rem;font-size:.875rem;color:var(--muted)}
.kpi-m .ico{width:1.1rem;height:1.1rem;transition:translate .2s}
.kpi:hover .kpi-m .ico{translate:4px 0}
.kpi-m.due{color:var(--err);font-weight:600} /* échéance : le seul signal framboise des tuiles */

/* Bande prioritaire : l'urgence du moment sur voile framboise — la distinction passe par le
   fond, la pastille et la puce, jamais par une barre latérale colorée (bordure neutre 1 px). */
.prio{display:grid;grid-template-columns:auto 1fr auto;gap:1rem 1.3rem;align-items:center;padding:1.35rem clamp(1.35rem,3vw,1.9rem);background:var(--err50);border:1px solid var(--line);border-radius:var(--r)}
.prio>.pic{width:3rem;height:3rem;background:#fff;color:var(--err)}
.prio-txt{display:grid;gap:.3rem}
.prio-txt h2{display:flex;flex-wrap:wrap;align-items:center;gap:.65rem;font-size:1.15rem}
.prio .chip-e{background:#fff}
.prio-txt p{font-size:.9375rem}
.prio-txt b{color:var(--ink)}
.pan>.prio{margin-top:1.3rem} /* la cotisation à régler se pose dans le panneau, pas à côté */
.prio-d{display:grid;gap:.55rem;justify-items:end;text-align:right}
.prio-d b{font-size:1.45rem;line-height:1.1;color:var(--ink)}
.prio-d span{font-size:.875rem;color:var(--muted)}

/* Lignes de liste : documents, notifications, historique, dossiers — rangées sur filets */
.rows{display:grid;list-style:none;padding:0;margin-top:.4rem}
.rows>li{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem 1.1rem;padding-block:1.05rem}
.rows>li+li{border-top:1px solid var(--line)}
.rows .pic{width:2.5rem;height:2.5rem}
.row-txt{flex:1;min-width:min(100%,14rem);display:grid;gap:.1rem}
.row-txt b{font-weight:600;color:var(--ink)}
.row-txt span{font-size:.875rem;color:var(--muted)}
.rows .link,.rows .btn,.rows .chip{margin-left:auto}
.rows .chip+:is(.link,.btn){margin-left:0} /* la puce d'état et son action restent accolées à droite */

/* Cases d'information (profil) : libellé en capitales, valeur encrée, sur voile lavande */
.infos{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:1.5rem}
.info{display:grid;gap:.25rem;padding:1rem 1.15rem;background:var(--lav50);border-radius:var(--rs)}
.info span{font:600 .72rem/1.4 var(--font);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.info b{font-weight:600;color:var(--ink);overflow-wrap:anywhere}

/* Identité : avatar à initiales (violet du système, 8,7:1 sous ses initiales blanches) ;
   la variante lavande sert aux confrères de l'annuaire, le violet plein reste au titulaire */
.avat{display:grid;place-items:center;flex:none;width:3.6rem;height:3.6rem;border-radius:50%;background:var(--primary);color:#fff;font:700 1.15rem var(--font);letter-spacing:.02em}
.avat-s{width:2.6rem;height:2.6rem;font-size:.9375rem}
.avat-l{background:var(--lav100);color:var(--primary)}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.8rem}
.ident{display:flex;align-items:center;gap:1rem;margin-top:1.5rem}
.ident b{font-size:1.15rem;color:var(--ink)}
.ident p{font-size:.9375rem;color:var(--muted)}

/* Formulaire de recherche (annuaire) : champs du design system en rangée */
.field{display:grid;gap:.4rem}
.field>label{font-size:.9375rem;font-weight:600;color:var(--ink)}
.input{width:100%;padding:.7rem 1rem;background:#fff;border:1px solid var(--line);border-radius:var(--rs);font:inherit;color:var(--ink);transition:border-color .2s,box-shadow .2s}
.input::placeholder{color:var(--muted)}
.input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--lav100)}
select.input{appearance:none;padding-right:2.6rem;background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%234a38a8" stroke-width="2" stroke-linecap="round"><path d="m6 9 6 6 6-6"/></svg>') no-repeat right 1rem center/1em}
.srch{display:grid;grid-template-columns:1.6fr 1fr 1fr auto;gap:1rem;align-items:end;margin-top:1.5rem}
.srch .btn{padding-block:1.02rem} /* le bouton affleure la hauteur des champs qu'il accompagne */

/* Fiches confrères : cartes blanches posées sur la toile lavande, jamais dans un panneau */
.dirs{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,15.5rem),1fr));gap:1.1rem;list-style:none;padding:0}
.dir{display:grid;gap:.9rem;padding:1.3rem;background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh1)}
.dir-id{display:flex;align-items:center;gap:.8rem}
.dir-id b{color:var(--ink);line-height:1.3}
.dir-id p{font-size:.875rem;color:var(--muted)}
.dir-l{display:grid;gap:.3rem;padding-top:.9rem;border-top:1px solid var(--line)}
.dir-l a{display:flex;align-items:center;gap:.5rem;font-size:.875rem;font-weight:500;text-decoration:none}
.dir-l .ico{width:1rem;height:1rem;color:var(--accent)}

/* Cartes médiathèque : vignette bord à bord fin (motif des lignes du programme), puce de type,
   pastille de lecture sur les replays — le cyan d'action au survol */
/* Fil des dossiers : il dit où l'on est dans la médiathèque, et chaque marche ramène en
   arrière. La dernière n'est pas cliquable — on y est déjà. */
.med-bar{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem;margin-bottom:1rem}
.med-bar .med-fil{margin-bottom:0}
/* Bascule d'affichage : deux boutons dans une même coque, celui en cours est rempli */
.vues{display:flex;gap:.2rem;margin-left:auto;padding:.2rem;border:1px solid var(--line);border-radius:999px;background:#fff}
.vue{display:grid;place-items:center;width:2.1rem;height:2.1rem;border:0;border-radius:50%;background:none;color:var(--muted);cursor:pointer;transition:background .2s,color .2s}
.vue:hover{color:var(--primary)}
.vue.on{background:var(--lav100);color:var(--primary)}
.vue .ico{width:1.1rem;height:1.1rem}
.med-fil{display:flex;flex-wrap:wrap;align-items:center;gap:.3rem;margin-bottom:1rem;font-size:.875rem}
.med-pas{padding:.25rem .4rem;border:0;border-radius:var(--rs);background:none;color:var(--muted);font:500 .875rem var(--font);cursor:pointer;transition:background .2s,color .2s}
button.med-pas:hover{background:var(--lav100);color:var(--primary)}
.med-ici{color:var(--ink);font-weight:600;cursor:default}
.med-sep{color:#bfb8d8}

.meds{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,16rem),1fr));gap:1.1rem;list-style:none;padding:0}
/* La carte occupe toute sa case : un bouton, laissé à lui-même, se règle sur son propre
   texte et sort plus étroit que la carte voisine. */
.meds>li{display:grid}
/* Un dossier est un bouton, pas un lien : il ne mène pas ailleurs, il ouvre ici même. */
.med-d{text-align:left;font:inherit;cursor:pointer}
.med-d .med-cov{background:var(--lav100);color:var(--primary)}
button.med{border:1px solid var(--line);font:inherit;text-align:left;cursor:pointer}
button.med:disabled{opacity:.55;cursor:not-allowed;box-shadow:none;transform:none}

/* Affichage en tableau : les mêmes dossiers et documents, en lignes, pour parcourir vite. */
.tbl{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.tbl th{padding:.85rem 1rem;text-align:left;font-size:.75rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);background:var(--lav50);border-bottom:1px solid var(--line)}
.tbl td{padding:.85rem 1rem;font-size:.9375rem;color:var(--body);vertical-align:middle}
.tbl tbody tr+tr td{border-top:1px solid var(--line)}
.tbl tbody tr:hover{background:var(--lav50)}
.tbl-n{display:inline-flex;align-items:center;gap:.7rem;padding:0;border:0;background:none;font:600 .9375rem var(--font);color:var(--ink);text-align:left;text-decoration:none;cursor:pointer;transition:color .2s}
.tbl-n:hover{color:var(--primary)}
.tbl-n .ico{width:1.2rem;height:1.2rem;color:var(--primary);flex:none}
.tbl-n[disabled]{opacity:.55;cursor:not-allowed}
.tbl td:last-child{text-align:right;white-space:nowrap}

/* Lecteur : le document s'ouvre par-dessus la page, dans le cadre de son hébergeur. */
.lec{position:fixed;inset:0;z-index:40;display:grid;place-items:center;padding:1.5rem;background:rgba(34,27,78,.6);animation:pay-voile .2s ease-out both}
.lec-in{position:relative;display:flex;flex-direction:column;width:min(100%,64rem);height:min(100%,44rem);padding:1.4rem 1.5rem 1.5rem;background:#fff;border-radius:var(--r);box-shadow:var(--sh2);animation:pay-boite .3s cubic-bezier(.32,.72,0,1) both}
.lec-in h2{padding-right:2.5rem;font-size:1.2rem}
.lec-x{position:absolute;right:.7rem;top:.7rem;display:grid;place-items:center;width:2.2rem;height:2.2rem;border:0;border-radius:50%;background:none;color:var(--muted);cursor:pointer;transition:background .2s,color .2s}
.lec-x:hover{background:var(--lav50);color:var(--ink)}
.lec-x .ico{width:1.15rem;height:1.15rem}
.lec-c{position:relative;display:grid;place-items:center;flex:1;margin-top:1rem;border:1px solid var(--line);border-radius:var(--rs);background:var(--lav50);overflow:hidden}
.lec-c iframe{width:100%;height:100%;border:0}
/* L'hébergeur met quelques secondes à composer la présentation : on le dit, plutôt que
   de laisser un cadre blanc. Le voile part au chargement du document. */
.lec-att{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:.9rem;background:var(--lav50);font-size:.9375rem;color:var(--muted)}
.lec-att i{width:2.1rem;height:2.1rem;border:2px solid var(--lav100);border-top-color:var(--primary);border-radius:50%;animation:spin .8s linear infinite}
.lec-err{padding:1.5rem;font-size:.9375rem;color:var(--err);text-align:center}
.lec-lien{align-self:flex-start;margin-top:.9rem;font-size:.9375rem}

@media(max-width:600px){
.lec{padding:.8rem}
.lec-in{padding:1.2rem 1rem 1rem}
}
.med{display:flex;flex-direction:column;gap:.55rem;padding:.55rem .55rem 1.05rem;background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh1);color:inherit;text-decoration:none;transition:transform .25s,box-shadow .25s}
.med:hover{transform:translateY(-4px);box-shadow:var(--sh2)}
.med-cov{position:relative;aspect-ratio:16/9;border-radius:calc(var(--r) - 6px);overflow:hidden;background:var(--lav100)}
.med-cov img{width:100%;height:100%;object-fit:cover}
.med-play{position:absolute;top:50%;left:50%;translate:-50% -50%;display:grid;place-items:center;width:2.8rem;height:2.8rem;background:rgba(34,27,78,.45);border:1px solid rgba(255,255,255,.5);border-radius:50%;color:#fff;transition:background .25s,border-color .25s,scale .25s}
.med-play .ico{width:1.2rem;height:1.2rem}
.med:hover .med-play{background:var(--accent);border-color:transparent;scale:1.08}
.med-txt{display:grid;gap:.3rem;justify-items:start;padding:.35rem .6rem 0}
.med-txt h2{font-size:1rem;line-height:1.35}
.med-txt span{font-size:.875rem;color:var(--muted)}

/* Entrée en scène au chargement : les deux blocs sous le bandeau montent en cascade. Le
   bandeau, identique sur toutes les pages de l'espace, reste immobile : le rejouer à chaque
   navigation d'onglet donnerait l'impression que la page entière se reconstruit. */
.esp-main>:nth-child(2),.esp-main>:nth-child(3){animation:rise .8s cubic-bezier(.16,1,.3,1) backwards}
.esp-main>:nth-child(3){animation-delay:.12s}
@keyframes rise{from{opacity:0;translate:0 22px}}

/* Pied de page réduit à la barre de mentions : l'espace est un lieu de travail, la vitrine
   (lettre d'information, colonnes de liens) reste sur les pages publiques. */
.ft{background:var(--ink);color:#c9c2e8}
.ft a{color:#c9c2e8;text-decoration:none;transition:color .2s}
.ft a:hover{color:#fff}
.ft :focus-visible{outline-color:#5fd0e4} /* le cyan du système tomberait à 3,2:1 sur ce fond */
.ft-base-in{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem 1.8rem;padding-block:1.3rem;font-size:.875rem}
.ft-base ul{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;list-style:none;padding:0}

/* États d'échange avec le serveur — reprise du design system (style.css n'est chargé par
   aucune page servie). Attente pendant un appel, échec de saisie, liste vide. */
.btn[aria-busy=true]{pointer-events:none;opacity:.85}
.btn[aria-busy=true]::before{content:"";width:.95em;height:.95em;border:2px solid rgba(255,255,255,.45);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{rotate:1turn}}
.field.err .input{border-color:var(--err)}
.field.err .input:focus{box-shadow:0 0 0 3px #f7dee5}
.err-msg{font-size:.85rem;font-weight:600;color:var(--err)}
.empty{display:grid;justify-items:center;gap:.6rem;padding:3rem 2rem;border:1px dashed var(--line);border-radius:var(--r);background:var(--lav50);text-align:center;color:var(--muted)}
.empty .ico{width:1.8rem;height:1.8rem;color:var(--primary)}
.empty b{color:var(--ink)}
/* Panneau en cours de chargement : le contenu reste en place, il s'éteint le temps de l'appel */
[aria-busy=true] .rows,[aria-busy=true] .meds,[aria-busy=true] .dirs{opacity:.45;transition:opacity .2s}
/* Choix du moyen de paiement : il prend la place du bouton, dans la colonne de droite */
/* Paiement mobile : les codes à scanner, dans une boîte qui couvre la page. Le règlement
   se fait sur le téléphone, hors du site — la boîte ne fait que montrer où payer. */
.pay{position:fixed;inset:0;z-index:40;display:grid;place-items:center;padding:1.5rem;background:rgba(34,27,78,.55);animation:pay-voile .2s ease-out both}
.pay-in{position:relative;width:min(100%,38rem);max-height:88%;overflow-y:auto;padding:1.9rem 1.8rem 1.6rem;background:#fff;border-radius:var(--r);box-shadow:var(--sh2);animation:pay-boite .3s cubic-bezier(.32,.72,0,1) both}
.pay-in h2{font-size:1.35rem}
.pay-m{margin-top:.3rem;font-size:1.5rem;font-weight:700;color:var(--primary);font-variant-numeric:tabular-nums}
.pay-x{position:absolute;right:.7rem;top:.7rem;display:grid;place-items:center;width:2.2rem;height:2.2rem;border:0;border-radius:50%;background:none;color:var(--muted);cursor:pointer;transition:background .2s,color .2s}
.pay-x:hover{background:var(--lav50);color:var(--ink)}
.pay-x .ico{width:1.15rem;height:1.15rem}
.pay-l{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:1.4rem}
.pay-c{display:grid;justify-items:center;gap:.5rem;padding:1.1rem 1rem;border:1px solid var(--line);border-radius:var(--r);background:var(--lav50);text-align:center}
.pay-c h3{font-size:1rem}
/* Le code sur fond blanc quoi qu'il arrive : une application de scan lit mal un code
   posé sur une teinte, et la capture déposée peut déjà en porter une. */
.pay-c img{width:100%;max-width:13rem;aspect-ratio:1;object-fit:contain;padding:.5rem;background:#fff;border-radius:var(--rs)}
.pay-n{font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.pay-g{font-size:.8125rem;color:var(--muted)}
.pay-f{margin-top:1.2rem;padding-top:1rem;border-top:1px solid var(--line);font-size:.8125rem;color:var(--muted)}
.pay .empty{grid-column:1/-1}

@keyframes pay-voile{from{opacity:0}}
@keyframes pay-boite{from{opacity:0;transform:translateY(12px) scale(.97)}}

@media(max-width:600px){
.pay{padding:.9rem}
.pay-in{padding:1.5rem 1.2rem 1.3rem}
.pay-l{grid-template-columns:1fr}
}
/* Vignette absente : la médiathèque garde son rythme, la pastille de catégorie tient le cadre */
.med-cov.vide{display:grid;place-items:center;color:var(--primary)}
.med-cov.vide .ico{width:2rem;height:2rem}
/* Portrait rond : l'avatar accueille aussi une photo, qui se recadre au lieu de s'étirer */
img.avat{object-fit:cover}

/* Menu en tiroir (tablette et mobile) : le panneau glisse de la droite sous un voile encre, le
   burger se mue en croix et reste cliquable par-dessus, le bouton de compte se cale au pied. */
@media(max-width:1000px){
.nav-in{display:flex;justify-content:space-between}
.burger{display:flex;position:relative;z-index:23}
.burger i{transition:translate .3s,rotate .3s,opacity .2s}
.nav.open .burger i:nth-child(1){translate:0 .43rem;rotate:45deg}
.nav.open .burger i:nth-child(2){opacity:0}
.nav.open .burger i:nth-child(3){translate:0 -.43rem;rotate:-45deg}
.nav::before{content:"";position:fixed;inset:0;z-index:21;background:rgba(34,27,78,.42);opacity:0;pointer-events:none;transition:opacity .35s}
.nav.open::before{opacity:1;pointer-events:auto} /* un clic sur le voile referme (script.js) */
.nav-links,.nav-in>.btn{position:fixed;z-index:22;transition:translate .42s cubic-bezier(.32,.72,0,1)}
.nav-links{inset:0 0 0 auto;width:min(20rem,85vw);display:grid;align-content:start;gap:.35rem;padding:5.2rem 1.6rem 7.5rem;background:#fff;box-shadow:var(--sh2);overflow-y:auto;translate:100% 0}
.nav-links::after{display:none} /* le filet suit une rangée horizontale : sans objet dans le tiroir */
.nav-links a{display:block;padding:.85rem .9rem;border-radius:var(--rs);font-size:1.05rem;font-weight:600;color:var(--ink)}
.nav-links a:hover{background:var(--lav50)}
.nav-links li{opacity:0;translate:12px 0;transition:opacity .25s,translate .25s}
.nav-in>.btn{display:inline-flex;right:1.6rem;bottom:1.6rem;width:calc(min(20rem,85vw) - 3.2rem);translate:calc(100% + 1.6rem) 0}
.nav.open :is(.nav-links,.nav-in>.btn){translate:0 0}
.nav.open .nav-links li{opacity:1;translate:0 0}
.nav.open .nav-links li:nth-child(1){transition-delay:.1s}
.nav.open .nav-links li:nth-child(2){transition-delay:.16s}
.nav.open .nav-links li:nth-child(3){transition-delay:.22s}
.nav.open .nav-links li:nth-child(4){transition-delay:.28s}
.nav.open .nav-links li:nth-child(5){transition-delay:.34s}
.nav.open .nav-links li:nth-child(6){transition-delay:.4s}
body.fige{overflow:hidden} /* le fond ne défile pas sous le tiroir ouvert */
}
@media(max-width:900px){
.prio{grid-template-columns:auto 1fr}
/* Le bloc d'échéance passe sous le texte : compte et libellé en ligne, l'action à droite */
.prio-d{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;text-align:left;gap:.55rem .9rem}
.prio-d .btn{margin-left:auto}
.infos{grid-template-columns:1fr}
.srch{grid-template-columns:1fr 1fr}
.srch .btn{grid-column:1/-1;justify-self:start}
}
@media(max-width:768px){
.esp{padding-top:4.2rem} /* réserve la bande haute à la pilule de déconnexion : l'eyebrow passe dessous */
.tbl .c-cat,.tbl .c-date,.tbl td:nth-child(2),.tbl td:nth-child(3){display:none} /* le nom et l'action suffisent en étroit */
.srch{grid-template-columns:1fr}
.srch .btn{width:100%}
.ft-base-in,.ft-base ul{justify-content:center;text-align:center} /* mentions centrées, comme le footer complet */
}
@media(prefers-reduced-motion:reduce){*,::before,::after{animation-duration:.01ms!important;transition-duration:.01ms!important}html{scroll-behavior:auto}}