/* ═══════════════════════════════════════════════════════════════════
   IUT DOUALA — PORTAIL ÉTUDIANT · LIQUID GLASS
   Verre dépoli, pilule flottante, bleu nuit + or, Campus (réseau social)
   ═══════════════════════════════════════════════════════════════════ */
:root{
  --nuit:#0d1b2e;
  --nuit2:#16283f;
  --text:#17222f;
  --muted:#66738a;
  --or:#c9922e;
  --or-clair:#e8b04b;
  --bleu:#2f5f9e;
  --vert:#1d7a55;
  --rouge:#b0463f;
  --verre:rgba(255,255,255,.55);
  --verre-fort:rgba(255,255,255,.72);
  --verre-bord:rgba(255,255,255,.78);
  --ombre:0 8px 32px rgba(13,27,46,.10);
  --spring:cubic-bezier(.34,1.56,.64,1);
  --sortie:cubic-bezier(.22,1,.36,1);
  --safe-bas:env(safe-area-inset-bottom, 0px);
}

*{ box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; }
html,body{
  width:100%; height:100%;
  font-family:'Segoe UI Variable Display','Segoe UI', Roboto, Arial, sans-serif;
  color:var(--text); -webkit-font-smoothing:antialiased; overscroll-behavior:none;
  background:#e9edf3;
}
/* Fond vivant : les taches de couleur que le verre réfracte */
body::before{
  content:""; position:fixed; inset:-15%; z-index:-1; pointer-events:none;
  background:
    radial-gradient(circle 500px at 12% 8%, rgba(201,146,46,.16), transparent 58%),
    radial-gradient(circle 540px at 88% 22%, rgba(47,95,158,.15), transparent 58%),
    radial-gradient(circle 480px at 30% 96%, rgba(29,122,85,.11), transparent 58%),
    radial-gradient(circle 420px at 78% 80%, rgba(176,70,63,.09), transparent 58%);
  animation:ambiance 24s ease-in-out infinite alternate;
}
@keyframes ambiance{ to{ transform:translate(-30px,22px) scale(1.08); } }

.masque{ display:none !important; }
::selection{ background:rgba(201,146,46,.25); }
*::-webkit-scrollbar{ width:6px; }
*::-webkit-scrollbar-thumb{ background:rgba(13,27,46,.14); border-radius:6px; }

/* ── Recette du verre ── */
.connexion-carte, .carte-formulaire, .publication, .item-simple,
.requete-carte, .releve-carte, .etu-compteur, .post, .tuile{
  background:var(--verre);
  backdrop-filter:blur(24px) saturate(1.6);
  -webkit-backdrop-filter:blur(24px) saturate(1.6);
  border:1px solid var(--verre-bord);
  box-shadow:var(--ombre), inset 0 1px 0 rgba(255,255,255,.9);
  border-radius:20px;
}

