/* ============================================================
Sky Connexion · Dashboard
============================================================ */
:root {
--primary: #F5A623;
--primary-hover: #D4891E;
--primary-soft: rgba(245, 166, 35, 0.12);
--primary-glow: rgba(245, 166, 35, 0.15);
--bg: #0A0A0A;
--bg-2: #111111;
--surface: #1A1A1A;
--surface-raised: #222222;
--border: #2A2A2A;
--text: #FFFFFF;
--text-muted: #A0A0A0;
--text-dim: #606060;
--success: #4CAF7D;
--warning: #F5A623;
--danger: #E05252;
--discord: #5865F2;
--font-display: "Poppins", system-ui, sans-serif;
--font-body: "Inter", system-ui, sans-serif;
--ease: cubic-bezier(0.2, 0.7, 0.2, 1);
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}
* { box-sizing: border-box; }
/* Global : l'attribut [hidden] HTML doit TOUJOURS masquer.
Plusieurs classes (`.btn`, `.modal-actions`, etc.) appliquent `display: flex/inline-flex`
ce qui écrase silencieusement `hidden`. Cette règle garantit que tout `hidden="true"`
en JS pour gater une permission (btn éditer pilote, btn éditer annonce…) fonctionne. */
[hidden] { display: none !important; }
html, body {
margin: 0; padding: 0;
background: var(--bg); color: var(--text);
font-family: var(--font-body); font-size: 14px;
-webkit-font-smoothing: antialiased;
}
/* overflow-x sur body uniquement (pas html) — sinon `position: sticky` ne fonctionne
plus pour les descendants. Connu : html + body overflow-x:hidden = sticky cassé. */
body { overflow-x: clip; }
@media (pointer: fine) {
/* Tout l'arbre est en cursor: none pour que notre curseur custom prenne le
relais — y compris sur img, button, input, et tout élément avec un
cursor: natif (zoom-in, grab, pointer…). Aligné sur le site vitrine. */
html.cursor-custom, html.cursor-custom *, html.cursor-custom *::before, html.cursor-custom *::after { cursor: none !important; }
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
/* Scrollbar (matches main site) — applied to html, body and all scrollable nested zones (modals, sidebar, tables, etc.) */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--primary); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: var(--primary-hover); }
html, .modal, .sidebar, .table, .admin-tabs { scrollbar-width: thin; scrollbar-color: var(--primary) var(--bg); }
/* Custom cursor — exact copy of main site (Sky Connexion.html) */
.cursor { position: fixed; top: 0; left: 0; width: 12px; height: 12px; border: 1.5px solid var(--primary); border-radius: 50%; transform: translate(-50%, -50%); pointer-events: none; z-index: 1001; transition: width 200ms var(--ease), height 200ms var(--ease), background 200ms var(--ease), border-radius 200ms var(--ease); }
.cursor .dot { position: absolute; inset: 0; margin: auto; width: 3px; height: 3px; background: #fff; border-radius: 50%; transition: opacity 200ms; }
.cursor.hover-link { width: 28px; height: 28px; background: rgba(245,166,35,0.20); border-color: var(--primary); }
.cursor.hover-link .dot { opacity: 0; }
.cursor.hover-image { width: 52px; height: 52px; background: var(--primary); border-color: var(--primary); border-radius: 999px; }
.cursor.hover-image .dot { opacity: 0; }
.cursor.hover-image::after { content: "VOIR"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font: 600 11px/1 var(--font-body); letter-spacing: 0.12em; color: #0A0A0A; }
/* Lightbox cursors — loupe (zoom-in / zoom-out) + grab pour pan en mode zoomé
Ported depuis le site vitrine pour cohérence visuelle. */
.cursor.hover-zoom-in, .cursor.hover-zoom-out, .cursor.hover-grab, .cursor.hover-grabbing {
width: 52px; height: 52px;
background: rgba(245,166,35,0.18);
border: 1.5px solid var(--primary);
border-radius: 999px;
}
.cursor.hover-zoom-in .dot, .cursor.hover-zoom-out .dot, .cursor.hover-grab .dot, .cursor.hover-grabbing .dot { opacity: 0; }
.cursor.hover-zoom-in::after, .cursor.hover-zoom-out::after, .cursor.hover-grab::after, .cursor.hover-grabbing::after {
content: ""; position: absolute; inset: 0;
background-repeat: no-repeat; background-position: center; background-size: 22px 22px;
}
.cursor.hover-zoom-in::after {
background-image: url("data:image/svg+xml;utf8,");
}
.cursor.hover-zoom-out::after {
background-image: url("data:image/svg+xml;utf8,");
}
.cursor.hover-grab::after {
background-image: url("data:image/svg+xml;utf8,");
}
.cursor.hover-grabbing::after {
background-image: url("data:image/svg+xml;utf8,");
background-color: rgba(245,166,35,0.32);
}
@media (pointer: coarse) { .cursor { display: none; } }
/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}
/* ============== LOGIN ============== */
.login-page { position: fixed; inset: 0; display: grid; grid-template-columns: 55fr 45fr; background: var(--bg); z-index: 50; }
.login-page.hidden { display: none; }
.login-img { position: relative; overflow: hidden; }
.login-img img { width: 100%; height: 100%; object-fit: cover; animation: imgZoom 1200ms var(--ease-out) both; }
@keyframes imgZoom { from { transform: scale(1.04); } to { transform: scale(1); } }
.login-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 30%, rgba(10,10,10,0.7) 80%, var(--bg-2) 100%); }
.login-img .slogan { position: absolute; left: 56px; bottom: 56px; right: 56px; z-index: 2; }
.login-img .slogan .kicker { display: inline-block; font: 500 11px var(--font-body); letter-spacing: 0.22em; text-transform: uppercase; color: var(--primary); margin-bottom: 16px; }
.login-img .slogan h1 { font: 700 clamp(32px, 4vw, 56px)/1.05 var(--font-display); letter-spacing: -0.02em; margin: 0; max-width: 560px; }
.login-img .slogan h1 em { font-style: normal; color: var(--primary); }
.login-form-side { display: grid; place-items: center; padding: 32px; background: var(--bg-2); animation: slideIn 700ms var(--ease-out) both; }
@keyframes slideIn { from { transform: translateX(40px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
.login-card { width: 100%; max-width: 440px; padding: clamp(32px, 4vw, 64px); }
.login-card .logo { display: flex; justify-content: center; margin-bottom: 32px; }
.login-card .logo img { height: 36px; width: auto; }
.login-card h2 { font: 700 32px var(--font-display); letter-spacing: -0.02em; margin: 0 0 8px; text-align: center; }
.login-card .sub { color: var(--text-muted); text-align: center; margin: 0 0 24px; line-height: 1.6; }
.login-card .sep { width: 40px; height: 2px; background: var(--primary); margin: 0 auto 28px; }
.btn-discord { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; height: 52px; background: var(--discord); color: #fff; border: 0; border-radius: 12px; font: 600 15px var(--font-display); letter-spacing: 0.01em; transition: filter 200ms var(--ease), transform 150ms var(--ease); }
.btn-discord:hover { filter: brightness(1.1); transform: translateY(-2px); }
.btn-discord:active { transform: scale(0.97); }
.btn-discord svg { width: 22px; height: 22px; }
.login-card .legal { text-align: center; font-size: 12px; color: var(--text-dim); margin-top: 24px; line-height: 1.5; }
@media (max-width: 900px) {
.login-page { grid-template-columns: 1fr; }
.login-img { display: none; }
}
/* ============== APP SHELL ============== */
.app { display: grid; grid-template-columns: 260px 1fr; min-height: 100vh; }
.app.hidden { display: none; }
/* Sidebar — fixed for reliability */
.sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: 260px; background: var(--bg-2); border-right: 1px solid var(--border); display: flex; flex-direction: column; padding: 22px 14px 18px; overflow-y: auto; z-index: 20; }
.sidebar .brand { display: flex; align-items: center; justify-content: center; padding: 2px 10px 18px; margin-bottom: 4px; }
.sidebar .brand img { height: 30px; width: auto; }
.sidebar .pilot { display: flex; align-items: center; gap: 11px; padding: 12px 12px; margin: 0 0 18px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; color: inherit; text-decoration: none; transition: border-color 180ms var(--ease), background 180ms var(--ease); }
.sidebar .pilot:hover { border-color: var(--primary); background: linear-gradient(135deg, rgba(245,166,35,0.06), transparent 70%), var(--surface); }
.sidebar .pilot .avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--primary); color: #0A0A0A; display: grid; place-items: center; font: 700 13px var(--font-display); flex-shrink: 0; }
.sidebar .pilot .info { min-width: 0; flex: 1; }
.sidebar .pilot .info .nm { font: 600 13.5px var(--font-body); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.25; }
.sidebar .pilot .info .gd { display: block; font: 500 11px var(--font-body); letter-spacing: 0.06em; color: var(--primary); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar .pilot .chev { width: 14px; height: 14px; color: var(--text-dim); flex-shrink: 0; transition: transform 180ms var(--ease), color 180ms var(--ease); }
.sidebar .pilot:hover .chev { color: var(--primary); transform: translateX(2px); }
.sidebar nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.sidebar nav .label { font: 600 10px var(--font-body); letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-dim); padding: 24px 12px 10px; }
.sidebar nav .label:first-child { padding-top: 8px; }
.nav-item { display: flex; align-items: center; gap: 12px; padding: 9px 12px; color: var(--text-muted); font: 500 13.5px var(--font-body); border: 0; background: transparent; width: 100%; text-align: left; position: relative; transition: color 150ms var(--ease); }
.nav-item:hover { color: var(--text); }
.nav-item.active { color: var(--text); }
.nav-item.active::before { content: ""; position: absolute; left: -14px; top: 50%; transform: translateY(-50%); width: 2px; height: 16px; background: var(--primary); }
.nav-item.active .ico { color: var(--primary); }
.nav-item .ico { width: 17px; height: 17px; flex-shrink: 0; stroke-width: 1.6; }
.nav-item .badge-dot { margin-left: auto; width: 6px; height: 6px; border-radius: 50%; background: var(--primary); }
.sidebar .logout { display: flex; align-items: center; gap: 10px; padding: 12px; color: var(--text-muted); background: transparent; border: 0; border-top: 1px solid var(--border); font: 500 13px var(--font-body); transition: color 150ms; margin-top: 12px; }
.sidebar .logout:hover { color: var(--danger); }
/* Main */
.main { padding: 32px; min-width: 0; grid-column: 2; }
.page { display: none; animation: pageFade 250ms var(--ease-out) both; }
.page.active { display: block; }
@keyframes pageFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 28px; }
.page-header .titles h1 { font: 700 28px var(--font-display); letter-spacing: -0.02em; margin: 14px 0 6px; }
.page-header .titles .crumb { font-size: 12px; color: var(--text-dim); letter-spacing: 0.06em; margin-bottom: 2px; }
.page-header .titles .crumb b { color: var(--text-muted); font-weight: 500; }
.page-header .actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.reveal-up { animation: revealUp 500ms var(--ease-out) both; }
.reveal-up.d-1 { animation-delay: 80ms; }
.reveal-up.d-2 { animation-delay: 160ms; }
.reveal-up.d-3 { animation-delay: 240ms; }
.reveal-up.d-4 { animation-delay: 320ms; }
@keyframes revealUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
/* ============== BUTTONS ============== */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 18px; border-radius: 10px; font: 600 13px var(--font-display); letter-spacing: 0.01em; border: 0; transition: transform 150ms var(--ease), filter 200ms var(--ease), background 200ms var(--ease); }
.btn:active { transform: scale(0.97); }
.btn-primary { background: var(--primary); color: #1a1a1a; }
.btn-primary:hover { background: var(--primary-hover); }
.btn-ghost { background: transparent; color: var(--text-muted); border: 1px solid var(--border); }
.btn-ghost:hover { color: var(--text); border-color: var(--text-muted); }
.btn-orange-ghost { background: transparent; color: var(--primary); border: 1px solid var(--primary); }
.btn-orange-ghost:hover { background: var(--primary-soft); }
.btn .ic { width: 16px; height: 16px; }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; font: 500 11px var(--font-body); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); background: var(--surface); border: 1px solid var(--border); cursor: none; transition: all 150ms var(--ease); }
.pill:hover { color: var(--text); }
.pill.active { color: #1a1a1a; background: var(--primary); border-color: var(--primary); }
/* ============== CARDS / COMMON ============== */
.card { background: var(--surface); border-radius: 16px; padding: 24px; border: 1px solid transparent; transition: border-color 200ms var(--ease), transform 200ms var(--ease); }
.card:hover { border-color: var(--border); }
.tag { display: inline-block; padding: 4px 10px; border-radius: 6px; font: 500 10px var(--font-body); letter-spacing: 0.14em; text-transform: uppercase; }
.tag-orange { color: var(--primary); background: var(--primary-soft); }
.tag-green { color: var(--success); background: rgba(76,175,125,0.12); }
.tag-blue { color: #6FB8FF; background: rgba(111,184,255,0.12); }
.tag-lead { color: var(--primary); background: transparent; border: 1px solid color-mix(in srgb, var(--primary) 40%, transparent); padding: 3px 9px; }
.tag-draft { color: #c97c00; background: rgba(201,124,0,0.12); border: 1px solid rgba(201,124,0,0.3); padding: 3px 9px; }
/* Empty state pour la liste d'annonces */
.ann-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 64px 20px; background: var(--surface); border: 1px dashed var(--border); border-radius: 16px; color: var(--text-muted); text-align: center; }
.ann-empty svg { width: 32px; height: 32px; color: var(--text-dim); opacity: 0.6; }
.ann-empty p { margin: 0; font-size: 13px; }
/* ============================================================
PHASE 3 — Annonces enrichies : modal toggle Simple/Rich,
éditeur par blocs (palette + canvas drag-drop), page de lecture.
============================================================ */
/* --- Toggle Simple / Rich dans la modal de création ------------ */
.af-mode-toggle {
display: inline-flex; gap: 4px; padding: 4px;
background: var(--bg-2); border: 1px solid var(--border); border-radius: 10px;
margin: 6px 0 10px;
}
.af-mode {
display: inline-flex; align-items: center; gap: 8px;
padding: 7px 14px;
background: transparent; border: 0; border-radius: 7px;
color: var(--text-muted); font: 500 12.5px var(--font-body);
cursor: pointer; font-family: inherit;
transition: background-color 150ms var(--ease), color 150ms var(--ease);
}
.af-mode:hover { color: var(--text); }
.af-mode.active { background: var(--surface); color: var(--text); box-shadow: 0 2px 6px rgba(0,0,0,0.2); }
.af-mode.active svg { color: var(--primary); }
.af-mode-hint { font: 500 12px var(--font-body); color: var(--text-muted); margin: 0 0 12px; line-height: 1.5; }
/* Label row avec bouton à droite (ex. extrait + Générer) */
.field-label-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.field-label-row label { margin: 0; }
.link-btn {
display: inline-flex; align-items: center; gap: 5px;
background: transparent; border: 1px solid var(--border); border-radius: 6px;
padding: 4px 9px;
color: var(--text-muted); font: 500 11px var(--font-body); font-family: inherit;
cursor: pointer;
transition: all 150ms var(--ease);
}
.link-btn:hover { color: var(--primary); border-color: var(--primary); }
.link-btn svg { width: 12px; height: 12px; }
/* Carte d'intro mode rich dans la modal */
.af-rich-card { display: flex; gap: 16px; padding: 20px; background: var(--bg-2); border: 1px solid var(--border); border-radius: 12px; }
.af-rich-card svg { width: 36px; height: 36px; color: var(--primary); flex-shrink: 0; }
.af-rich-card .af-rich-title { font: 600 14px var(--font-display); color: var(--text); margin-bottom: 6px; letter-spacing: -0.005em; }
.af-rich-card .af-rich-desc { font: 400 12.5px var(--font-body); color: var(--text-muted); line-height: 1.55; }
/* --- Éditeur d'annonce enrichie -------------------------------- */
.ae-header { align-items: flex-end; }
.ae-layout {
display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 24px;
align-items: start; /* important : sans ça les grid items stretch et sticky ne fonctionne pas */
}
.ae-main { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.ae-meta {
background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
padding: 22px 24px;
display: flex; flex-direction: column; gap: 14px;
}
/* row-2/row-3 hors-modale : appliquer le même grid (le rule .modal .adm-form ne couvre pas l'éditeur) */
.ae-meta .row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ae-meta .row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
@media (max-width: 640px) {
.ae-meta .row-2, .ae-meta .row-3 { grid-template-columns: 1fr; }
}
.ae-cover-preview[hidden] { display: none !important; }
.ae-cover-preview {
width: 100%; max-height: 220px; aspect-ratio: 16 / 7;
background-size: cover; background-position: center;
background-color: var(--bg-2);
border-radius: 10px; border: 1px solid var(--border);
position: relative;
}
.ae-cover-preview::after {
content: "APERÇU COVER";
position: absolute; top: 8px; left: 10px;
font: 600 9px var(--font-body); letter-spacing: 0.18em;
color: rgba(255,255,255,0.7); padding: 3px 8px;
background: rgba(10,10,10,0.6); border-radius: 4px;
backdrop-filter: blur(6px);
}
/* Redesign check-row → toggle plus visible (mettre en avant) */
.adm-form .check-row, .ae-meta .check-row {
display: flex; align-items: center; gap: 12px;
padding: 12px 14px;
background: var(--bg-2); border: 1px solid var(--border); border-radius: 10px;
cursor: pointer;
transition: border-color 150ms var(--ease), background-color 150ms var(--ease);
}
.adm-form .check-row:hover, .ae-meta .check-row:hover { border-color: var(--text-dim); }
.adm-form .check-row input[type=checkbox], .ae-meta .check-row input[type=checkbox] {
position: absolute; opacity: 0; pointer-events: none;
}
.adm-form .check-row span, .ae-meta .check-row span {
display: flex; align-items: center; gap: 10px;
font: 500 13px var(--font-body); color: var(--text);
}
.adm-form .check-row span::before, .ae-meta .check-row span::before {
content: "";
width: 18px; height: 18px;
border: 1.5px solid var(--border); border-radius: 5px;
background: var(--surface);
transition: all 180ms var(--ease);
display: inline-block; flex-shrink: 0;
}
.adm-form .check-row:has(input:checked), .ae-meta .check-row:has(input:checked) {
background: color-mix(in srgb, var(--primary) 8%, transparent);
border-color: color-mix(in srgb, var(--primary) 45%, var(--border));
}
.adm-form .check-row:has(input:checked) span, .ae-meta .check-row:has(input:checked) span { color: var(--primary); }
.adm-form .check-row:has(input:checked) span::before, .ae-meta .check-row:has(input:checked) span::before {
background: var(--primary); border-color: var(--primary);
background-image: url("data:image/svg+xml;utf8,");
background-size: 14px 14px;
background-position: center;
background-repeat: no-repeat;
}
.ae-canvas-wrap {
background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
padding: 22px 24px;
min-height: 300px;
}
.ae-canvas-title { font: 600 13px var(--font-body); letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted); margin: 0 0 16px; }
.ae-canvas {
display: flex; flex-direction: column; gap: 10px;
min-height: 120px;
border-radius: 10px;
transition: background-color 180ms var(--ease);
}
.ae-canvas.ae-canvas-drop { background: color-mix(in srgb, var(--primary) 8%, transparent); outline: 2px dashed var(--primary); outline-offset: 4px; }
/* Comme .forbidden, le UA [hidden] est overridé par display:flex → force */
.ae-canvas-empty[hidden] { display: none !important; }
.ae-canvas-empty {
display: flex; flex-direction: column; align-items: center; justify-content: center;
text-align: center; padding: 36px 20px; gap: 8px;
color: var(--text-muted);
}
.ae-canvas-empty svg { width: 32px; height: 32px; color: var(--text-dim); opacity: 0.5; margin-bottom: 6px; }
.ae-canvas-empty .t { font: 600 14px var(--font-display); color: var(--text); margin: 0; }
.ae-canvas-empty .m { font-size: 12.5px; line-height: 1.5; margin: 0; max-width: 32ch; }
/* Bloc individuel dans le canvas */
.ae-block {
background: var(--bg-2); border: 1px solid var(--border); border-radius: 12px;
overflow: hidden;
transition: border-color 150ms var(--ease), transform 150ms var(--ease), opacity 150ms var(--ease);
cursor: grab;
}
.ae-block:hover { border-color: color-mix(in srgb, var(--primary) 35%, var(--border)); }
.ae-block.ae-dragging { opacity: 0.4; cursor: grabbing; }
.ae-block.ae-drop-target { border-color: var(--primary); box-shadow: 0 -2px 0 var(--primary); }
/* Indicateur d'insertion : ligne orange au-dessus OU au-dessous selon Y curseur */
.ae-block.ae-drop-target-top { box-shadow: 0 -3px 0 var(--primary); border-color: color-mix(in srgb, var(--primary) 30%, var(--border)); }
.ae-block.ae-drop-target-bottom { box-shadow: 0 3px 0 var(--primary); border-color: color-mix(in srgb, var(--primary) 30%, var(--border)); }
.ae-block-toolbar {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
padding: 8px 14px;
background: rgba(255,255,255,0.02); border-bottom: 1px solid var(--border);
}
.ae-block-type { font: 600 10.5px var(--font-body); letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-dim); }
.ae-block-actions { display: flex; gap: 4px; }
.ae-block-btn {
width: 26px; height: 26px;
background: transparent; border: 1px solid var(--border); border-radius: 6px;
color: var(--text-muted); font: 600 12px var(--font-body);
cursor: pointer; transition: all 150ms var(--ease);
display: grid; place-items: center;
}
.ae-block-btn:hover { color: var(--text); border-color: var(--text-dim); background: rgba(255,255,255,0.04); }
.ae-block-btn-danger:hover { color: var(--danger); border-color: var(--danger); background: rgba(224,82,82,0.08); }
.ae-block-body { padding: 14px 16px; cursor: default; min-width: 0; }
.ae-block-fields { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ae-block-body input, .ae-block-body textarea, .ae-block-body select {
width: 100%; max-width: 100%; padding: 8px 12px;
background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
color: var(--text); font: 400 13.5px var(--font-body);
font-family: inherit;
word-wrap: break-word; overflow-wrap: anywhere; /* casse les mots trop longs */
}
.ae-block-body select { max-width: 100px; }
.ae-block-body textarea {
resize: vertical; min-height: 60px; line-height: 1.5;
/* Auto-grow handled by JS (input listener) — mais on permet aussi le resize manuel */
}
.ae-block-body input:focus, .ae-block-body textarea:focus, .ae-block-body select:focus {
outline: 0; border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);
}
/* Wrap les inputs longs : empêche le bloc de grossir au-delà du canvas */
.ae-block, .ae-block-body, .ae-block-fields { min-width: 0; }
/* Image preview dans l'éditeur — cap raisonnable (avant : 100% width = énorme) */
.ae-block-img-preview {
width: 100%; max-width: 360px;
aspect-ratio: 16 / 9;
background-size: cover; background-position: center;
background-color: var(--bg-2);
border-radius: 8px; border: 1px solid var(--border);
margin-top: 4px;
}
.ae-divider-preview {
height: 1px;
background: linear-gradient(90deg, transparent, var(--text-dim), transparent);
margin: 6px 0;
}
.ae-list-fields { gap: 6px; }
.ae-list-item { display: flex; gap: 6px; align-items: center; }
.ae-list-item input { flex: 1; }
.ae-list-add {
align-self: flex-start;
background: transparent; border: 1px dashed var(--border); border-radius: 8px;
padding: 6px 12px; color: var(--text-muted); font: 500 12px var(--font-body);
cursor: pointer; transition: all 150ms var(--ease);
}
.ae-list-add:hover { color: var(--primary); border-color: var(--primary); border-style: solid; }
/* Palette de blocs (colonne droite) — sticky pour rester visible pendant scroll.
Le parent grid (.ae-layout) doit avoir `align-items: start` sinon les grid items
stretch et sticky n'a aucune marge pour scroller. align-self: start sur grid. */
.ae-palette {
background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
padding: 18px 16px;
position: sticky;
top: 24px;
max-height: calc(100vh - 48px);
overflow-y: auto;
align-self: start;
}
.ae-palette-head { font: 600 13px var(--font-body); letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 14px; padding: 0 4px; }
.ae-palette-list { display: flex; flex-direction: column; gap: 4px; }
.ae-palette-item {
display: flex; align-items: center; gap: 10px;
width: 100%; padding: 10px 12px;
background: transparent; border: 1px solid transparent; border-radius: 8px;
color: var(--text); font: 500 13px var(--font-body); font-family: inherit;
cursor: grab; text-align: left;
transition: background-color 150ms var(--ease), border-color 150ms var(--ease);
}
.ae-palette-item:hover { background: var(--bg-2); border-color: var(--border); }
.ae-palette-item:active { cursor: grabbing; }
.ae-palette-item svg { width: 16px; height: 16px; color: var(--primary); flex-shrink: 0; }
.ae-palette-hint { font: 400 11px var(--font-body); color: var(--text-dim); line-height: 1.5; padding: 14px 4px 0; margin-top: 14px; border-top: 1px solid var(--border); }
/* --- Page lecture annonce rich --------------------------------- */
/* Cover : aspect plus contenu (16/7 au lieu de 21/9), max-height pour éviter
qu'elle prenne la moitié de l'écran, arrondis pour cohérence avec le reste. */
.ar-cover {
max-width: 940px; margin: 0 auto 32px;
width: calc(100% - 48px);
aspect-ratio: 16 / 7; max-height: 360px;
overflow: hidden;
background: var(--bg-2);
border-radius: 16px;
border: 1px solid var(--border);
}
.ar-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ar-article {
max-width: 740px; margin: 0 auto; padding: 0 24px 80px;
position: relative; z-index: 1;
}
.ar-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.ar-back {
display: inline-flex; align-items: center; gap: 6px;
color: var(--text-muted); font: 500 13px var(--font-body);
text-decoration: none;
transition: gap 200ms var(--ease-out), color 200ms var(--ease-out);
}
.ar-back svg { width: 14px; height: 14px; transition: transform 200ms var(--ease-out); }
.ar-back:hover { color: var(--primary); gap: 10px; }
.ar-back:hover svg { transform: translateX(-2px); }
.ar-head { margin-bottom: 36px; }
.ar-title { font: 700 clamp(28px, 4vw, 40px) var(--font-display); letter-spacing: -0.022em; line-height: 1.15; margin: 14px 0 16px; color: var(--text); }
.ar-meta { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-muted); flex-wrap: wrap; }
.ar-meta .ar-sep { opacity: 0.4; }
.ar-content { color: var(--text); font: 400 16px/1.7 var(--font-body); min-width: 0; word-wrap: break-word; overflow-wrap: anywhere; }
.ar-content h1 { font: 700 28px var(--font-display); letter-spacing: -0.015em; margin: 36px 0 14px; word-wrap: break-word; overflow-wrap: anywhere; }
.ar-content h2 { font: 700 22px var(--font-display); letter-spacing: -0.01em; margin: 32px 0 12px; word-wrap: break-word; overflow-wrap: anywhere; }
.ar-content h3 { font: 600 18px var(--font-display); letter-spacing: -0.005em; margin: 28px 0 10px; word-wrap: break-word; overflow-wrap: anywhere; }
.ar-content p { margin: 0 0 18px; color: var(--text); line-height: 1.7; word-wrap: break-word; overflow-wrap: anywhere; }
.ar-content ul { padding-left: 22px; margin: 0 0 18px; }
.ar-content li { margin-bottom: 6px; line-height: 1.65; }
.ar-content blockquote {
margin: 24px 0; padding: 18px 24px;
border-left: 3px solid var(--primary);
background: color-mix(in srgb, var(--primary) 6%, transparent);
font-style: italic; color: var(--text); font-size: 17px; line-height: 1.6;
}
.ar-content blockquote cite { display: block; margin-top: 8px; font-size: 13px; color: var(--text-muted); font-style: normal; opacity: 0.75; }
.ar-content hr { border: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--border), transparent); margin: 32px 0; }
.ar-content .ann-img { margin: 24px 0; }
.ar-content .ann-img img { width: 100%; border-radius: 12px; display: block; }
.ar-content .ann-img figcaption { margin-top: 8px; font-size: 12.5px; color: var(--text-muted); text-align: center; font-style: italic; }
.ar-content a { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }
.ar-content a:hover { color: var(--text); }
/* Responsive éditeur */
@media (max-width: 1100px) {
.ae-layout { grid-template-columns: 1fr; }
.ae-palette { position: static; max-height: none; }
.ae-palette-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 6px; }
}
/* --- Image lightbox (annonces) --------------------------------- */
html.al-open, html.al-open body { overflow: hidden; }
.al-overlay {
position: fixed; inset: 0; z-index: 250;
background: rgba(8, 8, 8, 0.96);
display: none;
-webkit-user-select: none; user-select: none;
}
.al-overlay.open { display: block; animation: alFade 180ms cubic-bezier(.22,.61,.36,1); }
@keyframes alFade { from { opacity: 0; } to { opacity: 1; } }
.al-topbar {
position: absolute; top: 20px; left: 20px; right: 20px;
display: flex; align-items: center; gap: 8px;
z-index: 2;
pointer-events: none;
}
.al-topbar > * { pointer-events: auto; }
.al-spacer { flex: 1; }
.al-btn {
width: 42px; height: 42px;
background: rgba(20, 20, 22, 0.85);
-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 50%;
color: #fff; cursor: pointer;
display: grid; place-items: center;
transition: background-color 150ms, border-color 150ms, transform 150ms;
}
.al-btn:hover { background: var(--primary); color: #0A0A0A; border-color: var(--primary); transform: scale(1.05); }
.al-stage {
position: relative;
width: 100vw; height: 100vh;
display: flex; align-items: center; justify-content: center;
overflow: hidden;
touch-action: none;
}
.al-stage img {
max-width: none; max-height: none;
width: auto; height: auto;
border-radius: 12px;
box-shadow: 0 24px 60px rgba(0,0,0,0.6);
transform-origin: 50% 50%;
will-change: transform;
cursor: zoom-in;
-webkit-user-drag: none; -webkit-touch-callout: none;
}
.al-overlay.zoomed .al-stage img { cursor: grab; }
.al-overlay.dragging .al-stage img { cursor: grabbing; transition: none !important; }
/* Curseur custom du dashboard : on cache le natif sur le lightbox */
html.cursor-custom .al-overlay, html.cursor-custom .al-overlay * { cursor: none; }
/* Indique visuellement qu'une image d'annonce est cliquable */
.ar-content img, .ar-cover img { cursor: zoom-in; transition: transform 200ms var(--ease); }
.ar-content img:hover { transform: scale(1.005); }
@media (max-width: 720px) {
.al-topbar { top: 14px; left: 14px; right: 14px; }
.al-btn { width: 38px; height: 38px; }
.al-stage img { border-radius: 8px; box-shadow: 0 12px 32px rgba(0,0,0,0.5); margin: 0 auto; display: block; }
}
/* --- Debug switch pilote (sidebar) ----------------------------- */
.dbg-switch[hidden] { display: none !important; }
.dbg-switch {
margin: 12px 14px 8px;
padding: 10px 12px;
background: rgba(255, 200, 0, 0.06);
border: 1px dashed rgba(255, 200, 0, 0.35);
border-radius: 8px;
display: flex; flex-direction: column; gap: 8px;
}
.dbg-switch .dbg-label {
font: 600 9.5px var(--font-body); letter-spacing: 0.18em; text-transform: uppercase;
color: rgba(255, 200, 0, 0.8);
}
.dbg-switch .dbg-row { display: flex; gap: 6px; }
.dbg-switch select {
flex: 1; min-width: 0;
padding: 5px 6px;
background: var(--bg-2); border: 1px solid var(--border); border-radius: 5px;
color: var(--text); font: 500 11px var(--font-body); font-family: inherit;
}
.dbg-switch button {
padding: 5px 10px;
background: rgba(255, 200, 0, 0.18); color: rgba(255, 200, 0, 0.95);
border: 1px solid rgba(255, 200, 0, 0.35); border-radius: 5px;
font: 600 11px var(--font-body); cursor: pointer;
transition: all 150ms var(--ease);
}
.dbg-switch button:hover:not(:disabled) { background: rgba(255, 200, 0, 0.3); }
.dbg-switch button:disabled { opacity: 0.6; cursor: not-allowed; }
/* --- Modal preview annonce enrichie ---------------------------- */
/* `.modal` impose max-width:600px → on override avec une spécificité plus haute. */
.modal-bg .modal.modal-preview {
max-width: 980px;
width: min(95vw, 980px);
max-height: 90vh;
overflow: hidden;
display: flex; flex-direction: column;
padding: 0;
border-radius: 16px;
}
.modal-preview .close {
position: absolute; top: 14px; right: 14px;
z-index: 5;
}
.preview-banner {
display: flex; align-items: center; gap: 10px;
padding: 12px 20px;
background: color-mix(in srgb, var(--primary) 10%, transparent);
border-bottom: 1px solid color-mix(in srgb, var(--primary) 25%, var(--border));
color: var(--primary);
font: 600 12px var(--font-body); letter-spacing: 0.05em;
}
.preview-banner svg { color: var(--primary); flex-shrink: 0; }
.preview-body { overflow-y: auto; padding: 0 0 24px; flex: 1; }
.preview-body .preview-cover {
width: 100%; aspect-ratio: 16 / 7; max-height: 280px;
overflow: hidden; background: var(--bg-2);
}
.preview-body .preview-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.preview-body .ar-article { max-width: 100%; padding-left: 32px; padding-right: 32px; }
.preview-excerpt { font: italic 500 15px var(--font-body); color: var(--text-muted); margin: 20px 0 0; padding-top: 16px; border-top: 1px dashed var(--border); }
.tag-red { color: var(--danger); background: rgba(224,82,82,0.12); }
.tag-muted { color: var(--text-muted); background: var(--surface-raised); }
/* ============== HOME ============== */
.greet { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 28px; }
.greet h1 { font: 700 32px var(--font-display); letter-spacing: -0.02em; margin: 0 0 6px; }
.greet .sub { color: var(--text-muted); }
.greet .sub .gd { color: var(--primary); margin-left: 6px; padding: 2px 8px; font: 500 11px var(--font-body); letter-spacing: 0.1em; text-transform: uppercase; background: var(--primary-soft); border-radius: 6px; }
.greet .clock { text-align: right; font-variant-numeric: tabular-nums; }
.greet .clock .t { font: 700 28px var(--font-display); color: var(--text); letter-spacing: 0.02em; display: inline-flex; align-items: baseline; gap: 2px; }
/* Secondes en petit, séparées par un ":" inséré via ::before — pulse douce pour signaler le "live" */
.greet .clock .t .s { font: 600 16px var(--font-display); color: var(--text-muted); letter-spacing: 0.02em; }
.greet .clock .t .s::before { content: ":"; margin-right: 1px; color: var(--text-muted); animation: clockBlink 2s ease-in-out infinite; }
@keyframes clockBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
.greet .clock .d { font: 500 12px var(--font-body); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.16em; margin-top: 2px; }
/* Featured announcement — design propre : eyebrow + titre + excerpt + footer meta/CTA.
Plus de stripe orange ni de bouton plein, on mise sur la typo et un CTA "arrow link". */
.featured-ann {
position: relative;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 16px;
padding: 26px 32px 24px;
margin-bottom: 24px;
overflow: hidden;
}
.featured-ann::before {
content: ""; position: absolute; top: 0; left: 24px; right: 24px; height: 1px;
background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--primary) 50%, transparent), transparent);
}
.featured-ann .fa-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; flex-wrap: wrap; }
.featured-ann .fa-eyebrow { display: inline-flex; align-items: center; gap: 8px; font: 500 11px var(--font-body); letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted); }
.featured-ann .fa-eyebrow svg { width: 14px; height: 14px; color: var(--primary); }
.featured-ann .fa-title { font: 600 22px var(--font-display); letter-spacing: -0.012em; margin: 0 0 10px; color: var(--text); line-height: 1.25; }
.featured-ann .fa-excerpt { color: var(--text-muted); margin: 0 0 22px; line-height: 1.65; max-width: 680px; font-size: 14px; }
.featured-ann .fa-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.featured-ann .fa-meta { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-dim); letter-spacing: 0.01em; }
.featured-ann .fa-meta .fa-sep { opacity: 0.45; }
/* Bouton CTA "arrow link" — minimal, hover = flèche qui glisse */
.btn-arrow {
display: inline-flex; align-items: center; gap: 6px;
background: transparent; border: 0; padding: 6px 0;
font: 500 13px var(--font-body); letter-spacing: 0.005em;
color: var(--primary); cursor: pointer;
transition: gap 200ms var(--ease-out);
}
.btn-arrow svg { width: 14px; height: 14px; transition: transform 200ms var(--ease-out); }
.btn-arrow:hover { gap: 10px; }
.btn-arrow:hover svg { transform: translateX(2px); }
.btn-arrow:focus-visible { outline: 2px solid var(--primary); outline-offset: 4px; border-radius: 2px; }
.home-2col { display: grid; grid-template-columns: 6fr 4fr; gap: 20px; margin-bottom: 24px; }
@media (max-width: 1100px) { .home-2col { grid-template-columns: 1fr; } }
/* Upcoming panel — remplace l'ancien "Informations pilote" (qui doublonnait
avec la member-card). Affichera prochains vols / group flights / deadlines
dès que le système d'événements sera en place (Phase 3). Pour l'instant : empty state. */
.upcoming-panel {
background: var(--surface); border-radius: 16px; padding: 24px 28px;
display: flex; flex-direction: column; gap: 18px;
min-height: 280px;
}
.upcoming-panel .up-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.upcoming-panel .up-head h4 { font: 600 13px var(--font-body); letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-muted); margin: 0; }
.upcoming-panel .up-count {
display: inline-block; padding: 3px 10px; border-radius: 999px;
background: var(--primary-soft); color: var(--primary);
font: 600 11px var(--font-body); letter-spacing: 0.02em;
min-width: 22px; text-align: center;
}
.upcoming-panel .up-empty {
flex: 1;
display: flex; flex-direction: column; align-items: center; justify-content: center;
text-align: center; padding: 12px 0;
}
.upcoming-panel .up-empty-ic { width: 36px; height: 36px; color: var(--text-dim); opacity: 0.5; margin-bottom: 14px; }
.upcoming-panel .up-empty-title { font: 600 14px var(--font-body); color: var(--text); margin: 0 0 6px; letter-spacing: -0.005em; }
.upcoming-panel .up-empty-msg { font-size: 12.5px; color: var(--text-muted); line-height: 1.55; margin: 0; max-width: 38ch; }
/* Hidden-attribute override : nécessaire car display:flex/grid bat [hidden] */
.upcoming-panel .up-empty[hidden],
.upcoming-panel .up-list[hidden] { display: none !important; }
.upcoming-panel .up-list { display: flex; flex-direction: column; gap: 10px; flex: 1; }
.up-event {
display: flex; flex-direction: column; gap: 6px;
padding: 12px 14px; border-radius: 12px;
background: var(--surface-raised); border: 1px solid var(--border);
text-decoration: none; color: inherit;
transition: border-color 140ms ease, transform 140ms ease, background 140ms ease;
}
.up-event:hover { border-color: color-mix(in srgb, var(--primary) 35%, var(--border)); background: color-mix(in srgb, var(--primary) 4%, var(--surface-raised)); transform: translateY(-1px); }
.up-event-static { cursor: default; }
.up-event-static:hover { border-color: var(--border); background: var(--surface-raised); transform: none; }
.up-event-date { font: 600 11px ui-monospace, Menlo, monospace; color: var(--primary); letter-spacing: 0.04em; text-transform: capitalize; }
.up-event-title { font: 600 13.5px var(--font-display); color: var(--text); letter-spacing: -0.005em; line-height: 1.3; }
.up-event-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text-muted); }
.up-event-meta .tag { padding: 2px 8px; font-size: 10.5px; }
.up-event-sec { display: inline-flex; align-items: center; gap: 4px; opacity: 0.85; }
.up-event-loc { color: var(--text-muted); }
/* Member card — airline ID badge */
.member-card { position: relative; background: linear-gradient(135deg, #1A1A1A 0%, #222222 100%); border: 1px solid var(--border); border-radius: 16px; padding: 22px 24px 18px; overflow: hidden; box-shadow: 0 0 20px rgba(245,166,35,0.08); display: flex; flex-direction: column; gap: 18px; min-height: 280px; }
.member-card::after { content: ""; position: absolute; right: -60px; bottom: -60px; width: 280px; height: 280px; background: url('assets/logo/SKY_CONNEXION_ICON.png') no-repeat center / contain; opacity: 0.04; pointer-events: none; filter: brightness(2.4) saturate(1.5); z-index: 0; }
.member-card > * { position: relative; z-index: 1; }
.member-card .mc-top { display: flex; align-items: center; justify-content: space-between; }
.member-card .mc-top .mc-logo { height: 18px; width: auto; opacity: 0.85; }
.member-card .mc-top .id { font: 500 11px ui-monospace, Menlo, monospace; color: var(--text-muted); letter-spacing: 0.18em; }
.member-card .mc-identity { display: flex; align-items: center; gap: 16px; }
.member-card .mc-identity .av { width: 56px; height: 56px; border-radius: 50%; background: var(--primary); color: #0A0A0A; display: grid; place-items: center; font: 700 20px var(--font-display); letter-spacing: 0.02em; flex-shrink: 0; }
.member-card .mc-identity .who { min-width: 0; flex: 1; }
.member-card .mc-identity .who .nm { font: 700 20px var(--font-display); color: var(--text); letter-spacing: -0.01em; line-height: 1.15; }
.member-card .mc-identity .who .gd { font: 500 11px var(--font-body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--primary); margin-top: 4px; }
.member-card .mc-identity .who .sectors { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.member-card .mc-identity .who .sectors .sp { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; background: rgba(255,255,255,0.04); border: 1px solid var(--border); border-radius: 999px; font: 500 10.5px var(--font-body); color: var(--text-muted); letter-spacing: 0.04em; }
.member-card .mc-identity .who .sectors .sp .ic { color: var(--primary); }
.member-card .mc-divider { height: 1px; background: var(--border); margin: 2px 0; }
/* Stats principales (3 metrics : heures, vols, route fav) — bigger numbers */
.member-card .mc-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.member-card .mc-stats .mc-stat { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.member-card .mc-stats .mc-stat .k { font: 500 9.5px var(--font-body); letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-dim); }
.member-card .mc-stats .mc-stat .v { font: 700 18px var(--font-display); color: var(--text); letter-spacing: -0.01em; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.member-card .mc-stats .mc-stat .v small { font: 500 11px var(--font-body); color: var(--text-muted); margin-left: 2px; }
/* Meta secondaire (Base, Membre depuis) — typo plus discrète, format key:value inline */
.member-card .mc-meta { display: flex; flex-direction: column; gap: 6px; padding-top: 4px; border-top: 1px dashed var(--border); margin-top: 4px; }
.member-card .mc-meta .mc-meta-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font: 500 11px var(--font-body); }
.member-card .mc-meta .mc-meta-row .k { color: var(--text-dim); letter-spacing: 0.06em; text-transform: uppercase; font-size: 10px; }
.member-card .mc-meta .mc-meta-row .v { color: var(--text); font-family: ui-monospace, Menlo, monospace; letter-spacing: 0.04em; }
.member-card .mc-stripe { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--primary); border-bottom-left-radius: 15px; border-bottom-right-radius: 15px; z-index: 2; }
/* Quick access */
.quick-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 16px; }
@media (max-width: 900px) { .quick-grid { grid-template-columns: 1fr; } }
.quick { background: var(--surface); border-radius: 14px; padding: 20px; border: 1px solid transparent; transition: border-color 200ms var(--ease), transform 200ms var(--ease); display: flex; flex-direction: column; gap: 8px; min-height: 130px; }
.quick:hover { border-color: var(--primary); transform: translateY(-2px); }
.quick .icon { width: 32px; height: 32px; color: var(--primary); margin-bottom: 8px; }
.quick h5 { font: 600 16px var(--font-display); margin: 0; }
.quick p { color: var(--text-muted); font-size: 13px; margin: 0; line-height: 1.5; }
.quick.featured { background: linear-gradient(135deg, rgba(245,166,35,0.08), transparent 60%), var(--surface); }
/* ============== ANNONCES ============== */
/* Annonces — même langage visuel que la featured-ann de la home (tag en haut,
titre, excerpt, meta + arrow CTA en bas), avec accent orange pour les "lead". */
.ann-list { display: grid; gap: 14px; }
.ann {
position: relative;
background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
padding: 22px 26px;
transition: border-color 200ms var(--ease), background-color 200ms var(--ease), transform 200ms var(--ease);
overflow: hidden;
}
.ann:hover { border-color: color-mix(in srgb, var(--primary) 35%, var(--border)); }
.ann.ann-clickable { cursor: pointer; }
/* Quand le custom cursor est actif, on cache le natif sur les annonces cliquables
(sans ça, le pointer natif du browser apparait par-dessus le cursor custom). */
html.cursor-custom .ann.ann-clickable, html.cursor-custom .ann.ann-clickable * { cursor: none; }
.ann.ann-clickable:hover { background: color-mix(in srgb, var(--surface-raised) 100%, transparent); }
.ann.ann-clickable:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
/* La "fausse" .btn-arrow (span) imite le bouton — réagit au hover de la carte parent */
.ann .btn-arrow { color: var(--primary); display: inline-flex; align-items: center; gap: 6px; font: 500 13px var(--font-body); transition: gap 200ms var(--ease-out); }
.ann .btn-arrow svg { width: 14px; height: 14px; transition: transform 200ms var(--ease-out); }
.ann.ann-clickable:hover .btn-arrow { gap: 10px; }
.ann.ann-clickable:hover .btn-arrow svg { transform: translateX(2px); }
.ann .ann-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.ann h3 { font: 600 18px var(--font-display); margin: 0 0 8px; letter-spacing: -0.005em; color: var(--text); line-height: 1.3; }
.ann p { color: var(--text-muted); line-height: 1.6; margin: 0 0 18px; max-width: 720px; font-size: 13.5px; }
.ann .ann-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.ann .ann-meta { font-size: 12px; color: var(--text-dim); letter-spacing: 0.01em; display: inline-flex; align-items: center; gap: 8px; }
.ann .ann-meta .sep { opacity: 0.4; }
/* Lead annonce (épinglée en avant) : halo gradient discret + barre orange en haut
fade-in/out aux 2 bouts pour éviter le "arrêt net" visuel. */
.ann.lead {
background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 5%, transparent), transparent 60%), var(--surface);
border-color: color-mix(in srgb, var(--primary) 25%, var(--border));
}
.ann.lead::before {
content: "";
position: absolute;
top: -1px; /* recouvre le 1px de border-top pour éviter le double trait */
left: 0; right: 0;
height: 2px;
background: linear-gradient(90deg, transparent 0%, var(--primary) 25%, var(--primary) 75%, transparent 100%);
opacity: 0.85;
}
.ann.lead h3 { font-size: 21px; }
@media (max-width: 720px) { .ann { padding: 18px 20px; } }
/* Modal — no backdrop-filter: GPU compositing of a blurred fullscreen overlay was
the main cause of stutter on open/close. Solid translucent fill is fast and reads fine. */
.modal-bg { position: fixed; inset: 0; background: rgba(6,6,6,0.86); display: none; align-items: center; justify-content: center; z-index: 100; padding: 24px; }
.modal-bg.open { display: flex; animation: bgFade 160ms ease-out; }
@keyframes bgFade { from { opacity: 0; } to { opacity: 1; } }
body.modal-open { overflow: hidden; }
.modal { background: var(--bg-2); border-radius: 20px; padding: 36px; max-width: 600px; width: 100%; max-height: 80vh; overflow-y: auto; position: relative; border: 1px solid var(--border); animation: modalIn 280ms var(--ease-out); }
@keyframes modalIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }
.modal .close { position: absolute; top: 16px; right: 16px; background: transparent; border: 0; color: var(--text-muted); width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; transition: all 150ms; }
.modal .close:hover { color: var(--text); background: var(--surface); }
.modal h3 { font: 700 24px var(--font-display); margin: 14px 0 6px; padding-right: 32px; letter-spacing: -0.01em; }
/* Si le h3 est le tout premier élément (ex. modal admin sans tag), on retire la marge top */
.modal > h3:first-child, .modal > .meta + h3 { margin-top: 0; }
.modal .meta { font-size: 12px; color: var(--text-muted); letter-spacing: 0.04em; margin-bottom: 16px; }
.modal .body { color: var(--text); font-size: 15px; line-height: 1.75; }
.modal .body p { margin: 0 0 12px; }
.modal .body p:last-child { margin-bottom: 0; }
/* ============== LIVREES ============== */
.liv-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
@media (max-width: 900px) { .liv-grid { grid-template-columns: 1fr; } }
.liv-card { background: var(--surface); border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; transition: transform 200ms var(--ease), border-color 200ms var(--ease); border: 1px solid transparent; }
.liv-card:hover { border-color: var(--border); }
.liv-card .img { height: 180px; overflow: hidden; background: var(--bg); position: relative; }
.liv-card .img img { width: 100%; height: 100%; object-fit: cover; transition: transform 400ms var(--ease); }
.liv-card:hover .img img { transform: scale(1.05); }
.liv-card .body { padding: 20px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.liv-card .body h4 { font: 600 17px var(--font-display); margin: 0; }
.liv-card .body p { color: var(--text-muted); font-size: 13px; line-height: 1.55; margin: 0; }
.liv-card .body .ver { font-size: 12px; color: var(--text-dim); letter-spacing: 0.04em; }
.liv-card .body .dl { margin-top: auto; }
.liv-card .body .dl .btn { width: 100%; }
.liv-card .body .dl .btn.done { background: var(--success); }
/* ============== PROFIL ============== */
.profile-head { background: var(--bg-2); border-radius: 20px; padding: 36px; display: flex; align-items: center; gap: 28px; margin-bottom: 24px; border: 1px solid var(--border); }
.profile-head .av { width: 80px; height: 80px; border-radius: 50%; background: var(--primary); color: #1a1a1a; display: grid; place-items: center; font: 700 28px var(--font-display); letter-spacing: 0.02em; background-size: cover; background-position: center; flex-shrink: 0; box-shadow: 0 12px 30px rgba(245,166,35,0.3); }
.profile-head .av-btn { padding: 0; border: 0; position: relative; overflow: hidden; transition: transform 200ms var(--ease); }
.profile-head .av-btn .av-edit { position: absolute; inset: 0; background: rgba(10,10,10,0.65); color: #fff; display: grid; place-items: center; opacity: 0; transition: opacity 180ms var(--ease); border-radius: 50%; }
.profile-head .av-btn .av-edit svg { width: 22px; height: 22px; }
.profile-head .av-btn:hover { transform: scale(1.04); }
.profile-head .av-btn:hover .av-edit, .profile-head .av-btn:focus-visible .av-edit { opacity: 1; }
.profile-head .av-btn.has-img { color: transparent; }
/* Avatar editor modal */
.avatar-editor { display: flex; flex-direction: column; align-items: center; gap: 18px; margin: 8px 0 22px; }
.av-preview { width: 120px; height: 120px; border-radius: 50%; background: var(--primary); color: #0A0A0A; display: grid; place-items: center; font: 700 40px var(--font-display); letter-spacing: 0.02em; background-size: cover; background-position: center; border: 1px solid var(--border); box-shadow: 0 16px 40px rgba(0,0,0,0.5); }
.av-preview.has-img { color: transparent; }
.av-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.av-upload { cursor: none; }
.av-hint { font-size: 12px; color: var(--text-dim); margin: 0; text-align: center; line-height: 1.5; }
.avatar-form-actions { display: flex; justify-content: flex-end; gap: 10px; padding-top: 16px; border-top: 1px solid var(--border); }
.profile-head .info { flex: 1; min-width: 0; }
.profile-head .info h2 { font: 700 28px var(--font-display); margin: 0 0 6px; letter-spacing: -0.02em; }
.profile-head .info .badges { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 6px; }
.profile-head .info .num { font: 500 12px ui-monospace, Menlo, monospace; color: var(--text-muted); letter-spacing: 0.16em; }
.profile-head .info .since { font-size: 12px; color: var(--text-dim); margin-top: 4px; }
@media (max-width: 640px) { .profile-head { flex-direction: column; text-align: center; padding: 28px 20px; } }
.profile-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 28px; }
@media (max-width: 720px) { .profile-stats { grid-template-columns: repeat(2, 1fr); } }
.profile-stats .stat { background: var(--surface); border-radius: 14px; padding: 22px; }
.profile-stats .stat .v { font: 700 32px var(--font-display); color: var(--primary); letter-spacing: -0.01em; line-height: 1; }
.profile-stats .stat .v small { font-size: 18px; color: var(--text-muted); font-weight: 500; margin-left: 2px; }
.profile-stats .stat .l { font: 500 11px var(--font-body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); margin-top: 8px; }
.section-title { font: 700 18px var(--font-display); letter-spacing: -0.01em; margin: 0 0 14px; }
.progression { background: var(--surface); border-radius: 16px; padding: 28px; margin-bottom: 24px; }
.progression .bar-wrap { margin: 14px 0 22px; }
.progression .bar-meta { display: flex; justify-content: space-between; font: 500 12px var(--font-body); color: var(--text-muted); letter-spacing: 0.06em; margin-bottom: 8px; }
.progression .bar-meta b { color: var(--primary); }
.progression .bar { height: 10px; border-radius: 999px; background: var(--border); overflow: hidden; }
.progression .bar > span { display: block; height: 100%; background: linear-gradient(90deg, var(--primary), #ffc164); border-radius: inherit; }
.progression .timeline { display: grid; gap: 10px; }
.progression .step { display: flex; align-items: center; gap: 14px; padding: 10px 0; }
.progression .step .dot { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; font-size: 11px; font-weight: 600; }
.progression .step.done .dot { background: var(--primary); color: #1a1a1a; }
.progression .step.todo .dot { background: var(--surface-raised); color: var(--text-dim); border: 1px solid var(--border); }
.progression .step .lab { font: 500 14px var(--font-body); }
.progression .step.todo .lab { color: var(--text-muted); }
.progression .step .req { margin-left: auto; font-size: 12px; color: var(--text-dim); }
.form { background: var(--surface); border-radius: 16px; padding: 28px; }
.form .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; }
@media (max-width: 720px) { .form .grid { grid-template-columns: 1fr; } }
.field label { display: block; font: 500 11px var(--font-body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 8px; }
.field input, .field select, .field textarea { width: 100%; padding: 11px 14px; background: var(--bg-2); border: 1px solid var(--border); border-radius: 10px; color: var(--text); font: 400 14px var(--font-body); transition: border-color 150ms; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--primary); }
.form .actions { margin-top: 20px; display: flex; justify-content: flex-end; gap: 10px; }
/* ============== ADMIN ============== */
.admin-tabs { display: flex; gap: 6px; margin-bottom: 20px; border-bottom: 1px solid var(--border); padding-bottom: 0; overflow-x: auto; }
.admin-tabs button { padding: 10px 16px; background: transparent; border: 0; color: var(--text-muted); font: 500 13px var(--font-body); position: relative; white-space: nowrap; }
.admin-tabs button.active { color: var(--primary); }
.admin-tabs button.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--primary); }
.admin-section { display: none; }
.admin-section.active { display: block; }
.admin-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.admin-toolbar .search { display: flex; align-items: center; gap: 8px; background: var(--bg-2); border: 1px solid var(--border); border-radius: 10px; padding: 8px 12px; flex: 1; max-width: 360px; }
.admin-toolbar .search { transition: border-color 150ms var(--ease); }
.admin-toolbar .search:focus-within { border-color: var(--primary); }
.admin-toolbar .search input { background: transparent; border: 0; color: var(--text); flex: 1; font: 400 13px var(--font-body); }
.admin-toolbar .search input:focus { outline: none; }
.admin-toolbar .search svg { width: 16px; height: 16px; color: var(--text-muted); }
.table { background: var(--bg-2); border-radius: 14px; overflow: hidden; border: 1px solid var(--border); overflow-x: auto; }
.table table { width: 100%; border-collapse: collapse; min-width: 640px; }
.table thead th { text-align: left; padding: 14px 18px; font: 500 11px var(--font-body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); border-bottom: 1px solid var(--border); background: var(--bg-2); }
.table tbody td { padding: 14px 18px; font-size: 13.5px; border-bottom: 1px solid var(--border); }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr { transition: background 100ms; }
.table tbody tr:hover { background: var(--surface); }
.table .row-actions { display: inline-flex; gap: 6px; }
.table .icon-btn { background: transparent; border: 1px solid var(--border); border-radius: 8px; color: var(--text-muted); width: 30px; height: 30px; display: inline-grid; place-items: center; transition: all 150ms; }
.table .icon-btn:hover { color: var(--text); border-color: var(--text-muted); }
.table .icon-btn.danger:hover { color: var(--danger); border-color: var(--danger); }
.table .row-av { display: inline-flex; align-items: center; gap: 10px; }
.table .row-av .av { width: 28px; height: 28px; border-radius: 50%; background: var(--primary); color: #1a1a1a; display: grid; place-items: center; font: 600 11px var(--font-display); }
.table select.inline { background: var(--surface); border: 1px solid var(--border); color: var(--text); border-radius: 6px; padding: 4px 8px; font-size: 12px; }
/* Postulations */
.posts { display: grid; gap: 12px; }
.post { background: var(--bg-2); border: 1px solid var(--border); border-radius: 14px; padding: 18px 22px; display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: center; }
.post .col h5 { font: 600 14px var(--font-display); margin: 0 0 4px; }
.post .col p { color: var(--text-muted); font-size: 13px; margin: 0; line-height: 1.55; }
.post .col .when { font-size: 11px; color: var(--text-dim); letter-spacing: 0.06em; margin-top: 4px; }
.post .pa { display: flex; gap: 6px; }
/* Admin empty / forbidden */
.forbidden { display: grid; place-items: center; padding: 80px 20px; text-align: center; }
.forbidden .lock { width: 64px; height: 64px; border-radius: 50%; background: rgba(224,82,82,0.12); display: grid; place-items: center; color: var(--danger); margin: 0 auto 18px; }
.forbidden h2 { font: 700 24px var(--font-display); margin: 0 0 6px; }
.forbidden p { color: var(--text-muted); margin: 0 0 18px; }
/* ============== TOAST ============== */
/* Design : minimal, dense, sans cercle d'icône ni barre verticale décorative.
Inspiré de Linear/Vercel — l'identité visuelle vient juste de la couleur
du picto et d'une mini barre de progression discrète en bas. */
.toasts {
position: fixed; right: 20px; bottom: 20px;
display: flex; flex-direction: column; gap: 10px;
z-index: 200; max-width: 360px;
pointer-events: none; /* container transparent; les toasts ré-activent leurs events */
}
.toast {
--tc: var(--primary);
pointer-events: auto;
position: relative;
display: grid;
grid-template-columns: 18px 1fr 16px;
gap: 12px;
align-items: start;
min-width: 280px;
padding: 12px 14px 13px 14px;
background: rgba(20, 21, 23, 0.92);
-webkit-backdrop-filter: blur(14px) saturate(140%);
backdrop-filter: blur(14px) saturate(140%);
border: 1px solid rgba(255, 255, 255, 0.07);
border-radius: 10px;
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
overflow: hidden;
animation: toastIn 220ms var(--ease-out);
}
.toast-success { --tc: var(--success); }
.toast-danger { --tc: var(--danger); }
.toast-info { --tc: var(--primary); }
.toast-ic { width: 18px; height: 18px; color: var(--tc); margin-top: 1px; flex-shrink: 0; }
.toast-body { min-width: 0; }
.toast-title { font: 600 13px var(--font-body); color: var(--text); letter-spacing: -0.005em; line-height: 1.3; }
.toast-msg { margin-top: 3px; font-size: 12px; color: var(--text-muted); line-height: 1.45; word-wrap: break-word; }
.toast-close {
background: transparent; border: 0; padding: 0;
width: 16px; height: 16px;
display: grid; place-items: center;
color: var(--text-dim);
border-radius: 4px;
opacity: 0;
transition: opacity 150ms var(--ease), color 150ms, background-color 150ms;
cursor: pointer;
margin-top: 2px;
}
.toast:hover .toast-close, .toast-close:focus-visible { opacity: 0.7; }
.toast-close:hover { opacity: 1 !important; color: var(--text); background: rgba(255,255,255,0.06); }
.toast-progress {
position: absolute; left: 0; right: 0; bottom: 0;
height: 1.5px; background: var(--tc); opacity: 0.55;
transform-origin: left; animation: toastBar 4200ms linear forwards;
}
.toast-paused .toast-progress { animation-play-state: paused; }
@keyframes toastIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.toast-out { animation: toastOut 220ms var(--ease) forwards; }
@keyframes toastOut { to { opacity: 0; transform: translateX(8px); } }
@keyframes toastBar { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@keyframes toastBar { from { transform: scaleX(1); } to { transform: scaleX(0); } }
/* ============== MOBILE BOTTOM NAV ============== */
.mobile-nav { display: none; position: fixed; left: 0; right: 0; bottom: 0; background: var(--bg-2); border-top: 1px solid var(--border); z-index: 40; padding: 8px 0 calc(8px + env(safe-area-inset-bottom)); }
.mobile-nav .row { display: flex; align-items: stretch; }
.mobile-nav .row > button { flex: 1 1 0; min-width: 0; }
.mobile-nav button { background: transparent; border: 0; color: var(--text-muted); display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 4px; position: relative; }
.mobile-nav button.active { color: var(--primary); }
.mobile-nav button.active::after { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 4px; height: 4px; border-radius: 50%; background: var(--primary); }
.mobile-nav svg { width: 20px; height: 20px; stroke-width: 1.7; }
.mobile-nav .lab { font-size: 10px; letter-spacing: 0.04em; }
.mobile-top { display: none; position: sticky; top: 0; background: var(--bg-2); border-bottom: 1px solid var(--border); padding: 14px 20px; z-index: 30; align-items: center; justify-content: space-between; }
.mobile-top img { height: 24px; }
/* ============================================================
New components — Bio, Toggle, Vertical grade timeline,
Sector cards, Crew page, Organisation, Postulation modal
============================================================ */
/* Sector badges (under profile grade) */
.sector-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.sector-pill { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; background: #1A1A1A; border: 1px solid #2A2A2A; border-radius: 999px; font: 500 11.5px var(--font-body); color: var(--text); letter-spacing: 0.02em; }
.sector-pill .ic { color: var(--primary); font: 700 12px var(--font-display); width: 14px; text-align: center; line-height: 1; }
/* Bio + counter + toggle (in profile form) */
.account-section { background: var(--surface); border-radius: 14px; padding: 26px; margin-bottom: 18px; }
.account-section h3 { font: 700 16px var(--font-display); margin: 0 0 4px; letter-spacing: -0.01em; }
.account-section .desc { color: var(--text-muted); font-size: 13px; margin: 0 0 18px; line-height: 1.55; }
.bio-wrap { position: relative; }
.bio-wrap textarea { width: 100%; min-height: 88px; resize: vertical; padding: 12px 14px 26px; background: var(--bg-2); border: 1px solid var(--border); border-radius: 10px; color: var(--text); font: 400 14px var(--font-body); line-height: 1.55; transition: border-color 150ms; }
.bio-wrap textarea:focus { outline: none; border-color: var(--primary); }
.bio-wrap .count { position: absolute; right: 12px; bottom: 8px; font: 500 11px ui-monospace, Menlo, monospace; color: var(--text-dim); pointer-events: none; }
.bio-wrap .count.over { color: var(--danger); }
.account-section > .btn { margin-top: 14px; }
.toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.toggle-row .col { min-width: 0; }
.toggle-row .col .t { font: 600 14px var(--font-body); }
.toggle-row .col .s { font-size: 12.5px; color: var(--text-muted); margin-top: 2px; line-height: 1.45; }
.toggle { position: relative; width: 46px; height: 26px; background: #2A2A2A; border-radius: 999px; cursor: none; transition: background 250ms var(--ease); border: 0; padding: 0; flex-shrink: 0; }
.toggle::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; background: #fff; border-radius: 50%; transition: transform 250ms var(--ease); }
.toggle.on { background: var(--primary); }
.toggle.on::after { transform: translateX(20px); }
/* Vertical grade timeline (profile + organisation) */
.grade-timeline { display: grid; gap: 14px; margin-top: 14px; }
.grade-row { display: grid; grid-template-columns: 96px 1fr auto; gap: 24px; align-items: center; background: var(--surface); padding: 24px 28px; border-radius: 16px; border: 1px solid var(--border); transition: opacity 200ms, border-color 200ms, transform 200ms; position: relative; }
.grade-row.dim { opacity: 0.55; }
.grade-row.current { border-color: var(--primary); background: linear-gradient(135deg, rgba(245,166,35,0.06), transparent 60%), var(--surface); box-shadow: 0 0 24px rgba(245,166,35,0.08); }
.grade-row.current::after { content: "Grade actuel"; position: absolute; top: 14px; right: 28px; font: 600 10px var(--font-body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--primary); background: var(--primary-soft); padding: 4px 10px; border-radius: 999px; }
.grade-row .ord { font: 700 64px var(--font-display); color: rgba(245,166,35,0.10); letter-spacing: -0.03em; line-height: 1; user-select: none; }
.grade-row.current .ord { color: rgba(245,166,35,0.22); }
.grade-row .body .nm { font: 700 19px var(--font-display); color: var(--text); margin-bottom: 6px; letter-spacing: -0.01em; }
.grade-row .body .desc { color: var(--text-muted); font-size: 13.5px; line-height: 1.55; max-width: 56ch; }
.grade-row .threshold { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; background: var(--bg-2); color: var(--primary); border: 1px solid var(--border); border-radius: 999px; font: 600 12px var(--font-body); letter-spacing: 0.04em; white-space: nowrap; }
.grade-row.current .threshold { background: var(--primary-soft); border-color: rgba(245,166,35,0.4); }
.grade-row .body .nm-only { font: 700 19px var(--font-display); color: var(--text); letter-spacing: -0.01em; }
@media (max-width: 720px) {
.grade-row { grid-template-columns: 56px 1fr; gap: 14px; padding: 18px; }
.grade-row .ord { font-size: 40px; }
.grade-row .threshold { grid-column: 1 / -1; justify-self: start; }
.grade-row.current::after { position: static; align-self: start; }
}
/* Sector cards (organisation page) */
.sector-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 32px; }
@media (max-width: 900px) { .sector-grid { grid-template-columns: 1fr; } }
.sector-card { position: relative; background: var(--surface); border-radius: 16px; padding: 24px; border: 1px solid transparent; display: flex; flex-direction: column; gap: 12px; transition: border-color 200ms; }
.sector-card.member { border-color: var(--primary); }
.sector-card .mine { position: absolute; top: 14px; right: 14px; font: 600 10px var(--font-body); color: var(--primary); background: var(--primary-soft); padding: 4px 9px; border-radius: 999px; letter-spacing: 0.06em; text-transform: uppercase; }
.sector-card .ico { width: 32px; height: 32px; color: var(--primary); font: 700 22px var(--font-display); display: flex; align-items: center; }
.sector-card h4 { font: 700 18px var(--font-display); margin: 0; letter-spacing: -0.01em; }
.sector-card .req { display: inline-flex; padding: 4px 10px; background: var(--bg-2); border: 1px solid var(--border); border-radius: 999px; font: 500 11px var(--font-body); color: var(--text-muted); letter-spacing: 0.04em; align-self: flex-start; }
.sector-card .resp { color: var(--text-muted); font-size: 13px; line-height: 1.55; margin: 0; }
.sector-card .duties { list-style: none; padding: 0; margin: 4px 0 0; display: grid; gap: 6px; }
.sector-card .duties li { position: relative; padding-left: 18px; font-size: 13px; color: var(--text); line-height: 1.5; }
.sector-card .duties li::before { content: "—"; position: absolute; left: 0; top: 0; color: var(--primary); font-weight: 600; }
.sector-card .apply { margin-top: auto; padding-top: 12px; }
.sector-card .apply .btn { width: 100%; }
.sector-card .apply .btn:disabled { background: var(--surface-raised); color: var(--text-dim); cursor: none; }
.sector-card .apply .btn.sent { background: var(--surface-raised); color: var(--text-muted); }
/* Crew lists by sector (organisation page section 3) */
/* Équipes par secteur (page Organisation) — chaque secteur = card avec header
(icône + nom + count) puis liste de membres cliquables (ouvre le profil). */
.crew-by-sector { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 18px; }
.cs-group { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 18px 20px 14px; }
.cs-head { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--border); margin-bottom: 10px; }
.cs-head .cs-icon { font-size: 18px; line-height: 1; }
.cs-head h5 { font: 600 14px var(--font-display); margin: 0; color: var(--text); letter-spacing: -0.005em; flex: 1; }
.cs-head .cs-count { font: 500 10.5px var(--font-body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); padding: 3px 9px; border: 1px solid var(--border); border-radius: 999px; }
.cs-list { display: flex; flex-direction: column; gap: 2px; }
.cs-member {
display: grid; grid-template-columns: 38px 1fr 16px;
gap: 12px; align-items: center;
width: 100%;
padding: 9px 10px;
background: transparent; border: 0; border-radius: 10px;
text-align: left; cursor: pointer; font-family: inherit;
transition: background-color 150ms var(--ease);
}
.cs-member:hover { background: rgba(255,255,255,0.03); }
.cs-member:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.cs-member .cs-av { width: 38px; height: 38px; border-radius: 50%; background: var(--primary); color: #0A0A0A; display: grid; place-items: center; font: 700 13px var(--font-display); flex-shrink: 0; letter-spacing: 0.02em; }
.cs-member .cs-info { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cs-member .cs-name { font: 600 13px var(--font-body); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-member .cs-grade { font: 500 11px var(--font-body); color: var(--text-muted); letter-spacing: 0.03em; }
.cs-member .cs-arrow { width: 14px; height: 14px; color: var(--text-dim); opacity: 0; transition: opacity 150ms var(--ease), transform 150ms var(--ease), color 150ms var(--ease); }
.cs-member:hover .cs-arrow { opacity: 1; color: var(--primary); transform: translateX(2px); }
.cs-empty { padding: 12px 10px 4px; font: italic 400 12.5px var(--font-body); color: var(--text-dim); text-align: center; }
/* /pilotes page — crew grid */
.crew-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 1100px) { .crew-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px) { .crew-grid { grid-template-columns: 1fr; } }
.pilot-card { background: var(--surface); border-radius: 16px; padding: 24px; border: 1px solid transparent; transition: border-color 200ms; display: flex; flex-direction: column; gap: 12px; }
.pilot-card:hover { border-color: var(--primary); }
.pilot-card .head { display: flex; align-items: center; gap: 14px; }
.pilot-card .head .av { width: 56px; height: 56px; border-radius: 50%; background: var(--primary); color: #0A0A0A; display: grid; place-items: center; font: 700 18px var(--font-display); flex-shrink: 0; }
.pilot-card .head .meta { min-width: 0; flex: 1; }
.pilot-card .head .meta .nm { font: 600 16px var(--font-display); letter-spacing: -0.01em; }
.pilot-card .head .meta .id { font: 500 12px ui-monospace, Menlo, monospace; color: var(--text-muted); letter-spacing: 0.1em; margin-top: 2px; }
.pilot-card .bg { display: inline-flex; align-self: flex-start; padding: 4px 10px; background: var(--primary-soft); color: var(--primary); border-radius: 6px; font: 600 11px var(--font-body); letter-spacing: 0.06em; }
.pilot-card .bio { font-size: 13px; color: var(--text-muted); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 36px; }
.pilot-card .stats { display: flex; gap: 18px; padding-top: 12px; border-top: 1px solid var(--border); font: 500 12px var(--font-body); color: var(--text-muted); }
.pilot-card .stats b { color: var(--text); font-weight: 600; }
/* Pilot detail modal */
.modal.wide { max-width: 720px; }
.modal .prof-mini-head { display: flex; align-items: center; gap: 20px; margin-bottom: 22px; padding-right: 32px; }
.modal .prof-mini-head .av { width: 64px; height: 64px; border-radius: 50%; background: var(--primary); color: #0A0A0A; display: grid; place-items: center; font: 700 22px var(--font-display); }
.modal .prof-mini-head h3 { margin: 0; padding: 0; font-size: 22px; }
.modal .prof-mini-head .id { font: 500 12px ui-monospace, Menlo, monospace; color: var(--text-muted); letter-spacing: 0.14em; margin-top: 3px; }
.modal .prof-mini-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 18px; }
.modal .prof-mini-stats .s { background: var(--surface); padding: 16px; border-radius: 10px; }
.modal .prof-mini-stats .s .v { font: 700 22px var(--font-display); color: var(--primary); line-height: 1; }
.modal .prof-mini-stats .s .l { font: 500 10.5px var(--font-body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); margin-top: 6px; }
.modal .prof-mini-bio { background: var(--surface); padding: 16px; border-radius: 10px; font-size: 14px; line-height: 1.6; color: var(--text); }
/* Postulation modal */
.modal .postul-form label { display: block; font: 500 11px var(--font-body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 8px; }
.modal .postul-form .bio-wrap { margin-bottom: 14px; }
.modal .postul-form .actions { display: flex; justify-content: flex-end; gap: 10px; }
/* ============== TABLET — sidebar icon-only with tooltips ============== */
@media (min-width: 768px) and (max-width: 1024px) {
.app { grid-template-columns: 72px 1fr; }
.sidebar { width: 72px; padding: 18px 8px; }
.sidebar .brand img { height: 24px; }
.sidebar .pilot { padding: 8px; justify-content: center; gap: 0; }
.sidebar .pilot .info, .sidebar .pilot .chev { display: none; }
.sidebar nav .label { font-size: 0; letter-spacing: 0; padding: 14px 8px 6px; height: 1px; background: var(--border); margin: 8px 0; }
.sidebar nav .label:first-child { background: transparent; height: 0; margin-top: 0; padding-top: 0; }
.nav-item { padding: 12px 8px; justify-content: center; position: relative; border-radius: 10px; }
.nav-item span:not(.badge-dot) { display: none; }
.nav-item.active::before { left: 0; }
.nav-item .badge-dot { position: absolute; top: 8px; right: 8px; margin-left: 0; }
/* Tooltip on hover */
.nav-item::after {
content: attr(data-tooltip);
position: absolute; left: calc(100% + 12px); top: 50%; transform: translateY(-50%) translateX(-4px);
background: var(--bg-2); color: var(--text); padding: 6px 10px; border-radius: 8px;
font: 500 12px var(--font-body); white-space: nowrap;
border: 1px solid var(--border);
opacity: 0; pointer-events: none; transition: opacity 150ms var(--ease), transform 150ms var(--ease);
z-index: 30;
}
.nav-item:hover::after { opacity: 1; transform: translateY(-50%) translateX(0); }
.sidebar .logout { justify-content: center; padding: 12px 8px; }
.sidebar .logout span { display: none; }
.main { grid-column: 2; padding: 32px; }
}
/* ============== MOBILE ============== */
@media (max-width: 767px) {
.app { grid-template-columns: 1fr; }
.sidebar { display: none; }
.mobile-nav, .mobile-top { display: flex; }
.main { padding: 20px 18px 100px; grid-column: 1; }
.page-header h1, .greet h1 { font-size: 24px; }
}
/* ============== ADMIN GATE ============== */
.is-non-admin .nav-item[data-route="admin"],
.is-non-admin .mobile-nav button[data-route="admin"] { display: none; }
.is-non-admin .sidebar .label:last-of-type { display: none; } /* cache le sous-titre "Gestion globale" pour non-admin */
/* ============== REVEAL — one-shot ============== */
/* Once a page has been visited, suppress further animation on its descendants. */
.page.seen .reveal-up { animation: none; }
/* ============== SKELETON LOADER ============== */
@keyframes shimmer { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } }
.skeleton {
background: linear-gradient(90deg, #1A1A1A 0%, #2A2A2A 50%, #1A1A1A 100%);
background-size: 800px 100%;
animation: shimmer 1.4s ease-in-out infinite;
border-radius: 12px;
display: block;
}
.sk-card { background: var(--surface); border-radius: 16px; padding: 24px; }
.sk-line { height: 14px; border-radius: 6px; margin-bottom: 10px; }
.sk-line.w-30 { width: 30%; }
.sk-line.w-60 { width: 60%; }
.sk-line.w-80 { width: 80%; }
.sk-line.w-100 { width: 100%; }
.sk-thumb { aspect-ratio: 16 / 8; border-radius: 12px; margin-bottom: 14px; }
/* ============== FORBIDDEN STATE ============== */
/* `[hidden] { display: none }` du UA stylesheet a la même spécificité que .forbidden,
donc notre règle ci-dessous gagnait par ordre source — d'où le forbidden qui restait
visible sous le contenu admin. On force le hidden explicitement. */
.forbidden[hidden] { display: none !important; }
.forbidden { display: grid; place-items: center; padding: 80px 20px; text-align: center; min-height: 50vh; }
.forbidden .lock { width: 64px; height: 64px; border-radius: 50%; background: rgba(224,82,82,0.12); display: grid; place-items: center; color: var(--danger); margin: 0 auto 18px; }
.forbidden .lock svg { width: 28px; height: 28px; }
.forbidden h2 { font: 700 24px var(--font-display); margin: 0 0 6px; }
.forbidden p { color: var(--text-muted); margin: 0 0 18px; max-width: 40ch; line-height: 1.55; }
/* ============== COUNTER stagger guard ============== */
.counter[data-counter] { font-variant-numeric: tabular-nums; }
/* ============== ADMIN FORM MODALS ============== */
.modal .adm-form { display: grid; gap: 14px; margin: 20px 0 4px; }
.modal .adm-form .row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.modal .adm-form .row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
.modal .adm-form .field-hint { font: 400 11px var(--font-body); color: var(--text-dim); margin-left: 6px; text-transform: none; letter-spacing: 0; }
@media (max-width: 640px) {
.modal .adm-form .row-2 { grid-template-columns: 1fr; }
.modal .adm-form .row-3 { grid-template-columns: 1fr; }
}
.modal .adm-form .field label {
display: block; font: 500 11px var(--font-body); letter-spacing: 0.14em;
text-transform: uppercase; color: var(--text-muted); margin-bottom: 8px;
}
.modal .adm-form .field input,
.modal .adm-form .field textarea,
.modal .adm-form .field select {
width: 100%; padding: 11px 14px; background: var(--bg-2); border: 1px solid var(--border);
border-radius: 10px; color: var(--text); font: 400 14px var(--font-body);
transition: border-color 150ms var(--ease); resize: vertical;
}
.modal .adm-form .field input:focus,
.modal .adm-form .field textarea:focus,
.modal .adm-form .field select:focus { outline: none; border-color: var(--primary); }
.modal .adm-form .field textarea { min-height: 80px; line-height: 1.55; }
.modal .adm-form .check-row {
display: flex; gap: 10px; align-items: center;
font: 400 13px var(--font-body); color: var(--text-muted);
}
.modal .adm-form .check-row input { width: 16px; height: 16px; accent-color: var(--primary); flex-shrink: 0; }
.modal-actions {
display: flex; justify-content: flex-end; gap: 10px;
padding-top: 18px; border-top: 1px solid var(--border); margin-top: 18px;
}
/* Confirm modal — slimmer, no form */
.modal.modal-confirm { max-width: 440px; }
.modal-confirm .confirm-msg { color: var(--text-muted); line-height: 1.6; margin: 6px 0 0; font-size: 14px; }
/* Danger button (used for destructive confirms) */
.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover { background: color-mix(in srgb, var(--danger) 86%, #000); }
/* ============== ADMIN — Pilot edit modal sector chips ==============
Refonte : chips toggle pleine largeur, état "checked" très visible via :has().
Checkbox native masquée mais reste accessible au clavier (l'élément focusable). */
.pe-sectors { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 0; }
.pe-sectors .sec-check {
position: relative;
display: inline-flex; align-items: center; gap: 9px;
padding: 9px 14px;
background: var(--bg-2); border: 1px solid var(--border); border-radius: 999px;
cursor: pointer; user-select: none;
font: 500 12.5px var(--font-body); color: var(--text-muted); letter-spacing: 0.01em;
transition: background-color 150ms var(--ease), border-color 150ms var(--ease), color 150ms var(--ease);
}
.pe-sectors .sec-check:hover { background: rgba(255,255,255,0.04); color: var(--text); }
.pe-sectors .sec-check input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.pe-sectors .sec-check input:focus-visible + .ic { outline: 2px solid var(--primary); outline-offset: 4px; border-radius: 4px; }
.pe-sectors .sec-check .ic { font-size: 15px; line-height: 1; }
.pe-sectors .sec-check:has(input:checked) {
background: var(--primary-soft);
border-color: color-mix(in srgb, var(--primary) 55%, var(--border));
color: var(--primary);
}
.pe-sectors .sec-check:has(input:checked)::after {
content: "✓"; margin-left: 2px; font-weight: 700; opacity: 0.85;
}
.pm-admin-actions { padding-top: 14px; margin-top: 18px; border-top: 1px solid var(--border); justify-content: flex-start; }
/* ============================================================
PHASE 2 — Mes secteurs (landing) + Gestion d'un secteur
Design volontairement différent du Panel super-admin :
plus de cards, plus d'air, moins de tableaux denses.
============================================================ */
/* Sous-titre de page (réutilisable sur tous les page-header) */
.page-header .page-sub { margin: 12px 0 0; color: var(--text-muted); font-size: 14px; line-height: 1.55; max-width: 60ch; }
/* Hide "Mes secteurs" nav for users without sectors AND non-admin */
.no-sectors .nav-item[data-route="secteurs"],
.no-sectors .mobile-nav button[data-route="secteurs"] { display: none; }
/* --- Landing "Mes secteurs" ---------------------------------- */
.my-sectors-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 18px; }
.ms-card {
position: relative;
display: flex; flex-direction: column;
padding: 24px 26px 22px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 18px;
text-decoration: none;
color: inherit;
overflow: hidden;
cursor: pointer;
transition: transform 280ms var(--ease-out), border-color 280ms var(--ease-out), box-shadow 280ms var(--ease-out);
}
/* Halo radial qui s'illumine au hover */
.ms-card .ms-card-glow {
position: absolute; inset: -1px;
background: radial-gradient(450px circle at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--primary) 18%, transparent), transparent 60%);
opacity: 0; transition: opacity 320ms var(--ease-out);
pointer-events: none; border-radius: 18px;
}
.ms-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--primary) 35%, var(--border)); box-shadow: 0 24px 50px -20px rgba(0,0,0,0.6); }
.ms-card:hover .ms-card-glow { opacity: 1; }
.ms-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; position: relative; z-index: 1; }
.ms-card .ms-icon { font-size: 30px; line-height: 1; transition: transform 320ms var(--ease-out); }
.ms-card:hover .ms-icon { transform: scale(1.15) rotate(-6deg); }
.ms-card .ms-badge {
font: 600 10px var(--font-body); letter-spacing: 0.16em; text-transform: uppercase;
padding: 4px 10px; border-radius: 999px;
background: rgba(76,175,125,0.12); color: var(--success);
border: 1px solid color-mix(in srgb, var(--success) 30%, transparent);
}
.ms-card .ms-badge-super { background: var(--primary-soft); color: var(--primary); border-color: color-mix(in srgb, var(--primary) 40%, transparent); }
.ms-card .ms-name { font: 600 20px var(--font-display); margin: 0 0 8px; color: var(--text); letter-spacing: -0.012em; position: relative; z-index: 1; }
.ms-card .ms-resp { color: var(--text-muted); line-height: 1.55; margin: 0 0 18px; font-size: 13px; position: relative; z-index: 1; }
.ms-card .ms-stats { display: flex; gap: 24px; padding: 14px 0; border-top: 1px dashed var(--border); margin-top: auto; position: relative; z-index: 1; }
.ms-card .ms-stat { display: flex; flex-direction: column; gap: 2px; }
.ms-card .ms-stat .v { font: 700 18px var(--font-display); color: var(--text); letter-spacing: -0.01em; line-height: 1; }
.ms-card .ms-stat .k { font: 500 11px var(--font-body); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); }
.ms-card .ms-cta {
display: inline-flex; align-items: center; gap: 6px;
margin-top: 14px;
font: 600 13px var(--font-body); color: var(--primary);
transition: gap 220ms var(--ease-out);
position: relative; z-index: 1;
}
.ms-card .ms-cta svg { width: 14px; height: 14px; transition: transform 220ms var(--ease-out); }
.ms-card:hover .ms-cta { gap: 10px; }
.ms-card:hover .ms-cta svg { transform: translateX(2px); }
/* Empty state "Mes secteurs" — comme pour .forbidden, on force [hidden] sinon
le display: flex de la règle ci-dessous gagne sur le UA stylesheet. */
.my-sectors-empty[hidden] { display: none !important; }
.my-sectors-grid[hidden] { display: none !important; }
.my-sectors-empty {
background: var(--surface); border: 1px dashed var(--border); border-radius: 18px;
padding: 64px 32px; text-align: center;
display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.my-sectors-empty svg { width: 48px; height: 48px; color: var(--text-dim); opacity: 0.6; }
.my-sectors-empty .t { font: 600 16px var(--font-display); color: var(--text); margin: 0; letter-spacing: -0.01em; }
.my-sectors-empty .m { font-size: 13px; color: var(--text-muted); line-height: 1.55; margin: 0; max-width: 42ch; }
.my-sectors-empty .btn-arrow { margin-top: 8px; }
/* --- Page de gestion d'un secteur --------------------------- */
.sector-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.sector-header .sector-title { display: flex; align-items: center; gap: 14px; margin: 0; }
.sector-header .sector-title .sec-ico { font-size: 32px; line-height: 1; }
.sector-header .sector-title #sec-name { font: 700 32px var(--font-display); letter-spacing: -0.02em; }
.sector-tools {
display: inline-flex; gap: 4px; padding: 4px;
background: var(--bg-2); border: 1px solid var(--border); border-radius: 12px;
margin-bottom: 20px;
}
.sec-tab {
display: inline-flex; align-items: center; gap: 8px;
padding: 9px 16px;
background: transparent; border: 0; border-radius: 8px;
font: 500 13px var(--font-body); color: var(--text-muted);
cursor: pointer; font-family: inherit;
transition: background-color 180ms var(--ease), color 180ms var(--ease);
}
.sec-tab svg { width: 14px; height: 14px; }
.sec-tab:hover { color: var(--text); }
.sec-tab.active { background: var(--surface); color: var(--text); box-shadow: 0 2px 8px rgba(0,0,0,0.25); }
.sec-tab.active svg { color: var(--primary); }
/* Contenu d'un onglet */
.sec-list { display: flex; flex-direction: column; gap: 10px; }
.sec-item {
display: grid; grid-template-columns: 1fr auto;
gap: 16px; align-items: center;
padding: 16px 20px;
background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
transition: border-color 180ms var(--ease), transform 180ms var(--ease);
}
.sec-item:hover { border-color: color-mix(in srgb, var(--primary) 25%, var(--border)); }
.sec-item-draft { background: color-mix(in srgb, #c97c00 4%, var(--surface)); border-style: dashed; }
.sec-item-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.sec-item-head .sec-item-date { font: 500 11px var(--font-body); color: var(--text-dim); letter-spacing: 0.04em; margin-left: auto; }
.sec-item-body h4 { font: 600 15px var(--font-display); margin: 0 0 4px; color: var(--text); letter-spacing: -0.005em; }
.sec-item-body p { font-size: 13px; color: var(--text-muted); line-height: 1.5; margin: 0; max-width: 640px; }
.sec-item-actions { display: flex; gap: 6px; flex-shrink: 0; align-self: center; }
/* Variantes : livrée (avec thumbnail) et pilote (avec avatar circle) */
.sec-item-livree { grid-template-columns: 80px 1fr auto; gap: 18px; }
.sec-item-livree .sec-item-thumb {
width: 80px; height: 56px; border-radius: 8px;
background-size: cover; background-position: center;
background-color: var(--bg-2); border: 1px solid var(--border);
flex-shrink: 0;
}
.sec-item-pilot { grid-template-columns: 44px 1fr auto; gap: 16px; align-items: center; }
.sec-item-pilot .sec-pilot-av {
width: 44px; height: 44px; border-radius: 50%;
background: var(--primary); color: #0A0A0A;
display: grid; place-items: center;
font: 700 14px var(--font-display); letter-spacing: 0.02em;
flex-shrink: 0;
}
.tag-muted { color: var(--text-muted); background: rgba(255,255,255,0.05); }
@media (max-width: 720px) {
.sec-item-livree { grid-template-columns: 1fr; }
.sec-item-livree .sec-item-thumb { width: 100%; height: 120px; }
.sec-item-pilot { grid-template-columns: 36px 1fr; }
.sec-item-pilot .sec-item-actions { grid-column: 1 / -1; justify-content: flex-end; }
}
.icon-btn {
width: 32px; height: 32px;
background: transparent; border: 1px solid var(--border); border-radius: 8px;
color: var(--text-muted); cursor: pointer;
display: grid; place-items: center;
transition: all 150ms var(--ease);
}
.icon-btn:hover { color: var(--text); border-color: var(--text-dim); background: rgba(255,255,255,0.03); }
.icon-btn.icon-btn-danger:hover { color: var(--danger); border-color: var(--danger); background: rgba(224,82,82,0.08); }
/* Empty state d'un onglet de secteur */
.sec-empty {
background: var(--surface); border: 1px dashed var(--border); border-radius: 14px;
padding: 56px 32px; text-align: center;
display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.sec-empty svg { width: 36px; height: 36px; color: var(--text-dim); opacity: 0.5; }
.sec-empty .t { font: 600 14px var(--font-display); color: var(--text); margin: 0; }
.sec-empty .m { font-size: 12.5px; color: var(--text-muted); line-height: 1.55; margin: 0; max-width: 42ch; }
/* ============================================================
Page Événements (#/events) — vue d'ensemble de tous les events
visibles par le pilote. Édition via Mes secteurs → onglet Événements.
============================================================ */
.evp-list { display: flex; flex-direction: column; gap: 10px; }
.evp-section-title {
font: 600 11.5px var(--font-body); letter-spacing: 0.16em; text-transform: uppercase;
color: var(--text-muted); margin: 12px 0 4px; padding-top: 8px;
border-top: 1px solid var(--border);
}
.evp-section-title:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.evp-section-past { color: var(--text-dim); }
.evp-item {
display: grid; grid-template-columns: 90px 1fr auto; gap: 16px; align-items: center;
background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
padding: 16px 18px;
transition: border-color 140ms ease;
}
.evp-item:hover { border-color: color-mix(in srgb, var(--primary) 25%, var(--border)); }
.evp-item-past { opacity: 0.55; }
.evp-item-past:hover { border-color: var(--border); }
.evp-when {
display: flex; flex-direction: column; align-items: center; justify-content: center;
padding: 8px 6px; border-radius: 10px;
background: var(--surface-raised); border: 1px solid var(--border);
}
.evp-day {
font: 700 14px var(--font-display); color: var(--primary);
text-transform: uppercase; letter-spacing: 0.04em; line-height: 1.1;
}
.evp-time { font: 500 12px ui-monospace, Menlo, monospace; color: var(--text-muted); margin-top: 4px; }
.evp-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 6px; }
.evp-author { font: 500 11.5px var(--font-body); color: var(--text-dim); margin-left: auto; }
.evp-body h4 { font: 600 15px var(--font-display); margin: 0 0 4px; color: var(--text); letter-spacing: -0.005em; }
.evp-body p { font-size: 13px; color: var(--text-muted); line-height: 1.5; margin: 0; max-width: 720px; }
.evp-actions { display: flex; gap: 6px; align-self: center; }
.evp-empty {
background: var(--surface); border: 1px dashed var(--border); border-radius: 14px;
padding: 56px 32px; text-align: center;
display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.evp-empty svg { width: 36px; height: 36px; color: var(--text-dim); opacity: 0.5; }
.evp-empty .t { font: 600 14px var(--font-display); color: var(--text); margin: 0; }
.evp-empty .m { font-size: 12.5px; color: var(--text-muted); line-height: 1.55; margin: 0; max-width: 42ch; }
@media (max-width: 720px) {
.evp-item { grid-template-columns: 70px 1fr; gap: 12px; }
.evp-actions { grid-column: 1 / -1; justify-content: flex-end; padding-top: 6px; border-top: 1px solid var(--border); }
.evp-author { margin-left: 0; width: 100%; }
}
/* ============================================================
Page DÉTAIL d'un événement (#/event/{id}) — page de réservation
============================================================ */
.ev-article {
max-width: 980px; margin: 0 auto; display: flex; flex-direction: column; gap: 28px;
}
.ev-toolbar {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.ev-back {
display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px;
background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
color: var(--text-muted); text-decoration: none;
font: 500 12px var(--font-body); letter-spacing: 0.02em;
transition: color 150ms ease, border-color 150ms ease, background 150ms ease;
}
.ev-back:hover { color: var(--text); border-color: var(--text-dim); background: var(--surface-raised); }
.ev-back svg { width: 14px; height: 14px; }
.ev-toolbar-actions { display: flex; gap: 8px; align-items: center; }
@media (max-width: 600px) {
.ev-toolbar { flex-wrap: wrap; }
.ev-toolbar-actions { width: 100%; justify-content: flex-end; }
}
/* Hero — date encadrée + titre + tags */
.ev-hero {
display: grid; grid-template-columns: 140px 1fr; gap: 24px; align-items: center;
background: var(--surface); border: 1px solid var(--border); border-radius: 18px;
padding: 28px 32px;
position: relative; overflow: hidden;
}
.ev-hero::before {
content: ""; position: absolute; right: -80px; top: -80px;
width: 280px; height: 280px; border-radius: 50%;
background: radial-gradient(circle, var(--primary-glow) 0%, transparent 65%);
pointer-events: none;
}
.ev-hero-date {
display: flex; flex-direction: column; align-items: center; justify-content: center;
padding: 18px 14px;
background: linear-gradient(135deg, rgba(245,166,35,0.08), rgba(245,166,35,0.02));
border: 1px solid color-mix(in srgb, var(--primary) 30%, var(--border));
border-radius: 14px;
position: relative; z-index: 1;
}
.ev-hero-day { font: 700 38px var(--font-display); color: var(--primary); line-height: 1; letter-spacing: -0.02em; }
.ev-hero-month { font: 600 13px var(--font-body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text); margin-top: 4px; }
.ev-hero-time { font: 500 13px ui-monospace, Menlo, monospace; color: var(--text-muted); margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--border); width: 100%; text-align: center; }
.ev-hero-info { min-width: 0; position: relative; z-index: 1; }
.ev-hero-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.ev-title { font: 700 28px var(--font-display); color: var(--text); margin: 0 0 8px; letter-spacing: -0.015em; line-height: 1.2; }
.ev-hero-meta { font: 500 13px var(--font-body); color: var(--text-muted); text-transform: capitalize; }
/* Grid 2-col : description à gauche, RSVP/counts à droite */
.ev-grid {
display: grid; grid-template-columns: 1fr 320px; gap: 24px; align-items: start;
}
.ev-main {
background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
padding: 26px 28px;
}
.ev-section-h {
font: 600 12px var(--font-body); letter-spacing: 0.18em; text-transform: uppercase;
color: var(--text-muted); margin: 0 0 14px;
}
.ev-description {
font-size: 14.5px; line-height: 1.65; color: var(--text);
white-space: pre-wrap; margin: 0;
}
.ev-side { display: flex; flex-direction: column; gap: 16px; }
/* RSVP card — 3 boutons côte-à-côte + clear */
.ev-rsvp-card {
background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
padding: 22px 22px 18px;
}
.ev-rsvp-card .ev-section-h { margin-bottom: 12px; }
.ev-rsvp-btns { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.ev-rsvp-btn {
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 6px; padding: 14px 6px; border-radius: 12px;
background: var(--surface-raised); border: 1px solid var(--border);
color: var(--text-muted); cursor: pointer;
transition: all 160ms var(--ease);
}
.ev-rsvp-btn svg { width: 22px; height: 22px; }
.ev-rsvp-lbl { font: 600 11.5px var(--font-body); letter-spacing: 0.02em; }
.ev-rsvp-btn:hover:not(:disabled) { border-color: var(--text-dim); color: var(--text); transform: translateY(-1px); }
.ev-rsvp-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.ev-rsvp-going.active { background: rgba(76,175,125,0.12); border-color: var(--success); color: var(--success); }
.ev-rsvp-maybe.active { background: rgba(245,166,35,0.12); border-color: var(--primary); color: var(--primary); }
.ev-rsvp-declined.active { background: rgba(224,82,82,0.10); border-color: var(--danger); color: var(--danger); }
.ev-rsvp-clear {
display: block; margin-top: 12px; width: 100%;
padding: 9px 14px; border-radius: 10px;
background: transparent; border: 1px dashed var(--border);
color: var(--text-dim); cursor: pointer;
font: 500 11.5px var(--font-body); letter-spacing: 0.02em;
transition: color 150ms ease, border-color 150ms ease;
}
.ev-rsvp-clear:hover { color: var(--danger); border-color: var(--danger); }
.ev-rsvp-disabled[data-hint]::after {
content: attr(data-hint);
display: block; margin-top: 12px; padding: 8px 12px;
background: var(--surface-raised); border-left: 2px solid var(--text-dim); border-radius: 4px;
font-size: 11.5px; color: var(--text-muted); line-height: 1.5;
}
/* Compteurs résumé — 3 colonnes (présents/peut-être/indispo) */
.ev-counts {
display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px;
background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
padding: 18px;
}
.ev-count { display: flex; flex-direction: column; align-items: center; padding: 6px; border-radius: 10px; }
.ev-count-n { font: 700 26px var(--font-display); line-height: 1; letter-spacing: -0.02em; }
.ev-count-l { font: 600 10.5px var(--font-body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); margin-top: 6px; }
.ev-count-going .ev-count-n { color: var(--success); }
.ev-count-maybe .ev-count-n { color: var(--primary); }
.ev-count-declined .ev-count-n { color: var(--danger); }
/* Liste participants — 3 groupes l'un sous l'autre */
.ev-attendees {
background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
padding: 26px 28px;
}
.ev-attendees-total {
display: inline-block; margin-left: 6px; padding: 2px 8px;
background: var(--primary-soft); color: var(--primary);
border-radius: 999px; font: 600 10.5px var(--font-body);
}
.ev-attendees-groups { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; margin-top: 14px; }
.ev-att-group {
background: var(--surface-raised); border: 1px solid var(--border); border-radius: 12px;
padding: 14px;
}
.ev-att-empty { background: transparent; border-style: dashed; }
.ev-att-group-head {
display: flex; align-items: center; gap: 8px;
font: 600 12px var(--font-body); letter-spacing: 0.06em; text-transform: uppercase;
color: var(--text); margin-bottom: 10px;
}
.ev-att-count {
margin-left: auto; padding: 1px 8px; border-radius: 999px;
background: rgba(255,255,255,0.05); color: var(--text-muted);
font-size: 11px; letter-spacing: 0;
}
.ev-att-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.ev-att-dot-going { background: var(--success); box-shadow: 0 0 8px var(--success); }
.ev-att-dot-maybe { background: var(--primary); box-shadow: 0 0 8px var(--primary); }
.ev-att-dot-declined { background: var(--danger); box-shadow: 0 0 8px var(--danger); }
.ev-att-list { display: flex; flex-direction: column; gap: 8px; }
.ev-att-row {
display: grid; grid-template-columns: 36px 1fr; gap: 10px; align-items: center;
padding: 6px 8px; border-radius: 8px;
transition: background 140ms ease;
}
.ev-att-row:hover { background: rgba(255,255,255,0.03); }
.ev-att-av {
width: 36px; height: 36px; border-radius: 50%;
background: var(--surface); color: var(--text);
display: grid; place-items: center;
font: 700 12px var(--font-display); letter-spacing: 0.02em;
}
.ev-att-name { font: 600 13px var(--font-display); color: var(--text); line-height: 1.2; }
.ev-att-sub { font: 500 11px var(--font-body); color: var(--text-muted); margin-top: 2px; letter-spacing: 0.02em; }
.ev-att-empty-msg { font-size: 12px; color: var(--text-dim); font-style: italic; margin: 0; }
/* Badges RSVP utilisateur sur les cartes des listes */
.evp-my-going { background: rgba(76,175,125,0.16); color: var(--success); border: 1px solid color-mix(in srgb, var(--success) 35%, transparent); }
.evp-my-maybe { background: rgba(245,166,35,0.14); color: var(--primary); border: 1px solid color-mix(in srgb, var(--primary) 35%, transparent); }
.evp-my-declined { background: rgba(224,82,82,0.12); color: var(--danger); border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent); }
/* Tag spécifique "Vue admin" — un peu plus contrasté */
.evp-tag-admin {
background: rgba(111,184,255,0.10); color: #6FB8FF;
border: 1px solid rgba(111,184,255,0.3);
}
/* Item event en mode "vue admin" — léger filet bleuté à gauche */
.evp-item-admin { border-left: 3px solid color-mix(in srgb, #6FB8FF 45%, var(--border)); }
/* Carte cliquable : hover plus marqué + cursor pointer */
.evp-item[data-evp-open] { cursor: pointer; }
.evp-item[data-evp-open]:hover { border-color: color-mix(in srgb, var(--primary) 35%, var(--border)); transform: translateY(-1px); transition: border-color 140ms ease, transform 140ms ease; }
.evp-item[data-evp-open]:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
/* Compteurs RSVP inline (à l'intérieur de la carte de liste) */
.evp-counts-inline {
display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px;
padding-top: 10px; border-top: 1px dashed var(--border);
font: 500 11.5px var(--font-body); color: var(--text-muted);
}
.evp-c-going { color: var(--success); }
.evp-c-maybe { color: var(--primary); }
.evp-c-declined { color: var(--danger); }
/* Badge "Mon RSVP" sur les up-event de la home */
.up-event-my { padding: 2px 7px; border-radius: 999px; font: 600 10px var(--font-body); letter-spacing: 0.04em; margin-left: auto; }
.up-event-my-going { background: rgba(76,175,125,0.16); color: var(--success); }
.up-event-my-maybe { background: rgba(245,166,35,0.14); color: var(--primary); }
.up-event-my-declined { background: rgba(224,82,82,0.12); color: var(--danger); }
/* Responsive — event detail */
@media (max-width: 880px) {
.ev-grid { grid-template-columns: 1fr; }
.ev-attendees-groups { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
.ev-hero { grid-template-columns: 1fr; padding: 22px; }
.ev-hero-date { flex-direction: row; gap: 14px; padding: 14px 16px; justify-content: center; }
.ev-hero-time { margin-top: 0; padding-top: 0; border-top: 0; border-left: 1px solid var(--border); padding-left: 14px; width: auto; text-align: left; }
.ev-title { font-size: 22px; }
.ev-main, .ev-attendees { padding: 20px; }
.ev-rsvp-btns { grid-template-columns: 1fr; }
}
/* ============================================================
Phase 3 — Planification de vol (page #/reservations + flotte + routes)
============================================================ */
.rv-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.rv-filter {
padding: 8px 14px; border-radius: 999px;
background: var(--surface); border: 1px solid var(--border);
color: var(--text-muted); cursor: pointer;
font: 500 12px var(--font-body); letter-spacing: 0.02em;
transition: all 140ms ease;
}
.rv-filter:hover { color: var(--text); border-color: var(--text-dim); }
.rv-filter.active { background: var(--primary-soft); color: var(--primary); border-color: color-mix(in srgb, var(--primary) 40%, transparent); }
/* Liste groupée par jour */
.rv-list { display: flex; flex-direction: column; gap: 20px; }
.rv-day { display: flex; flex-direction: column; gap: 8px; }
.rv-day-head {
font: 600 11.5px var(--font-body); letter-spacing: 0.16em; text-transform: uppercase;
color: var(--text); padding: 0 4px 6px;
border-bottom: 1px solid var(--border);
text-transform: capitalize; letter-spacing: 0.04em;
}
.rv-day-past .rv-day-head { color: var(--text-dim); }
.rv-day-past .rv-row { opacity: 0.6; }
.rv-day-list { display: flex; flex-direction: column; gap: 8px; }
.rv-row {
display: grid; grid-template-columns: 130px 1fr auto; gap: 16px; align-items: center;
background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
padding: 14px 18px;
transition: border-color 140ms ease;
}
.rv-row:hover { border-color: color-mix(in srgb, var(--primary) 25%, var(--border)); }
.rv-row-mine {
border-left: 3px solid var(--primary);
background: color-mix(in srgb, var(--primary) 4%, var(--surface));
}
.rv-row-past { opacity: 0.55; }
.rv-time {
display: flex; flex-direction: column; align-items: center; justify-content: center;
padding: 8px 6px; border-radius: 10px;
background: var(--surface-raised); border: 1px solid var(--border);
font: 600 12px ui-monospace, Menlo, monospace; color: var(--text); letter-spacing: 0.05em;
line-height: 1.3;
}
.rv-time-start { color: var(--primary); }
.rv-time-end { color: var(--text-muted); }
.rv-time-dash { font-size: 10px; color: var(--text-dim); margin: 1px 0; }
.rv-time-release {
display: block; margin-top: 4px; padding-top: 4px;
border-top: 1px dashed var(--border);
font: 500 10px ui-monospace, Menlo, monospace; color: var(--text-dim); letter-spacing: 0.02em;
cursor: help;
}
.rv-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 6px; }
.rv-reg {
font: 700 13px var(--font-display); color: var(--text);
padding: 2px 9px; background: var(--surface-raised); border: 1px solid var(--border);
border-radius: 6px; letter-spacing: 0.04em;
}
.rv-route { font: 600 13px var(--font-display); color: var(--text); letter-spacing: 0.02em; }
.rv-arrow { color: var(--primary); margin: 0 2px; }
.rv-duration { font: 500 11.5px var(--font-body); color: var(--text-muted); letter-spacing: 0.02em; }
.rv-meta { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12.5px; color: var(--text-muted); align-items: center; }
.rv-pilot { display: inline-flex; align-items: center; gap: 6px; }
.rv-pilot-av {
display: inline-grid; place-items: center;
width: 22px; height: 22px; border-radius: 50%;
background: var(--surface-raised); color: var(--text);
font: 700 10px var(--font-display); letter-spacing: 0;
}
.rv-pilot-grade { color: var(--text-dim); }
.rv-notes { color: var(--text-muted); font-style: italic; }
.rv-actions { display: flex; gap: 6px; }
/* Flotte (sec-item-aircraft) — réutilise sec-item avec un layout différent */
.sec-item-aircraft { grid-template-columns: 90px 1fr auto; gap: 16px; align-items: center; }
.sec-aircraft-reg {
font: 700 16px var(--font-display); color: var(--primary);
text-align: center; padding: 10px 6px; border-radius: 10px;
background: linear-gradient(135deg, rgba(245,166,35,0.10), rgba(245,166,35,0.02));
border: 1px solid color-mix(in srgb, var(--primary) 28%, var(--border));
letter-spacing: 0.05em;
}
/* Routes — affichage compact OACI départ/arrivée */
.sec-item-route { grid-template-columns: 140px 1fr auto; gap: 16px; align-items: center; }
.sec-route-icao {
display: flex; align-items: center; gap: 8px; justify-content: center;
padding: 10px 8px; border-radius: 10px;
background: var(--surface-raised); border: 1px solid var(--border);
}
.sec-route-icao .sec-icao {
font: 700 14px ui-monospace, Menlo, monospace; color: var(--text); letter-spacing: 0.08em;
}
.sec-route-icao svg { color: var(--primary); flex-shrink: 0; }
/* ============================================================
Wizard de réservation — modal 3 étapes avec timeline visuelle
============================================================ */
.modal.modal-wizard {
max-width: 880px; width: calc(100vw - 32px);
padding: 26px 30px 22px;
display: flex; flex-direction: column; gap: 18px;
}
.rw-header { display: flex; flex-direction: column; gap: 14px; }
.rw-header h3 { margin: 0; }
/* Stepper : 3 ronds reliés par des barres */
.rw-stepper {
display: grid; grid-template-columns: auto 1fr auto 1fr auto;
align-items: center; gap: 12px;
}
.rw-step { display: flex; flex-direction: column; align-items: center; gap: 6px; transition: all 200ms ease; }
.rw-step-num {
width: 30px; height: 30px; border-radius: 50%;
display: grid; place-items: center;
background: var(--surface-raised); border: 1.5px solid var(--border);
color: var(--text-muted); font: 700 13px var(--font-display);
transition: all 200ms ease;
}
.rw-step-lbl { font: 600 10.5px var(--font-body); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }
.rw-step-active .rw-step-num { background: var(--primary); color: #0A0A0A; border-color: var(--primary); box-shadow: 0 0 16px var(--primary-glow); }
.rw-step-active .rw-step-lbl { color: var(--text); }
.rw-step-done .rw-step-num { background: var(--success); color: #0A0A0A; border-color: var(--success); font-size: 15px; }
.rw-step-line {
height: 2px; background: var(--border); border-radius: 2px;
transition: background 200ms ease;
}
.rw-step-active ~ .rw-step-line, .rw-step-done ~ .rw-step-line { background: var(--primary); }
/* Panel : zone scrollable par étape */
.rw-panel { display: flex; flex-direction: column; gap: 18px; min-height: 380px; max-height: 64vh; overflow-y: auto; padding-right: 6px; }
.rw-panel::-webkit-scrollbar { width: 6px; }
.rw-panel::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
.rw-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 720px) { .rw-grid-2 { grid-template-columns: 1fr; } }
.rw-section-head { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.rw-section-title { font: 600 13px var(--font-display); color: var(--text); margin: 0; letter-spacing: -0.005em; }
.rw-section-sub { font: 500 11.5px var(--font-body); color: var(--text-muted); }
/* Cards (route + aircraft) */
.rw-routes, .rw-aircraft-list { display: flex; flex-direction: column; gap: 8px; }
.rw-card {
display: flex; align-items: center; gap: 14px; text-align: left;
padding: 12px 14px; border-radius: 10px;
background: var(--surface-raised); border: 1.5px solid var(--border);
color: var(--text); cursor: pointer;
transition: all 160ms var(--ease);
}
.rw-card:hover { border-color: var(--text-dim); transform: translateY(-1px); }
.rw-card-active { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 6%, var(--surface-raised)); }
.rw-card-active::after { content: "✓"; margin-left: auto; color: var(--primary); font-size: 16px; font-weight: 700; }
/* Sur les routes, le bouton "↺ Retour" prend déjà la place à droite ; la sélection
reste visible via la bordure orange + le fond teinté. On masque le ✓ doublon. */
.rw-route-card.rw-card-active::after { display: none; }
.rw-route-card { gap: 14px; position: relative; }
.rw-route-swap {
margin-left: auto; flex-shrink: 0;
display: inline-flex; align-items: center; gap: 5px;
padding: 6px 10px; border-radius: 8px;
background: var(--surface); border: 1px solid var(--border);
color: var(--text-muted); cursor: pointer;
font: 600 10.5px var(--font-body); letter-spacing: 0.06em; text-transform: uppercase;
transition: all 140ms ease;
}
.rw-route-swap:hover { color: var(--primary); border-color: var(--primary); background: color-mix(in srgb, var(--primary) 6%, var(--surface)); }
.rw-route-swap svg { color: currentColor; }
.rw-card[data-rw-route]:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.rw-route-icao {
display: flex; align-items: center; gap: 6px; flex-shrink: 0;
padding: 6px 10px; border-radius: 8px;
background: var(--surface); border: 1px solid var(--border);
font: 700 12px ui-monospace, Menlo, monospace; letter-spacing: 0.06em;
}
.rw-route-icao svg { color: var(--primary); }
.rw-route-body { flex: 1; min-width: 0; }
.rw-route-name { font: 600 13.5px var(--font-display); color: var(--text); margin-bottom: 4px; }
.rw-route-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font: 500 11.5px var(--font-body); color: var(--text-muted); }
.rw-dur { color: var(--text-muted); }
.rw-types { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.rw-aircraft-reg {
font: 700 14px var(--font-display); color: var(--primary);
padding: 8px 10px; border-radius: 8px;
background: linear-gradient(135deg, rgba(245,166,35,0.10), rgba(245,166,35,0.02));
border: 1px solid color-mix(in srgb, var(--primary) 28%, var(--border));
letter-spacing: 0.05em; flex-shrink: 0;
}
.rw-aircraft-body { flex: 1; min-width: 0; }
.rw-aircraft-name { font: 600 13.5px var(--font-display); color: var(--text); margin-bottom: 4px; }
.rw-aircraft-meta { display: flex; gap: 8px; align-items: center; font: 500 11.5px var(--font-body); color: var(--text-muted); }
.rw-aircraft-base { color: var(--text-dim); }
.rw-chip {
display: inline-block; padding: 2px 7px; border-radius: 999px;
background: rgba(255,255,255,0.06); border: 1px solid var(--border);
font: 600 10.5px ui-monospace, Menlo, monospace; color: var(--text-muted); letter-spacing: 0.04em;
}
.rw-chip-muted { color: var(--text-dim); }
.rw-empty {
padding: 28px 20px; text-align: center; border-radius: 10px;
background: var(--surface-raised); border: 1px dashed var(--border);
display: flex; flex-direction: column; align-items: center; gap: 10px;
color: var(--text-muted); font-size: 12.5px;
}
.rw-empty svg { width: 28px; height: 28px; color: var(--text-dim); opacity: 0.6; }
.rw-empty p { margin: 0; }
.rw-empty-warn { background: rgba(245,166,35,0.05); border-color: color-mix(in srgb, var(--primary) 30%, transparent); color: var(--primary); }
/* Date navigation */
.rw-day-nav {
display: flex; align-items: center; gap: 12px; justify-content: center;
padding: 8px 0;
}
.rw-day-btn {
width: 36px; height: 36px; border-radius: 50%;
display: grid; place-items: center;
background: var(--surface-raised); border: 1px solid var(--border);
color: var(--text-muted); cursor: pointer;
transition: all 140ms ease;
}
.rw-day-btn:hover { color: var(--text); border-color: var(--text-dim); }
.rw-day-btn svg { width: 16px; height: 16px; }
.rw-day-label {
font: 600 14px var(--font-display); color: var(--text);
letter-spacing: -0.005em; text-transform: capitalize;
min-width: 220px; text-align: center;
position: relative;
}
.rw-day-input {
position: absolute; opacity: 0; pointer-events: none;
/* Permettrait à un futur "click date label = open date picker", désactivé pour l'instant */
}
/* Timeline */
.rw-timeline-card {
background: var(--surface-raised); border: 1px solid var(--border);
border-radius: 12px; padding: 18px 18px 14px;
}
.rw-timeline-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.rw-timeline-title { font: 600 12px var(--font-display); color: var(--text); letter-spacing: 0.02em; }
.rw-timeline-legend { display: flex; gap: 12px; flex-wrap: wrap; font: 500 10.5px var(--font-body); color: var(--text-muted); }
.rw-legend { display: inline-flex; align-items: center; gap: 6px; letter-spacing: 0.04em; }
.rw-legend::before { content: ""; width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.rw-legend-busy::before { background: var(--danger); }
.rw-legend-mine::before { background: var(--primary); }
.rw-legend-buffer::before { background: repeating-linear-gradient(45deg, var(--primary), var(--primary) 3px, transparent 3px, transparent 6px); border: 1px solid color-mix(in srgb, var(--primary) 50%, transparent); }
.rw-timeline {
position: relative;
}
.rw-timeline-track {
position: relative; height: 56px;
background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
overflow: hidden;
}
.rw-block {
position: absolute; top: 0; bottom: 0; min-width: 4px;
display: flex; align-items: stretch;
border-radius: 4px; overflow: hidden;
}
.rw-block-busy {
background: rgba(224,82,82,0.18); border: 1px solid color-mix(in srgb, var(--danger) 55%, transparent);
cursor: help;
}
.rw-block-sel {
background: color-mix(in srgb, var(--primary) 22%, transparent);
border: 1.5px solid var(--primary);
z-index: 2;
}
.rw-block-flight { background: color-mix(in srgb, currentColor 25%, transparent); }
.rw-block-busy .rw-block-flight { background: rgba(224,82,82,0.35); }
.rw-block-sel .rw-block-flight { background: rgba(245,166,35,0.40); }
.rw-block-turn {
background: repeating-linear-gradient(45deg,
color-mix(in srgb, currentColor 30%, transparent),
color-mix(in srgb, currentColor 30%, transparent) 4px,
transparent 4px, transparent 8px);
}
.rw-block-busy .rw-block-turn { background: repeating-linear-gradient(45deg, rgba(224,82,82,0.45), rgba(224,82,82,0.45) 4px, transparent 4px, transparent 8px); }
.rw-block-sel .rw-block-turn { background: repeating-linear-gradient(45deg, var(--primary), var(--primary) 4px, transparent 4px, transparent 8px); opacity: 0.7; }
.rw-block-lbl {
position: absolute; left: 6px; top: 50%; transform: translateY(-50%);
font: 600 10.5px var(--font-body); color: var(--text);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
max-width: calc(100% - 12px);
pointer-events: none; letter-spacing: 0.02em;
}
.rw-block-busy .rw-block-lbl { color: color-mix(in srgb, var(--text) 92%, var(--danger)); }
.rw-block-sel .rw-block-lbl { color: var(--primary); font-weight: 700; }
.rw-timeline-hours {
position: relative; height: 16px; margin-top: 6px;
}
.rw-hour {
position: absolute; top: 0; transform: translateX(-50%);
font: 500 10px ui-monospace, Menlo, monospace; color: var(--text-dim); letter-spacing: 0.06em;
}
/* Time picker + previews — left col a son label AU-DESSUS (style "form input"),
right col les a INTÉGRÉS dans la card (style "data display"). On garde cette
distinction visuelle ; align-items: end fait que l'input à gauche s'aligne avec
le BAS des preview cells, et le label dépasse au-dessus. */
.rw-time-row {
display: grid; grid-template-columns: 220px 1fr; gap: 18px;
align-items: end;
}
@media (max-width: 720px) { .rw-time-row { grid-template-columns: 1fr; align-items: stretch; } }
.rw-time-pick { display: flex; flex-direction: column; gap: 8px; }
.rw-time-pick label {
font: 600 10px var(--font-body); letter-spacing: 0.12em;
text-transform: uppercase; color: var(--text-muted);
}
.rw-time-pick input {
width: 100%; box-sizing: border-box;
padding: 12px 14px; border-radius: 10px;
background: var(--surface-raised); border: 1px solid var(--border);
color: var(--text); font: 700 18px ui-monospace, Menlo, monospace; letter-spacing: 0.06em;
transition: border-color 140ms ease, box-shadow 140ms ease;
}
.rw-time-pick input:hover { border-color: var(--text-dim); }
.rw-time-pick input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
/* Cache l'icône horloge native (Webkit) — design plus net, déjà clair que c'est une heure */
.rw-time-pick input::-webkit-calendar-picker-indicator { opacity: 0.4; cursor: pointer; filter: invert(0.7); }
.rw-time-preview { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rw-time-cell {
padding: 12px 14px; border-radius: 10px;
background: var(--surface-raised); border: 1px solid var(--border);
}
.rw-time-cell-released { border-color: color-mix(in srgb, var(--primary) 25%, var(--border)); background: color-mix(in srgb, var(--primary) 4%, var(--surface-raised)); }
.rw-time-cell-l { font: 600 10px var(--font-body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); }
.rw-time-cell-v { font: 700 18px ui-monospace, Menlo, monospace; color: var(--text); margin-top: 6px; letter-spacing: 0.06em; }
.rw-time-cell-released .rw-time-cell-v { color: var(--primary); }
/* Statut OK / Conflit */
.rw-status {
display: flex; align-items: center; gap: 10px;
padding: 12px 14px; border-radius: 10px;
font: 500 13px var(--font-body); line-height: 1.4;
}
.rw-status svg { width: 18px; height: 18px; flex-shrink: 0; }
.rw-status-ok { background: rgba(76,175,125,0.10); color: var(--success); border: 1px solid color-mix(in srgb, var(--success) 30%, transparent); }
.rw-status-conflict { background: rgba(224,82,82,0.10); color: var(--danger); border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent); }
/* Conflit + suggestions */
.rw-conflict {
background: rgba(224,82,82,0.05);
border: 1px solid color-mix(in srgb, var(--danger) 25%, transparent);
border-radius: 12px; padding: 16px 18px;
display: flex; flex-direction: column; gap: 14px;
}
.rw-conflict-head { display: flex; gap: 10px; align-items: flex-start; }
.rw-conflict-head svg { width: 20px; height: 20px; color: var(--danger); flex-shrink: 0; margin-top: 1px; }
.rw-conflict-text { font: 500 13px var(--font-body); color: var(--text); line-height: 1.5; }
.rw-suggestions { display: grid; grid-template-columns: 1fr; gap: 8px; }
.rw-sug {
display: flex; align-items: flex-start; gap: 12px; text-align: left;
padding: 12px 14px; border-radius: 10px;
background: var(--surface-raised); border: 1px solid var(--border);
color: var(--text); cursor: pointer;
transition: all 140ms ease;
}
.rw-sug:hover { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 6%, var(--surface-raised)); transform: translateY(-1px); }
.rw-sug-ico { font-size: 18px; line-height: 1; padding-top: 2px; }
.rw-sug-body { display: flex; flex-direction: column; gap: 2px; }
.rw-sug-body strong { font: 600 13px var(--font-display); color: var(--text); }
.rw-sug-sub { font: 500 11.5px var(--font-body); color: var(--text-muted); line-height: 1.4; }
.rw-sug-empty { font: 500 12px var(--font-body); color: var(--text-muted); margin: 0; font-style: italic; }
/* Summary (étape 3) */
.rw-summary { padding: 0; }
.rw-sum-card {
background: linear-gradient(160deg, rgba(245,166,35,0.06), rgba(245,166,35,0.01));
border: 1px solid color-mix(in srgb, var(--primary) 22%, var(--border));
border-radius: 14px; padding: 22px 24px;
display: flex; flex-direction: column; gap: 14px;
}
.rw-sum-row { display: flex; align-items: center; gap: 14px; }
.rw-sum-hero { padding-bottom: 14px; border-bottom: 1px dashed var(--border); }
.rw-sum-reg {
font: 700 18px var(--font-display); color: var(--primary);
padding: 10px 14px; border-radius: 10px;
background: var(--surface); border: 1px solid color-mix(in srgb, var(--primary) 30%, var(--border));
letter-spacing: 0.05em;
}
.rw-sum-hero-text { flex: 1; min-width: 0; }
.rw-sum-name { font: 700 16px var(--font-display); color: var(--text); margin-bottom: 4px; }
.rw-sum-sub { font: 500 12px var(--font-body); color: var(--text-muted); }
.rw-sum-l { font: 600 11px var(--font-body); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); min-width: 90px; }
.rw-sum-v { font: 500 13.5px var(--font-display); color: var(--text); flex: 1; }
.rw-sum-times { gap: 10px; flex-wrap: wrap; padding: 14px 0; border-top: 1px dashed var(--border); border-bottom: 1px dashed var(--border); }
.rw-sum-time {
flex: 1; min-width: 100px;
padding: 10px 12px; border-radius: 10px;
background: var(--surface); border: 1px solid var(--border);
text-align: center;
}
.rw-sum-time-release { border-color: color-mix(in srgb, var(--primary) 30%, var(--border)); background: color-mix(in srgb, var(--primary) 5%, var(--surface)); }
.rw-sum-time-l { font: 600 10px var(--font-body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); }
.rw-sum-time-v { font: 700 18px ui-monospace, Menlo, monospace; color: var(--text); margin-top: 4px; letter-spacing: 0.04em; }
.rw-sum-time-release .rw-sum-time-v { color: var(--primary); }
.rw-sum-arrow { font: 700 20px var(--font-display); color: var(--primary); }
.rw-sum-foot { padding-top: 4px; }
.rw-sum-foot-l { font: 500 11.5px var(--font-body); color: var(--text-muted); }
/* Footer wizard */
.rw-footer {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
padding-top: 18px; border-top: 1px solid var(--border);
}
.rw-footer-right { display: flex; gap: 10px; }
@media (max-width: 720px) {
.rw-stepper { gap: 6px; }
.rw-step-lbl { display: none; }
.modal.modal-wizard { padding: 22px 18px; }
.rw-day-label { min-width: 140px; font-size: 12.5px; }
}
/* Chips types d'avions dans la modal route */
.rtf-types-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 0; }
.rtf-type-chip {
padding: 6px 12px; border-radius: 999px; cursor: pointer;
background: var(--surface-raised); border: 1px solid var(--border);
color: var(--text-muted);
font: 600 12px ui-monospace, Menlo, monospace; letter-spacing: 0.04em;
transition: all 140ms ease;
}
.rtf-type-chip:hover { color: var(--text); border-color: var(--text-dim); }
.rtf-type-chip.active {
background: var(--primary-soft); color: var(--primary);
border-color: color-mix(in srgb, var(--primary) 40%, transparent);
}
.rtf-types-empty { font-size: 12px; color: var(--text-dim); font-style: italic; }
/* Cards "Arrivée prévue" / "Avion libéré" dans la modal réservation */
.rf-times { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0 4px; }
.rf-time-card {
padding: 10px 12px; border-radius: 10px;
background: var(--surface-raised); border: 1px solid var(--border);
}
.rf-time-card.rf-time-released {
border-color: color-mix(in srgb, var(--primary) 25%, var(--border));
background: color-mix(in srgb, var(--primary) 4%, var(--surface-raised));
}
.rf-time-l { font: 600 10.5px var(--font-body); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }
.rf-time-v { font: 600 13px var(--font-display); color: var(--text); margin-top: 4px; text-transform: capitalize; }
/* Responsive — reservations / fleet */
@media (max-width: 720px) {
.rv-row { grid-template-columns: 90px 1fr; gap: 12px; }
.rv-actions { grid-column: 1 / -1; justify-content: flex-end; padding-top: 8px; border-top: 1px solid var(--border); }
.sec-item-aircraft, .sec-item-route { grid-template-columns: 1fr; }
.sec-aircraft-reg, .sec-route-icao { width: fit-content; }
.rf-times { grid-template-columns: 1fr; }
}
/* Responsive — Mes secteurs */
@media (max-width: 720px) {
.my-sectors-grid { grid-template-columns: 1fr; }
.ms-card { padding: 20px; }
.sector-header .sector-title #sec-name { font-size: 26px; }
.sec-item { grid-template-columns: 1fr; }
.sec-item-actions { justify-content: flex-end; }
}
/* ============================================================
MOBILE — refonte complète ≤ 767px (et ajustements 480px)
============================================================ */
@media (max-width: 767px) {
/* Layout général */
.app { grid-template-columns: 1fr; min-height: 100vh; }
.sidebar { display: none; }
.mobile-nav, .mobile-top { display: flex; }
.main { padding: 16px 14px 96px; grid-column: 1; }
/* Mobile top — plus lisible, hauteur cohérente */
.mobile-top { padding: 12px 16px; }
.mobile-top img { height: 22px; }
.mobile-top .logout { background: transparent; border: 1px solid var(--border); border-radius: 10px; color: var(--text); padding: 8px 10px !important; }
/* Mobile nav — 6 boutons admin = grid auto-flow, sinon ça déborde */
.mobile-nav { padding-top: 6px; }
/* Flex display déjà appliqué — pas besoin de redéfinir grid-template-columns */
.mobile-nav button { padding: 6px 2px; gap: 2px; min-width: 0; }
.mobile-nav svg { width: 18px; height: 18px; }
.mobile-nav .lab { font-size: 9px; letter-spacing: 0; white-space: nowrap; overflow: hidden; max-width: 100%; text-overflow: ellipsis; }
/* Greet / titres */
.greet { flex-direction: column; align-items: flex-start; gap: 12px; }
.greet h1 { font-size: 22px; line-height: 1.2; }
.greet .sub { font-size: 13px; }
.greet .clock { width: 100%; padding: 12px 14px; }
.greet .clock .t { font-size: 22px; }
.greet .clock .d { font-size: 11px; }
.page-header { flex-direction: column; align-items: flex-start; gap: 12px; }
.page-header h1 { font-size: 24px; }
.page-header .crumb { font-size: 11px; }
.page-header .actions { width: 100%; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
.page-header .actions .pill { flex-shrink: 0; }
.section-title { font-size: 14px; }
/* Annonce vedette */
.featured-ann { padding: 20px; }
.featured-ann .body { flex-direction: column; gap: 16px; }
.featured-ann h3 { font-size: 22px; }
.featured-ann .col { width: 100%; }
.featured-ann .read { align-self: flex-start; }
/* Home — pilot stats + member card en colonne */
.home-2col { grid-template-columns: 1fr; gap: 16px; }
.upcoming-panel { padding: 20px 22px; min-height: 200px; }
.upcoming-panel .up-head h4 { font-size: 12px; }
.member-card { padding: 18px 20px 16px; min-height: 220px; }
.member-card .mc-identity .av { width: 52px; height: 52px; font-size: 18px; }
.member-card .mc-identity .nm { font-size: 16px; }
.member-card .mc-stats { gap: 10px; }
.member-card .mc-stats .v { font-size: 16px; }
.member-card .mc-stats .k { font-size: 9px; }
/* Accès rapides */
.quick-grid { grid-template-columns: 1fr; gap: 12px; }
.quick { padding: 18px; }
/* Annonces */
.ann { padding: 18px; }
.ann h3 { font-size: 17px; }
.ann .ann-meta { font-size: 11px; }
/* Livrées — full width */
.liv-grid { grid-template-columns: 1fr; gap: 14px; }
.liv-card .body { padding: 16px; }
.liv-card h4 { font-size: 16px; }
.liv-card .img { aspect-ratio: 16/9; }
/* Profil */
.profile-head {
flex-direction: column; align-items: center; text-align: center;
padding: 20px 16px; gap: 14px;
}
.profile-head .av, .profile-head .av-btn { width: 80px; height: 80px; font-size: 26px; }
.profile-head h2 { font-size: 22px; }
.profile-head .badges, .profile-head .sector-row { justify-content: center; }
.profile-stats { grid-template-columns: 1fr 1fr; gap: 8px; padding: 14px; }
.profile-stats .stat:nth-child(3) { grid-column: 1 / -1; }
.profile-stats .v { font-size: 22px; }
.profile-stats .l { font-size: 10px; }
.progression { padding: 18px 16px; }
.progression .bar-meta { flex-direction: column; align-items: flex-start; gap: 4px; font-size: 11px; }
.grade-timeline .grade-row { padding: 12px; gap: 12px; flex-wrap: wrap; }
.grade-timeline .ord { font-size: 14px; min-width: 28px; }
.grade-timeline .nm, .grade-timeline .nm-only { font-size: 14px; }
.grade-timeline .desc { font-size: 12px; line-height: 1.45; flex-basis: 100%; }
.grade-timeline .threshold { font-size: 11px; align-self: flex-start; }
.account-section { padding: 18px 16px; }
.account-section h3 { font-size: 16px; }
.toggle-row { gap: 14px; }
.toggle-row .t { font-size: 14px; }
.toggle-row .s { font-size: 12px; }
/* Équipage */
.crew-grid { grid-template-columns: 1fr; gap: 12px; }
.pilot-card { padding: 18px 16px; }
.pilot-card .av { width: 44px; height: 44px; font-size: 14px; }
.pilot-card .bg { font-size: 28px; right: -12px; top: -12px; }
.pilot-card .nm { font-size: 15px; }
.pilot-card .stats { font-size: 12px; }
/* Organisation */
.sector-grid { grid-template-columns: 1fr; gap: 14px; }
.sector-card { padding: 20px 18px; }
.sector-card .ico { font-size: 28px; }
.sector-card h4 { font-size: 18px; }
.sector-card .duties li { font-size: 12px; line-height: 1.5; }
.crew-by-sector { grid-template-columns: 1fr; gap: 14px; }
.cs-group { padding: 16px 18px 12px; }
.cs-head h5 { font-size: 13px; }
/* Admin — tabs scrollables + tables horizontales */
.admin-tabs { overflow-x: auto; flex-wrap: nowrap; gap: 4px; padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
.admin-tabs .admin-tab { flex-shrink: 0; padding: 10px 14px; font-size: 13px; }
.admin-toolbar { flex-direction: column; align-items: stretch; gap: 10px; }
.admin-toolbar .search { width: 100%; }
.admin-toolbar .btn { width: 100%; justify-content: center; }
.table { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 12px; }
.table table { min-width: 640px; }
.table th, .table td { padding: 12px 10px; font-size: 13px; }
.row-av { gap: 8px; }
.row-av .av { width: 28px; height: 28px; font-size: 11px; }
.post { flex-direction: column; align-items: stretch; gap: 12px; padding: 16px; }
.post .pa { flex-direction: row; }
.post .pa .btn { flex: 1; }
/* Modales — responsive sur petits écrans */
.modal-bg { padding: 14px; align-items: flex-start; padding-top: 24px; }
.modal { width: 100%; max-width: 100%; max-height: calc(100vh - 48px); padding: 22px 18px; overflow-y: auto; }
.modal.wide { max-width: 100%; }
.modal h3 { font-size: 18px; }
.modal .meta { font-size: 12px; }
.modal .close { top: 12px; right: 12px; }
.modal-actions { flex-direction: column-reverse; align-items: stretch; gap: 8px; }
.modal-actions .btn { width: 100%; justify-content: center; }
/* Profil mini (pilot-modal) */
.prof-mini-head { flex-direction: column; align-items: center; text-align: center; gap: 12px; }
.prof-mini-head .av { width: 64px; height: 64px; font-size: 22px; }
.prof-mini-stats { grid-template-columns: 1fr 1fr; gap: 8px; }
.prof-mini-stats .s:nth-child(3) { grid-column: 1 / -1; }
.pm-admin-actions { flex-direction: column-reverse; }
.pm-admin-actions .btn { width: 100%; justify-content: center; }
/* Avatar editor */
.av-preview { width: 100px; height: 100px; font-size: 30px; }
.av-actions { flex-direction: column; gap: 8px; }
.av-actions .btn { width: 100%; justify-content: center; }
.avatar-form-actions { flex-direction: column-reverse; gap: 8px; }
.avatar-form-actions .btn { width: 100%; justify-content: center; }
}
/* Très petits écrans — densité encore réduite */
@media (max-width: 380px) {
.main { padding: 14px 12px 92px; }
.mobile-nav .lab { font-size: 8.5px; }
.featured-ann h3 { font-size: 20px; }
.greet h1 { font-size: 20px; }
.page-header h1 { font-size: 22px; }
.profile-head .av, .profile-head .av-btn { width: 72px; height: 72px; font-size: 24px; }
.profile-stats .v { font-size: 20px; }
.member-card { padding: 16px 16px 14px; }
}