/* =========================================================
   Espace membre BelowPalms (/espace, /admin, /connexion...)
   Indépendant du CSS du template UNI. Même charte :
   sombre, bleu #0000D2, BP Sharp, Editorial New, angles carrés.
   ========================================================= */
@font-face { font-family: "BP Sharp"; src: url("/assets/fonts/BP-Sharp-Variable.ttf") format("truetype"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Editorial New"; src: url("/assets/fonts/PPEditorialNew-Italic.otf") format("opentype"); font-weight: 400; font-style: italic; font-display: swap; }

:root {
  --bg: #0b0c0e; --bg-2: #121316; --carte: #171717; --texte: #f6f3f0; --muted: #f6f3f0a3;
  --filet: #f6f3f029; --bleu: #0000d2; --bleu-clair: #2929ff; --bleu-fonce: #00009c;
  --halo: 0 5px 30px 5px #0000d24d; --rouge: #ff5a4e; --vert: #6be6a4;
  --sans: "BP Sharp", Arial, sans-serif; --serif: "Editorial New", "Times New Roman", serif;
  --gouttiere: clamp(16px, 4vw, 48px);
}
html, body { background: var(--bg); color: var(--texte); margin: 0; }
.ex { min-height: 100vh; font-family: var(--sans); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
.ex *, .ex *::before, .ex *::after { box-sizing: border-box; }
.ex a { color: inherit; text-decoration-color: var(--filet); text-underline-offset: 3px; }
.ex a:hover { text-decoration-color: currentColor; }
.ex ::selection { background: var(--bleu); color: var(--texte); }
.ex :focus-visible { outline: 2px solid var(--bleu-clair); outline-offset: 2px; }
.ex h1, .ex h2, .ex h3, .ex p, .ex ul, .ex ol { margin: 0; }
.ex ul, .ex ol { list-style: none; padding: 0; }

/* Barre */
.ex-barre { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px var(--gouttiere); border-bottom: 1px solid var(--filet); position: sticky; top: 0; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(10px); z-index: 10; }
.ex-logo { display: block; width: 132px; color: var(--texte); }
.ex-logo svg { display: block; width: 100%; height: auto; }
.ex-nav { display: flex; align-items: center; gap: 20px; font-size: 14px; flex-wrap: wrap; justify-content: flex-end; }
.ex-nav a { text-decoration: none; color: var(--muted); }
.ex-nav a:hover { color: var(--texte); }
.ex-nav form { margin: 0; }
.ex-lien { background: none; border: 0; padding: 0; font: inherit; color: var(--muted); cursor: pointer; }
.ex-lien:hover { color: var(--texte); }

/* Mise en page */
.ex-page { max-width: 1240px; margin: 0 auto; padding: clamp(32px, 6vw, 72px) var(--gouttiere) 96px; display: grid; gap: 24px; align-content: start; }
.ex-page.ex-moyen { max-width: 760px; }
.ex-centre { min-height: calc(100vh - 70px); display: grid; place-items: center; padding: 40px var(--gouttiere); }
.ex-etroit { width: 100%; max-width: 440px; }
.ex-moyen { width: 100%; max-width: 820px; }
.ex-entete { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.ex-entete-infos { display: grid; gap: 10px; justify-items: end; text-align: right; }
.ex-tableau { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.ex-col-principale, .ex-col-cote { display: grid; gap: 24px; }
.ex-deux { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 8px; align-items: start; }
.ex-deux > form + form { border-left: 1px solid var(--filet); padding-left: 32px; }

/* Typo */
.ex-h1 { font-size: clamp(34px, 5.2vw, 64px); font-weight: 600; line-height: 1; letter-spacing: -0.03em; }
.ex-h2 { font-size: 26px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; }
.ex-h3 { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 14px; }
.ex-serif { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--bleu-clair); letter-spacing: -0.01em; }
.ex-label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); font-weight: 500; }
.ex-label a { text-decoration: none; }
.ex-intro { color: var(--muted); max-width: 60ch; margin-top: 14px; font-size: 18px; }
.ex-muted { color: var(--muted); }
.ex-petit { font-size: 13px; }
.ex-droite { text-align: right; }
.ex-coupe { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1; }
.ex code, .ex-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; letter-spacing: 0.08em; }

/* Cartes */
.ex-carte { background: var(--carte); border: 1px solid var(--filet); padding: clamp(20px, 3vw, 32px); display: grid; gap: 14px; align-content: start; min-width: 0; }
.ex-carte .ex-h1 { font-size: clamp(30px, 4vw, 44px); }
.ex-carte.is-danger { border-color: #ff5a4e40; }
.ex-carte-lien { position: relative; text-decoration: none; min-height: 180px; transition: border-color .2s, box-shadow .2s, transform .2s; }
.ex-carte-lien:hover { border-color: var(--bleu); box-shadow: var(--halo); transform: translateY(-2px); }
.ex-fleche { position: absolute; right: 24px; bottom: 20px; font-size: 22px; color: var(--muted); }
.ex-carte-lien:hover .ex-fleche { color: var(--texte); }
.ex-grille-projets { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.ex-vide { display: grid; gap: 8px; }

/* Badges */
.ex-badge { display: inline-block; justify-self: start; padding: 4px 10px; font-size: 12px; font-weight: 500; border: 1px solid var(--filet); color: var(--muted); }
.ex-badge[data-statut="en_cours"] { background: var(--bleu); border-color: var(--bleu); color: var(--texte); }
.ex-badge[data-statut="livre"] { border-color: #6be6a466; color: var(--vert); }
.ex-entete-infos .ex-badge { justify-self: end; }

/* Formulaires */
.ex-form { display: grid; gap: 14px; }
.ex-grille-form { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); align-items: end; }
.ex-grille-form .is-large { grid-column: 1 / -1; }
.ex-ligne { grid-template-columns: 1fr auto; align-items: end; }
.ex-champ { display: grid; gap: 6px; font-size: 13px; color: var(--muted); }
.ex input, .ex select, .ex textarea { font: inherit; font-size: 15px; color: var(--texte); background: var(--bg); border: 1px solid var(--filet); border-radius: 0; padding: 11px 12px; width: 100%; min-width: 0; }
.ex input:focus, .ex select:focus, .ex textarea:focus { outline: none; border-color: var(--bleu-clair); }
.ex input[type="file"] { padding: 9px; }
.ex input[type="date"] { color-scheme: dark; }
.ex textarea { resize: vertical; }
.ex-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ex-inline { display: flex; gap: 6px; align-items: center; }
.ex .ex-mini { width: 72px; padding: 6px 8px; font-size: 13px; }

/* Boutons */
.ex-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: inherit; font-size: 15px; font-weight: 500; padding: 12px 20px; background: var(--bleu); color: var(--texte); border: 1px solid var(--bleu); border-radius: 0; cursor: pointer; text-decoration: none; white-space: nowrap; transition: background .2s, box-shadow .2s, border-color .2s; }
.ex a.ex-btn { text-decoration: none; }
.ex-btn:hover { background: var(--bleu-clair); border-color: var(--bleu-clair); box-shadow: var(--halo); }
.ex-btn:disabled { opacity: .6; cursor: progress; }
.ex-form > .ex-btn.is-plein { width: 100%; }
.ex-btn.is-contour { background: transparent; border-color: var(--filet); }
.ex-btn.is-contour:hover { border-color: var(--texte); box-shadow: none; }
.ex-btn.is-petit { font-size: 13px; padding: 7px 12px; }
.ex-btn.is-danger { background: transparent; border-color: #ff5a4e55; color: var(--rouge); }
.ex-btn.is-danger:hover { background: #ff5a4e1a; border-color: var(--rouge); box-shadow: none; }

/* Messages */
.ex-message { padding: 12px 16px; border-left: 3px solid; font-size: 14px; }
.ex-message.is-ok { border-color: var(--bleu-clair); background: #0000d21f; }
.ex-message.is-erreur { border-color: var(--rouge); background: #ff5a4e14; }
.ex-note { font-size: 13px; }
.ex-note.is-erreur { color: var(--rouge); }
.ex-note.is-ok { color: var(--vert); }

/* Calendrier */
.ex-etapes { display: grid; }
.ex-etape { display: grid; grid-template-columns: 20px 1fr auto auto; gap: 14px; align-items: center; padding: 12px 0; border-top: 1px solid var(--filet); }
.ex-etape:first-child { border-top: 0; }
.ex-etape-point { width: 10px; height: 10px; border: 1px solid var(--muted); }
.ex-etape[data-statut="en_cours"] .ex-etape-point { background: var(--bleu); border-color: var(--bleu-clair); box-shadow: var(--halo); }
.ex-etape[data-statut="fait"] .ex-etape-point { background: var(--texte); border-color: var(--texte); }
.ex-etape[data-statut="fait"] .ex-etape-titre { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--filet); }
.ex-etape-date { color: var(--muted); font-size: 14px; }
.ex-etape-statut { font-size: 12px; color: var(--muted); min-width: 64px; text-align: right; }
.ex-etape[data-statut="en_cours"] .ex-etape-statut { color: var(--bleu-clair); }

/* Fichiers et liens */
.ex-rubrique { display: grid; gap: 8px; }
.ex-rubrique + .ex-rubrique { margin-top: 10px; }
.ex-fichiers { display: grid; }
.ex-fichier { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 2px 16px; padding: 12px 40px 12px 0; border-top: 1px solid var(--filet); text-decoration: none; }
.ex .ex-fichier { text-decoration: none; }
.ex-fichier:hover .ex-fichier-titre { color: var(--bleu-clair); }
.ex-fichier .ex-fleche { right: 4px; bottom: auto; top: 10px; font-size: 18px; }
.ex-liste-liens { display: grid; gap: 2px; }
.ex .ex-lien-ext { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--filet); text-decoration: none; }
.ex .ex-outil { display: grid; gap: 2px; padding: 10px 0; border-top: 1px solid var(--filet); text-decoration: none; }
.ex-liste-liens li:first-child > * { border-top: 0; }
.ex-lien-ext:hover, .ex-outil:hover strong { color: var(--bleu-clair); }
.ex-outil-zone { min-height: 320px; }

/* Admin */
.ex-sommaire { display: flex; gap: 6px 18px; flex-wrap: wrap; font-size: 14px; }
.ex .ex-sommaire a { color: var(--muted); text-decoration: none; }
.ex-sommaire a:hover { color: var(--texte); }
.ex-table-wrap { overflow-x: auto; }
.ex-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.ex-table th { text-align: left; font-weight: 500; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; padding: 8px 10px 8px 0; border-bottom: 1px solid var(--filet); }
.ex-table td { padding: 12px 10px 12px 0; border-bottom: 1px solid var(--filet); vertical-align: middle; }
.ex-table form { margin: 0; display: inline; }
.ex-cles { display: grid; }
.ex-cle { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-top: 1px solid var(--filet); flex-wrap: wrap; }
.ex-cle.is-inactive { opacity: .6; }
.ex-badge-cle { margin-left: 10px; vertical-align: 2px; font-size: 11px; padding: 2px 8px; }
.ex-replie { border-top: 1px solid var(--filet); padding-top: 14px; display: grid; gap: 10px; }
.ex-replie > summary { cursor: pointer; color: var(--muted); font-size: 14px; list-style: none; }
.ex-replie > summary::-webkit-details-marker { display: none; }
.ex-replie > summary::before { content: "+ "; color: var(--bleu-clair); }
.ex-replie[open] > summary::before { content: "− "; }
.ex-replie > summary:hover { color: var(--texte); }
.ex-cle-infos { display: grid; gap: 2px; }
.ex-cle-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ex-cle-actions form { margin: 0; }
.ex-lignes { display: grid; }
.ex-lignes > li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--filet); justify-content: space-between; }
.ex-lignes > li form { margin: 0; }
.ex-ligne-edit { display: grid; grid-template-columns: 1fr 160px 130px auto; gap: 8px; flex: 1; }
.ex .ex-ligne-edit input, .ex .ex-ligne-edit select { padding: 7px 10px; font-size: 14px; }

/* Mobile */
@media (max-width: 900px) {
  .ex-tableau { grid-template-columns: 1fr; }
  .ex-entete-infos { justify-items: start; text-align: left; }
  .ex-entete-infos .ex-badge { justify-self: start; }
}
@media (max-width: 640px) {
  .ex-barre { flex-direction: column; align-items: flex-start; gap: 12px; }
  .ex-logo { width: 116px; }
  .ex-nav { justify-content: flex-start; gap: 14px; }
  .ex-deux { grid-template-columns: 1fr; }
  .ex-deux > form + form { border-left: 0; padding-left: 0; border-top: 1px solid var(--filet); padding-top: 24px; }
  .ex-ligne { grid-template-columns: 1fr; }
  .ex-etape { grid-template-columns: 20px 1fr; row-gap: 2px; }
  .ex-etape-date, .ex-etape-statut { grid-column: 2; text-align: left; }
  .ex-ligne-edit { grid-template-columns: 1fr 1fr; }
  .ex-ligne-edit input[name="titre"] { grid-column: 1 / -1; }
  .ex-table th:nth-child(3), .ex-table td:nth-child(3), .ex-table th:nth-child(4), .ex-table td:nth-child(4) { display: none; }
}