:root {
  --or: #c9a84c;
  --or2: #e8d08a;
  --fond: #0e1a12;
  --vert: #1a3a24;
  --creme: #f5efe6;
  --blanc: #ffffff;
  --rouge: #c0555a;
  --gris: #8a9e8e;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Tajawal', sans-serif; background: var(--fond); color: var(--creme); overflow-x: hidden; }

@keyframes monter { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
@keyframes cligner { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }
@keyframes flotter { 0% { bottom: -10px; opacity: 0; } 15% { opacity: .8; } 85% { opacity: .4; } 100% { bottom: 110%; opacity: 0; } }
@keyframes ambiance { 0% { opacity: .6; transform: scale(1); } 100% { opacity: 1; transform: scale(1.05); } }

/* ===== PAGES ===== */
.page { display: none; }
.page.actif { display: block; }
.page-auth { display: none; min-height: 100vh; background: linear-gradient(160deg, #0e1a12, #1a3a24 60%, #0e1a12); padding: 40px 20px; align-items: center; justify-content: center; }
.page-auth.actif { display: flex; }

/* ===== ACCUEIL ===== */
#pg-accueil { position: relative; width: 100vw; height: 100vh; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.vbg { position: absolute; inset: 0; background: #0a1510; }
#vid { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; opacity: .55; }
.vfb { position: absolute; inset: 0; background: linear-gradient(135deg, #0e1a12, #1a3a24 40%, #2d5a3a 70%, #0e1a12); }
.vfb::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 80% 60% at 30% 50%, rgba(201,168,76,.12), transparent 70%); animation: ambiance 8s ease-in-out infinite alternate; will-change: opacity, transform; }
.pts { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.pt { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: var(--or2); opacity: 0; animation: flotter linear; will-change: transform, opacity; }
.pt:nth-child(1) { left: 15%; animation-duration: 6s; }
.pt:nth-child(2) { left: 28%; animation-duration: 8s; animation-delay: 1s; }
.pt:nth-child(3) { left: 45%; animation-duration: 5s; animation-delay: 2s; width: 4px; height: 4px; }
.pt:nth-child(4) { left: 62%; animation-duration: 7s; animation-delay: .5s; }
.pt:nth-child(5) { left: 78%; animation-duration: 6s; animation-delay: 3s; width: 2px; height: 2px; }
.ovl { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(14,26,18,.45), rgba(14,26,18,.15) 40%, rgba(14,26,18,.75)); z-index: 3; }
.bism { position: absolute; top: 28px; left: 50%; transform: translateX(-50%); font-size: 18px; color: var(--or); opacity: .7; letter-spacing: 2px; z-index: 10; }
.hero { position: relative; z-index: 10; text-align: center; padding: 0 20px; animation: monter 1.2s ease-out .8s both; will-change: transform, opacity; }
.logo { font-family: 'Playfair Display', serif; font-size: clamp(14px, 2vw, 18px); color: var(--or); letter-spacing: 6px; text-transform: uppercase; margin-bottom: 8px; opacity: .85; }
.titre { font-family: 'Playfair Display', serif; font-size: clamp(40px, 7vw, 86px); font-weight: 700; color: var(--blanc); line-height: 1.05; margin-bottom: 6px; text-shadow: 0 4px 30px rgba(0,0,0,.7); }
.titre span { color: var(--or); font-style: italic; }
.sous { font-size: clamp(13px, 1.5vw, 17px); color: var(--or2); letter-spacing: 3px; margin-bottom: 16px; opacity: .9; }
.desc { font-size: clamp(14px, 1.4vw, 16px); color: rgba(245,239,230,.8); max-width: 500px; margin: 0 auto 40px; line-height: 1.7; }
.btns-acc { display: flex; flex-direction: column; gap: 14px; align-items: center; }
.btn-or { padding: 16px 52px; background: linear-gradient(135deg, var(--or), #a67c30); color: var(--fond); font-family: 'Tajawal', sans-serif; font-size: 17px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; border: none; cursor: pointer; border-radius: 2px; transition: transform .2s, box-shadow .2s; box-shadow: 0 8px 40px rgba(201,168,76,.45); min-width: 280px; }
.btn-or:hover { transform: translateY(-2px); box-shadow: 0 12px 50px rgba(201,168,76,.6); }
.btn-bord { padding: 14px 52px; background: transparent; color: var(--or); font-family: 'Tajawal', sans-serif; font-size: 16px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; border: 2px solid var(--or); cursor: pointer; border-radius: 2px; transition: all .25s; min-width: 280px; }
.btn-bord:hover { background: rgba(201,168,76,.12); transform: translateY(-2px); }
.btn-lien { background: none; border: none; color: var(--gris); font-family: 'Tajawal', sans-serif; font-size: 13px; cursor: pointer; transition: color .2s; padding: 4px; }
.btn-lien:hover { color: var(--or2); }

/* ===== AUTH ===== */
.auth-box { max-width: 460px; width: 100%; background: rgba(255,255,255,.04); border: 1px solid rgba(201,168,76,.2); border-radius: 6px; padding: 42px 38px; animation: monter .5s ease both; }
.auth-titre { font-family: 'Playfair Display', serif; font-size: clamp(22px, 4vw, 32px); color: var(--blanc); margin-bottom: 6px; text-align: center; }
.auth-titre span { color: var(--or); font-style: italic; }
.auth-sous { font-size: 13px; color: var(--gris); text-align: center; margin-bottom: 22px; line-height: 1.6; }
.auth-logo { text-align: center; margin-bottom: 16px; }
.lbl { display: block; font-size: 12px; color: var(--or); letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 6px; font-weight: 500; margin-top: 14px; }
.inp { width: 100%; padding: 12px 16px; background: rgba(255,255,255,.06); border: 1px solid rgba(201,168,76,.25); border-radius: 2px; color: var(--creme); font-family: 'Tajawal', sans-serif; font-size: 15px; outline: none; transition: border-color .3s; }
.inp:focus { border-color: var(--or); background: rgba(201,168,76,.06); }
.inp::placeholder { color: rgba(245,239,230,.35); }
.pw-wr { position: relative; }
.pw-wr .inp { padding-right: 44px; }
.btn-oeil { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--gris); cursor: pointer; font-size: 15px; }
.barre-wr { margin-top: 5px; height: 4px; border-radius: 2px; background: rgba(255,255,255,.08); }
.barre { height: 100%; border-radius: 2px; width: 0; transition: width .3s, background .3s; }
.btn-submit { width: 100%; padding: 14px; background: linear-gradient(135deg, var(--or), #a67c30); color: var(--fond); font-family: 'Tajawal', sans-serif; font-size: 16px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; border: none; border-radius: 2px; cursor: pointer; transition: all .25s; box-shadow: 0 6px 30px rgba(201,168,76,.3); margin-top: 18px; }
.btn-submit:hover { transform: translateY(-2px); }
.btn-submit:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.auth-lien { text-align: center; margin-top: 14px; font-size: 13px; color: var(--gris); }
.auth-lien a { color: var(--or); cursor: pointer; text-decoration: none; }
.auth-lien a:hover { color: var(--or2); }
.sep { display: flex; align-items: center; gap: 14px; margin: 18px 0; opacity: .3; }
.sep::before, .sep::after { content: ''; flex: 1; height: 1px; background: var(--or); }
.sep span { font-size: 11px; color: var(--or); letter-spacing: 2px; }
.msg-ok { padding: 12px 14px; background: rgba(61,170,101,.1); border: 1px solid rgba(61,170,101,.3); border-radius: 3px; font-size: 13px; color: #a8f0be; line-height: 1.6; display: none; margin-bottom: 14px; }
.msg-ok.visible { display: block; }

/* ===== FORM PROFIL ===== */
#pg-profil { background: linear-gradient(160deg, #0e1a12, #1a3a24 60%, #0e1a12); padding: 40px 20px; min-height: 100vh; }
.form-entete { text-align: center; margin-bottom: 28px; }
.form-titre { font-family: 'Playfair Display', serif; font-size: clamp(26px, 4vw, 38px); color: var(--blanc); margin-bottom: 6px; }
.form-titre span { color: var(--or); font-style: italic; }
.form-sous { font-size: 13px; color: var(--gris); }
.boite { max-width: 640px; margin: 0 auto; background: rgba(255,255,255,.04); border: 1px solid rgba(201,168,76,.2); border-radius: 4px; padding: 36px; backdrop-filter: blur(10px); }
.fr { margin-bottom: 20px; }
.fl { display: block; font-size: 12px; font-weight: 500; color: var(--or); letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 7px; }
.fi { width: 100%; padding: 12px 15px; background: rgba(255,255,255,.06); border: 1px solid rgba(201,168,76,.25); border-radius: 2px; color: var(--creme); font-family: 'Tajawal', sans-serif; font-size: 15px; outline: none; transition: border-color .3s; }
.fi:focus { border-color: var(--or); background: rgba(201,168,76,.06); }
.fi::placeholder { color: rgba(245,239,230,.35); }
select.fi { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23c9a84c' stroke-width='1.5' fill='none'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 13px center; padding-right: 34px; cursor: pointer; }
select.fi option { background: #0e1a12; color: var(--creme); }
.fr2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 20px; }
.gbts { display: flex; gap: 10px; }
.gb { flex: 1; padding: 12px; background: rgba(255,255,255,.05); border: 1px solid rgba(201,168,76,.25); border-radius: 2px; color: var(--creme); font-family: 'Tajawal', sans-serif; font-size: 15px; cursor: pointer; transition: all .25s; display: flex; align-items: center; justify-content: center; gap: 7px; }
.gb:hover { border-color: var(--or); background: rgba(201,168,76,.08); }
.gb.actif { background: linear-gradient(135deg, var(--or), #a67c30); color: var(--fond); font-weight: 700; border-color: var(--or); }
.rg, .cg { display: flex; flex-wrap: wrap; gap: 8px; }
.ri, .ci { display: flex; align-items: center; gap: 7px; padding: 9px 14px; background: rgba(255,255,255,.04); border: 1px solid rgba(201,168,76,.2); border-radius: 2px; cursor: pointer; transition: all .2s; font-size: 14px; color: var(--creme); }
.ri:hover, .ci:hover { border-color: var(--or); background: rgba(201,168,76,.06); }
.ri input, .ci input { width: 15px; height: 15px; accent-color: var(--or); cursor: pointer; }
.ri.actif, .ci.actif { border-color: var(--or); background: rgba(201,168,76,.12); color: var(--or2); }
.div-sep { display: flex; align-items: center; gap: 14px; margin: 24px 0; opacity: .35; }
.div-sep::before, .div-sep::after { content: ''; flex: 1; height: 1px; background: var(--or); }
.div-sep span { font-size: 12px; color: var(--or); letter-spacing: 2px; white-space: nowrap; }
.abo-box { padding: 16px 18px; background: rgba(255,255,255,.04); border: 1px solid rgba(201,168,76,.3); border-radius: 3px; }
.abo-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.abo-prix { font-family: 'Playfair Display', serif; font-size: 24px; color: var(--or); font-weight: 700; }
.abo-lbl { font-size: 14px; color: var(--creme); opacity: .85; }
.abo-note { font-size: 12px; color: var(--gris); margin-top: 3px; }
.gratuit { display: inline-block; padding: 5px 16px; background: linear-gradient(135deg, #2d8a4e, #1a5e33); color: #a8f0be; font-size: 13px; font-weight: 700; letter-spacing: 1px; border-radius: 20px; border: 1px solid #3daa65; }
.zone-ph { border: 2px dashed rgba(201,168,76,.3); border-radius: 3px; padding: 22px; text-align: center; cursor: pointer; transition: all .3s; position: relative; overflow: hidden; }
.zone-ph:hover { border-color: var(--or); background: rgba(201,168,76,.04); }
.zone-ph input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.ph-ico { font-size: 28px; margin-bottom: 7px; }
.ph-lbl { color: var(--or); font-size: 15px; font-weight: 500; }
.ph-note { font-size: 12px; color: var(--gris); margin-top: 5px; line-height: 1.5; }
.ph-prev { width: 76px; height: 76px; border-radius: 50%; object-fit: cover; border: 2px solid var(--or); margin: 0 auto 7px; display: none; }
.fta { width: 100%; padding: 12px 15px; background: rgba(255,255,255,.06); border: 1px solid rgba(201,168,76,.25); border-radius: 2px; color: var(--creme); font-family: 'Tajawal', sans-serif; font-size: 15px; outline: none; resize: vertical; min-height: 100px; transition: border-color .3s; }
.fta:focus { border-color: var(--or); background: rgba(201,168,76,.06); }
.fta::placeholder { color: rgba(245,239,230,.35); }
.btn-val { width: 100%; padding: 15px; background: linear-gradient(135deg, var(--or), #a67c30); color: var(--fond); font-family: 'Tajawal', sans-serif; font-size: 16px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; border: none; border-radius: 2px; cursor: pointer; transition: all .25s; box-shadow: 0 6px 30px rgba(201,168,76,.3); margin-top: 10px; }
.btn-val:hover { transform: translateY(-2px); }
.form-note { text-align: center; font-size: 12px; color: var(--gris); margin-top: 12px; }

/* ===== PROFILS ===== */
#pg-profils { background: linear-gradient(160deg, #0e1a12, #1a3a24 60%, #0e1a12); padding: 40px 20px; min-height: 100vh; }
.profils-en { text-align: center; margin-bottom: 32px; }
.profils-titre { font-family: 'Playfair Display', serif; font-size: clamp(26px, 4vw, 40px); color: var(--blanc); margin-bottom: 8px; }
.profils-titre span { color: var(--or); font-style: italic; }
.profils-sous { font-size: 14px; color: var(--gris); margin-bottom: 18px; }
.tbar { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.tbtn { padding: 8px 18px; border-radius: 20px; font-family: 'Tajawal', sans-serif; font-size: 13px; cursor: pointer; transition: all .2s; border: 1px solid; }
.tbtn-or { background: rgba(201,168,76,.12); border-color: rgba(201,168,76,.4); color: var(--or); }
.tbtn-or:hover { background: rgba(201,168,76,.25); }
.tbtn-rouge { background: rgba(192,85,90,.08); border-color: rgba(192,85,90,.25); color: var(--rouge); }
.tbtn-rouge:hover { background: rgba(192,85,90,.18); }
.filts { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 20px; }
.fbtn { padding: 7px 18px; background: rgba(255,255,255,.05); border: 1px solid rgba(201,168,76,.2); border-radius: 20px; color: var(--creme); font-family: 'Tajawal', sans-serif; font-size: 13px; cursor: pointer; transition: all .2s; }
.fbtn.actif, .fbtn:hover { background: var(--or); color: var(--fond); font-weight: 700; border-color: var(--or); }
.fa-zone { max-width: 900px; margin: 0 auto 24px; background: rgba(255,255,255,.03); border: 1px solid rgba(201,168,76,.15); border-radius: 6px; padding: 16px 20px; }
.fa-titre { font-size: 12px; color: var(--or); letter-spacing: 2px; text-transform: uppercase; margin-bottom: 12px; opacity: .7; }
.fa-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.fsel { width: 100%; padding: 9px 28px 9px 11px; background: rgba(255,255,255,.06); border: 1px solid rgba(201,168,76,.2); border-radius: 3px; color: var(--creme); font-family: 'Tajawal', sans-serif; font-size: 13px; outline: none; cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23c9a84c' stroke-width='1.5' fill='none'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 9px center; }
.fsel:focus { border-color: var(--or); }
.fsel option { background: #0e1a12; color: var(--creme); }
.btn-reinit { padding: 9px 16px; background: rgba(255,255,255,.04); border: 1px solid rgba(201,168,76,.2); border-radius: 3px; color: var(--gris); font-family: 'Tajawal', sans-serif; font-size: 13px; cursor: pointer; transition: all .2s; white-space: nowrap; }
.btn-reinit:hover { border-color: var(--or); color: var(--or); }
.grille { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; max-width: 1120px; margin: 0 auto; grid-auto-rows: 1fr; }

/* ===== CARTES ===== */
.card { background: #0e1a12; border: 1.5px solid rgba(201,168,76,.75); border-radius: 8px; overflow: hidden; transition: transform .25s, box-shadow .25s; position: relative; cursor: pointer; animation: monter .4s ease both; box-shadow: 0 0 0 1px rgba(201,168,76,.25), 0 4px 16px rgba(0,0,0,.4); display: flex; flex-direction: column; height: 370px; }
.card:hover { transform: translateY(-5px); box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.cav { height: 200px; background: linear-gradient(135deg, #1a3a24, #2d5a3a); position: relative; overflow: hidden; flex-shrink: 0; }
.cav img { width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform .4s; }
.card:hover .cav img { transform: scale(1.04); }
.cav::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 50%, rgba(14,26,18,.8)); pointer-events: none; }
.np { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 60px; opacity: .35; }
.sdot { position: absolute; bottom: 12px; right: 12px; width: 11px; height: 11px; border-radius: 50%; background: #4caf7d; border: 2px solid #0e1a12; z-index: 5; animation: cligner 2s; will-change: opacity; }
.cbody { padding: 12px; flex: 1; display: flex; flex-direction: column; min-height: 120px; }
.cnom { font-family: 'Playfair Display', serif; font-size: 14px; color: var(--blanc); margin-bottom: 2px; }
.cmeta { font-size: 10px; color: var(--or); letter-spacing: 0px; margin-bottom: 4px; }
.ctags { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 10px; }
.ctag { padding: 1px 6px; background: rgba(201,168,76,.12); border: 1px solid rgba(201,168,76,.25); border-radius: 20px; font-size: 9px; color: var(--or2); }
.cbio { font-size: 13px; color: rgba(245,239,230,.65); line-height: 1.6; margin-bottom: 12px; flex: 1; }
.cact { display: flex; gap: 7px; margin-top: auto; padding-top: 10px; }
.btn-msg { flex: 1; padding: 8px; background: linear-gradient(135deg, var(--or), #a67c30); color: var(--fond); border: none; border-radius: 2px; font-family: 'Tajawal', sans-serif; font-size: 13px; font-weight: 700; cursor: pointer; transition: opacity .2s; }
.btn-msg:hover { opacity: .88; }
.btn-sig { padding: 8px 10px; background: rgba(192,85,90,.08); border: 1px solid rgba(192,85,90,.3); border-radius: 2px; color: var(--rouge); font-size: 14px; cursor: pointer; transition: all .2s; }
.btn-sig:hover { background: rgba(192,85,90,.18); }

/* ===== MON PROFIL ===== */
#pg-monprofil { background: linear-gradient(160deg, #0e1a12, #1a3a24 60%, #0e1a12); padding: 40px 20px; min-height: 100vh; }
.mp-haut { max-width: 640px; margin: 0 auto 24px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.mp-titre { font-family: 'Playfair Display', serif; font-size: clamp(20px, 3vw, 30px); color: var(--blanc); }
.mp-titre span { color: var(--or); font-style: italic; }
.mp-actions { display: flex; gap: 8px; }

/* ===== TOAST ===== */
.toast { position: fixed; bottom: 28px; right: 28px; background: rgba(14,26,18,.97); border: 1px solid var(--or); color: var(--creme); padding: 13px 20px; border-radius: 3px; font-size: 14px; z-index: 2000; opacity: 0; transform: translateY(20px); transition: all .4s; pointer-events: none; max-width: 300px; }
.toast.visible { opacity: 1; transform: translateY(0); }

@media (max-width: 600px) {
  .auth-box { padding: 26px 18px; }
  .boite { padding: 22px 16px; }
  .gbts { flex-direction: column; }
  .fr2 { grid-template-columns: 1fr; }
  .grille { grid-template-columns: 1fr 1fr; gap: 8px; }
  .fa-grille { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 400px) {
  .grille { grid-template-columns: 1fr 1fr; gap: 8px; }
  .fa-grille { grid-template-columns: 1fr; }
}

/* ===== PAGE DETAIL ===== */
#pg-detail{background:linear-gradient(160deg,#0e1a12,#1a3a24 60%,#0e1a12);min-height:100vh}
.dback{position:fixed;top:20px;left:20px;z-index:100;background:rgba(14,26,18,.92);border:1px solid rgba(201,168,76,.35);color:var(--or);padding:10px 20px;border-radius:3px;cursor:pointer;font-family:'Tajawal',sans-serif;font-size:14px;font-weight:600;transition:all .2s;backdrop-filter:blur(8px)}
.dback:hover{background:rgba(201,168,76,.18)}
.dhero{position:relative;height:50vh;min-height:300px;overflow:hidden;background:linear-gradient(135deg,#1a3a24,#2d5a3a);display:flex;align-items:center;justify-content:center}
.dhero::after{content:'';position:absolute;inset:0;background:linear-gradient(to bottom,rgba(14,26,18,.2),rgba(14,26,18,.85));pointer-events:none}
.dnp-d{position:relative;z-index:5;opacity:.5}
.dhi{position:absolute;bottom:0;left:0;right:0;padding:24px 32px;z-index:6}
.dnom{font-family:'Playfair Display',serif;font-size:clamp(28px,5vw,50px);color:var(--blanc);margin-bottom:5px;text-shadow:0 2px 20px rgba(0,0,0,.6)}
.dmeta{font-size:14px;color:var(--or2);letter-spacing:2px;margin-bottom:8px}
.dstat{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:#4caf7d}
.dstat::before{content:'';width:7px;height:7px;border-radius:50%;background:#4caf7d;animation: cligner 2s;display:inline-block}
.dbody{max-width:740px;margin:0 auto;padding:36px 24px 60px}
.dst{font-family:'Playfair Display',serif;font-size:12px;color:var(--or);letter-spacing:3px;text-transform:uppercase;margin-bottom:14px;opacity:.75;margin-top:24px}
.dbio{font-size:16px;color:rgba(245,239,230,.85);line-height:1.85;margin-bottom:8px;font-weight:300}
.dgrid-d{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:20px}
.dii{background:rgba(255,255,255,.04);border:1px solid rgba(201,168,76,.18);border-radius:4px;padding:13px 15px}
.dil{font-size:11px;color:var(--or);letter-spacing:2px;text-transform:uppercase;margin-bottom:4px;opacity:.75}
.div2{font-size:14px;color:var(--creme);font-weight:500}
.dtags-d{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:24px}
.dtag{padding:5px 14px;background:rgba(201,168,76,.12);border:1px solid rgba(201,168,76,.3);border-radius:20px;font-size:13px;color:var(--or2)}
.dsep2{width:50px;height:2px;background:linear-gradient(90deg,transparent,var(--or),transparent);margin:20px 0}
.dacts{display:flex;gap:10px;flex-wrap:wrap}
.dbm{flex:1;min-width:140px;padding:14px 20px;background:linear-gradient(135deg,var(--or),#a67c30);color:var(--fond);border:none;border-radius:2px;font-family:'Tajawal',sans-serif;font-size:15px;font-weight:700;cursor:pointer;transition:all .2s;letter-spacing:1px}
.dbm:hover{opacity:.88;transform:translateY(-1px)}
.dbrep{padding:14px 16px;background:rgba(192,85,90,.08);border:1px solid rgba(192,85,90,.3);border-radius:2px;color:var(--rouge);font-size:14px;cursor:pointer;font-family:'Tajawal',sans-serif;font-weight:600;transition:all .2s}
.dbrep:hover{background:rgba(192,85,90,.18)}

/* ===== MODALS ===== */
.mov{display:none;position:fixed;inset:0;background:rgba(0,0,0,.8);z-index:500;align-items:center;justify-content:center;backdrop-filter:blur(6px)}
.mov.on{display:flex}
.mbox{background:#0f1c13;border:1px solid rgba(201,168,76,.3);border-radius:8px;padding:30px 26px;max-width:480px;width:92%;animation:monter .3s ease;position:relative;max-height:90vh;overflow-y:auto}
.mbox.rep{border-color:rgba(192,85,90,.4)}
.mcls{position:absolute;top:12px;right:16px;background:none;border:none;color:var(--gris);font-size:22px;cursor:pointer;line-height:1}
.mcls:hover{color:var(--creme)}
.mtitre{font-family:'Playfair Display',serif;font-size:20px;color:var(--or);margin-bottom:4px}
.mtitre.r{color:var(--rouge)}
.mss{font-size:13px;color:var(--gris);margin-bottom:16px;line-height:1.6}
.minp{width:100%;padding:11px 13px;background:rgba(255,255,255,.06);border:1px solid rgba(201,168,76,.22);border-radius:2px;color:var(--creme);font-family:'Tajawal',sans-serif;font-size:14px;outline:none;margin-bottom:10px;transition:border-color .3s}
.minp:focus{border-color:var(--or)}
.minp::placeholder{color:rgba(245,239,230,.28)}
.mta{width:100%;padding:12px 13px;background:rgba(255,255,255,.06);border:1px solid rgba(201,168,76,.22);border-radius:2px;color:var(--creme);font-family:'Tajawal',sans-serif;font-size:14px;outline:none;resize:vertical;min-height:130px;line-height:1.65;transition:border-color .3s;margin-bottom:8px}
.mta:focus{border-color:var(--or)}
.mta::placeholder{color:rgba(245,239,230,.28)}
.mctr{font-size:11px;color:var(--gris);text-align:right;margin-bottom:12px}
.benv{width:100%;padding:13px;background:linear-gradient(135deg,var(--or),#a67c30);color:var(--fond);border:none;border-radius:2px;font-family:'Tajawal',sans-serif;font-size:15px;font-weight:700;cursor:pointer;transition:all .25s;letter-spacing:1px;margin-top:6px}
.benv:hover{opacity:.9;transform:translateY(-1px)}
.benv:disabled{opacity:.4;cursor:not-allowed;transform:none}
.mopts{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}
.mopt{display:flex;align-items:center;gap:9px;padding:10px 13px;background:rgba(255,255,255,.04);border:1px solid rgba(192,85,90,.2);border-radius:3px;cursor:pointer;transition:all .2s;font-size:14px;color:var(--creme)}
.mopt:hover,.mopt.on{border-color:var(--rouge);background:rgba(192,85,90,.1);color:#f0a0a0}
.mopt input{accent-color:var(--rouge)}
.mta-s{width:100%;padding:10px 13px;background:rgba(255,255,255,.06);border:1px solid rgba(192,85,90,.25);border-radius:2px;color:var(--creme);font-family:'Tajawal',sans-serif;font-size:14px;outline:none;resize:vertical;min-height:75px;margin-bottom:14px}
.mta-s::placeholder{color:rgba(245,239,230,.28)}
.bsig{width:100%;padding:12px;background:linear-gradient(135deg,#c0555a,#8c2f33);color:#fff;border:none;border-radius:2px;font-family:'Tajawal',sans-serif;font-size:14px;font-weight:700;cursor:pointer;letter-spacing:1px;transition:opacity .2s}
.bsig:hover{opacity:.88}

@media(max-width:600px){.dgrid-d{grid-template-columns:1fr}.dhi{padding:16px 20px}.dbody{padding:24px 16px 50px}.mbox{padding:24px 18px}}



/* ===== MESSAGERIE ===== */
#pg-messagerie { background: linear-gradient(160deg, #0e1a12, #1a3a24 60%, #0e1a12); min-height: 100vh; display: none; }
#pg-messagerie.actif { display: flex !important; flex-direction: column; }
.msg-header { display: flex; align-items: center; gap: 14px; padding: 18px 24px; border-bottom: 1px solid rgba(201,168,76,.2); background: rgba(14,26,18,.9); backdrop-filter: blur(8px); position: sticky; top: 0; z-index: 100; flex-shrink: 0; }
.msg-header-info { flex: 1; min-width: 0; } /* BUG 3 CORRIGÉ : min-width:0 évite overflow */
.msg-header-nom { font-family: 'Playfair Display', serif; font-size: 18px; color: var(--blanc); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-header-statut { font-size: 12px; color: #4caf7d; }
.msg-body { flex: 1; overflow-y: auto; padding: 20px 16px; display: flex; flex-direction: column; gap: 10px; max-width: 700px; width: 100%; margin: 0 auto; }
.bubble { max-width: 72%; padding: 11px 15px; border-radius: 14px; font-size: 14px; line-height: 1.6; position: relative; }
.bubble.moi { background: linear-gradient(135deg, var(--or), #a67c30); color: var(--fond); align-self: flex-end; border-bottom-right-radius: 4px; }
.bubble.eux { background: rgba(255,255,255,.07); border: 1px solid rgba(201,168,76,.2); color: var(--creme); align-self: flex-start; border-bottom-left-radius: 4px; }
.bubble-heure { font-size: 10px; opacity: .6; margin-top: 4px; text-align: right; }
.msg-footer { padding: 14px 16px; border-top: 1px solid rgba(201,168,76,.2); background: rgba(14,26,18,.9); display: flex; gap: 10px; max-width: 700px; width: 100%; margin: 0 auto; }
.msg-input { flex: 1; padding: 12px 16px; background: rgba(255,255,255,.07); border: 1px solid rgba(201,168,76,.25); border-radius: 24px; color: var(--creme); font-family: 'Tajawal', sans-serif; font-size: 14px; outline: none; resize: none; max-height: 120px; line-height: 1.5; }
.msg-input:focus { border-color: var(--or); }
.msg-input::placeholder { color: rgba(245,239,230,.35); }
.msg-send { width: 44px; height: 44px; background: linear-gradient(135deg, var(--or), #a67c30); border: none; border-radius: 50%; color: var(--fond); font-size: 18px; cursor: pointer; flex-shrink: 0; display: flex; align-items: center; justify-content: center; transition: opacity .2s; }
.msg-send:hover { opacity: .85; }
.msg-send:disabled { opacity: .4; cursor: not-allowed; }
.conv-liste { padding: 0; max-width: 700px; margin: 0 auto; width: 100%; }
.conv-item { display: flex; align-items: center; gap: 14px; padding: 14px 20px; cursor: pointer; border-bottom: 1px solid rgba(201,168,76,.1); transition: background .2s; }
.conv-item:hover { background: rgba(201,168,76,.06); }
.conv-avatar { width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(135deg, var(--vert), #2d5a3a); display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; overflow: hidden; border: 2px solid rgba(201,168,76,.3); }
.conv-avatar img { width: 100%; height: 100%; object-fit: cover; }
.conv-info { flex: 1; min-width: 0; }
.conv-nom { font-size: 15px; color: var(--blanc); font-weight: 600; margin-bottom: 3px; }
.conv-extrait { font-size: 13px; color: var(--gris); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conv-badge { background: var(--or); color: var(--fond); font-size: 11px; font-weight: 700; border-radius: 10px; padding: 2px 7px; flex-shrink: 0; }
.msg-vide { text-align: center; padding: 60px 20px; color: var(--gris); }
.msg-vide-ico { font-size: 40px; margin-bottom: 12px; }
/* Upload photo progress */
.upload-progress { display: none; width: 100%; height: 4px; background: rgba(255,255,255,.1); border-radius: 2px; margin-top: 8px; }
.upload-progress-bar { height: 100%; border-radius: 2px; background: linear-gradient(90deg, var(--or), #a67c30); width: 0; transition: width .3s; }

.btn-appel-hidden { display: none !important; }

/* Footer masqué via JS dans goPage() */