/* =====================================================================
   GRME CONNECT — Design system
   Direction artistique : institutionnelle, premium, sobre, verte.
   ===================================================================== */

:root{
  /* Couleurs */
  --primary:#0F6B4A;
  --primary-dark:#095238;
  --primary-light:#E8F5EF;
  --primary-line:#BFE3D0;

  --background:#F6F8FA;
  --surface:#FFFFFF;

  --text-primary:#1F2D3D;
  --text-secondary:#617083;
  --text-tertiary:#94A3AF;
  --text-on-primary:#FFFFFF;

  --border:#DCE3EA;
  --border-strong:#C9D3DC;

  --success-bg:#EDF8F2;
  --success-border:#BFE3D0;
  --success-text:#0F6B4A;

  --error-bg:#FFF1F1;
  --error-border:#F2C4C4;
  --error-text:#B23A3A;

  --info-bg:#F1F5F8;
  --info-border:#DCE3EA;
  --info-text:#46586B;

  /* Rayons */
  --radius-sm:8px;
  --radius-md:12px;
  --radius-lg:18px;
  --radius-full:999px;

  /* Ombres */
  --shadow-xs:0 1px 2px rgba(24,39,50,.05);
  --shadow-sm:0 4px 14px rgba(24,39,50,.06);
  --shadow-md:0 10px 30px rgba(15,45,35,.08);
  --shadow-lg:0 24px 60px rgba(15,45,35,.14);

  /* Transitions */
  --ease:cubic-bezier(.4,0,.2,1);
  --t-fast:150ms var(--ease);
  --t-med:220ms var(--ease);

  --font:'Inter',"Segoe UI",Arial,sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--font);
  color:var(--text-primary);
  background:var(--background);
  -webkit-font-smoothing:antialiased;
}
.container{width:min(1360px,92%);margin:auto}
img{max-width:100%}
a{color:inherit}

h1,h2,h3{font-weight:800;letter-spacing:-.01em;color:var(--text-primary)}

/* ===================== BOUTONS (global) ===================== */
button{font-family:inherit}
.login-btn,.discover-btn,.primary,.forms button,.dashTitle button,
.admin-card button,.admin-tab,.otp-submit,.chat-send{
  border:0;
  border-radius:var(--radius-sm);
  font-weight:700;
  cursor:pointer;
  font-size:14.5px;
  transition:filter var(--t-fast),box-shadow var(--t-fast),transform var(--t-fast),background var(--t-fast);
}
.login-btn,.discover-btn,.primary,.forms button,.dashTitle button,.admin-card button{
  background:var(--primary);
  color:var(--text-on-primary);
  padding:12px 20px;
  box-shadow:var(--shadow-xs);
}
.login-btn{display:inline-flex;gap:10px;align-items:center;text-decoration:none}
.login-btn svg{width:17px;height:17px;stroke:currentColor}
.discover-btn{display:inline-flex;gap:10px;align-items:center;text-decoration:none;margin-top:6px}

button:hover,.discover-btn:hover,.login-btn:hover{filter:brightness(1.07);box-shadow:var(--shadow-sm)}
button:active{transform:translateY(1px) scale(.99);filter:brightness(.95);box-shadow:none}
button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
button:disabled{opacity:.6;cursor:not-allowed;transform:none;box-shadow:none;filter:none}

.ghost-btn{
  border:1px solid var(--border-strong);
  background:var(--surface);
  color:var(--text-secondary);
  border-radius:var(--radius-sm);
  padding:9px 14px;
  cursor:pointer;
  font:inherit;
  font-size:.86rem;
  font-weight:600;
  transition:background var(--t-fast),border-color var(--t-fast);
}
.ghost-btn:hover{background:var(--background);border-color:var(--text-tertiary)}

.primary.danger{background:#C24444}

/* ===================== HEADER / NAV ===================== */
.top-line{height:4px;background:var(--primary)}
.site-header{background:var(--surface);box-shadow:0 1px 0 var(--border);position:sticky;top:0;z-index:20}
.nav-wrap{height:88px;display:flex;align-items:center;justify-content:space-between;gap:20px}

.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--text-primary);min-width:255px}
.brand img{width:44px;height:44px;object-fit:contain}
.brand strong{display:block;font-size:19px;letter-spacing:0}
.brand strong em{color:var(--primary);font-style:normal}
.brand small{display:block;font-size:11.5px;font-weight:600;color:var(--text-secondary);margin-top:2px}
.brand b{
  display:inline-block;margin-top:6px;background:var(--primary-light);color:var(--primary-dark);
  padding:3px 9px;border-radius:var(--radius-full);font-size:9px;font-weight:700;letter-spacing:.4px;
}

.main-nav{display:flex;gap:6px;align-items:center}
.main-nav a{
  color:var(--text-secondary);text-decoration:none;font-size:13px;font-weight:600;
  padding:10px 12px;border-radius:var(--radius-sm);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  line-height:1.1;min-width:64px;transition:background var(--t-fast),color var(--t-fast);
}
.main-nav .nav-icon{width:19px;height:19px;stroke:currentColor;display:block;flex:none}
.main-nav a:hover{background:var(--background);color:var(--text-primary)}
.main-nav a.active{color:var(--accent);background:var(--accent-light);font-weight:700}
.main-nav a.active .nav-icon{width:19px;height:19px}

.account-menu{position:relative}
.login-btn .chevron{width:14px;height:14px;margin-left:-2px}
.account-dropdown{
  position:absolute;right:0;top:calc(100% + 10px);width:216px;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);
  padding:8px;z-index:60;
}
.account-dropdown hr{border:0;border-top:1px solid var(--border);margin:6px 4px}

/* Avatar rond du bouton compte : photo de profil si disponible, sinon
   initiales sur fond vert GRME. Utilisé à la fois sur le bouton fermé et
   dans l'en-tête du menu déroulant (variante "lg" plus grande). */
.account-avatar{
  width:26px;height:26px;border-radius:50%;flex-shrink:0;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  background:var(--primary);color:#fff;font-size:.72rem;font-weight:700;letter-spacing:.02em;
}
.account-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.login-btn .account-avatar{margin-right:2px}
.account-avatar-lg{width:40px;height:40px;font-size:.95rem}
.account-dropdown-header{
  display:flex;align-items:center;gap:10px;padding:8px 10px 12px;margin-bottom:4px;
  border-bottom:1px solid var(--border);
}
.account-dropdown-header strong{font-size:.9rem;font-weight:700;color:var(--text-primary);word-break:break-word}
.dropdown-item{
  display:flex;align-items:center;gap:10px;width:100%;text-align:left;border:0;background:none;
  padding:10px 12px;border-radius:var(--radius-sm);font:inherit;font-size:.88rem;font-weight:600;
  color:var(--text-primary);cursor:pointer;transition:background var(--t-fast);
}
.dropdown-item:hover{background:var(--background)}
.dropdown-item i{width:16px;height:16px}
.dropdown-item.danger{color:var(--error-text)}
.dropdown-item.danger:hover{background:var(--error-bg)}
.dropdown-item[hidden]{display:none;}
.attachment-size{font-weight:400;opacity:.72;font-size:11px}

/* Publication temporaire des notes individuelles et du rang */
.directory-detail-results{ margin-top:16px; text-align:left; }
.directory-detail-results:empty{ display:none; }
.directory-results-title{
  margin:0 0 10px; font-size:1rem; font-weight:800; color:var(--text-primary);
  padding-bottom:8px; border-bottom:1px solid var(--border);
}
.directory-results-hint{ text-align:left; }

/* Bandeau "Rang / Moyenne générale" : deux indicateurs mis en avant
   plutôt qu'une phrase brute, pour un rendu plus soigné en tête de fiche. */
.directory-results-stats{
  display:flex;
  align-items:stretch;
  gap:0;
  margin:0 0 16px;
  background:linear-gradient(135deg,var(--accent-light),var(--surface));
  border:1px solid var(--accent-line);
  border-radius:var(--radius-md);
  overflow:hidden;
}
.directory-results-stat{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  padding:12px 8px;
  min-width:0;
}
.directory-results-stat-divider{
  width:1px;
  align-self:stretch;
  background:var(--accent-line);
  margin:10px 0;
}
.directory-results-stat-label{
  font-size:.68rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:var(--text-secondary);
}
.directory-results-stat-value{
  font-size:1.32rem;
  font-weight:800;
  color:var(--accent-dark);
  font-variant-numeric:tabular-nums;
  line-height:1.2;
  white-space:nowrap;
}
.directory-results-stat-sub{
  font-size:.72rem;
  font-weight:600;
  color:var(--text-secondary);
  margin-left:1px;
}
.directory-results-list{ display:flex; flex-direction:column; gap:12px; }
.parcours-rank-pending:not(:empty){ font-weight:500; }

/* La fiche annuaire est toujours étroite (max 400px), quelle que soit la
   taille de l'écran : sans ce gabarit dédié, les colonnes fixes du tableau
   "Mon parcours" (pensées pour une page pleine largeur) débordaient et
   coupaient l'en-tête "Moyenne" en "MOYI". */
.directory-detail-results .parcours-ue{ padding:12px 14px; }
.directory-detail-results .parcours-line{
  grid-template-columns:minmax(0,1fr) 42px 42px 52px;
  gap:6px;
  font-size:.78rem;
  padding:6px 0;
}
.directory-detail-results .parcours-head{ font-size:.62rem; }
.directory-detail-results .parcours-subject{ white-space:normal; word-break:break-word; }

.grade-window-panel{ margin-bottom:18px; }
.grade-window-panel h3{ margin:0 0 6px; font-size:1rem; }
.grade-window-active{
  margin:10px 0;
  padding:12px 14px;
  border-radius:var(--radius-sm);
  background:var(--accent-light);
  border:1px solid var(--accent-line);
}
.grade-window-active p{ margin:0 0 6px; }
.grade-window-history{ margin-top:10px; }
.grade-window-history-row{
  display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap;
  padding:6px 0; border-top:1px solid var(--border); font-size:.84rem; color:var(--text-secondary);
}

/* ===================== CENTRE DE NOTIFICATIONS ===================== */
.theme-toggle-btn{
  display:inline-flex;align-items:center;justify-content:center;position:relative;
  width:40px;height:40px;border-radius:50%;border:1px solid var(--border);
  background:var(--surface);color:var(--text-secondary);cursor:pointer;flex:none;
  transition:background var(--t-fast),color var(--t-fast),border-color var(--t-fast);
}
.theme-toggle-btn:hover{background:var(--accent-light);color:var(--accent-dark);border-color:var(--accent-line)}
.theme-toggle-icon{width:18px;height:18px;display:block}
.lang-switch-wrap{position:relative}
.lang-switch-btn{position:relative}
.lang-switch-menu{
  position:absolute;right:0;top:calc(100% + 10px);width:180px;max-width:calc(100vw - 24px);
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);
  box-shadow:var(--shadow-lg);z-index:60;overflow:hidden;padding:6px;
}
.lang-switch-option{
  display:flex;align-items:center;gap:8px;width:100%;padding:8px 10px;border:0;background:none;
  font:inherit;font-size:.85rem;color:var(--text-primary);cursor:pointer;border-radius:var(--radius-sm);
  text-align:left;transition:background var(--t-fast);
}
.lang-switch-option:hover{background:var(--background)}
.lang-switch-option.active{color:var(--accent-dark);font-weight:700;background:var(--accent-light)}
.lang-switch-check{width:15px;height:15px;flex:none;display:inline-flex;visibility:hidden}
.lang-switch-option.active .lang-switch-check{visibility:visible}
@media (max-width:760px){
  .lang-switch-menu{position:fixed;right:12px;left:12px;top:auto;bottom:80px;width:auto;max-width:none}
}
.notif-bell-wrap{position:relative}
.notif-bell{
  display:inline-flex;align-items:center;justify-content:center;position:relative;
  width:40px;height:40px;border-radius:50%;border:1px solid var(--border);
  background:var(--surface);color:var(--text-secondary);cursor:pointer;
  transition:background var(--t-fast),color var(--t-fast),border-color var(--t-fast);
}
.notif-bell:hover{background:var(--accent-light);color:var(--accent-dark);border-color:var(--accent-line)}
.notif-bell-icon{width:18px;height:18px}
.notif-badge{
  position:absolute;top:-4px;right:-4px;min-width:17px;height:17px;padding:0 4px;
  border-radius:var(--radius-full);background:var(--accent);color:#fff;
  font-size:10px;font-weight:800;line-height:17px;text-align:center;border:2px solid var(--surface);
}
.notif-panel{
  position:absolute;right:0;top:calc(100% + 10px);width:340px;max-width:calc(100vw - 24px);
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);
  box-shadow:var(--shadow-lg);z-index:60;overflow:hidden;
}
.notif-panel-header{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:12px 14px;border-bottom:1px solid var(--border);
}
.notif-panel-header strong{font-size:.92rem}
.notif-mark-all{
  border:0;background:none;color:var(--accent);font:inherit;font-size:.78rem;font-weight:700;
  cursor:pointer;padding:4px 6px;border-radius:var(--radius-sm);
}
.notif-mark-all:hover{background:var(--accent-light)}
.notif-panel-list{max-height:360px;overflow-y:auto;padding:6px}
.notif-panel-list .hint{padding:16px;text-align:center;color:var(--text-tertiary);font-size:.85rem}
.notif-item{
  display:flex;flex-direction:column;gap:2px;padding:10px 10px;border-radius:var(--radius-sm);
  cursor:pointer;text-align:left;width:100%;border:0;background:none;font:inherit;
  transition:background var(--t-fast);
}
.notif-item:hover{background:var(--background)}
.notif-item.unread{background:var(--accent-light)}
.notif-item.unread:hover{background:var(--accent-line)}
.notif-item-title{font-size:.85rem;font-weight:700;color:var(--text-primary);display:flex;align-items:center;gap:6px}
.notif-item.unread .notif-item-title::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent);flex:none}
.notif-item-body{font-size:.8rem;color:var(--text-secondary);line-height:1.4}
.notif-item-time{font-size:.7rem;color:var(--text-tertiary)}
@media (max-width:760px){
  .notif-panel{position:fixed;right:12px;left:12px;top:auto;bottom:80px;width:auto;max-width:none}
}

/* ===================== SONDAGES DE DISCUSSION ===================== */
.chat-poll-composer{
  display:flex;flex-direction:column;gap:8px;padding:12px;margin:0 0 8px;
  background:var(--background);border:1px solid var(--border);border-radius:var(--radius-md);
}
.chat-poll-composer[hidden]{display:none}
#pollQuestion{
  border:1px solid var(--border-strong);border-radius:var(--radius-sm);padding:9px 12px;
  font:inherit;font-size:.88rem;background:var(--surface);color:var(--text-primary);
}
.poll-options-list{display:flex;flex-direction:column;gap:6px}
.poll-option-input{
  border:1px solid var(--border-strong);border-radius:var(--radius-sm);padding:8px 12px;
  font:inherit;font-size:.85rem;background:var(--surface);color:var(--text-primary);
}
.poll-composer-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}
.chat-attach.active{background:var(--accent-light);color:var(--accent-dark);border-radius:var(--radius-sm)}

.chat-poll{display:flex;flex-direction:column;gap:8px;margin:4px 0;min-width:220px}
.chat-poll-question{font-size:.88rem;font-weight:700;color:var(--text-primary);display:flex;align-items:center;gap:6px}
.chat-poll-option{
  position:relative;display:block;width:100%;text-align:left;border:1px solid var(--border-strong);
  border-radius:var(--radius-sm);background:var(--surface);cursor:pointer;overflow:hidden;padding:0;
  font:inherit;transition:border-color var(--t-fast);
}
.chat-poll-option:hover{border-color:var(--accent)}
.chat-poll-option.voted{border-color:var(--accent)}
.chat-poll-option-fill{
  position:absolute;inset:0;width:0;background:var(--accent-light);transition:width var(--t-fast);z-index:0;
}
.chat-poll-option-row{
  position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:8px 12px;font-size:.83rem;font-weight:600;color:var(--text-primary);
}
.chat-poll-option-pct{font-size:.78rem;font-weight:800;color:var(--accent-dark)}
.chat-poll-total{font-size:.72rem;color:var(--text-tertiary)}

/* ===================== HERO ===================== */
.hero{height:500px;position:relative;overflow:hidden}
.hero-bg{position:absolute;inset:0;background:url('hero-students.jpg') center 42%/cover no-repeat}
.hero-overlay{
  position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(246,248,250,.98) 0%,rgba(246,248,250,.92) 30%,rgba(246,248,250,.35) 60%,rgba(246,248,250,.04) 100%);
}
.hero-content{position:relative;height:100%;padding-top:40px}
.hero-copy{width:460px}
.partner-logos{display:flex;gap:38px;margin-bottom:16px}
.partner-logos figure{margin:0;width:84px;height:68px;display:flex;align-items:center;justify-content:center}
.partner-logos img{max-width:82px;max-height:68px;object-fit:contain}

.hero h2{margin:0;font-size:17px;font-weight:600;color:var(--text-secondary)}
.hero h1{font-size:44px;margin:4px 0 14px;color:var(--text-primary);letter-spacing:-.02em;line-height:1.05}
.hero h1 span{color:var(--primary)}
.hero-description,.hero-intro{line-height:1.5;font-size:14.5px;margin:10px 0;color:var(--text-secondary)}
.hero-description strong{color:var(--text-primary)}
.hero-intro{font-size:16px;margin:16px 0}

.stats-card{
  position:absolute;right:3%;bottom:20px;width:60%;min-height:92px;
  background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow-md);
  border-radius:var(--radius-lg);display:grid;grid-template-columns:repeat(4,1fr);overflow:hidden;
}
.stats-card>div{display:flex;align-items:center;gap:12px;padding:16px 18px;border-right:1px solid var(--border)}
.stats-card>div:last-child{border:0}
.stat-icon{
  width:38px;height:38px;flex:none;border-radius:var(--radius-sm);
  background:var(--primary-light);color:var(--primary);
  display:flex;align-items:center;justify-content:center;
}
.stat-icon svg,.stat-icon i{width:19px;height:19px}
.stats-card p{font-size:11.5px;margin:0;color:var(--text-secondary)}
.stats-card strong{display:block;font-size:15px;margin-top:3px;color:var(--text-primary);white-space:nowrap;line-height:1.15}

/* ===================== ACCÈS RAPIDES / INE ===================== */
.quick-section,.categories-section{padding:36px 0;background:var(--background)}
.section-mini-title,.section-head h2{font-size:19px;margin:0 0 16px;font-weight:800}
.quick-layout{display:block}
.quick-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}

.quick-card,.category-card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);
  text-decoration:none;color:var(--text-primary);display:flex;align-items:center;gap:12px;
  box-shadow:var(--shadow-xs);transition:box-shadow var(--t-fast),transform var(--t-fast),border-color var(--t-fast);
}
.quick-card:hover,.category-card:hover{box-shadow:var(--shadow-sm);transform:translateY(-2px);border-color:var(--border-strong)}

.quick-card{min-height:104px;padding:16px 14px}
.quick-card i,.quick-card>svg,
.category-card i,.category-card>svg{
  font-style:normal;width:38px;height:38px;min-width:38px;padding:9px;box-sizing:border-box;
  border-radius:var(--radius-sm);background:var(--primary-light);color:var(--primary);stroke-width:2;
}
.quick-card strong,.category-card strong{display:block;font-size:12.5px;font-weight:700}
.quick-card small,.category-card small{display:block;font-size:10.5px;line-height:1.5;margin-top:4px;color:var(--text-secondary)}

.ine-card{
  background:#fff;
  border:1px solid #dce8e5;border-radius:22px;overflow:hidden;
  min-height:138px;padding:0;width:100%;box-shadow:0 10px 28px rgba(19,63,52,.08);position:relative;
  display:flex;align-items:stretch;isolation:isolate;
}
.ine-card::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(255,255,255,.08) 0%,rgba(255,255,255,0) 56%);z-index:0}
.ine-card>div{width:52%;position:relative;z-index:2;padding:20px 22px;display:flex;flex-direction:column;justify-content:center;background:linear-gradient(90deg,#fff 0%,#fff 82%,rgba(255,255,255,.96) 100%)}
.ine-card h3{margin:0 0 8px;font-size:17px;color:#162b42;letter-spacing:-.01em}
.ine-card p{font-size:11.5px;line-height:1.7;color:#617084;margin:0}
.ine-card a,.section-head>a{color:#12965e;text-decoration:none;font-weight:800;font-size:12px}
.ine-card a{display:inline-flex;align-items:center;margin-top:8px;width:max-content}
.ine-card img{display:block;width:52%;height:100%;min-height:138px;object-fit:cover;object-position:center;position:relative;z-index:1}

/* ===================== SECTIONS GÉNÉRIQUES ===================== */
.section-head{display:flex;justify-content:space-between;align-items:end;margin-bottom:20px;gap:12px}
.section-head h2{margin:0}
.section-head p{margin:5px 0 0;color:var(--text-secondary);font-size:12.5px}

.category-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.category-card{padding:16px;min-height:92px}

.section{padding:52px 0}
.pale{background:var(--surface);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.eyebrow{color:var(--primary);font-size:12px;letter-spacing:.02em;font-weight:700;margin:0 0 4px}

/* ===================================================================
   COMMENT ÇA MARCHE — étapes animées au défilement (image + texte)
   =================================================================== */
.how-it-works-section{padding:16px 0 60px}
.how-it-works-head{max-width:520px;margin:0 auto 44px;text-align:center}
.how-it-works-head h2{margin:6px 0 0;font-size:26px;font-weight:800}

.how-steps{display:flex;flex-direction:column;gap:64px}

.how-step{
  display:grid;grid-template-columns:200px 1fr;gap:36px;align-items:center;
  opacity:0;transform:translateY(32px);
  transition:opacity .7s cubic-bezier(.16,.8,.3,1),transform .7s cubic-bezier(.16,.8,.3,1);
}
.how-step.in-view{opacity:1;transform:translateY(0)}
.how-step:nth-child(even){grid-template-columns:1fr 200px}
.how-step:nth-child(even) .how-step-media{order:2}

.how-step-media{
  width:180px;height:180px;border-radius:50%;overflow:hidden;margin:0 auto;
  display:flex;align-items:center;justify-content:center;
  background:var(--primary-light);border:6px solid var(--surface);
  box-shadow:0 14px 30px rgba(0,0,0,.12);
}
.how-step-media img{width:100%;height:100%;object-fit:cover;display:block}
.how-step-media .how-step-icon{width:64px;height:64px;color:var(--primary);stroke-width:1.6}

.how-step-content{position:relative}
.how-step-number{
  position:absolute;top:-34px;right:0;font-size:64px;font-weight:800;line-height:1;
  color:var(--primary-light);z-index:-1;user-select:none;
}
.how-step:nth-child(even) .how-step-number{right:auto;left:0}
.how-step-eyebrow{font-size:12px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;color:var(--primary);margin:0 0 6px}
.how-step-content h3{margin:0 0 8px;font-size:21px;font-weight:800}
.how-step-content p{margin:0;color:var(--text-secondary);line-height:1.55}

@media (max-width:680px){
  .how-step,.how-step:nth-child(even){grid-template-columns:1fr;text-align:center}
  .how-step:nth-child(even) .how-step-media{order:0}
  .how-step-media{width:140px;height:140px}
  .how-step-number,.how-step:nth-child(even) .how-step-number{position:static;display:block;font-size:38px;margin-bottom:2px;left:auto;right:auto}
  .how-steps{gap:44px}
}

@media (prefers-reduced-motion:reduce){
  .how-step{opacity:1;transform:none;transition:none}
  .public-step-media,.public-step-badge{animation:none !important}
  /* Point 4 : les deux heros doivent rester visibles immédiatement, sans fondu/translation,
     pour les utilisateurs qui ont demandé moins de mouvement. */
  .showcase-hero-copy,
  .app-view .hero .hero-copy,
  .app-view .hero .stats-card,
  .trust-card,
  .quick-card{opacity:1;transform:none;transition:none}
  /* Point 8 : le défilement automatique est déjà coupé en JS ; on retire
     aussi la transition CSS pour que la navigation manuelle reste instantanée. */
  .opp-track{transition:none}
}
.section h2{font-size:26px;margin:4px 0 16px;font-weight:800}
.section-text{color:var(--text-secondary);font-size:14px}

/* ===================== CARTES / RESSOURCES ===================== */
.resource-tools{display:flex;gap:10px;margin:20px 0}
.resource-tools input,.resource-tools select{
  padding:12px 14px;border:1px solid var(--border);border-radius:var(--radius-sm);
  font:inherit;background:var(--surface);color:var(--text-primary);transition:border-color var(--t-fast),box-shadow var(--t-fast);
}
.resource-tools input:focus,.resource-tools select:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-light);outline:none}
.resource-tools input{flex:1}
.resource-tools select{min-width:170px}

.data-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.data-grid .card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);
  padding:18px;box-shadow:var(--shadow-xs);transition:box-shadow var(--t-fast),transform var(--t-fast);
}
.data-grid .card:hover{box-shadow:var(--shadow-sm);transform:translateY(-2px)}
.data-grid .card h3{font-size:15px;margin:8px 0 4px}
.data-grid .card p{color:var(--text-secondary);font-size:13px;margin:0}
.data-grid .card small{color:var(--text-tertiary);font-size:11.5px}
.card-title{font-weight:700;color:var(--text-primary);margin-bottom:4px}

.tag{
  display:inline-block;font-size:10.5px;font-weight:700;color:var(--primary-dark);
  background:var(--primary-light);padding:4px 9px;border-radius:var(--radius-full);
}
.event{
  padding:16px 18px;border-left:3px solid var(--primary);background:var(--surface);
  border:1px solid var(--border);border-left-width:3px;border-radius:0 var(--radius-md) var(--radius-md) 0;margin-bottom:10px;
}
.event b{color:var(--text-primary)}
.event p{color:var(--text-secondary);font-size:13px;margin:4px 0}
.event small{color:var(--text-tertiary);font-size:11.5px}

.hidden-data:empty{display:none}

.file-label{display:grid;gap:6px;font-size:12px;color:var(--text-secondary);font-weight:600}
.file-label input[type=file]{padding:9px;border:1px dashed var(--border-strong);border-radius:var(--radius-sm);font:inherit;background:var(--background)}
.attachment-image-wrap{margin-top:10px}
.attachment-image{display:block;max-width:100%;max-height:360px;border-radius:var(--radius-md);border:1px solid var(--border);object-fit:cover}
.resource-file{display:inline-block;margin-top:10px;font-size:12px;font-weight:700;color:var(--primary);text-decoration:none}
.resource-file:hover{text-decoration:underline}
.resource-file.resource-corrige{display:block;color:var(--success-text)}

/* Point 9 : champs « année académique / session / corrigé » du formulaire
   de publication d'un examen — repris de la même grille que le reste du
   formulaire (.admin-card form{display:grid;gap:10px}). */
.resource-exam-fields:not([hidden]){display:grid;gap:10px;padding:10px;border:1px dashed var(--border-strong);border-radius:var(--radius-sm);background:var(--background)}
/* Le sélecteur ci-dessus doit rester :not([hidden]) : une règle .resource-exam-fields{display:grid}
   sans cette précision écrase l'attribut natif hidden posé par toggleResourceExamFields() en JS,
   car une règle d'auteur l'emporte sur la feuille de style par défaut du navigateur. */

/* Badge année/session affiché sur les cartes d'examen, juste après
   l'étiquette de catégorie existante (.tag). */
.tag-exam-meta{margin-left:6px;color:var(--accent-dark);background:var(--accent-light)}

.matricule-status{margin:-6px 0 4px;font-size:12px;font-weight:700}
.matricule-status.ok{color:var(--success-text)}
.matricule-status.error{color:var(--error-text)}
.matricule-status.warn{color:#9A6B1E}

/* ===================== SECTION "À LA UNE" ===================== */
.highlights-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:18px}
.highlight-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);padding:20px;box-shadow:var(--shadow-xs)}
.highlight-card h3{display:flex;align-items:center;gap:8px;font-size:1rem;margin:0 0 12px;color:var(--text-primary)}
.highlight-card h3 i{width:17px;height:17px;color:var(--primary)}
.highlight-content p{color:var(--text-secondary);font-size:.9rem;margin:0}
.highlight-link{display:inline-block;margin-top:14px;font-size:.85rem;font-weight:700;color:var(--primary)!important;text-decoration:none}
.highlight-link:hover{text-decoration:underline}
@media (max-width:760px){.highlights-grid{grid-template-columns:1fr}}

/* ===================== DASHBOARD / PROFIL ===================== */
.dashboard{background:var(--background)}
.dashTitle{display:flex;justify-content:space-between;align-items:center;gap:12px}
.panel-danger{
  border:1.5px solid var(--error-border);
  background:var(--error-bg);
}
.panel-danger h3{
  margin:0 0 8px;
  color:var(--error-text);
  display:flex;
  align-items:center;
  gap:8px;
}
.panel-danger-icon{ font-size:1.05em; line-height:1; }
.panel-danger-warning{
  margin:0 0 16px;
  color:var(--error-text);
  opacity:.9;
  font-size:.88rem;
  line-height:1.5;
  max-width:560px;
}
.account-danger-actions{ display:flex; flex-wrap:wrap; gap:10px; }
.ghost-btn.danger{
  color:var(--error-text);
  background:var(--surface);
  border:1.5px solid var(--error-border);
  font-weight:700;
}
.ghost-btn.danger:hover{ background:#e5484d14; border-color:var(--error-text); }
.primary.danger{
  border:1.5px solid transparent;
  box-shadow:0 1px 2px rgba(194,68,68,.35);
}
.primary.danger:hover{ background:#A83737; }
.modal-danger-warning{
  background:var(--error-bg);
  border:1px solid var(--error-border);
  color:var(--error-text);
  border-radius:var(--radius-sm);
  padding:10px 12px;
  font-size:.88rem;
  line-height:1.5;
}
.delete-account-form{
  display:grid;
  gap:14px;
  margin:16px 0 4px;
  text-align:left;
}
.delete-account-form .settings-label input{ width:100%; box-sizing:border-box; }
#deactivateAccountModal h2,#deleteAccountModal h2{
  display:flex;
  align-items:center;
  gap:8px;
}
.hidden-authors-list{ list-style:none; margin:10px 0 0; padding:0; display:flex; flex-direction:column; gap:8px; }
.hidden-authors-list li{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 10px; border:1px solid var(--border-subtle); border-radius:var(--radius-md); }
.feed-hide-author{ background:none; border:none; color:var(--text-tertiary); cursor:pointer; font-size:.78rem; padding:2px 4px; }
.feed-hide-author:hover{ color:var(--text-secondary); text-decoration:underline; }
.panel{border:1px solid var(--border);padding:22px;border-radius:var(--radius-lg);background:var(--surface);box-shadow:var(--shadow-xs)}

.profile-info{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0}
.profile-info div{background:var(--background);border-radius:var(--radius-sm);padding:12px 14px}
.profile-info dt{font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;color:var(--text-tertiary);margin:0 0 4px}
.profile-info dd{margin:0;font-weight:700;color:var(--text-primary)}
@media (max-width:760px){.profile-info{grid-template-columns:1fr}}

.admin-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px;border-bottom:1px solid var(--border);padding-bottom:12px}
.admin-tab{
  border:1px solid var(--border);background:var(--surface);padding:9px 16px;border-radius:var(--radius-sm);
  font:inherit;font-size:.85rem;font-weight:700;color:var(--text-secondary);
}
.admin-tab.active{background:var(--accent);border-color:var(--accent);color:var(--text-on-primary)}
.admin-tab-panel{display:none}
.admin-tab-panel.active{display:block}

/* Phase 2 : liste verticale des fonctionnalités admin (icône + libellé +
   description), en remplacement visuel de la barre d'onglets horizontale.
   Les classes .admin-tab / .admin-tab-panel et le mécanisme JS associé ne
   changent pas ; seule cette présentation en liste est ajoutée. */
#adminMenu.admin-tabs{flex-direction:column;gap:10px;border-bottom:none;padding-bottom:0}
.admin-menu-item{
  display:flex;align-items:flex-start;gap:14px;width:100%;text-align:left;
  padding:14px 16px;background:var(--surface);
}
.admin-menu-item strong{display:block;font-size:.92rem;color:var(--text-primary);font-weight:700}
.admin-menu-item small{display:block;margin-top:2px;font-size:.78rem;font-weight:500;color:var(--text-tertiary);white-space:normal;line-height:1.35}
.admin-menu-item.active{background:var(--accent);border-color:var(--accent)}
.admin-menu-item.active strong,.admin-menu-item.active small{color:var(--text-on-primary)}
.admin-menu-item i{flex:none;margin-top:2px}
.admin-menu-back{margin-bottom:16px;display:inline-flex;align-items:center;gap:6px}
.admin-menu-back i{width:16px;height:16px}
.admin-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.admin-card{border:1px solid var(--border);border-radius:var(--radius-md);padding:18px;background:var(--surface)}
.admin-card h3{display:flex;align-items:center;gap:8px;font-size:.94rem;margin:0 0 14px;color:var(--text-primary)}
.admin-card h3 i{width:16px;height:16px;color:var(--primary)}
.admin-card form{display:grid;gap:10px}
@media (max-width:1000px){.admin-grid{grid-template-columns:1fr}}

/* ===================== SECTEUR 1 : PUBLIER (integration maquette) ===================== */
.admin-page-header{margin-bottom:18px}
.admin-breadcrumb{display:flex;align-items:center;gap:6px;font-size:.8rem;color:var(--text-tertiary);margin-bottom:12px}
.admin-breadcrumb i{width:14px;height:14px}
.admin-page-header-row{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap}
.admin-page-title-block{display:flex;align-items:flex-start;gap:14px}
.admin-page-title-block h2{margin:0 0 4px;font-size:1.5rem;color:var(--text-primary)}
.admin-page-title-block .hint{margin:0}
.admin-page-icon{
  flex:0 0 44px;width:44px;height:44px;border-radius:var(--radius-md);
  display:flex;align-items:center;justify-content:center;background:var(--primary-light);color:var(--primary);
}
.admin-page-icon i{width:22px;height:22px}
.admin-page-icon.n2{background:#DCEBFF;color:#2F6FED}

.publish-tabs{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin:18px 0}
.publish-tab{
  display:flex;align-items:flex-start;gap:10px;text-align:left;
  padding:14px;border:1.5px solid var(--border);border-radius:var(--radius-md);background:var(--surface);
  cursor:pointer;transition:border-color var(--t-fast),background var(--t-fast),box-shadow var(--t-fast);
  font:inherit;
}
.publish-tab:hover{border-color:var(--border-strong)}
.publish-tab.active{border-color:#0F6B4A;background:#F1FBF6;box-shadow:0 2px 8px rgba(15,107,74,.12)}
.publish-tab-icon{
  width:34px;height:34px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.publish-tab-icon i{width:17px;height:17px}
.publish-tab-icon.n1{background:#E8F5EF;color:#0F6B4A}
.publish-tab-icon.n2{background:#DCEBFF;color:#2F6FED}
.publish-tab-icon.n3{background:#FFE9CC;color:#EA9C22}
.publish-tab-icon.n4{background:#F1E4FF;color:#9333EA}
.publish-tab-icon.n5{background:#FFE1EE;color:#DB2777}
.publish-tab-text strong{display:block;font-size:.86rem;color:var(--text-primary)}
.publish-tab-text small{display:block;margin-top:2px;font-size:.72rem;color:var(--text-tertiary);white-space:normal;line-height:1.3}
@media (max-width:1100px){.publish-tabs{grid-template-columns:repeat(3,1fr)}}
@media (max-width:700px){.publish-tabs{grid-template-columns:repeat(2,1fr)}}

.publish-shell{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:20px;align-items:start}
#addResource,#addAnnouncement,#addEvent,#addOpportunity{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;min-width:0}
#addResource label,#addAnnouncement label,#addEvent label,#addOpportunity label{display:grid;gap:5px;font-size:.78rem;font-weight:700;color:var(--text-secondary)}
.field-full{grid-column:1/-1}
.file-dropzone input[type=file]{
  padding:22px 12px;border:1.5px dashed var(--border-strong);border-radius:var(--radius-md);
  text-align:center;background:var(--background);cursor:pointer;
}
.publish-form-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:4px}
.publish-form-actions button{flex:none;padding:11px 20px}
@media (max-width:980px){
  .publish-shell{grid-template-columns:1fr}
  #addResource,#addAnnouncement,#addEvent,#addOpportunity{grid-template-columns:1fr}
}

.sidebar-card{display:flex;flex-direction:column;gap:12px}
.sidebar-card-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.sidebar-card-head h3{margin:0}
.link-btn{background:none;border:0;color:var(--primary);font:inherit;font-size:.78rem;font-weight:700;display:inline-flex;align-items:center;gap:4px;cursor:pointer;padding:0}
.link-btn i{width:13px;height:13px}
.publish-recent-list{display:flex;flex-direction:column;gap:8px}
.publish-recent-item{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--border)}
.publish-recent-item:last-child{border-bottom:0}
.publish-recent-icon{flex:0 0 34px;width:34px;height:34px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;background:var(--primary-light);color:var(--primary)}
.publish-recent-icon i{width:16px;height:16px}
.publish-recent-info{flex:1;min-width:0}
.publish-recent-title{font-size:.8rem;font-weight:700;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.publish-recent-meta{font-size:.72rem;color:var(--text-tertiary);margin-top:2px}
.publish-recent-badge{flex:none;font-size:.68rem;font-weight:700;padding:3px 8px;border-radius:var(--radius-full);background:#E8F5EF;color:#0F6B4A}

.quick-actions-grid{display:grid;grid-template-columns:1fr;gap:8px}
.quick-action-btn{
  display:flex;align-items:center;gap:8px;padding:11px 12px;border-radius:var(--radius-sm);border:0;
  font:inherit;font-size:.82rem;font-weight:700;cursor:pointer;color:#fff;text-align:left;
}
.quick-action-btn i{width:15px;height:15px}
.quick-action-btn.qa-green{background:#0F6B4A}
.quick-action-btn.qa-blue{background:#2F6FED}
.quick-action-btn.qa-orange{background:#B45309}

.publish-visibility-row{display:flex;flex-wrap:wrap;gap:14px 20px;align-items:flex-end;margin-top:2px;min-width:0}
.publish-visibility-row label{flex:1 1 220px;min-width:0}
.publish-notify-check{display:flex;align-items:center;gap:8px;flex:none;font-size:.82rem;color:var(--text-secondary);white-space:nowrap;margin-bottom:2px}

.tips-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.tips-list li{display:flex;align-items:flex-start;gap:8px;font-size:.8rem;color:var(--text-secondary)}
.tips-list li i{width:15px;height:15px;color:#0F6B4A;flex-shrink:0;margin-top:1px}

/* Secteur 2 (maquette "Gerer le contenu") : statistiques reelles + filtres
   reels pour la liste des ressources. Aucune donnee fictive : les compteurs
   viennent des tableaux resources/announcements/events/opportunities deja
   charges depuis Supabase, et "Espace utilise" est la somme reelle de
   file_size sur les ressources actives (pas de quota invente). */
.manage-stats-row{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-bottom:16px}
.manage-count-badge{font-size:.72rem;font-weight:700;color:var(--text-tertiary);background:var(--background);border-radius:var(--radius-full);padding:2px 9px;margin-left:4px;vertical-align:middle}
.manage-filters-row{display:flex;flex-wrap:wrap;align-items:end;gap:10px;margin:14px 0;padding:12px;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface)}
.manage-filters-row label{display:grid;gap:4px;font-size:.74rem;font-weight:700;color:var(--text-secondary)}
.manage-filters-row select,.manage-filters-row input[type=search]{font:inherit;padding:8px 10px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--background);color:var(--text-primary)}
.manage-filters-row .manage-filter-search{position:relative;flex:1 1 200px;min-width:160px}
.manage-filters-row .manage-filter-search i{position:absolute;left:9px;top:calc(50% + 2px);transform:translateY(-50%);width:14px;height:14px;color:var(--text-tertiary);pointer-events:none}
.manage-filters-row .manage-filter-search input{width:100%;padding-left:30px}
.manage-filters-row button{flex:none;align-self:end;display:inline-flex;align-items:center;gap:6px;padding:8px 14px}
@media (max-width:1100px){.manage-stats-row{grid-template-columns:repeat(3,1fr)}}
@media (max-width:700px){.manage-stats-row{grid-template-columns:repeat(2,1fr)}.manage-filters-row{flex-direction:column;align-items:stretch}.manage-filters-row button{align-self:stretch;justify-content:center}}

.manage-table-section{margin:14px 0}
.manage-table-section h3{display:flex;align-items:center;gap:8px;margin:0 0 10px}
.manage-table-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface)}
.manage-table{width:100%;border-collapse:collapse;font-size:.86rem;min-width:820px}
.manage-table thead th{position:sticky;top:0;background:var(--background);text-align:left;padding:10px 12px;font-size:.72rem;font-weight:700;letter-spacing:.02em;color:var(--text-secondary);border-bottom:1px solid var(--border);white-space:nowrap}
.manage-table thead th[data-sort]{cursor:pointer;user-select:none}
.manage-table thead th[data-sort]:hover{color:var(--text-primary)}
.manage-table thead th[data-sort]::after{content:"\2195";margin-left:5px;opacity:.35;font-size:.8em}
.manage-table thead th[data-sort].sorted::after{content:"\2191";opacity:1;color:var(--primary)}
.manage-table thead th[data-sort].sorted.sorted-desc::after{content:"\2193"}
.manage-table tbody td{padding:10px 12px;border-bottom:1px solid var(--border);vertical-align:middle;color:var(--text-primary)}
.manage-table tbody tr:last-child td{border-bottom:none}
.manage-table tbody tr:hover{background:var(--background)}
.manage-table-title{display:flex;align-items:center;gap:8px;min-width:180px}
.manage-table-actions{display:flex;gap:6px;white-space:nowrap}
.manage-table-actions button{border:1px solid var(--border);background:var(--background);border-radius:var(--radius-sm);padding:6px;display:inline-flex;cursor:pointer;color:var(--text-secondary)}
.manage-table-actions button:hover{color:var(--primary);border-color:var(--primary)}
.manage-table-actions button i{width:14px;height:14px}
.manage-status-pill{display:inline-flex;align-items:center;padding:3px 9px;border-radius:999px;font-size:.72rem;font-weight:700}
.manage-status-pill.public{background:#E6F7F3;color:#0F9D78}
.manage-status-pill.private{background:#FDE8EC;color:#D6336C}
.manage-pagination{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:12px}
.manage-pagination button{padding:6px 9px;display:inline-flex}
.manage-pagination button:disabled{opacity:.4;cursor:not-allowed}
.manage-pagination-label{font-size:.78rem;color:var(--text-secondary)}
@media (max-width:700px){.manage-table{min-width:680px}}
.manage-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.manage-list{display:flex;flex-direction:column;gap:8px;margin-top:10px;max-height:420px;overflow-y:auto}
.manage-item{
  display:flex;justify-content:space-between;align-items:center;gap:10px;border:1px solid var(--border);
  border-radius:var(--radius-sm);padding:10px 12px;background:var(--surface);
}
.manage-item-main{display:flex;align-items:center;gap:10px;min-width:0;flex:1}
.manage-item-main>div{min-width:0}
.manage-item .manage-item-title{font-weight:700;font-size:.85rem;color:var(--text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.manage-item .manage-item-sub{font-size:.76rem;color:var(--text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Badge de type de fichier (Gerer le contenu > Ressources) : memes couleurs
   que .feed-file-card/.feed-side-icon (fil de discussion) pour rester
   coherent avec le reste de l'application -- calcule a partir du vrai nom de
   fichier (file_name), jamais d'une donnee fictive. */
.file-type-badge{flex:none;width:36px;height:28px;border-radius:7px;display:inline-flex;align-items:center;justify-content:center;font-size:.62rem;font-weight:800;letter-spacing:.02em}
.file-type-badge.pdf{background:#FEECEC;color:#D93636}
.file-type-badge.doc{background:#EAF3FF;color:#1263C8}
.file-type-badge.sheet{background:#EAF7EF;color:#16804B}
.file-type-badge.slide{background:#FFF3E5;color:#C56B13}
.file-type-badge.archive{background:#F1ECFA;color:#6941A5}
.file-type-badge.text{background:#F1F5F8;color:#617083}
.file-type-badge.generic{background:#EAF3FF;color:#1263C8}
.manage-item .edit-btn{border:0;background:var(--info-bg);color:var(--primary);border-radius:var(--radius-sm);padding:7px 9px;cursor:pointer;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center}
.manage-item .edit-btn:hover{filter:brightness(.96)}
.manage-item .delete-btn{border:0;background:var(--error-bg);color:var(--error-text);border-radius:var(--radius-sm);padding:7px 9px;cursor:pointer;flex-shrink:0}
.manage-item .delete-btn:hover{filter:brightness(.96)}
.manage-item .restore-btn{border:0;background:#E8F5EF;color:#0F6B4A;border-radius:var(--radius-sm);padding:7px 9px;cursor:pointer;flex-shrink:0}
.manage-item .restore-btn:hover{filter:brightness(.96)}
.manage-item .delete-forever-btn{border:0;background:var(--error-bg);color:var(--error-text);border-radius:var(--radius-sm);padding:7px 9px;cursor:pointer;flex-shrink:0}
.manage-item .delete-forever-btn:hover{filter:brightness(.96)}
.manage-item .manage-item-badge{flex:none;font-size:.68rem;font-weight:700;padding:3px 8px;border-radius:var(--radius-full);background:#FEF3C7;color:#92400E;margin-left:6px}
.manage-empty{color:var(--text-secondary);font-size:.85rem}
.manage-tools-row{display:flex;justify-content:flex-end;margin-bottom:14px}
@media (max-width:1000px){.manage-grid{grid-template-columns:1fr}.publish-visibility-row{flex-direction:column;align-items:stretch}.publish-visibility-row label{min-width:0}}

/* Secteur 2 (maquette détaillée "Gérer le contenu") : mise en page en deux
   colonnes (contenu principal + barre latérale), onglets de catégorie
   cliquables, tableau enrichi (cases à cocher, actions groupées, bascule
   liste/grille) et pagination numérotée. Tout reste branché sur les vraies
   données déjà chargées ; aucune valeur ni action n'est inventée ici. */
.manage-layout{display:grid;grid-template-columns:1fr 300px;gap:20px;align-items:start}
.manage-main{min-width:0}
.manage-sidebar{display:flex;flex-direction:column;gap:16px;position:sticky;top:12px}
@media (max-width:1400px){.manage-layout{grid-template-columns:1fr}.manage-sidebar{position:static}}

.manage-category-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:16px}
.manage-cat-tab{display:flex;align-items:center;gap:10px;padding:12px;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface);cursor:pointer;text-align:left;font:inherit;color:var(--text-primary);transition:border-color .15s,box-shadow .15s,background-color .15s;min-width:0}
.manage-cat-tab:hover{border-color:var(--primary)}
.manage-cat-tab[data-category="resources"]{background:#EEF5FF;border-color:#D6E7FF}
.manage-cat-tab[data-category="announcements"]{background:#FDF0F3;border-color:#FAD9E1}
.manage-cat-tab[data-category="events"]{background:#FFF8ED;border-color:#FBE7C6}
.manage-cat-tab[data-category="opportunities"]{background:#F6F0FE;border-color:#E5D8FB}
.manage-cat-tab.active{border-color:#0F9D78;box-shadow:0 0 0 1px #0F9D78 inset;background:#E6F7F1}
.manage-cat-tab .manage-cat-icon{flex:none;width:36px;height:36px;border-radius:var(--radius-sm);display:inline-flex;align-items:center;justify-content:center}
.manage-cat-tab .manage-cat-icon i{width:18px;height:18px}
.manage-cat-tab .manage-cat-icon.c1{background:#E6F0FE;color:#2563EB}
.manage-cat-tab .manage-cat-icon.c2{background:#FDE8EC;color:#D6336C}
.manage-cat-tab .manage-cat-icon.c3{background:#FFF4E0;color:#B45309}
.manage-cat-tab .manage-cat-icon.c5{background:#F0E8FE;color:#7C3AED}
.manage-cat-tab .manage-cat-info{display:flex;flex-direction:column-reverse;gap:2px;min-width:0}
.manage-cat-tab .manage-cat-info strong{font-size:1.1rem;font-weight:800;color:var(--text-primary)}
.manage-cat-tab .manage-cat-info span{font-size:.76rem;color:var(--text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.manage-cat-tab .manage-cat-info small{font-size:.68rem;color:var(--text-tertiary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:820px){.manage-category-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.manage-category-tabs{grid-template-columns:minmax(0,1fr)}}

.manage-category-section{margin:14px 0}
.manage-category-section h3{margin:0 0 6px}

.manage-table-header{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.manage-table-header h3{margin:0;display:flex;align-items:center;gap:8px}
.manage-table-tools{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.manage-sort-select{display:flex;align-items:center;gap:6px;font-size:.78rem;font-weight:700;color:var(--text-secondary)}
.manage-sort-select select{font:inherit;padding:6px 8px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);color:var(--text-primary)}
.manage-view-toggle{display:inline-flex;border:1px solid var(--border);border-radius:var(--radius-sm);overflow:hidden}
.manage-view-btn{border:0;background:var(--surface);color:var(--text-secondary);padding:7px 9px;cursor:pointer;display:inline-flex}
.manage-view-btn i{width:15px;height:15px}
.manage-view-btn.active{background:var(--primary);color:#fff}

.manage-table-checkbox-col{width:34px}
.manage-table tbody td:first-child{width:34px}

.manage-grid-view{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:10px}
.manage-grid-view[hidden]{display:none}
@media (max-width:900px){.manage-grid-view{grid-template-columns:1fr}}

.manage-bulk-row{display:flex;align-items:center;gap:10px;margin-top:12px;padding:10px 12px;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--background);flex-wrap:wrap}
.manage-bulk-row select{font:inherit;padding:7px 10px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);color:var(--text-primary)}
.manage-bulk-count{font-size:.78rem;font-weight:700;color:var(--text-secondary)}

.manage-status-pill.published{background:#E6F7F3;color:#0F9D78}
.manage-status-pill.draft{background:#FEF6E0;color:#92610A}

.manage-side-card h3{display:flex;align-items:center;gap:8px;margin:0 0 12px;font-size:.92rem}
.manage-side-card h3 i{width:16px;height:16px;color:var(--primary)}
.manage-side-stats{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.manage-side-stats li{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:.82rem;color:var(--text-secondary)}
.manage-side-stats li span{display:flex;align-items:center;gap:8px}
.manage-side-stats li i{width:14px;height:14px;color:var(--text-tertiary)}
.manage-side-stats li strong{color:var(--text-primary);font-weight:800}
.manage-quick-actions{display:flex;flex-direction:column;gap:8px}
.manage-quick-actions button{justify-content:flex-start}
.manage-side-tips{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:8px;font-size:.8rem;color:var(--text-secondary)}

.hint{color:var(--text-secondary);font-size:.85rem;margin-bottom:14px}
.role-item{
  display:flex;justify-content:space-between;align-items:center;gap:10px;border:1px solid var(--border);
  border-radius:var(--radius-sm);padding:10px 12px;background:var(--surface);
}
.role-item .role-name{font-weight:700;font-size:.85rem;color:var(--text-primary)}
.role-item .role-email{font-size:.76rem;color:var(--text-secondary)}
.role-item select{border:1px solid var(--border);border-radius:var(--radius-sm);padding:7px 8px;font:inherit;font-size:.82rem;background:var(--surface)}
.role-item .role-avatar{
  flex:0 0 34px;width:34px;height:34px;border-radius:var(--radius-full);overflow:hidden;
  background:var(--primary-light);color:var(--primary-dark);
  display:flex;align-items:center;justify-content:center;font-size:.74rem;font-weight:700;
}
.role-avatar-img{ width:100%; height:100%; object-fit:cover; border-radius:var(--radius-full); }

/* ===================== FORMULAIRES (génériques) ===================== */
.forms{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.forms form{display:grid;gap:10px}
.forms input,.forms textarea,.forms select,
.admin-card input,.admin-card select,.admin-card textarea{
  padding:11px 13px;border:1px solid var(--border);border-radius:var(--radius-sm);
  font:inherit;font-size:.88rem;background:var(--surface);color:var(--text-primary);
  transition:border-color var(--t-fast),box-shadow var(--t-fast);
  width:100%;min-width:0;max-width:100%;
}
.forms input:focus,.forms textarea:focus,.forms select:focus,
.admin-card input:focus,.admin-card select:focus,.admin-card textarea:focus{
  border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-light);outline:none;
}
@media (max-width:760px){.forms{grid-template-columns:1fr}}

/* ===================== DISCUSSIONS / CHAT ===================== */
/* ===================================================================
   PHASE DISCUSSIONS — refonte visuelle de #view-discussions.
   2 colonnes des 1024px (conversation + panneau d'infos) ; en dessous,
   le panneau devient un panneau coulissant ouvert par #discussionInfoBtn.
   =================================================================== */
.discussion-layout{ display:block; }
.discussion-main{ min-width:0; }

.discussion-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.discussion-info-btn{
  display:none; align-items:center; justify-content:center; flex-shrink:0;
  width:40px; height:40px; border-radius:50%; border:1px solid var(--border);
  background:var(--surface); color:var(--primary); cursor:pointer; transition:background var(--t-fast);
}
.discussion-info-btn:hover{ background:var(--primary-light); }
.discussion-info-btn i{ width:19px; height:19px; }

/* Panneau d'informations : statique en 2e colonne sur desktop (regle plus
   bas, media min-width:1024px), panneau coulissant en dessous. */
.discussion-info{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-xs); overflow-y:auto;
}
.discussion-info-head{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:16px 18px; border-bottom:1px solid var(--border);
}
.discussion-info-head h3{ margin:0; font-size:1rem; color:var(--text-primary); }
.discussion-info-close{
  display:none; align-items:center; justify-content:center; width:44px; height:44px;
  border-radius:50%; border:0; background:var(--background); color:var(--text-secondary); cursor:pointer;
}
.discussion-info-close i{ width:16px; height:16px; }
.discussion-info-body{ display:flex; flex-direction:column; align-items:center; gap:6px; padding:22px 18px 26px; text-align:center; }
.discussion-info-avatar{
  width:72px; height:72px; border-radius:50%; background:var(--primary-light); color:var(--primary);
  display:flex; align-items:center; justify-content:center; margin-bottom:6px;
}
.discussion-info-avatar i{ width:32px; height:32px; }
.discussion-info-name{ margin:0; font-weight:700; color:var(--text-primary); font-size:.98rem; }
.discussion-info-count{ margin:0 0 14px; font-size:.82rem; color:var(--text-secondary); }
.discussion-info-link{
  display:flex; align-items:center; gap:10px; width:100%; padding:12px 14px; border-radius:var(--radius-md);
  border:1px solid var(--border); background:var(--surface); color:var(--text-primary); font:inherit;
  font-size:.86rem; font-weight:600; cursor:pointer; text-align:left; transition:background var(--t-fast);
}
.discussion-info-link:hover{ background:var(--primary-light); border-color:var(--primary-line); }
.discussion-info-link i{ width:18px; height:18px; color:var(--primary); flex-shrink:0; }
.discussion-info-section{ width:100%; margin-top:16px; padding-top:16px; border-top:1px solid var(--border); text-align:left; }
.discussion-info-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:.88rem; color:var(--text-primary); font-weight:600; }
.discussion-info-row i{ width:16px; height:16px; color:var(--text-secondary); vertical-align:-3px; margin-right:6px; }
.discussion-info-section .hint{ margin:6px 0 0; }
.discussion-info-label{ margin:0 0 10px; font-size:.8rem; font-weight:700; color:var(--text-secondary); }
.discussion-info-media-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.discussion-info-media-thumb{
  display:block; width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:var(--radius-sm);
  border:1px solid var(--border); cursor:pointer; background:var(--background);
}
.discussion-info-media-file{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  aspect-ratio:1/1; border-radius:var(--radius-sm); border:1px solid var(--border); background:var(--background);
  color:var(--text-secondary); text-decoration:none; font-size:.65rem; text-align:center; padding:4px; overflow:hidden;
}
.discussion-info-media-file i{ width:18px; height:18px; color:var(--primary); }

.discussion-info-backdrop{ display:none; }

@media (min-width:1024px){
  .discussion-layout{ display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:20px; align-items:start; }
  .discussion-info{ position:static; max-height:none; }
}

/* Sous 1024px : le panneau devient un panneau coulissant (tablette et mobile),
   jamais affiche cote a cote — section 1 du prompt. */
@media (max-width:1023px){
  .discussion-info-btn{ display:flex; }
  .discussion-info-close{ display:flex; }
  .discussion-info{
    position:fixed; top:0; right:0; height:100%; width:min(360px,88vw); max-width:100vw;
    border-radius:0; z-index:70; transform:translateX(100%); transition:transform var(--t-med);
    box-shadow:var(--shadow-lg);
  }
  .discussion-info.open{ transform:translateX(0); }
  .discussion-info-backdrop{
    display:block; position:fixed; inset:0; z-index:69; background:rgba(31,45,61,.45); opacity:0; pointer-events:none;
    transition:opacity var(--t-med);
  }
  .discussion-info-backdrop.open{ opacity:1; pointer-events:auto; }
}

@media (max-width:767px){
  .discussion-info{ width:100%; }
}

.chat-box{
  display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-lg);overflow:hidden;max-width:760px;margin:0 auto;box-shadow:var(--shadow-xs);
}
.chat-messages{display:flex;flex-direction:column;gap:14px;padding:20px;height:480px;overflow-y:auto;background:var(--background)}
.chat-message{display:flex;gap:10px;max-width:80%}
.chat-message.mine{align-self:flex-end;flex-direction:row-reverse}
.chat-avatar{
  width:32px;height:32px;border-radius:50%;background:var(--primary);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:700;flex-shrink:0;
}
.chat-message.mine .chat-avatar{background:var(--text-primary)}
.chat-bubble{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);padding:10px 14px}
.chat-message.mine .chat-bubble{background:var(--primary);color:#fff;border-color:var(--primary)}
.chat-name{font-size:.73rem;font-weight:700;color:var(--accent);margin-bottom:3px}
.chat-message.mine .chat-name{color:rgba(255,255,255,.85)}
.chat-text{font-size:.89rem;line-height:1.45;white-space:pre-wrap;word-break:break-word}
.chat-time{display:block;font-size:.67rem;color:var(--text-tertiary);margin-top:4px}
.chat-message.mine .chat-time{color:rgba(255,255,255,.7)}
.chat-image{display:block;max-width:220px;border-radius:var(--radius-sm);margin-top:6px}
.chat-file-link{display:inline-flex;align-items:center;gap:6px;margin-top:6px;font-size:.8rem;font-weight:700;color:inherit;text-decoration:none;opacity:.9}
.chat-file-link:hover{text-decoration:underline}
.chat-empty{color:var(--text-secondary);font-size:.85rem;text-align:center;margin:auto}

.chat-input-row{display:flex;align-items:flex-end;gap:8px;padding:12px;border-top:1px solid var(--border);background:var(--surface)}
.chat-attach{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:var(--accent-light);color:var(--accent);cursor:pointer;flex-shrink:0;transition:background var(--t-fast)}
.chat-attach:hover{background:var(--accent-line)}
.chat-attach i{width:17px;height:17px}
/* Panneau des actions secondaires (sondage / vocal / sticker), masqué par
   défaut et ouvert par le bouton « + » : la ligne de saisie principale ne
   garde que 2 icônes (+ et pièce jointe), ce qui rend au champ de texte la
   largeur qu'il a sur WhatsApp au lieu d'être écrasé par 4 icônes fixes. */
.chat-extra-actions{display:flex;flex-wrap:wrap;gap:14px;padding:10px 14px;border-top:1px solid var(--border);background:var(--surface)}
.chat-extra-actions[hidden]{display:none}
.chat-extra-actions .chat-attach{width:auto;height:auto;flex-direction:column;gap:4px;border-radius:var(--radius-sm);padding:8px 10px;background:none}
.chat-extra-actions .chat-attach:hover{background:var(--accent-light)}
.chat-extra-actions .chat-attach i{width:20px;height:20px}
.chat-extra-actions .chat-attach span{font-size:.7rem;color:var(--text-secondary);font-weight:600}
#chatMoreBtn{transition:transform var(--t-fast)}
#chatMoreBtn[aria-expanded="true"]{transform:rotate(45deg);background:var(--accent-line)}
.chat-input-row textarea{flex:1;min-width:0;min-height:48px;resize:none;border:1px solid var(--border);border-radius:24px;padding:12px 16px;font:inherit;font-size:.92rem;line-height:1.35;max-height:150px;overflow-y:auto;transition:border-color var(--t-fast),box-shadow var(--t-fast)}
.chat-input-row textarea:focus{border-color:var(--primary);outline:none}
.chat-send{width:38px;height:38px;border-radius:50%;border:0;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0}
.chat-send:hover{background:var(--primary-dark);filter:none}
.chat-send i{width:17px;height:17px}
.chat-file-preview{display:flex;align-items:center;gap:8px;padding:8px 16px;background:var(--accent-light);border-top:1px solid var(--border);font-size:.82rem;color:var(--text-primary)}
.chat-file-preview button{border:0;background:none;color:var(--error-text);font-weight:700;cursor:pointer;font:inherit}
.chat-voice-preview{display:flex;align-items:center;gap:8px;padding:8px 16px;background:var(--accent-light);border-top:1px solid var(--border);font-size:.82rem;color:var(--text-primary);flex-wrap:wrap}
.chat-voice-preview button{border:0;background:none;color:var(--error-text);font-weight:700;cursor:pointer;font:inherit}
.chat-voice-preview audio{height:32px;max-width:220px}
.chat-attach.recording{background:#fde8e8;color:#c0392b;animation:voicePulse 1.1s ease-in-out infinite}
@keyframes voicePulse{0%,100%{box-shadow:0 0 0 0 rgba(192,57,43,.35)}50%{box-shadow:0 0 0 6px rgba(192,57,43,.12)}}
.chat-voice-msg{display:flex;align-items:center;gap:8px;min-width:220px;max-width:260px;padding:4px 2px}
.chat-audio-hidden{display:none}
.voice-play-btn{flex-shrink:0;width:36px;height:36px;border-radius:50%;border:0;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.voice-play-btn:hover{background:var(--accent-dark)}
.voice-play-btn i{width:17px;height:17px}
.voice-play-btn i[data-lucide="play"]{margin-left:1px}
.voice-waveform-bars{flex:1;display:flex;align-items:center;gap:2px;height:24px;min-width:0}
.voice-waveform-bars span{flex:1;min-width:2px;max-width:3px;border-radius:2px;background:var(--border);height:30%;transition:background-color .15s ease}
.voice-waveform-bars span.played{background:var(--accent)}
.voice-time{flex-shrink:0;font-size:.72rem;font-variant-numeric:tabular-nums;color:var(--text-secondary);min-width:32px;text-align:right}
.chat-voice-duration{font-size:.75rem;color:var(--text-secondary)}
.chat-voice-recording{display:flex;align-items:center;gap:10px;padding:8px 14px;margin:0 0 8px;background:#1c1f22;border-radius:999px;color:#fff}
.chat-voice-recording[hidden]{display:none}
.voice-trash-btn,.voice-pause-btn,.voice-send-btn{border:0;background:none;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:4px;border-radius:50%}
.voice-trash-btn{color:#f18b8b}
.voice-trash-btn:hover{background:rgba(241,139,139,.15)}
.voice-pause-btn:hover{background:rgba(255,255,255,.12)}
.voice-send-btn{background:var(--accent);width:32px;height:32px;margin-left:auto;flex-shrink:0}
.voice-send-btn:hover{background:var(--accent-dark)}
.voice-rec-dot{width:9px;height:9px;border-radius:50%;background:#e0433f;flex-shrink:0;animation:voiceRecDotBlink 1s ease-in-out infinite}
.voice-rec-dot.paused{animation:none;opacity:.5}
@keyframes voiceRecDotBlink{0%,100%{opacity:1}50%{opacity:.25}}
.voice-rec-time{font-variant-numeric:tabular-nums;font-size:.85rem;min-width:34px}
.voice-waveform{display:flex;align-items:center;gap:3px;flex:1;height:20px;overflow:hidden}
.voice-waveform span{width:3px;border-radius:2px;background:rgba(255,255,255,.65);animation:voiceWave 1s ease-in-out infinite}
.voice-waveform span:nth-child(1){height:40%;animation-delay:0s}
.voice-waveform span:nth-child(2){height:80%;animation-delay:.1s}
.voice-waveform span:nth-child(3){height:55%;animation-delay:.2s}
.voice-waveform span:nth-child(4){height:95%;animation-delay:.3s}
.voice-waveform span:nth-child(5){height:35%;animation-delay:.4s}
.voice-waveform span:nth-child(6){height:70%;animation-delay:.5s}
.voice-waveform span:nth-child(7){height:50%;animation-delay:.6s}
.voice-waveform span:nth-child(8){height:85%;animation-delay:.7s}
@keyframes voiceWave{0%,100%{transform:scaleY(.5)}50%{transform:scaleY(1)}}
.chat-sticker-picker{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;padding:12px;margin:0 0 8px;background:var(--background);border:1px solid var(--border);border-radius:var(--radius-md)}
.chat-sticker-picker[hidden]{display:none}
.chat-sticker-option{border:1px solid var(--border-strong);border-radius:var(--radius-sm);background:var(--surface);font-size:1.6rem;line-height:1;padding:8px 0;cursor:pointer;transition:background var(--t-fast),transform var(--t-fast)}
.chat-sticker-option:hover{background:var(--primary-light);transform:scale(1.08)}
.chat-bubble-sticker{background:transparent;box-shadow:none;padding:2px 0}
.chat-sticker{font-size:2.6rem;line-height:1}
@media (max-width:760px){
  .chat-sticker-picker{grid-template-columns:repeat(5,1fr)}
}
.chat-footer-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 16px 14px;flex-wrap:wrap}

/* ===================================================================
   DISCUSSION — PHASE F : réponse à un message + suppression
   =================================================================== */

/* Citation affichée dans une bulle qui répond à un autre message. */
.chat-quoted{border-left:3px solid var(--accent);background:rgba(0,0,0,.04);
  border-radius:var(--radius-sm);padding:5px 9px;margin-bottom:6px;font-size:.8rem;max-width:100%}
.chat-message.mine .chat-quoted{background:rgba(255,255,255,.16);border-left-color:rgba(255,255,255,.7)}
.chat-quoted-name{font-weight:700;color:var(--accent);font-size:.74rem}
.chat-message.mine .chat-quoted-name{color:rgba(255,255,255,.9)}
.chat-quoted-text{color:var(--text-secondary);white-space:pre-wrap;word-break:break-word;
  overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.chat-message.mine .chat-quoted-text{color:rgba(255,255,255,.85)}
.chat-quoted-missing{font-style:italic;color:var(--text-tertiary);font-size:.78rem}

/* Actions par bulle (répondre / supprimer) : discrètes, visibles au survol
   et toujours visibles sur mobile (pas de hover tactile fiable). */
/* ===================================================================
   SYSTÈME DE RÉACTIONS DE LA DISCUSSION (chirurgical, n'affecte que le
   chat) : bouton de raction par message, popover rapide, badges, et
   modal complet par catégories. Couleurs reprises du thème existant
   (--primary = vert, --accent = bleu), rien de nouveau n'est introduit. */
.chat-react-btn i{width:15px;height:15px}

.chat-react-popover{
  position:fixed;z-index:70;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-md);box-shadow:var(--shadow-lg);padding:10px;
  width:min(268px,calc(100vw - 24px));
  animation:chatReactIn .16s ease-out;
}
.chat-react-popover[hidden]{display:none}
@keyframes chatReactIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.chat-react-popover-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:4px}
.chat-react-option{
  border:1px solid transparent;background:transparent;border-radius:var(--radius-sm);
  font-size:1.35rem;line-height:1;min-width:44px;min-height:44px;display:flex;align-items:center;
  justify-content:center;cursor:pointer;transition:background var(--t-fast),transform var(--t-fast);
}
.chat-react-option:hover{background:var(--primary-light);transform:scale(1.1)}
.chat-react-option.mine{background:var(--accent-light);border-color:var(--accent)}
.chat-react-all-btn{
  width:100%;margin-top:8px;display:flex;align-items:center;justify-content:center;gap:4px;
  border:1px dashed var(--border-strong);background:var(--background);color:var(--text-secondary);
  border-radius:var(--radius-sm);padding:8px;font-size:.82rem;font-weight:700;cursor:pointer;
  transition:background var(--t-fast),color var(--t-fast);min-height:40px;
}
.chat-react-all-btn:hover{background:var(--accent-light);color:var(--accent-dark)}
.chat-react-all-btn i{width:14px;height:14px}

.chat-reactions-modal .confirm-dialog.chat-reactions-dialog{max-width:520px;width:calc(100vw - 32px);text-align:left}
.chat-reactions-categories{max-height:60vh;overflow-y:auto;overflow-x:hidden;padding-right:2px}
.chat-reaction-category{margin-bottom:16px}
.chat-reaction-category:last-child{margin-bottom:0}
.chat-reaction-category h3{font-size:.82rem;text-transform:uppercase;letter-spacing:.04em;color:var(--primary-dark);margin:0 0 8px}
.chat-reaction-category-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(44px,1fr));gap:6px;
}
.chat-reaction-cat-option{
  border:1px solid var(--border);background:var(--surface);border-radius:var(--radius-sm);
  font-size:1.4rem;line-height:1;min-width:44px;min-height:44px;display:flex;align-items:center;
  justify-content:center;cursor:pointer;transition:background var(--t-fast),transform var(--t-fast),border-color var(--t-fast);
}
.chat-reaction-cat-option:hover{background:var(--primary-light);border-color:var(--primary-line);transform:scale(1.08)}
.chat-reaction-cat-option.mine{background:var(--accent-light);border-color:var(--accent)}

.chat-reaction-badges{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}
.chat-reaction-badge{
  display:inline-flex;align-items:center;gap:4px;border:1px solid var(--border-strong);
  background:var(--background);border-radius:999px;padding:3px 9px;font-size:.8rem;font-weight:700;
  color:var(--text-secondary);cursor:pointer;transition:background var(--t-fast),transform var(--t-fast),border-color var(--t-fast);
  min-height:26px;
}
.chat-reaction-badge:hover{transform:scale(1.05)}
.chat-reaction-badge.mine{background:var(--primary-light);border-color:var(--primary);color:var(--primary-dark)}
.chat-message.mine .chat-reaction-badge{background:rgba(255,255,255,.85)}
.chat-reaction-badge-pop{animation:chatReactionPop .22s ease-out}
@keyframes chatReactionPop{0%{transform:scale(.6)}60%{transform:scale(1.12)}100%{transform:scale(1)}}

@media (max-width:480px){
  .chat-react-popover-grid{grid-template-columns:repeat(5,1fr)}
  .chat-reaction-category-grid{grid-template-columns:repeat(auto-fill,minmax(40px,1fr))}
}

.chat-message-actions{display:flex;gap:4px;margin-top:6px;opacity:0;transition:opacity var(--t-fast)}
.chat-message:hover .chat-message-actions{opacity:1}
.chat-action-btn{border:0;background:rgba(0,0,0,.06);color:inherit;width:26px;height:26px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.chat-action-btn i{width:14px;height:14px}
.chat-message.mine .chat-action-btn{background:rgba(255,255,255,.22)}
.chat-action-btn:hover{background:var(--primary);color:#fff}
.chat-delete-btn:hover{background:var(--error-text)}

/* Aperçu de réponse au-dessus du champ de saisie. */
.chat-reply-preview{padding:8px 16px;background:var(--accent-light);border-top:1px solid var(--border)}
.chat-reply-preview-inner{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.chat-reply-preview-body{font-size:.82rem;color:var(--text-primary);min-width:0;overflow:hidden}
.chat-reply-preview-body strong{color:var(--accent);margin-right:6px}
.chat-reply-preview-body span{color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:inline-block;max-width:100%;vertical-align:bottom}
.chat-reply-cancel{border:0;background:none;color:var(--text-tertiary);font-size:16px;line-height:1;cursor:pointer;flex-shrink:0;padding:2px 4px}
.chat-reply-cancel:hover{color:var(--error-text)}

@media (max-width:720px){
  .chat-message-actions{opacity:1}
  .chat-messages{height:60vh}
  .chat-input-row{gap:7px;padding:10px}
  .chat-input-row textarea{min-height:54px;font-size:.95rem;padding:13px 15px}
  .chat-attach{width:38px;height:38px}
  .chat-send{width:42px;height:42px}
  .chat-extra-actions{gap:20px;justify-content:center}
}
.form-hint{color:var(--text-secondary);line-height:1.5;font-size:.82rem}

/* ===================== MODALES ===================== */
.modal{display:none}
.modal.show{
  display:grid;position:fixed;inset:0;place-items:center;
  background:rgba(19,32,42,.5);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  z-index:50;padding:20px;animation:overlay-in var(--t-med);
}
@keyframes overlay-in{from{opacity:0}to{opacity:1}}
@keyframes dialog-in{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}

.dialog{
  width:min(430px,100%);background:var(--surface);padding:28px;border-radius:var(--radius-lg);
  position:relative;box-shadow:var(--shadow-lg);animation:dialog-in var(--t-med);
}
.x{
  position:absolute;right:12px;top:12px;width:32px;height:32px;border:0;background:var(--background);
  color:var(--text-secondary);border-radius:50%;font-size:18px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:background var(--t-fast),color var(--t-fast);
}
.x:hover{background:var(--border);color:var(--text-primary);filter:none;box-shadow:none}

.tabs{display:flex;gap:6px;background:var(--background);padding:4px;border-radius:var(--radius-sm)}
.tab{border:0;padding:9px;background:transparent;border-radius:7px;font:inherit;font-weight:600;font-size:.86rem;color:var(--text-secondary);cursor:pointer;flex:1}
.tab.active{background:var(--surface);color:var(--primary);box-shadow:var(--shadow-xs)}
.dialog h2{font-size:20px;margin:16px 0 14px}
.dialog form{display:grid;gap:10px}
.dialog input{
  padding:12px 14px;border:1px solid var(--border);border-radius:var(--radius-sm);font:inherit;
  background:var(--surface);color:var(--text-primary);transition:border-color var(--t-fast),box-shadow var(--t-fast);
}
.dialog input:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-light);outline:none}
.dialog input::placeholder{color:var(--text-tertiary)}

/* Modale "Importer plusieurs fichiers" : disposition professionnelle en
   grille 2 colonnes (Niveau/Filière puis Matière/Type) au lieu de labels
   empilés sans grille, qui provoquaient un rendu bancal et peu lisible. */
#bulkImportModal .dialog{width:min(560px,100%)}
#bulkImportModal label{display:grid;gap:5px;font-size:.78rem;font-weight:700;color:var(--text-secondary);margin-bottom:10px}
#bulkImportModal select{
  width:100%;height:42px;padding:0 12px;border:1px solid var(--border);border-radius:var(--radius-sm);font:inherit;
  background:var(--surface);color:var(--text-primary);transition:border-color var(--t-fast),box-shadow var(--t-fast);
}
#bulkImportModal select:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-light);outline:none}
.bulk-import-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:4px 14px;margin-bottom:6px}
@media(max-width:520px){.bulk-import-grid{grid-template-columns:1fr}}

.dialog.small{width:min(380px,100%);text-align:center}
.dialog.small h2{margin:6px 0 10px}
.dialog.small p{color:var(--text-secondary);font-size:.92rem;margin-bottom:20px}
.modal-actions{display:flex;gap:10px;justify-content:center}
.modal-actions button{flex:1;padding:11px;border-radius:var(--radius-sm);font-weight:700;font:inherit;border:0;cursor:pointer}

/* ===================== MESSAGES DE STATUT ===================== */
#authInfo,.otp-message{
  margin:14px 0 0;padding:11px 14px;text-align:center;font-size:13.5px;font-weight:600;line-height:1.4;
  border-radius:var(--radius-sm);transition:all var(--t-fast);
  color:var(--info-text);background:var(--info-bg);border:1px solid var(--info-border);
}
#authInfo:empty{display:none;padding:0;margin:0;border:0}
#authInfo.success{color:var(--success-text);background:var(--success-bg);border-color:var(--success-border)}
#authInfo.error{color:var(--error-text);background:var(--error-bg);border-color:var(--error-border)}

.link-btn{
  border:0;background:none;padding:0;margin-left:2px;font:inherit;font-weight:700;font-size:inherit;
  color:var(--primary);text-decoration:underline;cursor:pointer;box-shadow:none;
}
.link-btn:hover{color:var(--primary-dark);filter:none;box-shadow:none}

/* ===================== VÉRIFICATION PAR CODE (OTP) ===================== */
#otpContainer{padding:4px 0 0;position:relative;text-align:center}

.otp-close{
  position:absolute;right:-6px;top:-6px;width:32px;height:32px;border:0;background:var(--background);
  color:var(--text-secondary);border-radius:50%;font-size:17px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:background var(--t-fast),color var(--t-fast);
}
.otp-close:hover{background:var(--border);color:var(--text-primary);filter:none;box-shadow:none}

.otp-success-icon{
  width:48px;height:48px;margin:0 auto 14px;border-radius:50%;background:var(--success-bg);
  color:var(--primary);display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:800;
}

#otpContainer h2{
  font-size:22px;line-height:1.2;margin:0 0 12px;font-weight:800;
  display:flex;align-items:center;justify-content:center;gap:8px;
}
.title-check{
  display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;
  border-radius:6px;background:var(--success-bg);color:var(--primary);font-size:13px;
}

.otp-subtitle{color:var(--text-secondary);font-size:14px;text-align:center;margin:0 0 12px;line-height:1.5}

.otp-email{
  display:inline-flex;align-items:center;gap:8px;background:var(--primary-light);color:var(--primary-dark);
  padding:8px 14px;border-radius:var(--radius-sm);font-size:13.5px;font-weight:700;margin-bottom:6px;
}
.otp-email span{font-size:14px}

#otpForm{display:grid;gap:14px;margin-top:12px}

.otp-boxes{
  display:flex;justify-content:center;gap:6px;background:var(--background);border:1px solid var(--border);
  border-radius:var(--radius-md);padding:14px 8px;
}
.otp-digit{
  width:38px;height:52px;border:1px solid var(--border-strong);border-radius:var(--radius-sm);
  background:var(--surface);color:var(--text-primary);
  box-sizing:border-box;padding:0;margin:0;
  text-align:center;text-indent:0;
  line-height:50px;font-size:21px;font-weight:700;font-family:inherit;font-variant-numeric:tabular-nums;letter-spacing:normal;
  -webkit-appearance:none;appearance:none;overflow:visible;
  outline:none;transition:border-color var(--t-fast),box-shadow var(--t-fast),transform var(--t-fast);
}
.otp-digit:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-light);transform:translateY(-1px)}
.otp-boxes.error .otp-digit{border-color:var(--error-border);background:var(--error-bg)}
.otp-boxes.success .otp-digit{border-color:var(--success-border);background:var(--success-bg)}

.otp-submit{
  height:48px;font-size:15px;border-radius:var(--radius-sm);background:var(--primary);color:#fff;
  display:flex;align-items:center;justify-content:center;gap:8px;font-weight:700;border:0;cursor:pointer;
}
.otp-submit:hover{background:var(--primary-dark);filter:none}

.resend-wrap{margin-top:2px}
#resendOtpBtn{width:100%;justify-content:center;padding:11px 18px;font-size:13.5px;border-radius:var(--radius-sm);display:flex;align-items:center;gap:7px}

.otp-help{color:var(--text-tertiary);font-size:12px;margin:6px 0 0;display:flex;align-items:center;justify-content:center;gap:6px}

/* ===================== TOAST (icône + titre + message + fermeture) ===================== */
.toast{
  position:fixed;left:50%;bottom:24px;transform:translate(-50%,16px);
  display:flex;align-items:flex-start;gap:12px;min-width:280px;max-width:380px;
  background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow-lg);
  border-radius:var(--radius-md);padding:14px 14px 14px 16px;
  opacity:0;transition:opacity var(--t-med),transform var(--t-med);z-index:100;text-align:left;
}
.toast.show{opacity:1;transform:translate(-50%,0)}

.toast-icon{
  width:30px;height:30px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:14px;background:var(--info-bg);color:var(--info-text);margin-top:1px;
}
.toast.success .toast-icon{background:var(--success-bg);color:var(--success-text)}
.toast.error .toast-icon{background:var(--error-bg);color:var(--error-text)}
.toast.info .toast-icon{background:var(--accent-light);color:var(--accent-dark)}

.toast-content{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.toast-content strong{font-size:13.5px;font-weight:700;color:var(--text-primary)}
.toast-content span{font-size:12.5px;color:var(--text-secondary);line-height:1.45}

.toast-close{
  border:0;background:none;color:var(--text-tertiary);font-size:16px;line-height:1;cursor:pointer;
  flex:none;border-radius:50%;width:24px;height:24px;display:flex;align-items:center;justify-content:center;
  transition:background var(--t-fast),color var(--t-fast);
}
.toast-close:hover{background:var(--background);color:var(--text-primary);filter:none;box-shadow:none}

@media (max-width:480px){
  .toast{left:12px;right:12px;transform:translateY(16px);max-width:none;min-width:0}
  .toast.show{transform:translateY(0)}
}

/* ===================== MODALE DE CONFIRMATION UNIVERSELLE ===================== */
.confirm-modal[hidden]{display:none}
.confirm-modal:not([hidden]){
  position:fixed;inset:0;z-index:55;display:grid;place-items:center;padding:20px;
  animation:overlay-in var(--t-med);
}
.confirm-backdrop{position:absolute;inset:0;background:rgba(19,32,42,.5);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.confirm-dialog{
  position:relative;width:min(400px,100%);background:var(--surface);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);padding:30px 28px 28px;text-align:center;animation:dialog-in var(--t-med);
}
.confirm-close{
  position:absolute;right:12px;top:12px;width:32px;height:32px;border:0;background:var(--background);
  color:var(--text-secondary);border-radius:50%;font-size:18px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:background var(--t-fast),color var(--t-fast);
}
.confirm-close:hover{background:var(--border);color:var(--text-primary);filter:none;box-shadow:none}

.confirm-icon{
  width:48px;height:48px;margin:0 auto 14px;border-radius:50%;background:var(--error-bg);color:var(--error-text);
  display:flex;align-items:center;justify-content:center;
}
.confirm-icon svg{width:22px;height:22px}

.confirm-dialog h2{font-size:19px;margin:0 0 10px}
.confirm-dialog p{color:var(--text-secondary);font-size:.92rem;margin:0 0 22px;line-height:1.5}

.confirm-actions{display:flex;gap:10px}
.confirm-cancel,.confirm-submit{
  flex:1;padding:11px;border-radius:var(--radius-sm);font-weight:700;font:inherit;font-size:14px;
  border:0;cursor:pointer;transition:filter var(--t-fast),background var(--t-fast);
}
.confirm-cancel{background:var(--surface);border:1px solid var(--border-strong);color:var(--text-secondary)}
.confirm-cancel:hover{background:var(--background);filter:none;box-shadow:none}
.confirm-submit{background:var(--primary);color:#fff}
.confirm-submit.danger{background:#C24444}
.confirm-submit:hover{filter:brightness(1.08)}

/* ===================== NAVIGATION PAR VUES ===================== */
.app-view{display:none}
.app-view.active{display:block}
[data-view]{cursor:pointer}
@media (max-width:760px){.app-view.active{min-height:calc(100vh - 80px)}}

/* ===================== FOOTER ===================== */
footer{background:var(--text-primary);color:rgba(255,255,255,.75);padding:22px 0;text-align:center;font-size:12.5px}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media(max-width:1100px){
  .main-nav{gap:2px}
  .quick-layout{grid-template-columns:1fr}
  /* Point 5 : la pile verticale de .quick-grid est désormais définie une seule fois,
     sans condition de largeur (voir plus bas dans la feuille de style) ; l'ancienne
     règle à 3 colonnes ici était de toute façon écrasée par cette règle globale plus
     tardive dans le fichier — supprimée pour éviter le code mort. */
  .ine-card{display:flex;min-height:138px}
  .stats-card{width:72%}
  .category-grid{grid-template-columns:repeat(3,1fr)}
}

/* --- Tablette (761–1100px) : éviter tout débordement horizontal de la barre de navigation --- */
@media(max-width:1100px) and (min-width:761px){
  .nav-wrap{gap:10px}
  .brand{min-width:0;flex-shrink:1}
  .brand small{max-width:150px}
  .main-nav{gap:0}
  .main-nav a{min-width:0;padding:9px 7px;font-size:11px;gap:3px}
  .main-nav .nav-icon,.main-nav a.active .nav-icon{width:17px;height:17px}
}

@media(max-width:760px){
  .ine-card{min-height:190px;border-radius:18px;display:block}
  .ine-card>div{width:100%;padding:18px 18px 14px;min-height:116px;box-sizing:border-box}
  .ine-card img{width:100%;height:150px;min-height:150px;object-fit:cover;object-position:center 42%}
}

@media(max-width:760px){
  .container{width:min(100% - 24px,680px)}
  .top-line{height:4px}

  /* --- En-tête mobile : marque + compte, puis navigation horizontale lisible --- */
  .nav-wrap{height:auto;min-height:60px;padding:0;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0}
  .brand{min-width:0;flex:1 1 auto;gap:0;padding:0;overflow:hidden;height:60px;display:flex;align-items:center}
  .brand>span{min-width:0;display:block;overflow:hidden}
  .brand strong{font-size:clamp(16px,5vw,19px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
  .brand small,.brand b{display:none}

  .account-menu{flex:0 0 auto;height:60px;display:flex;align-items:center}
  .login-btn{padding:10px 12px;min-width:44px;min-height:44px;justify-content:center;flex-shrink:0}
  /* Point 1 (bouton compte) : sur mobile, seul l'avatar rond reste visible sur
     le bouton fermé (photo ou initiales) — ni le texte "Prénom N.", ni la
     flèche. Le nom complet reste disponible dans l'en-tête du menu déroulé. */
  .login-btn .login-btn-label{display:none}
  .login-btn .chevron{display:none}
  .login-btn svg{width:19px;height:19px}
  .login-btn .account-avatar{width:32px;height:32px;font-size:.8rem;margin-right:0}

  /* --- Navigation mobile : une seule ligne, icônes uniquement, 6 rubriques réparties --- */
  body{padding-bottom:0}
  .main-nav{
    order:3;flex:0 0 100%;width:100%;display:flex;align-items:stretch;gap:0;
    overflow-x:hidden;overflow-y:hidden;
    background:var(--surface);border-top:1px solid var(--border);border-bottom:1px solid var(--border);
    box-shadow:none;padding:0;
  }
  .main-nav::-webkit-scrollbar{display:none}
  .main-nav a{
    flex:1 1 0;min-width:0;padding:10px 2px;font-size:11px;gap:0;border-radius:0;
    min-height:58px;display:flex;align-items:center;justify-content:center;position:relative;
    white-space:nowrap;transition:background var(--t-fast),color var(--t-fast);
  }
  .main-nav a span{display:none}
  .main-nav .nav-icon{width:22px;height:22px}
  .main-nav a.active{background:var(--accent-light)}
  .main-nav a.active .nav-icon{width:23px;height:23px;color:var(--accent)}
  .main-nav a:active{background:var(--background)}

  /* --- Toast discret : nom de la rubrique au clic (sensation d'application) --- */
  .nav-toast{
    position:fixed;left:50%;bottom:72px;transform:translate(-50%,8px);z-index:31;
    background:var(--text-primary);color:#fff;font-size:12.5px;font-weight:700;
    padding:8px 16px;border-radius:var(--radius-full);opacity:0;pointer-events:none;
    transition:opacity .18s ease,transform .18s ease;white-space:nowrap;box-shadow:var(--shadow-xs);
  }
  .nav-toast.show{opacity:1;transform:translate(-50%,0)}

  /* --- Accueil mobile : vraie composition verticale →�� photo en haut, texte en dessous ---
     Le texte ne repose jamais sur la photo : aucun risque de superposition sur les visages. --- */
  .hero{height:auto;min-height:auto;display:flex;flex-direction:column;padding-bottom:10px;overflow:visible}
  .hero-bg{
    position:static;width:100%;height:46vw;min-height:190px;max-height:280px;
    border-radius:0 0 22px 22px;background-position:center 18%;order:1;
  }
  .hero-overlay{display:none}
  .hero-content{position:static;height:auto;padding-top:18px;padding-bottom:0;display:flex;flex-direction:column;gap:16px;order:2}
  .hero-copy{width:100%;max-width:none}

  /* --- Logos : UAC à gauche, INE à droite, jamais groupés au centre --- */
  .partner-logos{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:2px;width:100%}
  .partner-logos figure{width:62px;height:54px}
  .partner-logos img{max-width:60px;max-height:54px}

  .hero h2{font-size:14.5px}
  .hero h1{font-size:clamp(28px,9vw,36px);line-height:1.08}
  .hero-description{font-size:13.5px}
  .hero-intro{font-size:14.5px;max-width:none}
  .discover-btn{width:100%;justify-content:center;padding:14px 18px}

  .stats-card{position:static;left:auto;right:auto;bottom:auto;width:100%;margin-top:14px;
    grid-template-columns:1fr 1fr;border-radius:var(--radius-md)}
  .stats-card>div{min-width:0!important;padding:12px 10px;gap:8px;border-right:1px solid var(--border);border-bottom:1px solid var(--border)}
  .stats-card>div:nth-child(2){border-right:0}
  .stats-card>div:nth-child(3),.stats-card>div:nth-child(4){border-bottom:0}
  .stat-icon{width:32px;height:32px}
  .stats-card p{font-size:10px}
  .stats-card strong{font-size:12.5px;white-space:normal}

  /* --- Accès rapides : textes et icônes plus grands, meilleure lisibilité --- */
  .quick-section,.categories-section{padding:24px 0}
  .section-mini-title,.section-head h2{font-size:18px;margin-bottom:14px}
  .quick-layout{grid-template-columns:1fr;gap:16px}
  /* Point 5 : ancienne grille 2 colonnes supprimée (écrasée par la pile verticale
     globale plus bas dans le fichier) — code mort retiré. */
  .quick-card{min-height:122px;padding:15px 11px;gap:9px}
  .quick-card strong{font-size:13.5px}
  .quick-card small{font-size:11px;line-height:1.35}
  .quick-card i,.quick-card>svg{width:38px;height:38px;min-width:38px;padding:7px}

  .section-head{align-items:flex-start;gap:8px}
  .section-head p{display:block;max-width:75%;font-size:11px;line-height:1.45}

  .category-grid{grid-template-columns:1fr 1fr;gap:10px}
  .category-card{min-height:88px;padding:13px 12px;gap:9px}
  .category-card strong{font-size:11.5px}
  .category-card small{font-size:10px}
  .category-card i,.category-card>svg{width:30px;height:30px;min-width:30px;padding:6px}

  .section{padding:32px 0}
  .section h2{font-size:23px}

  .resource-tools{flex-direction:column;gap:10px;margin:16px 0}
  .resource-tools input,.resource-tools select{width:100%}
  .data-grid{grid-template-columns:1fr;gap:12px}

  .forms{grid-template-columns:1fr}
  .panel{padding:16px}
  .dialog{width:min(94%,420px);padding:22px}

  /* --- Discussion mobile : ergonomie tactile + clavier, sans toucher à la logique --- */
  .chat-box{margin:0 auto;border-radius:var(--radius-md);max-width:100%}
  .chat-messages{height:calc(100vh - 320px);min-height:280px;padding:14px 12px}
  .chat-message{max-width:92%}
  .chat-input-row{padding:10px;padding-bottom:calc(10px + env(safe-area-inset-bottom,0));position:sticky;bottom:62px;background:var(--surface)}
  .chat-extra-actions{position:sticky;bottom:calc(62px + 74px);background:var(--surface)}
  .chat-attach{width:40px;height:40px}
  .chat-send{width:42px;height:42px}
  .chat-input-row textarea{font-size:16px}
  .chat-action-btn{width:34px;height:34px}
  .chat-quoted,.chat-bubble,.chat-reply-preview-body{max-width:100%;box-sizing:border-box}

  footer{padding:18px 0 24px}
}

@media (max-width:420px){
  .hero h1{font-size:30px}
  .partner-logos figure{width:56px;height:48px}
  .partner-logos img{max-width:54px;max-height:48px}
  .stats-card>div{padding:10px 8px}
  /* Point 5 : .quick-grid retiré ici (déjà en pile verticale via la règle globale) —
     .category-grid conservé car indépendant du chantier des accès rapides. */
  .category-grid{grid-template-columns:1fr}
  .quick-card{min-height:100px}
  .main-nav a{min-height:54px}
  .main-nav .nav-icon{width:20px;height:20px}
  .otp-boxes{gap:5px;padding:12px 6px}
  .otp-digit{width:32px;height:46px;font-size:18px;line-height:44px}
}


/* ===================== ACCUEIL CONNECTÉ — ALIGNEMENT VITRINE ===================== */
/* Point 4 : le bloc de présentation est repositionné en bas de la photo (niveau
   taille/pantalon, jamais sur les visages/torses), centré horizontalement. La
   stats-card reste intégrée dans le même conteneur, juste sous le bouton. */
.app-view .hero .hero-overlay{
  background:linear-gradient(180deg,rgba(6,44,29,0) 0%,rgba(6,44,29,.04) 44%,rgba(6,44,29,.5) 72%,rgba(6,44,29,.84) 100%);
}
.app-view .hero .hero-content{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-end;
  padding-top:0;
  padding-bottom:34px;
  gap:16px;
}
.app-view .hero .hero-copy{
  width:min(560px,92%);
  text-align:center;
  position:relative;
  z-index:3;
  opacity:0;
  transform:translate3d(0,26px,0);
  transition:opacity .8s cubic-bezier(.16,.8,.3,1),transform .9s cubic-bezier(.16,.8,.3,1);
}
.app-view .hero .hero-copy.in-view{opacity:1;transform:translate3d(0,0,0)}
.app-view .hero .partner-logos{
  justify-content:center;
  gap:30px;
}
.app-view .hero h2{color:rgba(255,255,255,.88);text-shadow:0 2px 10px rgba(0,0,0,.3)}
.app-view .hero h1{text-shadow:0 4px 18px rgba(0,0,0,.28)}
.app-view .hero h1 .brand-grme{color:var(--primary-light)}
.app-view .hero h1 .brand-connect{color:var(--accent-light)}
.app-view .hero .hero-description{color:rgba(255,255,255,.86);text-shadow:0 2px 10px rgba(0,0,0,.28)}
.app-view .hero .hero-description strong{color:#fff}
.app-view .hero .hero-intro{
  margin-top:20px;
  font-weight:600;
  color:#fff;
  text-shadow:0 2px 10px rgba(0,0,0,.28);
}
.app-view .hero .discover-btn{
  margin-left:auto;
  margin-right:auto;
}
/* La stats-card n'est plus positionnée en absolu dans un coin : elle devient un
   second élément du même conteneur flex, donc naturellement " intégrée sous le
   bouton ", quelle que soit la hauteur du hero. */
.app-view .hero .stats-card{
  position:relative;
  right:auto;
  bottom:auto;
  width:min(880px,96%);
  margin-top:4px;
  opacity:0;
  transform:translate3d(0,26px,0);
  transition:opacity .8s cubic-bezier(.16,.8,.3,1) .1s,transform .9s cubic-bezier(.16,.8,.3,1) .1s;
}
.app-view .hero .stats-card.in-view{opacity:1;transform:translate3d(0,0,0)}

/* Accès rapides : empilement vertical toujours conservé (voir media query
   ci-dessous). L'apparition en cascade est désormais pilotée par scroll
   (IntersectionObserver ajoute .quick-in-view, voir assets/app.js) : chaque
   carte est masquée par défaut puis apparaît avec un fade + léger décalage
   vertical, une seule fois par visite, quand la section entre dans le viewport. */
/* Correctif : cet empilement vertical doit rester réservé aux écrans <=1100px.
   En portée globale il écrasait le repeat(5,1fr) de .quick-grid sur desktop. */
@media(max-width:1100px){
  .quick-layout{grid-template-columns:1fr}
  .quick-grid{grid-template-columns:1fr;gap:14px}
}
.quick-card{
  width:100%;
  min-height:92px;
  opacity:0;
  transform:translateY(28px);
  transition:opacity .55s cubic-bezier(.16,.8,.3,1),transform .55s cubic-bezier(.16,.8,.3,1),box-shadow .2s ease,border-color .2s ease;
}
.quick-card.quick-in-view{opacity:1;transform:translateY(0)}
.quick-card:nth-child(1){transition-delay:0ms}
.quick-card:nth-child(2){transition-delay:90ms}
.quick-card:nth-child(3){transition-delay:180ms}
.quick-card:nth-child(4){transition-delay:270ms}
.quick-card:nth-child(5){transition-delay:360ms}
.quick-card:nth-child(6){transition-delay:450ms}
@keyframes quickCardEntrance{
  from{opacity:0;transform:translateY(34px)}
  to{opacity:1;transform:translateY(0)}
}

/* Fusée finale : visuel fixe, aucune animation de décollage. */
.public-final-cta .rocket-launch{
  animation:none!important;
  transform:none!important;
}
.public-final-cta.launch .rocket-launch{
  animation:none!important;
  transform:none!important;
}

@media(max-width:760px){
  /* Accueil connecté mobile : même composition que le PC, réellement responsive.
     L'image reste le fond du hero (elle ne disparaît plus), tandis que le contenu
     est recentré dans le hero avec une surcouche lisible. */
  .app-view .hero{
    min-height:520px;
    height:auto;
    display:block;
    position:relative;
    overflow:hidden;
    padding:0;
    background:#eef7f3;
  }
  .app-view .hero .hero-bg{
    position:absolute;
    inset:0;
    width:auto;
    height:auto;
    min-height:0;
    max-height:none;
    border-radius:0;
    background-image:url('hero-students.jpg');
    background-size:cover;
    background-position:center 48%;
    order:initial;
  }
  .app-view .hero .hero-overlay{
    display:block;
    position:absolute;
    inset:0;
    background:linear-gradient(180deg,rgba(6,44,29,0) 0%,rgba(6,44,29,.06) 40%,rgba(6,44,29,.58) 74%,rgba(6,44,29,.88) 100%);
  }
  .app-view .hero .hero-content{
    position:relative;
    z-index:2;
    min-height:520px;
    height:auto;
    padding-top:42px;
    padding-bottom:30px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-end;
    gap:14px;
  }
  .app-view .hero .hero-copy{
    width:min(100%,560px);
    text-align:center;
    margin:0 auto;
  }
  .app-view .hero .partner-logos{
    justify-content:center;
    width:100%;
    gap:22px;
    margin-bottom:12px;
  }
  .app-view .hero .partner-logos figure{width:68px;height:58px}
  .app-view .hero .partner-logos img{max-width:66px;max-height:58px}
  .app-view .hero h2{font-size:15px}
  .app-view .hero h1{font-size:clamp(32px,10vw,44px);line-height:1.04;margin:4px 0 14px}
  .app-view .hero .hero-description{font-size:14px;line-height:1.5}
  .app-view .hero .hero-intro{font-size:16px;line-height:1.45;margin:18px 0 22px}
  .app-view .hero .discover-btn{width:min(100%,360px);margin:0 auto;justify-content:center}
  .app-view .hero .stats-card{position:relative;right:auto;bottom:auto;width:100%;margin-top:2px;transform:translate3d(0,18px,0)}

  .quick-layout{grid-template-columns:1fr}
  .quick-grid{grid-template-columns:1fr;gap:12px}
  .quick-card{min-height:104px}
}

/* ============================= ACCÈS RÉSERVÉ AUX MEMBRES ============================= */
#authGate{display:none;padding:56px 0}
body.locked #authGate{display:block}

/* La section "Comment ça marche" ne s'affiche que sur l'écran public
   (avant connexion), comme #authGate juste au-dessus. */
#howItWorks{display:none}
body.locked #howItWorks{display:block}
body.locked #app,body.locked .app-view,body.locked .main-nav{display:none !important}
.auth-gate-card{max-width:560px;margin:0 auto;text-align:center;padding:36px 28px;background:#fff;border:1px solid rgba(8,124,75,.14);border-radius:18px;box-shadow:0 12px 32px rgba(8,124,75,.08)}
.auth-gate-icon{width:56px;height:56px;margin:0 auto 16px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(8,124,75,.10);color:#087c4b}
.auth-gate-icon i,.auth-gate-icon svg{width:26px;height:26px}
.auth-gate-card h2{margin:0 0 10px;font-size:1.35rem}
.auth-gate-card p{margin:0 0 20px;line-height:1.55;opacity:.8}
.auth-gate-card .primary{width:100%;max-width:320px}
.auth-gate-hint{font-size:.85rem;margin:16px 0 0 !important;opacity:.65}
@media (max-width:520px){#authGate{padding:32px 0}.auth-gate-card{padding:28px 20px}}

/* =====================================================================
   IDENTITÉ BLEU + VERT + BLANC (phase A — v0.24)
   Le vert reste la couleur d'action (boutons, validation) ; le bleu
   devient la couleur de navigation, des liens et des états actifs.
   ===================================================================== */
:root{
  --accent:#1D5FA8;
  --accent-dark:#154A85;
  --accent-light:#EAF2FB;
  --accent-line:#C3DCF5;
}

/* --- En-tête : GRME vert, CONNECT bleu, plus de logo image --- */
.brand img{display:none !important}
.brand strong{letter-spacing:.01em}
.brand-grme{color:var(--primary)}
.brand-connect{color:var(--accent)}
.top-line{background:linear-gradient(90deg,var(--primary) 0%,var(--primary) 42%,var(--accent) 58%,var(--accent) 100%)}

/* --- Navigation : état actif bleu --- */
.main-nav a.active{color:var(--accent)}
.main-nav a.active .nav-icon{color:var(--accent)}
.main-nav a:hover{color:var(--accent-dark)}

/* --- Liens de contenu et boutons secondaires --- */
/* :not(.is-primary) est la correction source du bug "texte bleu sur fond
   vert" : toute action principale (classe is-primary, quel que soit le tag
   HTML - <a> ou <button>) garde son propre texte blanc défini plus bas par
   .ghost-btn.is-primary, au lieu d'hériter du bleu générique des liens. */
.app-view a:not(.brand):not(.is-primary),.link-btn,.ghost-btn:not(.is-primary){color:var(--accent)}
.app-view a:not(.brand):not(.is-primary):hover,.link-btn:hover{color:var(--accent-dark)}

/* --- Badges, puces et étiquettes --- */
.badge,.tag,.chip,.pill,.eyebrow{color:var(--accent-dark)}

/* --- Onglets --- */
/* Point 3 (correctifs ponctuels) : .admin-tab.active a son propre style cohérent
   (fond + texte blanc) défini plus haut ; cette règle ne doit plus toucher sa
   couleur de texte, sinon le libellé blanc est écrasé par du bleu illisible sur
   fond bleu. Seul l'onglet générique .tab (connexion/inscription, fond clair)
   utilise ce style texte bleu. */
.tab.active{color:var(--accent);border-color:var(--accent)}

/* --- Champs de saisie : focus bleu --- */
input:focus,textarea:focus,select:focus{border-color:var(--accent) !important;box-shadow:0 0 0 3px var(--accent-light)}

/* --- Écran d'acc→�s réservé : accent bleu --- */
.auth-gate-icon{background:var(--accent-light);color:var(--accent)}

/* --- Annuaire de la promotion --- */
#directorySearch{width:100%;box-sizing:border-box}
.directory-list{margin-top:14px}
.directory-list .hint{margin:0}

/* --- Mobile : titre lisible, sous-titres masqués --- */
@media (max-width:600px){
  .brand small,.brand b{display:none}
  .brand strong{font-size:1.1rem}
}
@media (max-width:380px){
  .brand strong{font-size:1rem}
}

/* ============================= PHASE B : MOTS DE PASSE ============================= */
.forgot-wrap{margin:12px 0 0;text-align:center}
.forgot-wrap .link-btn{font-size:14px}
.settings-form{display:grid;gap:10px;margin-top:14px;max-width:440px}
.form-info{margin:12px 0 0;max-width:440px;font-size:14px;line-height:1.45;padding:10px 12px;border-radius:var(--radius-sm);background:var(--info-bg);border:1px solid var(--info-border);color:var(--info-text)}
.form-info.ok{background:var(--success-bg);border-color:var(--success-border);color:var(--success-text)}
.form-info.error{background:var(--error-bg);border-color:var(--error-border);color:var(--error-text)}

/* Point 1.a : QR code d'enrôlement A2F (TOTP), carte générée par Supabase. */
.mfa-qr-container{display:flex;justify-content:center;align-items:center;margin:14px 0;padding:12px;background:#fff;border-radius:var(--radius-sm);border:1px solid var(--border-color,#e5e7eb);min-height:80px}
.mfa-qr-container img,.mfa-qr-container svg{width:200px;height:200px;max-width:100%}
#mfaSecretText{word-break:break-all;font-size:.85rem}
#resetContainer h2,#recoveryContainer h2{margin:0 0 6px}
#resetForm,#recoveryForm{display:grid;gap:10px;margin-top:14px}
@media(max-width:560px){
  .settings-form,.form-info{max-width:100%}
}

/* ===== ANNUAIRE DE LA PROMOTION (phase C) ===== */
#directorySearch{
  width:100%;
  padding:12px 14px;
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  font:inherit;
  color:var(--text-primary);
  background:var(--surface);
}
#directorySearch:focus{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-light);
}
#directorySearch:disabled{ background:var(--background); color:var(--text-tertiary); }
.directory-hint{ margin:8px 0 4px; font-size:.82rem; color:var(--text-tertiary); }
.directory-count{
  margin:12px 0 10px;
  font-size:.85rem;
  font-weight:600;
  color:var(--text-secondary);
}
.directory-list{ display:flex; flex-direction:column; gap:8px; }
.directory-item{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  background:var(--surface);
}
.directory-avatar{
  flex:0 0 auto;
  width:38px;
  height:38px;
  border-radius:var(--radius-full);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:.8rem;
  font-weight:700;
  color:var(--accent-dark);
  background:var(--accent-light);
  border:1px solid var(--accent-line);
}
.directory-identity{ display:flex; flex-direction:column; min-width:0; flex:1 1 auto; }
.directory-name{
  font-weight:600;
  color:var(--text-primary);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.directory-meta{ font-size:.78rem; color:var(--text-secondary); }
.directory-badge{
  flex:0 0 auto;
  padding:4px 10px;
  border-radius:var(--radius-full);
  font-size:.72rem;
  font-weight:600;
  color:var(--success-text);
  background:var(--success-bg);
  border:1px solid var(--success-border);
}
@media (max-width:560px){
  .directory-item{ gap:10px; padding:9px 10px; }
  .directory-avatar{ width:32px; height:32px; font-size:.72rem; }
  .directory-name{ font-size:.92rem; }
  .directory-badge{ font-size:.66rem; padding:3px 8px; }
}

/* ===== STRUCTURE ACADÉMIQUE — ADMIN (phase D) ===== */
.structure-toolbar{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  gap:12px;
  margin:14px 0;
}
.structure-toolbar label{
  display:flex;
  flex-direction:column;
  gap:4px;
  font-size:.78rem;
  font-weight:600;
  color:var(--text-secondary);
}
.structure-toolbar select{
  padding:9px 10px;
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  font:inherit;
  background:var(--surface);
  color:var(--text-primary);
  min-width:170px;
}
.structure-form{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  margin:10px 0 14px;
}
.structure-form input[type="text"],
.structure-form input:not([type]),
.structure-form input[type="number"]{
  padding:9px 10px;
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  font:inherit;
  color:var(--text-primary);
  background:var(--surface);
}
.structure-form input:not([type="number"]):not([type="checkbox"]){ flex:1 1 220px; min-width:0; }
.structure-form input[type="number"]{ width:100px; }
.structure-check,
.struct-weight{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:.78rem;
  color:var(--text-secondary);
  font-weight:600;
}
.struct-weight input[type="number"]{ width:78px; }
.structure-summary{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:6px 0 12px;
}
.structure-summary span{
  padding:4px 10px;
  border-radius:var(--radius-full);
  font-size:.76rem;
  font-weight:600;
  color:var(--accent-dark);
  background:var(--accent-light);
  border:1px solid var(--accent-line);
}
.structure-list{ display:flex; flex-direction:column; gap:12px; }
.struct-ue{
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  background:var(--surface);
  overflow:hidden;
}
.struct-ue.is-off{ opacity:.62; }
.struct-ue-head{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  background:var(--info-bg);
  border-bottom:1px solid var(--border);
}
.struct-ue-title{ font-weight:700; color:var(--text-primary); flex:1 1 220px; min-width:0; }
.struct-credits{
  font-size:.76rem;
  font-weight:600;
  color:var(--primary);
  background:var(--primary-light);
  border:1px solid var(--primary-line);
  border-radius:var(--radius-full);
  padding:3px 9px;
}
.struct-off{
  font-size:.7rem;
  font-weight:600;
  color:var(--text-tertiary);
  text-transform:uppercase;
  letter-spacing:.03em;
}
.struct-subjects{ padding:6px 12px 12px; }
.struct-subject{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  padding:8px 0;
  border-bottom:1px dashed var(--border);
}
.struct-subject:last-of-type{ border-bottom:none; }
.struct-subject-name{ flex:1 1 200px; min-width:0; color:var(--text-primary); }
.struct-weights{ font-size:.76rem; color:var(--text-secondary); white-space:nowrap; }
.struct-actions{ display:flex; flex-wrap:wrap; gap:6px; margin-left:auto; }
.struct-actions button{
  padding:5px 9px;
  border:1px solid var(--border-strong);
  border-radius:var(--radius-sm);
  background:var(--surface);
  color:var(--text-secondary);
  font-size:.74rem;
  font-weight:600;
  cursor:pointer;
}
.struct-actions button:hover:not(:disabled){
  border-color:var(--accent);
  color:var(--accent-dark);
  background:var(--accent-light);
}
.struct-actions button:disabled{ opacity:.4; cursor:not-allowed; }
.struct-actions .struct-danger:hover{
  border-color:var(--error-border);
  color:var(--error-text);
  background:var(--error-bg);
}
.struct-edit{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  background:var(--accent-light);
  border-bottom:1px solid var(--accent-line);
}
.struct-edit input:not([type="number"]){ flex:1 1 200px; min-width:0; }
.struct-edit input{
  padding:8px 10px;
  border:1px solid var(--accent-line);
  border-radius:var(--radius-sm);
  font:inherit;
  background:var(--surface);
}
.struct-edit input[type="number"]{ width:92px; }
.struct-add-subject{ margin:10px 0 0; }
@media (max-width:640px){
  .structure-toolbar select{ min-width:0; width:100%; }
  .structure-toolbar label{ flex:1 1 100%; }
  .struct-actions{ margin-left:0; width:100%; }
  .struct-weights{ white-space:normal; }
}

/* ===== NAVIGATION UE → MATIÈRE (phase D) ===== */
.subject-browser{ margin:16px 0 18px; }
.subject-ue-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:12px;
}
.subject-ue{
  padding:7px 13px;
  border:1px solid var(--border);
  border-radius:var(--radius-full);
  background:var(--surface);
  color:var(--text-secondary);
  font:inherit;
  font-size:.8rem;
  font-weight:600;
  cursor:pointer;
  transition:background .15s, border-color .15s, color .15s;
}
.subject-ue:hover{ border-color:var(--accent-line); color:var(--accent-dark); }
.subject-ue.active{
  background:var(--accent);
  border-color:var(--accent);
  color:#fff;
}
.subject-chips{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(210px, 1fr));
  gap:10px;
}
.subject-chip{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:2px;
  text-align:left;
  padding:11px 13px;
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  background:var(--surface);
  font:inherit;
  cursor:pointer;
  transition:border-color .15s, box-shadow .15s, background .15s;
}
.subject-chip strong{ font-size:.88rem; color:var(--text-primary); font-weight:600; line-height:1.3; }
.subject-chip small{ font-size:.74rem; color:var(--text-tertiary); }
.subject-chip:hover{ border-color:var(--primary-line); box-shadow:0 2px 8px rgba(15,107,74,.08); }
.subject-chip.active{
  background:var(--primary-light);
  border-color:var(--primary);
}
.subject-chip.active strong{ color:var(--primary-dark); }
.subject-chip.active small{ color:var(--primary); }
.subject-legacy{ margin-top:16px; }
.subject-legacy .hint{ margin-bottom:8px; }
#addResource select{
  padding:9px 10px;
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  font:inherit;
  background:var(--surface);
  color:var(--text-primary);
  width:100%;
}
@media (max-width:560px){
  .subject-chips{ grid-template-columns:1fr 1fr; }
  .subject-chip{ padding:9px 10px; }
}

/* ===== SÉLECTEUR DE PROMOTION (phase D) ===== */
.promotion-picker{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
  margin:14px 0 4px;
}
.promotion-picker label{
  font-size:.78rem;
  font-weight:700;
  color:var(--text-secondary);
  text-transform:uppercase;
  letter-spacing:.03em;
}
.promotion-picker select{
  padding:8px 11px;
  border:1px solid var(--accent-line);
  border-radius:var(--radius-full);
  background:var(--accent-light);
  color:var(--accent-dark);
  font:inherit;
  font-size:.82rem;
  font-weight:600;
  cursor:pointer;
}
.promotion-picker select:focus{ outline:2px solid var(--accent); outline-offset:1px; }
@media (max-width:560px){
  .promotion-picker select{ width:100%; }
}

/* ===== UE EN LISTE DÉROULANTE (phase D) ===== */
.subject-ue-tabs{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:14px;
}
.subject-ue-label{
  font-size:.78rem;
  font-weight:700;
  color:var(--text-secondary);
  text-transform:uppercase;
  letter-spacing:.03em;
}
.subject-ue-select{
  flex:1 1 260px;
  max-width:420px;
  padding:9px 12px;
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  background:var(--surface);
  color:var(--text-primary);
  font:inherit;
  font-size:.86rem;
  font-weight:600;
  cursor:pointer;
}
.subject-ue-select:focus{ outline:2px solid var(--accent); outline-offset:1px; }
@media (max-width:560px){
  .subject-ue-select{ flex:1 1 100%; max-width:none; }
}

/* ===== ACTIONS SUR UNE PROMOTION (phase D) ===== */
.structure-promo-actions{
  display:inline-flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.structure-promo-actions[hidden]{ display:none; }
@media (max-width:560px){
  .structure-promo-actions{ width:100%; }
  .structure-promo-actions .ghost-btn{ flex:1 1 auto; }
}

/* ===== NOTES ET PARCOURS ACADÉMIQUE (phase H) ===== */
.grades-toolbar,
.parcours-toolbar{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  align-items:flex-end;
  margin:14px 0;
}
.grades-toolbar label,
.parcours-toolbar label{
  display:flex;
  flex-direction:column;
  gap:5px;
  font-size:.75rem;
  font-weight:700;
  color:var(--text-secondary);
  text-transform:uppercase;
  letter-spacing:.03em;
}
.grades-toolbar select,
.parcours-toolbar select{
  min-width:220px;
  padding:9px 12px;
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  background:var(--surface);
  color:var(--text-primary);
  font:inherit;
  font-size:.86rem;
  font-weight:600;
  cursor:pointer;
}

.grades-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:12px 0 16px;
}

.grades-list{ display:flex; flex-direction:column; gap:4px; }
.grade-row{
  display:grid;
  grid-template-columns:minmax(150px,2fr) 110px 90px 90px 80px 110px;
  gap:10px;
  align-items:center;
  padding:8px 12px;
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  background:var(--surface);
  font-size:.86rem;
}
.grade-head{
  background:var(--info-bg);
  border-color:var(--border-strong);
  font-size:.72rem;
  font-weight:700;
  color:var(--text-secondary);
  text-transform:uppercase;
  letter-spacing:.03em;
}
.grade-name{ font-weight:600; color:var(--text-primary); }
.grade-mat{ color:var(--text-tertiary); font-variant-numeric:tabular-nums; }
.grade-input{
  width:100%;
  padding:6px 8px;
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  background:var(--surface);
  font:inherit;
  font-size:.86rem;
  text-align:center;
  font-variant-numeric:tabular-nums;
}
.grade-input:focus{ outline:2px solid var(--accent); outline-offset:1px; }
.grade-input:disabled{ background:var(--background); color:var(--text-tertiary); cursor:not-allowed; }
.grade-input.invalid{ border-color:var(--error-border); background:var(--error-bg); color:var(--error-text); }
.grade-avg{ font-weight:700; text-align:center; font-variant-numeric:tabular-nums; }
.grade-pill{
  display:inline-block;
  padding:3px 9px;
  border-radius:var(--radius-full);
  font-size:.7rem;
  font-weight:700;
  border:1px solid transparent;
}
.grade-pill.published{ background:var(--success-bg); border-color:var(--success-border); color:var(--success-text); }
.grade-pill.draft{ background:var(--info-bg); border-color:var(--border-strong); color:var(--text-secondary); }
.grade-pill.empty{ background:transparent; color:var(--text-tertiary); }

.parcours-summary{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:8px 0 18px;
}
.parcours-summary span{
  padding:8px 14px;
  border:1px solid var(--primary-line);
  border-radius:var(--radius-full);
  background:var(--primary-light);
  color:var(--primary-dark);
  font-size:.82rem;
  font-weight:600;
}
.parcours-summary strong{ font-weight:800; }

.parcours-list{ display:flex; flex-direction:column; gap:14px; }
.parcours-ue{
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  background:var(--surface);
  padding:14px 16px;
}
.parcours-ue header{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  justify-content:space-between;
  margin-bottom:10px;
}
.parcours-ue h3{ margin:0; font-size:.98rem; color:var(--text-primary); }
.parcours-ue-meta{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.parcours-ue-avg{
  font-weight:800;
  font-variant-numeric:tabular-nums;
  color:var(--accent-dark);
}
.parcours-line{
  display:grid;
  grid-template-columns:minmax(140px,3fr) 70px 70px 80px;
  gap:10px;
  align-items:center;
  padding:7px 0;
  border-top:1px solid var(--border);
  font-size:.86rem;
  font-variant-numeric:tabular-nums;
}
.parcours-head{
  border-top:none;
  font-size:.7rem;
  font-weight:700;
  color:var(--text-secondary);
  text-transform:uppercase;
  letter-spacing:.03em;
}
.parcours-subject{ font-weight:600; color:var(--text-primary); }
.parcours-avg{ font-weight:700; text-align:right; }
.parcours-avg.ok{ color:var(--success-text); }
.parcours-avg.ko{ color:var(--error-text); }

@media (max-width:720px){
  .grade-row{
    grid-template-columns:1fr 1fr;
    row-gap:6px;
  }
  .grade-head{ display:none; }
  .grade-name{ grid-column:1 / -1; }
  .grades-toolbar select,
  .parcours-toolbar select{ min-width:0; width:100%; }
  .grades-toolbar label,
  .parcours-toolbar label{ width:100%; }
  .parcours-line{ grid-template-columns:1fr 56px 56px 64px; gap:6px; font-size:.8rem; }
}

/* ===== IMPORT EXCEL DES NOTES (phase H) ===== */
.grades-import{
  margin:18px 0;
  padding:14px 16px;
  border:1px dashed var(--border-strong);
  border-radius:var(--radius-md);
  background:var(--info-bg);
}
.grades-import .hint{ margin:0 0 4px; }
.grades-import .grades-actions{ margin:10px 0 0; }

.grades-report{
  margin-top:14px;
  padding:14px 16px;
  border:1px solid var(--accent-line);
  border-radius:var(--radius-md);
  background:var(--surface);
}
.grades-report h4{
  margin:0 0 4px;
  font-size:.95rem;
  color:var(--accent-dark);
}
.grades-report ul{
  margin:10px 0 0;
  padding-left:18px;
  display:flex;
  flex-direction:column;
  gap:4px;
  font-size:.86rem;
  color:var(--text-secondary);
}
.grades-report li strong{
  color:var(--text-primary);
  font-variant-numeric:tabular-nums;
}
.grades-report li.warn{ color:var(--error-text); }
.grades-report li.warn strong{ color:var(--error-text); }
.grades-report .grades-actions{ margin:14px 0 0; }

/* ===== FIL D'ACTUALITÉ ET ZONE DE PUBLICATION (phase E) ===== */
.feed-section{ padding-top:28px; }

.composer{
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  background:var(--surface);
  padding:18px 20px;
  box-shadow:0 1px 2px rgba(31,45,61,.04);
}
.composer-head{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:14px;
}
.composer-avatar{
  display:grid;
  place-items:center;
  width:42px; height:42px;
  flex:0 0 42px;
  border-radius:var(--radius-full);
  background:var(--primary-light);
  color:var(--primary-dark);
  border:1px solid var(--primary-line);
  font-weight:800;
  font-size:.88rem;
}
.composer-question{
  margin:0;
  font-size:1.02rem;
  font-weight:700;
  color:var(--text-primary);
}
.composer-types{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.composer-type{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:9px 14px;
  border:1px solid var(--border);
  border-radius:var(--radius-full);
  background:var(--background);
  color:var(--text-primary);
  font:inherit;
  font-size:.86rem;
  font-weight:600;
  cursor:pointer;
  transition:background .15s, border-color .15s, color .15s;
}
.composer-type:hover{ background:var(--accent-light); border-color:var(--accent-line); }
.composer-type.active{
  background:var(--primary-light);
  border-color:var(--primary-line);
  color:var(--primary-dark);
}
.composer-type span{ font-size:1rem; line-height:1; }

.composer-hint{
  margin:12px 0 0;
  padding:10px 12px;
  border:1px solid var(--accent-line);
  border-radius:var(--radius-sm);
  background:var(--accent-light);
  color:var(--text-primary);
}

.composer-form{ margin-top:14px; }
.composer-form textarea{
  width:100%;
  padding:12px 14px;
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  background:var(--surface);
  color:var(--text-primary);
  font:inherit;
  font-size:.92rem;
  line-height:1.55;
  resize:vertical;
  min-height:88px;
}
.composer-form textarea:focus{ outline:2px solid var(--primary); outline-offset:1px; }
.composer-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  justify-content:space-between;
  margin-top:10px;
}
.composer-actions small{ color:var(--text-tertiary); font-variant-numeric:tabular-nums; }
.composer-buttons{ display:flex; gap:8px; }
.ghost-btn.is-primary{
  background:var(--primary);
  border-color:var(--primary);
  color:#fff;
}
.ghost-btn.is-primary:hover{ background:var(--primary-dark); border-color:var(--primary-dark); }

.feed-head{ margin:28px 0 12px; }
.feed-head h2{ margin:2px 0 0; font-size:1.35rem; color:var(--text-primary); }

.feed-filters{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:16px;
}
.feed-filter{
  padding:7px 13px;
  border:1px solid var(--border);
  border-radius:var(--radius-full);
  background:var(--surface);
  color:var(--text-secondary);
  font:inherit;
  font-size:.82rem;
  font-weight:600;
  cursor:pointer;
}
.feed-filter:hover{ border-color:var(--accent-line); color:var(--text-primary); }
.feed-filter.active{
  background:var(--accent);
  border-color:var(--accent);
  color:#fff;
}

.feed-list{ display:flex; flex-direction:column; gap:12px; }
.feed-card{
  border:1px solid var(--border);
  border-left:3px solid var(--border-strong);
  border-radius:var(--radius-md);
  background:var(--surface);
  padding:14px 16px;
}
.feed-card.feed-post{ border-left-color:var(--primary); }
.feed-card.feed-announcement{ border-left-color:#C9822F; }
.feed-card.feed-resource{ border-left-color:var(--accent); }
.feed-card.feed-event{ border-left-color:#7A5AA8; }
/* Point 8 : teinte sarcelle propre à l'opportunité, distincte des 4 autres
   couleurs de badge déjà utilisées (vert, orange, bleu, violet) ci-dessus. */
.feed-card.feed-opportunity{ border-left-color:#0F8B8D; }

/* ===================== FIL D'ACTUALITÉ — ANIMATION PREMIUM ===================== */
.feed-list{perspective:900px}
.feed-card{
  opacity:0;
  transform:translate3d(0,18px,0) scale(.985);
  animation:feedCardEnter .58s cubic-bezier(.16,.8,.3,1) forwards;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  will-change:transform,opacity;
}
.feed-card:nth-child(1){animation-delay:.02s}
.feed-card:nth-child(2){animation-delay:.07s}
.feed-card:nth-child(3){animation-delay:.12s}
.feed-card:nth-child(4){animation-delay:.17s}
.feed-card:nth-child(5){animation-delay:.22s}
.feed-card:nth-child(6){animation-delay:.27s}
.feed-card:nth-child(7){animation-delay:.32s}
.feed-card:nth-child(8){animation-delay:.37s}
.feed-card:nth-child(9){animation-delay:.42s}
.feed-card:nth-child(10){animation-delay:.47s}
.feed-card:nth-child(11){animation-delay:.52s}
.feed-card:nth-child(12){animation-delay:.57s}
@keyframes feedCardEnter{
  0%{opacity:0;transform:translate3d(0,18px,0) scale(.985)}
  70%{opacity:1;transform:translate3d(0,-2px,0) scale(1.002)}
  100%{opacity:1;transform:translate3d(0,0,0) scale(1)}
}
.feed-card:hover{transform:translate3d(0,-3px,0) scale(1.002);box-shadow:0 14px 30px rgba(28,55,69,.09);border-color:var(--border-strong)}
.feed-card header{transition:transform .25s ease}
.feed-card:hover header{transform:translateX(2px)}
.feed-avatar{transition:transform .3s ease, box-shadow .3s ease}
.feed-card:hover .feed-avatar{transform:scale(1.06);box-shadow:0 5px 14px rgba(18,105,199,.10)}
.feed-filter{transition:transform .18s ease,background .2s ease,color .2s ease,border-color .2s ease,box-shadow .2s ease}
.feed-filter:active{transform:scale(.97)}
.feed-filter.active{box-shadow:0 5px 16px rgba(18,105,199,.10)}
.feed-more .ghost-btn{transition:transform .2s ease,box-shadow .2s ease}
.feed-more .ghost-btn:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(28,55,69,.08)}
@media(prefers-reduced-motion:reduce){
  .feed-card,.feed-card:nth-child(n){animation:none;opacity:1;transform:none;transition:none}
  .feed-card:hover,.feed-card:hover header,.feed-card:hover .feed-avatar,.feed-filter:active,.feed-more .ghost-btn:hover{transform:none}
}
.opp-avatar{ background:#E3F4F4; color:#0F8B8D; }
.feed-card header{
  display:flex;
  align-items:center;
  gap:11px;
}
.feed-avatar{
  display:grid;
  place-items:center;
  width:38px; height:38px;
  flex:0 0 38px;
  border-radius:var(--radius-full);
  background:var(--info-bg);
  border:1px solid var(--border);
  font-size:1rem;
  font-weight:800;
  color:var(--text-secondary);
}
.feed-meta{ display:flex; flex-direction:column; gap:1px; min-width:0; flex:1; }
.feed-meta strong{ font-size:.94rem; color:var(--text-primary); }
.feed-meta small{ font-size:.76rem; color:var(--text-tertiary); }
.feed-delete{
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  background:var(--surface);
  color:var(--text-tertiary);
  padding:6px;
  cursor:pointer;
  line-height:0;
}
.feed-delete:hover{ border-color:var(--error-border); background:var(--error-bg); color:var(--error-text); }
.feed-delete i{ width:16px; height:16px; }
.feed-tagline{
  margin:10px 0 0;
  font-size:.78rem;
  font-weight:600;
  color:var(--text-secondary);
  text-transform:uppercase;
  letter-spacing:.03em;
}
.feed-body{
  margin:8px 0 0;
  font-size:.92rem;
  line-height:1.6;
  color:var(--text-primary);
  white-space:pre-wrap;
  overflow-wrap:anywhere;
}
/* ===================== POINT 8 — CARROUSEL D'OPPORTUNITÉS ===================== */
.opp-carousel{
  margin-top:12px;
  overflow:hidden;
  border-radius:var(--radius-sm);
  border:1px solid var(--border);
  background:var(--info-bg);
  touch-action:pan-y; /* laisse le swipe horizontal au JS sans bloquer le scroll vertical */
}
.opp-track{
  display:flex;
  transition:transform .45s ease;
}
.opp-slide{
  flex:0 0 100%;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:10px;
}
/* Correctif : l'ancien ratio fixe 4/3 forçait chaque affiche (souvent des
   flyers en format portrait) dans une boîte plus large que haute, donc
   object-fit:contain la réduisait beaucoup et laissait de grandes marges
   vides à gauche/à droite — d'où l'impression d'image "petite". L'image va
   maintenant directement au bord du carrousel (plus de marge intérieure
   sur les côtés) et sa hauteur s'adapte à son ratio réel jusqu'à un
   plafond confortable, au lieu d'être forcée dans une case 4/3 trop large. */
.opp-visual{
  width:100%;
  height:auto;
  min-height:220px;
  max-height:520px;
  object-fit:contain;
  background:var(--background);
  display:block;
}
.opp-slide-body{ display:flex; flex-direction:column; gap:6px; min-width:0; padding:14px; }
.opp-type-tag{
  align-self:flex-start;
  background:#0F8B8D;
  color:#fff;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.02em;
  text-transform:uppercase;
  padding:3px 10px;
  border-radius:var(--radius-full);
}
/* Titre : lisible, sur 2 lignes maximum (comme la troncature déjà utilisée
   ailleurs sur le site, ex. .public-step-media + textes de cartes). */
.opp-slide-body h4{
  margin:0;
  font-size:1.05rem;
  font-weight:700;
  line-height:1.3;
  color:var(--text-primary);
  overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
}
/* Description : troncature propre à 3 lignes maximum, même mécanisme. */
.opp-slide-body p{
  margin:0;
  font-size:.88rem;
  line-height:1.5;
  color:var(--text-secondary);
  overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
}
.opp-slide-meta{ display:flex; flex-wrap:wrap; gap:10px; font-size:.78rem; color:var(--text-tertiary); }
.opp-cta{ align-self:flex-start; margin-top:4px; }
.opp-dots{ display:flex; justify-content:center; gap:7px; margin-top:10px; }
.opp-dot{
  width:8px; height:8px;
  padding:0;
  border-radius:var(--radius-full);
  border:none;
  background:var(--border-strong);
  cursor:pointer;
}
.opp-dot.active{ background:#0F8B8D; width:20px; }
@media (min-width:760px){
  /* Sur ordinateur : image plus large (davantage d'espace horizontal
     utilisé). Corrigé : l'ancien ratio fixe 4/3 + object-fit:cover forçait
     un recadrage important sur les affiches en format portrait (le même
     problème déjà corrigé côté mobile ci-dessus), ce qui donnait une
     impression d'image "petite"/incomplète même à 48% de largeur. On
     reprend donc le même traitement que le mobile (object-fit:contain,
     hauteur libre entre un plancher et un plafond confortables) pour que
     l'affiche soit visible en entier, à taille cohérente entre mobile et
     PC, sans déformation ni recadrage arbitraire. */
  .opp-slide{ flex-direction:row; align-items:center; gap:18px; }
  .opp-visual{
    width:50%;
    max-width:460px;
    height:auto;
    min-height:220px;
    max-height:420px;
    flex:0 0 50%;
    object-fit:contain;
    background:var(--background);
  }
}

.feed-empty{
  margin:0;
  padding:22px;
  border:1px dashed var(--border-strong);
  border-radius:var(--radius-md);
  background:var(--surface);
  text-align:center;
  color:var(--text-secondary);
}
.feed-more{ display:flex; justify-content:center; margin-top:16px; }

@media (max-width:720px){
  .composer{ padding:14px; }
  .composer-type{ flex:1 1 calc(50% - 8px); justify-content:center; }
  .composer-actions{ justify-content:flex-end; }
  .feed-filters{ overflow-x:auto; flex-wrap:nowrap; padding-bottom:4px; }
  .feed-filter{ flex:0 0 auto; }
}

/* ===================================================================
   IMAGES, RÉACTIONS ET COMMENTAIRES DES PUBLICATIONS (phase E suite)
   =================================================================== */

.composer-images{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:8px}
.composer-add-image{background:var(--accent-light);color:var(--accent-dark);border:1px solid var(--accent-line);
  border-radius:var(--radius-full);padding:6px 14px;font-size:.86rem;font-weight:600;cursor:pointer}
.composer-add-image:hover{background:#DDEBF9}
#composerImageHint{color:var(--text-tertiary);font-size:.78rem}

.composer-previews{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.composer-preview{position:relative;width:88px;height:88px;border-radius:var(--radius-sm);
  overflow:hidden;border:1px solid var(--border)}
.composer-preview img{width:100%;height:100%;object-fit:cover;display:block}
.composer-preview button{position:absolute;top:3px;right:3px;width:22px;height:22px;line-height:20px;
  border:none;border-radius:50%;background:rgba(31,45,61,.78);color:#fff;font-size:15px;cursor:pointer}
.composer-preview button:hover{background:var(--error-text)}

/* Images d'une publication : une seule en grand, plusieurs en mosaïque. */
.post-images{display:grid;gap:6px;margin:10px 0 4px;border-radius:var(--radius-md);overflow:hidden}
.post-images.count-1{grid-template-columns:1fr}
.post-images.count-2,.post-images.count-4{grid-template-columns:1fr 1fr}
.post-images.count-3{grid-template-columns:1fr 1fr 1fr}
.post-image{width:100%;height:100%;max-height:420px;object-fit:cover;display:block;cursor:zoom-in;background:var(--info-bg)}
.post-images.count-2 .post-image,
.post-images.count-3 .post-image,
.post-images.count-4 .post-image{height:170px}

/* Point A.1 : libelle neutre remplacant le badge de type pour les simples
   publications (jamais de profiles.role -- voir app.js, feedItemHtml). */
.feed-status-neutral{color:var(--text-secondary);font-weight:600}
.feed-status-neutral+.feed-date::before{content:"\00b7";margin:0 5px}

/* ===================================================================
   Point A.2 : reactions -- ligne de resume (lecture seule) puis rangee
   d'actions (boutons), a la place de l'ancienne barre .post-social a
   plat. Les classes .post-react / .post-comment-toggle / .post-bookmark
   existantes sont conservees (reutilisees telles quelles), seule leur
   disposition change.
   =================================================================== */
.post-social{margin-top:10px;padding-top:10px;border-top:1px solid var(--border)}

.post-reaction-summary{display:flex;align-items:center;justify-content:space-between;gap:10px;
  flex-wrap:wrap;min-height:20px;margin-bottom:8px;font-size:.82rem;color:var(--text-tertiary)}
.post-reaction-chips{display:flex;gap:8px;flex-wrap:wrap}
.post-reaction-chip{font-size:.82rem;color:var(--text-secondary)}
.post-social-right{white-space:nowrap;color:var(--text-tertiary)}

.post-actions-row{display:flex;align-items:stretch;gap:4px}
.post-action{flex:1 1 0;display:flex;align-items:center;justify-content:center;gap:6px;
  background:none;border:none;border-radius:var(--radius-sm);cursor:pointer;
  padding:8px 6px;font-size:.86rem;font-weight:600;color:var(--text-secondary);white-space:nowrap}
.post-action:hover{background:var(--accent-light);color:var(--accent-dark)}
.post-action span{font-size:.86rem}

/* "J'aime" + son selecteur secondaire des 5 autres emoji. */
.post-like-wrap{position:relative;flex:1 1 0;display:flex;align-items:stretch}
.post-action-like{flex:1 1 auto}
.post-action-like.mine{background:var(--accent-light);color:var(--accent-dark)}
.post-like-more{flex:0 0 auto;width:26px;background:none;border:none;border-radius:var(--radius-sm);
  cursor:pointer;color:var(--text-tertiary);font-size:.95rem;font-weight:700}
.post-like-more:hover{background:var(--accent-light);color:var(--accent-dark)}
/* Repli au clic (tactile), en plus du survol ci-dessous (ordinateur) --
   voir le choix signale dans le resume de livraison : un vrai appui long
   est fragile sur mobile (conflits avec le scroll/swipe), donc le survol
   dessktop est complete par ce bouton "+" plutot que remplace. */
.post-like-picker{position:absolute;bottom:calc(100% + 6px);left:0;z-index:5;display:none;gap:4px;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-full);
  padding:5px 8px;box-shadow:0 6px 18px rgba(15,23,42,.14)}
.post-like-picker.open{display:flex}
@media (hover:hover){
  .post-like-wrap:hover .post-like-picker{display:flex}
}
.post-like-picker .post-react{padding:3px 8px;font-size:.95rem}

.post-react{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-full);
  padding:4px 10px;font-size:.95rem;cursor:pointer;line-height:1.4;transition:.15s}
.post-react span{font-size:.8rem;font-weight:700;color:var(--text-secondary);margin-left:2px}
.post-react:hover{background:var(--accent-light);border-color:var(--accent-line)}
.post-react.mine{background:var(--accent-light);border-color:var(--accent);}
.post-react.mine span{color:var(--accent-dark)}
.post-react.empty{opacity:.62}
.post-react.empty:hover{opacity:1}

.post-comment-toggle{color:var(--accent-dark)}
.post-share{color:var(--accent-dark)}

/* Commentaires */
.post-comments{margin-top:10px;padding-top:10px;border-top:1px dashed var(--border);
  display:flex;flex-direction:column;gap:10px}
.post-comment{display:flex;gap:9px;align-items:flex-start}
.post-comment-avatar{flex:0 0 30px;width:30px;height:30px;border-radius:50%;
  background:var(--accent-light);color:var(--accent-dark);font-size:.72rem;font-weight:700;
  display:flex;align-items:center;justify-content:center}
.post-comment-body{flex:1;background:var(--background);border-radius:var(--radius-md);padding:7px 11px}
.post-comment-body strong{font-size:.84rem}
.post-comment-body small{color:var(--text-tertiary);font-size:.74rem;margin-left:5px}
.post-comment-body p{margin:2px 0 0;font-size:.9rem;white-space:pre-wrap;word-break:break-word}
.post-comment-del{background:none;border:none;color:var(--text-tertiary);font-size:17px;
  line-height:1;cursor:pointer;padding:2px 5px;border-radius:var(--radius-sm)}
.post-comment-del:hover{color:var(--error-text);background:var(--error-bg)}

.post-comment-form{display:flex;gap:8px;align-items:center}
.post-comment-form input{flex:1;min-width:0;border:1px solid var(--border);border-radius:var(--radius-full);
  padding:8px 14px;font:inherit;font-size:.9rem;background:var(--surface)}
.post-comment-form input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-light)}
.post-comment-form .ghost-btn{padding:7px 14px;font-size:.84rem;white-space:nowrap}

@media (max-width:720px){
  .post-images.count-3{grid-template-columns:1fr 1fr}
  .post-images.count-2 .post-image,
  .post-images.count-3 .post-image,
  .post-images.count-4 .post-image{height:140px}
  .post-comment-toggle{margin-left:0}
  .post-social{gap:4px}
  .post-react{padding:4px 8px}
}

/* ===================================================================
   VISIONNEUSE D'IMAGES
   =================================================================== */

.lightbox{position:fixed;inset:0;z-index:9000;background:rgba(15,25,35,.92);
  display:flex;align-items:center;justify-content:center;gap:6px;padding:24px}
.lightbox[hidden]{display:none}
body.lightbox-open{overflow:hidden}

.lightbox-stage{margin:0;display:flex;flex-direction:column;align-items:center;gap:12px;
  max-width:100%;max-height:100%}
/* « contain » : l'image est vue en entier, jamais rognée. */
#lightboxImage{max-width:min(1100px,92vw);max-height:82vh;width:auto;height:auto;
  object-fit:contain;border-radius:var(--radius-md);background:#0B141B;
  box-shadow:0 18px 60px rgba(0,0,0,.45)}
#lightboxCount{color:rgba(255,255,255,.82);font-size:.86rem;letter-spacing:.03em}

.lightbox-close{position:absolute;top:16px;right:18px;width:42px;height:42px;
  border:none;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;
  font-size:26px;line-height:1;cursor:pointer;transition:.15s}
.lightbox-close:hover{background:rgba(255,255,255,.28)}

.lightbox-nav{flex:0 0 48px;width:48px;height:48px;border:none;border-radius:50%;
  background:rgba(255,255,255,.14);color:#fff;font-size:30px;line-height:44px;
  cursor:pointer;transition:.15s}
.lightbox-nav:hover{background:rgba(255,255,255,.3)}
.lightbox-nav[hidden]{display:none}

@media (max-width:720px){
  .lightbox{padding:12px;gap:2px}
  #lightboxImage{max-width:94vw;max-height:74vh}
  .lightbox-nav{flex-basis:38px;width:38px;height:38px;font-size:24px;line-height:34px}
  .lightbox-close{top:8px;right:10px;width:36px;height:36px;font-size:22px}
}

/* =====================================================================
   VITRINE PUBLIQUE — expérience d'accueil avant connexion
   ===================================================================== */
#publicShowcase{display:none;background:#f7faf9;color:var(--text-primary)}
body.locked #publicShowcase{display:block}
body.locked #authGate{display:block}

/* Point 4 : le bloc de texte est repositionné en bas de la photo (niveau taille/pantalon,
   jamais sur les visages/torses), centré horizontalement, avec un dégradé sombre en bas
   uniquement (le haut de la photo reste net et non obscurci). */
.showcase-hero{position:relative;min-height:590px;overflow:hidden;background:#eef7f3}
.showcase-hero-bg{position:absolute;inset:0;background-image:url('hero-students.jpg');background-size:cover;background-position:center 30%;transform:scale(1.01)}
.showcase-hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,44,29,0) 0%,rgba(6,44,29,.05) 46%,rgba(6,44,29,.55) 74%,rgba(6,44,29,.86) 100%)}
.showcase-hero-content{position:relative;min-height:590px;display:flex;align-items:flex-end;justify-content:center;padding:54px 0 46px}
.showcase-hero-copy{width:min(640px,92%);margin:0 auto;text-align:center;opacity:0;transform:translate3d(0,26px,0);transition:opacity .8s cubic-bezier(.16,.8,.3,1),transform .9s cubic-bezier(.16,.8,.3,1)}
.showcase-hero-copy.in-view{opacity:1;transform:translate3d(0,0,0)}
.showcase-partner-logos{display:flex;align-items:center;justify-content:center;gap:22px;width:240px;margin:0 auto 16px}
.showcase-partner-logos img{width:76px;height:76px;object-fit:contain;filter:drop-shadow(0 5px 10px rgba(0,0,0,.08))}
/* Texte clair : le fond est désormais la photo assombrie par le dégradé ci-dessus,
   plus la carte claire d'avant — les couleurs de texte passent donc en blanc/clair. */
.showcase-kicker{margin:0 0 3px;font-size:17px;color:rgba(255,255,255,.88);font-weight:600;text-shadow:0 2px 10px rgba(0,0,0,.3)}
.showcase-hero h1{margin:0 0 16px;font-size:clamp(42px,5vw,64px);line-height:1;letter-spacing:-.045em;text-shadow:0 4px 18px rgba(0,0,0,.28)}
.showcase-hero h1 .brand-grme{color:var(--primary-light)}
.showcase-hero h1 .brand-connect{color:var(--accent-light)}
.showcase-description{font-size:15px;line-height:1.58;color:rgba(255,255,255,.86);margin:0 0 16px;text-shadow:0 2px 10px rgba(0,0,0,.28)}
.showcase-description strong{color:#fff}
.showcase-intro{font-size:20px;line-height:1.45;color:#fff;font-weight:700;margin:20px 0 26px;text-shadow:0 2px 10px rgba(0,0,0,.28)}
.showcase-scroll-btn{border:0;cursor:pointer}

/* Parcours public — structure alternée, grandes images et apparition directionnelle */
.public-how{position:relative;padding:34px 0 48px;background:linear-gradient(180deg,#f8fbfa 0%,#f5f9f8 100%);overflow:hidden}
.public-how::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 12% 16%,rgba(20,170,111,.055),transparent 24%),radial-gradient(circle at 88% 62%,rgba(31,111,202,.045),transparent 25%)}
.public-how-head{position:relative;z-index:1;text-align:center;max-width:760px;margin:0 auto 52px}
.public-how-head .eyebrow{font-size:15px;margin:0;color:#2168bd;font-weight:800}
.public-how-head h2{font-size:clamp(34px,4vw,46px);margin:1px 0 7px;letter-spacing:-.035em;color:#203149;line-height:1.08}
.public-how-head h2 span{color:#12965e}
.public-how-head>p:last-child{margin:0;color:#617084;font-size:15px}

.public-steps{position:relative;z-index:1;display:flex;flex-direction:column;gap:68px}
.public-step{position:relative;display:grid;grid-template-columns:minmax(340px,470px) minmax(0,1fr);gap:70px;align-items:center;min-height:330px;opacity:0;will-change:transform,opacity;transition:opacity .8s cubic-bezier(.16,.8,.3,1),transform .9s cubic-bezier(.16,.8,.3,1)}
.public-step.step-left{transform:translate3d(-90px,32px,0)}
.public-step.step-right{grid-template-columns:minmax(0,1fr) minmax(340px,470px);transform:translate3d(90px,32px,0)}
.public-step.step-right .public-step-media{order:2}
.public-step.in-view{opacity:1;transform:translate3d(0,0,0)}

.public-step-media{position:relative;width:min(100%,470px);height:330px;margin:auto;overflow:visible;border:8px solid #fff;background:#e7f5ee;box-shadow:0 22px 48px rgba(28,55,69,.16);isolation:isolate;animation:stepFloat 7s ease-in-out infinite;animation-play-state:paused}
/* L'animation ne tourne que lorsque le bloc est visible à l'écran (classe posée/retirée
   par IntersectionObserver dans app.js) : évite de faire tourner 6 animations en continu
   hors champ, ce qui saccade le scroll et décharge la batterie sur mobile. */
.public-step.anim-active .public-step-media{animation-play-state:running}
.public-step:nth-child(1) .public-step-media,.public-step:nth-child(5) .public-step-media{border-radius:48% 52% 38% 62% / 42% 34% 66% 58%}
.public-step:nth-child(2) .public-step-media,.public-step:nth-child(6) .public-step-media{border-radius:38% 62% 58% 42% / 58% 42% 58% 42%}
.public-step:nth-child(3) .public-step-media{border-radius:58% 42% 42% 58% / 42% 62% 38% 58%}
.public-step:nth-child(4) .public-step-media{border-radius:42% 58% 60% 40% / 58% 40% 60% 42%}
.public-step-media::before{content:"";position:absolute;inset:-18px 24px 20px -22px;border-radius:46% 54% 55% 45% / 56% 42% 58% 44%;background:#d9f2e7;z-index:-1;opacity:.95}
.public-step.step-right .public-step-media::before{inset:-18px -22px 20px 24px;background:#dcefff}
.public-step-media::after{content:"";position:absolute;inset:12px;border-radius:inherit;border:1px solid rgba(255,255,255,.7);pointer-events:none;z-index:2}
.public-step-media img{width:100%;height:100%;display:block;object-fit:cover;object-position:center;border-radius:inherit}
.public-step-badge{position:absolute;right:-28px;bottom:22px;width:76px;height:76px;border-radius:50%;display:grid;place-items:center;background:#07945a;color:#fff;border:6px solid #fff;box-shadow:0 13px 28px rgba(0,0,0,.17);z-index:4;animation:badgeFloat 4s ease-in-out infinite;animation-play-state:paused}
.public-step.anim-active .public-step-badge{animation-play-state:running}
.public-step.step-right .public-step-badge{right:auto;left:-28px}
.public-step-badge.blue{background:#1269c7}
.public-step-badge svg{width:31px;height:31px;stroke-width:2.2}

.public-step-content{position:relative;padding:28px 8px}
.public-step-number{position:absolute;top:-38px;right:0;font-size:88px;font-weight:900;line-height:1;color:rgba(18,150,94,.10);z-index:0;user-select:none;letter-spacing:-.07em}
.public-step.step-right .public-step-number{right:auto;left:0;color:rgba(18,105,199,.09)}
.public-step-content .how-step-eyebrow,.public-step-content h3,.public-step-content>p:not(.how-step-eyebrow){position:relative;z-index:1}
.how-step-eyebrow{margin:0 0 3px;color:#617084;font-size:12px;font-weight:800;letter-spacing:.02em;text-transform:uppercase}
.public-step-content h3{font-size:30px;margin:0 0 10px;letter-spacing:-.025em;color:#203149;line-height:1.16}
.public-step-content>p:not(.how-step-eyebrow){max-width:610px;color:#617084;font-size:16px;line-height:1.55;margin:0}
.step-accent{display:block;width:35px;height:5px;border-radius:999px;background:#07945a;margin-top:13px}
.step-accent.blue-accent{background:#1269c7}

/* Liaisons visuelles entre les étapes */
.public-step:not(:last-child)::after{content:"";position:absolute;bottom:-47px;width:96px;height:48px;border-bottom:2px dashed rgba(19,153,101,.35);pointer-events:none}
.public-step.step-left::after{right:13%;border-right:2px dashed rgba(19,153,101,.35);border-radius:0 0 35px 0;transform:rotate(22deg)}
.public-step.step-right::after{left:13%;border-left:2px dashed rgba(61,157,224,.35);border-radius:0 0 0 35px;transform:rotate(-22deg)}

/* Point 6 : bloc de confiance, entre les 6 étapes et le CTA final. Même langage visuel
   que .quick-card / .category-card (carte claire, radius/shadow partagés), avec une
   apparition en fondu + translation échelonnée par carte (voir app.js). */
.public-trust{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
  margin:44px 0 8px;
}
.trust-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-xs);
  padding:26px 22px;
  text-align:center;
  opacity:0;
  transform:translateY(28px);
  transition:opacity .65s ease,transform .65s cubic-bezier(.16,.8,.3,1),box-shadow var(--t-fast),border-color var(--t-fast);
}
.trust-card:hover{box-shadow:var(--shadow-sm);border-color:var(--border-strong)}
.trust-card.in-view{opacity:1;transform:translateY(0)}
.trust-card:nth-child(1){transition-delay:0ms}
.trust-card:nth-child(2){transition-delay:110ms}
.trust-card:nth-child(3){transition-delay:220ms}
.trust-icon{
  width:48px;height:48px;margin:0 auto 14px;border-radius:var(--radius-full);
  background:var(--primary-light);color:var(--primary);
  display:flex;align-items:center;justify-content:center;
}
.trust-icon i,.trust-icon svg{width:22px;height:22px}
.trust-card h3{margin:0 0 8px;font-size:15.5px;font-weight:700;color:var(--text-primary);line-height:1.35}
.trust-card p{margin:0;font-size:12.5px;line-height:1.55;color:var(--text-secondary)}

/* CTA finale — Point 2 : flux normal (flexbox colonne centrée), l'image de référence
   reste un fond décoratif (superposée à un dégradé vert pour rester lisible quelle que
   soit sa nouvelle proportion) et ne dicte plus la position du texte par-dessus. */
.public-final-cta{
  margin:78px auto 22px;
  width:100%;
  min-height:260px;
  padding:52px 24px;
  background:
    linear-gradient(135deg,rgba(6,95,61,.93),rgba(8,124,75,.9)),
    url("cta-reference-clean.png") center/cover no-repeat,
    #087d50;
  border-radius:24px;
  box-shadow:0 22px 44px rgba(8,124,75,.20);
  color:#fff;
  position:relative;
  overflow:hidden;
  isolation:isolate;
  display:flex;
  align-items:center;
  justify-content:center;
}
/* Titre, texte, bouton et slogan partagent désormais le même conteneur et le même
   axe de centrage (text-align + align-items:center) au lieu d'être positionnés
   indépendamment en absolu comme avant. */
.public-final-cta-content{
  position:relative;
  z-index:4;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:16px;
  max-width:540px;
  margin:0 auto;
}
.public-final-cta h2{margin:0;font-size:clamp(24px,2.4vw,29px);font-weight:800;line-height:1.15;letter-spacing:-.03em;color:#fff}
.public-final-cta p{margin:0;color:#fff;line-height:1.5;font-size:clamp(14px,1.2vw,16px);font-weight:400;max-width:440px}
.public-login-cta{background:#fff!important;color:#087c4b!important;width:auto;min-width:270px;height:53px;padding:0 22px;border-radius:12px;white-space:nowrap;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 7px 16px rgba(0,0,0,.12);font-size:15px;font-weight:700;transition:transform .2s ease,box-shadow .2s ease;margin-top:4px}
.public-login-cta:hover{transform:translateY(-2px);box-shadow:0 11px 22px rgba(0,0,0,.16)}
.public-login-cta span{margin-left:9px;font-size:19px;line-height:1}
/* Correction : slogan manuscrit sorti du flux, repositionné en étiquette oblique
   en haut à droite de la carte (comme la maquette de référence), au lieu d'être
   centré à plat sous le bouton. */
.public-final-motto{
  font-family:"Caveat",cursive;
  font-size:clamp(19px,1.9vw,25px);
  font-weight:600;
  line-height:1.18;
  color:#fff;
  position:absolute;
  top:26px;
  right:34px;
  z-index:6;
  text-align:right;
  transform:rotate(-8deg);
  transform-origin:center;
  pointer-events:none;
}

/* Fusée : visuel officiel de la référence, départ bas-gauche puis traversée diagonale vers la droite */
.rocket-launch{position:absolute;left:4.8%;bottom:20px;width:130px;height:158px;z-index:8;transform:translate3d(0,0,0);transform-origin:50% 85%;filter:drop-shadow(0 10px 12px rgba(0,0,0,.12));pointer-events:none}
.rocket-launch img{display:block;width:100%;height:100%;object-fit:contain}
.rocket-smoke{position:absolute;left:0;bottom:0;width:165px;height:53px;z-index:7;pointer-events:none}
.rocket-smoke img{display:block;width:100%;height:100%;object-fit:contain}
.public-final-cta.launch .rocket-launch{animation:rocketTakeoff 4.5s cubic-bezier(.18,.72,.22,1) forwards}

@keyframes rocketTakeoff{
  0%{transform:translate3d(0,0,0) scale(1);opacity:1}
  18%{transform:translate3d(55px,-18px,0) scale(1);opacity:1}
  38%{transform:translate3d(145px,-45px,0) scale(.98);opacity:1}
  58%{transform:translate3d(270px,-76px,0) scale(.96);opacity:1}
  78%{transform:translate3d(425px,-112px,0) scale(.93);opacity:1}
  92%{transform:translate3d(590px,-145px,0) scale(.90);opacity:1}
  100%{transform:translate3d(720px,-172px,0) scale(.88);opacity:.92}
}

@media(max-width:760px){
  /* Mobile : photo en haut (non recouverte), texte en dessous dans le flux normal —
     l'objectif "pas sur les visages" est donc déjà garanti structurellement ici. */
  .showcase-hero{min-height:0;display:flex;flex-direction:column}
  .showcase-hero-bg{position:relative;height:62vw;min-height:210px;max-height:310px;background-position:center 20%;order:1}
  .showcase-hero-overlay{display:none}
  .showcase-hero-content{min-height:0;display:block;padding:24px 0 18px;order:2;align-items:center;justify-content:flex-start}
  .showcase-hero-copy{width:100%;margin:0 auto;transform:translate3d(0,18px,0)}
  .showcase-partner-logos{width:100%;margin-bottom:14px}
  .showcase-partner-logos img{width:58px;height:58px}
  .showcase-kicker{font-size:15px}
  .showcase-hero h1{font-size:clamp(32px,10vw,44px);margin-bottom:13px}
  .showcase-description{font-size:13.5px}
  .showcase-intro{font-size:17px;margin:16px 0 20px}
  .showcase-scroll-btn{width:100%;justify-content:center}
  .public-how{padding:58px 0 30px}
  .public-how-head{margin-bottom:54px}
  .public-how-head h2{font-size:30px}
  .public-how-head>p:last-child{font-size:14px}
  .public-steps{gap:58px}
  /* Point 6 : les 3 cartes de confiance passent en pile verticale sur mobile. */
  .public-trust{grid-template-columns:1fr;gap:14px;margin:34px 0 4px}
  .trust-card{padding:22px 20px}
  .public-step,.public-step.step-right{grid-template-columns:1fr;gap:20px;min-height:0;text-align:left;transform:translate3d(0,50px,0)}
  .public-step.step-left{transform:translate3d(-45px,50px,0)}
  .public-step.step-right .public-step-media{order:0}
  .public-step.in-view{transform:translate3d(0,0,0)}
  .public-step-media{width:calc(100% - 22px);height:auto;aspect-ratio:1.2;margin:0 11px 0 0;border-width:7px}
  .public-step-badge{width:64px;height:64px;right:-13px;bottom:15px;border-width:5px}
  .public-step.step-right .public-step-badge{right:-13px;left:auto}
  .public-step-badge svg{width:27px;height:27px}
  .public-step-content{padding:4px 0 0}
  .public-step-number,.public-step.step-right .public-step-number{position:absolute;top:-22px;right:0;left:auto;font-size:62px}
  .public-step-content h3{font-size:25px;margin-bottom:8px}
  .public-step-content>p:not(.how-step-eyebrow){font-size:15px;line-height:1.55}
  .public-step:not(:last-child)::after{display:none}
  /* Point 2 : le conteneur est déjà en flux normal (flexbox colonne centrée) grâce au
     bloc desktop ci-dessus — il suffit d'ajuster les espacements/tailles pour mobile.
     Ordre garanti par le flux du DOM : titre → texte → bouton → slogan, toujours centrés,
     sans jamais se chevaucher, quelle que soit la largeur entre 320px et 480px. */
  /* Correction : sur mobile, la carte redevient une colonne pour empiler le
     contenu puis le slogan comme avant (position d'origine conservée). */
  .public-final-cta{margin-top:56px;min-height:0;padding:34px 20px 30px;border-radius:22px;flex-direction:column}
  .public-final-cta-content{gap:13px;max-width:100%}
  .public-final-cta h2{font-size:22px;line-height:1.2}
  .public-final-cta p{font-size:13.5px;max-width:320px}
  .public-login-cta{width:100%;max-width:320px;min-width:0;height:50px}
  /* Correction : position mobile inchangée (étiquette oblique désactivée ici) --
     le slogan reste centré sous le bouton, dans le flux, comme avant cette correction. */
  .public-final-motto{position:static;transform:none;text-align:center;max-width:none;top:auto;right:auto;font-size:19px;margin:2px 0 0}
  .public-final-motto br{display:none}
  .rocket-launch{left:2%;bottom:17px;width:80px;height:97px}
  .rocket-smoke{left:0;bottom:0;width:104px;height:34px}
  .public-final-cta.launch .rocket-launch{animation-name:rocketTakeoffMobile}
}
@keyframes rocketTakeoffMobile{0%{transform:translate3d(0,0,0) scale(.82);opacity:1}25%{transform:translate3d(45px,-18px,0) scale(.82);opacity:1}50%{transform:translate3d(130px,-45px,0) scale(.80);opacity:1}75%{transform:translate3d(245px,-78px,0) scale(.77);opacity:1}100%{transform:translate3d(380px,-120px,0) scale(.74);opacity:.92}}


/* =====================================================================
   VITRINE INE – UAC — bloc public sous les 6 étapes
   Le visuel est utilisé tel quel ; l'animation porte uniquement sur le cadre.
   ===================================================================== */
.public-ine-vitrine{
  position:relative;
  z-index:2;
  width:100%;
  margin:72px auto 10px;
  opacity:0;
  transform:translate3d(0,54px,0) scale(.985);
  transition:opacity .9s cubic-bezier(.16,.8,.3,1),transform 1s cubic-bezier(.16,.8,.3,1);
}
.public-ine-vitrine.in-view{opacity:1;transform:translate3d(0,0,0) scale(1)}
.public-ine-vitrine-frame{
  position:relative;
  width:100%;
  overflow:hidden;
  border-radius:28px;
  background:#fff;
  box-shadow:0 24px 55px rgba(31,73,92,.14);
  border:1px solid rgba(31,111,202,.08);
  isolation:isolate;
  line-height:0;
}
.public-ine-vitrine-frame::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.7);
}
.public-ine-vitrine-frame img{
  display:block;
  width:100%;
  height:auto;
  max-width:100%;
  object-fit:cover;
}
/* Zone transparente au-dessus du bouton « En savoir plus » déjà présent dans l'image. */
.public-ine-vitrine-hotspot{
  position:absolute;
  left:3.9%;
  top:53.5%;
  width:13.8%;
  height:15.5%;
  border-radius:999px;
  z-index:4;
  cursor:pointer;
  background:transparent;
  text-decoration:none;
}
.public-ine-vitrine-hotspot:focus-visible{
  outline:3px solid #1269c7;
  outline-offset:4px;
}
.public-ine-vitrine-frame:hover{
  box-shadow:0 30px 65px rgba(31,73,92,.18);
  transition:box-shadow .3s ease;
}

@media (prefers-reduced-motion:reduce){
  .public-ine-vitrine{opacity:1;transform:none;transition:none}
}

@media (max-width:720px){
  .public-ine-vitrine{margin:48px auto 6px}
  .public-ine-vitrine-frame{border-radius:20px}
  .public-ine-vitrine-hotspot{left:4%;top:53%;width:19%;height:18%}
}

/* =====================================================================
   PRÉSENTATION DÉTAILLÉE INE – UAC — PAGE PUBLIQUE PLEIN ÉCRAN
   Ouverture depuis la vitrine, fermeture par X / Échap, retour à l'accueil public.
   ===================================================================== */
.public-ine-details-page[hidden]{display:none!important}
.public-ine-details-page{
  position:fixed;
  inset:0;
  z-index:1000;
  overflow-y:auto;
  overflow-x:hidden;
  background:
    radial-gradient(circle at 8% 8%,rgba(18,150,94,.08),transparent 28%),
    radial-gradient(circle at 92% 12%,rgba(18,105,199,.08),transparent 30%),
    #f7fafb;
  opacity:0;
  transform:translateY(24px);
  transition:opacity .24s ease,transform .3s cubic-bezier(.16,.8,.3,1);
  overscroll-behavior:contain;
}
.public-ine-details-page.is-open{opacity:1;transform:none}
.public-ine-details-page-inner{
  width:min(1360px,92%);
  margin:0 auto;
  padding:88px 0 48px;
}
.public-ine-details-close{
  position:fixed;
  top:22px;
  right:22px;
  z-index:1010;
  width:48px;
  height:48px;
  border:1px solid rgba(31,111,202,.14);
  border-radius:50%;
  background:rgba(255,255,255,.94);
  color:#203149;
  display:grid;
  place-items:center;
  cursor:pointer;
  box-shadow:0 10px 30px rgba(28,55,69,.14);
  backdrop-filter:blur(10px);
  transition:transform .18s ease,background .18s ease,color .18s ease,box-shadow .18s ease;
}
.public-ine-details-close:hover{transform:rotate(90deg) scale(1.04);background:#fff;color:#12965e;box-shadow:0 14px 34px rgba(28,55,69,.2)}
.public-ine-details-close:active{transform:scale(.92) rotate(90deg)}
.public-ine-details-close svg{width:22px;height:22px;stroke-width:2.4}
body.public-ine-page-open{overflow:hidden}
.public-ine-vitrine-hotspot{transition:transform .16s ease,filter .16s ease}
.public-ine-vitrine-hotspot:hover{filter:drop-shadow(0 4px 7px rgba(18,150,94,.2))}
.public-ine-vitrine-hotspot.is-pressed{transform:scale(.94)}

/* =====================================================================
   PRÉSENTATION DÉTAILLÉE INE – UAC
   Ouverture depuis la vitrine publique, avec apparition progressive.
   ===================================================================== */
.public-ine-details-page{
  position:relative;
  margin:78px auto 8px;
  padding:72px 0 18px;
  scroll-margin-top:24px;
  opacity:0;
  transform:translateY(46px);
  transition:opacity .8s cubic-bezier(.16,.8,.3,1),transform .9s cubic-bezier(.16,.8,.3,1);
}
.public-ine-details-page.in-view{opacity:1;transform:translateY(0)}
.public-ine-details-page::before{
  content:"";position:absolute;left:50%;top:0;transform:translateX(-50%);
  width:96px;height:4px;border-radius:999px;
  background:linear-gradient(90deg,#12965e,#1269c7);
}
.public-ine-details-head{text-align:center;max-width:920px;margin:0 auto 38px}
.public-ine-details-head .eyebrow{margin:0 0 6px;color:#1269c7;font-size:14px;font-weight:800}
.public-ine-details-head h2{margin:0;color:#203149;font-size:clamp(32px,4vw,46px);letter-spacing:-.035em;line-height:1.08}
.public-ine-details-head>p:not(.eyebrow){margin:8px 0 22px;color:#12965e;font-weight:800;font-size:17px}
.public-ine-details-intro{display:grid;grid-template-columns:1fr 1fr;gap:20px;text-align:left}
.public-ine-details-intro p{margin:0;padding:20px 22px;background:#fff;border:1px solid rgba(31,111,202,.10);border-radius:18px;color:#617084;font-size:14px;line-height:1.7;box-shadow:0 12px 28px rgba(28,55,69,.06)}
.public-ine-info-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:22px}
.public-ine-info-card{background:#fff;border:1px solid rgba(31,111,202,.10);border-radius:22px;padding:26px;box-shadow:0 14px 34px rgba(28,55,69,.07);display:grid;grid-template-columns:48px 1fr;column-gap:16px;align-items:start}
.public-ine-info-card.public-ine-info-wide{grid-column:1/-1}
.public-ine-info-card h3{margin:0 0 9px;color:#203149;font-size:20px;line-height:1.25}
.public-ine-info-card p{margin:0 0 10px;color:#617084;font-size:13.5px;line-height:1.65}
.public-ine-info-card p:last-child{margin-bottom:0}
.public-ine-info-card>h3,.public-ine-info-card>p,.public-ine-info-card>ul,.public-ine-info-card>.public-ine-tags,.public-ine-info-card>.public-ine-note{grid-column:2}
.public-ine-info-icon{width:48px;height:48px;border-radius:15px;display:grid;place-items:center}
.public-ine-info-icon.green{background:#e6f6ee;color:#078a56}
.public-ine-info-icon.blue{background:#e8f1fc;color:#1269c7}
.public-ine-info-icon svg{width:24px;height:24px}
.public-ine-info-card ul{list-style:none;margin:2px 0 0;padding:0;display:grid;gap:13px}
.public-ine-info-card li{padding-left:14px;border-left:3px solid #12965e}
.public-ine-info-card li strong{display:block;color:#203149;font-size:13.5px;margin-bottom:2px}
.public-ine-info-card li span{display:block;color:#617084;font-size:12.5px;line-height:1.5}
.public-ine-tags{display:flex;flex-wrap:wrap;gap:7px;margin:4px 0 10px}
.public-ine-tags span{padding:7px 10px;border-radius:999px;background:#f0f8f5;color:#087c4b;font-size:11.5px;font-weight:700}
.public-ine-note{font-weight:700!important;color:#1269c7!important}
.public-ine-missions{margin-top:54px}
.public-ine-subhead{text-align:center;margin-bottom:22px}
.public-ine-subhead .eyebrow{margin:0 0 4px;color:#12965e;font-size:13px;font-weight:800}
.public-ine-subhead h3{margin:0;color:#203149;font-size:28px}
.public-ine-mission-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.public-ine-mission-grid article{position:relative;background:#fff;border:1px solid rgba(31,111,202,.10);border-radius:18px;padding:20px 16px 18px;min-height:245px;box-shadow:0 10px 26px rgba(28,55,69,.06);overflow:hidden}
.public-ine-mission-grid article>span{position:absolute;right:12px;top:7px;font-size:42px;font-weight:900;color:rgba(18,105,199,.08)}
.public-ine-mission-grid article>svg{width:24px;height:24px;color:#12965e;margin-bottom:12px}
.public-ine-mission-grid h4{margin:0 0 7px;color:#203149;font-size:14px;line-height:1.3}
.public-ine-mission-grid p{margin:0;color:#617084;font-size:11.8px;line-height:1.55}
.public-ine-contact{margin-top:30px;border-radius:22px;padding:26px 28px;background:linear-gradient(135deg,#eef8f4,#eef5fc);border:1px solid rgba(18,105,199,.10);display:flex;align-items:center;justify-content:space-between;gap:24px}
.public-ine-contact .eyebrow{margin:0 0 5px;color:#1269c7;font-size:12px;font-weight:800}
.public-ine-contact h3{margin:0 0 7px;color:#203149;font-size:20px}
.public-ine-contact p{margin:0;color:#617084;font-size:13px;line-height:1.55}
.public-ine-contact-items{display:flex;flex-direction:column;gap:10px;color:#203149;font-size:13px;font-weight:700;white-space:nowrap}
.public-ine-contact-items span{display:flex;align-items:center;gap:8px}
.public-ine-contact-items svg{width:18px;height:18px;color:#12965e}
@media (max-width:980px){
  .public-ine-mission-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:720px){
  .public-ine-details-page{margin:52px auto 0;padding:58px 0 8px}
  .public-ine-details-intro,.public-ine-info-grid{grid-template-columns:1fr}
  .public-ine-info-card.public-ine-info-wide{grid-column:auto}
  .public-ine-info-card{grid-template-columns:42px 1fr;padding:20px}
  .public-ine-info-icon{width:42px;height:42px;border-radius:13px}
  .public-ine-info-card h3{font-size:18px}
  .public-ine-info-card p{font-size:13px}
  .public-ine-mission-grid{grid-template-columns:1fr}
  .public-ine-mission-grid article{min-height:0}
  .public-ine-contact{display:block;padding:22px}
  .public-ine-contact-items{margin-top:18px;white-space:normal}
}
@media (prefers-reduced-motion:reduce){.public-ine-details-page{opacity:1;transform:none;transition:none}}



/* =====================================================================
   ANIMATION PREMIUM �� PAGE PUBLIQUE INE
   Révélation progressive, sobre et institutionnelle.
   ===================================================================== */
.public-ine-details-page::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
  background:
    radial-gradient(circle at 18% 42%,rgba(18,150,94,.045),transparent 24%),
    radial-gradient(circle at 82% 62%,rgba(18,105,199,.045),transparent 26%);
  /* Phase 6 (section 15) : boucle permanente supprimee, le halo reste fixe. */
}
@keyframes ineAmbientDrift{
  from{transform:translate3d(-10px,0,0) scale(1)}
  to{transform:translate3d(10px,-8px,0) scale(1.015)}
}
.public-ine-details-head,
.public-ine-details-intro p,
.public-ine-info-card,
.public-ine-subhead,
.public-ine-mission-grid article,
.public-ine-contact{
  opacity:0;
  transform:translate3d(0,34px,0) scale(.985);
  transition:
    opacity .72s cubic-bezier(.16,.8,.3,1),
    transform .78s cubic-bezier(.16,.8,.3,1),
    box-shadow .28s ease,
    border-color .28s ease;
  will-change:opacity,transform;
}
.public-ine-details-head.in-view,
.public-ine-details-intro p.in-view,
.public-ine-info-card.in-view,
.public-ine-subhead.in-view,
.public-ine-mission-grid article.in-view,
.public-ine-contact.in-view{
  opacity:1;
  transform:none;
}
.public-ine-details-intro p:nth-child(2).in-view{transition-delay:.10s}
.public-ine-info-card:nth-child(1).in-view{transition-delay:.05s}
.public-ine-info-card:nth-child(2).in-view{transition-delay:.10s}
.public-ine-info-card:nth-child(3).in-view{transition-delay:.15s}
.public-ine-info-card:nth-child(4).in-view{transition-delay:.20s}
.public-ine-mission-grid article:nth-child(1).in-view{transition-delay:.02s}
.public-ine-mission-grid article:nth-child(2).in-view{transition-delay:.07s}
.public-ine-mission-grid article:nth-child(3).in-view{transition-delay:.12s}
.public-ine-mission-grid article:nth-child(4).in-view{transition-delay:.17s}
.public-ine-mission-grid article:nth-child(5).in-view{transition-delay:.22s}
.public-ine-info-card:hover,
.public-ine-mission-grid article:hover{
  transform:translateY(-5px)!important;
  box-shadow:0 20px 42px rgba(28,55,69,.11);
  border-color:rgba(18,105,199,.16);
}
.public-ine-info-icon,
.public-ine-mission-grid article>svg{
  transition:transform .45s cubic-bezier(.16,.8,.3,1);
}
.public-ine-info-card:hover .public-ine-info-icon{transform:rotate(-4deg) scale(1.06)}
.public-ine-mission-grid article:hover>svg{transform:translateY(-3px) scale(1.08)}
.public-ine-details-close{
  transition:transform .25s cubic-bezier(.16,.8,.3,1),background .2s ease,color .2s ease,box-shadow .2s ease;
}
.public-ine-details-close::after{
  content:"";
  position:absolute;
  inset:-7px;
  border-radius:50%;
  border:1px solid rgba(18,150,94,.12);
  opacity:0;
  transform:scale(.8);
  transition:opacity .25s ease,transform .25s ease;
}
.public-ine-details-close:hover::after{opacity:1;transform:scale(1)}
@media(prefers-reduced-motion:reduce){
  .public-ine-details-page::after{animation:none}
  .public-ine-details-head,.public-ine-details-intro p,.public-ine-info-card,.public-ine-subhead,.public-ine-mission-grid article,.public-ine-contact{opacity:1;transform:none;transition:none!important}
}

/* --- Surcharges de la page INE : ces règles priment sur les anciennes règles de contenu. --- */
.public-ine-details-page{
  position:fixed!important;
  inset:0!important;
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  padding:0!important;
  z-index:1000!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  box-sizing:border-box;
  background:
    radial-gradient(circle at 8% 8%,rgba(18,150,94,.08),transparent 28%),
    radial-gradient(circle at 92% 12%,rgba(18,105,199,.08),transparent 30%),
    #f7fafb;
}
.public-ine-details-page-inner{width:min(1360px,92%);margin:0 auto;padding:88px 0 48px}
.public-ine-details-page::before{position:absolute;left:50%;top:74px;z-index:0}
.public-ine-details-page-inner{position:relative;z-index:1}
@media(max-width:720px){
  .public-ine-details-page-inner{width:min(100% - 24px,680px);padding:82px 0 34px}
  .public-ine-details-close{top:14px;right:14px;width:44px;height:44px}
}
@media(prefers-reduced-motion:reduce){
  .public-ine-details-page,.public-ine-vitrine-hotspot{transition:none!important}
}

/* ===================================================================
   POINT 1 - UNIFICATION DES DEUX HEROS (vitrine publique + accueil connecte)
   -------------------------------------------------------------------
   Ce bloc est volontairement place en fin de fichier : il constitue la
   reference unique du positionnement des heros et neutralise les regles
   historiques dispersees plus haut, sans avoir a les supprimer une a une.

   Reperes mesures sur assets/hero-students.jpg (1200x800) :
     tetes ~10 %, chemises ~14 -> 48 %, ceinture ~50 %, pantalons ~52 -> 80 %.
   Le bloc de contenu doit donc toujours demarrer sous la ligne de ceinture.
   =================================================================== */
:root{
  --hero-h:740px;                          /* hauteur commune aux deux heros (desktop) */
  --hero-photo-h:clamp(250px,68vw,340px);  /* bandeau photo mobile */
}

/* ---------------- Desktop / tablette (>= 768 px) ---------------- */
@media (min-width:768px){
  .showcase-hero,
  .app-view .hero{
    position:relative;display:block;
    height:var(--hero-h);min-height:var(--hero-h);
    overflow:hidden;background:#eef7f3;padding:0;
  }
  /* Meme image, meme cadrage, meme echelle sur les deux heros. */
  .showcase-hero-bg,
  .app-view .hero .hero-bg{
    position:absolute;inset:0;width:auto;height:auto;min-height:0;max-height:none;
    border-radius:0;order:initial;transform:none;
    background-image:url('hero-students.jpg');
    background-size:cover;background-position:center 46%;background-repeat:no-repeat;
  }
  /* Degrade franc : transparent sur les visages, tres dense sous la ceinture,
     pour garantir la lisibilite du texte blanc sans assombrir le haut. */
  .showcase-hero-overlay,
  .app-view .hero .hero-overlay{
    display:block;position:absolute;inset:0;
    background:linear-gradient(180deg,
      rgba(6,44,29,0) 0%,
      rgba(6,44,29,0) 30%,
      rgba(6,44,29,.26) 42%,
      rgba(6,44,29,.68) 52%,
      rgba(6,44,29,.88) 62%,
      rgba(6,44,29,.95) 78%,
      rgba(6,44,29,.97) 100%);
  }
  .showcase-hero-content,
  .app-view .hero .hero-content{
    position:relative;z-index:2;
    height:var(--hero-h);min-height:var(--hero-h);
    display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
    gap:10px;padding:0 0 26px;
  }
  .showcase-hero-copy,
  .app-view .hero .hero-copy{
    width:min(700px,92%);margin:0 auto;text-align:center;max-width:none;
  }
  /* Densite reduite : le bloc doit tenir dans la bande "pantalon". */
  .showcase-partner-logos,
  .app-view .hero .partner-logos{
    display:flex;justify-content:center;align-items:center;
    width:auto;gap:26px;margin:0 auto 6px;
  }
  .showcase-partner-logos img{width:56px;height:56px}
  .app-view .hero .partner-logos figure{width:60px;height:52px;margin:0}
  .app-view .hero .partner-logos img{max-width:58px;max-height:52px}

  .showcase-kicker,
  .app-view .hero h2{margin:0 0 2px;font-size:15px;font-weight:600;color:rgba(255,255,255,.9);text-shadow:0 2px 10px rgba(0,0,0,.35)}
  .showcase-hero h1,
  .app-view .hero h1{margin:0 0 8px;font-size:clamp(34px,3.6vw,50px);line-height:1.02;letter-spacing:-.04em;text-shadow:0 4px 18px rgba(0,0,0,.35)}
  .showcase-description,
  .app-view .hero .hero-description{margin:0 0 4px;font-size:13px;line-height:1.45;color:rgba(255,255,255,.88);text-shadow:0 2px 10px rgba(0,0,0,.35)}
  .showcase-description strong,
  .app-view .hero .hero-description strong{color:#fff}
  .showcase-intro,
  .app-view .hero .hero-intro{margin:6px 0 10px;font-size:16.5px;line-height:1.35;font-weight:700;color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.35)}
  .showcase-hero .discover-btn,
  .app-view .hero .discover-btn{margin:0 auto;width:auto;padding:11px 22px}
  .app-view .hero .stats-card{
    position:relative;right:auto;bottom:auto;left:auto;
    width:min(880px,96%);min-height:0;margin:2px auto 0;
  }
  /* Stats-card compactee : elle doit tenir dans la bande pantalon avec le reste. */
  .app-view .hero .stats-card>div{padding:8px 12px;gap:9px;min-height:0}
  .app-view .hero .stat-icon{width:28px;height:28px}
  .app-view .hero .stat-icon svg,.app-view .hero .stat-icon i{width:16px;height:16px}
  .app-view .hero .stats-card p{font-size:10px}
  .app-view .hero .stats-card strong{font-size:12.5px;margin-top:2px}
}

/* ---------------- Mobile (< 768 px) ----------------
   Seul le titre reste incruste sur la photo, cale en bas du bandeau donc a
   hauteur de hanche. Logos, description, accroche, bouton et stats-card
   sortent de l'image et passent sur le fond de page normal. */
@media (max-width:767px){
  .showcase-hero,
  .app-view .hero{
    position:relative;display:block;height:auto;min-height:0;
    overflow:hidden;background:var(--background);padding:0 0 20px;
  }
  .showcase-hero-bg,
  .app-view .hero .hero-bg{
    position:absolute;top:0;left:0;right:0;bottom:auto;
    width:auto;height:var(--hero-photo-h);min-height:0;max-height:none;
    border-radius:0;order:initial;transform:none;
    background-image:url('hero-students.jpg');
    background-size:cover;background-position:center 36%;background-repeat:no-repeat;
  }
  .showcase-hero-overlay,
  .app-view .hero .hero-overlay{
    display:block;position:absolute;top:0;left:0;right:0;bottom:auto;
    height:var(--hero-photo-h);
    background:linear-gradient(180deg,
      rgba(6,44,29,0) 0%,
      rgba(6,44,29,0) 38%,
      rgba(6,44,29,.34) 54%,
      rgba(6,44,29,.74) 70%,
      rgba(6,44,29,.93) 88%,
      rgba(6,44,29,.96) 100%);
  }
  .showcase-hero-content,
  .app-view .hero .hero-content{
    position:relative;z-index:2;display:block;
    height:auto;min-height:0;
    padding:0 20px;gap:0;
  }
  /* position:static indispensable : .hero-copy est en position:relative plus haut
     dans la feuille, ce qui ferait ancrer le titre absolu sur la copie et non sur
     le haut du hero (le titre retombait alors sous la photo). */
  .showcase-hero-copy,
  .app-view .hero .hero-copy{
    width:100%;max-width:none;margin:0;text-align:center;position:static;
    /* Colonne flex : permet de remonter le titre en premier (order:-1) pour qu'il
       occupe la bande photo, le reste du bloc suivant naturellement en dessous.
       On neutralise aussi l'animation portee par .hero-copy : sur mobile la
       revelation est assuree par .hero-logos / .hero-title-group / .hero-rest. */
    display:flex;flex-direction:column;
    transform:none;opacity:1;transition:none;will-change:auto;filter:none}

  /* Titre incruste sur le bas de la photo (zone hanche/pantalon). */
  /* Titre incruste sur la photo : bloc en flux remonte en tete, de la hauteur
     exacte du bandeau photo, texte cale en bas donc a hauteur de hanche. */
  .hero-title-group{
    order:-1;position:relative;z-index:3;
    min-height:var(--hero-photo-h);
    margin:0 -20px 16px;padding:0 20px 14px;
    display:flex;flex-direction:column;justify-content:flex-end;
    text-align:center;pointer-events:none;
  }
  .showcase-kicker,
  .app-view .hero h2{margin:0 0 2px;font-size:14.5px;font-weight:600;color:rgba(255,255,255,.92);text-shadow:0 2px 10px rgba(0,0,0,.4)}
  .showcase-hero h1,
  .app-view .hero h1{margin:0;font-size:clamp(30px,9vw,40px);line-height:1.04;letter-spacing:-.035em;text-shadow:0 4px 16px rgba(0,0,0,.4)}

  /* Hors photo : couleurs de texte normales, plus de text-shadow. */
  .showcase-partner-logos,
  .app-view .hero .partner-logos{
    display:flex;justify-content:center;align-items:center;
    width:100%;gap:26px;margin:0 auto 14px;
  }
  .showcase-partner-logos img{width:56px;height:56px}
  .app-view .hero .partner-logos figure{width:60px;height:54px;margin:0}
  .app-view .hero .partner-logos img{max-width:58px;max-height:54px}
  .hero-rest{text-align:center}
  .showcase-hero .hero-rest .showcase-description,
  .app-view .hero .hero-rest .hero-description{margin:0 0 10px;font-size:13.5px;line-height:1.5;color:var(--text-secondary);text-shadow:none}
  .showcase-hero .hero-rest .showcase-description strong,
  .app-view .hero .hero-rest .hero-description strong{color:var(--text-primary)}
  .showcase-hero .hero-rest .showcase-intro,
  .app-view .hero .hero-rest .hero-intro{margin:12px 0 16px;font-size:16px;line-height:1.4;font-weight:700;color:var(--primary);text-shadow:none}
  .hero-rest .discover-btn{width:100%;justify-content:center;padding:13px 18px;margin:0}
  .app-view .hero .stats-card{
    position:relative;left:auto;right:auto;bottom:auto;
    width:100%;margin:16px 0 0;grid-template-columns:1fr 1fr;
    border-radius:var(--radius-md);transform:none;
  }
}

/* ---------------- Apparition progressive (les deux heros, les deux tailles) ----------------
   Les trois sous-groupes sont observes en JS (IntersectionObserver) ; le
   decalage est porte ici pour eviter tout timing code en dur cote script. */
.hero-logos,.hero-title-group,.hero-rest{
  opacity:0;transform:translate3d(0,18px,0);
  transition:opacity .7s cubic-bezier(.16,.8,.3,1),transform .8s cubic-bezier(.16,.8,.3,1);
}
.hero-title-group{transition-delay:.08s}
.hero-rest{transition-delay:.16s}
.hero-logos.in-view,.hero-title-group.in-view,.hero-rest.in-view{opacity:1;transform:translate3d(0,0,0)}
@media (prefers-reduced-motion:reduce){
  .hero-logos,.hero-title-group,.hero-rest{opacity:1;transform:none;transition:none}
}

/* ===================================================================
   POINT 3 - BARRE DE NAVIGATION MOBILE : 6 ICONES, UNE SEULE LIGNE
   -------------------------------------------------------------------
   Aucune couleur n'est touchee ici (fond de barre, icones, etat actif restent
   ceux definis plus haut) : on ne modifie que la repartition et les libelles.
   Les libelles texte sont retires et chaque lien devient une colonne de largeur
   egale (flex:1) pour supprimer definitivement le defilement horizontal.
   =================================================================== */
@media (max-width:767px){
  .main-nav{
    display:flex;flex-wrap:nowrap;justify-content:space-between;align-items:center;
    width:100%;gap:0;overflow:visible;-webkit-overflow-scrolling:auto;
  }
  .main-nav a{
    flex:1 1 0;min-width:0;width:auto;
    display:flex;align-items:center;justify-content:center;
    padding:11px 0;min-height:48px;         /* cible tactile confortable */
    font-size:0;                            /* neutralise tout texte residuel */
  }
  /* Le libelle est masque, mais les badges de notification restent visibles. */
  .main-nav a>span:not([class]){display:none}
  .main-nav .nav-icon{width:23px;height:23px;flex:none}
}

/* ===================== POINT 2 — COHÉRENCE VISUELLE DU FIL CONNECTÉ =====================
   Objectif : le fil connecté doit parler le même langage graphique que la
   vitrine publique (pastilles colorées, icônes en cercle coloré, états vides
   chaleureux). Aucun changement de structure ni de palette : on réutilise les
   variables existantes et les 5 couleurs de type déjà définies plus haut
   (vert primaire, orange annonce, bleu ressource, violet événement, sarcelle
   opportunité). ==================================================== */

/* ---------- Bannière compacte sous le header ---------- */
/* Pourquoi : sans elle, le fil enchaîne directement des cartes blanches sous
   un header blanc. La photo de la vitrine, en bandeau court, rétablit le lien
   visuel sans concurrencer le hero. */
.feed-ribbon{
  position:relative;
  overflow:hidden;
  border-radius:var(--radius-md);
  margin:0 0 14px;
  min-height:92px;
  display:flex;
  align-items:flex-end;
  background:linear-gradient(135deg,#0b5c3b 0%,#087c4b 100%);
  background-image:linear-gradient(90deg,rgba(6,44,29,.92) 0%,rgba(6,44,29,.72) 46%,rgba(6,44,29,.34) 100%),url("hero-students.jpg");
  background-size:cover,cover;
  background-position:center,center 34%;
  box-shadow:var(--shadow-xs);
}
.feed-ribbon-copy{ padding:14px 16px; }
.feed-ribbon-eyebrow{
  margin:0 0 3px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:rgba(255,255,255,.82);
}
.feed-ribbon-title{
  margin:0;
  font-size:15.5px;
  font-weight:800;
  line-height:1.3;
  color:#fff;
  text-shadow:0 1px 6px rgba(6,44,29,.45);
}
@media (max-width:767px){
  .feed-ribbon{ min-height:78px; }
  .feed-ribbon-title{ font-size:14px; }
}

/* ---------- Badge de type à fond coloré ---------- */
/* Pourquoi : la ligne « type · date » en petit gris ne permettait pas de
   repérer un type d'un coup d'œil. Le badge reprend exactement la couleur du
   liseret gauche de la carte, donc aucune couleur nouvelle. */
.feed-meta-line{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  margin-top:2px;
}
.feed-type-badge{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:2px 9px 2px 7px;
  border-radius:var(--radius-full);
  font-size:11px;
  font-weight:800;
  letter-spacing:.02em;
  line-height:1.7;
  background:var(--info-bg);
  color:var(--text-secondary);
  border:1px solid transparent;
}
.feed-date{ font-size:.76rem; color:var(--text-tertiary); font-weight:600; }

.feed-card.feed-post .feed-type-badge{ background:var(--accent-light); color:#0b5c3b; border-color:rgba(8,124,75,.22); }
.feed-card.feed-announcement .feed-type-badge{ background:#FBF0E1; color:#8F5A15; border-color:rgba(201,130,47,.26); }
.feed-card.feed-resource .feed-type-badge{ background:#E6F1FB; color:#0F5FA6; border-color:rgba(18,105,199,.22); }
.feed-card.feed-event .feed-type-badge{ background:#F1EBFA; color:#553C86; border-color:rgba(122,90,168,.26); }
.feed-card.feed-opportunity .feed-type-badge{ background:#E3F4F4; color:#0B6A6C; border-color:rgba(15,139,141,.26); }

/* ---------- Avatar de carte : icône en cercle coloré ---------- */
/* Pourquoi : harmoniser avec .quick-card et .stat-icon, où l'icône vit déjà
   dans un cercle teinté. Le cercle prend la teinte du type ; seules les
   publications gardent les initiales de l'auteur sur fond neutre. */
.feed-card .feed-avatar{ font-size:1.05rem; }
.feed-card.feed-announcement .feed-avatar{ background:#FBF0E1; border-color:rgba(201,130,47,.3); }
.feed-card.feed-resource .feed-avatar{ background:#E6F1FB; border-color:rgba(18,105,199,.28); }
.feed-card.feed-event .feed-avatar{ background:#F1EBFA; border-color:rgba(122,90,168,.3); }
.feed-card.feed-opportunity .feed-avatar{ background:#E3F4F4; border-color:rgba(15,139,141,.3); }
.feed-card.feed-post .feed-avatar{ background:var(--accent-light); color:#0b5c3b; border-color:rgba(8,124,75,.24); }

/* ---------- Composer : icônes en cercle coloré ---------- */
/* Pourquoi : « Que souhaitez-vous publier ? » était une rangée de boutons
   plats ; le cercle coloré reprend le langage des accès rapides et rend le
   choix du type immédiatement lisible. */
.composer-type{ align-items:center; }
.composer-type-icon{
  display:inline-grid;
  place-items:center;
  width:28px; height:28px;
  flex:0 0 28px;
  border-radius:var(--radius-full);
  font-size:.92rem;
  line-height:1;
  background:var(--info-bg);
  border:1px solid transparent;
  transition:transform .18s ease;
}
.composer-type:hover .composer-type-icon{ transform:scale(1.08); }
.composer-type[data-post-type="resource"] .composer-type-icon{ background:#E6F1FB; border-color:rgba(18,105,199,.22); }
.composer-type[data-post-type="announcement"] .composer-type-icon{ background:#FBF0E1; border-color:rgba(201,130,47,.26); }
.composer-type[data-post-type="event"] .composer-type-icon{ background:#F1EBFA; border-color:rgba(122,90,168,.26); }
.composer-type[data-post-type="post"] .composer-type-icon{ background:var(--accent-light); border-color:rgba(8,124,75,.22); }
.composer-type[data-post-type="opportunity"] .composer-type-icon{ background:#E3F4F4; border-color:rgba(15,139,141,.26); }
@media (prefers-reduced-motion:reduce){
  .composer-type:hover .composer-type-icon{ transform:none; }
}

/* ---------- États vides chaleureux ---------- */
/* Pourquoi : un état vide gris ressemble à une panne. Icône en cercle vert,
   titre lisible, phrase qui explique ce qui apparaîtra ici. */
.empty-warm{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:6px;
  padding:18px 12px 14px;
}
.empty-warm-icon{
  display:grid;
  place-items:center;
  width:44px; height:44px;
  border-radius:var(--radius-full);
  background:var(--accent-light);
  border:1px solid rgba(8,124,75,.18);
  color:var(--primary);
  margin-bottom:2px;
}
.empty-warm-icon i,.empty-warm-icon svg{ width:21px; height:21px; }
.empty-warm strong{ font-size:.95rem; color:var(--text-primary); font-weight:800; }
.empty-warm p{ margin:0; font-size:.83rem; line-height:1.55; color:var(--text-secondary); max-width:34ch; }

/* ---------- Harmonisation « icône en cercle coloré » ---------- */
/* Les titres de « Ce qu'il ne faut pas manquer » utilisent la même pastille
   ronde que les cartes du fil et les accès rapides. */
.highlight-card h3 i,.highlight-card h3 svg{
  box-sizing:border-box;
  width:30px; height:30px;
  padding:6px;
  border-radius:var(--radius-full);
  background:var(--accent-light);
  color:var(--primary);
}

/* ---------- Rythme typographique ---------- */
/* Pourquoi : tout le fil était au même niveau de gris. On renforce la
   hiérarchie surtitre → titre → corps, comme sur la vitrine. */
.feed-head{ margin:2px 0 12px; }
.feed-head .eyebrow{ font-size:11.5px; letter-spacing:.07em; text-transform:uppercase; }
.feed-head h2{ margin:0; font-size:21px; font-weight:800; line-height:1.25; letter-spacing:-.01em; }
.section-mini-title{ display:flex; align-items:center; gap:9px; }
.section-mini-title::before{
  content:"";
  width:4px; height:17px;
  border-radius:var(--radius-full);
  background:var(--primary);
  flex:0 0 4px;
}
.feed-meta strong{ font-weight:800; letter-spacing:-.005em; }
.feed-tagline{ color:var(--text-tertiary); }
@media (max-width:767px){
  .feed-head h2{ font-size:18.5px; }
}


/* ===================== POINT 2 — LISIBILITÉ DU BOUTON PRINCIPAL =====================
   Pourquoi : sur mobile, le bouton « Découvrir la plateforme » sort désormais de
   l'image (Point 1.b) et héritait de la couleur de texte du bloc environnant,
   d'où un vert foncé sur fond vert. On reprend explicitement la couleur de
   texte dédiée aux boutons pleins, sans changer la palette. */
.showcase-hero .discover-btn,
.showcase-hero .hero-rest .discover-btn,
.app-view .hero .discover-btn,
.app-view .hero .hero-rest .discover-btn{ color:var(--text-on-primary); text-shadow:none; }
.showcase-hero .discover-btn span,
.app-view .hero .discover-btn span{ color:inherit; }
/* Corrections ponctuelles — Point 1 : le contraste doit aussi tenir au survol/focus,
   pas seulement à l'état par défaut. */
.showcase-hero .discover-btn:hover,
.showcase-hero .discover-btn:focus-visible,
.app-view .hero .discover-btn:hover,
.app-view .hero .discover-btn:focus-visible{ color:var(--text-on-primary); }

/* ===================== POINT 8 — GUIDE D'INSTALLATION DE LA PWA =====================
   Même gabarit visuel que .confirm-modal (cohérence), avec des ajouts propres
   au choix de plateforme et à la liste d'étapes numérotées. Jamais bloquant :
   aucune règle ici n'empêche la fermeture. */
.install-guide-dialog{ text-align:left; }
.install-guide-dialog h2{ text-align:center; }
.install-guide-icon{ background:var(--accent-light); color:var(--primary); }
.install-guide-intro{
  text-align:center;
  color:var(--text-secondary);
  font-size:.88rem;
  line-height:1.55;
  margin:0 0 18px;
}
.install-guide-choice{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-bottom:6px;
}
/* Point 8 (correctif) : [hidden] n'a qu'une specificite tres faible dans le
   style par defaut du navigateur ; la regle display:grid ci-dessus la
   ecrasait, donc le choix et les etapes restaient visibles en meme temps.
   On force explicitement display:none quand l'attribut hidden est present. */
.install-guide-choice[hidden]{ display:none; }
.install-guide-platform{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  padding:18px 10px;
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  background:var(--background);
  color:var(--text-primary);
  font-weight:700;
  font-size:.9rem;
  cursor:pointer;
  transition:border-color .18s ease,transform .18s ease,box-shadow .18s ease;
}
.install-guide-platform i,.install-guide-platform svg{ width:26px; height:26px; color:var(--primary); }
.install-guide-platform:hover{ border-color:var(--accent-line); transform:translateY(-2px); box-shadow:var(--shadow-xs); }
.install-guide-steps[hidden]{ display:none; }
.install-guide-back{
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:none;
  border:0;
  padding:0;
  margin-bottom:10px;
  color:var(--primary);
  font-weight:700;
  font-size:.82rem;
  cursor:pointer;
  box-shadow:none;
}
.install-guide-back i,.install-guide-back svg{ width:15px; height:15px; }
.install-guide-steps ol{
  margin:0;
  padding-left:22px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.install-guide-update-note{ margin-top:12px; font-size:.85rem; color:var(--text-tertiary); }
.install-guide-icon-note{ margin-top:8px; font-size:.85rem; color:var(--text-tertiary); background:var(--info-bg); border-radius:10px; padding:10px 12px; line-height:1.45; }
.install-guide-steps li{ font-size:.88rem; line-height:1.5; color:var(--text-primary); }
.install-guide-actions{
  flex-direction:column;
  align-items:stretch;
  gap:10px;
  margin-top:20px;
}
.install-guide-dismiss{
  display:flex;
  align-items:center;
  gap:7px;
  font-size:.8rem;
  color:var(--text-secondary);
  cursor:pointer;
}
.install-guide-dismiss input{ width:15px; height:15px; accent-color:var(--primary); }
.install-guide-actions .confirm-cancel{ width:100%; }
.install-guide-optional-actions{ display:flex; flex-direction:column; gap:10px; width:100%; }
.install-guide-optional-actions[hidden]{ display:none; }
.install-guide-mandatory-note{
  font-size:.82rem;
  color:var(--text-secondary);
  background:var(--accent-light);
  border-radius:10px;
  padding:10px 12px;
  margin:0;
  text-align:center;
}
.install-guide-mandatory-note[hidden]{ display:none; }
.install-guide-confirm{
  width:100%;
  background:var(--primary);
  color:#fff;
  border:none;
  border-radius:12px;
  padding:12px;
  font-weight:600;
  cursor:pointer;
}
.install-guide-confirm[hidden]{ display:none; }
.install-guide-confirm:hover{ opacity:.92; }
/* Mode obligatoire (juste apres l'inscription) : on retire toute affordance
   de fermeture libre pour que l'installation soit vraiment la premiere
   etape, avant de pouvoir faire quoi que ce soit d'autre dans l'app. */
.install-guide-modal.mandatory #installGuideClose{ display:none; }
.install-guide-modal.mandatory #installGuideBackdrop{ cursor:default; }

/* ---------- Carte "A propos" (Paramètres) ---------- */
.about-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:12px;
}
.about-actions .ghost-btn{ display:inline-flex; align-items:center; gap:8px; }
.about-actions .ghost-btn i,.about-actions .ghost-btn svg{ width:16px; height:16px; }
@media (max-width:480px){
  .about-actions{ flex-direction:column; }
  .about-actions .ghost-btn{ width:100%; justify-content:center; }
}

/* =====================================================================
   POINT 4 - PARAMETRES DU COMPTE
   Styles pour les cartes Informations du profil, Notifications,
   Confidentialite, Apparence et Session, plus les variables du theme
   sombre appliquees via la classe body.theme-dark.
   ===================================================================== */

.settings-readonly{ margin-bottom:16px; }
.settings-label{
  display:flex;
  flex-direction:column;
  gap:6px;
  font-size:.86rem;
  font-weight:600;
  color:var(--text-secondary);
}
.settings-label input{
  font:inherit;
  font-weight:400;
  color:var(--text-primary);
  padding:10px 12px;
  border:1px solid var(--border-strong);
  border-radius:var(--radius-sm);
  background:var(--surface);
}
.settings-label input:focus-visible{ outline:2px solid var(--primary); outline-offset:1px; }
.settings-optional{ font-weight:400; color:var(--text-tertiary); text-transform:none; letter-spacing:0; }

/* ---- Interrupteurs (notifications, confidentialite) ---- */
.settings-toggle-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:12px 0;
  border-bottom:1px solid var(--border);
}
.settings-toggle-row:last-child{ border-bottom:0; }
.settings-toggle-row-main{ padding-top:0; }
.settings-toggle-sub{ margin:2px 0 0; font-size:.78rem; color:var(--text-tertiary); font-weight:400; }
.settings-toggle-list{ transition:opacity var(--t-fast); }
.settings-toggle-list-disabled{ opacity:.5; }

.switch{ position:relative; display:inline-block; width:44px; height:26px; flex-shrink:0; }
.switch input{ position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; }
.switch-track{
  position:absolute; inset:0;
  background:var(--border-strong);
  border-radius:var(--radius-full);
  transition:background var(--t-fast);
}
.switch-track::before{
  content:"";
  position:absolute;
  width:20px; height:20px;
  left:3px; top:3px;
  background:var(--surface);
  border-radius:50%;
  box-shadow:var(--shadow-xs);
  transition:transform var(--t-fast);
}
.switch input:checked + .switch-track{ background:var(--primary); }
.switch input:checked + .switch-track::before{ transform:translateX(18px); }
.switch input:disabled + .switch-track{ cursor:not-allowed; }

.settings-privacy-note{ display:flex; align-items:flex-start; gap:8px; margin-top:14px; }
.settings-privacy-note i,.settings-privacy-note svg{ width:16px; height:16px; flex-shrink:0; margin-top:2px; color:var(--text-secondary); }

.form-info.error{ background:var(--error-bg); border-color:var(--error-border); color:var(--error-text); }
.form-info.ok{ background:var(--success-bg); border-color:var(--success-border); color:var(--success-text); }

/* ---- Apparence (clair / sombre / systeme) ---- */
.settings-theme-choice{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; margin-top:6px; }
.settings-theme-option{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  padding:14px 8px;
  border:1px solid var(--border-strong);
  border-radius:var(--radius-md);
  background:var(--surface);
  color:var(--text-secondary);
  font-size:.82rem;
  font-weight:700;
  cursor:pointer;
  transition:border-color var(--t-fast),background var(--t-fast),color var(--t-fast);
}
.settings-theme-option i,.settings-theme-option svg{ width:18px; height:18px; }
.settings-theme-option:hover{ border-color:var(--primary-line); background:var(--primary-light); }
.settings-theme-option.active{ border-color:var(--primary); background:var(--primary-light); color:var(--primary-dark); }
@media (max-width:480px){ .settings-theme-choice{ grid-template-columns:1fr; } }

/* =====================================================================
   Theme sombre (Point 4.4)
   On redefinit les variables de couleur sur body.theme-dark : comme tout
   le design system consomme deja ces variables (voir :root en tete de
   fichier), l'ensemble de l'interface bascule sans dupliquer les regles.
   Les couleurs de marque (--primary et associes) restent volontairement
   proches de l'original pour garder l'identite visuelle UAC/INE.
   ===================================================================== */
body.theme-dark{
  --background:#10161C;
  --surface:#1A2229;

  --text-primary:#EAF0F2;
  --text-secondary:#AAB8C2;
  --text-tertiary:#7C8B96;
  --text-on-primary:#FFFFFF;

  --border:#2A343C;
  --border-strong:#3A4650;

  --primary-light:#16352A;
  --primary-line:#2C5744;

  --success-bg:#132A22;
  --success-border:#2C5744;

  --error-bg:#2E1A1A;
  --error-border:#5A2E2E;

  --info-bg:#1A2530;
  --info-border:#2A343C;

  --accent:#5B9BE0;
  --accent-dark:#8FC1F2;
  --accent-light:#16283A;
  --accent-line:#2C4A66;

  --shadow-xs:0 1px 2px rgba(0,0,0,.35);
  --shadow-sm:0 4px 14px rgba(0,0,0,.4);
  --shadow-md:0 10px 30px rgba(0,0,0,.45);
  --shadow-lg:0 24px 60px rgba(0,0,0,.55);
}
body.theme-dark img{ filter:brightness(.92); }

/* =====================================================================
   POINT 10 - ANNUAIRE DE PROMOTION ENRICHI
   Photo de profil, filtres, tri, fiche detaillee au clic.
   ===================================================================== */

/* ---- Reglages > Informations du profil : photo de profil ---- */
.settings-avatar-row{ display:flex; align-items:center; gap:16px; margin-bottom:16px; flex-wrap:wrap; }
.settings-avatar-preview{
  flex:0 0 auto;
  width:64px; height:64px;
  border-radius:var(--radius-full);
  display:flex; align-items:center; justify-content:center;
  font-size:1.1rem; font-weight:700;
  color:var(--accent-dark);
  background:var(--accent-light);
  border:1px solid var(--accent-line);
  overflow:hidden;
}
.settings-avatar-preview img{ width:100%; height:100%; object-fit:cover; }
.settings-avatar-actions{ display:flex; flex-direction:column; align-items:flex-start; gap:6px; }
.settings-avatar-actions .ghost-btn{ padding:8px 14px; font-size:.82rem; }
.settings-avatar-remove{ color:var(--error-text); }

/* ---- Filtres et tri de l'annuaire ---- */
.directory-controls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:14px 0 10px}.directory-control{display:flex;flex-direction:column;gap:6px;min-width:0;font-size:.76rem;font-weight:700;color:var(--text-tertiary);text-transform:uppercase;letter-spacing:.03em}.directory-control select{display:block!important;width:100%;min-width:0;height:42px;box-sizing:border-box;font:inherit;text-transform:none;letter-spacing:0;font-weight:600;color:var(--text-primary)!important;padding:0 12px;border:1px solid var(--border-strong)!important;border-radius:var(--radius-sm);background:var(--surface)!important;appearance:auto;opacity:1!important;visibility:visible!important}
@media (max-width:560px){ .directory-controls{ grid-template-columns:1fr; } }

/* ---- Carte de l'annuaire : avatar image + interactivite au clic ---- */
.directory-item{ cursor:pointer; transition:border-color var(--t-fast), box-shadow var(--t-fast); }
.directory-item:hover{ border-color:var(--primary-line); }
.directory-item:focus-visible{ outline:2px solid var(--primary); outline-offset:2px; }
.directory-avatar-img{ width:100%; height:100%; object-fit:cover; border-radius:var(--radius-full); }

/* ---- Fiche detaillee (modale) ---- */
/* Correctif : la fiche peut contenir de nombreuses UE/matieres (long
   detail de notes). Sans hauteur maximale + defilement interne, le
   contenu depassait simplement l'ecran sans aucun moyen de le faire
   defiler (le fond de la page, lui, est bloque pendant qu'une modale est
   ouverte). On borne la boite au viewport et on active un scroll interne. */
.directory-detail-dialog{
  text-align:center; padding-top:36px;
  max-height:calc(100vh - 40px);
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
}
.directory-detail-avatar{
  display:flex; align-items:center; justify-content:center;
  width:76px; height:76px;
  margin:0 auto 14px;
  border-radius:var(--radius-full);
  font-size:1.3rem; font-weight:700;
  color:var(--accent-dark);
  background:var(--accent-light);
  border:1px solid var(--accent-line);
  overflow:hidden;
}
.directory-detail-avatar img{ width:100%; height:100%; object-fit:cover; }
.directory-detail-meta{ margin:2px 0 10px; color:var(--text-secondary); font-size:.86rem; }
.directory-detail-modal .directory-badge{ margin-bottom:10px; }
.directory-detail-bio{
  margin-top:6px;
  padding:12px 14px;
  background:var(--background);
  border-radius:var(--radius-sm);
  color:var(--text-primary);
  font-size:.88rem;
  line-height:1.5;
  text-align:left;
  white-space:pre-wrap;
}

.directory-detail-actions{ display:flex; justify-content:center; gap:10px; margin-top:14px; }


/* =====================================================================
   PHASE 1 — FIL D'ACTUALITE : BANNIERE + MISE EN PAGE 3 COLONNES
   Section 4 du cahier des charges. On reutilise strictement les variables
   deja definies (--primary vert, --accent bleu, --surface, --border,
   --radius-*, --shadow-*) : aucune nouvelle couleur n'est introduite.
   Nouveaux points de rupture 768 / 1024 px, ceux de la maquette : les
   anciennes regles du site (760 / 1100 px) sont conservees telles quelles
   pour ne rien casser ; l'harmonisation complete est traitee en Phase 5.
   ===================================================================== */

/* --- Banniere (section 5, version structurelle ; finitions en Phase 2) --- */
.feed-banner{
  background:linear-gradient(100deg,var(--accent) 0%,#1878B0 46%,var(--primary) 100%);
  color:#fff;
  overflow:hidden;
}
.feed-banner-inner{
  display:flex;align-items:center;gap:22px;
  padding:22px 0;min-height:120px;box-sizing:border-box;
}
.feed-banner-drop{
  flex:none;width:74px;height:74px;border-radius:var(--radius-full);
  background:#fff;display:flex;align-items:center;justify-content:center;
  box-shadow:var(--shadow-sm);
}
.feed-banner-drop svg{width:38px;height:38px;color:var(--accent);stroke-width:2}
.feed-banner-copy{flex:1 1 auto;min-width:0}
.feed-banner-eyebrow{
  margin:0;font-size:11px;font-weight:800;letter-spacing:1.4px;
  text-transform:uppercase;color:rgba(255,255,255,.86);
}
.feed-banner-title{
  margin:4px 0 0;font-size:clamp(1.15rem,2vw,1.6rem);font-weight:800;
  line-height:1.2;color:#fff;
}
.feed-banner-subtitle{
  margin:5px 0 0;font-size:.9rem;font-weight:500;color:rgba(255,255,255,.9);
}
.feed-banner-motto{
  flex:none;margin:0;text-align:right;font-size:11px;font-weight:800;
  letter-spacing:1.1px;line-height:1.65;text-transform:uppercase;
  color:rgba(255,255,255,.92);
}

/* --- Grille 3 colonnes : 22% / 56% / 22% comme dans la maquette --- */
.feed-layout{
  display:grid;
  grid-template-columns:minmax(0,22fr) minmax(0,56fr) minmax(0,22fr);
  gap:20px;align-items:start;
  padding:20px 0 44px;
}
.feed-col{min-width:0}
/* Les deux sidebars restent visibles pendant la lecture du fil. Le "top" tient
   compte du header colle en haut (88px + le filet de 4px). */
.feed-col-left,.feed-col-right{
  position:sticky;top:104px;
  max-height:calc(100vh - 124px);overflow-y:auto;
  scrollbar-width:none;
}
.feed-col-left::-webkit-scrollbar,.feed-col-right::-webkit-scrollbar{display:none}
.feed-col-main{min-width:0}
/* La section du fil vivait dans un .container : elle est desormais dans une
   colonne de la grille, donc plus de largeur propre ni de marge automatique. */
.feed-col-main .feed-section{padding-top:0}

/* Cartes des sidebars : fond blanc, bordure legere, ombre discrete (section 15). */
.feed-side-card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-md);box-shadow:var(--shadow-xs);
  padding:14px 16px;
}
.feed-side-card + .feed-side-card{margin-top:14px}
/* Reperes de Phase 1 uniquement : remplaces par du contenu reel en Phase 3/4. */
.feed-side-skeleton{border-style:dashed;background:var(--background);box-shadow:none}
.feed-side-skeleton-title{margin:0;font-size:.82rem;font-weight:800;color:var(--text-secondary)}
.feed-side-skeleton-text{margin:6px 0 0;font-size:.78rem;color:var(--text-tertiary);line-height:1.5}

/* --- Tablette (768 -> 1023px) : gauche + centre, droite repoussee dessous --- */
@media (max-width:1023px){
  .feed-layout{grid-template-columns:minmax(0,230px) minmax(0,1fr)}
  .feed-col-right{
    grid-column:1 / -1;position:static;max-height:none;overflow:visible;
  }
}

/* --- Mobile (<768px) : une seule colonne. Ordre impose par la section 12 :
       banniere -> zone de publication -> fil -> blocs de la sidebar droite.
       La sidebar gauche passera dans le menu bas en Phase 5 ; en attendant elle
       reste accessible en bas de page plutot que d'etre rendue inatteignable. --- */
@media (max-width:767px){
  .feed-layout{grid-template-columns:minmax(0,1fr);gap:14px;padding:14px 0 32px}
  .feed-col-left,.feed-col-right{position:static;max-height:none;overflow:visible}
  .feed-col-main{order:1}
  .feed-col-right{order:2}
  .feed-col-left{order:3}

  .feed-banner-inner{gap:14px;padding:16px 0;min-height:0}
  .feed-banner-drop{width:54px;height:54px}
  .feed-banner-drop svg{width:28px;height:28px}
  /* Section 12 : le bloc de droite de la banniere est masque sous 768px. */
  .feed-banner-motto{display:none}
}


/* --- Phase 1 : en-tete entre 761 et 1023px ---------------------------------
   Les libelles de la section 3 sont plus longs que les anciens ("Fil
   d'actualite" contre "Accueil") : sans cet ajustement, la barre de navigation
   recouvrait la marque a 768px. On ne change ni le contenu ni l'ordre du
   header, seulement sa densite : d'abord on resserre, puis on passe aux
   icones seules quand la place manque vraiment. Les 6 liens restent tous
   presents et cliquables, comme l'exige la section 18. */
@media (max-width:1023px) and (min-width:900px){
  .nav-wrap{gap:12px}
  .brand{min-width:0;flex:0 1 auto;overflow:hidden}
  .brand small{max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .main-nav a{min-width:0;padding:9px 6px;font-size:11px;gap:3px}
  .main-nav a span{white-space:nowrap}
  .main-nav .nav-icon,.main-nav a.active .nav-icon{width:17px;height:17px}
}
@media (max-width:899px) and (min-width:761px){
  .nav-wrap{gap:10px}
  .brand{min-width:0;flex:1 1 auto;overflow:hidden}
  .brand small,.brand b{display:none}
  .main-nav{gap:2px;flex:0 0 auto}
  .main-nav a{min-width:46px;min-height:44px;padding:9px 8px}
  /* Icones seules : le libelle reste dans le DOM (aria-label sur le lien). */
  .main-nav a span{display:none}
  .main-nav .nav-icon,.main-nav a.active .nav-icon{width:20px;height:20px}
}


/* ==========================================================================
   PHASE 2 - BANNIERE EAU (section 5) ET PALETTE VERT/BLEU/BLANC (section 6)
   ==========================================================================
   Banniere : degrade bleu -> vert, gouttelettes et eclaboussure dessinees en
   CSS/SVG (aucune photo, aucun fichier binaire ajoute, aucune animation en
   boucle). Les calques decoratifs sont en position absolue derriere le
   contenu, qui reste au-dessus avec un contraste suffisant en blanc.
   -------------------------------------------------------------------------- */
.feed-banner{ position:relative; }
.feed-banner-inner{ position:relative; z-index:2; }

/* Gouttelettes : cercles blancs tres peu opaques, tailles et positions variees
   pour evoquer des eclaboussures sans charger d'image. */
.feed-banner-drops{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(circle at 21% 22%, rgba(255,255,255,.20) 0 7px, rgba(255,255,255,0) 8px),
    radial-gradient(circle at 27% 74%, rgba(255,255,255,.15) 0 11px, rgba(255,255,255,0) 12px),
    radial-gradient(circle at 44% 16%, rgba(255,255,255,.13) 0 5px, rgba(255,255,255,0) 6px),
    radial-gradient(circle at 57% 84%, rgba(255,255,255,.16) 0 8px, rgba(255,255,255,0) 9px),
    radial-gradient(circle at 68% 30%, rgba(255,255,255,.12) 0 14px, rgba(255,255,255,0) 15px),
    radial-gradient(circle at 79% 68%, rgba(255,255,255,.17) 0 6px, rgba(255,255,255,0) 7px),
    radial-gradient(circle at 90% 24%, rgba(255,255,255,.11) 0 10px, rgba(255,255,255,0) 11px),
    radial-gradient(circle at 96% 78%, rgba(255,255,255,.14) 0 5px, rgba(255,255,255,0) 6px);
}

/* Eclaboussure : une vague blanche translucide en bas du bandeau, en SVG inline
   (data URI) pour rester nette a toutes les largeurs sans image a telecharger. */
.feed-banner-splash{
  position:absolute; left:0; right:0; bottom:0; height:62%; z-index:1;
  pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 160' preserveAspectRatio='none'%3E%3Cpath d='M0 104c120-46 240-46 360 0s240 46 360 0 240-46 360 0 240 46 360 0v56H0Z' fill='%23ffffff' fill-opacity='.10'/%3E%3Cpath d='M0 126c140-38 260-38 380 4s230 38 350 0 250-40 370 2 200 34 340-6v34H0Z' fill='%23ffffff' fill-opacity='.07'/%3E%3C/svg%3E") no-repeat bottom center/100% 100%;
}

/* La goutte SVG remplace l'icone lucide : on cible svg directement. */
.feed-banner-drop svg{ width:36px; height:44px; }

/* --------------------------------------------------------------------------
   PALETTE (section 6) : plus aucune quatrieme couleur d'accent dans le fil.
   L'orange (annonces), le violet (evenements) et la sarcelle (opportunites)
   sont remplaces par des nuances de la palette officielle : deux verts
   (--primary et #12965E) et trois bleus (--accent-dark, --accent, #1878B0).
   Les types restent distinguables : liseret + pastille + emoji + libelle.
   Le rouge d'alerte (suppression, erreurs) n'est pas touche : c'est une
   couleur d'etat, pas une couleur d'accent decorative.
   -------------------------------------------------------------------------- */
.feed-card.feed-post{ border-left-color:var(--primary); }
.feed-card.feed-event{ border-left-color:#12965E; }
.feed-card.feed-announcement{ border-left-color:var(--accent-dark); }
.feed-card.feed-resource{ border-left-color:var(--accent); }
.feed-card.feed-opportunity{ border-left-color:#1878B0; }

.feed-card.feed-announcement .feed-type-badge{ background:var(--accent-light); color:var(--accent-dark); border-color:var(--accent-line); }
.feed-card.feed-resource .feed-type-badge{ background:var(--accent-light); color:#0F5FA6; border-color:var(--accent-line); }
.feed-card.feed-event .feed-type-badge{ background:var(--primary-light); color:var(--primary-dark); border-color:var(--primary-line); }
.feed-card.feed-opportunity .feed-type-badge{ background:#E6F1FB; color:#12608F; border-color:rgba(24,120,176,.26); }

.feed-card.feed-announcement .feed-avatar{ background:var(--accent-light); border-color:var(--accent-line); }
.feed-card.feed-resource .feed-avatar{ background:var(--accent-light); border-color:rgba(29,95,168,.28); }
.feed-card.feed-event .feed-avatar{ background:var(--primary-light); border-color:var(--primary-line); }
.feed-card.feed-opportunity .feed-avatar{ background:#E6F1FB; border-color:rgba(24,120,176,.30); }

.composer-type[data-post-type="resource"] .composer-type-icon{ background:var(--accent-light); border-color:var(--accent-line); }
.composer-type[data-post-type="announcement"] .composer-type-icon{ background:var(--accent-light); border-color:var(--accent-line); }
.composer-type[data-post-type="event"] .composer-type-icon{ background:var(--primary-light); border-color:var(--primary-line); }
.composer-type[data-post-type="opportunity"] .composer-type-icon{ background:#E6F1FB; border-color:rgba(24,120,176,.26); }

/* Bloc opportunites (pastille, puces du carrousel) : la sarcelle #0F8B8D
   devient le bleu clair de la palette. */
.opp-avatar{ background:#E6F1FB; color:#12608F; }
.opp-dot.active{ background:#1878B0; }
.opp-type-tag{ background:#1878B0; }

/* Equilibre vert / bleu demande en section 6 : le vert porte l'action
   (Publier, Nouvelle publication, CTA), le bleu porte la navigation et
   l'information. Le filtre actif du fil passe donc en vert pour ne pas
   laisser le bleu dominer la colonne centrale. */
.feed-filter.active{ background:var(--primary); border-color:var(--primary); color:#fff; }
.feed-filter.active{ box-shadow:0 5px 16px rgba(15,107,74,.14); }
.feed-filter:hover{ border-color:var(--accent-line); color:var(--text-primary); }


/* ============================================================================
   CORRECTIFS 9.17.1 : cible d'une notification + page "Mot de passe"
   ==========================================================================*/

/* Element ouvert depuis une notification : un seul passage, pas de boucle. */
@keyframes notifTargetPulse{
  0%   { box-shadow:0 0 0 0 rgba(15,107,74,.34); }
  60%  { box-shadow:0 0 0 6px rgba(15,107,74,.12); }
  100% { box-shadow:0 0 0 0 rgba(15,107,74,0); }
}
.notif-target{
  animation:notifTargetPulse 1.6s var(--ease) 1;
  border-color:var(--primary-line) !important;
  scroll-margin-top:120px;
}

/* Page dediee au mot de passe : colonne lisible, formulaire a gauche,
   rappels de securite a droite en grand ecran. */
.password-page{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:18px;
  align-items:start;
  max-width:900px;
}
.password-page #passwordPanel .settings-form{ gap:12px; }
.password-tips-list{
  margin:8px 0 0;
  padding-left:18px;
  display:flex;
  flex-direction:column;
  gap:8px;
  color:var(--text-secondary);
  font-size:.9rem;
  line-height:1.5;
}
@media (max-width:900px){
  .password-page{ grid-template-columns:1fr; }
}


/* ============================================================================
   PHASE 3 - SIDEBAR GAUCHE (section 7) ET ZONE DE PUBLICATION (section 8)
   ==========================================================================*/

/* Action principale : le vert porte l'action, comme decide en section 6. */
.feed-new-post{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:44px;
  padding:12px 14px;
  border:none;
  border-radius:var(--radius-md);
  background:var(--primary);
  color:#fff;
  font-family:var(--font);
  font-size:.95rem;
  font-weight:700;
  cursor:pointer;
  box-shadow:0 6px 16px rgba(15,107,74,.18);
  transition:background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.feed-new-post:hover{ background:var(--primary-dark); transform:translateY(-1px); }
.feed-new-post i{ width:18px; height:18px; }

.feed-scope{ display:flex; flex-direction:column; gap:2px; padding:8px; }
.feed-scope-link{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  min-height:42px;
  padding:10px 12px;
  border:none;
  background:transparent;
  border-radius:var(--radius-sm);
  font-family:var(--font);
  font-size:.92rem;
  font-weight:600;
  color:var(--text-secondary);
  text-align:left;
  cursor:pointer;
  transition:background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.feed-scope-link i{ width:18px; height:18px; color:var(--accent); flex:0 0 auto; }
.feed-scope-link:hover{ background:var(--background); color:var(--text-primary); }
.feed-scope-link.active{ background:var(--primary-light); color:var(--primary-dark); }
.feed-scope-link.active i{ color:var(--primary); }

.feed-side-title{
  margin:0 0 10px;
  font-size:.74rem;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--text-tertiary);
}

/* Filtres : empiles dans la sidebar en grand ecran, chips defilables en
   mobile (comportement existant conserve). */
@media (min-width:768px){
  .feed-filters-card #feedFilters{
    flex-direction:column;
    flex-wrap:nowrap;
    overflow:visible;
    align-items:stretch;
    gap:4px;
    padding-bottom:0;
  }
  .feed-filters-card .feed-filter{
    width:100%;
    text-align:left;
    min-height:40px;
  }
}

/* Outils de publication : "Plus" ouvre un petit panneau au-dessus du fil. */
.composer-more-wrap{ position:relative; display:inline-flex; }
.composer-more{
  position:absolute;
  z-index:20;
  top:calc(100% + 6px);
  left:0;
  min-width:200px;
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:8px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-md);
}
.composer-more .composer-type{ width:100%; justify-content:flex-start; }
/* display:flex ci-dessus l'emporterait sur la regle [hidden] du navigateur :
   sans cette ligne, le panneau "Plus" resterait ouvert en permanence. */
.composer-more[hidden]{ display:none; }
@media (max-width:520px){
  .composer-more{ left:auto; right:0; }
}


/* =====================================================================
   PHASE 4 — SIDEBAR DROITE, MARQUE-PAGE, PRESENCE
   Palette : vert (actions) + bleu (informations) + blanc (cartes).
   ===================================================================== */
.feed-side-head{ display:flex; align-items:baseline; justify-content:space-between; gap:8px; margin-bottom:10px; }
.feed-side-all{ font-size:.78rem; font-weight:600; color:var(--accent); text-decoration:none; }
.feed-side-all:hover{ text-decoration:underline; }
.feed-side-list{ display:flex; flex-direction:column; gap:6px; }
.feed-side-item{
  display:flex; align-items:center; gap:10px;
  padding:8px; border-radius:var(--radius-md);
  color:inherit; text-decoration:none;
  transition:background var(--t-fast) var(--ease);
}
a.feed-side-item:hover{ background:var(--accent-light); }
.feed-side-item-main{ display:flex; flex-direction:column; min-width:0; }
.feed-side-item-main b{ font-size:.86rem; line-height:1.25; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.feed-side-item-main small{ font-size:.74rem; color:var(--text-secondary); }
.feed-side-empty{ font-size:.8rem; color:var(--text-tertiary); margin:0; }
.feed-side-date{
  flex:none; width:38px; height:38px; border-radius:var(--radius-md);
  background:var(--accent-light); color:var(--accent-dark);
  display:flex; flex-direction:column; align-items:center; justify-content:center; line-height:1;
}
.feed-side-date b{ font-size:.95rem; }
.feed-side-date small{ font-size:.62rem; text-transform:uppercase; }
.feed-side-icon{
  flex:none; width:38px; height:38px; border-radius:var(--radius-md);
  background:var(--primary-light); display:flex; align-items:center; justify-content:center; font-size:1rem;
}
.feed-online-avatar{
  position:relative; flex:none; width:34px; height:34px; border-radius:var(--radius-full);
  background:var(--accent-light); color:var(--accent-dark);
  display:flex; align-items:center; justify-content:center; font-size:.74rem; font-weight:700;
  overflow:hidden;
}
/* Photos de profil reelles (fil, commentaires, chat, composeur, membres en
   ligne) : memes proportions que le cercle d'initiales qu'elles remplacent. */
.chat-avatar-img,
.composer-avatar-img,
.feed-avatar-img,
.post-comment-avatar-img,
.feed-online-avatar-img{
  width:100%; height:100%; object-fit:cover; border-radius:var(--radius-full);
}
.feed-online-dot{
  position:absolute; right:-1px; bottom:-1px; width:10px; height:10px; border-radius:var(--radius-full);
  background:#12965E; border:2px solid var(--surface);
}
.post-bookmark{
  margin-left:auto; display:inline-flex; align-items:center; gap:6px;
  padding:6px 12px; border-radius:var(--radius-full);
  border:1px solid var(--border); background:var(--surface);
  color:var(--text-secondary); font-size:.82rem; font-weight:600; cursor:pointer;
  transition:background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.post-bookmark:hover{ background:var(--primary-light); color:var(--primary-dark); border-color:var(--primary-line); }
.post-bookmark.mine{ background:var(--primary-light); color:var(--primary-dark); border-color:var(--primary-line); }
@media (max-width:520px){
  .post-bookmark{ margin-left:0; }
}

/* display:flex sur .feed-scope-link l'emporterait sur la regle [hidden] du
   navigateur : sans ceci, le perimetre "Publications enregistrees" resterait
   visible meme quand la table post_bookmarks est absente. Idem pour les
   cartes de la sidebar droite (bloc "Membres en ligne"). */
.feed-scope-link[hidden]{ display:none; }
.feed-side-card[hidden]{ display:none; }


/* =====================================================================
   PHASE 5 — NAVIGATION MOBILE (section 12)
   Barre basse a 5 zones (cibles >= 44px), menu ☰ en tiroir, et ordre
   vertical impose : banniere > composer > fil > evenements > ressources
   > membres en ligne. Rien de tout cela n'apparait au dela de 767px.
   ===================================================================== */
.mobile-bar{ display:none; }
.mobile-menu[hidden]{ display:none; }

@media (max-width:767px){
  /* La nav du header est deplacee dans le tiroir : on masque l'emplacement
     d'origine tant que le deplacement n'a pas eu lieu (evite un clignotement). */
  .site-header .main-nav{ display:none; }

  body{ padding-bottom:calc(64px + env(safe-area-inset-bottom)); }
  body.mobile-menu-on{ overflow:hidden; }

  .mobile-bar{
    position:fixed; left:0; right:0; bottom:0; z-index:40;
    display:grid; grid-template-columns:repeat(5,1fr); align-items:center;
    background:var(--surface); border-top:1px solid var(--border);
    box-shadow:0 -2px 16px rgba(31,45,61,.10);
    padding-bottom:env(safe-area-inset-bottom);
  }
  .mobile-bar-item{
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
    min-height:58px; padding:8px 2px; border:0; background:none; cursor:pointer;
    color:var(--text-secondary); font-size:10.5px; font-weight:600; font-family:inherit;
    transition:color var(--t-fast) var(--ease);
  }
  .mobile-bar-item i, .mobile-bar-item svg{ width:22px; height:22px; }
  .mobile-bar-item.active{ color:var(--accent); }
  .mobile-bar-item:active{ background:var(--background); }
  .mobile-bar-new{
    justify-self:center; width:52px; height:52px; border:0; cursor:pointer;
    border-radius:var(--radius-full); background:var(--primary); color:#fff;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 6px 16px rgba(15,107,74,.34);
  }
  .mobile-bar-new i, .mobile-bar-new svg{ width:26px; height:26px; }
  .mobile-bar-new:active{ background:var(--primary-dark); }

  .mobile-menu{ position:fixed; inset:0; z-index:60; }
  .mobile-menu-backdrop{ position:absolute; inset:0; background:rgba(31,45,61,.45); }
  .mobile-menu-panel{
    position:absolute; right:0; top:0; bottom:0; width:min(86%,340px);
    background:var(--surface); box-shadow:var(--shadow-lg);
    display:flex; flex-direction:column;
    animation:mobileMenuIn .22s var(--ease) both;
  }
  @keyframes mobileMenuIn{ from{ transform:translateX(18px); opacity:.6; } to{ transform:none; opacity:1; } }
  .mobile-menu-head{
    display:flex; align-items:center; justify-content:space-between;
    padding:14px 16px; border-bottom:1px solid var(--border);
  }
  .mobile-menu-close{
    width:44px; height:44px; border:0; background:none; cursor:pointer;
    font-size:26px; line-height:1; color:var(--text-secondary); border-radius:var(--radius-full);
  }
  .mobile-menu-close:active{ background:var(--background); }
  .mobile-menu-body{ flex:1; overflow-y:auto; padding:12px; display:flex; flex-direction:column; gap:12px; }

  /* La nav reprend une forme de liste verticale une fois dans le tiroir. */
  .mobile-menu-body .main-nav{
    display:flex; flex-direction:column; gap:2px; width:100%;
    background:none; border:0; box-shadow:none; padding:0; overflow:visible;
  }
  .mobile-menu-body .main-nav a{
    flex:none; width:100%; min-height:48px; justify-content:flex-start;
    gap:12px; padding:10px 12px; font-size:.92rem; border-radius:var(--radius-md);
  }
  .mobile-menu-body .main-nav a span{ display:inline; }
  .mobile-menu-body .feed-col-left{ display:flex; flex-direction:column; gap:12px; width:100%; }
  /* Dans le tiroir, les filtres se lisent en colonne (plus de bande a faire
     defiler lateralement, source de boutons hors ecran sur petits telephones). */
  .mobile-menu-body .feed-filters{
    flex-direction:column; flex-wrap:nowrap; overflow:visible; align-items:stretch;
  }
  .mobile-menu-body .feed-filter{ min-height:44px; }
  .mobile-menu-body .feed-scope-link{ min-height:44px; }
  .mobile-menu-body .feed-new-post{ min-height:48px; }

  /* Ordre vertical impose par la section 12. La colonne gauche part dans le
     tiroir : il ne reste que le fil puis les blocs d'information. */
  .feed-col-main{ order:1; }
  .feed-col-right{ order:2; }
  .feed-col-left{ order:3; }
}

/* Correctif decouvert en testant la barre basse (Phase 5) : .toast est en
   display:flex, ce qui l'emporte sur la regle [hidden] du navigateur. Le
   toast masque restait donc une zone invisible de ~300px fixee en bas de
   l'ecran, qui interceptait les clics — y compris ceux du bouton central
   de la nouvelle barre de navigation. */
.toast[hidden]{ display:none; }
@media (max-width:767px){
  /* Au-dessus de la barre basse, jamais derriere. */
  .toast{ bottom:calc(78px + env(safe-area-inset-bottom)); left:12px; right:12px; transform:translateY(16px); min-width:0; max-width:none; }
  .toast.show{ transform:none; }
}

@media (max-width:767px){
  /* Dans le tiroir, la nav ne doit plus heriter du gabarit "barre pleine
     largeur" du header (flex:0 0 100% + colonne etiree) : on la remet en
     simple liste compacte. */
  .mobile-menu-body .main-nav{ flex:0 0 auto; height:auto; }
  .mobile-menu-body .main-nav a{
    flex:0 0 auto; flex-direction:row; height:auto; min-height:48px;
    align-items:center; text-align:left;
  }
}


/* ============================= POINT 2 — AGENDA ACADEMIQUE ============================= */
.events-countdown{
  display:flex; align-items:center; gap:10px;
  background:#eefaf2; border:1px solid #cdeedd; border-radius:12px;
  padding:10px 16px; margin-bottom:16px; font-weight:600; color:#0b5d33;
}
.events-countdown .countdown-dot{
  width:10px; height:10px; border-radius:50%; background:#087c4b; flex:none;
  animation:countdownPulse 1.6s ease-in-out infinite;
}
@keyframes countdownPulse{
  0%,100%{ opacity:1; transform:scale(1); }
  50%{ opacity:.45; transform:scale(1.25); }
}

.events-subtabs{ display:flex; gap:8px; margin-bottom:14px; flex-wrap:wrap; }
.events-subtab{
  border:1px solid var(--border); background:var(--surface); color:var(--text-primary);
  border-radius:999px; padding:8px 18px; font-weight:600; cursor:pointer;
  transition:background .15s,color .15s,border-color .15s;
}
.events-subtab.active{ background:var(--primary); border-color:var(--primary); color:#fff; }
.events-subtab:not(.active):hover{ border-color:var(--primary); color:var(--primary); }

.events-subpanel{ display:none; }
.events-subpanel.active{ display:block; }

.events-toolbar{
  display:flex; flex-wrap:wrap; align-items:end; gap:14px; margin-bottom:16px;
}
.events-filter{ display:flex; flex-direction:column; gap:4px; font-size:.85rem; font-weight:600; color:var(--text-secondary); }
.events-filter select{
  border:1px solid var(--border); border-radius:10px; padding:8px 10px; font:inherit; background:var(--surface); color:var(--text-primary);
}

.events-calendar{
  background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:16px; margin-bottom:20px;
}
.events-calendar-header{
  display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; font-weight:700;
}
.events-calendar-header span{ font-size:1.05rem; text-transform:capitalize; }
.events-calendar-weekdays{
  display:grid; grid-template-columns:repeat(7,1fr); text-align:center;
  font-size:.78rem; font-weight:700; color:var(--text-tertiary); margin-bottom:6px;
}
.events-calendar-grid{
  display:grid; grid-template-columns:repeat(7,1fr); gap:4px;
}
.cal-cell{
  min-height:64px; border-radius:10px; padding:6px 4px; background:var(--background);
  border:1px solid transparent; cursor:default; display:flex; flex-direction:column; gap:4px;
}
.cal-cell.cal-empty{ background:transparent; }
.cal-cell.cal-today{ border-color:var(--primary); background:var(--primary-light); }
.cal-day-num{ font-size:.8rem; font-weight:700; color:var(--text-primary); }
.cal-dots{ display:flex; flex-wrap:wrap; gap:3px; }
.cal-dot{ width:7px; height:7px; border-radius:50%; display:inline-block; }
.events-calendar-legend{
  display:flex; flex-wrap:wrap; gap:12px; margin-top:12px; font-size:.78rem; color:var(--text-secondary);
}
.events-calendar-legend span{ display:flex; align-items:center; gap:6px; }

.event-type-badge{
  display:inline-block; padding:2px 10px; border-radius:999px; font-size:.72rem;
  font-weight:700; color:#fff; margin-right:8px;
}

.weekly-schedule-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px;
}
.schedule-day{
  background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:12px; min-height:80px;
}
.schedule-day h4{ margin:0 0 8px; font-size:.92rem; color:var(--primary); }
.schedule-slot{
  border-left:3px solid var(--primary); padding:6px 8px; margin-bottom:8px; background:var(--background); border-radius:0 8px 8px 0;
}
.schedule-time{ font-weight:700; font-size:.8rem; color:var(--text-primary); }
.schedule-subject{ font-weight:600; font-size:.85rem; color:var(--text-primary); }
.schedule-room, .schedule-teacher{ font-size:.75rem; color:var(--text-tertiary); }
.schedule-empty{ color:var(--text-tertiary); font-size:.82rem; }

/* "Vrai emploi du temps" — grille hebdomadaire datee, calquee sur le
   document officiel du departement (colonnes Lundi-Samedi, lignes = creneaux). */
.weekly-schedule-nav{
  display:flex; align-items:center; justify-content:center; gap:14px; margin-bottom:14px;
}
.weekly-schedule-nav strong{ font-size:.88rem; color:var(--text-primary); min-width:150px; text-align:center; }
.weekly-schedule-nav .ghost-btn{ padding:6px 10px; }
.weekly-schedule-nav .ghost-btn:disabled{ opacity:.35; cursor:default; }
.schedule-week-heading{
  font-weight:700; font-size:.95rem; color:var(--primary); margin-bottom:10px; text-align:center;
}
.schedule-week-table{
  width:100%; border-collapse:collapse; margin-bottom:18px; font-size:.82rem; table-layout:fixed;
}
.schedule-week-table th, .schedule-week-table td{
  border:1px solid var(--border); padding:8px 6px; vertical-align:top; text-align:center;
}
.schedule-week-table thead th{
  background:var(--primary); color:#fff; font-weight:700; font-size:.78rem;
}
.schedule-time-cell{
  font-weight:700; font-size:.75rem; color:var(--text-primary); background:var(--surface); white-space:nowrap;
}
.schedule-cell-filled{ background:var(--background); }
.schedule-cell-subject{ font-weight:700; font-size:.8rem; color:var(--text-primary); margin-bottom:3px; }
.schedule-cell-teacher{ font-size:.72rem; color:var(--text-secondary); }
.schedule-cell-room{ font-size:.7rem; color:var(--text-tertiary); }
.schedule-cell-empty{ background:var(--surface); }
.manage-item-week{ color:var(--primary); font-weight:700; }
@media (max-width:720px){
  .schedule-week-table{ font-size:.72rem; }
  .schedule-week-table th, .schedule-week-table td{ padding:5px 3px; }
  .schedule-cell-subject{ font-size:.72rem; }
  .schedule-cell-teacher, .schedule-cell-room{ font-size:.62rem; }
}

/* =====================================================================
   REPRODUCTION FINALE DE LA MAQUETTE DU FIL D'ACTUALITÉ
   Ce bloc est volontairement placé en dernier : il harmonise les correctifs
   précédents sans retirer les handlers ni les données existantes.
   ===================================================================== */

/* ---------- En-tête desktop ---------- */
.site-header{background:#102130;box-shadow:none;color:#fff}
.site-header .top-line{display:none}
.site-header .nav-wrap{height:92px;gap:18px}
.site-header .brand{color:#fff;min-width:330px}
.site-header .brand strong{font-size:20px;line-height:1.05}
.site-header .brand small{color:#fff;font-size:12px;margin-top:5px}
.site-header .brand b{background:#0F8B4F;color:#fff;margin-top:7px;padding:3px 10px}
.site-header .main-nav{gap:4px}
.site-header .main-nav a{color:#fff;min-width:88px;min-height:78px;padding:9px 10px;gap:7px;border-radius:12px;font-size:13px}
.site-header .main-nav a:hover{background:rgba(255,255,255,.07);color:#fff}
.site-header .main-nav a.active{background:#fff;color:#1260C4}
.site-header .main-nav a.active .nav-icon{color:#1260C4}
.site-header .main-nav .nav-icon{width:23px;height:23px}
.site-header .theme-toggle-btn{display:none}
.site-header .lang-switch-btn{display:none}
.site-header .notif-bell{background:transparent;border:0;color:#fff;width:40px;height:40px}
.site-header .notif-bell:hover{background:rgba(255,255,255,.08);color:#fff}
.site-header .notif-badge{background:#F44336;border-color:#102130}
.site-header .login-btn{background:#193149;color:#fff;border:0;border-radius:16px;padding:9px 14px;box-shadow:none;min-height:52px}
.site-header .login-btn:hover{background:#24405a;box-shadow:none;filter:none}
.site-header .account-avatar{background:#fff;color:#1260C4;width:44px;height:44px;font-size:.95rem}

/* ---------- Bannière : image de référence fournie ---------- */
.feed-banner{margin:28px auto 0;width:min(1460px,calc(100% - 80px));height:166px;border-radius:14px;background:#eaf5ff url("feed-banner-reference.png") center/cover no-repeat;position:relative;box-shadow:none}
.feed-banner-inner{height:100%;min-height:0;padding:0 28px;gap:22px}
.feed-banner-drops,.feed-banner-splash{display:none}
.feed-banner-drop{width:124px;height:124px;background:rgba(255,255,255,.72);box-shadow:0 5px 20px rgba(24,95,168,.08)}
.feed-banner-drop svg{width:64px;height:80px}
.feed-banner-copy,.feed-banner-motto{visibility:hidden}

/* ---------- Grille desktop ---------- */
.feed-layout{width:min(1460px,calc(100% - 80px));grid-template-columns:272px minmax(0,1fr) 354px;gap:26px;padding:16px 0 42px}
.feed-col-left,.feed-col-right{top:108px;max-height:calc(100vh - 124px)}
.feed-side-card{border-radius:13px;border-color:var(--border);box-shadow:0 2px 9px rgba(30,65,90,.04);padding:12px 14px}
.feed-side-card + .feed-side-card{margin-top:14px}

/* ---------- Bouton / navigation gauche ---------- */
.feed-new-post{min-height:52px;border-radius:11px;background:#0A9A5B;font-size:16px;box-shadow:none}
.feed-new-post:hover{background:#07844E;transform:none}
.feed-scope{padding:8px 7px}
.feed-scope-link{min-height:48px;padding:10px 13px;border-radius:9px;font-size:14px;color:var(--text-primary)}
.feed-scope-link i{color:var(--text-primary)}
.feed-scope-link.active{background:var(--primary-light);color:var(--primary);border-left:4px solid var(--primary);padding-left:9px}
.feed-scope-link.active i{color:var(--primary)}
.feed-side-title{font-size:16px;letter-spacing:0;text-transform:none;color:var(--text-primary);margin:0 0 9px}

/* ---------- Filtres comme sur la maquette ---------- */
.feed-filters-card{padding:12px 6px 8px}
.feed-filters-card .feed-side-title{padding:0 8px}
.feed-filters{display:flex;flex-direction:column;gap:2px;margin:0}
.feed-filter{width:100%;min-height:46px;padding:9px 12px;border:0;border-radius:9px;background:transparent;color:var(--text-primary);text-align:left;display:flex;align-items:center;gap:10px;font-size:13px;font-weight:600}
.feed-filter i,.feed-filter svg{width:20px;height:20px;flex:0 0 20px}
.feed-filter.active{background:var(--accent-light);border-color:transparent;color:var(--accent-dark);box-shadow:none}
.feed-filter.active svg{color:var(--accent-dark)}
.feed-filter:hover{background:var(--background);border-color:transparent;color:var(--text-primary)}

/* ---------- Composer ---------- */
.composer{border-color:var(--border);border-radius:15px;padding:17px 18px;box-shadow:0 2px 9px rgba(30,65,90,.04)}
.composer-head{gap:12px;margin-bottom:13px}
.composer-avatar{width:52px;height:52px;flex-basis:52px;background:var(--accent-light);border-color:var(--accent-line);color:var(--accent-dark);font-size:17px}
.composer-question{flex:1;border:1px solid var(--border);background:var(--background);border-radius:28px;padding:14px 20px;font-size:15px;font-weight:500;color:var(--text-secondary)}
.composer-types{align-items:center;gap:8px;border-top:1px solid var(--border);padding-top:11px}
.composer-type,.composer-tool-static{border:0;background:transparent;color:var(--text-primary);border-radius:9px;padding:8px 10px;font-size:14px;font-weight:500;display:inline-flex;align-items:center;gap:7px;cursor:pointer}
.composer-type:hover{background:var(--accent-light);border-color:transparent;color:var(--accent-dark)}
.composer-type i,.composer-type svg,.composer-tool-static i,.composer-tool-static svg{width:20px;height:20px}
.composer-tool-static{cursor:default}
.composer-publish{margin-left:auto;min-width:138px;height:50px;border:0;border-radius:12px;background:#0A9A5B;color:#fff;font:inherit;font-size:15px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;box-shadow:none}
.composer-publish:hover{background:#07844E;filter:none}
.composer-publish i,.composer-publish svg{width:20px;height:20px}
.composer-more{min-width:190px}

/* ---------- Cartes du fil ---------- */
.feed-list{gap:14px}
.feed-card{border:1px solid var(--border);border-left:1px solid var(--border);border-radius:15px;padding:16px 18px;box-shadow:0 2px 9px rgba(30,65,90,.035)}
.feed-card.feed-post,.feed-card.feed-announcement,.feed-card.feed-resource,.feed-card.feed-event,.feed-card.feed-opportunity{border-left-color:var(--border)}
.feed-card:hover{transform:none;box-shadow:0 4px 16px rgba(30,65,90,.06);border-color:var(--border-strong)}
.feed-card header{gap:11px}
.feed-avatar{width:44px;height:44px;flex-basis:44px;background:var(--accent-light);border-color:var(--accent-line);color:var(--accent-dark)}
.feed-meta strong{font-size:15px;color:var(--text-primary)}
.feed-meta small{font-size:12px;color:var(--text-tertiary)}
.feed-type-badge{display:inline-flex;align-items:center;border-radius:999px;padding:2px 7px;background:var(--accent-light);color:var(--accent-dark);border:1px solid var(--accent-line)}
.feed-date{margin-left:5px}
.feed-body{font-size:15px;line-height:1.45;color:var(--text-primary)}

/* ---------- Opportunités : correction définitive du texte bleu sur vert ---------- */
.opp-type-tag{background:#177DB8;color:#fff}
.opp-cta,.ghost-btn.is-primary,.feed-card .opp-cta{background:#07844E !important;border-color:#07844E !important;color:#fff !important;text-decoration:none !important}
.opp-cta:hover,.ghost-btn.is-primary:hover{background:#066C40 !important;border-color:#066C40 !important;color:#fff !important}
.opp-avatar{background:var(--accent-light);color:var(--accent-dark)}
.opp-dot.active{background:var(--accent)}

/* ---------- Sidebar droite ---------- */
.feed-side-head h3.feed-side-title{font-size:16px;color:var(--text-primary)}
.feed-side-all{color:var(--accent-dark);font-size:13px}
.feed-side-item{padding:7px 5px}
.feed-side-item-main b{font-size:13px;color:var(--text-primary)}
.feed-side-item-main small{font-size:12px;color:var(--text-tertiary)}
.feed-side-date{width:52px;height:56px;border-radius:10px;background:var(--accent-light);color:var(--accent-dark)}
.feed-side-date b{font-size:19px}.feed-side-date small{font-size:10px}
.feed-side-icon{width:38px;height:38px;border-radius:8px}

/* ---------- Navigation téléphone sous la bannière ---------- */
.feed-mobile-nav-slot{display:none}

/* ---------- Correctif : le bouton compte + son menu déroulant débordaient
   du header sur les écrans intermédiaires (ex. 1366px de large), faute de
   palier responsive entre le mobile (≤767px) et le grand desktop. On réduit
   ici la marque, les liens de nav et le bouton compte pour que tout tienne
   sur une seule ligne sans pousser le menu compte hors de l'écran. ---------- */
@media (max-width:1400px) and (min-width:768px){
  .site-header .brand{min-width:0;flex:0 1 auto}
  .site-header .brand small{display:none}
  .site-header .nav-wrap{gap:8px}
  .site-header .main-nav{gap:2px}
  .site-header .main-nav a{min-width:0;min-height:60px;padding:8px 7px;gap:4px;font-size:11.5px}
  .site-header .login-btn{padding:7px 10px;min-height:44px}
  .site-header .login-btn-label{display:none}
  .site-header .account-avatar{width:34px;height:34px}
}

@media (max-width:767px){
  .site-header{background:#102130;box-shadow:none}
  .site-header .nav-wrap{height:72px;min-height:72px;padding:0 12px;flex-wrap:nowrap;gap:8px}
  .site-header .brand{height:72px;min-width:0;flex:1}
  .site-header .brand strong{font-size:17px}
  .site-header .brand small,.site-header .brand b{display:none}
  .site-header .account-menu{height:72px}
  .site-header .login-btn{background:transparent;padding:8px;min-height:44px}
  .site-header .account-avatar{width:36px;height:36px}
  .site-header .notif-bell{color:#fff;width:40px;height:40px}

  .feed-banner{margin:10px 12px 0;width:calc(100% - 24px);height:116px;border-radius:12px;background-size:auto 116px;background-position:center}
  .feed-banner-inner{padding:0 12px}
  .feed-banner-drop{width:56px;height:56px}.feed-banner-drop svg{width:30px;height:36px}
  .feed-mobile-nav-slot{display:block;margin-top:8px}
  .feed-mobile-nav-slot .main-nav{display:flex !important;width:100%;height:58px;overflow:hidden;background:var(--surface);border-top:1px solid var(--border);border-bottom:1px solid var(--border);box-shadow:none;gap:0}
  .feed-mobile-nav-slot .main-nav a{flex:1 1 0;min-width:0;min-height:58px;padding:8px 2px;display:flex;align-items:center;justify-content:center;border-radius:0;color:var(--text-primary);background:var(--surface);font-size:9.5px;gap:3px}
  .feed-mobile-nav-slot .main-nav a span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
  .feed-mobile-nav-slot .main-nav .nav-icon{width:20px;height:20px}
  .feed-mobile-nav-slot .main-nav a.active{background:var(--surface);color:var(--primary);border-bottom:3px solid var(--primary)}
  .feed-mobile-nav-slot .main-nav a.active .nav-icon{color:var(--primary)}

  .feed-layout{width:calc(100% - 24px);grid-template-columns:1fr;gap:12px;padding:10px 0 26px}
  .feed-col-main{order:1}.feed-col-right{order:2}.feed-col-left{order:3}
  .feed-col-left,.feed-col-right{position:static;max-height:none;overflow:visible}
  .composer{padding:12px;border-radius:13px}
  .composer-avatar{width:42px;height:42px;flex-basis:42px;font-size:14px}
  .composer-question{font-size:12px;padding:11px 13px}
  .composer-types{gap:2px;padding-top:8px;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .composer-types::-webkit-scrollbar{display:none}
  .composer-tool{flex:0 0 auto}
  .composer-type,.composer-tool-static{padding:7px 6px;font-size:10.5px;gap:4px}
  .composer-type i,.composer-type svg,.composer-tool-static i,.composer-tool-static svg{width:16px;height:16px}
  .composer-publish{min-width:42px;width:42px;height:42px;padding:0;border-radius:10px;position:sticky;right:0;z-index:2;box-shadow:-10px 0 10px -6px rgba(20,30,40,.18)}
  .composer-publish span{display:none}
  .feed-card{padding:13px 12px;border-radius:13px}
  .feed-avatar{width:38px;height:38px;flex-basis:38px}
  .feed-meta strong{font-size:14px}
  .feed-meta small{font-size:11px}
  .feed-body{font-size:13px}
  .feed-side-card{padding:11px 12px}
  .mobile-bar{display:grid}
}

@media (min-width:768px) and (max-width:1100px){
  .feed-banner,.feed-layout{width:calc(100% - 32px)}
  .feed-layout{grid-template-columns:220px minmax(0,1fr);gap:16px}
  .feed-col-right{grid-column:1 / -1;position:static;max-height:none;overflow:visible}
}

/* ---------- Détail téléphone : menu hamburger dans l'en-tête ---------- */
.mobile-header-menu-btn{display:none}
@media (max-width:767px){
  .mobile-header-menu-btn{
    display:inline-flex;align-items:center;justify-content:center;flex:0 0 40px;width:40px;height:40px;
    border:0;border-radius:10px;background:transparent;color:#fff;cursor:pointer;padding:0;
  }
  .mobile-header-menu-btn svg{width:22px;height:22px}
  .mobile-header-menu-btn:active{background:rgba(255,255,255,.08)}
  .feed-banner{
    background-image:url("feed-banner-mobile-reference.png");
    background-size:100% 100%;
    background-position:center;
  }
  .feed-banner-drop{display:none}
  .feed-banner-copy,.feed-banner-motto{visibility:hidden}
}

/* =====================================================================
   V9.50.0.3 — CORRECTIONS FINALES DU FIL D'ACTUALITÉ
   - en-tête uniforme avec la palette GRME CONNECT
   - bouton Apparence visible à côté des notifications
   - compte : avatar + nom + chevron, sans icône personnage
   - bannière : image de référence utilisée telle quelle, sans superposition
   - une seule action « Publier » dans la barre supérieure du composeur
   - sondage / humeur fonctionnels
   - « Plus » réservé aux administrateurs
   - documents du fil rendus comme fichiers typés
   ===================================================================== */

/* ---------- Header uniforme ---------- */
.site-header,
.site-header .nav-wrap{background:#102130;color:#fff}
.site-header{border-bottom:1px solid rgba(255,255,255,.06);box-shadow:none}
.site-header .brand{color:#fff}
.site-header .brand strong{color:#fff}
.site-header .brand small{color:#fff}
.site-header .brand b{background:#0A9A5B;color:#fff}
.site-header .main-nav a{color:#fff}
.site-header .main-nav a:hover{background:rgba(255,255,255,.08);color:#fff}
.site-header .main-nav a.active{background:#fff;color:#1263C8}
.site-header .main-nav a.active .nav-icon{color:#1263C8}
.site-header .theme-toggle-btn{display:inline-flex;align-items:center;justify-content:center;flex:0 0 40px;width:40px;height:40px;padding:0;border:1px solid rgba(255,255,255,.16);border-radius:50%;background:transparent;color:#fff;box-shadow:none}
.site-header .theme-toggle-btn:hover{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.24);color:#fff;filter:none;box-shadow:none}
.site-header .lang-switch-btn{display:inline-flex;align-items:center;justify-content:center;flex:0 0 40px;width:40px;height:40px;padding:0;border:1px solid rgba(255,255,255,.16);border-radius:50%;background:transparent;color:#fff;box-shadow:none}
.site-header .lang-switch-btn:hover{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.24);color:#fff;filter:none;box-shadow:none}
.site-header .notif-bell{background:transparent;border:0;color:#fff;width:40px;height:40px}
.site-header .notif-bell:hover{background:rgba(255,255,255,.09);color:#fff;filter:none}
.site-header .login-btn{background:#193149;color:#fff;border:0;border-radius:16px;padding:8px 14px;min-height:52px;box-shadow:none}
.site-header .login-btn:hover{background:#24405a;filter:none;box-shadow:none}
.site-header .login-btn-label{white-space:nowrap;font-weight:800}
.site-header .account-avatar{background:#fff;color:#1263C8;width:44px;height:44px}
.site-header .account-menu{flex:0 0 auto}

/* ---------- Bannière : aucune couche HTML ne doit recouvrir l'image ---------- */
.feed-banner{margin:28px auto 0;width:min(1460px,calc(100% - 80px));height:auto;aspect-ratio:1460 / 167;border-radius:14px;background:#eaf5ff url("feed-banner-reference.png") center/100% 100% no-repeat;overflow:hidden;box-shadow:none}
.feed-banner-inner{display:block;height:100%;padding:0}
.feed-banner-inner > *{display:none !important}

/* ---------- Composeur : avatar et question réellement cliquables ---------- */
.composer-avatar{appearance:none;-webkit-appearance:none;border:1px solid var(--accent-line);cursor:pointer;padding:0}
.composer-avatar:hover{filter:none;box-shadow:0 3px 12px rgba(18,99,200,.12);transform:translateY(-1px)}
.composer-question{appearance:none;-webkit-appearance:none;width:100%;text-align:left;border:1px solid var(--border);background:var(--background);border-radius:28px;padding:14px 20px;font:inherit;font-size:15px;font-weight:500;color:var(--text-secondary);cursor:text}
.composer-question:hover{background:var(--surface);border-color:var(--border-strong);color:var(--text-secondary)}
.composer-question:focus-visible{outline:2px solid var(--accent-dark);outline-offset:2px}
.composer-head{margin-bottom:13px}

/* Une seule action Publier : la barre supérieure est l'action principale. */
.composer-publish{margin-left:auto;min-width:110px;height:46px;padding:0 17px;border:0;border-radius:11px;background:#0A9A5B;color:#fff;font:inherit;font-size:14px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;box-shadow:none}
.composer-publish:hover{background:#07844E;filter:none}
.composer-buttons{justify-content:flex-end}
#composerSubmit{display:none !important}

/* Sondage / Humeur */
.composer-special{margin-top:10px;padding:12px;border:1px solid var(--border);border-radius:12px;background:var(--background)}
.composer-special input{width:100%;border:1px solid var(--border);border-radius:9px;padding:10px 12px;background:var(--surface);color:var(--text-primary);font:inherit;font-size:.88rem}
.composer-poll-options{display:grid;gap:7px;margin-top:8px}
.composer-special-actions{display:flex;gap:7px;margin-top:9px;justify-content:flex-end}
.composer-special-label{margin:0 0 8px;font-size:.85rem;font-weight:700;color:var(--text-primary)}
.composer-moods{display:flex;flex-wrap:wrap;gap:7px}
.composer-moods button{border:1px solid var(--border);border-radius:999px;background:var(--surface);color:var(--text-primary);padding:7px 10px;font:inherit;font-size:.8rem;cursor:pointer}
.composer-moods button:hover,.composer-moods button.active{background:var(--accent-light);border-color:var(--accent-line);color:var(--accent-dark)}

/* Plus : réservé à l'administrateur et jamais visible pour un étudiant. */
#composerMoreWrap[hidden]{display:none !important}

/* ---------- Fichiers du fil ---------- */
.feed-file-card{display:flex;align-items:center;gap:12px;margin-top:12px;padding:11px 12px;border:1px solid var(--border);border-radius:12px;background:var(--background);text-decoration:none;color:var(--text-primary);transition:background .15s,border-color .15s,transform .15s}
.feed-file-card:hover{background:var(--accent-light);border-color:var(--accent-line);transform:translateY(-1px)}
.feed-file-icon{display:grid;place-items:center;flex:0 0 42px;width:42px;height:42px;border-radius:9px;background:var(--accent-light);color:var(--accent-dark)}
.feed-file-icon svg{width:22px;height:22px}
.feed-file-info{display:flex;flex-direction:column;min-width:0;flex:1;gap:2px}
.feed-file-info strong{font-size:.86rem;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-primary)}
.feed-file-info small{font-size:.73rem;color:var(--text-tertiary)}
.feed-file-open{display:grid;place-items:center;flex:0 0 30px;width:30px;height:30px;color:var(--accent-dark)}
.feed-file-open svg{width:17px;height:17px}
/* Ressources recentes (sidebar) : .feed-side-icon porte directement la
   classe de type (posee par fileKind() dans renderFeedSidebar()), sans
   passer par la structure de carte .feed-file-card. On ajoute donc ces
   selecteurs aux memes regles plutot que de redeclarer les couleurs dans
   une nouvelle classe. */
.feed-file-card.pdf .feed-file-icon, .feed-side-icon.pdf{background:#FEECEC;color:#D93636}
.feed-file-card.doc .feed-file-icon, .feed-side-icon.doc{background:#EAF3FF;color:#1263C8}
.feed-file-card.sheet .feed-file-icon, .feed-side-icon.sheet{background:#EAF7EF;color:#16804B}
.feed-file-card.slide .feed-file-icon, .feed-side-icon.slide{background:#FFF3E5;color:#C56B13}
.feed-file-card.archive .feed-file-icon, .feed-side-icon.archive{background:#F1ECFA;color:#6941A5}
.feed-file-card.text .feed-file-icon, .feed-side-icon.text{background:#F1F5F8;color:#617083}
.feed-file-card.generic .feed-file-icon, .feed-side-icon.generic{background:#EAF3FF;color:#1263C8}
.feed-side-icon.pdf,.feed-side-icon.doc,.feed-side-icon.sheet,.feed-side-icon.slide,.feed-side-icon.archive,.feed-side-icon.text,.feed-side-icon.generic{ font-size:0; }
.feed-side-icon svg{ width:19px; height:19px; }

/* ---------- Sondage publié dans le fil ---------- */
.feed-poll{margin-top:10px;padding:12px;border:1px solid var(--border);border-radius:12px;background:var(--background)}
.feed-poll > strong{display:block;font-size:.9rem;line-height:1.45;color:var(--text-primary)}
.feed-poll-options{display:grid;gap:7px;margin-top:9px}
.feed-poll-option{width:100%;text-align:left;border:1px solid var(--border);border-radius:9px;background:var(--surface);color:var(--text-primary);padding:9px 11px;font:inherit;font-size:.82rem;cursor:pointer}
.feed-poll-option:hover,.feed-poll-option.voted{background:var(--accent-light);border-color:var(--accent-line);color:var(--accent-dark)}
.feed-poll small{display:block;margin-top:7px;color:var(--text-tertiary);font-size:.72rem}

@media (max-width:767px){
  .site-header .nav-wrap{height:72px;min-height:72px;padding:0 12px;gap:7px}
  .site-header .theme-toggle-btn,.site-header .lang-switch-btn,.site-header .notif-bell{width:36px;height:36px;flex-basis:36px}
  .site-header .login-btn{min-height:44px;padding:5px 7px;border-radius:12px}
  .site-header .account-avatar{width:36px;height:36px}
  .site-header .login-btn-label{display:none}
  .site-header .login-btn .chevron{display:none}
  .feed-banner{margin:10px 12px 0;width:calc(100% - 24px);aspect-ratio:330 / 116;height:auto;background-image:url("feed-banner-mobile-reference.png");background-size:100% 100%;background-position:center}
  .feed-banner-inner{display:none}
  .composer-publish{min-width:42px;width:42px;height:42px;padding:0;border-radius:10px;position:sticky;right:0;z-index:2;box-shadow:-10px 0 10px -6px rgba(20,30,40,.18)}
  .composer-publish span{display:none}
  .composer-special{padding:10px}
  .feed-file-card{padding:10px}
  .feed-file-icon{flex-basis:38px;width:38px;height:38px}
}
.composer-file-selected{margin:9px 0 0}
.composer-file-chip{display:flex;align-items:center;gap:8px;width:fit-content;max-width:100%;padding:7px 9px;border:1px solid var(--border);border-radius:10px;background:var(--background);color:var(--text-primary)}
.composer-file-chip svg{width:17px;height:17px;color:var(--accent-dark);flex:0 0 auto}
.composer-file-chip strong{max-width:320px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.8rem}
.composer-file-chip small{color:var(--text-tertiary);font-size:.72rem;white-space:nowrap}
.composer-file-chip button{border:0;background:transparent;color:var(--text-tertiary);font-size:17px;line-height:1;cursor:pointer;padding:2px 4px}
.composer-file-chip button:hover{color:var(--error-text)}


/* =====================================================================
   V9.54 — FIL D’ACTUALITÉ : CORRECTIONS CIBLÉES
   - header parfaitement uniforme
   - Apparence à côté des notifications
   - compte = avatar + nom + chevron, sans icône personnage
   - bannière basée uniquement sur les images de référence
   - un seul bouton Publier, dans la barre supérieure
   - Sondage/Humeur visibles et interactifs
   - Plus réservé exclusivement à l’administrateur
   ===================================================================== */
.site-header,
.site-header .nav-wrap{background:#102130 !important;color:#fff}
.site-header .top-line{display:none !important}
.site-header .theme-toggle-btn{
  display:inline-flex !important;align-items:center;justify-content:center;
  flex:0 0 40px;width:40px;height:40px;padding:0;
  border:1px solid rgba(255,255,255,.16);border-radius:50%;
  background:transparent;color:#fff;box-shadow:none;
}
.site-header .theme-toggle-btn:hover{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.24);color:#fff;filter:none;box-shadow:none}
.site-header .notif-bell{background:transparent;border:0;color:#fff}
.site-header .login-btn{background:#193149;color:#fff;border:0;border-radius:16px;padding:8px 14px;min-height:52px;box-shadow:none}
.site-header .login-btn:hover{background:#24405a;color:#fff;filter:none;box-shadow:none}
.site-header .login-btn-label{display:inline-block;white-space:nowrap;font-weight:800}
/* Aucune icône personnage dans le bouton du compte : seul le chevron reste. */
.site-header .login-btn > svg:not(.chevron),
.site-header .login-btn > i:not(.chevron){display:none !important}
.site-header .login-btn .chevron{display:block;width:14px;height:14px}

/* Bannière : aucun élément HTML ne doit se mélanger à l’image de référence. */
.feed-banner{
  background:#eaf5ff url("feed-banner-reference.png") center/100% 100% no-repeat !important;
  overflow:hidden;
}
.feed-banner-inner > *{display:none !important}

/* Zone de publication : une seule action Publier. */
.composer-types{display:flex;align-items:center}
.composer-publish{
  margin-left:auto;display:inline-flex !important;align-items:center;justify-content:center;
  min-width:110px;height:46px;padding:0 17px;border:0;border-radius:11px;
  background:#0A9A5B;color:#fff !important;font-weight:800;
}
.composer-publish:hover{background:#07844E;color:#fff !important}
#composerSubmit{display:none !important}
.composer-buttons #composerSubmit{display:none !important}

/* Le bouton Plus n’est affiché que lorsque app.js confirme le rôle admin. */
#composerMoreWrap[hidden]{display:none !important}

@media (max-width:767px){
  .site-header .nav-wrap{gap:6px}
  .site-header .theme-toggle-btn{
    flex:0 0 36px;width:36px;height:36px;border-radius:10px;
  }
  .site-header .theme-toggle-icon{width:18px;height:18px}
  .site-header .notif-bell{width:36px;height:36px}
  .site-header .account-menu{height:72px}
  .site-header .login-btn{padding:6px;min-height:44px;background:transparent}
  .site-header .account-avatar{width:36px;height:36px}
  .site-header .login-btn-label{display:none}
  .site-header .login-btn .chevron{display:none}
  .feed-banner{
    background-image:url("feed-banner-mobile-reference.png") !important;
    background-size:100% 100% !important;background-position:center !important;
  }
  .composer-types{gap:2px;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .composer-publish{min-width:42px;width:42px;height:42px;padding:0;border-radius:10px;position:sticky;right:0;z-index:2;box-shadow:-10px 0 10px -6px rgba(20,30,40,.18)}
  .composer-publish span{display:none}
}


/* =====================================================================
   EMPLOI DU TEMPS V2 — maquette GRME CONNECT
   Grille universitaire, responsive mobile, filtres, CRUD admin et impression.
   ===================================================================== */
.schedule-toolbar{
  display:flex;align-items:flex-end;justify-content:space-between;gap:16px;
  margin:0 0 18px;flex-wrap:wrap;
}
.schedule-filter-group{display:flex;gap:10px;flex-wrap:wrap;flex:1}
.schedule-filter-group label,.schedule-admin-top label{
  display:flex;flex-direction:column;gap:6px;font-size:.78rem;font-weight:700;color:var(--text-secondary);
}
.schedule-filter-group select,.schedule-admin-top select{
  min-width:165px;height:40px;border:1px solid var(--border);border-radius:10px;background:var(--surface);padding:0 12px;color:var(--text-primary);
}
.schedule-actions{display:flex;gap:8px;flex-wrap:wrap}
.schedule-actions .ghost-btn{display:inline-flex;align-items:center;gap:7px}
.schedule-print-header{
  display:flex;justify-content:space-between;align-items:center;gap:20px;
  margin:0 0 12px;padding:12px 16px;border:1px solid var(--border);border-radius:12px;background:var(--surface);
}
.schedule-print-header div{display:flex;flex-direction:column;gap:3px}
.schedule-print-header strong{font-size:1rem;color:var(--text-primary)}
.schedule-print-header span{font-size:.78rem;color:var(--text-secondary)}
.schedule-week-table th small{display:block;font-size:.67rem;font-weight:500;opacity:.9;margin-top:3px}
.schedule-week-table .schedule-hours-head{width:82px}
.schedule-course-card{
  width:100%;border:0;background:transparent;padding:2px;display:flex;flex-direction:column;
  align-items:center;gap:3px;text-align:center;cursor:pointer;color:inherit;
}
.schedule-course-card strong{font-size:.8rem;line-height:1.25}
.schedule-course-type{
  display:inline-block;padding:2px 7px;border-radius:999px;font-size:.62rem;font-weight:800;
  background:rgba(255,255,255,.7);color:var(--text-secondary);
}
.schedule-course-meta{display:flex;align-items:center;gap:3px;font-size:.68rem;color:var(--text-secondary)}
.schedule-course-meta svg{width:12px;height:12px}
.schedule-empty-state{
  padding:28px;text-align:center;border:1px dashed var(--border);border-radius:12px;color:var(--text-tertiary);background:var(--surface);
}
.schedule-mobile-grid{display:none}
.schedule-admin-top{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.schedule-entry-form{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;padding:14px;
  border:1px solid var(--border);border-radius:14px;background:var(--background);margin-bottom:14px;
  transition:border-color var(--t-fast),box-shadow var(--t-fast);
}
.schedule-entry-form.is-editing{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-light)}
.schedule-entry-form label{display:flex;flex-direction:column;gap:6px;font-size:.76rem;font-weight:700;color:var(--text-secondary)}
.schedule-entry-form input,.schedule-entry-form select{
  width:100%;height:40px;border:1px solid var(--border);border-radius:9px;background:var(--surface);padding:0 10px;color:var(--text-primary);
}
.schedule-entry-actions{grid-column:1/-1;display:flex;justify-content:flex-end;gap:8px}
.schedule-edit-btn{border:0;background:var(--info-bg);color:var(--primary);padding:7px 9px;border-radius:var(--radius-sm);cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.schedule-edit-btn:hover{filter:brightness(.96)}
.manage-item-actions{display:flex;gap:6px;align-items:center}
@media(max-width:900px){
  .schedule-entry-form{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:720px){
  .schedule-toolbar{align-items:stretch}
  .schedule-filter-group{display:grid;grid-template-columns:1fr 1fr;width:100%}
  .schedule-filter-group label:last-child{grid-column:1/-1}
  .schedule-filter-group select{min-width:0;width:100%}
  .schedule-actions{width:100%}
  .schedule-actions .ghost-btn{flex:1;justify-content:center}
  .weekly-schedule-nav{display:none}
  .weekly-schedule-grid{display:none}
  .schedule-mobile-grid{display:block}
  .schedule-mobile-days{display:grid;grid-template-columns:repeat(6,1fr);gap:5px;margin-bottom:12px}
  .schedule-mobile-days button{
    border:1px solid var(--border);background:var(--surface);border-radius:9px;padding:7px 2px;
    font-weight:700;color:var(--text-secondary);font-size:.7rem;
  }
  .schedule-mobile-days button.active{background:var(--primary);color:#fff;border-color:var(--primary)}
  .schedule-mobile-days small{display:block;font-size:.65rem;margin-top:2px}
  .schedule-mobile-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
  .schedule-mobile-title span{font-size:.75rem;color:var(--text-tertiary)}
  .schedule-mobile-list{display:flex;flex-direction:column;gap:9px}
  .schedule-mobile-course{
    display:grid;grid-template-columns:82px 1fr;gap:12px;border-left:4px solid;
    border-radius:12px;padding:12px;background:var(--surface);box-shadow:0 1px 3px rgba(0,0,0,.05)
  }
  .schedule-mobile-time{font-weight:800;font-size:.8rem;padding-top:3px}
  .schedule-mobile-course h4{margin:3px 0 7px;font-size:.9rem;line-height:1.25}
  .schedule-mobile-course p{margin:3px 0;font-size:.72rem;color:var(--text-secondary);display:flex;gap:5px;align-items:center}
  .schedule-mobile-course p svg{width:13px;height:13px}
  .schedule-print-header{display:none}
  .schedule-entry-form{grid-template-columns:1fr}
  .schedule-entry-actions{grid-column:auto}
  .schedule-admin-top{align-items:stretch}
  .schedule-admin-top .structure-toolbar{width:100%}
}
@media print{
  body.schedule-print-mode *{visibility:hidden!important}
  body.schedule-print-mode #view-events,
  body.schedule-print-mode #view-events *{visibility:visible!important}
  body.schedule-print-mode #view-events{position:absolute;left:0;top:0;width:100%}
  body.schedule-print-mode .events-subpanel[data-events-subpanel="calendar"],
  body.schedule-print-mode .schedule-toolbar,
  body.schedule-print-mode .weekly-schedule-nav,
  body.schedule-print-mode .schedule-mobile-grid,
  body.schedule-print-mode .site-header,
  body.schedule-print-mode footer{display:none!important}
  body.schedule-print-mode .events-subpanel[data-events-subpanel="schedule"]{display:block!important}
  body.schedule-print-mode .schedule-week-table{font-size:9pt}
  body.schedule-print-mode .schedule-week-table th,
  body.schedule-print-mode .schedule-week-table td{padding:7px 5px}
}

/* =====================================================================
   ADMIN SHELL V2 -- Secteur 0 (Tableau de bord) + navigation laterale
   Integration des maquettes validees. Reutilise les variables de theme
   existantes (primary, surface, border, radius, shadow) : aucune
   nouvelle palette codee en dur, pour rester coherent en mode sombre.
   ===================================================================== */
.admin-shell{display:grid;grid-template-columns:264px 1fr;gap:0;align-items:start;background:var(--background);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm)}
.admin-sidebar{background:var(--surface);border-right:1px solid var(--border);padding:18px 14px;display:flex;flex-direction:column;gap:14px;min-height:520px;position:sticky;top:0;align-self:stretch}
.admin-sidebar{background:#151d2e;border-right:none;color:#fff}
.admin-sidebar-brand{display:flex;align-items:center;gap:10px;padding:4px 6px 14px;border-bottom:1px solid rgba(255,255,255,.12)}
.admin-sidebar-brand img{width:34px;height:34px;border-radius:8px;object-fit:contain}
.admin-sidebar-brand strong{display:block;font-size:.92rem;color:#fff}
.admin-sidebar-brand small{display:block;font-size:.72rem;color:rgba(255,255,255,.55)}
.admin-sidebar-search input{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);color:#fff}
.admin-sidebar-search input::placeholder{color:rgba(255,255,255,.4)}
.admin-sidebar-search i{color:rgba(255,255,255,.5)}
.admin-sidebar-search{position:relative}
.admin-sidebar-search input{width:100%;padding:9px 12px 9px 34px;border:1px solid var(--border-strong);border-radius:var(--radius-sm);background:var(--background);color:var(--text-primary);font:inherit;font-size:.84rem}
.admin-sidebar-search input:focus{outline:2px solid var(--primary-line);border-color:var(--primary)}
.admin-sidebar-search i{position:absolute;left:10px;top:50%;transform:translateY(-50%);width:15px;height:15px;color:var(--text-tertiary)}
.admin-sidebar-nav{display:flex;flex-direction:column;gap:3px;flex:1}
.admin-sidebar-section-label{font-size:.7rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:rgba(255,255,255,.4);margin:14px 6px 4px}
.admin-nav-item{position:relative;display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:var(--radius-md);border:none;background:transparent;color:rgba(255,255,255,.72);font:inherit;font-size:.86rem;font-weight:600;text-align:left;cursor:pointer;width:100%}
.admin-nav-item i{width:16px;height:16px;flex:none}
.admin-nav-item:hover{background:rgba(255,255,255,.08);color:#fff}
.admin-nav-item.active{background:#2f6fed;color:#fff;box-shadow:0 4px 12px rgba(47,111,237,.35)}
.admin-nav-item.active i{color:#fff}
.admin-nav-item.active .admin-nav-num{background:rgba(255,255,255,.25);color:#fff}
.admin-nav-item.active .admin-nav-text small{color:rgba(255,255,255,.8)}
.admin-nav-num{flex:none;width:18px;height:18px;border-radius:6px;background:rgba(255,255,255,.1);color:rgba(255,255,255,.55);font-size:.68rem;font-weight:700;display:flex;align-items:center;justify-content:center}
.admin-nav-icon{flex:none;width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.08)}
.admin-nav-icon.n1{background:rgba(15,107,74,.35);color:#7BE0B4}
.admin-nav-icon.n2{background:rgba(47,111,237,.3);color:#8FB6FF}
.admin-nav-icon.n3{background:rgba(234,156,34,.3);color:#FFCB80}
.admin-nav-icon.n4{background:rgba(147,51,234,.3);color:#D2A6FF}
.admin-nav-icon.n5{background:rgba(219,39,119,.3);color:#FF9FCB}
.admin-nav-icon.n6{background:rgba(20,184,166,.3);color:#7EEBDD}
.admin-nav-icon.n7,.admin-nav-icon.n8,.admin-nav-icon.n9{background:rgba(255,255,255,.08);color:rgba(255,255,255,.65)}
.admin-nav-text{display:flex;flex-direction:column;gap:1px;min-width:0}
.admin-nav-text small{display:block;font-size:.68rem;font-weight:500;color:rgba(255,255,255,.45);white-space:normal;line-height:1.25}
.admin-sidebar-foot{display:flex;flex-direction:column;gap:3px;padding-top:10px;border-top:1px solid rgba(255,255,255,.12)}
.admin-sidebar-info-card{margin-top:10px;padding:12px;border-radius:var(--radius-md);background:rgba(255,255,255,.06);display:flex;flex-direction:column;gap:2px}
.admin-sidebar-info-card strong{font-size:.78rem;color:#fff}
.admin-sidebar-info-card span{font-size:.7rem;color:rgba(255,255,255,.5)}
.admin-space-badge{display:inline-flex;align-items:center;gap:6px;background:var(--primary-light);color:var(--primary-dark);font-size:.72rem;font-weight:700;padding:4px 10px;border-radius:999px;margin-bottom:8px}
.admin-space-badge i{width:13px;height:13px}
.admin-main{padding:20px 22px;min-width:0}
.admin-topbar{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;margin-bottom:18px;flex-wrap:wrap}
.admin-topbar h2{margin:0 0 2px;font-size:1.3rem;color:var(--text-primary)}
.admin-topbar p{margin:0;color:var(--text-secondary);font-size:.88rem}
.admin-page{display:none}
.admin-page.active{display:block}
.admin-dash-stats{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-bottom:18px}
.admin-stat-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);padding:14px;display:flex;flex-direction:column;gap:6px}
.admin-stat-card .admin-stat-icon{width:32px;height:32px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center}
.admin-stat-card .admin-stat-icon i{width:16px;height:16px}
.admin-stat-card strong{font-size:1.4rem;color:var(--text-primary);line-height:1.1}
.admin-stat-card span{font-size:.78rem;color:var(--text-secondary)}
.admin-stat-icon.c1{background:var(--primary-light);color:var(--primary)}
.admin-stat-icon.c2{background:#E7F0FE;color:#2563EB}
.admin-stat-icon.c3{background:#FDEFE3;color:#C2680B}
.admin-stat-icon.c4{background:#F1E9FB;color:#7C3AED}
.admin-stat-icon.c5{background:#FDE8EC;color:#D6336C}
.admin-stat-icon.c6{background:#E6F7F3;color:#0F9D78}
.admin-dash-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:16px}
.admin-dash-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);padding:16px}
.admin-dash-card h3{margin:0 0 12px;font-size:.92rem;color:var(--text-primary);display:flex;align-items:center;gap:8px}
.admin-dash-card h3 i{width:16px;height:16px;color:var(--primary)}
.admin-dash-chart{display:flex;align-items:flex-end;gap:8px;height:120px;padding-top:6px}
.admin-dash-chart .bar-wrap{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;height:100%;justify-content:flex-end}
.admin-dash-chart .bar{width:100%;max-width:26px;border-radius:5px 5px 0 0;background:var(--primary);min-height:2px}
.admin-dash-chart .bar-label{font-size:.68rem;color:var(--text-tertiary)}
.admin-dash-list{display:flex;flex-direction:column;gap:10px;margin-top:2px}
.admin-dash-list-item{display:flex;gap:10px;align-items:flex-start;padding:8px 0;border-bottom:1px solid var(--border)}
.admin-dash-list-item:last-child{border-bottom:none;padding-bottom:0}
.admin-dash-list-item i{width:15px;height:15px;color:var(--primary);flex:none;margin-top:2px}
.admin-dash-list-item .t{font-size:.85rem;color:var(--text-primary);font-weight:600}
.admin-dash-list-item .s{font-size:.76rem;color:var(--text-tertiary)}
.admin-dash-empty{color:var(--text-tertiary);font-size:.85rem;padding:8px 0}
.admin-quick-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:18px}
.admin-quick-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);padding:14px;display:flex;flex-direction:column;gap:8px;cursor:pointer;text-align:left;font:inherit}
.admin-quick-card:hover{border-color:var(--primary-line);box-shadow:var(--shadow-xs)}
.admin-quick-card i{width:18px;height:18px;color:var(--primary)}
.admin-quick-card strong{font-size:.84rem;color:var(--text-primary)}
.admin-mobile-nav-toggle{display:none;align-items:center;gap:8px;padding:8px 12px;border:1px solid var(--border-strong);border-radius:var(--radius-sm);background:var(--surface);color:var(--text-primary);font:inherit;font-size:.85rem;font-weight:600;margin-bottom:12px}
.admin-sidebar-backdrop{display:none}
@media (max-width:980px){
  .admin-shell{grid-template-columns:1fr}
  .admin-sidebar{position:fixed;left:0;top:0;bottom:0;width:78vw;max-width:300px;z-index:60;transform:translateX(-100%);transition:transform var(--t-fast);box-shadow:var(--shadow-lg)}
  .admin-sidebar.open{transform:translateX(0)}
  .admin-mobile-nav-toggle{display:flex}
  .admin-sidebar-backdrop{display:none;position:fixed;inset:0;background:rgba(15,25,35,.45);z-index:55}
  .admin-sidebar-backdrop.open{display:block}
  .admin-dash-stats{grid-template-columns:repeat(2,1fr)}
  .admin-dash-grid{grid-template-columns:1fr}
  .admin-quick-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:520px){
  .admin-dash-stats{grid-template-columns:1fr 1fr}
  .admin-main{padding:14px}
}

/* ===================================================================
   V1.4.0 — Secteur 3 « Structure académique » (fidélité maquette)
   =================================================================== */
.admin-page-icon.n4{background:#F1E4FF;color:#9333EA}

/* ===== SECTEUR 4 — NOTES : intégration maquette admin ===== */
.grades-page-header{ margin-bottom:18px; }
.grades-stat-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin:12px 0 18px;}
.grades-stat-card{display:flex;gap:12px;align-items:center;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface);padding:14px;box-shadow:var(--shadow-sm);min-width:0;}
.grades-stat-card>span{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;flex:0 0 auto;}
.grades-stat-card svg{width:25px;height:25px}.grades-stat-card strong{display:block;font-size:1.35rem;color:var(--text-primary);line-height:1}.grades-stat-card small{color:var(--text-secondary);font-weight:600}.gs-blue>span{background:#eaf3ff;color:#1263c8}.gs-green>span{background:#e8f8ef;color:#0a9a5b}.gs-purple>span{background:#f2e9ff;color:#7c3aed}.gs-orange>span{background:#fff2dd;color:#f28c00}.gs-pink>span{background:#ffeaf2;color:#e91e63}
.grades-layout-v2{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:18px;align-items:start}.grades-main-v2{min-width:0}.grades-sidebar-v2{display:flex;flex-direction:column;gap:14px;min-width:0}.grades-side-card h3,.grades-table-head h3{display:flex;align-items:center;gap:8px;margin:0;color:var(--text-primary)}
.grades-table-card{border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface);padding:14px;box-shadow:var(--shadow-sm);overflow:hidden}.grades-table-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}.grades-table-actions{display:flex;gap:8px;flex-wrap:wrap}.grades-side-stats{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}.grades-side-stats li{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 0;border-bottom:1px solid var(--border)}.grades-side-stats li:last-child{border-bottom:0}.grades-side-stats span{color:var(--text-secondary);font-size:.86rem}.grades-side-stats strong{font-variant-numeric:tabular-nums;color:var(--text-primary)}.grades-quick-actions{display:flex;flex-direction:column;gap:8px;margin-top:12px}.grades-sidebar-v2 .quick-action-btn{justify-content:flex-start;width:100%}
@media (max-width:1400px){.grades-layout-v2{grid-template-columns:1fr}.grades-sidebar-v2{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));}.grades-stat-grid{grid-template-columns:repeat(3,minmax(0,1fr));}}
@media (max-width:900px){.grades-stat-grid,.grades-sidebar-v2{grid-template-columns:1fr 1fr}.grades-table-head{align-items:flex-start;flex-direction:column}.grades-list{overflow-x:auto}.grade-row{min-width:680px}}
@media (max-width:620px){.grades-stat-grid,.grades-sidebar-v2{grid-template-columns:1fr}.grades-stat-card{padding:12px}.grades-toolbar{display:grid;grid-template-columns:1fr}.grades-actions .ghost-btn,.grades-actions .primary{min-height:42px}.grade-row{min-width:0;grid-template-columns:1fr 1fr}.grade-row span:nth-child(2)::before{content:'Matricule : ';font-weight:700;color:var(--text-secondary)}.grade-row span:nth-child(3)::before{content:'CC ';font-weight:700;color:var(--text-secondary)}.grade-row span:nth-child(4)::before{content:'Examen ';font-weight:700;color:var(--text-secondary)}.grade-row span:nth-child(5)::before{content:'Moyenne : ';font-weight:700;color:var(--text-secondary)}.grade-row span:nth-child(6)::before{content:'Statut : ';font-weight:700;color:var(--text-secondary)}}

/* ===== SECTEUR 5 — GÉRER LES RÔLES : intégration maquette admin ===== */
.roles-page-header{margin-bottom:18px}.roles-stat-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin:12px 0 18px}.roles-stat-card{display:flex;gap:12px;align-items:center;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface);padding:14px;box-shadow:var(--shadow-sm);min-width:0}.roles-stat-card>span{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;flex:0 0 auto}.roles-stat-card svg{width:25px;height:25px}.roles-stat-card strong{display:block;font-size:1.35rem;color:var(--text-primary);line-height:1}.roles-stat-card small{color:var(--text-secondary);font-weight:600}.rs-blue>span{background:#eaf3ff;color:#1263c8}.rs-green>span{background:#e8f8ef;color:#0a9a5b}.rs-orange>span{background:#fff2dd;color:#f28c00}.rs-mint>span{background:#e9fbf2;color:#10a66a}.rs-pink>span{background:#ffeaf2;color:#e91e63}
.roles-layout-v2{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:18px;align-items:start}.roles-main-v2{min-width:0}.roles-sidebar-v2{display:flex;flex-direction:column;gap:14px;min-width:0}.roles-tabs-v2{display:flex;gap:18px;align-items:center;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface);padding:0 12px;margin-bottom:14px;overflow-x:auto}.roles-subtab{display:flex;align-items:center;gap:8px;border:0;background:transparent;color:var(--text-secondary);font-weight:800;padding:14px 12px;border-bottom:3px solid transparent;cursor:pointer;white-space:nowrap}.roles-subtab.active{color:var(--accent-dark);border-bottom-color:var(--accent)}.roles-subtab svg{width:18px;height:18px}
.roles-filters-row{display:grid;grid-template-columns:minmax(220px,1.8fr) repeat(3,minmax(140px,1fr)) auto;gap:10px;margin-bottom:14px}.roles-filters-row label{display:flex;align-items:center;min-width:0}.roles-filters-row input,.roles-filters-row select{width:100%;height:42px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);color:var(--text-primary);padding:0 12px;font:inherit;font-weight:600}.roles-filter-search{position:relative}.roles-filter-search svg{position:absolute;left:12px;width:18px;height:18px;color:var(--text-tertiary)}.roles-filter-search input{padding-left:38px}.roles-table-card{border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface);padding:14px;box-shadow:var(--shadow-sm);overflow:hidden}.roles-table-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}.roles-table-head h3,.roles-side-card h3{display:flex;align-items:center;gap:8px;margin:0;color:var(--text-primary)}.roles-table-wrap{overflow:auto;border:1px solid var(--border);border-radius:var(--radius-md)}.roles-table{width:100%;min-width:980px;border-collapse:collapse;font-size:.84rem}.roles-table th,.roles-table td{padding:9px 10px;border-bottom:1px solid var(--border);text-align:left;vertical-align:middle}.roles-table th{background:var(--info-bg);color:var(--text-secondary);font-size:.72rem;text-transform:uppercase;letter-spacing:.03em}.roles-table tr:last-child td{border-bottom:0}.role-badge,.role-status{display:inline-flex;align-items:center;justify-content:center;padding:5px 10px;border-radius:var(--radius-full);font-size:.72rem;font-weight:800}.role-badge.admin{background:#ffe4ee;color:#d80f55}.role-badge.moderator{background:#f0e5ff;color:#7c18d6}.role-badge.teacher{background:#fff0dd;color:#d86600}.role-badge.student{background:#e6f2ff;color:#0966d8}.role-badge.visitor{background:#edf2f7;color:#617085}.role-status.active{background:var(--success-bg);color:var(--success-text)}.role-status.inactive,.role-status.deactivated,.role-status.deleted{background:var(--error-bg);color:var(--error-text)}.roles-table .role-select{min-width:130px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);padding:7px 8px;color:var(--text-primary);font:inherit}.roles-bulk-row{display:flex;gap:10px;align-items:center;margin-top:12px}.roles-bulk-row select{min-width:240px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);padding:10px 12px;color:var(--text-primary)}
.roles-system-list,.roles-quick-actions{display:flex;flex-direction:column;gap:8px;margin-top:12px}.roles-system-item{display:grid;grid-template-columns:42px 1fr auto 16px;gap:10px;align-items:center;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface);padding:10px;text-align:left;cursor:pointer}.roles-system-icon{width:38px;height:38px;border-radius:10px;display:grid;place-items:center}.roles-system-icon.admin{background:#ffe4ee;color:#d80f55}.roles-system-icon.moderator{background:#f0e5ff;color:#7c18d6}.roles-system-icon.teacher{background:#fff0dd;color:#d86600}.roles-system-icon.student{background:#e6f2ff;color:#0966d8}.roles-system-icon.visitor{background:#edf2f7;color:#617085}.roles-system-item strong{display:block;color:var(--text-primary);font-size:.86rem}.roles-system-item small{display:block;color:var(--text-secondary);font-size:.75rem}.roles-system-item b{background:var(--accent);color:#fff;border-radius:var(--radius-full);padding:3px 8px;font-size:.75rem}.roles-sidebar-v2 .quick-action-btn{justify-content:flex-start;width:100%}
@media(max-width:1400px){.roles-layout-v2{grid-template-columns:1fr}.roles-sidebar-v2{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}.roles-stat-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.roles-filters-row{grid-template-columns:1fr 1fr}}
@media(max-width:760px){.roles-stat-grid,.roles-sidebar-v2,.roles-filters-row{grid-template-columns:1fr}.roles-table-head{flex-direction:column;align-items:flex-start}.roles-bulk-row{flex-direction:column;align-items:stretch}.roles-bulk-row select{min-width:0;width:100%}.roles-stat-card{padding:12px}}
.roles-utility-panel{margin-top:14px;border:1px dashed var(--primary-line);border-radius:var(--radius-md);background:var(--primary-light);padding:14px}.roles-utility-head{display:flex;align-items:center;justify-content:space-between;gap:10px}.roles-utility-head h3{margin:0;color:var(--primary-dark)}.roles-utility-panel[hidden]{display:none!important}.roles-quick-actions .quick-action-btn{opacity:1!important;filter:none!important;pointer-events:auto!important}.roles-quick-actions .qa-pink{background:#ffeaf2;color:#d80f55;border-color:#ffd1df}.roles-quick-actions .qa-purple{background:#f0e5ff;color:#7c18d6;border-color:#dfc4ff}.roles-quick-actions .qa-orange{background:#fff0dd;color:#c55300;border-color:#ffd9a8}.roles-quick-actions .qa-green{background:#e8f8ef;color:#087a49;border-color:#bdebd1}.roles-quick-actions .qa-blue{background:#eaf3ff;color:#0b5fcb;border-color:#cfe4ff}

/* V1.5.4 — retour immédiat pendant publication */
button.is-loading{opacity:.82;cursor:progress;pointer-events:none}.btn-spinner{display:inline-block;width:16px;height:16px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;vertical-align:-3px;animation:btnSpin .75s linear infinite}@keyframes btnSpin{to{transform:rotate(360deg)}}

/* V1.5.5 — actions sociales sur annonces/ressources/opportunités */
.content-social-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:12px;padding-top:10px;border-top:1px solid var(--border)}.content-social-btn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--border);border-radius:var(--radius-full);background:var(--surface);color:var(--text-secondary);padding:7px 12px;font:inherit;font-weight:800;cursor:pointer}.content-social-btn:hover,.content-social-btn.active{background:var(--primary-light);border-color:var(--primary-line);color:var(--primary-dark)}.content-social-btn b{min-width:20px;height:20px;border-radius:var(--radius-full);display:inline-grid;place-items:center;background:var(--accent);color:#fff;font-size:.72rem}.opp-slide-body .content-social-actions{border-top-color:rgba(255,255,255,.18)}

/* V1.6.0 — Paramètres administrateur */
.admin-settings-tabs{display:flex;gap:10px;overflow-x:auto;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface);padding:8px;margin:12px 0}.admin-settings-tab{display:flex;align-items:center;gap:8px;border:0;background:transparent;border-radius:var(--radius-sm);padding:10px 16px;color:var(--text-secondary);font-weight:800;white-space:nowrap;cursor:pointer}.admin-settings-tab.active{background:var(--primary-light);color:var(--primary-dark);box-shadow:inset 0 -3px 0 var(--primary)}.admin-settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.admin-settings-grid.one{grid-template-columns:1fr}.admin-settings-card{border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface);padding:16px;box-shadow:var(--shadow-sm)}.admin-settings-card h3{display:flex;align-items:center;gap:8px;margin:0 0 14px;color:var(--text-primary)}.admin-settings-card label{display:flex;flex-direction:column;gap:6px;margin:10px 0;font-size:.78rem;font-weight:800;color:var(--text-secondary)}.admin-settings-card input,.admin-settings-card textarea,.admin-settings-card select{border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);color:var(--text-primary);padding:10px 12px;font:inherit;font-weight:600}.admin-settings-switch{flex-direction:row!important;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border);padding:8px 0}.admin-settings-switch input{width:42px;height:22px;accent-color:var(--primary)}.admin-settings-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:14px}.admin-settings-card.info{background:var(--info-bg)}@media(max-width:900px){.admin-settings-grid{grid-template-columns:1fr}.admin-settings-actions{flex-direction:column}.admin-settings-actions button{width:100%}}

/* V1.6.1 — icônes sociales conformes : cœur, marque-page, partage */
.post-action i,.post-action svg,.post-bookmark i,.post-bookmark svg,.content-social-btn i,.content-social-btn svg{width:20px;height:20px;stroke-width:2.2}.post-action-like.mine i,.post-action-like.mine svg,.content-social-btn.active [data-lucide="heart"],.content-social-btn.active svg{fill:currentColor}.post-bookmark.mine i,.post-bookmark.mine svg,.content-social-btn.active [data-lucide="bookmark"]{fill:currentColor}.content-social-actions{justify-content:space-around;border-top:1px solid var(--border);padding-top:12px}.content-social-btn{border:0;background:transparent;border-radius:var(--radius-sm);color:var(--text-secondary);padding:8px 12px}.content-social-btn:hover,.content-social-btn.active{background:transparent;color:var(--text-primary)}.content-social-btn b{background:transparent;color:inherit;min-width:auto;height:auto;font-size:.95rem}.post-actions-row{justify-content:space-around}.post-action,.post-bookmark{border:0!important;background:transparent!important;color:var(--text-secondary)!important}.post-action:hover,.post-action.mine,.post-bookmark:hover,.post-bookmark.mine{color:var(--text-primary)!important;background:transparent!important}
body.admin-compact-mode .admin-card,body.admin-compact-mode .panel,body.admin-compact-mode .admin-settings-card{padding:12px!important}body.admin-compact-mode .admin-shell{font-size:.94rem}.admin-log-row{display:flex;justify-content:space-between;gap:10px;border-bottom:1px solid var(--border);padding:9px 0}.admin-log-row small{color:var(--text-tertiary)}

/* V1.6.6 — Secteur 0 dashboard professionnel */
.admin-dash-card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}.admin-dash-card-head h3{margin:0!important}.admin-dash-card-head small{color:var(--text-tertiary);font-weight:700}.link-btn{border:0;background:transparent;color:var(--primary);font:inherit;font-weight:800;font-size:.82rem;display:inline-flex;align-items:center;gap:6px;cursor:pointer}.link-btn i{width:14px;height:14px}.admin-attention-card{margin-bottom:16px}.admin-attention-list{display:grid;gap:10px}.admin-attention-item{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;border:1px solid var(--border);border-radius:var(--radius-md);padding:10px;background:var(--background)}.admin-attention-icon{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:#FFF3D9;color:#C2680B}.admin-attention-icon i{width:18px;height:18px}.admin-attention-item strong{display:block;color:var(--text-primary);font-size:.88rem}.admin-attention-item small{display:block;color:var(--text-tertiary);font-size:.76rem}.ghost-btn.compact{padding:7px 10px;font-size:.78rem}.admin-dash-chart-card{grid-row:span 2}.admin-dash-chart{min-height:190px;background:linear-gradient(180deg,transparent 0,transparent 24%,var(--border) 25%,transparent 26%,transparent 49%,var(--border) 50%,transparent 51%,transparent 74%,var(--border) 75%,transparent 76%);border-radius:12px;padding:8px 8px 0}.admin-stat-card{position:relative;overflow:hidden}.admin-stat-card:after{content:"";position:absolute;right:-18px;bottom:-22px;width:70px;height:70px;border-radius:999px;background:currentColor;opacity:.045}@media(max-width:720px){.admin-attention-item{grid-template-columns:auto 1fr}.admin-attention-item button{grid-column:1/-1}.admin-dash-card-head{align-items:flex-start;flex-direction:column}}
/* V1.6.7 — Secteur 1 Publication */
.publish-form-actions{align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap}.publish-draft-btn{border-color:var(--primary-line);color:var(--primary-dark);background:var(--primary-light)}.publish-main form{position:relative}.publish-main form:before{content:"Informations générales • Contenu • Publication";grid-column:1/-1;display:block;color:var(--text-tertiary);font-size:.75rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em;margin:2px 0 4px}.file-dropzone{border-style:dashed!important;background:linear-gradient(180deg,var(--surface),var(--background))}.publish-sidebar{position:sticky;top:18px;align-self:start}@media(max-width:980px){.publish-sidebar{position:static}.publish-form-actions button{width:100%}}
/* V1.6.8 — Secteur 2 Gestion contenu */
.manage-category-tabs{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}.manage-cat-tab{min-height:86px}.manage-category-section{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:16px}.manage-category-section h3{margin-top:0}.manage-item-actions .edit-btn,.manage-item-actions .delete-btn{display:inline-grid;place-items:center}

/* V1.6.9 — Secteur 3 Structure académique */
.structure-stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:14px 0}.structure-stat-card{border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface);padding:14px;display:grid;grid-template-columns:auto 1fr;gap:4px 12px;align-items:center}.structure-stat-card i{grid-row:1/3;width:28px;height:28px;color:var(--primary)}.structure-stat-card strong{font-size:1.35rem;color:var(--text-primary)}.structure-stat-card span{font-size:.78rem;color:var(--text-tertiary)}.structure-pro-layout{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:16px}.structure-tabs{display:flex;gap:8px;overflow-x:auto;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);padding:8px;margin-bottom:12px}.structure-tab{border:0;background:transparent;border-radius:var(--radius-sm);padding:10px 14px;font:inherit;font-weight:800;color:var(--text-secondary);display:flex;align-items:center;gap:8px;white-space:nowrap;cursor:pointer}.structure-tab.active{background:var(--primary-light);color:var(--primary-dark)}.structure-tree-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);padding:14px;margin:12px 0}.structure-tree-card h3{margin:0 0 10px}.structure-tree-card details{border-top:1px solid var(--border);padding:8px 0}.structure-tree-card summary{cursor:pointer;font-weight:800;color:var(--text-primary)}.structure-tree-children{display:flex;flex-direction:column;gap:6px;margin:8px 0 0 14px}.structure-tree-node{border:1px solid var(--border);background:var(--background);border-radius:var(--radius-sm);padding:8px 10px;text-align:left;font:inherit;cursor:pointer;color:var(--text-secondary)}.structure-tree-node.active{border-color:var(--primary);background:var(--primary-light);color:var(--primary-dark)}.structure-side-actions{display:flex;flex-direction:column;gap:8px}.structure-side-actions .ghost-btn{justify-content:flex-start}@media(max-width:980px){.structure-pro-layout{grid-template-columns:1fr}.structure-stats-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:520px){.structure-stats-grid{grid-template-columns:1fr}.structure-toolbar{grid-template-columns:1fr!important}.structure-tabs{padding-bottom:10px}}
/* V1.7.0 — Secteur 4 Notes professionnel */
.grades-stat-grid{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}.grade-row{grid-template-columns:1fr 1.6fr .75fr .75fr .65fr .75fr .55fr .9fr!important}.grade-rank{font-weight:900;color:var(--primary-dark)}.grades-table-actions{display:flex;gap:8px;flex-wrap:wrap}.grades-list{overflow-x:auto}.grade-row{min-width:860px}@media(max-width:760px){.grade-row{display:grid!important;min-width:760px}.grades-table-card{overflow:hidden}}
/* V1.7.1 — Secteur 5 Utilisateurs/Rôles */
.roles-table th:first-child,.roles-table td:first-child{width:38px;text-align:center}.roles-bulk-count{font-weight:800;color:var(--text-secondary);margin-right:auto}.roles-row-check{width:16px;height:16px;accent-color:var(--primary)}.roles-table-card{overflow:hidden}.roles-table-wrap{overflow:auto}.roles-table{min-width:1080px}.roles-utility-panel{border-left:4px solid var(--primary)}

/* V1.7.2 — Correctif anti-débordement admin / emploi du temps */
.admin-shell,.admin-main,.publish-shell,.publish-main,.admin-card,.panel{min-width:0}.admin-main{overflow-x:hidden}.admin-schedule-card{max-width:100%;overflow:hidden}.schedule-admin-top,.schedule-entry-form,.schedule-entry-actions{max-width:100%;min-width:0}.schedule-entry-form>*{min-width:0}.schedule-entry-actions{flex-wrap:wrap}.schedule-entry-actions button{min-width:0}.admin-schedule-card .manage-list,#scheduleManageList{max-width:100%;overflow-y:auto;overflow-x:hidden}.admin-schedule-card .manage-item,#scheduleManageList .manage-item{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px;max-width:100%;overflow:hidden}.admin-schedule-card .manage-item-main,#scheduleManageList .manage-item-main{min-width:0;overflow:hidden}.admin-schedule-card .manage-item-title,#scheduleManageList .manage-item-title{white-space:normal;overflow-wrap:anywhere;word-break:break-word;line-height:1.35}.admin-schedule-card .manage-item-sub,#scheduleManageList .manage-item-sub{white-space:normal;overflow-wrap:anywhere}.admin-schedule-card .manage-item-actions,#scheduleManageList .manage-item-actions{flex:0 0 auto;display:flex;gap:6px}.admin-schedule-card .manage-item-actions button,#scheduleManageList .manage-item-actions button{width:38px;height:38px;padding:0;display:grid;place-items:center}.admin-schedule-card .schedule-edit-btn{width:38px;height:38px;padding:0}.admin-schedule-card .delete-btn{width:38px;height:38px;padding:0}@media(max-width:900px){.admin-schedule-card .manage-item,#scheduleManageList .manage-item{grid-template-columns:1fr}.admin-schedule-card .manage-item-actions,#scheduleManageList .manage-item-actions{justify-content:flex-end}.publish-shell,.grades-layout-v2,.roles-layout-v2,.manage-layout,.structure-pro-layout{max-width:100%;overflow-x:hidden}}@media(max-width:560px){.admin-schedule-card .manage-item-actions,#scheduleManageList .manage-item-actions{justify-content:stretch}.admin-schedule-card .manage-item-actions button,#scheduleManageList .manage-item-actions button{flex:1;width:auto}.schedule-entry-actions button{width:100%}}

/* V1.7.3 — Paramètres administrateur complets */
.admin-settings-card.info p{padding:8px 0;border-bottom:1px solid var(--border);margin:0}.admin-settings-card.info p:last-child{border-bottom:0}.admin-health-ok{color:var(--success)!important;font-weight:800}.admin-health-bad{color:var(--danger)!important;font-weight:800}.admin-settings-actions{position:sticky;bottom:0;background:linear-gradient(180deg,transparent,var(--background) 35%);padding-top:16px;z-index:2}.admin-settings-card .ghost-btn{margin:4px 6px 4px 0}.admin-settings-card textarea{resize:vertical;min-height:88px}

/* V1.7.5 — Actions sociales : symboles uniquement */
.content-social-actions .content-social-btn span,.post-actions-row .post-action span,.post-actions-row .post-bookmark span{display:none!important}.content-social-actions .content-social-btn,.post-actions-row .post-action,.post-actions-row .post-bookmark{min-width:44px;justify-content:center;gap:4px}.content-social-actions .content-social-btn b{margin-left:2px}.post-actions-row{align-items:center}.post-actions-row .post-action i,.post-actions-row .post-action svg,.post-actions-row .post-bookmark i,.post-actions-row .post-bookmark svg,.content-social-actions .content-social-btn i,.content-social-actions .content-social-btn svg{width:22px;height:22px}

/* V1.7.6 — EDT : respecter les couleurs importées */
.schedule-week-table td.schedule-cell-filled{background-image:none!important}.schedule-week-table td.schedule-cell-filled .schedule-course-card{background:transparent!important}.schedule-week-table .schedule-course-type{background:rgba(255,255,255,.72)!important;border:1px solid rgba(15,23,42,.08)}.schedule-mobile-course{background-image:none!important}

/* V1.7.7 — EDT admin : rendre les créneaux entièrement visibles */
#scheduleManageList.manage-list{max-height:none!important;overflow:visible!important;padding-right:0!important}#scheduleManageList .manage-item{min-height:auto!important;align-items:flex-start!important;padding:12px 14px!important}#scheduleManageList .manage-item-main{display:block!important;min-width:0!important;overflow:visible!important;padding-right:8px}#scheduleManageList .manage-item-title{display:block!important;white-space:normal!important;overflow:visible!important;text-overflow:clip!important;line-height:1.35!important;max-height:none!important}#scheduleManageList .manage-item-sub{display:block!important;white-space:normal!important;overflow:visible!important;line-height:1.35!important;margin-top:4px}#scheduleManageList .manage-item-actions{align-self:center!important}.admin-schedule-card{overflow:visible!important}.publish-main{overflow:visible!important}@media(max-width:720px){#scheduleManageList .manage-item{grid-template-columns:1fr!important}#scheduleManageList .manage-item-actions{align-self:stretch!important;justify-content:flex-end!important}}

/* V1.8.2 — Annuaire promotions : en-tête dynamique + niveaux disponibles */
.directory-level-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}.directory-level-chip{display:inline-flex!important;align-items:center;justify-content:center;border:1px solid var(--border)!important;background:var(--surface)!important;color:var(--primary)!important;border-radius:999px!important;padding:8px 16px!important;font:inherit!important;font-weight:800!important;cursor:pointer;box-shadow:none!important;transition:background var(--t-fast),color var(--t-fast),border-color var(--t-fast),transform var(--t-fast)}.directory-level-chip.active,.directory-level-chip:hover{background:var(--primary)!important;color:#fff!important;border-color:var(--primary)!important}.directory-level-chip:not(.active){box-shadow:none!important}.directory-detail-results:empty::before{content:"Cliquez sur un membre pour vérifier si les notes sont ouvertes par l’admin.";display:block;color:var(--text-tertiary);font-size:.86rem;margin-top:12px}

/* V1.8.7 — Annuaire : une puce = une occurrence académique */
.directory-level-chip{gap:8px}.directory-level-chip small{font-size:.72rem;font-weight:700;opacity:.78}.directory-level-chip.active small{opacity:.95;color:inherit}


/* V1.9.0 — Annuaire : rendre les filtres toujours visibles/fonctionnels */
#view-promotion .directory-controls{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:14px!important;align-items:end!important;margin:14px 0 8px!important;padding:14px!important;border:1px solid var(--border)!important;border-radius:12px!important;background:var(--background)!important}
#view-promotion .directory-control{display:flex!important;flex-direction:column!important;gap:7px!important;min-width:0!important;color:var(--text-secondary)!important;font-size:.75rem!important;font-weight:800!important;text-transform:uppercase!important;letter-spacing:.025em!important}
#view-promotion .directory-control-label{display:block!important;line-height:1.1!important}
#view-promotion .directory-control select{display:block!important;width:100%!important;min-width:0!important;height:42px!important;padding:0 38px 0 12px!important;border:1px solid var(--border-strong)!important;border-radius:9px!important;background:var(--surface)!important;color:var(--text-primary)!important;font:inherit!important;text-transform:none!important;letter-spacing:0!important;font-weight:650!important;opacity:1!important;visibility:visible!important;appearance:auto!important;cursor:pointer!important;box-sizing:border-box!important}
#view-promotion .directory-control select:hover{border-color:var(--primary-line)!important}
#view-promotion .directory-control select:focus{outline:none!important;border-color:var(--primary)!important;box-shadow:0 0 0 3px var(--primary-light)!important}
#view-promotion .directory-hint{grid-column:1/-1!important;margin:0!important}
@media(max-width:760px){#view-promotion .directory-controls{grid-template-columns:1fr!important;padding:12px!important;gap:10px!important}#view-promotion .directory-hint{grid-column:auto!important}}

/* V1.9.1 — Fil social moderne : textes longs, arrière-plans, programmation */
.feed-body.rich-text{white-space:normal;line-height:1.58;margin:10px 0;color:var(--text-primary)}
.feed-see-more{border:0;background:transparent;color:#087c4b;font-weight:800;padding:2px 0;cursor:pointer;margin-top:2px}.feed-see-more:hover{text-decoration:underline}
.feed-bg-card{overflow:hidden;border:0!important}.feed-bg-card header{position:relative;z-index:2}.feed-bg-card .feed-tagline,.feed-bg-card .post-social,.feed-bg-card .post-comments{position:relative;z-index:2}.feed-bg-card .rich-text{min-height:170px;border-radius:18px;padding:26px 20px;display:flex;align-items:center;justify-content:center;text-align:center;font-size:clamp(1.25rem,3vw,2rem);font-weight:900;line-height:1.25;letter-spacing:-.02em;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);white-space:normal}.feed-bg-card .feed-see-more{display:block;margin:8px auto 0;color:inherit;background:rgba(255,255,255,.22);border-radius:999px;padding:7px 14px}.bg-grme-blue .rich-text,.composer-bg-preview.bg-grme-blue{background:linear-gradient(135deg,#0b4ea2,#2563eb);color:#fff}.bg-dark-blue .rich-text,.composer-bg-preview.bg-dark-blue{background:linear-gradient(135deg,#06172f,#0f2f5f);color:#fff}.bg-grme-green .rich-text,.composer-bg-preview.bg-grme-green{background:linear-gradient(135deg,#065f46,#10b981);color:#fff}.bg-blue-green .rich-text,.composer-bg-preview.bg-blue-green{background:linear-gradient(135deg,#0ea5e9,#087c4b);color:#fff}.bg-minimal .rich-text,.composer-bg-preview.bg-minimal{background:#fff;color:#0f172a;border:1px solid #dbe4ef}.bg-gray .rich-text,.composer-bg-preview.bg-gray{background:linear-gradient(135deg,#f1f5f9,#cbd5e1);color:#0f172a}.bg-academic .rich-text,.composer-bg-preview.bg-academic{background:linear-gradient(135deg,#082f49,#0f766e);color:#ecfeff}.bg-event .rich-text,.composer-bg-preview.bg-event{background:linear-gradient(135deg,#7c3aed,#2563eb);color:#fff}.bg-opportunity .rich-text,.composer-bg-preview.bg-opportunity{background:linear-gradient(135deg,#92400e,#f59e0b);color:#fff}.bg-quote .rich-text,.composer-bg-preview.bg-quote{background:linear-gradient(135deg,#312e81,#9333ea);color:#fff}.bg-alert .rich-text,.composer-bg-preview.bg-alert{background:linear-gradient(135deg,#b45309,#dc2626);color:#fff}.composer-backgrounds{display:grid;grid-template-columns:repeat(auto-fit,minmax(105px,1fr));gap:8px}.composer-backgrounds button{border:1px solid var(--border);border-radius:12px;background:#fff;padding:10px;font-weight:800;cursor:pointer}.composer-backgrounds button.active{outline:3px solid rgba(8,124,75,.18);border-color:#087c4b}.composer-schedule-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.composer-schedule-grid label{display:grid;gap:5px;font-weight:800}.composer-schedule-grid input,.composer-special input{min-height:40px;border:1px solid var(--border);border-radius:10px;padding:8px 10px}.composer-bg-preview{border-radius:18px!important;text-align:center!important;min-height:150px!important;font-weight:900!important;font-size:1.35rem!important;line-height:1.25!important}.composer-types{flex-wrap:wrap}.composer-type{min-height:38px}@media(max-width:760px){.composer-types{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}.composer-type span{font-size:.72rem}.composer-schedule-grid{grid-template-columns:1fr}.feed-bg-card .rich-text{min-height:150px;padding:22px 14px}.post-actions-row{gap:4px}.post-action span{font-size:.72rem}.bottom-nav,.mobile-nav{position:fixed;bottom:0;left:0;right:0;display:flex!important;justify-content:space-around;align-items:center;z-index:60}.bottom-nav span,.mobile-nav span{display:none!important}}

/* V1.9.3 — Compositeur social compact : simple par défaut, avancé au clic */
.composer-modern{border-radius:22px;background:var(--surface);box-shadow:0 10px 30px rgba(15,23,42,.06);border:1px solid var(--border);padding:14px;display:grid;gap:10px}.composer-modern .composer-head{display:flex;gap:10px;align-items:center}.composer-modern .composer-question{flex:1;border:1px solid var(--border);border-radius:999px;background:var(--background);padding:12px 16px;text-align:left;color:var(--text-secondary);font-weight:700}.composer-modern .composer-form{border-top:1px solid var(--border);padding-top:10px;display:grid;gap:10px}.composer-modern .composer-form[hidden]{display:none!important}.composer-primary-actions,.composer-secondary-actions{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}.composer-secondary-actions{grid-template-columns:repeat(5,minmax(0,1fr))}.composer-modern .composer-type,.composer-modern .composer-main-publish{border:1px solid transparent;border-radius:12px;min-height:40px;background:transparent;color:var(--text-secondary);font-weight:800;display:inline-flex;align-items:center;justify-content:center;gap:6px;cursor:pointer}.composer-modern .composer-type:hover{background:rgba(8,124,75,.08);color:#087c4b}.composer-modern .composer-main-publish{background:#087c4b;color:#fff}.composer-selected-chips{display:flex;flex-wrap:wrap;gap:7px}.composer-chip{display:inline-flex;gap:6px;align-items:center;border-radius:999px;padding:7px 10px;font-weight:800;font-size:.82rem;background:#eef6f2;color:#075f3d;border:1px solid rgba(8,124,75,.18)}.composer-chip button{border:0;background:transparent;font-weight:900;color:inherit;cursor:pointer}.composer-modal{position:fixed;inset:0;background:rgba(15,23,42,.42);display:grid;place-items:center;z-index:100;padding:18px}.composer-modal[hidden]{display:none!important}.composer-modal-card{width:min(460px,100%);background:var(--surface);border-radius:22px;padding:20px;box-shadow:0 24px 70px rgba(15,23,42,.28);position:relative;display:grid;gap:13px}.composer-modal-card h3{margin:0;color:var(--text-primary)}.composer-modal-card label{display:grid;gap:6px;font-weight:800;color:var(--text-primary)}.composer-modal-card input{min-height:42px;border:1px solid var(--border);border-radius:12px;padding:9px 12px;font:inherit;background:var(--background);color:var(--text-primary)}.composer-modal-close{position:absolute;right:14px;top:12px;border:0;background:transparent;font-size:1.5rem;cursor:pointer;color:var(--text-secondary)}.composer-modal-actions{display:flex;justify-content:flex-end;gap:8px}.composer-timezone{margin:0;color:var(--text-secondary);font-size:.88rem}.composer-backgrounds{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:10px}.composer-backgrounds button{min-height:74px;border-radius:16px;border:1px solid var(--border);font-weight:900;cursor:pointer;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}.composer-backgrounds button span{background:rgba(0,0,0,.18);border-radius:999px;padding:5px 8px}.composer-backgrounds .bg-minimal span{background:rgba(15,23,42,.08);color:#0f172a}.composer-bg-preview{border-radius:18px!important;text-align:center!important;min-height:150px!important;font-weight:900!important;font-size:clamp(1.15rem,3vw,1.8rem)!important;line-height:1.25!important;padding:22px!important}.bg-grme-blue,.bg-grme-blue.rich-text{background:linear-gradient(135deg,#0b4ea2,#2563eb)!important;color:#fff!important}.bg-dark-blue,.bg-dark-blue.rich-text{background:linear-gradient(135deg,#06172f,#0f2f5f)!important;color:#fff!important}.bg-grme-green,.bg-grme-green.rich-text{background:linear-gradient(135deg,#065f46,#10b981)!important;color:#fff!important}.bg-blue-green,.bg-blue-green.rich-text{background:linear-gradient(135deg,#0ea5e9,#087c4b)!important;color:#fff!important}.bg-gradient-blue,.bg-gradient-blue.rich-text{background:linear-gradient(135deg,#1d4ed8,#38bdf8)!important;color:#fff!important}.bg-gradient-green,.bg-gradient-green.rich-text{background:linear-gradient(135deg,#047857,#84cc16)!important;color:#fff!important}.bg-dark,.bg-dark.rich-text{background:linear-gradient(135deg,#020617,#334155)!important;color:#fff!important}.bg-minimal,.bg-minimal.rich-text{background:#fff!important;color:#0f172a!important}.bg-quote,.bg-quote.rich-text{background:linear-gradient(135deg,#312e81,#9333ea)!important;color:#fff!important}.bg-academic,.bg-academic.rich-text{background:linear-gradient(135deg,#082f49,#0f766e)!important;color:#ecfeff!important}.bg-event,.bg-event.rich-text{background:linear-gradient(135deg,#7c3aed,#2563eb)!important;color:#fff!important}@media(max-width:760px){.composer-modern{border-radius:18px;padding:12px}.composer-primary-actions{grid-template-columns:repeat(4,minmax(0,1fr))}.composer-secondary-actions{grid-template-columns:repeat(4,minmax(0,1fr))}.composer-modern .composer-type span,.composer-modern .composer-main-publish span{font-size:.72rem}.composer-modern .composer-type,.composer-modern .composer-main-publish{min-height:38px;padding:6px 4px}.composer-backgrounds{grid-template-columns:repeat(2,minmax(0,1fr))}.composer-modal{align-items:end;padding:10px}.composer-modal-card{border-radius:20px 20px 10px 10px}.main-nav span,.bottom-nav span,.mobile-nav span{display:none!important}.main-nav{position:fixed;left:0;right:0;bottom:0;top:auto;z-index:70;display:flex!important;justify-content:space-around;align-items:center;min-height:58px}}


/* V1.9.4 — Mobile feed/composer polish : comportement visuel proche des réseaux sociaux */
@media (max-width:760px){
  .composer-modern{
    padding:10px;
    gap:8px;
    border-radius:16px;
    box-shadow:0 4px 16px rgba(15,23,42,.06);
  }
  .composer-modern .composer-head{gap:8px}
  .composer-modern .composer-avatar{width:38px;height:38px;min-width:38px}
  .composer-modern .composer-question{padding:10px 13px;font-size:.82rem;min-height:40px}
  .composer-modern .composer-primary-actions,
  .composer-modern .composer-secondary-actions{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:3px;
    width:100%;
  }
  .composer-modern .composer-secondary-actions{grid-template-columns:repeat(4,minmax(0,1fr))}
  .composer-modern .composer-type,
  .composer-modern .composer-main-publish{
    min-width:0;
    min-height:36px;
    padding:5px 2px;
    border-radius:9px;
    gap:3px;
    font-size:.68rem;
    white-space:nowrap;
  }
  .composer-modern .composer-type svg,
  .composer-modern .composer-main-publish svg{width:15px;height:15px;flex:0 0 auto}
  .composer-modern .composer-type span,
  .composer-modern .composer-main-publish span{
    display:block;
    overflow:hidden;
    text-overflow:ellipsis;
    font-size:.64rem;
    font-weight:750;
  }
  .composer-modern .composer-main-publish{
    min-height:36px;
    border-radius:9px;
  }
  .composer-more-wrap{min-width:0;display:block}
  .composer-more-wrap>.composer-type{width:100%}
  .composer-more{
    position:absolute;
    right:10px;
    z-index:20;
    min-width:190px;
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:12px;
    box-shadow:0 12px 30px rgba(15,23,42,.16);
    padding:6px;
  }
  .composer-more .composer-type{
    width:100%;
    justify-content:flex-start;
    padding:9px 10px;
  }
  .composer-modern .composer-form{gap:8px;padding-top:8px}
  .composer-modern #composerBody{min-height:105px;border-radius:12px;padding:11px;font-size:.88rem}
  .composer-modern .composer-actions{align-items:center}
  .composer-modern .composer-actions small{font-size:.68rem}
  .composer-selected-chips{gap:4px}
  .composer-chip{font-size:.68rem;padding:5px 8px}
  .feed-body.rich-text{line-height:1.5;font-size:.9rem}
  .feed-see-more{font-size:.78rem;padding:3px 0;margin-top:4px}
  .feed-bg-card .rich-text{min-height:145px;padding:20px 14px;font-size:1.2rem;line-height:1.22}
  .feed-bg-card .feed-see-more{padding:6px 12px}
}

/* Ne jamais laisser le menu "Plus" provoquer un débordement horizontal. */
.composer-more-wrap{position:relative}

/* =====================================================================
   V1.9.9 — FIL ACTUALITÉ MOBILE : COMPOSITEUR TYPE FACEBOOK
   - navigation principale mobile uniquement dans la barre basse (6 icônes)
   - aucune seconde navigation sous la bannière
   - compteur intégré dans la zone de texte
   - Annuler + Publier (icône seule) sous le texte
   - outils sur une seule ligne horizontale défilable
   ===================================================================== */
@media (max-width:767px){
  /* La navigation desktop reste dans le header mais n'est pas dupliquée
     dans le fil : la seule navigation mobile visible est celle du bas. */
  .site-header .main-nav{display:none !important}
  .feed-mobile-nav-slot{display:none !important}

  body{padding-bottom:calc(64px + env(safe-area-inset-bottom));}
  .mobile-bar{
    display:grid !important;
    grid-template-columns:repeat(6,minmax(0,1fr));
    height:64px;
    min-height:64px;
    padding:0 4px env(safe-area-inset-bottom);
    background:var(--surface);
    border-top:1px solid var(--border);
    box-shadow:0 -3px 18px rgba(15,23,42,.10);
    z-index:90;
  }
  .mobile-bar-item{
    min-width:0;
    min-height:56px;
    height:56px;
    padding:0;
    display:flex;
    align-items:center;
    justify-content:center;
    border:0;
    background:transparent;
    color:var(--text-secondary);
  }
  .mobile-bar-item span{display:none !important}
  .mobile-bar-item i,.mobile-bar-item svg{width:21px;height:21px;stroke-width:2}
  .mobile-bar-item.active{color:var(--primary)}
  .mobile-bar-item.active::after{
    content:"";
    position:absolute;
    bottom:env(safe-area-inset-bottom);
    width:38px;
    height:2px;
    background:var(--primary);
    border-radius:2px 2px 0 0;
  }
  .mobile-bar-item{position:relative}
  .mobile-bar-new{display:none !important}

  /* Compositeur : largeur/espacement proches de la maquette fournie. */
  .composer-modern{
    padding:12px 12px 10px !important;
    gap:9px !important;
    border-radius:16px !important;
    box-shadow:0 3px 14px rgba(15,23,42,.05) !important;
  }
  .composer-modern .composer-head{margin-bottom:0 !important}
  .composer-modern .composer-form{
    display:grid;
    gap:8px;
    padding-top:0 !important;
    border-top:0 !important;
  }
  .composer-body-wrap{position:relative;width:100%}
  .composer-modern #composerBody{
    display:block;
    width:100%;
    min-height:150px;
    max-height:320px;
    resize:vertical;
    box-sizing:border-box;
    padding:14px 14px 38px !important;
    border:1px solid var(--border-strong);
    border-radius:14px !important;
    background:var(--surface);
    font-size:.92rem;
    line-height:1.45;
  }
  .composer-modern #composerBody:focus{outline:2px solid var(--accent-dark);outline-offset:0}
  .composer-body-wrap #composerCount{
    position:absolute;
    right:14px;
    bottom:10px;
    margin:0;
    color:var(--text-tertiary);
    font-size:.72rem;
    font-variant-numeric:tabular-nums;
    pointer-events:none;
  }
  .composer-modern .composer-actions{
    margin:0 !important;
    padding:0;
    display:flex;
    justify-content:flex-end;
  }
  .composer-modern .composer-buttons{display:flex;align-items:center;gap:8px}
  .composer-modern #composerCancel{
    min-height:42px;
    padding:0 20px;
    border:1px solid var(--border);
    border-radius:11px;
    background:var(--surface);
    color:var(--accent-dark);
    font-weight:800;
  }
  .composer-modern #composerSubmit{
    display:inline-flex !important;
    align-items:center;
    justify-content:center;
    width:46px;
    min-width:46px;
    height:46px;
    padding:0;
    margin:0;
    border:0;
    border-radius:11px;
    background:#0A9A5B;
    color:#fff;
  }
  .composer-modern #composerSubmit svg{width:21px;height:21px}

  /* Les 8 outils restent sur UNE seule ligne. Aucun passage à la ligne. */
  .composer-modern .composer-all-actions{
    display:flex !important;
    flex-wrap:nowrap !important;
    align-items:center;
    gap:2px;
    width:100%;
    overflow-x:auto;
    overflow-y:hidden;
    padding:9px 0 2px;
    border-top:1px solid var(--border);
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .composer-modern .composer-all-actions::-webkit-scrollbar{display:none}
  .composer-modern .composer-all-actions > .composer-type,
  .composer-modern .composer-all-actions > .composer-more-wrap{
    flex:0 0 auto;
  }
  .composer-modern .composer-all-actions .composer-type{
    min-height:38px;
    padding:6px 9px;
    border-radius:9px;
    white-space:nowrap;
    font-size:.72rem;
    gap:4px;
  }
  .composer-modern .composer-all-actions .composer-type svg{width:16px;height:16px}
  .composer-modern .composer-all-actions .composer-more-wrap{position:relative}
  .composer-modern .composer-more{position:absolute;right:0;bottom:44px}

  /* Quand le formulaire est fermé, les outils restent visuellement propres. */
  .composer-modern:not(:has(#composerForm:not([hidden]))) .composer-all-actions{
    border-top:1px solid var(--border);
  }
}

/* V1.9.6 — Outils Photo / Sondage / Humeur / Lien : composants réellement interactifs */
.composer-image-hint{display:block;color:var(--text-tertiary);font-size:.78rem;min-height:0}
.composer-special{margin-top:8px;padding:12px;border:1px solid var(--border);border-radius:14px;background:var(--background)}
.composer-special[hidden]{display:none!important}
.composer-special-label{margin:0 0 8px;font-size:.88rem;font-weight:800;color:var(--text-primary)}
.composer-special input{width:100%;box-sizing:border-box;min-height:42px;border:1px solid var(--border);border-radius:10px;padding:9px 11px;background:var(--surface);color:var(--text-primary);font:inherit}
.composer-poll-options{display:grid;gap:7px;margin-top:8px}
.composer-special-actions{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap;margin-top:9px}
.composer-moods{display:flex;gap:7px;flex-wrap:wrap}
.composer-moods button{border:1px solid var(--border);border-radius:999px;background:var(--surface);color:var(--text-primary);padding:8px 11px;font:inherit;font-size:.8rem;cursor:pointer}
.composer-moods button:hover,.composer-moods button.active{background:var(--accent-light);border-color:var(--accent-line);color:var(--accent-dark)}
@media(max-width:760px){
  .composer-special{padding:10px;border-radius:12px}
  .composer-special input{min-height:40px;font-size:.82rem}
  .composer-special-actions{gap:6px}
  .composer-moods{flex-wrap:nowrap;overflow-x:auto;padding-bottom:3px}
  .composer-moods button{flex:0 0 auto;font-size:.74rem;padding:7px 9px}
}

/* V1.9.7 — restauration du bouton Publier du compositeur. */
#composerSubmit{display:inline-flex !important;visibility:visible !important;opacity:1 !important;}
.composer-buttons #composerSubmit{display:inline-flex !important;visibility:visible !important;opacity:1 !important;}
@media(max-width:767px){.composer-modern #composerSubmit{display:inline-flex !important;width:46px !important;min-width:46px !important;height:46px !important;padding:0 !important;margin:0 !important;align-items:center;justify-content:center;}}


/* V2.0.0 — catégories comme fil : cartes pro, aucune dérive horizontale, fichiers comme dans le fil */
#view-announcements,#view-events,#view-resources{overflow-x:hidden;max-width:100vw}
#announcementsList.data-grid,#resourcesList.data-grid,#eventsList.events{
  display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:14px!important;width:100%!important;max-width:100%!important;overflow-x:hidden!important;
}
#announcementsList .card,#resourcesList .card,#eventsList .event{
  width:100%!important;max-width:100%!important;min-width:0!important;box-sizing:border-box!important;overflow:hidden!important;border-radius:16px!important;
}
#announcementsList .card *,#resourcesList .card *,#eventsList .event *{max-width:100%;box-sizing:border-box}
#announcementsList .card h3,#resourcesList .card h3,#eventsList .event b{
  display:block;white-space:normal!important;overflow-wrap:anywhere;word-break:normal;line-height:1.22;
}
#announcementsList .formatted-text,#resourcesList .formatted-text,#eventsList .formatted-text{
  white-space:pre-line;line-height:1.65;overflow-wrap:anywhere;word-break:normal;
}
#announcementsList .feed-file-card,#resourcesList .feed-file-card,#eventsList .feed-file-card{
  width:100%;max-width:100%;margin-top:12px;background:var(--background);display:flex!important;
}
#announcementsList .resource-file:not(.feed-file-card),#resourcesList .resource-file:not(.feed-file-card),#eventsList .resource-file:not(.feed-file-card){display:none!important}
.attachment-image-wrap.clickable-media,img.attachment-image{cursor:zoom-in}

@media(max-width:767px){
  #view-announcements .container,#view-events .container,#view-resources .container{width:100%!important;max-width:100%!important;padding-left:12px!important;padding-right:12px!important;overflow-x:hidden!important}
  #announcementsList .card,#resourcesList .card,#eventsList .event{padding:14px!important}
  #announcementsList .feed-file-card,#resourcesList .feed-file-card,#eventsList .feed-file-card{padding:10px!important;border-radius:12px!important}
  #announcementsList .feed-file-info strong,#resourcesList .feed-file-info strong,#eventsList .feed-file-info strong{font-size:.82rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}


/* V2.0.0 — agenda mobile : contenu lisible et jamais masqué par la barre basse. */
.events-countdown .countdown-main{display:grid;gap:2px;min-width:0;flex:1}
.events-countdown .countdown-main strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.events-countdown .countdown-main small{font-size:.76rem;font-weight:500;color:var(--text-secondary)}
.events-countdown .countdown-remaining{white-space:nowrap;font-size:.82rem;font-weight:800}
.events-list-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:2px 0 10px;color:var(--text-primary)}
.events-list-heading h3{margin:0;font-size:1rem}
.events-list-heading small{color:var(--text-tertiary);font-size:.76rem}
.events-list-card{position:relative;border:1px solid var(--border);border-left:4px solid var(--event-color,var(--primary));border-radius:14px;background:var(--surface);padding:12px 12px 12px 14px;margin-bottom:10px;box-shadow:0 3px 12px rgba(15,23,42,.04)}
.events-list-card .event-card-head{display:flex;align-items:flex-start;gap:7px;justify-content:space-between}
.events-list-card .event-card-title{display:block;font-weight:800;color:var(--text-primary);line-height:1.3}
.events-list-card .event-card-date{display:block;margin-top:5px;color:var(--primary-dark);font-size:.78rem;font-weight:700}
.events-list-card .event-card-description{margin:7px 0 0;color:var(--text-secondary);font-size:.82rem;line-height:1.45}
.events-list-card .event-ics-btn{margin-top:9px;padding:6px 10px;font-size:.75rem}

@media(max-width:767px){
  #view-events{padding-bottom:88px}
  #view-events .section{padding-bottom:92px}
  .events-countdown{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 9px;padding:10px 12px;margin-bottom:12px}
  .events-countdown .countdown-dot{grid-row:span 2;margin-top:4px}
  .events-countdown .countdown-remaining{grid-column:2;font-size:.76rem}
  .events-subtabs{display:grid;grid-template-columns:1fr 1.25fr;gap:7px;margin-bottom:12px}
  .events-subtab{padding:8px 9px;font-size:.76rem;white-space:nowrap}
  .events-toolbar{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px;align-items:end}
  .events-filter{font-size:.72rem;min-width:0}
  .events-filter select{width:100%;min-width:0;padding:8px 7px;font-size:.76rem}
  #eventsExportIcsBtn{grid-column:1 / -1;width:100%;min-height:36px;padding:8px;font-size:.78rem}
  .events-calendar{padding:10px 8px;border-radius:14px;margin-bottom:16px}
  .events-calendar-header{gap:4px;margin-bottom:9px}
  .events-calendar-header span{font-size:.92rem}
  .events-calendar-header .ghost-btn{padding:6px 8px;font-size:.72rem}
  .events-calendar-weekdays{font-size:.68rem;margin-bottom:5px}
  .events-calendar-grid{gap:3px}
  .cal-cell{min-height:55px;padding:5px 3px;border-radius:8px}
  .cal-day-num{font-size:.72rem}
  .cal-dot{width:6px;height:6px}
  .events-calendar-legend{gap:7px 10px;margin-top:10px;font-size:.68rem}
  .events-list-heading{margin-top:4px}
  .events-list-heading h3{font-size:.92rem}
  .events-list-card{padding:11px 10px 11px 12px;margin-bottom:8px}
  .events-list-card .event-type-badge{font-size:.64rem;padding:2px 7px;margin-right:0;white-space:nowrap}
  .events-list-card .event-card-title{font-size:.82rem}
  .events-list-card .event-card-date{font-size:.72rem}
  .events-list-card .event-card-description{font-size:.76rem}
}

.events-filter-summary{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:-7px 0 14px;color:var(--text-tertiary);font-size:.78rem}
.events-filter-summary strong{color:var(--text-primary)}
.events-clear-filters{border:0;background:transparent;color:var(--primary);font:inherit;font-weight:800;cursor:pointer;padding:3px 0}
@media(max-width:767px){
  .events-filter-summary{margin:-5px 0 12px;font-size:.72rem;flex-wrap:wrap}
}

/* V2.0.0 — Administration responsive : aucune carte ou action ne doit
   sortir de la largeur disponible sur téléphone. */
#view-admin,
#view-admin .admin-section-v2,
#view-admin .admin-section-v2 > .container,
#view-admin .admin-shell,
#view-admin .admin-main,
#view-admin .admin-page,
#view-admin .publish-shell,
#view-admin .publish-main,
#view-admin .publish-sidebar,
#view-admin .admin-card{max-width:100%;min-width:0;box-sizing:border-box}
#view-admin input,#view-admin select,#view-admin textarea{max-width:100%;box-sizing:border-box}
#view-admin button{max-width:100%;box-sizing:border-box}

@media(max-width:767px){
  html,body{overflow-x:hidden}
  #view-admin .admin-section-v2{padding:18px 0 92px}
  #view-admin .admin-section-v2 > .container{width:100%;padding:0 10px}
  #view-admin .admin-shell{width:100%;border-radius:12px;overflow:visible}
  #view-admin .admin-main{width:100%;padding:12px 10px;overflow:visible}
  #view-admin .admin-page-header{margin-bottom:12px}
  #view-admin .admin-page-header-row{gap:10px}
  #view-admin .admin-page-title-block{gap:9px;min-width:0}
  #view-admin .admin-page-title-block > div{min-width:0}
  #view-admin .admin-page-title-block h2{font-size:1.15rem;line-height:1.2;overflow-wrap:anywhere}
  #view-admin .admin-page-title-block .hint{font-size:.75rem;line-height:1.4}
  #view-admin .admin-page-icon{flex-basis:38px;width:38px;height:38px}
  #view-admin .publish-tabs{grid-template-columns:1fr;gap:8px;margin:12px 0}
  #view-admin .publish-tab{width:100%;padding:11px;min-width:0}
  #view-admin .publish-tab-text{min-width:0}
  #view-admin .publish-tab-text small{overflow-wrap:anywhere}
  #view-admin .publish-shell{display:block;width:100%;overflow:visible}
  #view-admin .publish-main{width:100%;overflow:visible}
  #view-admin .publish-sidebar{width:100%;margin-top:14px}
  #view-admin .admin-card{width:100%;padding:14px 12px;border-radius:12px;overflow:visible}
  #view-admin .admin-card h3{font-size:.92rem;line-height:1.3;overflow-wrap:anywhere}
  #view-admin .admin-card > .hint{font-size:.76rem;line-height:1.45}
  #view-admin #addResource,
  #view-admin #addAnnouncement,
  #view-admin #addEvent,
  #view-admin #addOpportunity{display:grid;width:100%;grid-template-columns:minmax(0,1fr);gap:11px}
  #view-admin #addResource > *,
  #view-admin #addAnnouncement > *,
  #view-admin #addEvent > *,
  #view-admin #addOpportunity > *{grid-column:1/-1;min-width:0;max-width:100%}
  #view-admin #addResource label,
  #view-admin #addAnnouncement label,
  #view-admin #addEvent label,
  #view-admin #addOpportunity label{width:100%;min-width:0;font-size:.76rem;line-height:1.35}
  #view-admin #addResource input:not([type=file]),
  #view-admin #addResource select,
  #view-admin #addResource textarea,
  #view-admin #addAnnouncement input:not([type=file]),
  #view-admin #addAnnouncement select,
  #view-admin #addAnnouncement textarea,
  #view-admin #addEvent input:not([type=file]),
  #view-admin #addEvent select,
  #view-admin #addEvent textarea,
  #view-admin #addOpportunity input:not([type=file]),
  #view-admin #addOpportunity select,
  #view-admin #addOpportunity textarea{width:100%;min-width:0;height:auto;min-height:40px}
  #view-admin #addResource textarea,
  #view-admin #addAnnouncement textarea,
  #view-admin #addEvent textarea,
  #view-admin #addOpportunity textarea{min-height:96px;resize:vertical}
  #view-admin .file-dropzone{width:100%;padding:10px 8px!important;overflow:hidden;overflow-wrap:anywhere}
  #view-admin .file-dropzone input[type=file]{display:block;width:100%;max-width:100%;padding:9px 4px;border-radius:8px;font-size:.72rem;overflow:hidden}
  #view-admin .publish-visibility-row{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;width:100%;align-items:stretch}
  #view-admin .publish-visibility-row label{width:100%;flex:none}
  #view-admin .publish-notify-check{display:flex;align-items:flex-start;white-space:normal;line-height:1.35;gap:7px}
  #view-admin .publish-notify-check input{width:16px;min-width:16px;height:16px;margin-top:1px}
  #view-admin .publish-form-actions{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;width:100%;margin-top:2px}
  #view-admin .publish-form-actions button{display:flex;width:100%;min-width:0;min-height:42px;height:auto;align-items:center;justify-content:center;white-space:normal;text-align:center;line-height:1.25;padding:10px 12px}
  #view-admin .schedule-entry-form,
  #view-admin .schedule-admin-top{width:100%;display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
  #view-admin .schedule-entry-form > *,
  #view-admin .schedule-admin-top > *{width:100%;min-width:0}
  #view-admin .schedule-entry-actions{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;width:100%}
  #view-admin .schedule-entry-actions button{width:100%;min-width:0}
  #view-admin .admin-settings-tabs,
  #view-admin .manage-category-tabs,
  #view-admin .roles-tabs-v2,
  #view-admin .structure-tabs{max-width:100%;overflow-x:auto}
}

/* ===================== CORRECTIFS UX v2.0.1 ===================== */
/* Contraste renforcé pour les pages publiques et les cartes en mode sombre. */
body.theme-dark #publicShowcase,
body.theme-dark .public-how,
body.theme-dark .public-ine-details-page{
  background:var(--background);
  color:var(--text-primary);
}
body.theme-dark .showcase-hero h1 .brand-grme{color:#8BE0B6}
body.theme-dark .showcase-hero h1 .brand-connect{color:#9DCBFF}
body.theme-dark .public-how{
  background:linear-gradient(180deg,#121b22 0%,#10161c 100%);
}
body.theme-dark .public-how-head h2,
body.theme-dark .public-step-content h3,
body.theme-dark .public-ine-details-head h2,
body.theme-dark .public-ine-info-card h3,
body.theme-dark .public-ine-subhead h3,
body.theme-dark .public-ine-contact h3,
body.theme-dark .public-ine-mission-grid h4{
  color:var(--text-primary);
}
body.theme-dark .public-how-head>p:last-child,
body.theme-dark .public-step-content>p:not(.how-step-eyebrow),
body.theme-dark .public-ine-details-intro p,
body.theme-dark .public-ine-info-card p,
body.theme-dark .public-ine-mission-grid p,
body.theme-dark .public-ine-contact p{
  color:var(--text-secondary);
}
body.theme-dark .auth-gate-card,
body.theme-dark .public-ine-details-intro p,
body.theme-dark .public-ine-info-card,
body.theme-dark .public-ine-mission-grid article{
  background:var(--surface);
  color:var(--text-primary);
  border-color:var(--border);
}
body.theme-dark .public-ine-tags span{
  background:var(--primary-light);
  color:#9BE2BE;
}
body.theme-dark .dialog{
  background:var(--surface);
  color:var(--text-primary);
  border:1px solid var(--border);
}
body.theme-dark .dialog h2,
body.theme-dark .dialog label,
body.theme-dark .dialog strong{
  color:var(--text-primary);
}
body.theme-dark .dialog input,
body.theme-dark .dialog select,
body.theme-dark .dialog textarea{
  background:#111a21;
  color:var(--text-primary);
  border-color:var(--border-strong);
}
body.theme-dark .modal.show{background:rgba(0,0,0,.70)}
body.theme-dark .tab.active{color:#9BE2BE}
body.theme-dark .auth-gate-card h2{color:var(--text-primary)}
body.theme-dark .auth-gate-card p{color:var(--text-secondary)}

/* Correctif v2.0.2 : contraste du pied de page en mode sombre. */
body.theme-dark footer{
  background:#0B1116;
  color:#C9D5DC;
}

/* Correctif v2.0.4 : contraste des cartes de matières en mode sombre. */
body.theme-dark .schedule-mobile-course,
body.theme-dark .schedule-week-table td.schedule-cell-filled{
  color:#0F172A!important;
}
body.theme-dark .schedule-course-card,
body.theme-dark .schedule-mobile-course h4,
body.theme-dark .schedule-mobile-time,
body.theme-dark .schedule-course-type{
  color:#0F172A!important;
}
body.theme-dark .schedule-course-meta,
body.theme-dark .schedule-mobile-course p{
  color:#243447!important;
}
body.theme-dark .schedule-course-type{
  background:rgba(255,255,255,.82)!important;
  border:1px solid rgba(15,23,42,.15);
}

/* Correctif v2.0.6 : administration mobile sans débordement.
   Structure académique et saisie des notes. */
@media(max-width:767px){
  #view-admin .structure-toolbar{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    width:100%;
    gap:9px;
  }
  #view-admin .structure-toolbar label,
  #view-admin .structure-toolbar select{
    width:100%;
    min-width:0;
    max-width:100%;
  }
  #view-admin .structure-form{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    width:100%;
    gap:8px;
  }
  #view-admin .structure-form > *,
  #view-admin .structure-form input,
  #view-admin .structure-form select,
  #view-admin .structure-form button{
    width:100%;
    min-width:0;
    max-width:100%;
  }
  #view-admin .structure-check,
  #view-admin .struct-weight{
    width:100%;
    min-width:0;
    flex-wrap:wrap;
  }
  #view-admin .structure-tabs{
    width:100%;
    max-width:100%;
    overflow-x:auto;
    scrollbar-width:thin;
  }
  #view-admin .structure-tree-card,
  #view-admin .structure-list,
  #view-admin .struct-ue{
    width:100%;
    max-width:100%;
    min-width:0;
  }
  #view-admin .structure-tree-card *{
    max-width:100%;
    overflow-wrap:anywhere;
  }

  /* Sur mobile, chaque élève devient une fiche à deux colonnes.
     On annule les min-width desktop qui forçaient un débordement horizontal. */
  #view-admin .grades-list{
    width:100%;
    max-width:100%;
    overflow:visible;
  }
  #view-admin .grade-row{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
    width:100%;
    min-width:0!important;
    max-width:100%;
    gap:6px;
    padding:9px 10px;
  }
  #view-admin .grade-row > *{
    min-width:0;
    max-width:100%;
    overflow-wrap:anywhere;
  }
  #view-admin .grade-head{display:none!important}
  #view-admin .grade-name{
    grid-column:1/-1;
    white-space:normal;
    line-height:1.3;
  }
  #view-admin .grade-input{
    width:100%;
    min-width:0;
  }
  #view-admin .grades-table-actions,
  #view-admin .grades-actions{
    width:100%;
    display:grid;
    grid-template-columns:minmax(0,1fr);
  }
  #view-admin .grades-table-actions button,
  #view-admin .grades-actions button{
    width:100%;
    min-width:0;
  }
}