/* ====================================================================== L'ESPACE DU CONTRIBUTEUR — coquille d'application ---------------------------------------------------------------------- Même parti que /admin : une colonne de navigation à gauche, une en-tête minimale, une seule zone de contenu. Les variables viennent de app.css, qui est chargé avant : on n'en redéfinit aucune. La grille est en deux colonnes sur écran large et une seule sur mobile, où la colonne devient un panneau qui glisse. Rien d'autre ne bouge : le contenu, lui, est écrit pour être lu sur une colonne. ====================================================================== */ body.espace-app { margin:0; background:var(--creme); color:var(--encre); } body.e-init .e-app { opacity:0; } /* évite le saut de mise en page au premier rendu */ .e-app { display:grid; grid-template-columns:266px minmax(0,1fr); grid-template-rows:auto 1fr; grid-template-areas:"nav top" "nav vue"; min-height:100dvh; transition:opacity .15s ease; } @media (min-width:1500px) { .e-app { grid-template-columns:292px minmax(0,1fr); } } @media (min-width:901px) and (max-width:1100px) { .e-app { grid-template-columns:228px minmax(0,1fr); } } /* ---------- en-tête ---------- */ .e-top { grid-area:top; min-width:0; display:flex; align-items:center; gap:14px; padding:16px 26px; background:var(--blanc); border-bottom:1.5px solid var(--ligne); position:sticky; top:0; z-index:5; } .e-titre { margin:0; min-width:0; font-size:19px; font-weight:800; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .e-session { margin:0 0 0 auto; font-size:13.5px; color:var(--gris); } .e-session strong { color:var(--encre); } .e-burger { display:none; width:40px; height:40px; flex:none; place-items:center; border:1.5px solid var(--ligne); border-radius:10px; background:var(--blanc); color:var(--encre); cursor:pointer; } .e-burger .ic { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; } /* ---------- colonne de navigation ---------- */ .e-nav { grid-area:nav; display:flex; flex-direction:column; gap:6px; padding:20px 16px 18px; background:var(--vert-nuit); color:#fff; position:sticky; top:0; height:100dvh; overflow-y:auto; } .e-logo { display:flex; flex-direction:column; gap:4px; padding:4px 10px 18px; text-decoration:none; color:inherit; } .e-logo img { width:150px; height:auto; } .e-logo span { font-size:12px; font-weight:700; letter-spacing:1px; text-transform:uppercase; opacity:.7; } .e-liens { display:flex; flex-direction:column; gap:3px; } .e-lien { display:flex; align-items:center; gap:9px; padding:11px 12px; border-radius:10px; text-decoration:none; color:rgba(255,255,255,.82); font-weight:600; font-size:15px; border:0; background:none; cursor:pointer; font-family:inherit; text-align:left; width:100%; } .e-lien:hover { background:rgba(255,255,255,.08); color:#fff; } .e-lien.actif { background:var(--vert); color:#fff; } .e-lien .ic { width:17px; height:17px; flex:none; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; } .e-lien .ic-retour { transform:rotate(180deg); } /* Le pied de colonne : trois sorties, séparées du reste par un filet, parce que « se déconnecter » ne se range pas à côté de « mes contributions ». */ .e-nav-pied { margin-top:auto; padding-top:14px; border-top:1px solid rgba(255,255,255,.15); display:flex; flex-direction:column; gap:3px; } .e-lien-sec { font-size:14px; font-weight:600; color:rgba(255,255,255,.7); } /* ---------- zone de contenu ---------- */ /* La largeur de lecture s'ouvre avec l'écran plutôt que de rester bloquée à 1060 px : sur un 27 pouces, deux tiers de la fenêtre restaient blancs, et la fiche d'un projet ne pouvait pas se mettre en deux colonnes. Le texte courant, lui, garde sa mesure : c'est la grille qui s'élargit, pas les paragraphes. */ .e-vue { grid-area:vue; min-width:0; padding:30px 34px 60px; max-width:1180px; width:100%; } @media (min-width:1500px) { .e-vue { max-width:1340px; padding:34px 44px 70px; } } .e-vue:focus { outline:none; } .e-section { margin:0 0 34px; } .e-section-tete { display:flex; align-items:baseline; justify-content:space-between; gap:16px; flex-wrap:wrap; } .e-section h2 { margin:0 0 14px; font-size:21px; } .e-section-tete h2 { margin-bottom:14px; } .e-plus { font-size:14px; font-weight:700; color:var(--vert); } .e-note { margin:0 0 14px; font-size:13.5px; line-height:1.55; color:var(--gris); } .e-vide { margin:0; padding:22px; border-radius:14px; border:1.5px dashed var(--ligne); color:var(--gris); background:var(--blanc); } .e-attente { color:var(--gris); } .e-retour { margin:0 0 16px; } .e-retour a { font-weight:700; color:var(--vert); } .e-ok { margin:10px 0 0; color:var(--vert); font-weight:600; } /* ---------- l'état déconnecté ---------- */ body.e-login-mode .e-nav, body.e-login-mode .e-session { display:none; } body.e-login-mode .e-app { grid-template-columns:1fr; grid-template-areas:"top" "vue"; } body.e-login-mode .e-vue { max-width:1000px; margin:0 auto; padding-top:44px; } .e-accueil { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.8fr); gap:24px; align-items:start; } .e-carte { padding:26px; border-radius:16px; border:1.5px solid var(--ligne); background:var(--blanc); } .e-carte h2 { margin:0 0 10px; font-size:19px; } .e-carte-aide h2 + p { margin-bottom:20px; } .e-carte-aide h2 { margin-top:0; } .e-intro { margin:0 0 18px; color:var(--gris); line-height:1.55; } .e-oubli { margin-top:18px; border-top:1.5px solid var(--ligne); padding-top:14px; } .e-oubli > summary { cursor:pointer; font-weight:600; font-size:14.5px; } .e-etat { display:flex; gap:10px; align-items:flex-start; margin-top:14px; padding:13px 15px; border-radius:12px; background:var(--vert-pale); color:var(--vert-fonce); font-size:14px; line-height:1.5; } .e-etat .ic { width:19px; height:19px; flex:none; fill:none; stroke:currentColor; stroke-width:2; } .btn-bloc { width:100%; justify-content:center; } /* ---------- le bandeau de chiffres ---------- */ .e-kpi { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:14px; margin:0 0 32px; } .e-kpi-case { padding:18px; border:1.5px solid var(--ligne); border-radius:14px; background:var(--blanc); } .e-kpi-case dt { margin:0; font-size:12px; font-weight:700; letter-spacing:.9px; text-transform:uppercase; color:var(--gris); } .e-kpi-case dd { margin:6px 0 0; font-size:26px; font-weight:800; line-height:1.15; color:var(--vert); font-variant-numeric:tabular-nums; } .e-kpi-aide { margin:8px 0 0; font-size:12.5px; line-height:1.45; color:var(--gris); } /* ---------- les contributions ---------- */ .e-contribs { list-style:none; margin:0; padding:0; display:grid; gap:12px; } .e-contrib { padding:18px 20px; border-radius:14px; border:1.5px solid var(--ligne); background:var(--blanc); display:grid; gap:14px; } .e-contrib-tete { display:flex; align-items:center; gap:9px; flex-wrap:wrap; } .e-contrib-projet { font-weight:800; font-size:17px; color:var(--encre); text-decoration:underline; text-decoration-thickness:1.5px; text-underline-offset:3px; } .e-contrib-projet:hover { color:var(--vert); } .e-contrib-meta { margin:8px 0 0; display:flex; flex-wrap:wrap; gap:6px 18px; font-size:14px; color:var(--gris); } .e-contrib-meta b { color:var(--encre); font-variant-numeric:tabular-nums; } .e-contrib-actions { display:flex; flex-wrap:wrap; gap:10px 18px; align-items:center; justify-content:space-between; } .e-contrib-liens { display:flex; flex-wrap:wrap; gap:6px 16px; align-items:center; min-width:0; } /* Un lien, pas un bouton : même rôle qu'un pour l'œil, et un