:root{
  --bg:#070707;--surface:#101011;--surface2:#171719;--surface3:#1d1d20;--line:#2a2a2e;
  --text:#f5eee7;--muted:#a9a19c;--orange:#ff6b18;--orange2:#ff8c4c;--purple:#7f4df2;
  --green:#39cf8c;--red:#ff565e;--yellow:#efc55f;--shadow:0 20px 60px rgba(0,0,0,.38);
  --radius:18px;--sidebar:248px;
  --ease-out:cubic-bezier(.22,.8,.22,1);--dur-fast:.15s;--dur:.25s;--dur-slow:.4s
}
*{box-sizing:border-box} html{background:var(--bg);scroll-behavior:smooth}
body{
  margin:0;min-width:320px;min-height:100vh;color:var(--text);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:
    radial-gradient(circle at 8% -5%,rgba(255,107,24,.12),transparent 30rem),
    radial-gradient(circle at 100% 38%,rgba(127,77,242,.07),transparent 32rem),
    var(--bg);
}
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;
  background:url("../assets/grain.svg");opacity:.2;mix-blend-mode:soft-light
}
button,input,select,textarea{font:inherit}button{color:inherit;cursor:pointer}a{color:inherit;text-decoration:none}img{display:block;max-width:100%}
.app-shell{min-height:100vh}.sidebar{display:none}
/* --bottom-nav-h : hauteur réelle de la barre de navigation. La réserve
   d'espace se fait ICI et nulle part ailleurs — .page ajoutait auparavant
   116 px supplémentaires, d'où une large bande vide sous la barre en bas de
   page. */
