/* ============================================================
   L'espace de Loulou — thème "dolce vita" (repris de la surprise)
   Mobile-first : styles de base = mobile, @media min-width = desktop
   ============================================================ */
:root{
  --creme:#fdf6ec; --creme2:#f7e8d4; --terracotta:#c75643; --rouge:#b3202c;
  --vert:#1e7a4f; --or:#d4a64a; --encre:#3a2c24; --rose:#e8a6a0;
  --ombre:rgba(90,40,30,.18); --muted:#7a6a60;
  --bgA:#fff6ea; --bgB:#fbe4d6; --bgC:#fdf6ec; --bgD:#f7e8d4;
  --maxw:1080px;
}
*{ box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; }
html{ scroll-behavior:smooth; }
body{
  font-family:'Poppins',system-ui,sans-serif; color:var(--encre); line-height:1.55;
  background:
    radial-gradient(circle at 20% 15%, var(--bgA) 0%, rgba(255,255,255,0) 45%),
    radial-gradient(circle at 85% 80%, var(--bgB) 0%, rgba(255,255,255,0) 50%),
    linear-gradient(160deg, var(--bgC) 0%, var(--bgD) 100%);
  background-attachment:fixed; min-height:100vh;
}
h1,h2,h3{ font-family:'Playfair Display',serif; line-height:1.12; }
a{ color:var(--rouge); text-decoration:none; }
img{ max-width:100%; display:block; }

.skip-link{ position:absolute; left:-9999px; top:0; background:#fff; padding:10px 14px; border-radius:8px; z-index:200; }
.skip-link:focus{ left:10px; top:10px; }

/* ---------- Navbar (mobile-first : menu burger) ---------- */
.nav{ position:sticky; top:0; z-index:100; background:rgba(255,250,243,.92);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); border-bottom:1px solid var(--creme2); }
.nav-inner{ max-width:var(--maxw); margin:0 auto; display:flex; align-items:center; justify-content:space-between; padding:10px 16px; }
.brand{ font-family:'Playfair Display',serif; font-weight:700; font-size:1.12rem; color:var(--encre); }
.burger{ width:46px; height:46px; border:none; background:transparent; display:flex; flex-direction:column; gap:5px; align-items:center; justify-content:center; cursor:pointer; }
.burger span{ width:24px; height:2px; background:var(--encre); border-radius:2px; transition:.25s; }
.burger.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.burger.open span:nth-child(2){ opacity:0; }
.burger.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
.navlinks{ display:none; position:absolute; top:100%; left:0; right:0; background:var(--creme);
  flex-direction:column; padding:8px 16px 16px; border-bottom:1px solid var(--creme2); box-shadow:0 14px 24px -16px var(--ombre); }
.navlinks.open{ display:flex; }
.navlinks a, .navlinks .nav-user, .navlinks .link-btn{ padding:13px 6px; font-size:1.02rem; font-weight:500; color:var(--encre); border-bottom:1px solid rgba(0,0,0,.05); }
.navlinks a.active{ color:var(--rouge); font-weight:600; }
.nav-user{ color:var(--muted); font-weight:600; }
.logout-form{ margin:0; }
.link-btn{ background:none; border:none; font:inherit; color:var(--rouge); cursor:pointer; text-align:left; width:100%; }
.nav-cta{ color:var(--rouge); font-weight:600; }
@media(min-width:760px){
  .burger{ display:none; }
  .navlinks{ display:flex; position:static; flex-direction:row; align-items:center; gap:4px; padding:0; background:none; border:none; box-shadow:none; }
  .navlinks a, .navlinks .nav-user, .navlinks .link-btn{ border:none; padding:8px 12px; width:auto; }
  .nav-cta{ border:1.5px solid var(--rose); border-radius:999px; }
}