/* ════════ SPLASH ════════ */
.splash{
  position:fixed; inset:0; z-index:100;
  background:
    radial-gradient(ellipse 70% 55% at 50% 35%, rgba(201,146,46,.10), transparent 65%),
    linear-gradient(160deg, #fbf9f5, #e9edf3);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  color:var(--text); text-align:center; padding:30px;
  transition:opacity .8s ease, visibility .8s;
}
.splash.fin{ opacity:0; visibility:hidden; pointer-events:none; }
.splash-halo{
  position:absolute; width:340px; height:340px; border-radius:50%;
  background:radial-gradient(circle, rgba(201,146,46,.18), transparent 70%);
  animation:haloPulse 3s ease-in-out infinite;
}
@keyframes haloPulse{ 0%,100%{ transform:scale(1); opacity:.7; } 50%{ transform:scale(1.15); opacity:1; } }
.splash-logo{
  width:96px; height:96px; object-fit:contain; background:#fff; border-radius:24px; padding:8px;
  box-shadow:0 16px 44px rgba(13,27,46,.16); position:relative; z-index:1;
  animation:logoEntree 1s var(--spring) both;
}
@keyframes logoEntree{ from{ opacity:0; transform:translateY(30px) scale(.8); } to{ opacity:1; transform:translateY(0) scale(1); } }
.splash-titre{ margin-top:22px; font-size:2.2rem; font-weight:800; letter-spacing:-.02em; animation:fondu 1s ease .4s both; z-index:1; position:relative; }
.splash-titre span{ color:var(--or); font-weight:300; }
.splash-sous-titre{ margin-top:6px; color:var(--muted); font-size:.85rem; letter-spacing:.22em; text-transform:uppercase; animation:fondu 1s ease .8s both; z-index:1; position:relative; }
@keyframes fondu{ from{ opacity:0; } to{ opacity:1; } }
.splash-barre{ margin-top:38px; width:180px; height:3px; border-radius:3px; background:rgba(13,27,46,.10); overflow:hidden; z-index:1; position:relative; animation:fondu .6s ease 1s both; }
.splash-barre-remplissage{
  height:100%; width:0; background:linear-gradient(90deg, var(--or), var(--or-clair));
  animation:barreCharge 1.6s var(--sortie) 1.1s forwards; box-shadow:0 0 12px rgba(201,146,46,.5);
}
@keyframes barreCharge{ to{ width:100%; } }

/* ════════ CONNEXION ════════ */
.ecran-connexion{ position:fixed; inset:0; z-index:90; display:flex; flex-direction:column; overflow-y:auto; }
.connexion-haut{
  position:relative; overflow:hidden;
  background:linear-gradient(165deg, var(--nuit2), var(--nuit));
  color:#fff; text-align:center; padding:60px 24px 84px; border-radius:0 0 34px 34px;
}
.spotlight{
  position:absolute; inset:-40%; pointer-events:none;
  background:radial-gradient(circle 230px at var(--sx,50%) var(--sy,28%), rgba(232,176,75,.22), transparent 62%);
}
.connexion-haut > *:not(.spotlight){ position:relative; z-index:1; }
.connexion-haut img{
  width:72px; height:72px; object-fit:contain; background:#fff; border-radius:18px; padding:6px;
  box-shadow:0 12px 34px rgba(0,0,0,.35); animation:logoEntree .8s var(--spring) both;
}
.connexion-haut h1{ margin-top:16px; font-size:1.9rem; font-weight:800; letter-spacing:-.02em; }
.connexion-haut h1 span{ color:var(--or-clair); font-weight:300; }
.connexion-haut p{ margin-top:8px; color:#a8b6cc; font-size:.9rem; line-height:1.5; }
.connexion-carte{ margin:-46px 18px 26px; padding:26px 22px; text-align:center; animation:carteMonte .7s var(--spring) .2s both; }
@keyframes carteMonte{ from{ opacity:0; transform:translateY(34px); } to{ opacity:1; transform:translateY(0); } }
.field{ margin-bottom:14px; text-align:left; }
.field label{ display:block; font-size:.72rem; margin-bottom:6px; color:var(--muted); font-weight:700; text-transform:uppercase; letter-spacing:.08em; }
.field input{ width:100%; }

/* Champ mot de passe avec bouton Afficher */
.champ-mdp{ position:relative; display:flex; align-items:center; }
.champ-mdp input{ padding-right:80px; }
.voir-mdp{
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  background:transparent; border:none; cursor:pointer;
  color:var(--bleu); font-size:.78rem; font-weight:700; padding:6px 8px;
}
.aide-mdp{ margin:8px 2px 0; font-size:.76rem; line-height:1.4; color:var(--muted); text-align:left; }
.aide-mdp strong{ color:var(--text); }
.souvenir{
  display:flex; align-items:center; gap:8px; margin:2px 2px 14px;
  font-size:.82rem; color:var(--text); cursor:pointer; user-select:none; text-align:left;
}
.souvenir input{ width:16px; height:16px; accent-color:var(--or); cursor:pointer; }
.lien-oublie{
  display:block; width:100%; margin-top:10px; background:transparent; border:none;
  color:var(--bleu); font-size:.83rem; font-weight:600; cursor:pointer; text-decoration:underline;
}

input, select, textarea{
  padding:13px 15px; border-radius:12px; border:1px solid rgba(255,255,255,.85);
  background:rgba(255,255,255,.62); color:var(--text); font-size:.95rem; font-family:inherit;
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  box-shadow:inset 0 1px 2px rgba(13,27,46,.05);
  transition:border-color .2s, box-shadow .2s, background .2s;
}
input:focus, select:focus, textarea:focus{
  outline:none; border-color:var(--or); background:rgba(255,255,255,.94);
  box-shadow:0 0 0 3px rgba(201,146,46,.14);
}
input::placeholder, textarea::placeholder{ color:#94a1b5; }

.btn-principal{
  padding:15px 28px; font-size:.96rem; font-weight:700;
  background:linear-gradient(180deg, #1a3a63, var(--nuit)); color:#fff;
  border:1px solid rgba(232,176,75,.4); border-radius:13px; cursor:pointer;
  box-shadow:0 8px 22px rgba(13,27,46,.28), inset 0 1px 0 rgba(255,255,255,.12);
  transition:transform .25s var(--spring), box-shadow .25s;
}
.btn-principal:hover{ transform:translateY(-2px); box-shadow:0 12px 28px rgba(13,27,46,.35); }
.btn-principal:active{ transform:scale(.97); }
.btn-secondaire{
  padding:12px 22px; font-size:.9rem; font-weight:600; color:var(--text);
  background:rgba(255,255,255,.6); border:1px solid var(--verre-bord); border-radius:12px; cursor:pointer;
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  transition:border-color .2s, transform .2s var(--spring);
}
.btn-secondaire:hover{ border-color:var(--or); }
.btn-secondaire:active{ transform:scale(.97); }
.btn-block{ width:100%; margin-top:6px; }

.msg-erreur{ margin-top:10px; font-size:.85rem; color:var(--rouge); min-height:1.2em; text-align:center; }
.msg-erreur:not(:empty){ animation:secousse .4s var(--sortie); }
@keyframes secousse{ 0%,100%{ transform:translateX(0); } 25%{ transform:translateX(-6px); } 50%{ transform:translateX(6px); } 75%{ transform:translateX(-4px); } }
.chip-demo{ margin:14px auto 0; display:inline-block; padding:6px 14px; border-radius:16px; background:rgba(201,146,46,.12); color:#8a6d1f; font-size:.74rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; }

/* ════════ STRUCTURE ════════ */
.app{ width:100%; height:100vh; height:100dvh; display:flex; flex-direction:column; }
.app-header{
  background:rgba(13,27,46,.82); color:#fff; padding:13px 18px;
  backdrop-filter:blur(24px) saturate(1.5); -webkit-backdrop-filter:blur(24px) saturate(1.5);
  border-bottom:1px solid rgba(255,255,255,.10);
  display:flex; align-items:center; justify-content:space-between; position:relative; z-index:10;
}
.header-identite{ display:flex; align-items:center; gap:11px; }
.header-logo{ width:38px; height:38px; object-fit:contain; background:#fff; border-radius:11px; padding:3px; }
.header-identite strong{ display:block; font-size:1rem; }
.header-identite span{ font-size:.68rem; color:var(--or-clair); text-transform:uppercase; letter-spacing:.08em; }
.avatar{
  width:38px; height:38px; border-radius:50%; cursor:pointer;
  background:linear-gradient(135deg, var(--or-clair), var(--or)); color:#221503;
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:.85rem;
  background-size:cover; background-position:center;
}

.app-contenu{ flex:1; overflow-y:auto; position:relative; padding-bottom:calc(108px + var(--safe-bas)); }
.page{ display:none; padding:20px 16px 30px; max-width:680px; margin:0 auto; width:100%; }
.page.active{ display:block; animation:pageEntree .45s var(--sortie); }
@keyframes pageEntree{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:translateY(0); } }
.page-titre{ font-size:1.5rem; font-weight:800; letter-spacing:-.02em; }
.accroche{ font-size:1.1rem; font-weight:700; color:var(--or); margin:4px 0 2px; }
.page-sous-titre{ color:var(--muted); font-size:.87rem; margin-top:3px; margin-bottom:18px; }
.section-titre{ font-size:.98rem; font-weight:700; margin:22px 0 12px; }

/* ── Tuiles verre + tilt ── */
.tuiles{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:14px; perspective:900px; }
.tuile{
  padding:16px; text-align:left; cursor:pointer; color:var(--text);
  transform-style:preserve-3d; will-change:transform;
  transition:transform .3s var(--spring), box-shadow .3s;
  animation:carteEntree .5s var(--sortie) backwards;
}
.tuile:nth-child(1){ animation-delay:.04s; } .tuile:nth-child(2){ animation-delay:.1s; }
.tuile:nth-child(3){ animation-delay:.16s; } .tuile:nth-child(4){ animation-delay:.22s; }
@keyframes carteEntree{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:translateY(0); } }
.tuile:hover{ box-shadow:0 14px 36px rgba(13,27,46,.16), inset 0 1px 0 rgba(255,255,255,.9); }
.tuile.tilt{ transition:none; transform:var(--tilt-transform, none); }
.tuile strong{ display:block; font-size:1.75rem; font-weight:800; color:var(--nuit); line-height:1.1; }
.tuile span{ font-size:.7rem; color:var(--muted); text-transform:uppercase; letter-spacing:.07em; font-weight:700; }
.tuile-or{ border-top:3px solid var(--or); }
.tuile-bleu{ border-top:3px solid var(--bleu); }
.tuile-vert{ border-top:3px solid var(--vert); }
.tuile-rouge{ border-top:3px solid var(--rouge); }

/* ── Fil annonces & posts ── */
.fil, .fil-mini{ display:flex; flex-direction:column; gap:14px; }
.publication, .post{
  overflow:hidden; position:relative;
  animation:carteEntree .45s var(--sortie) backwards;
  transition:transform .25s var(--sortie), box-shadow .25s;
}
.publication:hover, .post:hover{ transform:translateY(-2px); }
.publication:nth-child(2), .post:nth-child(2){ animation-delay:.06s; }
.publication:nth-child(3), .post:nth-child(3){ animation-delay:.12s; }
.publication:nth-child(4), .post:nth-child(4){ animation-delay:.18s; }
.publication::before, .post::before{
  content:""; position:absolute; top:-120%; left:-60%; width:48%; height:300%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.4), transparent);
  transform:rotate(18deg); pointer-events:none; animation:reflet 11s ease-in-out infinite;
}
@keyframes reflet{ 0%,62%,100%{ left:-60%; } 82%{ left:130%; } }
.pub-tete{ display:flex; align-items:center; gap:11px; padding:13px 16px 10px; }
.pub-avatar{
  width:40px; height:40px; border-radius:50%; flex:0 0 auto;
  background:linear-gradient(135deg, var(--nuit2), var(--nuit)); color:var(--or-clair);
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:.82rem;
  background-size:cover; background-position:center;
}
.pub-meta{ flex:1; min-width:0; line-height:1.3; }
.pub-meta strong{ display:block; font-size:.9rem; }
.pub-meta small{ color:var(--muted); font-size:.73rem; }
.pub-cible{ background:rgba(47,95,158,.12); color:var(--bleu); padding:3px 10px; border-radius:10px; font-size:.67rem; font-weight:700; }
.pub-texte{ padding:2px 16px 14px; font-size:.93rem; line-height:1.55; white-space:pre-wrap; }
.pub-media{ width:100%; max-height:440px; object-fit:cover; display:block; background:#0d1b2e; }
video.pub-media{ object-fit:contain; }
.pub-pied{ display:flex; align-items:center; gap:14px; padding:10px 16px 13px; border-top:1px solid rgba(13,27,46,.07); }
.pub-pied small{ color:var(--muted); font-size:.74rem; }
.pub-badge-video{ background:rgba(176,70,63,.10); color:var(--rouge); padding:3px 10px; border-radius:10px; font-size:.67rem; font-weight:700; text-transform:uppercase; }
.pub-badge-photo{ background:rgba(29,122,85,.10); color:var(--vert); padding:3px 10px; border-radius:10px; font-size:.67rem; font-weight:700; text-transform:uppercase; }
.fil-vide{ text-align:center; color:var(--muted); padding:40px 20px; font-size:.9rem; }

/* ════════ CAMPUS (réseau social) ════════ */
.campus-intro{
  display:flex; align-items:center; gap:12px; padding:14px 16px; margin-bottom:16px;
  background:linear-gradient(135deg, rgba(201,146,46,.14), rgba(47,95,158,.10));
  border:1px solid var(--verre-bord); border-radius:16px;
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
}
.campus-intro-avatar{
  width:46px; height:46px; border-radius:50%; flex:0 0 auto;
  background:linear-gradient(135deg, var(--or-clair), var(--or)); color:#221503;
  display:flex; align-items:center; justify-content:center; font-weight:800;
  background-size:cover; background-position:center;
}
.campus-intro button{
  flex:1; text-align:left; padding:12px 16px; border-radius:24px; cursor:pointer;
  background:rgba(255,255,255,.6); border:1px solid var(--verre-bord); color:var(--muted);
  font-size:.9rem; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.post-actions{ display:flex; align-items:center; gap:4px; padding:8px 10px; border-top:1px solid rgba(13,27,46,.07); }
.btn-social{
  display:flex; align-items:center; gap:7px; border:none; cursor:pointer;
  background:transparent; color:var(--muted); font-weight:700; font-size:.84rem;
  padding:9px 13px; border-radius:12px;
  transition:background .2s, color .2s, transform .2s var(--spring);
}
.btn-social svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; }
.btn-social:hover{ background:rgba(13,27,46,.05); }
.btn-social:active{ transform:scale(.9); }
.btn-social.aime{ color:var(--rouge); }
.btn-social.aime svg{ fill:var(--rouge); stroke:var(--rouge); animation:coeur .45s var(--spring); }
@keyframes coeur{ 0%{ transform:scale(1); } 45%{ transform:scale(1.5); } 100%{ transform:scale(1); } }
.post-commentaires{ padding:6px 16px 14px; display:none; }
.post-commentaires.ouvert{ display:block; animation:fondu .3s ease; }
.commentaire{ display:flex; gap:9px; padding:7px 0; font-size:.87rem; }
.commentaire .pub-avatar{ width:30px; height:30px; font-size:.64rem; }
.commentaire-corps{ flex:1; background:rgba(255,255,255,.6); border:1px solid var(--verre-bord); border-radius:14px; padding:8px 13px; }
.commentaire-corps strong{ font-size:.79rem; display:block; }
.commentaire-corps span{ font-size:.87rem; }
.commentaire-saisie{ display:flex; gap:8px; margin-top:10px; }
.commentaire-saisie input{ flex:1; padding:10px 14px; font-size:.87rem; border-radius:22px; }

/* ── Listes / catégories / requêtes ── */
.liste-simple{ display:flex; flex-direction:column; gap:10px; }
.item-simple{ padding:13px 16px; display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; font-size:.88rem; animation:carteEntree .4s var(--sortie) backwards; transition:transform .22s var(--sortie); }
.item-simple:hover{ transform:translateY(-2px); }
.item-simple small{ color:var(--muted); display:block; }
.pill{ padding:4px 11px; border-radius:12px; font-weight:700; font-size:.7rem; text-transform:uppercase; letter-spacing:.03em; }
.pill.ok{ background:rgba(29,122,85,.12); color:var(--vert); }
.pill.attente{ background:rgba(201,146,46,.14); color:#8a6d1f; }

/* ── Relevés ── */
.releve-carte{ padding:18px; border-left:3px solid var(--or); animation:carteEntree .45s var(--sortie) backwards; }
.releve-carte .rel-tete{ display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
.releve-carte .rel-tete strong{ font-size:1.05rem; }
.rel-stats{ display:flex; gap:18px; flex-wrap:wrap; margin-bottom:12px; }
.rel-stat strong{ display:block; font-size:1.3rem; font-weight:800; color:var(--nuit); }
.rel-stat span{ font-size:.65rem; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; }
.btn-pdf{
  display:inline-flex; align-items:center; gap:8px; text-decoration:none;
  padding:11px 20px; border-radius:11px; font-size:.87rem; font-weight:700;
  background:linear-gradient(180deg, #1a3a63, var(--nuit)); color:#fff;
  border:1px solid rgba(232,176,75,.35); box-shadow:0 6px 16px rgba(13,27,46,.25);
}
.btn-pdf svg{ width:16px; height:16px; stroke:var(--or-clair); fill:none; }
.rel-decision{ padding:4px 12px; border-radius:12px; font-size:.7rem; font-weight:800; text-transform:uppercase; }
.rel-decision.ok{ background:rgba(29,122,85,.12); color:var(--vert); }
.rel-decision.non{ background:rgba(176,70,63,.10); color:var(--rouge); }

/* ── Chat ── */
.chat-zone{ display:flex; flex-direction:column; gap:8px; padding:4px 0 12px; }
.bulle{ max-width:80%; padding:10px 14px; border-radius:16px; font-size:.92rem; line-height:1.45; animation:carteEntree .3s var(--sortie); box-shadow:var(--ombre); }
.bulle small{ display:block; font-size:.66rem; opacity:.65; margin-top:4px; }
.bulle.moi{ align-self:flex-end; background:linear-gradient(180deg, #1a3a63, var(--nuit)); color:#fff; border-bottom-right-radius:5px; }
.bulle.autre{ align-self:flex-start; border-bottom-left-radius:5px; background:var(--verre); border:1px solid var(--verre-bord); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); }
.chat-saisie{ position:sticky; bottom:0; display:flex; gap:8px; padding:10px 0 4px; }
.chat-saisie input{ flex:1; }
.btn-envoyer{
  width:48px; height:48px; border-radius:50%; border:1px solid rgba(232,176,75,.35); cursor:pointer; flex:0 0 auto;
  background:linear-gradient(180deg, #1a3a63, var(--nuit)); color:var(--or-clair);
  display:flex; align-items:center; justify-content:center;
}
.btn-envoyer svg{ width:20px; height:20px; fill:currentColor; }

/* ── Profil ── */
.profil-photo-zone{ display:flex; flex-direction:column; align-items:center; gap:12px; padding:14px 0; }
.profil-photo{ width:106px; height:106px; border-radius:50%; object-fit:cover; border:3px solid var(--or); box-shadow:0 10px 28px rgba(201,146,46,.25); }
.profil-photo-vide{
  width:106px; height:106px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, var(--nuit2), var(--nuit)); color:var(--or-clair);
  font-size:2.1rem; font-weight:800; border:3px solid var(--or);
}
.carte-formulaire{ padding:20px 18px; display:flex; flex-direction:column; gap:11px; }
.champ-bloc{ display:flex; flex-direction:column; gap:6px; margin-bottom:12px; animation:fondu .3s ease; }
.champ-bloc label{ font-size:.73rem; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; }
.champ-bloc input, .champ-bloc select, .champ-bloc textarea{ width:100%; }

/* ════════ PILULE FLOTTANTE (barre d'onglets WhatsApp) ════════ */
.tabbar{
  position:fixed; left:12px; right:12px; bottom:calc(10px + var(--safe-bas)); z-index:15;
  display:flex; justify-content:space-around; padding:7px 6px; border-radius:30px;
  background:rgba(18, 26, 38, .74);
  backdrop-filter:blur(30px) saturate(1.7); -webkit-backdrop-filter:blur(30px) saturate(1.7);
  border:1px solid rgba(255,255,255,.14); border-top:1px solid rgba(255,255,255,.2);
  box-shadow:0 14px 40px rgba(8,12,22,.5);
}
@media (min-width:761px){ .tabbar{ left:50%; right:auto; transform:translateX(-50%); min-width:520px; bottom:16px; } }
.tab{
  position:relative; flex:1; max-width:120px; border:none; background:transparent; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; gap:3px;
  color:rgba(255,255,255,.78); font-size:.62rem; font-weight:700;
  padding:9px 3px; border-radius:22px;
  transition:background .25s var(--sortie), color .2s, transform .2s var(--spring);
}
.tab svg{ width:22px; height:22px; fill:currentColor; }
.tab:active{ transform:scale(.9); }
.tab.active{ background:rgba(255,255,255,.18); color:#fff; }
.badge-notif{
  position:absolute; top:2px; right:12px; min-width:17px; height:17px; border-radius:9px;
  background:var(--rouge); color:#fff; font-size:.62rem; font-weight:800;
  display:flex; align-items:center; justify-content:center; padding:0 4px;
}

/* ── Bouton flottant ── */
.fab{
  position:fixed; right:18px; bottom:calc(98px + var(--safe-bas)); z-index:20;
  width:58px; height:58px; border-radius:50%; cursor:pointer;
  background:rgba(18,26,38,.85); border:1px solid rgba(232,176,75,.5);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  color:var(--or-clair); box-shadow:0 12px 30px rgba(8,12,22,.45);
  transition:transform .25s var(--spring); display:none; align-items:center; justify-content:center;
}
.fab svg{ width:26px; height:26px; fill:var(--or-clair); }
.fab.visible{ display:flex; animation:fabEntree .5s var(--spring); }
@keyframes fabEntree{ from{ opacity:0; transform:scale(.5); } to{ opacity:1; transform:scale(1); } }
.fab:hover{ transform:scale(1.08); }
.fab:active{ transform:scale(.92); }
@media (min-width:761px){ .fab{ right:calc(50% - 340px); bottom:104px; } }

/* ════════ FEUILLES (composeur) ════════ */
.composeur{
  position:fixed; inset:0; z-index:50; background:rgba(13,27,46,.42);
  display:flex; align-items:flex-end; justify-content:center;
  animation:fondu .25s ease; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.composeur-feuille{
  width:100%; max-width:640px; border-radius:26px 26px 0 0;
  background:rgba(250,251,253,.86);
  backdrop-filter:blur(32px) saturate(1.6); -webkit-backdrop-filter:blur(32px) saturate(1.6);
  padding:18px 20px calc(24px + var(--safe-bas));
  box-shadow:0 -18px 50px rgba(13,27,46,.28);
  animation:feuilleMonte .45s var(--spring); max-height:90vh; overflow-y:auto;
}
@keyframes feuilleMonte{ from{ transform:translateY(60%); } to{ transform:translateY(0); } }
@media (min-width:761px){ .composeur{ align-items:center; } .composeur-feuille{ border-radius:26px; } }
.composeur-tete{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.composeur-tete strong{ font-size:1rem; }
.btn-fermer{ width:34px; height:34px; border-radius:50%; border:none; cursor:pointer; background:rgba(13,27,46,.07); color:var(--muted); font-size:1.3rem; line-height:1; }
.btn-publier{
  padding:9px 20px; border-radius:18px; border:1px solid rgba(232,176,75,.4); cursor:pointer;
  background:linear-gradient(180deg, #1a3a63, var(--nuit)); color:#fff; font-weight:800; font-size:.85rem;
  transition:transform .2s var(--spring);
}
.btn-publier:active{ transform:scale(.94); }
#comp-texte, #post-texte, #req-champs textarea{ width:100%; border:none; background:transparent; font-size:1rem; padding:6px 2px; box-shadow:none; backdrop-filter:none; }
#comp-texte:focus, #post-texte:focus{ box-shadow:none; background:transparent; }
.comp-apercu{ margin:10px 0; border-radius:14px; overflow:hidden; background:#0d1b2e; }
.comp-apercu img, .comp-apercu video{ width:100%; max-height:300px; object-fit:contain; display:block; }
.composeur-outils{ display:flex; gap:9px; margin:12px 0; flex-wrap:wrap; }
.outil{
  display:flex; align-items:center; gap:7px; padding:9px 15px; border-radius:18px;
  border:1px solid var(--verre-bord); background:rgba(255,255,255,.6);
  cursor:pointer; font-size:.83rem; font-weight:600; color:var(--text);
  transition:border-color .2s, transform .2s var(--spring);
}
.outil svg{ width:17px; height:17px; fill:currentColor; }
.outil:hover{ border-color:var(--or); }
.outil:active{ transform:scale(.95); }

/* ── Oeil mot de passe ── */
.champ-oeil{ position:relative; width:100%; }
.champ-oeil input{ width:100%; padding-right:46px !important; }
.btn-oeil{
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  width:34px; height:34px; border:none; background:transparent; cursor:pointer;
  display:flex; align-items:center; justify-content:center; padding:0; color:#8a95a8;
}
.btn-oeil svg{ width:20px; height:20px; fill:currentColor; }

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration:.001s !important; transition-duration:.001s !important; }
}