:root{--bottom-nav-h:76px}
.main{min-height:100vh;padding-bottom:calc(var(--bottom-nav-h) + env(safe-area-inset-bottom))}
.mobile-header{
  position:sticky;top:0;z-index:30;display:flex;align-items:center;justify-content:space-between;
  padding:10px 14px;background:rgba(7,7,7,.9);backdrop-filter:blur(18px);border-bottom:1px solid #1d1d20
}
.brand{display:flex;align-items:center;gap:10px}.brand img{width:102px;height:auto}.brand-caption{font-size:.62rem;color:var(--muted)}
.header-actions{display:flex;gap:7px;align-items:center}.role-select,.icon-button{
  border:1px solid var(--line);background:#121214;border-radius:10px;min-height:38px;color:var(--text)
}
.role-select{padding:0 8px;font-size:.7rem;max-width:118px}.icon-button{width:38px;display:grid;place-items:center}
.page{width:min(1120px,100%);margin:0 auto;padding:16px 14px 30px}
.eyebrow{color:var(--orange);font-size:.67rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase}
h1,h2,h3,p{margin-top:0}h1{font-size:clamp(1.7rem,7vw,2.65rem);letter-spacing:-.045em;margin:5px 0 7px}
h2{font-size:clamp(1.05rem,4vw,1.35rem);letter-spacing:-.02em}.muted{color:var(--muted)}.small{font-size:.78rem}
.section{margin-top:23px}.section-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:11px}.section-head h2{margin:0}
.hero-carousel{position:relative;border:1px solid var(--line);border-radius:22px;overflow:hidden;min-height:300px;box-shadow:var(--shadow)}
.hero-slide{display:none;min-height:300px;position:relative;align-items:flex-end}.hero-slide.active{display:flex}
.hero-slide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-slide::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 12%,rgba(0,0,0,.15) 45%,rgba(0,0,0,.95))}
.hero-content{position:relative;z-index:2;padding:20px;width:100%}.hero-content h2{font-size:1.7rem;margin:8px 0 5px}
.badge{display:inline-flex;padding:5px 9px;border-radius:999px;background:rgba(255,107,24,.14);border:1px solid rgba(255,107,24,.42);color:var(--orange2);font-size:.62rem;font-weight:900;text-transform:uppercase}
.carousel-arrows{position:absolute;z-index:5;right:12px;top:12px;display:flex;gap:5px}
.carousel-arrows button{width:38px;height:38px;border-radius:10px;border:1px solid rgba(255,255,255,.18);background:rgba(7,7,7,.7);font-size:1.2rem}
.carousel-dots{display:flex;gap:5px;justify-content:center;margin-top:9px}.dot{width:6px;height:6px;border-radius:999px;background:#494644}.dot.active{width:22px;background:var(--orange)}
.button{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:42px;border-radius:10px;border:1px solid transparent;padding:0 13px;background:var(--orange);color:#170a03;font-weight:850}
.button.outline{background:rgba(8,8,8,.7);border-color:rgba(255,107,24,.55);color:var(--orange2)}.button.ghost{background:var(--surface2);border-color:var(--line);color:var(--text)}.button.danger{background:rgba(255,86,94,.1);border-color:rgba(255,86,94,.38);color:#ff9499}
.button-row{display:flex;flex-wrap:wrap;gap:8px}.link{border:0;background:transparent;color:var(--orange2);padding:0}
.segmented{display:flex;gap:3px;padding:3px;border:1px solid var(--line);background:var(--surface);border-radius:11px}
.segmented button{border:0;background:transparent;color:var(--muted);border-radius:8px;padding:7px 9px;font-size:.72rem}.segmented button.active{background:var(--orange);color:#170a03;font-weight:850}
.filter-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:11px}.filter-grid select,.field input,.field select,.field textarea{
  width:100%;min-height:42px;border:1px solid var(--line);border-radius:10px;background:#121214;color:var(--text);padding:9px 10px;outline:none
}
.field textarea{min-height:110px;resize:vertical}.field{display:grid;gap:6px}.field label{font-size:.75rem;color:var(--muted)}
.filter-wide{grid-column:1/-1}
.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.card{border:1px solid var(--line);border-radius:16px;background:linear-gradient(180deg,rgba(255,255,255,.02),transparent),var(--surface);overflow:hidden;box-shadow:0 12px 30px rgba(0,0,0,.2)}
.card.clickable{cursor:pointer}.card-media{height:115px;position:relative;background:#18181b}.card-media img{width:100%;height:100%;object-fit:cover}
.date-badge{position:absolute;top:8px;left:8px;background:rgba(7,7,7,.9);border:1px solid #3b3b40;border-radius:10px;padding:6px 7px;text-align:center;line-height:1}
.date-badge strong{display:block;color:var(--orange);font-size:1.05rem}.date-badge span{font-size:.56rem;color:var(--muted);font-weight:900}
.card-body{padding:10px}.card-body h3{font-size:.9rem;margin:0 0 4px}.card-body p{margin:0;color:var(--muted);font-size:.7rem;line-height:1.4}.card-footer{display:flex;align-items:center;justify-content:space-between;padding:0 10px 10px}
.favorite{border:0;background:transparent;color:var(--orange);font-size:1.1rem}.full{grid-column:1/-1}
.tabs{display:flex;gap:6px;overflow:auto;margin-bottom:12px;scrollbar-width:none}.tabs::-webkit-scrollbar{display:none}.tabs button{white-space:nowrap;border:1px solid var(--line);background:var(--surface);color:var(--muted);border-radius:999px;padding:8px 11px;font-size:.72rem}.tabs button.active{background:var(--orange);color:#170a03;border-color:var(--orange);font-weight:850}
.panel{border:1px solid var(--line);border-radius:16px;background:var(--surface);padding:14px}.profile-banner{position:relative;min-height:240px;border:1px solid var(--line);border-radius:20px;overflow:hidden}
.profile-banner>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.profile-banner::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.9))}
.profile-banner-content{position:absolute;z-index:2;left:16px;right:16px;bottom:16px}.profile-banner h1{margin-bottom:3px}
.avatar{width:68px;height:68px;border-radius:50%;border:2px solid var(--orange);object-fit:cover;background:#161619;margin-bottom:10px}
.members{display:grid;gap:4px}.member{display:flex;justify-content:space-between;gap:10px;padding:9px 0;border-bottom:1px solid #242426}.member:last-child{border-bottom:0}.member.unlinked strong{color:#777}
.release-list{display:grid;gap:8px}.release{display:grid;grid-template-columns:58px 1fr auto;gap:9px;align-items:center;padding:8px;border:1px solid #28282b;border-radius:12px;background:#131315}.release img{width:58px;height:58px;border-radius:8px;object-fit:cover}
.stat-grid,.manage-grid,.admin-grid{display:grid;gap:9px}.stat{border:1px solid var(--line);background:var(--surface);border-radius:14px;padding:12px}.stat strong{display:block;font-size:1.6rem;margin-top:5px}
.status{display:inline-flex;padding:4px 7px;border-radius:999px;font-size:.62rem;border:1px solid rgba(57,207,140,.28);background:rgba(57,207,140,.08);color:#7ee4b5}.status.warn{border-color:rgba(239,197,95,.3);background:rgba(239,197,95,.08);color:#f3d68d}
.manage-item{border:1px solid var(--line);background:var(--surface);border-radius:14px;padding:12px}.manage-item h3{margin-bottom:5px}
.form-grid{display:grid;gap:10px}.checkboxes{display:flex;flex-wrap:wrap;gap:7px}.check{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:#131315;border-radius:999px;padding:7px 9px;font-size:.72rem}
.empty{text-align:center;color:var(--muted);border:1px dashed #333;border-radius:14px;padding:24px}
.bottom-nav{position:fixed;inset:auto 0 0 0;z-index:35;display:flex;align-items:center;background:rgba(8,8,8,.96);backdrop-filter:blur(18px);border-top:1px solid #242426;padding:6px 4px max(6px,env(safe-area-inset-bottom))}
.bottom-nav button{flex:1;border:0;background:transparent;color:#8f8883;min-height:60px;display:grid;place-items:center;align-content:center;gap:2px;font-size:.59rem}.bottom-nav button.active{color:var(--orange)}.nav-icon{font-size:1.1rem}
.modal{width:min(640px,calc(100% - 22px));max-height:90vh;border:1px solid #333;border-radius:18px;background:var(--surface);color:var(--text);padding:20px;box-shadow:0 35px 100px rgba(0,0,0,.72)}.modal::backdrop{background:rgba(0,0,0,.76);backdrop-filter:blur(5px)}.modal-close{position:absolute;right:12px;top:12px;width:38px;height:38px;border:1px solid var(--line);border-radius:10px;background:#18181b}
.toast{position:fixed;left:50%;bottom:92px;transform:translate(-50%,15px);opacity:0;pointer-events:none;z-index:90;background:#f5eee7;color:#111;border-radius:999px;padding:10px 14px;font-size:.75rem;font-weight:850;transition:.18s}.toast.show{opacity:1;transform:translate(-50%,0)}
.hidden{display:none!important}
@media(min-width:650px){
  .page{padding-inline:24px}.hero-carousel,.hero-slide{min-height:360px}.cards{grid-template-columns:repeat(3,minmax(0,1fr))}.stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.form-grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(min-width:980px){
  .sidebar{display:block;position:fixed;inset:0 auto 0 0;width:var(--sidebar);padding:24px 18px;border-right:1px solid #202023;background:rgba(8,8,8,.95);backdrop-filter:blur(18px);z-index:40}
  .sidebar .brand img{width:150px}.sidebar-nav{display:grid;gap:7px;margin-top:34px}.sidebar-nav button{border:1px solid transparent;background:transparent;color:var(--muted);min-height:48px;border-radius:11px;text-align:left;padding:0 13px}.sidebar-nav button.active{color:var(--orange);border-color:rgba(255,107,24,.25);background:rgba(255,107,24,.07)}
  .main{margin-left:var(--sidebar);padding-bottom:30px}.mobile-header,.bottom-nav{display:none}.page{padding:30px 30px 48px}.cards{grid-template-columns:repeat(4,minmax(0,1fr))}.stat-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.manage-grid,.admin-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.toast{bottom:24px}
}


/* V3 — Admin preview + profile editing */
.admin-preview-panel{margin-top:14px}
.admin-preview-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-top:12px}
.preview-role-card{
  min-height:122px;border:1px solid var(--line);border-radius:14px;background:linear-gradient(180deg,rgba(255,255,255,.025),transparent),var(--surface2);
  color:var(--text);text-align:left;padding:13px;display:grid;align-content:start;gap:5px
}
.preview-role-card:hover{border-color:rgba(255,107,24,.55);transform:translateY(-1px)}
.preview-role-card strong{font-size:.92rem}
.preview-role-card small{color:var(--muted);font-size:.69rem;line-height:1.35}
.preview-icon{width:34px;height:34px;display:grid;place-items:center;border-radius:10px;background:rgba(255,107,24,.1);color:var(--orange);font-size:1.05rem;margin-bottom:3px}
.admin-return{background:rgba(255,107,24,.14);border-color:rgba(255,107,24,.5);color:var(--orange);font-weight:950}
.profile-title-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.profile-title-row h1{margin-bottom:12px}
.editable-panel{position:relative}
.editable-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.editable-head h2{margin-bottom:4px}
.edit-button{border:1px solid rgba(255,107,24,.4);background:rgba(255,107,24,.08);color:var(--orange2);border-radius:9px;padding:7px 10px;font-size:.7rem;font-weight:800;flex:0 0 auto}
.edit-button:hover{background:rgba(255,107,24,.16)}
.profile-list{margin:10px 0 0;padding-left:20px;color:var(--muted);font-size:.8rem}
.profile-list li+li{margin-top:6px}
@media(min-width:650px){
  .admin-preview-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}


/* V4 — CRM Admin complet */
.admin-page{padding-bottom:40px}
.admin-topline{display:flex;flex-direction:column;gap:14px;margin-bottom:14px}
.admin-kpi-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.admin-kpi .small{display:block;margin-top:3px}
.admin-dashboard-grid{display:grid;gap:10px}
.admin-dashboard-card{min-width:0}
.admin-list{display:grid;gap:7px}
.admin-row{
  display:flex;flex-direction:column;gap:9px;padding:10px;border:1px solid #26262a;border-radius:11px;background:#131315
}
.admin-row>div:first-child{display:grid;gap:3px}
.admin-row span{color:var(--muted);font-size:.7rem}
.admin-row-actions{display:flex;flex-wrap:wrap;gap:6px}
.small-button{min-height:34px;padding:0 9px;font-size:.68rem}
.admin-tools-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.admin-tool{
  min-height:116px;border:1px solid var(--line);background:var(--surface2);border-radius:13px;padding:12px;text-align:left;color:var(--text);
  display:grid;align-content:start;gap:4px
}
.admin-tool:hover{border-color:rgba(255,107,24,.48)}
.admin-tool>span{font-size:1.15rem;color:var(--orange);margin-bottom:3px}
.admin-tool strong{font-size:.84rem}
.admin-tool small{color:var(--muted);font-size:.67rem;line-height:1.35}
@media(min-width:650px){
  .admin-topline{flex-direction:row;justify-content:space-between;align-items:flex-end}
  .admin-kpi-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .admin-dashboard-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .admin-tools-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .admin-row{flex-direction:row;align-items:center;justify-content:space-between}
}
@media(min-width:1100px){
  .admin-kpi-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .admin-tools-grid{grid-template-columns:repeat(5,minmax(0,1fr))}
}


/* V5 — sélecteur de session toujours visible */
.global-role-switcher{
  position:fixed;
  z-index:75;
  top:10px;
  right:12px;
  display:flex;
  align-items:center;
  gap:7px;
  min-height:42px;
  padding:5px 7px 5px 10px;
  border:1px solid rgba(255,107,24,.42);
  border-radius:12px;
  background:rgba(10,10,11,.94);
  backdrop-filter:blur(18px);
  box-shadow:0 10px 30px rgba(0,0,0,.36);
}
.global-role-label{
  color:var(--orange);
  font-size:.58rem;
  line-height:1;
  letter-spacing:.11em;
  font-weight:950;
}
.global-role-select{
  min-height:31px;
  max-width:128px;
  border:1px solid #37373b;
  border-radius:8px;
  background:#171719;
  color:var(--text);
  padding:0 8px;
  font-size:.7rem;
  font-weight:750;
}
@media(max-width:979px){
  .admin-session .mobile-header{padding-right:150px}
}
@media(max-width:420px){
  .global-role-switcher{right:7px;top:7px;padding-left:7px}
  .global-role-label{display:none}
  .global-role-select{max-width:105px}
  .admin-session .mobile-header{padding-right:122px}
}
@media(min-width:980px){
  .global-role-switcher{
    top:18px;
    right:22px;
  }
}

/* V6 — administration, inscriptions, articles et statistiques */
.privacy-note,.signup-explanation{
  display:flex;gap:12px;border:1px solid rgba(57,207,140,.3);background:rgba(57,207,140,.07);border-radius:15px;padding:14px;margin-top:18px
}
.privacy-note>span{color:var(--green);font-size:.75rem;padding-top:3px}.privacy-note p,.signup-explanation p{margin:4px 0 0;color:var(--muted);font-size:.78rem;line-height:1.5}
.signup-explanation{display:block;margin:0;border-color:rgba(255,107,24,.3);background:rgba(255,107,24,.07)}
.signup-role-grid{display:grid;grid-template-columns:1fr;gap:9px;margin-top:22px}
.signup-role-card{min-height:130px;border:1px solid var(--line);border-radius:16px;background:var(--surface);padding:15px;color:var(--text);text-align:left;display:grid;align-content:start;gap:6px}
.signup-role-card>span{width:37px;height:37px;display:grid;place-items:center;border-radius:11px;background:rgba(255,107,24,.09);color:var(--orange);font-size:1.1rem}
.signup-role-card strong{font-size:1rem}.signup-role-card small{color:var(--muted);line-height:1.4}.signup-role-card.active{border-color:var(--orange);background:linear-gradient(180deg,rgba(255,107,24,.12),transparent),var(--surface)}
.linked-pages{display:grid;gap:8px;margin-top:16px;padding-top:13px;border-top:1px solid var(--line)}
.linked-page{border:1px solid rgba(255,107,24,.36);background:rgba(255,107,24,.07);color:var(--orange2);border-radius:9px;padding:7px 10px;font-size:.72rem}
.member-link{width:100%;border:0;background:transparent;color:inherit;text-align:left}.member-link:hover strong{color:var(--orange2)}
.admin-directory-tools{display:grid;gap:12px}.count-pill{display:inline-flex;padding:6px 9px;border-radius:999px;background:rgba(239,197,95,.08);border:1px solid rgba(239,197,95,.32);color:var(--yellow);font-size:.68rem;font-weight:800}
.admin-entity-grid{display:grid;gap:9px}.entity-type{display:inline-block;color:var(--orange);font-size:.63rem;font-weight:900;text-transform:uppercase;letter-spacing:.08em;margin-bottom:7px}
.performance-list{display:grid;gap:8px}.performance-list>div{display:grid;grid-template-columns:1fr auto;gap:3px;padding:11px;border:1px solid var(--line);border-radius:11px;background:#131315}.performance-list small{grid-column:1/-1;color:var(--muted)}
.article-admin-grid{display:grid;gap:10px}.article-admin-card{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--surface)}.article-admin-card>img{width:100%;height:175px;object-fit:cover}.article-admin-body{padding:14px}.article-admin-body h2{margin:12px 0 6px}.article-status-row{display:flex;align-items:center;justify-content:space-between;gap:8px}
.article-preview>img{width:100%;max-height:320px;object-fit:cover;border-radius:14px;margin:14px 0}.article-lead{font-size:1.02rem;color:var(--text);line-height:1.55}.article-copy{color:var(--muted);line-height:1.7}
.stats-selector{display:grid;gap:16px}.stats-selector h2{margin:6px 0 3px}.positive{color:var(--green)}
.stats-detail-grid{display:grid;gap:10px}.metric-bars{display:grid;gap:15px}.metric-bars>div{display:grid;grid-template-columns:1fr auto;gap:7px;align-items:center}.metric-bars i{grid-column:1/-1;height:7px;border-radius:999px;background:linear-gradient(90deg,var(--orange) var(--value),#29292d var(--value));order:3}.metric-bars span,.metric-bars strong{font-size:.75rem}
@media(min-width:650px){
  .signup-role-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.admin-entity-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.article-admin-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.stats-selector{grid-template-columns:minmax(240px,.6fr) 1fr;align-items:end}.stats-detail-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(min-width:1100px){.admin-entity-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.article-admin-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* V7 — validation des groupes, éditeur riche et rapports détaillés */
.auto-validation-note{display:flex;align-items:flex-start;gap:12px;margin-top:18px;padding:14px;border:1px solid rgba(57,207,140,.3);border-radius:15px;background:rgba(57,207,140,.07)}
.auto-validation-note>span{display:grid;place-items:center;width:30px;height:30px;flex:0 0 30px;border-radius:50%;background:rgba(57,207,140,.15);color:var(--green);font-weight:950}.auto-validation-note p{margin:4px 0 0;color:var(--muted);font-size:.78rem;line-height:1.5}
.entity-row-button{width:100%;color:inherit;text-align:left}.entity-row-button b{color:var(--orange);font-size:1.25rem}.button:disabled{opacity:.35;cursor:not-allowed}
.validation-hero{display:grid;grid-template-columns:110px 1fr;gap:14px;align-items:center;margin:16px 0}.validation-hero img{width:110px;height:110px;border-radius:15px;object-fit:cover;border:1px solid var(--line)}.validation-hero p{margin:7px 0 0}.review-actions{border-color:rgba(255,107,24,.35)}
.article-summary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.article-admin-card{position:relative}.article-admin-card.is-archived>img{filter:grayscale(1);opacity:.48}.article-admin-card.is-archived{border-style:dashed}.article-order-badge{position:absolute;top:10px;left:10px;z-index:2;padding:5px 8px;border-radius:999px;background:rgba(7,7,7,.88);border:1px solid #444;color:var(--text);font-size:.64rem;font-weight:850}
.editor-shell{overflow:hidden;border:1px solid var(--line);border-radius:13px;background:#101012}.editor-toolbar{display:flex;flex-wrap:wrap;gap:5px;padding:8px;border-bottom:1px solid var(--line);background:#18181b}.editor-toolbar button,.editor-toolbar select{min-height:34px;border:1px solid #39393d;border-radius:8px;background:#222226;color:var(--text);padding:0 9px;font-size:.7rem}.editor-toolbar button:hover{border-color:var(--orange)}.editor-color{display:flex;align-items:center;gap:5px;padding:0 7px;border:1px solid #39393d;border-radius:8px;color:var(--muted);font-size:.66rem}.editor-color input{width:27px;height:27px;padding:2px;border:0;background:transparent}.editor-insert-row{display:grid;grid-template-columns:1fr;gap:6px;padding:8px;border-bottom:1px solid var(--line)}.editor-insert-row input{width:100%;min-height:36px;border:1px solid #343438;border-radius:8px;background:#131315;color:var(--text);padding:7px 9px}.rich-editor{min-height:260px;padding:16px;outline:none;color:var(--text);line-height:1.7}.rich-editor:empty::before{content:attr(data-placeholder);color:#777;pointer-events:none}.rich-editor h2,.rich-editor h3{margin:18px 0 8px}.rich-editor blockquote{margin:15px 0;padding:10px 14px;border-left:3px solid var(--orange);background:rgba(255,107,24,.07);color:#d3ccc6}.rich-editor a{color:var(--orange2);text-decoration:underline}.rich-editor img,.article-copy img{width:min(100%,680px);height:auto;border-radius:12px;margin:14px auto}.title-image-editor{display:grid;gap:12px;padding:14px;border:1px solid rgba(255,107,24,.32);border-radius:15px;background:rgba(255,107,24,.05)}.title-image-editor h2{margin-bottom:4px}.title-image-editor>img{width:100%;height:190px;object-fit:cover;border-radius:12px;border:1px solid var(--line)}
.stats-scope-selector{display:grid;gap:14px}.stats-search-panel{display:grid;gap:12px}.stats-result-list{display:flex;gap:7px;overflow:auto;padding-bottom:3px;scrollbar-width:thin}.stats-result-list button{min-width:145px;border:1px solid var(--line);border-radius:11px;background:#141416;color:var(--text);padding:9px;text-align:left;display:grid;gap:3px}.stats-result-list button small{color:var(--muted);font-size:.66rem}.stats-result-list button.active{border-color:var(--orange);background:rgba(255,107,24,.09)}.stats-entity-heading{margin-top:22px}.stats-entity-heading h2{font-size:1.8rem;margin:0}.stats-kpi-wide{grid-template-columns:repeat(2,minmax(0,1fr))}
.trend-chart{height:245px;display:flex;align-items:flex-end;gap:7px;padding-top:35px}.trend-chart>div{height:100%;flex:1;display:grid;grid-template-rows:22px 1fr 20px;align-items:end;text-align:center;min-width:0}.trend-chart strong{font-size:.64rem;color:var(--muted);white-space:nowrap}.trend-chart i{display:block;width:72%;max-width:42px;height:var(--height);min-height:8px;justify-self:center;border-radius:7px 7px 2px 2px;background:linear-gradient(180deg,var(--orange2),#d84d00);box-shadow:0 7px 18px rgba(255,107,24,.18)}.trend-chart span{font-size:.59rem;color:var(--muted)}
.ranking-chart{display:grid;gap:11px}.ranking-chart>div{display:grid;grid-template-columns:minmax(80px,.8fr) 1fr auto;gap:8px;align-items:center}.ranking-chart span,.ranking-chart strong{font-size:.7rem}.ranking-chart>div>div{height:8px;border-radius:999px;background:#29292d;overflow:hidden}.ranking-chart i{display:block;width:var(--width);height:100%;background:linear-gradient(90deg,var(--purple),var(--orange));border-radius:inherit}
/* Flex avec retour à la ligne plutôt que 2 colonnes fixes : la légende
   passe sous le graphique dès que le conteneur est étroit, y compris en
   aperçu mobile de l'admin (où la largeur de la fenêtre reste grande et les
   media queries ne se déclenchent donc pas). */
.donut-layout{display:flex;flex-wrap:wrap;gap:18px;align-items:center;margin-top:16px}/* Le dégradé est calculé dans le rendu (voir renderAccountsDonut) : il ne
   doit surtout pas être figé ici, sinon le dessin cesse de correspondre aux
   pourcentages affichés à côté. */
.donut-chart{width:130px;flex:0 0 auto;aspect-ratio:1;border-radius:50%;position:relative}.donut-chart::after{content:"";position:absolute;inset:25%;border-radius:50%;background:var(--surface)}.legend-list{display:grid;gap:8px;flex:1 1 170px;min-width:0}.legend-list span{display:flex;align-items:flex-start;gap:7px;min-width:0;color:var(--muted);font-size:.72rem;overflow-wrap:anywhere}.legend-list i{flex:0 0 auto;margin-top:.35em}.legend-list i{width:9px;height:9px;border-radius:50%}.legend-list .orange{background:var(--orange)}.legend-list .purple{background:var(--purple)}.legend-list .green{background:var(--green)}.legend-list .gray{background:#5d5d62}
.history-list{display:grid;gap:7px}.history-list>div{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px;border:1px solid var(--line);border-radius:10px;background:#131315}.history-list span{display:grid;gap:3px}.history-list small{color:var(--muted);font-size:.67rem}.history-list b{color:var(--orange2);font-size:.75rem;white-space:nowrap}.data-table{display:grid;gap:6px}.data-table button{display:grid;grid-template-columns:1fr auto;gap:5px;border:1px solid var(--line);border-radius:10px;background:#131315;color:var(--text);padding:10px;text-align:left}.data-table button>span:first-child{display:grid;gap:3px}.data-table button small{color:var(--muted);font-size:.65rem}.data-table button>span:nth-child(n+2){font-size:.7rem;color:var(--muted)}
@media(min-width:650px){.editor-insert-row{grid-template-columns:minmax(220px,1fr) auto auto;align-items:center}.stats-scope-selector{grid-template-columns:minmax(240px,.65fr) 1fr;align-items:end}.stats-search-panel{grid-template-columns:minmax(210px,.45fr) 1fr;align-items:end}.stats-kpi-wide{grid-template-columns:repeat(3,minmax(0,1fr))}.data-table button{grid-template-columns:1fr auto auto;align-items:center}}
@media(min-width:980px){.modal:has(.rich-article-form),.modal:has(.validation-profile){width:min(920px,calc(100% - 40px))}.stats-kpi-wide{grid-template-columns:repeat(5,minmax(0,1fr))}.title-image-editor>img{height:260px}}

/* V8 — gestion directe, listes, cycle éditorial et périodes statistiques */
.mail-confirmed{display:inline-grid;place-items:center;width:18px;height:18px;flex:0 0 18px;border-radius:50%;background:rgba(57,207,140,.16);border:1px solid rgba(57,207,140,.38);color:var(--green);font-size:.64rem;font-weight:950;vertical-align:middle}.profile-banner h1 .mail-confirmed{transform:translateY(-2px)}
.validation-title-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.validation-state{display:inline-flex!important;width:max-content;padding:4px 7px;border-radius:999px;font-size:.6rem!important;font-weight:850}.validation-state.new{color:var(--yellow)!important;background:rgba(239,197,95,.08);border:1px solid rgba(239,197,95,.3)}.validation-state.changes{color:var(--orange2)!important;background:rgba(255,107,24,.08);border:1px solid rgba(255,107,24,.34)}.review-comment{display:block;margin-top:5px;color:#d8a37f;font-size:.68rem;line-height:1.4}
.admin-entity-list{overflow:hidden;border:1px solid var(--line);border-radius:15px;background:var(--surface)}.directory-list-head{display:none}.directory-list-row{width:100%;border:0;border-bottom:1px solid var(--line);background:transparent;color:var(--text);padding:13px;text-align:left;display:grid;grid-template-columns:1fr auto;gap:6px 12px;align-items:center}.directory-list-row:last-child{border-bottom:0}.directory-list-row:hover{background:rgba(255,107,24,.055)}.directory-list-row>span{font-size:.72rem;color:var(--muted)}.directory-list-row>.entity-type{margin:0}.directory-list-row>.directory-name{display:flex;align-items:center;gap:7px;color:var(--text)}.directory-list-row>b{grid-column:2;grid-row:1/4;color:var(--orange);font-size:1.25rem}.directory-list-row>span:nth-child(n+3){grid-column:1/-1}.directory-list-row:focus-visible{outline:2px solid var(--orange);outline-offset:-2px}
.article-summary{grid-template-columns:repeat(3,minmax(0,1fr))}.article-current-section,.archived-articles-section{padding:15px;border:1px solid var(--line);border-radius:16px;background:var(--surface)}.archived-articles-section{background:rgba(255,255,255,.015);border-style:dashed}.article-current-list,.archived-article-list{display:grid;gap:8px}.article-sort-card{display:grid;grid-template-columns:34px 72px minmax(0,1fr);gap:10px;align-items:center;padding:9px;border:1px solid var(--line);border-radius:12px;background:#131315;transition:border-color .16s,transform .16s,opacity .16s}.article-sort-card>img{width:72px;height:62px;object-fit:cover;border-radius:8px}.article-sort-card .article-sort-content{min-width:0}.article-sort-card h2{margin:5px 0 3px;font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.article-sort-card p{margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.article-sort-card>.button{grid-column:2/-1}.article-sort-card.is-archived{grid-template-columns:72px minmax(0,1fr);opacity:.72}.article-sort-card.is-archived>img{filter:grayscale(1)}.article-sort-card.is-archived>.button{grid-column:1/-1}.article-sort-card.is-dragging{opacity:.45;border-color:var(--orange);transform:scale(.995)}.drag-handle{width:34px;height:54px;border:1px solid #39393d;border-radius:8px;background:#202024;color:var(--muted);font-size:1.15rem;cursor:grab;touch-action:none}.drag-handle:active{cursor:grabbing;color:var(--orange)}.drag-help{display:inline-flex;align-items:center;gap:5px;color:var(--muted);font-size:.68rem}.article-editor-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:15px}.article-editor-heading h1{margin-bottom:6px}.article-editor-actions{display:flex;flex-wrap:wrap;gap:8px;padding-top:14px;border-top:1px solid var(--line)}
.stats-control-panel{display:grid;gap:12px}.stats-period-summary{align-self:end}.stats-period-summary p{margin:4px 0 0}.custom-date-range{display:grid;gap:10px}.period-chip{display:inline-flex;width:max-content;padding:5px 8px;border:1px solid rgba(255,107,24,.34);border-radius:999px;background:rgba(255,107,24,.07);color:var(--orange2);font-size:.65rem;font-weight:800}.stats-entity-heading{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.stats-entity-heading .entity-type{width:100%}
@media(min-width:650px){.article-sort-card{grid-template-columns:42px 92px minmax(0,1fr) auto}.article-sort-card>img{width:92px;height:72px}.article-sort-card>.button{grid-column:auto}.article-sort-card.is-archived{grid-template-columns:92px minmax(0,1fr) auto}.article-sort-card.is-archived>.button{grid-column:auto}.stats-control-panel{grid-template-columns:repeat(2,minmax(0,1fr))}.stats-period-summary{grid-column:1/-1}.custom-date-range{grid-template-columns:1fr 1fr auto;align-items:end}}
@media(min-width:820px){.directory-list-head,.directory-list-row{grid-template-columns:100px minmax(150px,1.1fr) minmax(190px,1.35fr) minmax(140px,1fr) minmax(155px,1.1fr) 22px}.directory-list-head{display:grid;gap:12px;padding:9px 13px;border-bottom:1px solid var(--line);color:var(--muted);font-size:.62rem;font-weight:850;text-transform:uppercase;letter-spacing:.06em}.directory-list-row{gap:12px}.directory-list-row>span:nth-child(n+3){grid-column:auto}.directory-list-row>b{grid-column:6;grid-row:1}.stats-control-panel{grid-template-columns:minmax(210px,.8fr) minmax(180px,.65fr) 1fr}.stats-period-summary{grid-column:auto}}

/* V9 — profils détaillés et création de pages */
.required{color:var(--orange);font-weight:900}.field small{color:var(--muted);font-size:.66rem;line-height:1.4}.signup-detail-form{gap:15px}.form-section{display:grid;gap:12px;padding:15px;border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.012)}.form-section h2,.form-section h3{margin:0}.visibility-field{position:relative;padding:12px;border:1px solid var(--line);border-radius:12px;background:#111113}.visibility-field>input{padding-right:90px}.visibility-toggle{position:absolute;right:9px;top:37px;display:flex;align-items:center;gap:5px;color:var(--orange2)!important;font-weight:800}.visibility-rule{padding:10px 12px;border:1px solid rgba(255,107,24,.3);border-radius:10px;background:rgba(255,107,24,.06);color:#d7b29a;font-size:.72rem}.terms-check{border-radius:12px;padding:12px;background:rgba(57,207,140,.06);border-color:rgba(57,207,140,.3)}
.choice-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.choice-grid .check{border-radius:10px;min-height:42px}.choice-grid .check:has(input:checked){border-color:var(--orange);background:rgba(255,107,24,.09);color:var(--orange2)}.choice-grid .all-choice{grid-column:1/-1;border-color:rgba(127,77,242,.35)}.choice-grid .all-choice:has(input:checked){border-color:var(--purple);background:rgba(127,77,242,.12);color:#bca8ff}
.group-picker{display:grid;gap:10px}.group-search-grid{display:grid;gap:8px}.group-search-results{display:grid;gap:6px}.group-search-results button{display:grid;gap:3px;width:100%;padding:10px;border:1px solid var(--line);border-radius:10px;background:#131315;color:var(--text);text-align:left}.group-search-results button:hover{border-color:var(--orange)}.group-search-results small{color:var(--muted)}.affiliation-list,.affiliation-display{display:flex;flex-wrap:wrap;gap:7px}.affiliation-chip{display:inline-flex;align-items:center;gap:7px;border:1px solid #3a3a3f;border-radius:999px;background:#1b1b1e;color:var(--text);padding:7px 10px;font-size:.72rem}.affiliation-chip span{font-size:.56rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:900}.affiliation-chip.current{border-color:rgba(255,107,24,.55);background:rgba(255,107,24,.12);color:var(--orange2)}.affiliation-chip.current span{color:var(--orange)}
.profile-photo-preview{width:112px;height:112px;object-fit:cover;border-radius:50%;border:2px solid var(--orange)}.profile-detail-grid,.group-info-grid{display:grid;gap:10px}.profile-tags{display:flex;flex-wrap:wrap;gap:7px}.profile-tags span{padding:6px 9px;border-radius:999px;border:1px solid rgba(255,107,24,.32);background:rgba(255,107,24,.07);color:var(--orange2);font-size:.7rem}.profile-note{margin:14px 0 0;line-height:1.55}.private-profile-card>div:first-child{display:flex;align-items:center;gap:8px}.private-profile-card h2{margin:0}.privacy-dot{color:var(--green)}.private-data-grid,.profile-facts{display:grid;gap:8px;margin-top:13px}.private-data-grid>span,.profile-facts>span,.profile-facts>a{display:grid;gap:3px;padding:10px;border:1px solid var(--line);border-radius:10px;background:#131315;font-size:.78rem}.private-data-grid small,.profile-facts small{color:var(--muted);font-size:.63rem;text-transform:uppercase;letter-spacing:.06em}
.entity-creation-form{gap:15px}.entity-photo-preview{width:100%;height:220px;object-fit:cover;border-radius:13px;border:1px solid var(--line)}.repeater-list{display:grid;gap:9px}.member-editor-row{position:relative;display:grid;gap:8px;padding:12px;border:1px solid var(--line);border-radius:12px;background:#131315}.member-editor-row input[readonly]{color:var(--orange2);background:#181310}.creator-pill{width:max-content;padding:5px 8px;border-radius:999px;background:rgba(255,107,24,.1);color:var(--orange2);font-size:.62rem;font-weight:850}.remove-row{width:34px;height:34px;border:1px solid rgba(255,86,94,.35);border-radius:9px;background:rgba(255,86,94,.08);color:#ff9499;font-size:1rem}.member-editor-row>.remove-row{position:absolute;right:8px;top:8px}.repeater-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}.album-editor{display:grid;gap:11px;padding:13px;border:1px solid #343438;border-radius:14px;background:#121214}.album-upload-preview{width:120px;height:120px;object-fit:cover;border-radius:10px;border:1px solid var(--line)}.submission-choice{display:grid;gap:12px;padding:15px;border:1px solid rgba(255,107,24,.35);border-radius:15px;background:rgba(255,107,24,.055)}.submission-choice p{margin:4px 0 0}.page-management-card{display:grid;gap:11px}.page-management-card h3{margin:3px 0 7px}.album-grid{display:grid;gap:10px}.album-card{display:grid;grid-template-columns:94px minmax(0,1fr);gap:12px;padding:10px;border:1px solid var(--line);border-radius:13px;background:#131315}.album-card>img{width:94px;height:94px;object-fit:cover;border-radius:10px}.album-card p{margin:4px 0}.album-card ol{padding-left:18px;color:var(--muted);font-size:.7rem}
@media(min-width:650px){.choice-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.group-search-grid{grid-template-columns:minmax(220px,1fr) 180px}.profile-detail-grid,.group-info-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.private-data-grid,.profile-facts{grid-template-columns:repeat(2,minmax(0,1fr))}.member-editor-row{grid-template-columns:1fr 1fr auto;align-items:end}.member-editor-row>.remove-row{position:static}.creator-pill{grid-column:1/-1}.album-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:980px){.modal:has(.entity-creation-form){width:min(960px,calc(100% - 40px))}.choice-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.private-data-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.entity-photo-preview{height:300px}}

/* V10 — profils reliés, sélections compactes et programmation d’événements */
.form-error-summary{padding:14px;border:1px solid rgba(255,86,94,.55);border-radius:13px;background:rgba(255,86,94,.1);color:#ffd5d7}.form-error-summary strong{display:block;margin-bottom:7px}.form-error-summary ul{margin:0;padding-left:20px;display:grid;gap:4px;font-size:.76rem}
.controlled-multi{position:relative;display:grid;gap:8px}.controlled-suggestions{display:none;position:absolute;z-index:12;top:64px;left:0;right:0;max-height:220px;overflow:auto;padding:5px;border:1px solid #414147;border-radius:11px;background:#171719;box-shadow:0 18px 42px rgba(0,0,0,.45)}.controlled-suggestions.visible{display:grid}.controlled-suggestions button{border:0;border-bottom:1px solid var(--line);background:transparent;color:var(--text);padding:9px;text-align:left}.controlled-suggestions button:last-child{border-bottom:0}.controlled-suggestions button:hover{background:rgba(255,107,24,.09);color:var(--orange2)}.controlled-values{display:flex;flex-wrap:wrap;gap:6px}.controlled-values>button{display:inline-flex;align-items:center;gap:7px;min-height:34px;padding:5px 9px;border:1px solid rgba(255,107,24,.42);border-radius:999px;background:rgba(255,107,24,.09);color:var(--orange2);font-size:.72rem}.controlled-values>button span{font-size:.9rem}.controlled-hint{margin:0}
.profile-photo-first{grid-template-columns:auto 1fr;align-items:center}.profile-photo-first>div:first-child{grid-column:1/-1}.profile-photo-first .profile-photo-preview{grid-column:1}.profile-photo-first .field{grid-column:2;min-width:0}
.affiliation-text-list{display:grid;gap:11px}.affiliation-text-list>div{display:grid;grid-template-columns:64px minmax(0,1fr);gap:8px;align-items:baseline;padding:9px 0;border-bottom:1px solid var(--line)}.affiliation-text-list>div:last-child{border-bottom:0}.affiliation-text-list strong{font-size:.75rem;color:var(--muted)}.affiliation-name,.affiliation-name-link{display:inline;border:0;background:transparent;padding:0;font-weight:850;font-size:.88rem}.affiliation-name.current,.affiliation-name-link.current{color:var(--orange)}.affiliation-name.former,.affiliation-name-link.former{color:var(--text)}.affiliation-name-link:hover{text-decoration:underline}.affiliation-separator{color:var(--muted)}
.member-link{width:100%;border:0;background:transparent;color:inherit;text-align:left}.member-link:hover strong{color:var(--orange2)}.member-status-section{margin-top:14px}.member-status-section h3{margin:0 0 5px;color:var(--muted);font-size:.7rem;text-transform:uppercase;letter-spacing:.07em}.member-status-section+.member-status-section{padding-top:12px;border-top:1px solid var(--line)}
.member-editor-row{grid-template-columns:1fr}.profile-group-link{padding:12px;border-radius:12px;border-color:rgba(255,107,24,.4);background:rgba(255,107,24,.07)}
.page-save-notice{display:flex;align-items:center;gap:10px;margin-top:16px;padding:13px 15px;border:1px solid rgba(57,207,140,.42);border-radius:13px;background:rgba(57,207,140,.09);color:#a7f0cd}.page-save-notice>span{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:rgba(57,207,140,.18);font-weight:950}.page-save-notice.submitted{border-color:rgba(255,107,24,.45);background:rgba(255,107,24,.08);color:#ffc29f}.page-save-notice.submitted>span{background:rgba(255,107,24,.18)}
.event-poster-editor .entity-photo-preview{order:-1;height:240px}.event-artist-picker{display:grid;gap:8px}.event-artist-values{display:flex;flex-wrap:wrap;gap:7px}.event-artist-values>span{display:inline-flex;align-items:center;gap:7px;padding:7px 9px;border:1px solid rgba(255,107,24,.38);border-radius:999px;background:rgba(255,107,24,.08);color:var(--orange2);font-size:.72rem}.event-artist-values button{border:0;background:transparent;color:inherit;padding:0;font-size:1rem}.event-schedule-row{display:grid;grid-template-columns:112px minmax(0,1fr) auto;gap:8px;align-items:end;padding:10px;border:1px solid var(--line);border-radius:11px;background:#131315}.event-poster-top{width:100%;max-height:420px;object-fit:cover;border-radius:16px;margin-bottom:16px;border:1px solid var(--line)}.event-main-facts p{margin:6px 0 0}.event-artist-list{display:flex;flex-wrap:wrap;gap:7px}.event-artist-list button,.event-artist-list>span{display:inline-flex;gap:6px;padding:7px 9px;border:1px solid var(--line);border-radius:999px;background:#171719;color:var(--text)}.event-artist-list button{border-color:rgba(255,107,24,.42);color:var(--orange2)}.running-order-view{display:grid}.running-order-view>div{display:grid;grid-template-columns:70px 1fr;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}.running-order-view>div:last-child{border-bottom:0}.running-order-view strong{color:var(--orange2)}
@media(min-width:650px){.member-editor-row{grid-template-columns:minmax(150px,1fr) minmax(180px,1fr) 180px auto}.member-editor-row .creator-pill{grid-column:1/-1}.event-poster-editor{grid-template-columns:minmax(220px,.7fr) 1fr;align-items:end}.event-poster-editor>div:first-child{grid-column:1/-1}.event-poster-editor .entity-photo-preview{grid-column:1/-1;height:320px}}
@media(max-width:520px){.event-schedule-row{grid-template-columns:92px 1fr}.event-schedule-row>.remove-row{grid-column:1/-1;justify-self:end}.profile-photo-first{grid-template-columns:1fr}.profile-photo-first .field,.profile-photo-first .profile-photo-preview{grid-column:1}}

/* V11 — accès initial, structures programmateurs et affiches d’événements */
.access-shell{min-height:100dvh;padding:20px;display:grid;align-content:start;gap:20px;background:radial-gradient(circle at 75% 10%,rgba(255,107,24,.12),transparent 34%),#080808}.access-landing{place-items:center;align-content:center}.access-topbar{width:min(100%,980px);margin:0 auto;display:flex;justify-content:space-between;align-items:center}.access-topbar .brand{margin:0}.access-card{width:min(100%,560px);padding:24px}.access-card>.brand{margin-bottom:34px}.access-card h1{font-size:clamp(2rem,8vw,3.7rem);margin-bottom:12px}.access-actions{display:grid;grid-template-columns:1fr;gap:9px;margin:26px 0 15px}.access-shell>.signup-page{width:min(100%,980px);margin:0 auto;padding:0 0 50px}.demo-role-field{padding-top:10px;border-top:1px solid var(--line)}
.programmer-venue-picker{display:grid;gap:8px}.selected-venue{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px;border:1px solid rgba(57,207,140,.38);border-radius:12px;background:rgba(57,207,140,.07)}.selected-venue>span{display:grid;gap:3px}.selected-venue small{color:var(--muted)}.selected-venue button{border:0;background:transparent;color:var(--orange2);font-weight:850}.venue-create-inline{display:grid;gap:12px;margin:0;padding:14px;border:1px solid rgba(255,107,24,.38);border-radius:14px;background:rgba(255,107,24,.045)}.venue-create-inline legend{padding:0 8px;color:var(--orange2);font-weight:900}.programmer-profile-card{display:flex;align-items:center;gap:14px}.programmer-profile-card .avatar{position:static;width:88px;height:88px;flex:0 0 88px}.programmer-profile-card h2{margin-bottom:5px}
.event-images-grid{display:grid;gap:10px}.event-full-poster-editor .full-poster-preview{height:auto;max-height:520px;object-fit:contain;background:#050505}.schedule-artist-field{position:relative}.schedule-artist-suggestions{display:none;position:absolute;z-index:20;top:66px;left:0;right:0;max-height:230px;overflow:auto;padding:5px;border:1px solid #414147;border-radius:11px;background:#171719;box-shadow:0 18px 42px rgba(0,0,0,.45)}.schedule-artist-suggestions.visible{display:grid}.event-poster-full{height:auto;max-height:72vh;object-fit:contain;background:#050505}.running-order-view button{border:0;background:transparent;color:var(--orange2);padding:0;text-align:left;font:inherit;font-weight:800}.submission-confirmation{display:flex;align-items:flex-start;gap:10px;color:#bdf2d8}.submission-confirmation>span{display:grid;place-items:center;width:27px;height:27px;flex:0 0 27px;border-radius:50%;background:rgba(57,207,140,.18);color:var(--green);font-weight:950}.submission-confirmation p{margin-top:4px}
@media(min-width:650px){.access-actions{grid-template-columns:1fr 1fr}.event-images-grid{grid-template-columns:1fr 1fr}.event-images-grid .event-poster-editor{display:grid;grid-template-columns:1fr}.event-images-grid .event-poster-editor .entity-photo-preview{grid-column:1}.programmer-profile-card{padding:18px}}

/* V12 — favoris, confirmations, filtres compacts, équipes et notifications */
.single-line-filters{display:flex!important;align-items:end;gap:10px;overflow-x:auto;padding:2px 0 8px;scrollbar-width:thin}.single-line-filters>.field,.single-line-filters>select,.single-line-filters>button{flex:1 0 190px}.single-line-filters>.field{margin:0}.single-line-filters .filter-wide{min-width:210px}.discover-filters>.field{min-width:210px}.agenda-filters>select{min-height:44px}
.button.is-confirmed,.favorite.is-confirmed,.favorite-action.is-confirmed{background:var(--orange)!important;border-color:var(--orange)!important;color:#090909!important}.favorite-action{width:max-content}.favorite-search{max-width:640px;margin:18px 0}.favorite-result.hidden{display:none}
.former-member{color:#777}.former-member strong{color:#85858b}.former-member.member-link strong{color:var(--orange)}.former-member.member-link:hover strong{color:var(--orange2)}.member-years{font-variant-numeric:tabular-nums}.group-presentation{line-height:1.62}.venue-staff{display:grid;gap:6px;margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}.venue-staff h3{margin:0;color:var(--muted);font-size:.7rem;text-transform:uppercase;letter-spacing:.07em}.venue-staff span{font-size:.78rem}.event-venue-link{border:0;background:transparent;color:var(--orange2);padding:0;font:inherit;font-weight:850}.event-venue-link:hover{text-decoration:underline}
.programmer-editor-row{position:relative;display:grid;gap:8px;padding:12px;border:1px solid var(--line);border-radius:12px;background:#131315}.programmer-editor-row>.remove-row{position:absolute;right:8px;top:8px}.programmer-editor-row input[readonly]{color:var(--orange2);background:#181310}
.notification-form{display:grid;gap:0;padding:0;overflow:hidden}.notification-grid{display:grid;grid-template-columns:minmax(0,1fr) 118px 98px;gap:12px;align-items:center}.notification-head{padding:12px 16px;background:#111113;color:var(--muted);font-size:.65rem;text-transform:uppercase;letter-spacing:.06em}.notification-row{padding:15px 16px;border-top:1px solid var(--line)}.notification-row>div{display:grid;gap:4px}.notification-row small{color:var(--muted);font-size:.68rem;line-height:1.4}.notification-check{display:flex;align-items:center;gap:7px;font-size:.72rem}.notification-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:16px;border-top:1px solid var(--line);background:rgba(255,107,24,.035)}.notification-actions p{margin:0}.public-identity{grid-template-columns:repeat(2,minmax(0,1fr))}
.editor-code-grid{display:grid;gap:9px;padding:10px;border-top:1px solid var(--line)}.editor-code-grid .field{align-content:start}.editor-code-grid textarea{min-height:88px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}.editor-drop-hint{margin:0;padding:8px 11px;color:var(--muted);font-size:.68rem;border-top:1px solid var(--line)}.rich-editor.is-dragover{outline:2px dashed var(--orange);outline-offset:-8px;background:rgba(255,107,24,.07)}.rich-editor video,.article-copy video{display:block;width:100%;max-height:520px;margin:14px 0;border-radius:12px;background:#050505}.video-embed{position:relative;width:100%;aspect-ratio:16/9;margin:14px 0;overflow:hidden;border-radius:12px;background:#050505}.video-embed iframe,.article-copy iframe,.rich-editor iframe{width:100%;height:100%;min-height:320px;border:0}.rich-editor pre,.article-copy pre{overflow:auto;padding:14px;border:1px solid var(--line);border-radius:11px;background:#08080a;color:#d6d6db;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.72rem;white-space:pre-wrap}
@media(min-width:720px){.programmer-editor-row{grid-template-columns:minmax(180px,.8fr) minmax(240px,1fr) auto;align-items:end}.programmer-editor-row>.remove-row{position:static}.programmer-editor-row .creator-pill{grid-column:1/-1}.editor-code-grid{grid-template-columns:1fr 1fr}.member-editor-row{grid-template-columns:minmax(140px,1fr) minmax(170px,1fr) 145px 110px 110px auto}.member-editor-row .creator-pill{grid-column:1/-1}}
@media(max-width:620px){.notification-grid{grid-template-columns:minmax(0,1fr) 62px 62px}.notification-head strong:nth-child(n+2){font-size:0}.notification-head strong:nth-child(2)::after{content:"App";font-size:.62rem}.notification-head strong:nth-child(3)::after{content:"E-mail";font-size:.62rem}.notification-check{justify-content:center}.notification-check span{display:none}.public-identity{grid-template-columns:1fr}.single-line-filters{margin-right:-16px;padding-right:16px}}

/* V13 - direction mobile vintage issue des planches validées */
:root{
  --bg:#f0e5d2;
  --surface:#f0e5d2;
  --surface2:#e4d6bf;
  --surface3:#d7c7ae;
  --line:#2a2a27;
  --text:#2a2a27;
  --muted:#7e766a;
  --orange:#ce6a3b;
  --orange2:#b95531;
  --purple:#2a2a27;
  --green:#ce6a3b;
  --yellow:#b95531;
  --red:#a64031;
  --shadow:0 18px 45px rgba(42,42,39,.14);
  --radius:5px;
  /* --cream et --ink étaient utilisés par plusieurs règles (bouton de
     recherche globale de l'admin, cartes du flux, visionneuse) sans avoir
     jamais été définis : la couleur retombait sur « transparent » et le
     texte devenait invisible. */
  --cream:#eee3d0;
  --ink:#242420;
  --display:"Arial Narrow","Aptos Narrow",Impact,"Helvetica Neue Condensed",sans-serif
}
html{background:var(--bg)}
body{
  color:var(--text);
  background:var(--bg);
  font-family:"Helvetica Neue",Arial,sans-serif;
  line-height:1.35
}
body::before{
  z-index:200;
  opacity:.48;
  mix-blend-mode:multiply;
  background:url("../assets/grain.svg");
  background-size:620px 620px
}
body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:199;
  pointer-events:none;
  opacity:.11;
  mix-blend-mode:multiply;
  background:
    repeating-linear-gradient(0deg,transparent 0 27px,rgba(42,42,39,.24) 28px,transparent 29px 87px),
    repeating-linear-gradient(93deg,transparent 0 91px,rgba(42,42,39,.14) 92px,transparent 93px 181px)
}
button,input,select,textarea{border-radius:3px!important}
h1,h2,h3,.brand,.stat strong{
  font-family:var(--display);
  font-stretch:condensed;
  text-transform:uppercase
}
h1{font-size:clamp(2.75rem,14vw,5.8rem);line-height:.82;letter-spacing:-.045em;margin:12px 0 15px}
h2{font-size:clamp(1.35rem,6vw,2.25rem);line-height:.9;letter-spacing:-.025em}
h3{letter-spacing:-.015em}
.eyebrow{color:var(--orange2);font-size:.6rem;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.08em}
.muted{color:var(--muted)}
.page{width:min(1180px,100%);padding:24px 16px 34px}
.section{margin-top:20px}
.panel,.card,.stat,.manage-item,.admin-row,.admin-tool,.article-admin-card,.article-current-section,.archived-articles-section,.admin-entity-list{
  color:var(--text);
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:5px;
  box-shadow:none
}
.panel{padding:15px}
.button{
  min-height:44px;
  border:1px solid var(--line);
  border-radius:3px;
  background:var(--orange);
  color:var(--line);
  font-size:.7rem;
  font-weight:950;
  letter-spacing:.015em;
  text-transform:uppercase;
  box-shadow:none
}
.button:hover{background:var(--line);color:var(--surface)}
.button.outline,.button.ghost{
  background:var(--surface);
  border-color:var(--line);
  color:var(--line)
}
.button.outline:hover,.button.ghost:hover{background:var(--line);color:var(--surface)}
.button.danger{background:var(--red);border-color:var(--line);color:var(--surface)}
.button.is-confirmed,.favorite.is-confirmed,.favorite-action.is-confirmed{background:var(--orange)!important;color:var(--line)!important}
.link,.event-venue-link,.running-order-view button{color:var(--orange2)}
.field{gap:5px}
.field label{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.58rem;text-transform:uppercase;color:var(--muted)}
.field input,.field select,.field textarea,.filter-grid select{
  min-height:46px;
  background:rgba(240,229,210,.72);
  border:1px solid var(--line);
  color:var(--text);
  padding:10px 11px
}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--orange);outline-offset:1px}
.field small{color:var(--muted)}
.check{background:var(--surface);border-color:var(--line);border-radius:3px!important}
.terms-check{background:var(--surface2);border-color:var(--orange2)}
.required{color:var(--orange2)}
.form-error-summary{background:#efe0d2;border-color:var(--red);color:#6f2d25}
.form-section,.submission-choice,.venue-create-inline,.programmer-editor-row,.member-editor-row,.album-editor{
  border:1px solid var(--line);
  border-radius:5px;
  background:rgba(240,229,210,.72)
}
.visibility-field{background:var(--surface);border-color:var(--line);border-radius:4px}
.visibility-rule,.signup-explanation,.profile-group-link{
  border:1px solid var(--orange2);
  border-radius:3px;
  background:rgba(206,106,59,.1);
  color:#71412f
}
.controlled-suggestions,.schedule-artist-suggestions{
  background:var(--surface);
  border-color:var(--line);
  box-shadow:var(--shadow)
}
.controlled-suggestions button,.group-search-results button{
  background:var(--surface);
  color:var(--text);
  border-color:var(--line);
  border-radius:3px
}
.controlled-values>button,.affiliation-chip,.profile-tags span{
  border-color:var(--orange2);
  background:rgba(206,106,59,.12);
  color:var(--orange2);
  border-radius:999px!important
}
.selected-venue{
  border-color:var(--orange2);
  border-radius:3px;
  background:var(--surface2)
}
.selected-venue button{color:var(--orange2)}
.profile-photo-preview,.avatar{border-radius:3px!important;border:1px solid var(--line);background:var(--orange)}
.entity-photo-preview,.album-upload-preview{border-radius:3px;filter:grayscale(.72) sepia(.18) saturate(.72)}

.mobile-header{
  min-height:72px;
  padding:11px 14px;
  background:rgba(240,229,210,.94);
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(12px)
}
.brand img{width:108px}
.icon-button,.role-select{
  min-height:39px;
  background:var(--surface);
  color:var(--line);
  border:1px solid var(--line)
}
.bottom-nav{
  padding:7px 5px max(7px,env(safe-area-inset-bottom));
  background:rgba(42,42,39,.97);
  border-top:1px solid var(--line);
  backdrop-filter:blur(12px)
}
.bottom-nav button{min-height:61px;color:var(--surface2);font-size:.55rem;text-transform:uppercase;font-weight:850;border-radius:4px!important}
.bottom-nav button.active{background:var(--orange);color:var(--line)}
.nav-icon{font-size:.82rem}
.global-role-switcher{
  background:rgba(42,42,39,.97);
  border-color:var(--orange);
  border-radius:4px
}
.global-role-label{color:var(--orange)}
.global-role-select{background:var(--line);color:var(--surface);border-color:var(--surface2)}

.hero-carousel{min-height:315px;border:1px solid var(--line);border-radius:4px;box-shadow:none;background:var(--orange)}
.hero-slide,.hero-slide img{min-height:315px}
.hero-slide img,.card-media img,.profile-banner>img,.article-admin-card>img,.article-sort-card>img,.release img{
  filter:grayscale(.78) sepia(.18) saturate(.72) contrast(1.05)
}
.hero-slide::after{background:linear-gradient(180deg,rgba(42,42,39,.02),rgba(42,42,39,.92))}
.hero-content,.hero-content h2,.hero-content p{color:var(--surface)}
.hero-content h2{font-size:2rem;text-transform:uppercase}
.badge,.date-badge{background:var(--line);border:0;color:var(--surface);border-radius:999px}
.date-badge strong{color:var(--orange)}
.carousel-arrows button{border-radius:3px;background:var(--line);color:var(--surface)}
.card{border-radius:4px;background:var(--surface)}
.card-media{background:var(--orange)}
.card-body h3{font-size:1.02rem}
.cards>.card:nth-child(even),.manage-grid>.manage-item:nth-child(even),.admin-row:nth-child(even){background:var(--line);color:var(--surface)}
.cards>.card:nth-child(even) .muted,.cards>.card:nth-child(even) p,.manage-grid>.manage-item:nth-child(even) .muted,.admin-row:nth-child(even) span{color:var(--surface2)}
.tabs{gap:7px}.tabs button,.segmented{border-color:var(--line);background:var(--surface);border-radius:999px!important}.tabs button{color:var(--line)}.tabs button.active,.segmented button.active{background:var(--orange);color:var(--line)}
.filter-grid{display:flex;overflow-x:auto;gap:8px}.filter-grid>*{flex:1 0 190px}.filter-wide{grid-column:auto}
.single-line-filters{border-bottom:1px solid var(--line)}
.empty{border-color:var(--line);border-radius:4px;color:var(--muted)}

.profile-banner{min-height:300px;border-radius:4px;border-color:var(--line);background:var(--line)}
.profile-banner::after{background:linear-gradient(180deg,rgba(42,42,39,.05),rgba(42,42,39,.92))}
.profile-banner-content,.profile-banner-content h1,.profile-banner-content p{color:var(--surface)}
.private-data-grid>span,.profile-facts>span,.profile-facts>a,.release,.performance-list>div{
  background:var(--surface2);
  border-color:var(--line);
  border-radius:3px
}
.member{border-color:rgba(42,42,39,.3)}
.member-link:hover strong,.affiliation-name.current,.affiliation-name-link.current{color:var(--orange2)}
.page-save-notice,.submission-confirmation{border-color:var(--orange2);background:rgba(206,106,59,.1);color:#744330}
.privacy-note,.auto-validation-note{border-color:var(--orange2);background:rgba(206,106,59,.09)}
.privacy-note>span,.privacy-dot,.mail-confirmed{color:var(--orange2)}

.modal{
  width:min(720px,calc(100% - 20px));
  border:1px solid var(--surface2);
  border-radius:5px;
  background:var(--surface);
  color:var(--text);
  box-shadow:0 30px 90px rgba(42,42,39,.45)
}
.modal::backdrop{background:rgba(42,42,39,.84);backdrop-filter:blur(2px)}
.modal-close{border-radius:3px;background:var(--line);color:var(--surface);border-color:var(--line)}
.toast{border:1px solid var(--line);border-radius:3px;background:var(--orange);color:var(--line)}

.sidebar{background:rgba(42,42,39,.98);border-right:1px solid var(--line)}
.sidebar .brand img{filter:none}
.sidebar-nav button{border-radius:4px;color:var(--surface2);text-transform:uppercase;font-size:.72rem;font-weight:850}
.sidebar-nav button.active{background:var(--orange);color:var(--line);border-color:var(--orange)}
.sidebar .brand{padding:10px;background:var(--surface)}
.admin-kpi,.admin-dashboard-card,.admin-tool{border-radius:4px}
.admin-kpi-grid>.stat:nth-child(1){background:var(--orange)}
.notification-head{background:var(--line);color:var(--surface2)}
.notification-row{border-color:var(--line)}
.notification-actions{background:var(--surface2);border-color:var(--line)}
.article-sort-card{background:var(--surface);border-color:var(--line);border-radius:4px}
.rich-editor pre,.article-copy pre{background:var(--line);color:var(--surface);border-radius:3px}

/* Accueil page 4 */
.access-shell{
  min-height:100dvh;
  padding:0;
  color:var(--text);
  background:var(--bg)
}
.access-landing{
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(310px,.92fr);
  align-content:stretch;
  place-items:stretch;
  gap:0;
  padding:0
}
.access-poster{
  position:relative;
  min-height:100dvh;
  padding:clamp(28px,6vw,72px);
  overflow:hidden;
  background:var(--orange);
  border-right:1px solid var(--line)
}
.access-poster h1{max-width:760px;font-size:clamp(4rem,10vw,9rem);line-height:.72;margin:7vh 0 0}
.access-poster>p{position:absolute;left:clamp(28px,6vw,72px);bottom:35px;margin:0;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.65rem;text-transform:uppercase}
.access-entry-card{
  position:relative;
  align-self:center;
  width:min(520px,calc(100% - 44px));
  min-height:620px;
  margin-left:-72px;
  padding:42px;
  z-index:2;
  background:rgba(240,229,210,.96);
  box-shadow:var(--shadow)
}
.access-entry-card h2{font-size:clamp(2.5rem,5vw,5rem);line-height:.78;margin:25px 0}
.access-entry-card>.brand{position:absolute;right:26px;bottom:24px}
.access-entry-card>.brand img{width:150px}
.access-role-list{display:grid;gap:8px;margin-top:26px;padding-top:20px;border-top:1px solid var(--line);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.58rem;text-transform:uppercase}
.vintage-cassette{
  position:absolute;
  left:16%;
  top:48%;
  width:min(260px,42%);
  aspect-ratio:1.2;
  background:var(--surface);
  border:5px solid var(--line);
  box-shadow:18px 18px 0 rgba(42,42,39,.16)
}
.vintage-cassette .cassette-window{position:absolute;left:13%;right:13%;top:16%;height:28%;background:var(--line);border-radius:3px}
.vintage-cassette i{position:absolute;top:52%;width:22%;aspect-ratio:1;border:9px solid var(--line);border-radius:50%}
.vintage-cassette i:nth-of-type(1){left:19%}.vintage-cassette i:nth-of-type(2){right:19%}
.vintage-cassette b{position:absolute;left:17%;right:17%;bottom:10%;height:5px;background:var(--line)}

/* Connexion page 5 */
.access-login{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,.9fr);align-items:center;background:var(--line);padding:44px}
.access-login-poster{position:relative;min-height:calc(100dvh - 88px);padding:45px;color:var(--surface);overflow:hidden}
.access-login-poster h1{font-size:clamp(5rem,11vw,10rem);line-height:.7;color:var(--surface)}
.vintage-microphone{position:absolute;right:10%;bottom:12%;width:180px;height:290px;background:var(--orange)}
.vintage-microphone span{position:absolute;left:50%;top:18%;width:54px;height:106px;transform:translateX(-50%);border-radius:28px!important;background:var(--line)}
.vintage-microphone i{position:absolute;left:50%;top:49%;height:90px;border-left:8px solid var(--line)}
.vintage-microphone::after{content:"ON AIR";position:absolute;left:18px;bottom:15px;font-family:var(--display);font-size:2.2rem;font-weight:900;color:var(--surface)}
.access-login>.access-card{position:relative;width:min(560px,100%);padding:34px;background:var(--surface)}
.access-login>.access-card h1{font-size:clamp(3rem,7vw,5.5rem)}
.access-back{position:absolute;right:16px;top:14px;width:38px;height:38px;border:0;background:transparent;color:var(--line);font-size:1.5rem}

/* Choix du rôle page 6 */
.signup-choice-shell,.signup-access-shell{padding:20px;background:var(--bg)}
.access-topbar{width:min(100%,1040px);padding:0 0 18px;border-bottom:1px solid var(--line)}
.signup-role-page{width:min(720px,100%);margin:34px auto 70px}
.signup-role-page h1{font-size:clamp(4rem,12vw,7.5rem)}
.access-role-grid{grid-template-columns:1fr;margin-top:36px}
.access-role-grid .signup-role-card{
  min-height:120px;
  grid-template-columns:72px 1fr;
  grid-template-rows:auto auto;
  align-items:center;
  gap:4px 20px;
  padding:18px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:4px
}
.access-role-grid .signup-role-card>span{grid-row:1/3;width:auto;height:auto;background:transparent;color:var(--line);font-family:var(--display);font-size:3rem}
.access-role-grid .signup-role-card strong{font-family:var(--display);font-size:1.65rem;text-transform:uppercase}
.access-role-grid .signup-role-card small{font-size:.72rem;color:var(--muted)}
.access-role-grid .signup-role-card.active,.access-role-grid .signup-role-card:hover{background:var(--orange);border-color:var(--line)}
.access-role-grid .signup-role-card.active small,.access-role-grid .signup-role-card:hover small{color:var(--line)}

/* Inscriptions pages 7, 8 et 9 : aucun menu de l'application */
.signup-access-shell>.signup-page{width:min(780px,100%);margin:28px auto 80px;padding:0}
.signup-page h1{max-width:720px;font-size:clamp(3.3rem,9vw,6.5rem)}
.signup-current-role{display:flex;align-items:center;gap:15px;width:max-content;margin:24px 0 6px;padding:11px 15px;border:1px solid var(--line);background:var(--orange)}
.signup-current-role>span{font-family:var(--display);font-size:2.2rem;line-height:1}
.signup-current-role>div{display:grid}.signup-current-role small{font-size:.55rem;text-transform:uppercase}.signup-current-role strong{font-family:var(--display);font-size:1.2rem;text-transform:uppercase}
.signup-detail-form{background:transparent;padding:18px;border-color:var(--line);gap:16px}
.signup-access-shell .signup-detail-form{margin-top:18px}
.profile-photo-first{background:var(--orange)}
.profile-photo-first .field input{background:var(--surface)}
.programmer-venue-section,.venue-create-inline{background:var(--surface)}
.programmer-venue-section>.selected-venue,.signup-access-shell .selected-venue{background:var(--surface2);color:var(--line)}
.signup-access-shell .bottom-nav,.signup-choice-shell .bottom-nav{display:none!important}

@media(max-width:760px){
  .access-landing{grid-template-columns:58% 42%;min-height:100dvh}
  .access-poster{padding:28px 18px;min-height:100dvh}
  .access-poster h1{font-size:clamp(3rem,13vw,4.5rem);line-height:.73;margin-top:9vh;max-width:230px}
  .access-poster>p{left:18px;bottom:24px;max-width:160px}
  .vintage-cassette{left:18%;top:39%;width:68%;border-width:3px;box-shadow:9px 9px 0 rgba(42,42,39,.14)}
  .vintage-cassette i{border-width:5px}
  .access-entry-card{align-self:start;width:calc(100% + 30px);min-height:560px;margin:88px 12px 60px -30px;padding:28px 18px}
  .access-entry-card h2{font-size:2.25rem;margin:22px 0}
  .access-entry-card>.brand{right:14px;bottom:18px}.access-entry-card>.brand img{width:104px}
  .access-actions{grid-template-columns:1fr}
  .access-login{display:block;padding:0;min-height:100dvh}
  .access-login-poster{min-height:280px;padding:42px 20px 20px}.access-login-poster h1{font-size:4rem}
  .vintage-microphone{right:24px;bottom:20px;width:95px;height:142px}.vintage-microphone span{width:30px;height:55px}.vintage-microphone i{height:39px;border-left-width:5px}.vintage-microphone::after{font-size:1.25rem;left:9px;bottom:8px}
  .access-login>.access-card{width:calc(100% - 28px);margin:-24px auto 28px;padding:24px;z-index:2}.access-login>.access-card h1{font-size:3.5rem}
  .signup-choice-shell,.signup-access-shell{padding:14px}.access-topbar{padding-bottom:13px}
  .signup-role-page{margin-top:23px}.access-role-grid .signup-role-card{grid-template-columns:54px 1fr;min-height:106px}.access-role-grid .signup-role-card>span{font-size:2.45rem}
  .signup-detail-form{padding:14px}
  .page{padding-inline:15px}
}

@media(min-width:650px){
  .cards{grid-template-columns:repeat(3,minmax(0,1fr))}
  .form-grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(min-width:980px){
  .main{margin-left:var(--sidebar)}
  .page{padding:45px 38px 70px}
  .cards{grid-template-columns:repeat(4,minmax(0,1fr))}
  .sidebar .brand img{width:170px}
  .profile-banner{min-height:390px}
}

/* V14 — POSTER SYSTEM VIVANT
   Une affiche qui devient interface : hiérarchie éditoriale, gestes clairs,
   photographie analogique et animations réservées aux changements d’état. */
:root{
  --bg:#eee3d0;
  --surface:#eee3d0;
  --surface2:#e2d2bb;
  --surface3:#d4c0a3;
  --line:#242420;
  --text:#242420;
  --muted:#766d61;
  --orange:#c96b43;
  --orange2:#ad5635;
  --red:#983f32;
  --shadow-hard:8px 8px 0 rgba(36,36,32,.16);
  --shadow-soft:0 24px 70px rgba(36,36,32,.16);
  --display:"Arial Narrow","Aptos Narrow",Impact,"Helvetica Neue Condensed",sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace
}
html{scroll-padding-top:88px}
body{
  background:
    radial-gradient(circle at 12% -8%,rgba(201,107,67,.17),transparent 27rem),
    linear-gradient(112deg,transparent 0 73%,rgba(36,36,32,.035) 73.2% 73.7%,transparent 74%),
    var(--bg)
}
body::before{
  z-index:300;
  opacity:.34;
  mix-blend-mode:multiply;
  background-image:url("../assets/grain.svg");
  background-size:420px 420px
}
body::after{
  z-index:299;
  opacity:.1;
  background:
    repeating-linear-gradient(0deg,transparent 0 31px,rgba(36,36,32,.18) 32px,transparent 33px 96px),
    repeating-linear-gradient(90deg,transparent 0 107px,rgba(36,36,32,.1) 108px,transparent 109px 218px)
}
::selection{background:var(--orange);color:var(--line)}
*{scrollbar-color:var(--orange) var(--surface2)}
:focus-visible{outline:3px solid var(--orange)!important;outline-offset:3px}

/* Typographie et rythme éditorial */
h1,h2,h3,.brand,.stat strong,.entity-type,.status,.badge,.button{
  font-family:var(--display)
}
h1{font-size:clamp(3.35rem,16vw,8rem);line-height:.75;letter-spacing:-.055em}
h2{font-size:clamp(1.7rem,7vw,3rem);line-height:.84;letter-spacing:-.035em}
h3{line-height:.96}
.eyebrow{
  display:flex;
  align-items:center;
  gap:8px;
  min-height:18px;
  color:var(--orange2);
  font:750 .58rem/1.2 var(--mono);
  letter-spacing:.12em
}
.eyebrow::before{content:"";width:20px;height:2px;background:currentColor}
.small{font-size:.74rem}

/* Structure globale */
.main{position:relative;overflow:clip}
.page{
  position:relative;
  width:min(1240px,100%);
  padding:25px 14px 36px
}
.page::before{
  content:"LOCAL SESSION / 016";
  position:absolute;
  right:14px;
  top:29px;
  color:var(--muted);
  font:700 .52rem/1 var(--mono);
  letter-spacing:.08em
}
.page>h1{max-width:92%;margin:13px 0 23px}
.page>.section:first-of-type{margin-top:28px}
.section{margin-top:30px}
.section-head{
  align-items:flex-end;
  padding:0 0 10px;
  margin-bottom:12px;
  border-bottom:1px solid var(--line)
}
.section-head h2{max-width:70%}
/* Mobile : les grands titres d'administration passaient sous (ou par-dessus)
   le bouton d'action de leur en-tête. On empile, on laisse le titre prendre
   toute la largeur et on réduit un peu sa taille pour rester lisible. */
@media (max-width:620px){
  .admin-page .section-head{flex-direction:column;align-items:flex-start;gap:8px}
  .admin-page .section-head h2{max-width:100%;font-size:clamp(1.25rem,6vw,1.7rem);line-height:1.05}
  .admin-page .section-head>*{max-width:100%}
  .admin-page .admin-topline h1{font-size:clamp(1.6rem,8vw,2.4rem);line-height:1}
  .admin-page .stat strong{font-size:clamp(1.5rem,7vw,2.2rem)}
  /* Un titre de section ne doit pas se retrouver masqué par l'en-tête collant
     quand on arrive dessus par un lien interne. */
  .admin-page .section-head,.admin-page h2{scroll-margin-top:120px}
}
.section-head::after{
  content:"↘";
  flex:0 0 auto;
  color:var(--orange2);
  font:900 1rem/1 var(--mono)
}
.section-head:has(.segmented)::after{display:none}
.mobile-header{
  min-height:68px;
  padding:9px 13px;
  background:rgba(238,227,208,.92);
  border-bottom:1px solid var(--line);
  box-shadow:0 5px 0 rgba(36,36,32,.05)
}
.mobile-header .brand img{width:112px}
.mobile-issue{
  margin-left:auto;
  margin-right:9px;
  color:var(--muted);
  font:700 .5rem/1 var(--mono);
  letter-spacing:.08em
}
.icon-button{
  position:relative;
  overflow:hidden;
  border-radius:50%!important;
  background:var(--line);
  color:var(--surface)
}
.icon-button:active{transform:scale(.92)}

/* Composants premium sans surcharge */
.button{
  position:relative;
  overflow:hidden;
  min-height:47px;
  padding:0 15px;
  border-radius:2px!important;
  letter-spacing:.045em;
  transition:transform .16s ease,background-color .16s ease,color .16s ease,box-shadow .16s ease
}
.button>span{transition:transform .16s ease}
.button:hover>span{transform:translate(2px,-2px)}
.button:active{transform:translate(2px,2px);box-shadow:none}
.button:not(.ghost):not(.outline){box-shadow:4px 4px 0 rgba(36,36,32,.16)}
.button.outline,.button.ghost{background:transparent}
.button.is-confirmed,.favorite.is-confirmed,.favorite-action.is-confirmed{
  animation:v14-confirm .35s ease both
}
.favorite{transition:transform .16s ease,color .16s ease}
.favorite:hover,.favorite:active{transform:scale(1.2) rotate(-7deg)}
.badge,.status,.date-badge{
  border-radius:2px!important;
  font-family:var(--mono);
  letter-spacing:.065em
}
.tabs{
  padding-bottom:8px;
  margin-bottom:16px;
  border-bottom:1px solid var(--line)
}
.tabs button{
  border-radius:2px!important;
  text-transform:uppercase;
  font:800 .62rem/1 var(--mono)
}
.segmented{border-radius:2px!important;padding:2px}
.segmented button{border-radius:1px!important;text-transform:uppercase;font:700 .6rem/1 var(--mono)}

/* Une ligne de filtres, pensée comme une bande de contrôle */
.single-line-filters{
  gap:7px;
  margin:0 -14px 15px;
  padding:0 14px 13px;
  border-bottom:1px solid var(--line);
  scroll-snap-type:x proximity
}
.single-line-filters>*{scroll-snap-align:start}
.single-line-filters>.field,.single-line-filters>select,.single-line-filters>button{flex-basis:168px}
.single-line-filters .field label{color:var(--line)}
.field input,.field select,.field textarea,.filter-grid select{
  border-radius:2px!important;
  background:rgba(238,227,208,.78);
  transition:border-color .16s ease,box-shadow .16s ease,background-color .16s ease
}
.field input:focus,.field select:focus,.field textarea:focus{
  background:var(--surface);
  box-shadow:4px 4px 0 rgba(201,107,67,.18)
}
.field label{font:700 .58rem/1.25 var(--mono);letter-spacing:.04em}
.check{border-radius:2px!important;transition:background-color .16s ease,border-color .16s ease}
.check:has(input:checked){background:var(--orange)!important;color:var(--line)!important}

/* Affiche principale */
.hero-carousel{
  min-height:410px;
  border-radius:2px;
  box-shadow:var(--shadow-hard);
  isolation:isolate
}
.hero-carousel::before{
  content:"";
  position:absolute;
  z-index:1;
  inset:0 0 0 64%;
  pointer-events:none;
  background:rgba(201,107,67,.86);
  mix-blend-mode:multiply
}
.hero-carousel::after{
  content:"LIVE / LOCAL / NOW";
  position:absolute;
  z-index:4;
  right:12px;
  top:77px;
  max-width:58px;
  color:var(--surface);
  font:800 .52rem/1.5 var(--mono);
  letter-spacing:.08em;
  writing-mode:vertical-rl
}
.hero-slide,.hero-slide img{min-height:410px}
.hero-slide.active{animation:v14-hero-in .45s cubic-bezier(.22,.8,.22,1) both}
.hero-slide img{
  filter:sepia(.14) saturate(.72) contrast(1.08) brightness(.87);
  transform:scale(1.015)
}
.hero-slide::after{
  background:
    linear-gradient(90deg,rgba(36,36,32,.2),transparent 58%),
    linear-gradient(0deg,rgba(36,36,32,.94),transparent 70%)
}
.hero-content{max-width:88%;padding:22px}
.hero-content h2{max-width:500px;font-size:clamp(2.5rem,10vw,5.8rem);line-height:.76;margin:10px 0 8px}
.hero-content p{max-width:420px;color:var(--surface2)!important}
.carousel-arrows{right:10px;top:10px}
.carousel-arrows button{
  border:1px solid var(--surface);
  border-radius:50%!important;
  background:var(--line);
  transition:transform .16s ease,background-color .16s ease
}
.carousel-arrows button:active{transform:scale(.88)}
.carousel-dots{justify-content:flex-start;margin:13px 0 0}
.dot{height:4px;border-radius:0;background:var(--surface3)}
.dot.active{width:40px;background:var(--orange)}

/* Cartes-affiches : rythme éditorial et grandes photographies */
.cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.card{
  position:relative;
  border-radius:2px;
  box-shadow:none;
  transition:transform .2s cubic-bezier(.22,.8,.22,1),box-shadow .2s ease,background-color .2s ease
}
.card.clickable:hover{transform:translateY(-3px);box-shadow:5px 5px 0 rgba(36,36,32,.14)}
.card.clickable:active{transform:translate(1px,1px);box-shadow:none}
.card-media{height:142px;overflow:hidden}
.card-media::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(238,227,208,.18)
}
.card-media img,
.profile-banner>img,
.article-admin-card>img,
.article-sort-card>img,
.release img{
  filter:sepia(.12) saturate(.7) contrast(1.06);
  transition:transform .45s cubic-bezier(.22,.8,.22,1),filter .3s ease
}
.card.clickable:hover .card-media img{transform:scale(1.035);filter:sepia(.04) saturate(.88) contrast(1.05)}
.card-body{padding:12px}
.card-body h3{font-size:1.25rem;text-transform:uppercase}
.card-body p{font-size:.68rem}
.card-footer{min-height:42px;padding:0 12px 11px;border-top:1px solid rgba(36,36,32,.22)}
.cards>.card:nth-child(3n+1):has(.card-media){grid-column:1/-1;display:grid;grid-template-columns:1.12fr .88fr;grid-template-rows:auto auto}
.cards>.card:nth-child(3n+1):has(.card-media) .card-media{grid-row:1/3;height:190px}
.cards>.card:nth-child(3n+1):has(.card-media) .card-body{align-self:end}
.cards>.card:nth-child(3n+1):has(.card-media) .card-footer{grid-column:2}
.cards>.card:nth-child(even){background:var(--line);color:var(--surface)}
.cards>.card:nth-child(even) .card-footer{border-color:rgba(238,227,208,.22)}
.cards>.card:nth-child(even) .button.ghost{color:var(--surface);border-color:var(--surface2)}

/* Panneaux, profils, gestion et administration */
.panel,.stat,.manage-item,.admin-row,.admin-tool,.article-admin-card,.article-current-section,.archived-articles-section,.admin-entity-list{
  border-radius:2px;
  box-shadow:none
}
.panel{position:relative;padding:17px}
.manage-grid,.admin-dashboard-grid,.admin-tools-grid,.stat-grid{gap:9px}
.manage-item,.admin-tool,.stat{transition:transform .18s ease,box-shadow .18s ease}
.manage-item:hover,.admin-tool:hover{transform:translateY(-2px);box-shadow:4px 4px 0 rgba(36,36,32,.13)}
.entity-type{font-size:.62rem;letter-spacing:.1em}
.stat strong{font-size:2.2rem;line-height:.85}
.profile-banner{
  min-height:390px;
  border-radius:2px;
  box-shadow:var(--shadow-hard)
}
.profile-banner::before{
  content:"PROFILE / LOCAL";
  position:absolute;
  z-index:3;
  right:12px;
  top:12px;
  padding:7px;
  background:var(--orange);
  color:var(--line);
  font:800 .52rem/1 var(--mono)
}
.profile-banner-content{left:18px;right:18px;bottom:18px}
.profile-banner-content h1{max-width:88%;font-size:clamp(3.2rem,13vw,7rem)}
.album-card,.release,.private-data-grid>span,.profile-facts>span,.profile-facts>a,.performance-list>div{
  border-radius:2px!important
}
.notification-form{border-radius:2px}
.notification-row:has(input:checked){background:rgba(201,107,67,.08)}
.admin-page>.admin-topline{padding-bottom:14px;border-bottom:1px solid var(--line)}
.global-role-switcher{
  border-radius:2px;
  box-shadow:5px 5px 0 rgba(36,36,32,.18)
}
.global-role-label,.global-role-select{font-family:var(--mono)}

/* Navigation = repère, pas décoration */
.bottom-nav{
  gap:3px;
  padding:6px 5px max(6px,env(safe-area-inset-bottom));
  background:rgba(36,36,32,.97)
}
.bottom-nav button{
  position:relative;
  min-height:62px;
  border-radius:1px!important;
  font-family:var(--mono);
  transition:background-color .16s ease,color .16s ease,transform .16s ease
}
.bottom-nav button.active{background:var(--orange);color:var(--line)}
.bottom-nav button.active::before{
  content:"";
  position:absolute;
  top:5px;
  width:18px;
  height:2px;
  background:currentColor
}
.bottom-nav button:active{transform:scale(.95)}
.sidebar{background:var(--line)}
.sidebar .brand{padding:12px;background:var(--surface)}
.sidebar-nav button{position:relative;border-radius:2px}
.sidebar-nav button.active::after{content:"→";position:absolute;right:12px}

/* Pastille de notifications non lues, sur l'onglet Profil.
   Rectangle à angles presque vifs et chiffres en chasse fixe, pour rester
   dans l'univers « affiche » plutôt que d'importer la pastille ronde des
   applications grand public. Sur un onglet actif (fond orange), elle
   s'inverse en anthracite, sans quoi elle disparaîtrait dans le fond. */
.nav-badge{
  display:inline-grid;
  place-items:center;
  min-width:17px;
  height:17px;
  padding:0 4px;
  border-radius:2px;
  background:var(--orange);
  color:var(--line);
  font-family:var(--mono);
  font-size:.6rem;
  font-weight:850;
  line-height:1;
  letter-spacing:0
}
/* La pastille s'accroche au coin de l'onglet, pas à l'icône : posée sur
   l'icône, elle en masquait une partie et le pictogramme devenait
   méconnaissable. */
.bottom-nav .nav-badge{
  position:absolute;
  top:5px;
  right:6px
}
.bottom-nav button.active .nav-badge{background:var(--ink);color:var(--cream);box-shadow:0 0 0 2px var(--orange)}
.sidebar-nav button .nav-badge{position:absolute;right:12px;top:50%;transform:translateY(-50%)}
.sidebar-nav button.active .nav-badge{right:34px;background:var(--ink);color:var(--cream)}
@media (prefers-reduced-motion:no-preference){
  .bottom-nav button.has-badge .nav-badge{animation:nav-badge-in .32s var(--ease-out) both}
}
@keyframes nav-badge-in{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:scale(1)}}

/* Modales mobiles : feuille claire, retour immédiat au clic extérieur conservé */
.modal{
  border-radius:2px;
  border:1px solid var(--line);
  box-shadow:12px 12px 0 rgba(36,36,32,.28)
}
.modal[open]{animation:v14-modal-in .22s cubic-bezier(.22,.8,.22,1) both}
.modal::before{
  content:"LOCAL SESSION / ACTION";
  display:block;
  width:max-content;
  margin:0 54px 18px 0;
  padding-bottom:6px;
  border-bottom:2px solid var(--orange);
  color:var(--muted);
  font:750 .5rem/1 var(--mono);
  letter-spacing:.08em
}
.modal-close{border-radius:50%!important;transition:transform .16s ease,background-color .16s ease}
.modal-close:hover{transform:rotate(8deg);background:var(--orange);color:var(--line)}
.toast{
  left:14px;
  right:14px;
  width:auto;
  bottom:94px;
  transform:translateY(14px);
  border-radius:2px;
  box-shadow:5px 5px 0 rgba(36,36,32,.2);
  text-align:center
}
.toast.show{transform:translateY(0)}

/* Accès : page 4, affiche vivante */
.access-landing{background:var(--surface)}
.access-poster{
  isolation:isolate;
  background:
    linear-gradient(132deg,transparent 0 57%,rgba(238,227,208,.16) 57.2% 63%,transparent 63.2%),
    var(--orange)
}
.access-poster::before{
  content:"14";
  position:absolute;
  z-index:-1;
  left:-.08em;
  bottom:-.22em;
  color:rgba(238,227,208,.2);
  font:900 clamp(15rem,47vw,40rem)/.72 var(--display)
}
.access-poster::after{
  content:"";
  position:absolute;
  z-index:-1;
  inset:0;
  background:url("../assets/images/v14-hero.jpg") center/cover;
  opacity:.13;
  mix-blend-mode:multiply;
  filter:grayscale(1) contrast(1.2)
}
.poster-reference{
  position:absolute;
  right:22px;
  top:24px;
  padding-left:10px;
  border-left:2px solid var(--line);
  font:800 .52rem/1.45 var(--mono);
  letter-spacing:.08em
}
.access-poster h1{text-wrap:balance}
.access-entry-card{
  border:1px solid var(--line);
  box-shadow:12px 12px 0 rgba(36,36,32,.16)
}
.entry-index{
  width:max-content;
  margin-bottom:45px;
  padding:7px 9px;
  background:var(--line);
  color:var(--surface);
  font:800 .52rem/1 var(--mono);
  letter-spacing:.08em
}
.access-role-list span{display:flex;justify-content:space-between}
.access-role-list span::after{content:"↗";color:var(--orange2)}
.vintage-cassette{transform:rotate(-5deg);transition:transform .35s cubic-bezier(.22,.8,.22,1)}
.access-poster:hover .vintage-cassette{transform:rotate(-2deg) translateY(-4px)}

/* Connexion et inscription : hiérarchie nette, aucun accès prématuré à l’app */
.access-login-poster{
  background:
    linear-gradient(90deg,rgba(36,36,32,.88),rgba(36,36,32,.45)),
    url("../assets/images/v14-venue.jpg") center/cover
}
.access-login>.access-card{box-shadow:10px 10px 0 rgba(201,107,67,.28)}
.vintage-microphone{opacity:.88;mix-blend-mode:screen}
.signup-role-page{position:relative}
.signup-role-page::after{
  content:"CHOIX / 01";
  position:absolute;
  right:0;
  top:4px;
  font:800 .52rem/1 var(--mono);
  color:var(--muted)
}
.access-role-grid .signup-role-card{
  position:relative;
  overflow:hidden;
  border-radius:2px;
  transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease
}
.access-role-grid .signup-role-card::after{
  content:"→";
  position:absolute;
  right:18px;
  top:50%;
  transform:translateY(-50%);
  font:900 1.2rem/1 var(--mono)
}
.access-role-grid .signup-role-card:hover{transform:translateX(5px);box-shadow:-5px 0 0 var(--line)}
.signup-detail-form{box-shadow:7px 7px 0 rgba(36,36,32,.1)}
.form-section{border-radius:2px}
.profile-photo-first{background:var(--orange)}
.submission-choice,.venue-create-inline,.member-editor-row,.programmer-editor-row,.album-editor{border-radius:2px}

@keyframes v14-hero-in{
  from{opacity:.35;transform:translateX(10px)}
  to{opacity:1;transform:none}
}
@keyframes v14-modal-in{
  from{opacity:0;transform:translateY(14px) scale(.985)}
  to{opacity:1;transform:none}
}
@keyframes v14-confirm{
  0%{transform:scale(.96)}
  65%{transform:scale(1.025)}
  100%{transform:none}
}

@media(max-width:520px){
  .page::before{top:24px;font-size:.47rem}
  .page>h1{font-size:clamp(3.1rem,17vw,4.8rem)}
  .section-head{align-items:flex-end}
  .section-head h2{max-width:66%}
  .hero-carousel,.hero-slide,.hero-slide img{min-height:430px}
  .hero-carousel::before{inset:0 0 0 72%}
  .hero-content{max-width:93%;padding:18px}
  .hero-content h2{font-size:2.75rem;max-width:250px}
  .cards>.card:nth-child(3n+1):has(.card-media){grid-template-columns:1fr;grid-template-rows:auto auto auto}
  .cards>.card:nth-child(3n+1):has(.card-media) .card-media{grid-row:auto;height:210px}
  .cards>.card:nth-child(3n+1):has(.card-media) .card-footer{grid-column:auto}
  .card-body h3{font-size:1.1rem}
  .button-row>.button{flex:1 1 145px}
  .modal{
    width:100%;
    max-width:none;
    max-height:92dvh;
    margin:auto 0 0;
    border-width:1px 0 0;
    padding:22px 15px max(24px,env(safe-area-inset-bottom));
    box-shadow:0 -10px 0 rgba(36,36,32,.18)
  }
  .modal::before{margin-bottom:14px}
  .access-poster h1{font-size:clamp(3rem,13.5vw,4.25rem)}
  .poster-reference{right:12px;top:14px;font-size:.45rem}
  .entry-index{margin-bottom:28px}
  .access-entry-card{box-shadow:7px 7px 0 rgba(36,36,32,.15)}
  .access-role-grid .signup-role-card::after{right:12px}
}

@media(min-width:650px){
  .page{padding-inline:26px}
  .page::before{right:26px}
  .hero-carousel,.hero-slide,.hero-slide img{min-height:500px}
  .cards{grid-template-columns:repeat(3,minmax(0,1fr))}
  .cards>.card:nth-child(3n+1):has(.card-media){grid-column:span 2}
  .cards>.card:nth-child(3n+1):has(.card-media) .card-media{height:235px}
  .toast{left:50%;right:auto;width:max-content;max-width:calc(100% - 32px);transform:translate(-50%,14px)}
  .toast.show{transform:translate(-50%,0)}
}

@media(min-width:980px){
  .page{padding:48px 42px 74px}
  .page::before{right:42px;top:51px}
  .page>h1{font-size:clamp(5rem,9vw,8.5rem);margin-bottom:38px}
  .hero-carousel,.hero-slide,.hero-slide img{min-height:560px}
  .hero-content{padding:34px}
  .cards{grid-template-columns:repeat(4,minmax(0,1fr));gap:11px}
  .cards>.card:nth-child(3n+1):has(.card-media){grid-column:span 2}
  .cards>.card:nth-child(3n+1):has(.card-media) .card-media{height:260px}
  .sidebar{padding-top:28px}
  .sidebar-nav{margin-top:50px}
  .sidebar-nav::before{
    content:"NAVIGATION / V16";
    display:block;
    margin:0 0 12px;
    color:var(--orange);
    font:700 .5rem/1 var(--mono);
    letter-spacing:.08em
  }
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* V15 — priorité mobile : grilles régulières et titres directs */
.eyebrow{display:none!important}

.view-agenda .cards,
.view-discover .cards{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  align-items:stretch;
  gap:8px
}
.view-agenda .cards>.card,
.view-discover .cards>.card{
  display:flex!important;
  grid-column:auto!important;
  grid-row:auto!important;
  flex-direction:column;
  min-width:0;
  height:100%
}
.view-agenda .cards>.card .card-media,
.view-discover .cards>.card .card-media{
  grid-row:auto!important;
  width:100%;
  height:auto!important;
  aspect-ratio:4/3
}
.view-agenda .cards>.card .card-body,
.view-discover .cards>.card .card-body{
  flex:1;
  align-self:stretch!important;
  width:100%;
  padding:10px
}
.view-agenda .cards>.card .card-footer,
.view-discover .cards>.card .card-footer{
  grid-column:auto!important;
  width:100%;
  min-height:46px;
  margin-top:auto;
  padding:8px 10px;
  gap:6px
}
.view-agenda .cards>.card .card-body h3,
.view-discover .cards>.card .card-body h3{
  font-size:clamp(.92rem,4.4vw,1.16rem);
  overflow-wrap:anywhere
}
.view-agenda .cards>.card .card-body p,
.view-discover .cards>.card .card-body p{
  font-size:.64rem;
  overflow-wrap:anywhere
}
.view-agenda .cards>.card .card-footer .button,
.view-discover .cards>.card .card-footer .button{
  flex:1 1 auto;
  width:auto;
  min-width:0;
  min-height:38px;
  padding:6px 7px;
  font-size:.56rem;
  line-height:1.08;
  white-space:normal
}
.view-agenda .cards>.card .date-badge{
  top:7px;
  left:7px;
  padding:5px 6px
}

@media(max-width:360px){
  .view-agenda .cards,.view-discover .cards{gap:6px}
  .view-agenda .cards>.card .card-body,
  .view-discover .cards>.card .card-body{padding:8px}
  .view-agenda .cards>.card .card-footer,
  .view-discover .cards>.card .card-footer{padding:7px 8px}
}

@media(min-width:700px){
  .view-agenda .cards,
  .view-discover .cards{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:10px}
  .view-agenda .cards>.card .card-body h3,
  .view-discover .cards>.card .card-body h3{font-size:1.2rem}
  .view-agenda .cards>.card .card-body p,
  .view-discover .cards>.card .card-body p{font-size:.7rem}
}

/* V16 — contrôle global du format de prévisualisation Admin */
.global-admin-controls{
  position:fixed;
  z-index:90;
  top:10px;
  right:12px;
  display:flex;
  align-items:stretch;
  gap:6px;
  font-family:var(--mono)
}
.admin-role-control{
  position:relative;
  display:flex;
  flex:0 1 auto;
  align-items:center;
  gap:7px;
  min-width:0;
  min-height:42px;
  padding:5px 7px 5px 10px;
  border:1px solid var(--orange);
  border-radius:2px;
  background:rgba(36,36,32,.97);
  pointer-events:auto;
  backdrop-filter:blur(14px);
  box-shadow:4px 4px 0 rgba(36,36,32,.18)
}
.admin-role-label{
  flex:0 0 auto;
  color:var(--orange);
  font:900 .52rem/1 var(--mono);
  letter-spacing:.08em
}
.admin-role-select{
  flex:1 1 auto;
  min-width:0;
  min-height:30px;
  padding:0 24px 0 8px;
  border:1px solid rgba(238,227,208,.26);
  border-radius:1px;
  background:transparent;
  color:var(--surface2);
  font:800 .62rem/1 var(--mono);
  text-transform:uppercase;
  appearance:none;
  -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23c96b45'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 8px center
}
.admin-role-select option{background:#242420;color:var(--cream)}
.admin-role-select:hover,
.admin-role-select:focus-visible{border-color:var(--orange)}
.global-device-switcher{
  display:flex;
  align-items:center;
  gap:3px;
  min-height:42px;
  padding:5px;
  border:1px solid var(--orange);
  border-radius:2px;
  background:rgba(36,36,32,.97);
  color:var(--surface);
  box-shadow:4px 4px 0 rgba(36,36,32,.18);
  backdrop-filter:blur(14px)
}
.global-device-label{
  padding:0 6px 0 3px;
  color:var(--orange);
  font-size:.52rem;
  font-weight:900;
  letter-spacing:.08em
}
.global-device-switcher button{
  min-height:30px;
  padding:0 8px;
  border:1px solid rgba(238,227,208,.26);
  border-radius:1px!important;
  background:transparent;
  color:var(--surface2);
  font:800 .58rem/1 var(--mono);
  text-transform:uppercase;
  transition:background-color .16s ease,color .16s ease,transform .16s ease
}
.global-device-switcher button.active{
  border-color:var(--orange);
  background:var(--orange);
  color:var(--line)
}
.global-device-switcher button:active{transform:scale(.94)}

/* Le cadre Mobile force réellement la structure téléphone sur toutes les vues. */
body[data-admin-device="mobile"]{
  overflow-x:hidden;
  background:var(--line)
}
body[data-admin-device="mobile"] #app{
  width:min(430px,100vw);
  min-height:100vh;
  margin:0 auto;
  background:var(--bg);
  box-shadow:0 0 0 1px rgba(238,227,208,.22),0 30px 100px rgba(0,0,0,.42)
}
.app-shell.device-mobile{
  width:100%;
  min-width:0;
  min-height:100vh;
  background:var(--bg)
}
.app-shell.device-mobile .sidebar{display:none!important}
.app-shell.device-mobile .main{
  min-width:0;
  min-height:100vh;
  margin-left:0!important;
  padding-bottom:88px!important
}
.app-shell.device-mobile .mobile-header{display:flex!important}
.app-shell.device-mobile .bottom-nav{
  display:flex!important;
  left:50%;
  right:auto;
  width:min(430px,100vw);
  transform:translateX(-50%)
}
.app-shell.device-mobile .page{
  width:100%;
  max-width:430px;
  padding:25px 14px 124px
}
.app-shell.device-mobile .page::before{right:14px;top:29px}
.app-shell.device-mobile .page>h1{
  max-width:92%;
  margin:13px 0 23px;
  font-size:clamp(3.1rem,17vw,4.8rem)
}
.app-shell.device-mobile h2{font-size:clamp(1.7rem,7vw,2.2rem)}
.app-shell.device-mobile .hero-carousel,
.app-shell.device-mobile .hero-slide,
.app-shell.device-mobile .hero-slide img{min-height:430px}
.app-shell.device-mobile .hero-carousel::before{inset:0 0 0 72%}
.app-shell.device-mobile .hero-content{max-width:93%;padding:18px}
.app-shell.device-mobile .hero-content h2{max-width:250px;font-size:2.75rem}
.app-shell.device-mobile .cards{grid-template-columns:repeat(2,minmax(0,1fr))!important}
.app-shell.device-mobile .view-agenda .cards,
.app-shell.device-mobile.view-agenda .cards,
.app-shell.device-mobile .view-discover .cards,
.app-shell.device-mobile.view-discover .cards{grid-template-columns:repeat(2,minmax(0,1fr))!important}
.app-shell.device-mobile .stat-grid,
.app-shell.device-mobile .admin-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
.app-shell.device-mobile .manage-grid,
.app-shell.device-mobile .admin-grid,
.app-shell.device-mobile .admin-dashboard-grid,
.app-shell.device-mobile .profile-detail-grid,
.app-shell.device-mobile .group-info-grid,
.app-shell.device-mobile .public-identity,
.app-shell.device-mobile .stats-control-panel{grid-template-columns:1fr!important}
.app-shell.device-mobile .admin-tools-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
.app-shell.device-mobile .form-grid.two,
.app-shell.device-mobile .private-data-grid,
.app-shell.device-mobile .profile-facts,
.app-shell.device-mobile .choice-grid{grid-template-columns:1fr!important}
.app-shell.device-mobile .admin-topline{flex-direction:column!important;align-items:stretch!important}
.app-shell.device-mobile .directory-list-head{display:none!important}
.app-shell.device-mobile .directory-list-row{
  grid-template-columns:minmax(0,1fr) auto!important;
  gap:6px 12px!important
}
.app-shell.device-mobile .directory-list-row>span:nth-child(n+3){grid-column:1/-1!important}
.app-shell.device-mobile .directory-list-row>b{grid-column:2!important;grid-row:1/4!important}
.app-shell.device-mobile .profile-banner{min-height:390px}
.app-shell.device-mobile .profile-banner-content h1{font-size:clamp(3.1rem,15vw,4.6rem)}
.app-shell.device-mobile .single-line-filters{margin-inline:-14px;padding-inline:14px}

/* Le cadre Ordinateur force la navigation latérale et la largeur de bureau. */
body[data-admin-device="desktop"]{overflow-x:auto;background:var(--bg)}
body[data-admin-device="desktop"] #app{width:100%;min-width:1080px}
.app-shell.device-desktop{min-width:1080px}
.app-shell.device-desktop .sidebar{
  display:block!important;
  position:fixed;
  inset:0 auto 0 0;
  width:var(--sidebar);
  padding:28px 18px;
  z-index:40
}
.app-shell.device-desktop .main{
  min-width:0;
  min-height:100vh;
  margin-left:var(--sidebar)!important;
  padding-bottom:30px!important
}
.app-shell.device-desktop .mobile-header,
.app-shell.device-desktop .bottom-nav{display:none!important}
.app-shell.device-desktop .page{
  width:min(1240px,100%);
  max-width:none;
  padding:48px 42px 74px
}
.app-shell.device-desktop .page::before{right:42px;top:51px}
.app-shell.device-desktop .page>h1{font-size:clamp(5rem,9vw,8.5rem);margin-bottom:38px}
.app-shell.device-desktop .view-agenda .cards,
.app-shell.device-desktop.view-agenda .cards,
.app-shell.device-desktop .view-discover .cards,
.app-shell.device-desktop.view-discover .cards{grid-template-columns:repeat(3,minmax(0,1fr))!important}
.app-shell.device-desktop .admin-kpi-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important}
.app-shell.device-desktop .admin-dashboard-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
.app-shell.device-desktop .admin-tools-grid{grid-template-columns:repeat(5,minmax(0,1fr))!important}
.app-shell.device-desktop .manage-grid,
.app-shell.device-desktop .admin-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}

/* Les fenêtres suivent elles aussi le format sélectionné. */
.modal[data-preview-device="mobile"]{
  width:min(430px,100%);
  max-width:430px;
  max-height:92dvh;
  margin:auto auto 0;
  border-width:1px 0 0;
  padding:22px 15px max(24px,env(safe-area-inset-bottom));
  box-shadow:0 -10px 0 rgba(36,36,32,.18)
}
.modal[data-preview-device="desktop"]{width:min(840px,calc(100% - 40px));max-height:90vh}
.modal[data-preview-device="desktop"]:has(.entity-creation-form){width:min(1040px,calc(100% - 40px))}

@media(max-width:700px){
  .global-admin-controls{
    left:6px;
    right:6px;
    top:6px;
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:4px
  }
  .admin-role-control,
  .global-device-switcher{box-shadow:2px 2px 0 rgba(36,36,32,.16)}
  .admin-role-control{grid-column:1/-1;grid-row:2;width:100%;padding-inline:5px}
  .global-device-switcher{grid-column:2;grid-row:1}
  .admin-role-label,.global-device-label{display:none!important}
  .admin-role-select{width:100%;font-size:.6rem}
  .global-device-switcher button{padding-inline:6px;font-size:.52rem}
  .app-shell.admin-session.device-mobile .main{padding-top:100px!important}
  .app-shell.admin-session.device-mobile .mobile-header{top:100px;padding-right:13px!important}
  .app-shell.device-desktop .global-admin-controls{position:fixed}
}

/* Demandes de contact professionnelles — volontairement sans interface de chat. */
.contact-profile-action{margin-top:12px}
.contact-management{border-top:1px solid var(--line);padding-top:24px}
.contact-columns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.contact-columns>div>h3{margin:0 0 10px;font:900 .72rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.contact-request-list{display:grid;gap:10px}
.contact-request-card{display:grid;gap:9px;padding:14px;border:1px solid var(--line);background:var(--surface2)}
.contact-request-card h3,.contact-request-card p{margin:0}
.contact-request-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.contact-request-head time{color:var(--muted);font:800 .62rem/1 var(--mono)}
.contact-response,.contact-revealed{padding:10px;border-left:3px solid var(--orange);background:var(--surface)}
.contact-response small,.contact-revealed small{display:block;margin-bottom:4px;color:var(--muted);font:800 .6rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.contact-retention-note{margin:16px 0;padding:12px;border:1px solid var(--orange);background:rgba(201,107,67,.08);font-size:.82rem;line-height:1.45}
.contact-modal>h1{font-size:clamp(2.2rem,8vw,4.2rem)!important;overflow-wrap:anywhere}
.contact-thread-list{display:grid;gap:8px;max-height:40vh;overflow:auto}
.contact-thread-message{padding:10px 12px;border:1px solid var(--line);background:var(--surface2)}
.contact-thread-message p{margin:4px 0 0}
.contact-thread-message-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.contact-thread-message-head time{color:var(--muted);font:800 .6rem/1 var(--mono)}
.contact-thread-warning{margin:14px 0;padding:10px 12px;border:1px solid var(--orange);background:rgba(201,107,67,.08)}
.admin-row-icon{display:inline-block;margin-right:5px;opacity:.75}

/* Onboarding — étape « Choisis ton univers » (3 domaines illustrés) */
.signup-domain-grid{display:grid;grid-template-columns:1fr;gap:9px;margin-top:22px}
@media(min-width:640px){.signup-domain-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.signup-domain-card{min-height:150px;border:1px solid var(--line);border-radius:16px;background:var(--surface);color:var(--text);text-align:left;display:grid;align-content:start;gap:0;cursor:pointer;overflow:hidden;padding:0}
.signup-domain-card.active{border-color:var(--orange);box-shadow:0 0 0 1px var(--orange) inset}
.signup-domain-media{position:relative;display:block;width:100%;aspect-ratio:16/10;background:var(--anthracite);overflow:hidden}
.signup-domain-media img{width:100%;height:100%;object-fit:cover;display:block}
/* Le nom du domaine est écrit en blanc PAR-DESSUS l'image (avec un dégradé
   sombre au pied pour rester lisible quelle que soit la photo) ; la
   description vient sous l'image. */
.signup-domain-media::after{
  content:"";
  position:absolute;
  inset:auto 0 0 0;
  height:62%;
  background:linear-gradient(180deg,rgba(20,20,18,0),rgba(20,20,18,.82));
  pointer-events:none
}
.signup-domain-title{
  position:absolute;
  z-index:2;
  left:18px;
  right:18px;
  bottom:14px;
  color:#fff;
  font:800 clamp(1.5rem,5.5vw,2.1rem)/1 var(--display);
  letter-spacing:-.01em;
  text-transform:uppercase;
  text-shadow:0 2px 14px rgba(0,0,0,.5)
}
.signup-domain-card-body{display:block;padding:14px 16px 18px}
.signup-domain-icon{font-size:2.2rem;line-height:1}
.signup-domain-card strong{font-size:1.1rem}
.signup-domain-card small{color:var(--muted);line-height:1.4}
.signup-domain-subroles{margin-top:16px;padding:16px}
.signup-domain-subroles h3{margin:0 0 10px}
.signup-domain-subroles-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.signup-domain-subroles-head h3{margin:0}
.signup-domain-remove{background:none;border:0;color:var(--muted);font:inherit;cursor:pointer;text-decoration:underline;padding:0;white-space:nowrap}
#signupDomainContinue{margin-top:22px}

/* Popups « ce que ton rôle permet de faire », affichés juste après l'inscription */
.role-rights-modal{display:grid;gap:14px;text-align:center;padding:0}
.role-rights-image{position:relative;width:100%;aspect-ratio:16/10;border-radius:14px;overflow:hidden;background:var(--anthracite);margin:0;display:grid;place-items:center}
.role-rights-image img{width:100%;height:100%;object-fit:cover;display:block}
.role-rights-modal h1{margin:0;padding:0 8px}
.role-rights-modal p{margin:0;text-align:left;line-height:1.55;color:var(--text);padding:0 8px}
.role-rights-modal .button{justify-self:center;min-width:180px;margin-bottom:8px}
@media(max-width:700px){
  .contact-columns{grid-template-columns:1fr}
  .contact-management>.section-head{align-items:stretch;flex-direction:column}
  .contact-management>.section-head .button{width:100%}
  .profile-banner-content .contact-profile-action{width:100%}
}

/* V17 — finition mobile, ressources officielles et recherche contextuelle */
:root{
  --mobile-gutter:clamp(12px,4.25vw,20px)
}

body{
  background-color:var(--bg);
  background-image:url("../assets/local-session-background.png");
  background-repeat:repeat;
  background-position:center top;
  background-size:724px 1024px
}
body::before,
body::after{display:none!important}
#app,
.app-shell,
.main,
.page{background-color:transparent}
.access-shell,
body[data-admin-device="mobile"] #app{
  background-color:var(--bg);
  background-image:url("../assets/local-session-background.png");
  background-repeat:repeat;
  background-position:center top;
  background-size:724px 1024px
}
body[data-admin-device="mobile"]{background:var(--line)}
.access-poster{background-color:var(--orange);background-image:none}

.brand{
  width:max-content;
  padding:5px 7px;
  background:var(--line);
  border-radius:2px
}
.brand img{width:104px;height:auto}
.sidebar .brand{padding:0;background:transparent}
.sidebar .brand img{width:158px}
.mobile-header{
  min-height:62px;
  justify-content:flex-start;
  padding:9px var(--mobile-gutter);
  background:rgba(36,36,32,.96);
  border-color:rgba(238,227,208,.16)
}
.mobile-header .brand{padding:0;background:transparent}
.mobile-header .brand img{width:94px}
.mobile-issue,
.mobile-header .header-actions{display:none!important}

.page::before{display:none!important;content:none!important}
.sidebar-nav::before{content:"NAVIGATION"!important}

.section-head-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:7px;
  min-width:0
}
.inline-search-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  min-height:42px;
  padding:0 12px;
  border:1px solid var(--line);
  border-radius:2px;
  background:var(--line);
  color:var(--surface);
  font:800 .62rem/1 var(--mono);
  letter-spacing:.035em;
  text-transform:uppercase;
  white-space:nowrap;
  transition:transform .16s ease,background-color .16s ease,color .16s ease
}
.inline-search-button>span:first-child{font-size:1rem;line-height:1}
.inline-search-button:hover,
.inline-search-button:focus-visible{background:var(--orange);color:var(--line)}
.inline-search-button:active{transform:scale(.96)}
.agenda-section-head{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center
}
.agenda-section-head h2{max-width:none}
.agenda-section-head .section-head-actions{display:contents}
.agenda-section-head .inline-search-button{grid-column:2}
.agenda-section-head .segmented{grid-column:1/-1;margin-top:8px}
.agenda-section-head .segmented button{flex:1}
.discover-search-field{min-width:150px!important}
.discover-search-field .inline-search-button{width:100%}

.single-line-filters,
.app-shell.device-mobile .single-line-filters{
  width:100%;
  max-width:100%;
  margin-inline:0!important;
  padding-inline:0!important;
  scroll-padding-inline:0;
  overscroll-behavior-inline:contain
}

.article-preview>.eyebrow,
.modal::before{display:none!important;content:none!important}
.article-brand-mini{
  display:inline-flex;
  margin:0 0 18px;
  padding:4px 6px;
  background:var(--line)
}
.article-brand-mini img{width:72px;height:auto}
.article-preview>h1{
  max-width:12ch;
  margin:0 0 18px;
  font-size:clamp(2.35rem,8vw,4.75rem);
  line-height:.82;
  letter-spacing:-.045em;
  overflow-wrap:anywhere
}
.article-preview>img{margin-top:0;border-radius:3px}

.view-profile .profile-title-row h1{
  max-width:11ch;
  margin:0 0 8px;
  font-size:clamp(2.7rem,8vw,4.4rem);
  line-height:.82
}
.profile-title-row{align-items:flex-end;flex-wrap:wrap;margin-bottom:18px}
.profile-title-row>div{min-width:0}
.profile-edit-action{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:44px;
  padding:0 14px;
  border:1px solid var(--line);
  border-radius:2px;
  background:var(--line);
  color:var(--surface);
  font:800 .62rem/1 var(--mono);
  letter-spacing:.03em;
  text-transform:uppercase;
  white-space:nowrap;
  transition:transform .16s ease,background-color .16s ease,color .16s ease
}
.profile-edit-action>span:first-child{color:var(--orange);font-size:1rem}
.profile-edit-action:hover,
.profile-edit-action:focus-visible{background:var(--orange);color:var(--line)}
.profile-edit-action:hover>span:first-child,
.profile-edit-action:focus-visible>span:first-child{color:var(--line)}
.profile-edit-action:active{transform:scale(.97)}

@media(min-width:560px){
  .agenda-section-head{grid-template-columns:minmax(0,1fr) auto auto}
  .agenda-section-head .inline-search-button{grid-column:2}
  .agenda-section-head .segmented{grid-column:3;margin-top:0}
}

@media(max-width:700px){
  .page,
  .app-shell.device-mobile .page{
    width:100%;
    max-width:430px;
    padding-right:var(--mobile-gutter)!important;
    padding-left:var(--mobile-gutter)!important
  }
  .single-line-filters>.field,
  .single-line-filters>select,
  .single-line-filters>button{
    flex:0 0 min(76vw,260px)
  }
  .discover-filters>.field{min-width:0}
  .discover-search-field{flex-basis:150px!important}
  .view-profile .profile-title-row h1{font-size:clamp(2.65rem,13vw,3.55rem)}
  .article-preview>h1{font-size:clamp(2.25rem,12vw,3.55rem)}
  .article-copy{font-size:.92rem;line-height:1.62}
}

@media(max-width:370px){
  .search-button-label{display:none}
  .agenda-section-head .inline-search-button{width:42px;padding:0}
  .segmented button{padding-inline:6px;font-size:.54rem}
  .profile-title-row{align-items:stretch}
  .profile-edit-action{width:100%}
}

/* V18 — administration lisible et expérience mobile prioritaire */
:root{
  --status-green:#6f8270;
  --status-green-bg:#d5ddd0;
  --status-yellow:#927548;
  --status-yellow-bg:#e5dac0;
  --status-red:#86554d;
  --status-red-bg:#ddc9c2;
  --status-gray:#74716b;
  --status-gray-bg:#d4cfc5
}

/* Contrastes fonctionnels sur les surfaces anthracite. */
.button.ghost{
  background:var(--surface2);
  color:var(--line);
  border-color:var(--line)
}
.button.outline{
  background:transparent;
  color:var(--line);
  border-color:var(--line)
}
.button.ghost:hover,.button.ghost:focus-visible,
.button.outline:hover,.button.outline:focus-visible{background:var(--orange);color:var(--line)}
.cards>.card:nth-child(even) .button.ghost,
.manage-grid>.manage-item:nth-child(even) .button.ghost,
.admin-row:nth-child(even) .button.ghost{
  background:var(--surface2)!important;
  color:var(--line)!important;
  border-color:var(--line)!important
}
.profile-banner .button.outline,.hero-content .button.outline{
  background:rgba(36,36,32,.62);
  color:var(--surface);
  border-color:var(--surface)
}
.stats-result-list button,.data-table button,.directory-list-row{
  color:var(--line)!important
}
.stats-result-list button strong,.data-table button strong,.directory-list-row strong{color:inherit!important}
.stats-result-list button .muted,.data-table button .muted{color:var(--muted)!important}
a,.link{transition:color .15s ease}
a:hover,a:focus-visible,a:active,.link:hover,.link:focus-visible,.link:active{color:var(--orange2)!important}

/* Les filtres Admin restent au-dessus des décors et acceptent clavier/tactile. */
.admin-filter-bar,.admin-directory-tools,.stats-search-panel{
  position:relative;
  z-index:5;
  display:grid;
  grid-template-columns:minmax(0,1.5fr) minmax(180px,.75fr);
  gap:12px;
  pointer-events:auto
}
.admin-filter-bar .field{min-width:0}
.admin-filter-bar input,.admin-filter-bar select,
.admin-directory-tools input,.admin-directory-tools select,
.stats-search-panel input,.stats-search-panel select{
  position:relative;
  z-index:6;
  width:100%;
  pointer-events:auto;
  touch-action:manipulation;
  user-select:text;
  font-size:16px
}

.admin-manage-heading h1{font-size:clamp(3.4rem,7vw,5.8rem)!important;line-height:.82}
.moderation-legend{display:flex;flex-wrap:wrap;gap:7px;margin:12px 0}
.moderation-legend span,.moderation-status{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:5px 9px;
  border:1px solid currentColor;
  border-radius:2px;
  font:800 .62rem/1 var(--mono);
  letter-spacing:.04em;
  text-transform:uppercase
}
.moderation-legend .approved,.moderation-approved .moderation-status{background:var(--status-green-bg);color:var(--status-green)}
.moderation-legend .pending,.moderation-pending .moderation-status{background:var(--status-yellow-bg);color:var(--status-yellow)}
.moderation-legend .removed,.moderation-removed .moderation-status{background:var(--status-red-bg);color:var(--status-red)}
.moderation-legend .archived,.moderation-archived .moderation-status{background:var(--status-gray-bg);color:var(--status-gray)}
.moderation-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:14px}
.moderation-card{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  min-width:0;
  padding:16px;
  border:1px solid var(--line);
  border-left-width:6px;
  border-radius:3px;
  background:rgba(238,227,208,.72)
}
.moderation-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;width:100%}
.moderation-card h3{margin:18px 0 6px;font-size:1.2rem}
.moderation-card p{margin:0 0 8px;color:var(--muted);font-size:.88rem;line-height:1.45}
.moderation-card>small{display:block;margin:0 0 14px;color:var(--line)}
.moderation-card .button{margin-top:auto}
.moderation-approved{border-left-color:var(--status-green);background:color-mix(in srgb,var(--status-green-bg) 62%,var(--surface))}
.moderation-pending{border-left-color:var(--status-yellow);background:color-mix(in srgb,var(--status-yellow-bg) 64%,var(--surface))}
.moderation-removed{border-left-color:var(--status-red);background:color-mix(in srgb,var(--status-red-bg) 62%,var(--surface))}
.moderation-archived{border-left-color:var(--status-gray);background:color-mix(in srgb,var(--status-gray-bg) 62%,var(--surface))}
.moderation-action-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-top:14px}
.status-action{border-color:currentColor!important;box-shadow:none!important}
.status-action.approved{background:var(--status-green-bg)!important;color:#344537!important}
.status-action.pending{background:var(--status-yellow-bg)!important;color:#55442a!important}
.status-action.removed{background:var(--status-red-bg)!important;color:#543630!important}
.status-action.archived{background:var(--status-gray-bg)!important;color:#403e3a!important}

.registered-user-list{border:1px solid var(--line);margin-top:14px}
.registered-user-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto auto;
  align-items:center;
  gap:16px;
  padding:15px;
  background:rgba(238,227,208,.7);
  border-bottom:1px solid rgba(36,36,32,.36)
}
.registered-user-row:last-child{border-bottom:0}
.registered-user-row>div:first-child{display:grid;gap:4px;min-width:0}
.registered-user-row>div:first-child strong{font-size:1rem}
.registered-user-row>div:first-child small{overflow-wrap:anywhere;color:var(--muted)}
.user-account-state{display:grid;gap:4px;min-width:124px;padding:8px 10px;border:1px solid currentColor;background:var(--status-green-bg);color:var(--status-green)}
.user-account-state span{font:800 .62rem/1 var(--mono);text-transform:uppercase}
.user-account-state small{color:var(--line)}
.user-account-state.state-restricted{background:var(--status-yellow-bg);color:var(--status-yellow)}
.user-account-state.state-blocked{background:var(--status-red-bg);color:var(--status-red)}
.user-warning-list{display:grid;gap:8px}
.user-warning{position:relative;padding:12px 44px 12px 12px;border:1px solid var(--status-yellow);background:var(--status-yellow-bg)}
.user-warning.warning-critical{border-color:var(--status-red);background:var(--status-red-bg)}
.user-warning.warning-info{border-color:var(--status-gray);background:var(--status-gray-bg)}
.user-warning>div{display:flex;justify-content:space-between;gap:8px;font:800 .62rem/1 var(--mono);text-transform:uppercase}
.user-warning p{margin:10px 0 0;line-height:1.45}
.user-warning>button{position:absolute;top:7px;right:7px;width:30px;height:30px;border:1px solid var(--line);background:transparent;color:var(--line)}

/* Éditeur d'articles : outils essentiels d'abord, options avancées repliables. */
.rich-article-form,.rich-article-form>*{min-width:0}
.editor-shell{overflow:hidden;border:1px solid var(--line);background:var(--surface2);color:var(--line)}
/* Barre d'outils dans les tons du fond (crème/anthracite) plutôt qu'un bloc
   noir : le contraste reste net mais l'ensemble appartient à l'univers du
   site, et les commandes sont regroupées par rangées lisibles. */
.editor-toolbar{display:flex;flex-direction:column;gap:6px;padding:10px;background:var(--surface2);border-bottom:1px solid var(--line)}
.editor-toolbar-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.editor-toolbar select,.editor-toolbar button,.editor-toolbar .editor-color{min-width:0;min-height:38px;border:1px solid rgba(36,36,32,.34);background:var(--surface);color:var(--line)}
.editor-toolbar button{padding:6px 10px;font:800 .68rem/1 var(--mono);cursor:pointer}
.editor-toolbar button:hover,.editor-toolbar button:focus-visible{border-color:var(--orange);color:var(--orange2)}
.editor-toolbar select{padding:0 9px;flex:1 1 160px}
.editor-toolbar .editor-color{display:flex;align-items:center;gap:6px;padding:4px 8px;font:800 .58rem/1 var(--mono);text-transform:uppercase}
.editor-toolbar .editor-color input{width:26px;height:26px;padding:0;border:0;background:transparent;cursor:pointer}
.editor-color-label{font:800 .58rem/1 var(--mono);text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}
/* Pastilles de couleur : la teinte est visible directement, pas de nuancier
   système à deviner. */
.editor-swatch{display:inline-flex;align-items:center;justify-content:center;width:34px;min-height:34px;padding:3px}
.editor-swatch span{display:block;width:100%;height:22px;border:1px solid rgba(36,36,32,.3)}
.editor-swatch.is-none span{background:repeating-linear-gradient(45deg,transparent,transparent 4px,rgba(36,36,32,.35) 4px,rgba(36,36,32,.35) 6px)}
.rich-editor{min-height:260px;padding:18px;background:var(--surface);color:var(--line);font-size:1rem;line-height:1.65;overflow-wrap:anywhere}
.rich-editor:empty::before{color:var(--muted)}
.editor-advanced{border-top:1px solid var(--line);background:var(--surface)}
.editor-advanced summary{padding:14px 16px;cursor:pointer;font:800 .68rem/1.2 var(--mono);text-transform:uppercase;color:var(--line);list-style-position:inside}
.editor-advanced[open] summary{border-bottom:1px solid var(--line);background:var(--status-gray-bg)}
.editor-advanced-content{display:grid;gap:0;background:var(--surface)}
.editor-insert-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:8px;padding:10px;border-bottom:1px solid rgba(36,36,32,.25)}
.editor-insert-row input,.editor-code-grid textarea{background:var(--surface2)!important;color:var(--line)!important;border-color:var(--line)!important;font-size:16px}
.editor-code-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:10px}
.editor-code-grid .field{min-width:0}
.editor-code-grid .button{width:100%;margin-top:7px}
.editor-drop-hint{margin:0;padding:10px 12px;border-top:1px solid rgba(36,36,32,.25);color:var(--muted);font-size:.82rem}

/* Agenda : un seul geste par action, sans flèches décoratives. */
.hero-carousel::before,.hero-carousel::after,.carousel-arrows{display:none!important;content:none!important}
.hero-content{max-width:100%}
.carousel-dots,.album-carousel-dots{display:flex;align-items:center;justify-content:center;gap:8px;min-height:30px;margin:8px auto 0}
.carousel-dots .dot,.album-carousel-dots .dot{display:block;width:8px;height:8px;min-width:8px;padding:0;border:0;border-radius:50%;background:rgba(36,36,32,.3);box-shadow:none}
.carousel-dots .dot.active,.album-carousel-dots .dot.active{width:10px;height:10px;min-width:10px;background:var(--orange)}
.compact-search-button{width:42px;min-width:42px;min-height:42px;padding:0}
.filter-favorite-icon{width:44px;min-width:44px;min-height:44px;padding:0!important;font-size:1rem}
.filter-favorite-icon.active{background:var(--orange);color:var(--line)}

/* Fiche de groupe et discographie horizontale. */
.group-meta-lines{display:grid;gap:0;margin-top:22px;border-top:1px solid rgba(36,36,32,.4)}
.group-meta-lines>div,.group-meta-lines>a{display:grid;gap:5px;padding:13px 0;border-bottom:1px solid rgba(36,36,32,.28);color:inherit;text-decoration:none}
.group-meta-lines small,.album-track-list>small,.album-stream-links>small{font:800 .6rem/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.album-carousel-shell{min-width:0}
.album-carousel{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-inline:contain;padding:4px 2px 10px}
.album-carousel::-webkit-scrollbar{display:none}
.album-carousel .album-card{display:flex;flex:0 0 min(360px,82vw);flex-direction:column;align-items:stretch;gap:0;min-width:0;scroll-snap-align:start;background:var(--surface2);color:var(--line);border:1px solid var(--line)}
.album-carousel .album-card>img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;border:0;border-bottom:1px solid var(--line)}
.album-card-content{display:grid;gap:10px;padding:15px}
.album-card-content h3{margin:0;font-size:1.35rem;line-height:1.05;color:var(--line)}
.album-release-date{margin:0;color:var(--muted);font-size:.9rem}
.album-track-list{display:grid;gap:7px;padding-top:10px;border-top:1px solid rgba(36,36,32,.32)}
.album-track-list ol{margin:0;padding-left:20px;line-height:1.55}
.album-stream-links{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding-top:10px;border-top:1px solid rgba(36,36,32,.32)}
.album-stream-links small{width:100%}
.album-stream-links a{color:var(--orange2);font-weight:800;text-decoration:none}

/* Règles appliquées au cadre mobile même sur un grand écran d'administration. */
.app-shell.device-mobile .page{
  width:100%;
  max-width:430px;
  padding:22px var(--mobile-gutter) 116px!important
}
.app-shell.device-mobile .page>h1,
.app-shell.device-mobile .admin-topline h1,
.app-shell.device-mobile .profile-title-row h1{
  max-width:100%;
  margin-bottom:20px;
  font-size:clamp(2.55rem,12vw,3.55rem)!important;
  line-height:.84!important;
  letter-spacing:-.04em;
  overflow-wrap:anywhere
}
.app-shell.device-mobile .admin-manage-heading h1{font-size:clamp(2.7rem,13vw,3.7rem)!important}
.app-shell.device-mobile h2{font-size:clamp(1.35rem,6vw,1.82rem)!important;line-height:.95}
.app-shell.device-mobile h3{font-size:clamp(1rem,4.8vw,1.25rem)}
.app-shell.device-mobile p,.app-shell.device-mobile li{font-size:min(1rem,4.2vw);line-height:1.52}
.app-shell.device-mobile .section{margin-top:24px}
.app-shell.device-mobile .panel{padding:14px}
.app-shell.device-mobile .admin-topline{display:grid;gap:14px}
.app-shell.device-mobile .admin-topline .button-row{width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.app-shell.device-mobile .admin-topline .button{min-width:0;padding-inline:7px;font-size:.55rem}
.app-shell.device-mobile .admin-filter-bar{grid-template-columns:1fr;gap:9px;padding:12px}
.app-shell.device-mobile .moderation-grid{grid-template-columns:1fr}
.app-shell.device-mobile .moderation-card{padding:13px}
.app-shell.device-mobile .registered-user-row{grid-template-columns:1fr;gap:10px;padding:13px}
.app-shell.device-mobile .registered-user-row .button-row{width:100%}
.app-shell.device-mobile .registered-user-row .button{flex:1}
.app-shell.device-mobile .user-account-state{width:100%}
.app-shell.device-mobile .moderation-action-grid{grid-template-columns:1fr}
.app-shell.device-mobile .agenda-section-head{grid-template-columns:minmax(0,1fr) 42px auto;gap:7px;align-items:center}
.app-shell.device-mobile .agenda-section-head h2{grid-column:1;margin:0!important;font-size:clamp(1.75rem,8vw,2.35rem)!important}
.app-shell.device-mobile .agenda-section-head .inline-search-button{grid-column:2}
.app-shell.device-mobile .agenda-section-head .segmented{grid-column:3;margin:0;min-width:0}
.app-shell.device-mobile .agenda-section-head .segmented button{padding-inline:7px;font-size:.52rem}
.app-shell.device-mobile .agenda-filters{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr) 44px;gap:7px;overflow:visible!important}
.app-shell.device-mobile .agenda-filters>select,.app-shell.device-mobile .agenda-filters>button{flex:none!important;width:100%;min-width:0;font-size:16px;padding-inline:9px}
.app-shell.device-mobile .filter-favorite-icon{padding:0!important}
.app-shell.device-mobile .hero-slide{min-height:500px}
.app-shell.device-mobile .hero-content{left:18px;right:18px;bottom:20px;width:auto}
.app-shell.device-mobile .hero-content h2{font-size:clamp(2.25rem,11vw,3.25rem)!important;line-height:.84}
.app-shell.device-mobile .album-section{overflow:hidden}
.app-shell.device-mobile .album-carousel{width:calc(100% + 14px);padding-right:14px}
.app-shell.device-mobile .album-carousel .album-card{flex-basis:calc(100% - 22px)}
.modal[data-preview-device="mobile"] h1{font-size:clamp(2.15rem,11vw,3.25rem)!important;line-height:.86;overflow-wrap:anywhere}
.modal[data-preview-device="mobile"] h2{font-size:clamp(1.25rem,6vw,1.7rem)!important;line-height:1}
.modal[data-preview-device="mobile"] .editor-toolbar{grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}
.modal[data-preview-device="mobile"] .editor-toolbar select{grid-column:1/-1}
.modal[data-preview-device="mobile"] .editor-toolbar .editor-color{grid-column:span 2}
.modal[data-preview-device="mobile"] .editor-insert-row{grid-template-columns:1fr}
.modal[data-preview-device="mobile"] .editor-code-grid{grid-template-columns:1fr}
.modal[data-preview-device="mobile"] .article-editor-actions{display:grid;grid-template-columns:1fr}
.modal[data-preview-device="mobile"] .article-editor-actions .button{width:100%}

@media(max-width:700px){
  .admin-filter-bar{grid-template-columns:1fr}
  .moderation-grid{grid-template-columns:1fr}
  .registered-user-row{grid-template-columns:1fr}
  .moderation-action-grid{grid-template-columns:1fr}
  .editor-toolbar{grid-template-columns:repeat(4,minmax(0,1fr))}
  .editor-toolbar select{grid-column:1/-1}
  .editor-toolbar .editor-color{grid-column:span 2}
  .editor-insert-row,.editor-code-grid{grid-template-columns:1fr}
}

/* Audit préproduction — cohérence, accessibilité et très petits écrans. */
.section-head::after{display:none!important;content:none!important}
.profile-banner::before{display:none!important;content:none!important}
button,[role="button"],input,select,textarea{touch-action:manipulation}
button,[role="button"]{-webkit-tap-highlight-color:rgba(207,106,67,.2)}
input,select,textarea{max-width:100%;font-size:16px}
textarea{resize:vertical}
.card h3,.manage-item h3,.moderation-card h3,.panel h2{overflow-wrap:anywhere}
.modal-body,.modal form,.form-grid,.field{min-width:0}

/* Les anciens composants sombres héritaient parfois d'un texte anthracite illisible. */
.controlled-suggestions,.schedule-artist-suggestions{
  background:var(--surface);
  color:var(--line);
  border-color:var(--line)
}
.controlled-suggestions button,.schedule-artist-suggestions button,
.group-search-results button,.stats-result-list button,.data-table button{
  background:var(--surface2);
  color:var(--line);
  border-color:var(--line)
}
.controlled-suggestions button:hover,.schedule-artist-suggestions button:hover,
.group-search-results button:hover,.stats-result-list button:hover,.data-table button:hover{
  background:var(--orange);
  color:var(--line)
}
.event-schedule-row,.member-editor-row,.programmer-editor-row,.album-editor,
.visibility-field,.history-list>div{
  background:var(--surface2);
  color:var(--line);
  border-color:var(--line)
}
.drag-handle{background:var(--surface2);color:var(--line);border-color:var(--line)}

.app-shell.device-mobile .discover-filters{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr)) 44px;
  align-items:end;
  gap:6px;
  overflow:visible;
  padding-bottom:8px!important
}
.app-shell.device-mobile .discover-filters>.field{
  min-width:0!important;
  width:100%;
  flex:none!important
}
.app-shell.device-mobile .discover-filters label{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:.5rem
}
.app-shell.device-mobile .discover-filters select{
  width:100%;
  min-width:0;
  min-height:44px;
  padding-inline:7px;
  text-overflow:ellipsis
}
.app-shell.device-mobile .discover-search-field{flex-basis:auto!important}
.app-shell.device-mobile .discover-search-field .inline-search-button{width:44px;padding:0}
.app-shell.device-mobile .discover-search-field .inline-search-button>span:last-child{display:none}
.app-shell.device-mobile .agenda-section-head .segmented button{min-height:40px;font-size:.62rem}

@media(max-width:360px){
  :root{--mobile-gutter:12px}
  .app-shell.device-mobile .page>h1,
  .app-shell.device-mobile .admin-topline h1,
  .app-shell.device-mobile .profile-title-row h1{font-size:clamp(2.25rem,12vw,2.85rem)!important}
  .app-shell.device-mobile .admin-manage-heading h1{font-size:clamp(2.35rem,13vw,3rem)!important}
  .app-shell.device-mobile h2{font-size:clamp(1.2rem,6vw,1.55rem)!important}
  .app-shell.device-mobile .agenda-section-head{grid-template-columns:minmax(0,1fr) 40px auto;gap:5px}
  .app-shell.device-mobile .agenda-section-head .inline-search-button{width:40px;min-width:40px}
  .app-shell.device-mobile .agenda-section-head .segmented button{padding-inline:4px;font-size:.55rem}
  .app-shell.device-mobile .agenda-filters{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 40px;gap:5px}
  .app-shell.device-mobile .discover-filters{grid-template-columns:repeat(3,minmax(0,1fr)) 40px;gap:4px}
  .app-shell.device-mobile .discover-search-field .inline-search-button{width:40px;min-width:40px}
}

/* V19 — textures officielles, accueil épuré et playlist du moment. */
:root{
  --texture-dark:url("../assets/local-session-dark-texture.webp");
  --texture-orange:url("../assets/local-session-orange-texture.webp")
}

html,body,
body[data-admin-device="mobile"],
body[data-admin-device="desktop"]{
  background-color:#242420;
  background-image:var(--texture-dark);
  background-repeat:repeat;
  background-position:center top;
  background-size:724px 1024px
}
.app-shell>.main{
  background-color:var(--bg);
  background-image:url("../assets/local-session-background.png");
  background-repeat:repeat;
  background-position:center top;
  background-size:724px 1024px
}

/* Les aplats anthracite utilisent désormais le fond texturé fourni. */
.sidebar,.mobile-header,.bottom-nav,
.admin-role-control,.global-device-switcher,
.brand,.date-badge,.notification-head,.modal-close,.inline-search-button,
.rich-editor pre,.article-copy pre,
.cards>.card:nth-child(even),.manage-grid>.manage-item:nth-child(even),.admin-row:nth-child(even),
.playlist-moment{
  background-color:#242420;
  background-image:var(--texture-dark);
  background-repeat:repeat;
  background-position:center;
  background-size:724px 1024px
}

/* Les aplats orange reçoivent la même matière, dans sa déclinaison patinée. */
.button:not(.outline):not(.ghost):not(.danger),
.button.is-confirmed,.favorite.is-confirmed,.favorite-action.is-confirmed,
.tabs button.active,.segmented button.active,.bottom-nav button.active,
.sidebar-nav button.active,.global-device-switcher button.active,
.check:has(input:checked),.signup-role-card.active,.signup-role-card:hover,
.signup-current-role,.profile-photo-first,.admin-kpi-grid>.stat:nth-child(1),
.filter-favorite-icon.active,.toast{
  background-color:var(--orange);
  background-image:var(--texture-orange)!important;
  background-repeat:repeat!important;
  background-position:center!important;
  background-size:724px 1024px!important
}

/* Page d'entrée : uniquement le message essentiel et les deux actions. */
.access-landing{
  display:grid;
  min-height:100dvh;
  place-items:center;
  padding:max(24px,env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left));
  color:var(--surface);
  background-color:#242420;
  background-image:var(--texture-dark);
  background-repeat:repeat;
  background-position:center;
  background-size:724px 1024px
}
.access-welcome-card{
  display:grid;
  width:min(100%,760px);
  gap:clamp(20px,4vw,34px);
  align-content:center;
  justify-items:start
}
.access-welcome-card .brand{padding:0;background:transparent;background-image:none}
.access-welcome-card .brand img{width:clamp(170px,34vw,270px)}
.access-welcome-card h1{
  max-width:740px;
  margin:0;
  color:var(--surface);
  font-size:clamp(2.45rem,8vw,5.8rem);
  line-height:.86;
  text-wrap:balance
}
.access-welcome-card>p{
  max-width:620px;
  margin:0;
  color:var(--surface2);
  font-size:clamp(1rem,2.3vw,1.35rem);
  line-height:1.5
}
.access-welcome-card .access-actions{
  display:grid;
  width:min(100%,520px);
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin:0
}
.access-welcome-card .button{width:100%}
.access-welcome-card .button.outline{border-color:var(--surface);background:transparent;color:var(--surface)}
.access-welcome-card .button.outline:hover{background:var(--surface);color:var(--line)}

/* Connexion : suppression de la photographie derrière « Retour en scène ». */
.access-login,.access-login-poster{
  background-color:#242420;
  background-image:var(--texture-dark)!important;
  background-repeat:repeat!important;
  background-position:center!important;
  background-size:724px 1024px!important
}

/* Lecteur vintage placé entre les annonces et les prochaines dates. */
.playlist-moment{
  overflow:hidden;
  padding:14px;
  border:1px solid var(--line);
  color:var(--surface);
  box-shadow:7px 7px 0 rgba(36,36,32,.16)
}
.vintage-player-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  padding:4px 2px 14px
}
.vintage-player-top>div{min-width:0}
.vintage-player-top span{
  color:var(--orange);
  font:900 .56rem/1 var(--mono);
  letter-spacing:.1em
}
.vintage-player-top h2{
  margin:6px 0 0;
  color:var(--surface);
  font-size:clamp(1.55rem,5vw,2.6rem)!important;
  overflow-wrap:anywhere
}
.playlist-admin-panel{display:grid;gap:14px}
.playlist-admin-panel h2{margin:0}
.playlist-visibility{width:max-content;max-width:100%;border-radius:2px!important}

@media(max-width:520px){
  .access-welcome-card{gap:22px}
  .access-welcome-card h1{font-size:clamp(2.4rem,12vw,3.55rem)}
  .access-welcome-card .access-actions{grid-template-columns:1fr}
  .playlist-moment{margin-inline:0;padding:10px}
  .vintage-player-top{align-items:flex-end}
}

/* Ajustements bêta mobile : lisibilité, compacité et commandes tactiles. */
.access-welcome-card h1{
  max-width:620px;
  font-family:inherit;
  font-size:clamp(1rem,2.3vw,1.35rem);
  font-weight:400;
  line-height:1.5;
  letter-spacing:0;
  text-transform:none;
  text-wrap:pretty
}
.hero-content h2,.card-body h3{letter-spacing:.018em;line-height:1.05}
.playlist-moment{display:grid;gap:10px;padding:12px}
.vintage-player-top{align-items:center;padding:0}
.vintage-player-top h2{font-size:clamp(1.15rem,3.4vw,1.65rem)!important;line-height:1}
.playlist-external-link{
  display:grid;place-items:center;width:38px;height:38px;border:1px solid var(--surface);
  color:var(--surface);font:900 1rem/1 var(--mono);text-decoration:none
}
.playlist-external-link:hover,.playlist-external-link:focus-visible{background:var(--orange);color:var(--line)}
.cassette-player{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center}
.playlist-cassette-window{
  display:grid;grid-template-columns:22px minmax(0,1fr) 22px;align-items:center;gap:9px;
  min-height:50px;padding:8px 10px;border:1px solid var(--surface);background-image:var(--texture-orange);color:var(--line);
  text-align:center;font:900 .58rem/1.15 var(--mono);letter-spacing:.06em
}
.playlist-cassette-window span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.playlist-cassette-window i{width:22px;aspect-ratio:1;border:5px solid var(--line);border-radius:50%}
.cassette-controls{display:flex;gap:5px}
.cassette-controls a{
  display:grid;place-items:center;width:42px;height:42px;padding:0;border:1px solid var(--surface);background:transparent;color:var(--surface);
  font:900 .7rem/1 var(--mono);cursor:pointer;text-decoration:none
}
.cassette-controls a:hover,.cassette-controls a:focus-visible{background:var(--orange);color:var(--line)}
.profile-notifications{padding-top:4px}
.retro-notification-list{border:1px solid var(--line);background:var(--surface2)}
.retro-notification{display:grid;grid-template-columns:minmax(0,1fr) 38px;gap:12px;padding:15px;border-bottom:1px solid var(--line)}
.retro-notification:last-child{border-bottom:0}
.retro-notification time{display:block;margin-bottom:6px;color:var(--orange);font:800 .62rem/1 var(--mono);letter-spacing:.09em;text-transform:uppercase}
.retro-notification strong{display:block;font-size:1rem;letter-spacing:.01em}
.retro-notification p{margin:5px 0 0;color:var(--muted);font-size:.88rem;line-height:1.4}
.retro-notification-body{all:unset;display:block;min-width:0}
/* Texte mis en forme (messages de bienvenue) : puces courtes, gras en encre
   pleine pour que l'œil accroche d'abord l'action, le reste en gris. Le
   « strong » du titre est en display:block : on le remet en ligne ici. */
.notification-rich p{margin:6px 0 0;color:var(--muted);font-size:.88rem;line-height:1.45}
.notification-rich strong{display:inline;font-size:inherit;letter-spacing:0;color:var(--text);font-weight:800}
.notification-points{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:7px}
.notification-points li{position:relative;padding-left:16px;color:var(--muted);font-size:.88rem;line-height:1.42}
.notification-points li::before{content:"";position:absolute;left:0;top:.52em;width:7px;height:7px;background:var(--orange);border-radius:1px}
button.retro-notification-body{cursor:pointer}
.retro-notification.is-read{opacity:.62}
.retro-notification-dismiss{align-self:start;width:36px;height:36px;border:1px solid var(--line);background:transparent;color:var(--line);font-size:1.2rem;cursor:pointer}
.profile-utility-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.profile-utility{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:64px;padding:14px;border:1px solid var(--line);background:var(--surface);color:var(--line);font:900 .72rem/1.2 var(--mono);text-align:left;text-transform:uppercase;cursor:pointer}
.profile-utility:hover,.profile-utility:focus-visible{border-color:var(--orange);color:var(--orange)}
.logout-utility{background-image:var(--texture-dark);color:var(--surface)}
.delete-account-utility{border-color:rgba(255,86,94,.4);color:var(--red)}
.delete-account-utility:hover,.delete-account-utility:focus-visible{border-color:var(--red);color:var(--red)}
.about-copy{max-width:760px}
.about-copy p{font-size:clamp(1rem,2.2vw,1.2rem);line-height:1.65}
.about-copy font[size="2"]{font-size:.85em}.about-copy font[size="3"]{font-size:1em}.about-copy font[size="4"]{font-size:1.2em}.about-copy font[size="5"]{font-size:1.45em}
.about-hero-image{display:block;width:100%;max-height:440px;margin-top:24px;border:1px solid var(--line);object-fit:cover}
.about-admin-panel{display:flex;align-items:center;justify-content:space-between;gap:18px}
.about-rich-editor{min-height:300px;background:var(--surface);color:var(--line)}
.report-honeypot{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;opacity:0!important}
.human-check{max-width:360px}

@media(max-width:700px){
  .access-welcome-card h1{font-size:1.05rem!important;line-height:1.5}
  .discover-filters{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important;overflow:visible!important}
  .discover-filters>.field{min-width:0;width:100%}
  .discover-filters select{width:100%;min-width:0;padding-inline:10px;font-size:1rem}
  .discover-filters .discover-search-field .inline-search-button{width:100%;min-width:0}
  .agenda-filters,.app-shell.device-mobile .agenda-filters{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr) 42px!important;gap:6px!important;width:100%;margin-inline:0!important;padding:0 0 8px!important;overflow:visible!important}
  .agenda-filters>select,.agenda-filters>button,.app-shell.device-mobile .agenda-filters>select,.app-shell.device-mobile .agenda-filters>button{width:100%!important;min-width:0!important;max-width:100%;padding:0 22px 0 8px!important;font-size:clamp(.72rem,3.35vw,.88rem)!important}
  .agenda-filters>.filter-favorite-icon{padding:0!important}
  .cassette-player{grid-template-columns:1fr}
  .cassette-controls{display:grid;grid-template-columns:repeat(4,1fr)}
  .cassette-controls a{width:100%;min-height:44px}
  .profile-utility-grid{grid-template-columns:1fr}
  .notification-page>h1,.about-page>h1,.report-page>h1{font-size:clamp(2.2rem,11vw,3.4rem)!important;line-height:.9!important;overflow-wrap:anywhere}
  .report-page .form-grid.two{grid-template-columns:1fr}
  .about-admin-panel{align-items:stretch;flex-direction:column}
  .about-admin-panel .button{width:100%}
}
/* V19 — modèle multi-rôles, feed éditorial et administration avancée */
.discover-heading{display:flex;align-items:center;justify-content:space-between;gap:16px}
.discover-feed-tabs{margin-top:18px;overflow-x:auto;scrollbar-width:none}
.social-feed{display:grid;gap:24px;max-width:920px;margin-inline:auto}
.feed-card{border:1.5px solid var(--ink);background:rgba(242,232,214,.8);box-shadow:10px 10px 0 rgba(36,36,32,.09);overflow:hidden}
.feed-card>header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 18px;border-bottom:1px solid rgba(36,36,32,.35)}
.feed-card>header>div{display:flex;flex-direction:column;gap:4px}.feed-card time{font-size:.78rem;color:var(--muted)}
.feed-media{background:var(--anthracite);aspect-ratio:16/9;overflow:hidden}.feed-media img{width:100%;height:100%;object-fit:cover}
.feed-gallery{display:flex;overflow-x:auto;scroll-snap-type:x mandatory}.feed-gallery img{min-width:100%;scroll-snap-align:start}
/* Vignette d'une galerie dans le flux : première photo + nombre de photos,
   cliquable pour ouvrir la visionneuse plein écran. */
.feed-gallery-cover{position:relative;display:block;width:100%;padding:0;border:none;cursor:pointer}
.feed-gallery-count,.feed-gallery-hint{position:absolute;bottom:10px;padding:6px 10px;background:rgba(20,20,18,.78);color:var(--cream);font:700 .7rem/1 var(--mono);text-transform:uppercase;letter-spacing:.08em}
.feed-gallery-count{right:10px}
.feed-gallery-hint{left:10px;opacity:0;transition:opacity var(--dur) var(--ease-out)}
.feed-gallery-cover:hover .feed-gallery-hint,.feed-gallery-cover:focus-visible .feed-gallery-hint{opacity:1}
/* Visionneuse plein écran : l'image s'adapte toujours à la fenêtre. */
.gallery-viewer{display:flex;flex-direction:column;gap:12px}
.gallery-viewer-stage{position:relative;display:flex;align-items:center;justify-content:center;background:#141412;min-height:40vh}
.gallery-viewer-stage img{max-width:100%;max-height:70vh;width:auto;height:auto;object-fit:contain}
.gallery-viewer-nav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border:1px solid rgba(238,227,208,.5);background:rgba(20,20,18,.7);color:var(--cream);font-size:1.6rem;line-height:1;cursor:pointer}
.gallery-viewer-nav.prev{left:8px}.gallery-viewer-nav.next{right:8px}
.gallery-viewer-nav:hover,.gallery-viewer-nav:focus-visible{border-color:var(--orange);color:var(--orange)}
.gallery-viewer-bar{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.gallery-viewer-thumbs{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px}
.gallery-viewer-thumbs button{flex:0 0 auto;width:64px;height:48px;padding:0;border:1px solid var(--line);background:none;cursor:pointer;opacity:.55}
.gallery-viewer-thumbs button.active,.gallery-viewer-thumbs button:hover{opacity:1;border-color:var(--orange)}
.gallery-viewer-thumbs img{width:100%;height:100%;object-fit:cover}
@media (max-width:760px){
  .gallery-viewer-stage img{max-height:60vh}
  .gallery-viewer-nav{width:38px;height:38px}
}
.feed-copy{padding:18px}.feed-copy h2{font-size:clamp(1.35rem,4vw,2rem);margin:0 0 8px}.feed-copy p{margin:0 0 12px;line-height:1.55}.report-link{margin-left:auto}
.compact-feed .feed-card{box-shadow:none}.compact-feed{max-width:none}
.manage-action-grid{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0}.professional-summary{padding:20px}
.event-title-line{display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap}.event-status{padding:7px 10px;border:1px solid currentColor;font:700 .72rem/1 var(--mono);text-transform:uppercase;letter-spacing:.08em}
.event-status-confirmed{color:#53634c}.event-status-postponed{color:#8b713c}.event-status-cancelled{color:#824b43}.event-status-soldout{color:#5d554d}
.credit-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;border-top:1px solid rgba(36,36,32,.3)}.credit-list>div{display:flex;flex-direction:column;padding:14px;border-bottom:1px solid rgba(36,36,32,.3)}.credit-list small{text-transform:uppercase;color:var(--muted)}
.admin-global-search{display:flex;align-items:center;gap:8px;background:var(--cream);color:var(--ink);border:1px solid var(--orange);padding:12px 16px;font:700 .75rem var(--mono);text-transform:uppercase}
.admin-treatment{margin-top:28px}.compact-kpis{grid-template-columns:repeat(5,minmax(0,1fr))}.compact-kpis .stat strong{font-size:2rem}.compact-kpis .stat span{font-size:.76rem}
.admin-control-tabs{overflow-x:auto;flex-wrap:nowrap}.admin-control-tabs button{white-space:nowrap}.admin-audit-card{grid-column:1/-1}
.search-results{max-height:60vh;overflow:auto}.search-results .admin-row{display:block}.search-results .entity-type{display:block;margin-bottom:4px}
.global-admin-controls{flex-wrap:wrap}
@media (max-width:760px){
  .social-feed{gap:16px}.feed-card{box-shadow:5px 5px 0 rgba(36,36,32,.08)}.feed-card>header,.feed-copy{padding:13px}
  .discover-feed-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));width:100%}.discover-feed-tabs button{padding:11px 6px;font-size:.67rem}
  .credit-list{grid-template-columns:1fr}.compact-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .manage-action-grid{display:grid;grid-template-columns:1fr 1fr}.manage-action-grid .button{width:100%;min-width:0;padding-inline:9px;font-size:.72rem}
  .global-admin-controls{gap:7px}.admin-global-search{width:100%;justify-content:center}.admin-role-select{width:100%}
  .admin-page .admin-topline h1{font-size:clamp(2.8rem,15vw,5rem)}
}

/* Item 1-5 additions: role cumulation badge, claim-derived role display,
   credit pickers, self-credit row, empty-state prompts. */
.role-cumul-badge{margin-left:8px}
.claim-derived-role{margin:0;padding:9px 11px;border:1px solid var(--line);border-radius:10px;background:#131315}
.credit-picker{position:relative}
.self-credit-row{margin-top:10px;flex-wrap:wrap}
.admin-multirole-filter{display:flex;align-items:center;gap:7px}
.manage-empty-prompt{display:block}
.manage-empty-prompt .link{margin:0 4px}
.article-scope-hint{margin:-6px 0 10px}

/* Profile: universal identity editing, email-confirmation simulation,
   privacy link and two-step "delete my account" confirm. */
.inline-link{display:inline;background:none;border:none;padding:0;margin:0;color:var(--orange2);text-decoration:underline;cursor:pointer;font:inherit}
.email-pending-banner{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:14px;padding:12px 14px;border:1px solid var(--orange2);border-radius:14px;background:rgba(206,106,59,.12)}
.email-pending-banner strong{color:var(--orange2)}
.danger-zone{border-color:rgba(255,86,94,.35)}
.danger-zone h2{margin-top:0}
.button.is-armed{background:var(--red);color:var(--surface);border-color:var(--red)}
@media (max-width:760px){
  .email-pending-banner{flex-direction:column;align-items:flex-start}
}

/* V17 — motion polish : transitions d'entrée, survol des cartes/rangées,
   liens, navigation, spinners de chargement, révélation au scroll,
   micro-rebond de confirmation. Tout référence les jetons --dur et --ease-out
   définis dans :root ; @media(prefers-reduced-motion:reduce) plus haut
   neutralise déjà toute animation/transition via le sélecteur global étoile. */

/* Entrée de page à chaque rendu (élément .page racine, rejoué car recréé) */
.page{animation:page-enter var(--dur-slow) var(--ease-out) both}
@keyframes page-enter{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* Cartes de flux, rangées admin et boutons-lien : retour de survol cohérent */
.feed-card{transition:transform var(--dur) var(--ease-out),box-shadow var(--dur) ease,border-color var(--dur) ease}
.feed-card:hover,.feed-card:focus-visible{transform:translateY(-3px);border-color:var(--orange)}
.admin-row{transition:transform var(--dur) var(--ease-out),border-color var(--dur) ease,background-color var(--dur) ease}
.admin-row:hover,.admin-row:focus-within{border-color:var(--orange);transform:translateY(-2px)}
.entity-row-button{transition:color var(--dur-fast) ease}
.entity-row-button:hover,.entity-row-button:focus-visible{color:var(--orange2)}
.directory-list-row{transition:background-color var(--dur) ease,transform var(--dur) var(--ease-out)}
.directory-list-row:hover{transform:translateX(2px)}
.sidebar-nav button{transition:color var(--dur) ease,background-color var(--dur) ease,border-color var(--dur) ease}
.inline-link{transition:color var(--dur-fast) ease}
.inline-link:hover,.inline-link:focus-visible{color:var(--orange)}
.album-card,.release,.performance-list>div,.stats-result-list button,.data-table button,.member-link,.preview-role-card,.signup-role-card{
  transition:transform var(--dur) var(--ease-out),border-color var(--dur) ease,box-shadow var(--dur) ease
}
.album-card:hover,.release:hover,.performance-list>div:hover,.stats-result-list button:hover,.data-table button:hover{
  border-color:var(--orange);transform:translateY(-2px)
}

/* Fondu d'apparition du fond de la modale, en plus de l'entrée du panneau */
.modal::backdrop{animation:v14-backdrop-in var(--dur) ease both}
@keyframes v14-backdrop-in{from{opacity:0}to{opacity:1}}

/* Spinner inline pour les boutons déclenchant une requête réseau */
.btn-spinner{
  width:14px;height:14px;flex:0 0 auto;display:inline-block;
  border:2px solid currentColor;border-right-color:transparent;border-radius:50%;
  animation:btn-spin .6s linear infinite;vertical-align:middle
}
@keyframes btn-spin{to{transform:rotate(360deg)}}

/* Révélation progressive au défilement (classe posée par IntersectionObserver
   seulement quand celui-ci est disponible : sans JS ou en cas d'erreur, le
   contenu reste visible par défaut) */
[data-reveal].reveal-armed{opacity:0;transform:translateY(14px);transition:opacity var(--dur-slow) var(--ease-out),transform var(--dur-slow) var(--ease-out)}
[data-reveal].reveal-armed.is-visible{opacity:1;transform:none}

/* Micro-rebond rejouable sur les bascules favori / "j'y vais" */
.pulse-bounce{animation:v14-confirm .3s var(--ease-out) both}

/* ---- Batch additions: clickable rows, mobile stats, carousels, tabs,
   banners, instagram links, visibility notices. ---- */
.clickable-row{cursor:pointer}
.clickable-row:hover{border-color:var(--orange)}

@media(max-width:700px){
  .donut-layout{grid-template-columns:1fr;justify-items:center;text-align:center}
  .donut-layout .legend-list{width:100%;justify-items:start;text-align:left}
  .legend-list span{white-space:normal;overflow:visible}
}

/* Generic entity/publication carousel (groups, venues, professionals) */
.entity-carousel-shell{min-width:0}
.entity-carousel{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:4px 2px 10px}
.entity-carousel::-webkit-scrollbar{display:none}
.entity-carousel>*{flex:0 0 min(320px,82vw);scroll-snap-align:start;min-width:0}
.carousel-archives-row{display:flex;justify-content:flex-end;margin-top:6px}

/* Profile / admin banner & avatar customization */
.profile-banner{position:relative}
.banner-upload-field{margin-top:10px}

/* Instagram external link on public pages */
.instagram-link{display:inline-flex;align-items:center;gap:6px}

/* Visibility notice (professional profile not yet public) */
.visibility-notice{padding:26px;border:1px dashed var(--line);border-radius:14px;text-align:center;color:var(--muted)}

/* Pending affiliation banner reuses .email-pending-banner styling */
.affiliation-pending-banner{border-color:var(--orange2)}

/* Export des données d'un compte (admin, droit d'accès/portabilité) */
.admin-data-export h3{margin:0 0 4px}
.admin-data-export-form{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.admin-data-export-form input{flex:1;min-width:220px}
.admin-data-export-form button{flex:0 0 auto}

/* Cookie consent banner */
.cookie-banner{position:fixed;left:0;right:0;bottom:0;z-index:120;background:var(--paper,#f5eee7);border-top:1px solid var(--line);padding:16px 18px calc(16px + env(safe-area-inset-bottom));box-shadow:0 -4px 18px rgba(0,0,0,.12);max-height:80vh;overflow-y:auto}
.cookie-banner.hidden{display:none}
.cookie-banner-summary p{margin:0 0 12px;font-size:.85rem;line-height:1.45}
.cookie-banner-detail.hidden{display:none}
.cookie-banner-detail{padding-top:2px}
.cookie-banner-detail .check{display:flex;align-items:flex-start;gap:8px;font-size:.85rem;margin-bottom:12px}
.cookie-banner-detail .check input{margin-top:3px}
.cookie-banner-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
@media (max-width:520px){.cookie-banner{padding:14px}.cookie-banner-actions{justify-content:stretch}.cookie-banner-actions .button{flex:1}}

/* ---------------------------------------------------------------------------
   Informations d'une page (salle, groupe) : lignes à plat sur le fond plutôt
   que des rectangles empilés — même traitement visuel que les noms des
   programmateurs et de l'équipe technique juste en dessous.
   --------------------------------------------------------------------------- */
.profile-facts{display:grid;gap:0;margin-top:16px;border-top:1px solid rgba(36,36,32,.4)}
.profile-facts>span,.profile-facts>a{
  display:grid;
  gap:4px;
  padding:12px 0;
  border:0;
  border-bottom:1px solid rgba(36,36,32,.28);
  border-radius:0;
  background:none;
  color:inherit;
  text-decoration:none;
  font-size:.85rem
}
.profile-facts>span:last-child,.profile-facts>a:last-child{border-bottom:0}
.profile-facts small{font:800 .6rem/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.profile-facts>a:hover{color:var(--orange2)}
@media(min-width:650px){.profile-facts{grid-template-columns:1fr}}

/* Bloc d'actions en bas d'une page (salle, groupe, concert) : les boutons ne
   sont plus posés sur la photo d'en-tête, qui redevient une image. */
.page-actions-block h2{margin-bottom:12px}
.page-actions{display:flex;flex-wrap:wrap;gap:10px}
.page-actions .button{flex:1 1 180px;justify-content:center}
.page-actions .link{flex:0 0 auto;align-self:center}

/* Page d'un concert : affiche en grand, date complète, crédits repliés. */
.event-poster-figure{margin:16px 0 0}
.event-poster-figure img{width:100%;max-height:52vh;object-fit:cover;border:1px solid var(--line);display:block}
.event-headline{margin-top:16px}
.event-date-full{margin:10px 0 2px;font:800 clamp(1.3rem,5.5vw,1.9rem)/1.15 var(--display);letter-spacing:-.02em;text-transform:uppercase}
.event-place{margin:0 0 4px;font-size:1rem;font-weight:800}
.event-headline-meta{margin:0}
.event-credits-fold summary{cursor:pointer;font:800 .8rem/1.3 var(--mono);text-transform:uppercase;letter-spacing:.05em}
.event-credits-fold[open] summary{margin-bottom:10px}
.credit-list.compact{display:grid;gap:8px;font-size:.82rem}
.credit-list.compact>div{display:flex;justify-content:space-between;gap:12px;padding:6px 0;border-bottom:1px solid rgba(36,36,32,.18)}
.credit-list.compact small{color:var(--muted);font:800 .6rem/1.4 var(--mono);text-transform:uppercase;letter-spacing:.05em}

/* Titres : « Programmateurs » se coupait en « PROGRAMMATE / URS ». Deux
   causes cumulées — overflow-wrap:anywhere hérité (qui autorise la coupure au
   milieu d'un mot) et le max-width de 70 % sur les titres d'en-tête de
   section, qui laissait trop peu de place sur un écran de téléphone. */
h1,h2,h3,.section-head h2{overflow-wrap:break-word}
/* Titre enveloppé dans un <div> avec son sous-titre : son max-width en %
   se calculait sur ce div, lui-même dimensionné par son contenu. Sur
   ordinateur, « Notifications » finissait coupé en « NOTIFICAT / IONS ».
   Le div prend désormais la place disponible, le bouton reste à droite. */
.section-head>div{flex:1 1 auto;min-width:0}
.section-head>div>h2{max-width:100%}
@media(max-width:700px){
  .section-head{flex-wrap:wrap}
  .section-head h2{max-width:100%}
  /* Une ligne de membre (musicien, programmateur, équipe) se met en colonne
     plutôt que de comprimer le nom sur deux lignes. */
  .member{flex-direction:column;align-items:flex-start;gap:3px}
  .member .small.muted{font-size:.68rem}
}

/* Titre du carrousel d'accueil : « OUVERTURE » se coupait en « OUVERTU / RE »
   (largeur du bloc limitée à 88 % de l'écran, puis titre à 44 px). On rend la
   largeur pleine et la taille un peu plus souple sur petit écran. */
@media(max-width:700px){
  .hero-content{max-width:100%}
  .hero-content h2{max-width:100%;font-size:clamp(1.9rem,8.5vw,3rem)}
  .hero-content p{max-width:100%}
}

/* Bandeau « prochain concert » en tête d'agenda : une information plutôt
   qu'un titre décoratif. */
.next-event-strip{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:12px;
  width:100%;
  margin:-6px 0 16px;
  padding:14px 16px;
  border:1px solid var(--line);
  background:var(--surface2);
  color:inherit;
  text-align:left;
  cursor:pointer
}
.next-event-strip:hover,.next-event-strip:focus-visible{border-color:var(--orange);background:rgba(206,106,59,.09)}
.next-event-strip.is-empty{display:block;cursor:default;border-style:dashed}
.next-event-when{font:900 .64rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--orange2)}
.next-event-main{display:grid;gap:2px;min-width:0}
.next-event-main strong{font-size:.95rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.next-event-main small{color:var(--muted);font-size:.7rem}
.next-event-count{display:none;font:800 .6rem/1 var(--mono);text-transform:uppercase;color:var(--muted)}
.next-event-strip>b{color:var(--orange);font-size:1.2rem}
@media(min-width:560px){
  .next-event-strip{grid-template-columns:auto 1fr auto auto}
  .next-event-count{display:block}
}

/* Liste déroulante à cocher des rôles (inscription) : un seul bloc replié
   tant qu'on n'a qu'un rôle, déplié pour en cumuler plusieurs. */
.roles-dropdown{border:1px solid var(--line);background:var(--surface)}
.roles-dropdown summary{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:14px 16px;cursor:pointer;
  font:800 .78rem/1.2 var(--mono);text-transform:uppercase;letter-spacing:.04em;
  list-style-position:inside
}
.roles-dropdown summary::after{content:"▾";color:var(--orange2)}
.roles-dropdown[open] summary::after{content:"▴"}
.roles-dropdown[open] summary{border-bottom:1px solid var(--line)}
.roles-dropdown-list{display:grid;gap:2px;padding:10px}
@media(min-width:620px){.roles-dropdown-list{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Signalement d'erreur ligne par ligne : la ligne fautive est encadrée et
   porte son propre message, en plus du récapitulatif en tête de formulaire. */
.field.has-error input,.field.has-error select,.field.has-error textarea{
  border-color:var(--red);
  box-shadow:0 0 0 1px var(--red) inset
}
.field.has-error>label,label.check.has-error{color:var(--red)}
.field-error{display:block;margin-top:5px;color:var(--red);font-weight:700}

/* Champ avec bouton « Visible » : la pastille était posée en absolu par-dessus
   le champ et venait chevaucher la saisie dès que le libellé passait sur deux
   lignes (ou qu'un message d'erreur s'ajoutait). On repasse en flux normal. */
.visibility-field{position:static;display:grid;gap:8px}
.visibility-field>input{padding-right:12px}
.visibility-toggle{
  position:static;
  justify-self:start;
  display:inline-flex;
  align-items:center;
  gap:6px;
  font:800 .62rem/1 var(--mono);
  text-transform:uppercase;
  letter-spacing:.06em
}

/* Case des conditions d'utilisation : en grille, le message d'erreur se
   retrouvait comprimé dans une colonne de quelques pixels. */
.terms-check{display:flex;flex-wrap:wrap;align-items:flex-start;gap:8px;line-height:1.5}
.terms-check>input{flex:0 0 auto;margin-top:3px}
.terms-check .field-error{flex:1 0 100%}

/* Lien « Changer » de la pastille d'univers : contraste suffisant sur fond
   orange. */
.signup-current-role{gap:12px}
.signup-current-role .link{
  margin-left:auto;
  color:var(--line);
  font:800 .62rem/1 var(--mono);
  text-transform:uppercase;
  text-decoration:underline
}

/* Critères de mot de passe vérifiés pendant la saisie. */
.password-checklist{display:grid;gap:4px;margin:8px 0 0;padding:0;list-style:none}
.password-checklist li{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:.72rem}
.password-checklist li span{width:1em;text-align:center;font-weight:900}
.password-checklist li.is-ok{color:var(--green)}
.account-credentials .button-row{display:flex;flex-wrap:wrap;gap:10px}
.account-credentials .button{flex:1 1 200px;justify-content:center}

/* Sections en liste déroulante (contrôle, profil) plutôt qu'une rangée
   d'onglets qui débordait dès qu'il y en avait plus de trois. */
.tab-select{margin:18px 0 6px;max-width:420px}
.tab-select label{font:800 .6rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.tab-select select{width:100%;min-height:48px;padding:0 12px;border:1px solid var(--line);background:var(--surface);color:var(--text);font-weight:800}
.control-overview-list .admin-row{align-items:flex-start}
.control-overview-list .entity-type{margin-bottom:2px}

/* Écran « Vérifie ta boîte mail » (compte pas encore confirmé) */
.pending-confirmation p{line-height:1.5}
.pending-confirmation .button-row{margin-top:18px}
.pending-warning{margin:14px 0 0;padding:12px 14px;border:1px solid var(--red);background:rgba(152,63,50,.08);color:var(--text);font-size:.9rem}
.pending-warning a{color:inherit;font-weight:800}
.pending-links{display:flex;flex-wrap:wrap;gap:18px;margin-top:16px;padding-top:14px;border-top:1px solid rgba(36,36,32,.18)}

/* Recadrage des images de profil */
.crop-modal{width:min(560px,calc(100% - 24px));padding:0}
.crop-modal::backdrop{background:rgba(20,20,18,.72)}
.crop-body{padding:22px}
.crop-body h2{margin:6px 0 4px}
.crop-stage{position:relative;width:100%;margin-top:16px;overflow:hidden;background:#242420;touch-action:none;cursor:grab;user-select:none}
.crop-stage:active{cursor:grabbing}
.crop-stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.crop-mask{position:absolute;inset:0;pointer-events:none;border:2px solid rgba(238,227,208,.9)}
/* Photo de profil : seul le disque central est gardé, le reste est assombri. */
.crop-stage.is-round .crop-mask{border-radius:50%;box-shadow:0 0 0 999px rgba(20,20,18,.62)}
.crop-zoom{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:12px;margin:16px 0 4px;font:800 .72rem/1 var(--mono);text-transform:uppercase;letter-spacing:.08em}
.crop-zoom input{width:100%;accent-color:var(--orange)}
.profile-image-preview-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.profile-image-field .profile-photo-preview{width:112px;height:112px;border-radius:50%!important;object-fit:cover}
.profile-image-field .profile-banner-preview{aspect-ratio:3/1;height:auto;object-fit:cover}
.profile-image-field .button.small-button{margin-top:8px}

/* Lien « Signaler » discret en bas de chaque page */
.page-report-row{display:flex;justify-content:flex-end;margin:34px 0 8px;padding-top:14px;border-top:1px solid rgba(36,36,32,.14)}
.page-report-link{font:800 .7rem/1 var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.page-report-link:hover,.page-report-link:focus-visible{color:var(--red)}

/* Paramètres › Alertes e-mail de l'administration */
.admin-alert-options{display:grid;gap:7px}
.admin-alert-options .check{display:flex;justify-content:flex-start;min-height:40px;line-height:1.3}

/* Le cadre de recadrage ne doit jamais pousser les boutons hors de l'écran :
   sa hauteur est plafonnée et c'est la largeur qui s'ajuste (téléphone tenu à
   l'horizontale, petite fenêtre d'ordinateur). */
.crop-body{max-height:92dvh;overflow-y:auto;overscroll-behavior:contain}
/* La taille exacte est posée en pixels par le recadreur lui-même
   (fitStage), pour garder les proportions ET rester dans l'écran. */
.crop-stage{width:auto;max-width:100%;margin-inline:auto}
.crop-stage:focus-visible{outline:2px solid var(--orange);outline-offset:3px}

/* Recadreur sur téléphone : feuille pleine largeur, comme les autres fenêtres */
@media (max-width:620px){
  .crop-modal{width:100%;max-width:none;margin:auto 0 0;padding:0}
  .crop-body{padding:20px 15px max(22px,env(safe-area-inset-bottom))}
  /* Titres des fenêtres : assez grands pour l'affiche, sans couper un mot
     long (« professionnel ») au milieu. */
  .modal h1{font-size:clamp(2.1rem,10vw,3.4rem);overflow-wrap:normal}
}

/* Photo de profil toujours ronde */
.avatar{border-radius:50%!important}

/* Profils de personnes : la bannière s'affiche entière, au format 3:1 choisi
   dans le recadreur, et la photo ronde vient la chevaucher. Les pages de
   groupe et de salle gardent leur grande affiche. */
.profile-banner.person-hero,
.app-shell.device-mobile .profile-banner.person-hero{min-height:0!important;display:flex;flex-direction:column;background:var(--line)}
.profile-banner.person-hero::after{display:none}
.profile-banner.person-hero>img{position:relative;inset:auto;display:block;width:100%;height:auto;aspect-ratio:3/1;object-fit:cover}
.profile-banner.person-hero .profile-banner-content{position:relative;left:auto;right:auto;bottom:auto;padding:0 18px 20px;margin-top:clamp(-58px,-9vw,-40px)}
.profile-banner.person-hero .avatar{width:clamp(88px,22vw,128px);height:clamp(88px,22vw,128px);border:4px solid var(--line)!important;background:var(--surface2);margin-bottom:12px}
.profile-banner.person-hero .profile-banner-content h1{font-size:clamp(2.4rem,11vw,4.6rem)}

/* Enveloppe des pages qui portent le lien « Signaler » : elle ne doit rien
   changer à la mise en page. */
.page-with-report{display:contents}
.page-report-page{padding-top:0}
.page-report-page .page-report-row{margin-top:10px}

/* ===========================================================================
   MOUVEMENT (motion design)
   Règles : rien au-dessus de 400 ms sur un changement de page, un seul
   mouvement par changement d'état, et tout s'efface quand le système demande
   de réduire les animations (bloc tout en bas de cette section).
   =========================================================================== */
:root{
  --spring:linear(0,.009,.035 2.1%,.141,.281 6.7%,.723 12.9%,.938,1.017,1.077,1.121,1.149 19.8%,1.159,1.163,1.161,1.154 23.6%,1.129 25.4%,1.051 29.6%,1.017,.991,.977 34.6%,.973,.974 38.5%,.998 47.5%,1.004 53.4%,1);
}

/* --- Ouverture de l'application (une fois par session) -------------------- */
.app-opening{
  position:fixed;
  inset:0;
  z-index:400;
  display:grid;
  place-content:center;
  justify-items:center;
  gap:16px;
  padding:24px;
  background:var(--line);
  pointer-events:none;
  animation:ls-opening-curtain .66s cubic-bezier(.32,.72,0,1) 1.25s both;
}
.app-opening img{
  width:min(190px,52vw);
  filter:brightness(0) invert(1);
  clip-path:inset(0 0 100% 0);
  animation:ls-opening-logo .7s var(--ease-out) .08s both;
}
.app-opening-bar{
  width:0;
  height:2px;
  background:var(--orange);
  animation:ls-opening-bar .55s var(--ease-out) .46s both;
}
.app-opening-tag{
  font:750 .56rem/1 var(--mono);
  letter-spacing:.24em;
  text-transform:uppercase;
  color:rgba(238,227,208,.72);
  opacity:0;
  animation:ls-opening-tag .45s var(--ease-out) .58s both;
}
@keyframes ls-opening-logo{from{clip-path:inset(0 0 100% 0);transform:translateY(14px)}to{clip-path:inset(0 0 0 0);transform:none}}
@keyframes ls-opening-bar{from{width:0}to{width:128px}}
@keyframes ls-opening-tag{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes ls-opening-curtain{to{transform:translateY(-101%)}}

/* --- Pastille glissante de la barre d'onglets ----------------------------- */
.bottom-nav .nav-pill{
  position:absolute;
  z-index:0;
  top:6px;
  bottom:max(6px,env(safe-area-inset-bottom));
  left:0;
  width:0;
  opacity:0;
  border-radius:1px;
  background:var(--orange);
  pointer-events:none;
}
.bottom-nav button{z-index:1;background:transparent!important}
.bottom-nav button.active{color:var(--line)}

/* --- Confirmation (« J'y vais », favoris, validations) -------------------- */
.pulse-bounce{animation:ls-confirm .42s var(--spring) both}
@keyframes ls-confirm{0%{transform:scale(1)}26%{transform:scale(.94)}100%{transform:scale(1)}}

/* --- Pastille de notification : un ressort, une onde, puis le silence ----- */
.nav-badge.is-new{animation:ls-badge-pop .6s var(--spring) both}
.nav-badge.is-new::after{
  content:"";
  position:absolute;
  inset:-4px;
  border-radius:999px;
  border:2px solid var(--orange);
  animation:ls-badge-ring .9s var(--ease-out) .2s both;
  pointer-events:none;
}
@keyframes ls-badge-pop{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes ls-badge-ring{from{transform:scale(.7);opacity:.8}to{transform:scale(1.9);opacity:0}}

/* --- Squelette de chargement --------------------------------------------- */
.skeleton-list{display:grid;gap:10px;margin-top:12px}
.skeleton-card{
  position:relative;
  display:flex;
  gap:12px;
  align-items:center;
  overflow:hidden;
  padding:12px;
  border:1px solid rgba(36,36,32,.3);
  background:var(--surface2);
  border-radius:2px;
}
.skeleton-card::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width:60%;
  background:linear-gradient(100deg,transparent,rgba(238,227,208,.85),transparent);
  animation:ls-sweep 1.3s linear infinite;
}
.skeleton-media{width:54px;height:58px;flex:0 0 auto;background:rgba(36,36,32,.16)}
.skeleton-lines{display:grid;gap:8px;flex:1 1 auto}
.skeleton-line{height:13px;background:rgba(36,36,32,.16);max-width:230px}
.skeleton-line.is-short{height:10px;max-width:150px}
@keyframes ls-sweep{from{transform:translateX(-160%)}to{transform:translateX(240%)}}

/* --- Bandeau des prochaines dates (accueil uniquement) -------------------- */
.date-ticker{
  overflow:hidden;
  margin:0 0 14px;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:var(--line);
  padding:9px 0;
  /* Les bords s'estompent : on comprend que le texte défile, au lieu de
     croire qu'il est coupé. */
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 36px,#000 calc(100% - 36px),transparent);
  mask-image:linear-gradient(90deg,transparent,#000 36px,#000 calc(100% - 36px),transparent);
}
.date-ticker-rail{display:flex;width:max-content;animation:ls-ticker var(--ticker-duration,26s) linear infinite}
.date-ticker:hover .date-ticker-rail,
.date-ticker:active .date-ticker-rail{animation-play-state:paused}
.date-ticker-track{display:flex;gap:24px;padding-right:24px}
.ticker-item{
  font-family:var(--display);
  text-transform:uppercase;
  font-size:1rem;
  letter-spacing:.005em;
  color:var(--surface);
  white-space:nowrap;
}
.ticker-item i{color:var(--orange);font-style:normal}
@keyframes ls-ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* --- Animations réduites : tout s'arrête ---------------------------------- */
@media (prefers-reduced-motion:reduce){
  .app-opening{display:none}
  .date-ticker{overflow-x:auto;scrollbar-width:none}
  .date-ticker-rail{animation:none}
  .date-ticker-track:nth-child(2){display:none}
  .skeleton-card::after{animation:none}
  .nav-badge.is-new,.nav-badge.is-new::after,.pulse-bounce{animation:none}
}

/* =============================================================================
   V19.2 — ESPACES DU PERSONNEL, MOT DE PASSE PROVISOIRE, PRÉFÉRENCES E-MAIL
   =============================================================================
   Bouton de bascule « Administration » ⇄ « Mon espace » pour un compte
   personnel lié à un rôle du personnel ; rappel de mot de passe provisoire ;
   interrupteurs des préférences e-mail ; écran de secours au démarrage. */
.space-switch{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:38px;padding:0 13px;border:1px solid var(--cream,#eee3d0);border-radius:2px;
  background:transparent;color:var(--cream,#eee3d0);
  font:800 .66rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;
  transition:background-color var(--dur,.25s) ease,color var(--dur,.25s) ease,transform var(--dur-fast,.15s) ease
}
.space-switch:hover{background:var(--cream,#eee3d0);color:var(--line)}
.space-switch:active{transform:translateY(1px)}
.space-switch:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
.space-switch-dot{width:8px;height:8px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 0 rgba(201,107,67,.55);animation:ls-space-dot 2.4s ease-out infinite}
@keyframes ls-space-dot{0%{box-shadow:0 0 0 0 rgba(201,107,67,.55)}70%,100%{box-shadow:0 0 0 7px rgba(201,107,67,0)}}
.mobile-header .space-switch-header{margin-left:auto}
/* La barre latérale devient une colonne : le bloc « Espace » se cale en bas
   sans jamais recouvrir le menu, même sur un écran peu haut. */
@media(min-width:980px){.app-shell:not(.device-mobile) .sidebar:has(.sidebar-space){display:flex;flex-direction:column;overflow-y:auto}}
.sidebar-space{margin-top:auto;padding-top:22px;display:grid;gap:8px}
.sidebar-space::before{content:"ESPACE";font:800 .58rem/1 var(--mono);letter-spacing:.14em;color:var(--muted)}
.sidebar-space .space-switch{width:100%;justify-content:flex-start;min-height:46px;border-color:var(--line);color:var(--line);background:var(--surface)}
.sidebar-space .space-switch:hover{background:var(--line);color:var(--cream,#eee3d0)}
.sidebar-space .space-switch.to-staff{border-color:var(--orange)}
.global-admin-controls .space-switch{background:var(--cream,#eee3d0);color:var(--line);border-color:var(--line);box-shadow:2px 2px 0 rgba(36,36,32,.16)}
.global-admin-controls .space-switch:hover{background:var(--line);color:var(--cream,#eee3d0)}
.staff-logout{letter-spacing:.06em}
/* Sur ordinateur, la barre latérale porte déjà le bouton — sauf en aperçu
   « Mobile » de l'administration, où elle est masquée. */
@media(min-width:980px){.app-shell:not(.device-mobile) .global-admin-controls .space-switch-controls{display:none}}
/* Téléphone : le bouton se range à droite du sélecteur « Vue test », sur la
   deuxième ligne — la barre garde ses deux lignes (100 px réservés). */
@media(max-width:700px){
  .global-admin-controls .space-switch-controls{grid-column:2;grid-row:2;min-height:100%;font-size:.58rem;padding:0 10px}
  .global-admin-controls:has(.space-switch-controls) .admin-role-control{grid-column:1}
}
/* Modération : une seule ligne (bouton + badge), pas d'aperçu mobile/ordi. */
.moderation-badge{display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:0 13px;border:1px solid var(--orange);border-radius:2px;background:var(--line);color:var(--cream,#eee3d0);font:800 .62rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase}
.moderation-badge::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--orange)}
@media(max-width:700px){
  .global-admin-controls.moderation-controls{display:flex;justify-content:space-between}
  .global-admin-controls.moderation-controls .space-switch-controls{min-height:38px}
  .app-shell.moderation-session .main{padding-top:52px}
  .app-shell.moderation-session .mobile-header{top:52px}
}

.temp-password-banner{
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  margin:14px var(--mobile-gutter,14px) 0;padding:14px 16px;
  border:1px solid var(--line);border-left:6px solid var(--orange);border-radius:2px;
  background:var(--surface2);box-shadow:var(--shadow-hard,6px 6px 0 rgba(36,36,32,.16));
  animation:ls-banner-in var(--dur-slow,.4s) var(--ease-out,ease) both
}
.temp-password-banner>div{display:grid;gap:4px;min-width:min(100%,260px);flex:1}
.temp-password-banner strong{font:900 .72rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--orange2)}
.temp-password-banner span{font-size:.86rem;line-height:1.45}
.temp-password-banner .button{flex:0 0 auto}
@keyframes ls-banner-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media(min-width:980px){
  .temp-password-banner{margin:24px 30px 0}
  /* Sous la barre d'outils fixe de l'administration (en haut à droite). */
  .app-shell.admin-session:not(.device-mobile) .temp-password-banner{margin-top:84px}
}

.email-preferences{display:grid;gap:0;padding:0}
.switch-row{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start;gap:14px;padding:18px 16px;border-bottom:1px solid var(--line);cursor:pointer}
.switch-row input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.switch-track{position:relative;width:46px;height:26px;margin-top:1px;border:1px solid var(--line);border-radius:999px;background:var(--surface2);transition:background-color var(--dur,.25s) ease}
.switch-track::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:var(--line);transition:transform var(--dur,.25s) var(--ease-out,ease),background-color var(--dur,.25s) ease}
.switch-row input:checked+.switch-track{background:var(--orange)}
.switch-row input:checked+.switch-track::after{transform:translateX(20px);background:var(--cream,#eee3d0)}
.switch-row input:focus-visible+.switch-track{outline:2px solid var(--orange);outline-offset:3px}
.switch-row input:disabled+.switch-track{opacity:.45}
.switch-copy{display:grid;gap:4px}
.switch-copy strong{font-size:.95rem}
.switch-copy small{color:var(--muted);font-size:.76rem;line-height:1.45}
.email-preferences>p{margin:0;padding:14px 16px}

.newsletter-check{display:flex;align-items:flex-start;gap:8px;line-height:1.5;border-radius:2px}
.newsletter-check>input{flex:0 0 auto;margin-top:3px}
.newsletter-check .muted{font-size:.85em}

.boot-error{min-height:100dvh;display:grid;place-content:center;justify-items:start;gap:14px;max-width:520px;margin:0 auto;padding:32px 22px}
.boot-error img{background:var(--line);padding:8px 10px;border-radius:2px}
.boot-error h1{margin:0;font:900 clamp(2.4rem,11vw,4rem)/.95 var(--display);text-transform:uppercase}
.boot-error p{margin:0;line-height:1.5}

@media(prefers-reduced-motion:reduce){
  .space-switch-dot{animation:none}
  .temp-password-banner{animation:none}
  .switch-track,.switch-track::after{transition:none}
}
/* Aperçu « Mobile » de l'administration entre 701 et 1279 px : la barre
   d'outils fixe recouvrait le logo du cadre téléphone. Le cadre descend
   d'autant. */
@media (min-width:701px) and (max-width:1279px){
  .app-shell.admin-session.device-mobile .main{padding-top:64px}
  .app-shell.admin-session.device-mobile .mobile-header{top:64px}
}

/* ==========================================================================
   V19.3 — retours de Jeff après la mise en ligne
   ========================================================================== */

/* « ✓ Bien enregistré » : le bouton reste enfoncé, en vert, tant que le
   formulaire n'a pas été modifié à nouveau. */
/* Classe répétée : elle doit l'emporter sur la texture orange des boutons
   pleins (.button:not(.outline):not(.ghost):not(.danger), plus haut). */
.button.is-saved.is-saved.is-saved{
  background:#34553c!important;
  background-image:none!important;
  border-color:var(--line)!important;
  color:var(--cream,#eee3d0)!important;
  box-shadow:inset 2px 2px 0 rgba(0,0,0,.28)!important;
  transform:translate(2px,2px);
  animation:v193-saved .42s var(--ease-out,ease) both
}
.button.is-saved .saved-check{
  display:inline-grid;place-items:center;
  width:20px;height:20px;flex:0 0 20px;
  border-radius:50%;
  background:var(--cream,#eee3d0);color:#34553c;
  font-weight:950;font-size:.8rem;line-height:1
}
.button.is-saved:hover>span{transform:none}
@keyframes v193-saved{
  0%{transform:translate(0,0);box-shadow:4px 4px 0 rgba(36,36,32,.16)}
  45%{transform:translate(3px,3px)}
  100%{transform:translate(2px,2px)}
}

/* Messages : au-dessus des bulles (popover), plus lisibles et plus longs. */
.toast[popover]{top:auto;right:auto;margin:0;overflow:visible;inset-block-start:auto}
.toast{display:flex;align-items:center;justify-content:center;gap:9px;z-index:2147483000}
.toast[popover]:not(:popover-open){display:none}
/* Bulle ouverte : le message s'affiche en haut, pour ne pas recouvrir les
   boutons du bas de la bulle. */
body:has(#modal[open]) .toast{top:18px;bottom:auto}
.toast-icon{
  display:inline-grid;place-items:center;
  width:22px;height:22px;flex:0 0 22px;border-radius:50%;
  background:var(--cream,#eee3d0);color:#34553c;font-weight:950
}
.toast.toast-success{
  background:#34553c!important;background-image:none!important;
  color:var(--cream,#eee3d0)!important;border-color:var(--line)!important
}
.toast.toast-error{
  background:#7a3527!important;background-image:none!important;
  color:var(--cream,#eee3d0)!important;border-color:var(--line)!important
}

/* « Quitter sans enregistrer ? » en haut de la bulle. */
.leave-confirm{
  position:sticky;top:-20px;z-index:5;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;
  margin:-20px -20px 22px;padding:14px 18px;
  background:var(--line);color:var(--cream,#eee3d0);
  border-bottom:3px solid var(--orange);
  animation:v193-leave-in .28s var(--ease-out,ease) both
}
.leave-confirm-copy{display:grid;gap:3px}
.leave-confirm-copy strong{font:900 1.05rem/1.1 var(--display);text-transform:uppercase;letter-spacing:.02em}
.leave-confirm-copy span{font-size:.82rem;opacity:.85}
.leave-confirm-actions{display:flex;flex-wrap:wrap;gap:8px}
.leave-confirm .button.ghost{background:var(--cream,#eee3d0)!important;color:var(--line)!important;border-color:var(--cream,#eee3d0)!important}
.leave-confirm .leave-confirm-quit{box-shadow:none!important}
.leave-confirm.leave-confirm-nudge{animation:v193-nudge .36s ease both}
@keyframes v193-leave-in{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
@keyframes v193-nudge{0%,100%{transform:none}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.modal[data-preview-device="mobile"] .leave-confirm{top:-22px;margin:-22px -15px 16px}

/* Retirer une photo. */
.photo-remove-row{display:grid;gap:6px;justify-items:start;margin-top:8px}
.photo-remove-row:has(.photo-remove-button.hidden):has(.photo-remove-note.hidden){display:none}
.photo-remove-button span{font-size:1.05rem;line-height:1}
.photo-remove-note{margin:0;padding:8px 10px;border-left:3px solid var(--orange);background:rgba(206,106,59,.1);color:#744330}
.photo-remove-note .link{margin-left:6px;font-weight:800}

/* Gérer : sur les cartes sombres, le bouton « Modifier » était invisible
   (texte sombre sur fond sombre), et « Publié » trop pâle sur les claires. */
.cards>.card:nth-child(even) .button.outline,
.manage-grid>.manage-item:nth-child(even) .button.outline,
.admin-row:nth-child(even) .button.outline{
  background:var(--surface2)!important;
  color:var(--line)!important;
  border-color:var(--line)!important
}
.status{background:var(--status-green-bg,#d5ddd0);border-color:#4f6b52;color:#2c4430}
.status.warn{background:var(--status-yellow-bg,#e5dac0);border-color:#8a6b2f;color:#55442a}
.manage-grid>.manage-item:nth-child(even) .status,.cards>.card:nth-child(even) .status,.admin-row:nth-child(even) .status{background:rgba(213,221,208,.14);border-color:#a8c4a6;color:#cfe3c9}
.manage-grid>.manage-item:nth-child(even) .status.warn,.cards>.card:nth-child(even) .status.warn,.admin-row:nth-child(even) .status.warn{background:rgba(229,218,192,.14);border-color:#d9c38f;color:#efdcae}

/* Découvrir : groupes actuels / anciens groupes. */
.discover-groups .section-head{flex-wrap:wrap;gap:12px}
.discover-groups .section-head .discover-group-switch{flex:0 0 auto;width:max-content;max-width:100%}
.discover-group-switch button{display:inline-flex;align-items:center;gap:7px}
.discover-group-switch .count{
  display:inline-grid;place-items:center;min-width:20px;height:18px;padding:0 5px;
  border:1px solid currentColor;border-radius:999px;font-size:.58rem
}
.discover-groups-note{margin:-4px 0 14px}
.discover-group-card .card-media{position:relative}
.discover-group-card.is-former .card-media img{filter:grayscale(.85) contrast(.95)}
.former-badge{
  position:absolute;left:10px;top:10px;
  padding:5px 8px;background:var(--line);color:var(--cream,#eee3d0);
  font:700 .56rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase
}
.discover-groups-teaser .section-head{gap:12px}

/* Administration › Articles : sur écran étroit, l'onglet « Playlist »
   sortait du cadre (barre défilante invisible). Les onglets passent à la
   ligne. */
.tabs.tabs-wrap{flex-wrap:wrap;overflow:visible}

/* Profil : valeur non renseignée. */
.profile-tags .profile-empty-value{border:0!important;background:none!important;padding-left:0!important}

@media(prefers-reduced-motion:reduce){
  .button.is-saved,.leave-confirm,.leave-confirm.leave-confirm-nudge{animation:none}
}

/* ==========================================================================
   V19.4 — profils publics, vues de profils, diagnostic
   ========================================================================== */
.own-profile-note{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;
  margin:16px 0 0;padding:12px 14px;
  border-left:3px solid var(--orange);background:rgba(206,106,59,.1);color:#744330;font-size:.88rem
}
.own-profile-note .link{font-weight:800}
.private-zone-label{
  display:flex;align-items:center;gap:8px;margin:34px 0 -6px;
  color:var(--muted);font:700 .62rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase
}
.private-zone-label .privacy-dot{color:var(--orange);font-size:.7rem}
.person-link{font:inherit;font-weight:800;text-decoration:underline;text-underline-offset:3px;padding:0;background:none;border:0;color:inherit;cursor:pointer}
.person-link:hover,.person-link:focus-visible{color:var(--orange)}
.status.former-status{background:var(--line)!important;border-color:var(--line)!important;color:var(--cream,#eee3d0)!important}
.profile-loading{display:flex;align-items:center;justify-content:center;gap:10px}

.profile-views-controls{display:grid;gap:10px;grid-template-columns:minmax(0,1fr);margin:6px 0 14px}
@media(min-width:701px){.profile-views-controls{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.profile-views-table{width:100%;border-collapse:collapse;font-size:.9rem}
.profile-views-table th{text-align:left;padding:8px 10px;border-bottom:2px solid var(--line);font:700 .6rem/1.2 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.profile-views-table td{padding:10px;border-bottom:1px solid rgba(42,42,39,.18);vertical-align:top}
.profile-views-table .number{text-align:right;white-space:nowrap}
.profile-views-table .rank{width:2.4em;color:var(--muted);font-family:var(--mono);font-size:.75rem}
.profile-views-table tbody tr:hover{background:rgba(206,106,59,.07)}
.profile-views-table td strong{font-size:1.05rem}

.security-diagnostic .diagnostic-verdict{margin:10px 0 6px;padding:12px 14px;border-left:3px solid currentColor;line-height:1.5}
.security-diagnostic .diagnostic-verdict.is-ok{background:var(--status-green-bg,#d5ddd0);color:#2c4430}
.security-diagnostic .diagnostic-verdict.is-warning{background:var(--status-red-bg,#ddc9c2);color:#543630}
.security-diagnostic code{font-family:var(--mono);font-size:.85em;padding:1px 4px;background:rgba(42,42,39,.08)}

/* ==========================================================================
   V19.5 — noms reliés aux profils, version du serveur
   ========================================================================== */
.feed-card>header .author-link{align-self:flex-start;text-align:left}
.author-link:not(.person-link){font:inherit;font-weight:800;padding:0;background:none;border:0;color:inherit;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.author-link:not(.person-link):hover,.author-link:not(.person-link):focus-visible{color:var(--orange)}
.article-byline .author-link{font-weight:700}
.credit-list.compact>div .person-link{text-align:right}
.gallery-viewer-bar>div{display:flex;flex-direction:column;gap:2px;min-width:0}
.gallery-viewer-author .person-link{color:inherit}
.profile-hidden-note{border-left-color:var(--line);background:rgba(42,42,39,.08);color:var(--ink,#2a2a27)}
.server-version-banner{border-left-color:#b23b2b}
/* Deux bandeaux à la suite (version + mot de passe) : un seul décalage. */
@media(min-width:980px){
  .app-shell.admin-session:not(.device-mobile) .server-version-banner+.temp-password-banner{margin-top:14px}
}