/* ---------- Flash ---------- */
.flash{ max-width:var(--maxw); margin:12px auto 0; padding:12px 16px; border-radius:12px; font-weight:500; }
.flash-success{ background:#e6f4ec; color:#16633e; border:1px solid #bfe3cd; }
.flash-error{ background:#fbe6e6; color:var(--rouge); border:1px solid #f0c4c4; }

/* ---------- Layout ---------- */
.container{ max-width:var(--maxw); margin:0 auto; padding:22px 16px 60px; }
.page-title{ font-size:clamp(1.7rem,6vw,2.4rem); margin-bottom:6px; color:var(--encre); }
.page-sub{ color:var(--muted); margin-bottom:18px; }
.section-title{ font-size:clamp(1.4rem,5vw,1.9rem); margin:30px 0 14px; color:var(--encre); }
.empty{ color:var(--muted); background:#fff; border:1px dashed var(--creme2); border-radius:16px; padding:26px; text-align:center; }

/* ---------- Boutons ---------- */
.btn{ display:inline-block; font-family:'Poppins',sans-serif; font-weight:600; font-size:1rem; color:#fff;
  background:linear-gradient(135deg,var(--terracotta),var(--rouge)); border:none; border-radius:999px;
  padding:13px 26px; cursor:pointer; box-shadow:0 10px 22px -10px var(--rouge); transition:transform .18s, box-shadow .18s; }
.btn:hover{ transform:translateY(-2px); box-shadow:0 16px 28px -12px var(--rouge); }
.btn:active{ transform:translateY(0) scale(.98); }
.btn.ghost{ background:transparent; color:var(--rouge); border:1.5px solid var(--rose); box-shadow:none; }

/* ---------- Hero (accueil) ---------- */
.hero{ position:relative; border-radius:24px; overflow:hidden; margin-top:16px; min-height:360px; display:flex; align-items:flex-end;
  background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.5)), url('/images/rome.jpg') center/cover no-repeat; }
.hero-content{ position:relative; padding:26px 22px 30px; color:#fff; }
.badge{ display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,.92); color:var(--terracotta);
  padding:7px 14px; border-radius:999px; font-size:.72rem; letter-spacing:1.5px; text-transform:uppercase; font-weight:600; margin-bottom:14px; }
.flag-dot{ width:10px; height:10px; border-radius:50%; display:inline-block;
  background:linear-gradient(90deg,var(--vert) 33%,#fff 33% 66%,var(--rouge) 66%); }
.hero h1{ font-size:clamp(2rem,8vw,3.2rem); color:#fff; text-shadow:0 2px 18px rgba(0,0,0,.45); }
.hero .script{ font-family:'Dancing Script',cursive; color:#ffd9c9; }
.hero .lead{ max-width:520px; margin:12px 0 18px; font-weight:300; text-shadow:0 1px 10px rgba(0,0,0,.45); }
.hero-actions{ display:flex; flex-wrap:wrap; gap:10px; }

/* ---------- Cartes de navigation (accueil) ---------- */
.cards-nav{ display:grid; grid-template-columns:1fr; gap:14px; margin-top:24px; }
.nav-card{ background:#fff; border:1px solid var(--creme2); border-radius:18px; padding:20px; color:var(--encre); box-shadow:0 14px 30px -22px var(--ombre); transition:transform .18s, border-color .18s; }
.nav-card:hover{ transform:translateY(-3px); border-color:var(--terracotta); }
.nav-card-emoji{ font-size:2rem; }
.nav-card h2{ margin:8px 0 4px; font-size:1.3rem; }
.nav-card p{ color:var(--muted); font-size:.95rem; }
@media(min-width:760px){ .cards-nav{ grid-template-columns:repeat(3,1fr); } }

/* ---------- Galerie photos (2 cols mobile -> 3-4 desktop) ---------- */
.photo-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
@media(min-width:620px){ .photo-grid{ grid-template-columns:repeat(3,1fr); gap:14px; } }
@media(min-width:980px){ .photo-grid{ grid-template-columns:repeat(4,1fr); } }
.photo-card{ background:#fff; border:1px solid var(--creme2); border-radius:14px; overflow:hidden; box-shadow:0 10px 22px -18px var(--ombre); }
.photo-thumb{ display:block; aspect-ratio:1/1; overflow:hidden; cursor:zoom-in; }
.photo-thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .3s; }
.photo-thumb:hover img{ transform:scale(1.05); }
.photo-card figcaption{ padding:8px 10px; font-size:.82rem; }
.photo-card .cap{ display:block; color:var(--encre); }
.photo-card .meta{ color:var(--muted); font-size:.76rem; }

/* ---------- Lightbox ---------- */
.lightbox{ position:fixed; inset:0; background:rgba(20,10,8,.92); display:none; align-items:center; justify-content:center; z-index:300; padding:20px; }
.lightbox.open{ display:flex; }
.lightbox-figure{ max-width:min(960px,96vw); max-height:92vh; display:flex; flex-direction:column; align-items:center; }
.lightbox-figure img{ max-width:100%; max-height:84vh; object-fit:contain; border-radius:10px; }
.lightbox-figure figcaption{ color:#fff; margin-top:10px; font-size:.95rem; text-align:center; min-height:1.2em; }
.lightbox-close{ position:absolute; top:14px; right:18px; width:46px; height:46px; border:none; background:rgba(255,255,255,.16); color:#fff; font-size:1.8rem; line-height:1; border-radius:50%; cursor:pointer; }

/* ---------- Formulaires ---------- */
.upload-form, .poem-form{ background:#fff; border:1px solid var(--creme2); border-radius:18px; padding:18px; margin-bottom:24px; box-shadow:0 14px 30px -24px var(--ombre); }
.upload-row{ display:flex; flex-direction:column; gap:10px; }
@media(min-width:680px){ .upload-row{ flex-direction:row; align-items:center; } .upload-row input[type=text]{ flex:1; } }
input[type=text], input[type=password], textarea{ font:inherit; font-size:16px; width:100%; padding:13px 14px; border:1.5px solid var(--creme2); border-radius:12px; background:var(--creme); color:var(--encre); }
input:focus, textarea:focus{ outline:none; border-color:var(--terracotta); box-shadow:0 0 0 3px rgba(199,86,67,.12); }
.file-label{ display:flex; align-items:center; gap:10px; padding:11px 14px; border:1.5px dashed var(--creme2); border-radius:12px; background:var(--creme); cursor:pointer; }
.file-label input[type=file]{ font-size:14px; width:100%; }
.hint{ color:var(--muted); font-size:.82rem; margin-top:8px; }
.poem-form textarea{ resize:vertical; min-height:130px; margin-bottom:12px; }
.poem-author{ color:var(--muted); margin-bottom:8px; font-size:.9rem; }

/* ---------- Poèmes ---------- */
.poems{ display:flex; flex-direction:column; gap:16px; }
.poem{ background:#fff; border:1px solid var(--creme2); border-left:4px solid var(--terracotta); border-radius:14px; padding:18px 20px; box-shadow:0 12px 26px -22px var(--ombre); }
.poem-text{ white-space:pre-wrap; font-size:1.05rem; line-height:1.7; color:#4a3a32; word-wrap:break-word; }
.poem-foot{ margin-top:12px; color:var(--muted); font-family:'Dancing Script',cursive; font-size:1.3rem; }

/* ---------- Auth ---------- */
.auth-card{ max-width:420px; margin:30px auto; background:#fff; border:1px solid var(--creme2); border-radius:20px; padding:26px; box-shadow:0 18px 40px -26px var(--ombre); }
.auth-card h1{ font-size:1.6rem; margin-bottom:16px; }
.auth-card label{ display:block; font-weight:500; font-size:.9rem; margin-bottom:14px; }
.auth-card input{ margin-top:6px; }
.auth-card .btn{ width:100%; margin-top:6px; }
.auth-alt{ margin-top:16px; text-align:center; color:var(--muted); font-size:.9rem; }
.form-error{ background:#fbe6e6; color:var(--rouge); border:1px solid #f0c4c4; padding:10px 12px; border-radius:10px; margin-bottom:14px; font-size:.9rem; }

/* ---------- Chat ---------- */
.chat{ display:flex; flex-direction:column; background:#fff; border:1px solid var(--creme2); border-radius:18px;
  box-shadow:0 14px 30px -24px var(--ombre); overflow:hidden; }
.chat-messages{ display:flex; flex-direction:column; gap:10px; padding:16px; overflow-y:auto;
  height:min(60vh,480px); scroll-behavior:smooth; background:var(--creme); }
.chat-msg{ align-self:flex-start; max-width:80%; background:#fff; border:1px solid var(--creme2);
  border-radius:14px; padding:8px 12px; box-shadow:0 8px 18px -16px var(--ombre); }
.chat-msg--me{ align-self:flex-end; background:linear-gradient(135deg,var(--terracotta),var(--rouge)); border-color:transparent; color:#fff; }
.chat-msg-head{ display:flex; align-items:baseline; gap:8px; margin-bottom:2px; }
.chat-author{ font-weight:600; font-size:.82rem; }
.chat-time{ font-size:.72rem; color:var(--muted); }
.chat-msg--me .chat-time{ color:rgba(255,255,255,.8); }
.chat-content{ white-space:pre-wrap; word-wrap:break-word; font-size:.98rem; line-height:1.45; }
.chat-typing{ min-height:1.2em; padding:0 16px; font-size:.82rem; font-style:italic; color:var(--muted); }
.chat-form{ display:flex; gap:10px; padding:12px 16px 16px; border-top:1px solid var(--creme2); }
.chat-form input[type=text]{ flex:1; }
.chat-empty{ margin:auto; }

/* ---------- Appel (Jitsi) ---------- */
.appel-wrap{ margin-top:6px; }
.appel-frame{ width:100%; height:calc(100dvh - 230px); min-height:420px;
  border:1px solid var(--creme2); border-radius:18px; overflow:hidden;
  background:#1a1411; box-shadow:0 14px 30px -24px var(--ombre);
  display:flex; align-items:center; justify-content:center; }
.appel-frame iframe{ width:100%; height:100%; border:0; display:block; }
.appel-frame .empty{ background:transparent; border:none; color:#f7e8d4; }
@media(min-width:760px){ .appel-frame{ height:calc(100dvh - 210px); min-height:520px; } }

/* ---------- Footer / 404 ---------- */
.site-footer{ text-align:center; padding:30px 16px; color:var(--muted); font-size:.9rem; }
.notfound{ text-align:center; padding:60px 20px; }
.notfound h1{ font-size:4rem; color:var(--terracotta); }
.notfound p{ color:var(--muted); margin:10px 0 20px; }