/* ===== GroupShare — thème aux couleurs Infrarch (www.infrarch.fr) ===== */

:root {
    --navy-900: #0a0c0e;
    --navy-800: #15181b;
    --navy-700: #1e2226;
    --navy-600: #2b3036;
    --blue-400: #38a9dd; /* bleu Infrarch éclairci (fonds sombres) */
    --blue-500: #007ebd; /* bleu Infrarch officiel */
    --grey-brand: #5f5f5f;
    --text: #1c1f22;
    --text-muted: #5f6a71;
    --bg: #ffffff;
    --bg-alt: #f4f5f6;
    --border: #e2e4e6;
    --radius: 10px;
    --shadow: 0 6px 24px rgba(10, 12, 14, 0.08);
    --maxw: 1120px;
}

/* ------------------------------------------------------------------ Base */
* { box-sizing: border-box; }
body {
    margin: 0;
    font-family: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
    font-size: 15px;
    color: var(--text);
    background: var(--bg-alt);
    line-height: 1.6;
}
a { color: var(--blue-500); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 1.5rem; line-height: 1.2; }
h2 { font-size: 1.15rem; margin-top: 0; line-height: 1.2; }
h3 { font-size: 1rem; }
.muted { color: var(--text-muted); }
.spacer { flex: 1; }

/* ------------------------------------------------------------ Navigation */
.topnav {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(10, 12, 14, 0.92);
    backdrop-filter: blur(8px);
    color: #fff;
}
.nav-inner {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    align-items: center;
    gap: 22px;
    min-height: 56px;
    flex-wrap: wrap;
}
.topnav .brand { font-weight: 700; font-size: 1.05rem; letter-spacing: 0.02em; display: inline-flex; align-items: center; gap: 10px; }
.brand-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    background: #fff;
    border-radius: 9px;
}
.brand-logo { height: 26px; width: auto; display: block; }
.login-logo { height: 72px; width: auto; margin-bottom: 6px; }
.topnav a { color: rgba(255, 255, 255, 0.85); font-weight: 500; }
.topnav a:hover { color: var(--blue-400); text-decoration: none; }
.topnav .username { color: rgba(255, 255, 255, 0.6); }

/* ------------------------------------------------------------- Structure */
.container {
    max-width: var(--maxw);
    margin: 28px auto;
    padding: 0 24px;
}
.card {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 22px;
    margin-bottom: 22px;
}
.card.narrow { max-width: 480px; }
.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.card-header h2 { margin: 0; }
.admin-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
}
@media (max-width: 800px) { .admin-grid { grid-template-columns: 1fr; } }

/* ----------------------------------------------------------------- Onglets */
.tabs { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.tab {
    padding: 9px 20px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--border);
    color: var(--text);
    font-weight: 600;
}
.tab:hover { text-decoration: none; border-color: var(--blue-400); color: var(--blue-500); }
.tab.active { background: var(--blue-500); border-color: var(--blue-500); color: #fff; }

/* ---------------------------------------------------------------- Tableaux */
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--bg-alt); }
th { color: var(--text-muted); font-weight: 600; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.03em; }
.file-table td { vertical-align: middle; }
.col-actions { text-align: right; white-space: nowrap; }
.col-actions .inline-form { margin-left: 6px; }

/* -------------------------------------------------------------- Formulaires */
label { display: block; margin: 10px 0; font-weight: 600; }
label.check { font-weight: 400; margin: 4px 0; }
input[type="text"], input[type="password"], input[type="email"] {
    display: block;
    width: 100%;
    margin-top: 4px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 15px;
    font-family: inherit;
    background: #fff;
    color: var(--text);
}
label.check input { width: auto; display: inline; margin-right: 6px; }
input:focus { outline: 2px solid var(--blue-500); outline-offset: 0; border-color: var(--blue-500); }
input[type="checkbox"] { accent-color: var(--blue-500); }
fieldset { border: 1px solid var(--border); border-radius: 8px; margin: 12px 0; padding: 8px 12px; }
legend { font-size: 0.85rem; color: var(--text-muted); padding: 0 6px; }
.inline-form { display: inline; }
.row-form { display: flex; gap: 8px; align-items: center; margin: 10px 0; }
.row-form input[type="text"], .row-form input[type="password"] { margin: 0; width: auto; flex: 1; }
.new-sheet-form input[type="text"] { display: inline-block; width: 220px; margin: 0; }
.actions-bar { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }

/* Deux fonctions distinctes cohabitent dans cette barre : envoyer des fichiers,
   et créer un tableur. Juxtaposées sans marque de séparation, le champ de nom
   du tableur semblait appartenir au bouton d'envoi et les trois éléments se
   lisaient comme une seule commande. D'où un séparateur vertical (même idiome
   que .tool-sep de la barre du tableur) et un regroupement du champ avec son
   bouton dans une bordure commune. */
/* Titre et action principale solidaires, à gauche : l'envoi de fichiers est ce
   qu'on vient faire sur cette page, il doit être immédiatement sous la main.
   La création de tableur reste à l'autre bout de la barre (card-header est en
   space-between), et c'est cet écart qui sépare les deux fonctions — un trait
   vertical y serait redondant. */
.header-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.header-left h2 { margin: 0; }
.new-sheet-form .field-group {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 3px 3px 8px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--bg-alt);
    transition: border-color 0.15s;
}
.new-sheet-form .field-group:focus-within { border-color: var(--blue-400); }
.new-sheet-form .field-group input[type="text"] {
    width: 200px;
    margin: 0;
    padding: 5px 6px;
    border: none;
    background: transparent;
    font-size: 14px;
}
.new-sheet-form .field-group input[type="text"]:focus { outline: none; box-shadow: none; }

/* En dessous de 720 px l'en-tête passe sur plusieurs lignes : le bloc de
   création occupe alors toute la largeur plutôt que de rester coincé à droite. */
@media (max-width: 720px) {
    .actions-bar { width: 100%; }
    .new-sheet-form, .new-sheet-form .field-group { display: flex; width: 100%; }
    .new-sheet-form .field-group input[type="text"] { width: auto; flex: 1; }
}

/* ----------------------------------------------------------------- Boutons */
.btn {
    display: inline-block;
    padding: 9px 22px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: #fff;
    color: var(--text);
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.btn:hover { border-color: var(--blue-400); color: var(--blue-500); background: #fff; text-decoration: none; }
.btn-primary { background: var(--blue-500); border-color: var(--blue-500); color: #fff; }
.btn-primary:hover { background: var(--blue-400); border-color: var(--blue-400); color: #fff; }
.btn-danger { background: #fff; border-color: #e0b4b4; color: #b03030; }
.btn-danger:hover { background: #fdf1f1; border-color: #b03030; color: #b03030; }
.btn-ghost { background: transparent; border-color: rgba(255, 255, 255, 0.4); color: #fff; }
.btn-ghost:hover { background: rgba(255, 255, 255, 0.08); border-color: #fff; color: #fff; }
.btn-small { padding: 5px 14px; font-size: 13px; }
.btn-block { width: 100%; margin-top: 12px; }
.file-label { position: relative; overflow: hidden; }

/* ------------------------------------------------------------------ Divers */
.badge {
    display: inline-block;
    padding: 1px 10px;
    border-radius: 999px;
    background: rgba(0, 126, 189, 0.1);
    color: var(--blue-500);
    font-size: 0.75rem;
    font-weight: 600;
    margin-left: 6px;
}
.badge-muted { background: var(--bg-alt); color: var(--text-muted); }
.flash {
    padding: 11px 16px;
    border-radius: var(--radius);
    margin-bottom: 16px;
    font-weight: 500;
}
.flash-ok { background: #e5f6ec; color: #156038; border: 1px solid #b7e4c8; }
.flash-err { background: #fdf1f1; color: #932020; border: 1px solid #f2c4c4; }

/* --------------------------------------------------------------- Connexion */
.login-box {
    max-width: 400px;
    margin: 8vh auto 0;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 32px;
}
.login-box h1 { text-align: center; margin-top: 0; }
.login-back { text-align: center; margin: 16px 0 0; font-size: 0.9rem; }

/* --------------------------------------------------------------- Comptes admin */
.user-row { border-bottom: 1px solid var(--bg-alt); padding: 6px 0; }
.user-row summary { cursor: pointer; padding: 6px 0; }
.user-detail {
    padding: 12px 16px;
    margin: 6px 0 10px;
    background: var(--bg-alt);
    border-radius: 8px;
}

/* ----------------------------------------------------------------- Tableur */
.sheet-toolbar {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.sheet-title { margin: 0; font-size: 1.1rem; }
.sync-status {
    font-size: 0.85rem;
    font-weight: 600;
    padding: 3px 12px;
    border-radius: 999px;
    background: var(--bg-alt);
    color: var(--text-muted);
}
.sync-ok { background: #e5f6ec; color: #156038; }
.sync-pending { background: #fff4dd; color: #8a5b00; }
.sync-err { background: #fdf1f1; color: #932020; }
#sheet-container {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 10px;
    overflow: auto;
}

/* ------------------------------------------------- Page d'accueil publique */
.home { max-width: 900px; margin: 0 auto; }
.home-hero { text-align: center; padding: 24px 0 8px; }
.home-logo { height: 84px; width: auto; }
.home-hero h1 {
    margin: 14px 0 6px;
    font-size: 2rem;
    letter-spacing: 0.04em;
    color: var(--navy-900);
}
.home-hero h1 small {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--blue-500);
    margin-top: 6px;
}
.home-lead {
    max-width: 640px;
    margin: 18px auto 0;
    font-size: 1.05rem;
    color: var(--text);
}
.home-actions { margin: 26px 0 10px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.btn-lg { padding: 12px 26px; font-size: 15px; }
.home-note { max-width: 560px; margin: 0 auto; font-size: 0.9rem; }

.home-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin: 34px 0;
}
@media (max-width: 780px) { .home-grid { grid-template-columns: 1fr; } }
.home-card {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 20px;
}
.home-card h2 { font-size: 1rem; color: var(--blue-500); margin-bottom: 8px; }
.home-card p { margin: 0; font-size: 0.94rem; }

.home-contact {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;
    text-align: center;
}
.home-contact h2 { font-size: 1rem; }
.home-footer { text-align: center; padding: 24px 0; font-size: 0.9rem; }
.home-back { margin-bottom: 12px; }

/* ------------------------------------------------------- Mentions légales */
.legal {
    max-width: 760px;
    margin: 0 auto;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 32px;
}
.legal h1 { margin-top: 0; }
.legal h2 { margin: 26px 0 8px; font-size: 1rem; color: var(--blue-500); }
.legal p { margin: 0 0 10px; }
.legal .todo {
    background: #fff4dd;
    color: #8a5b00;
    padding: 1px 8px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.85rem;
}

/* Barre de mise en forme du tableur */
.format-toolbar {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 6px 10px;
    margin-bottom: 10px;
}
.btn-tool {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 32px;
    padding: 0 8px;
    border: 1px solid transparent;
    border-radius: 7px;
    background: transparent;
    color: var(--text);
    font-size: 15px;
    font-family: inherit;
    cursor: pointer;
    line-height: 1.1;
}
.btn-tool:hover { background: var(--bg-alt); border-color: var(--border); }
.btn-tool .tool-a { font-weight: 700; }
.tool-swatch {
    display: block;
    width: 18px;
    height: 4px;
    border-radius: 2px;
    background: #d43a3a;
    margin-top: 1px;
}
#swatch-bg { background: #fff3b0; }
.tool-sep { width: 1px; height: 22px; background: var(--border); margin: 0 6px; }
.tool-select {
    height: 32px;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: #fff;
    color: var(--text);
    font-family: inherit;
    font-size: 13px;
    padding: 0 6px;
}
.tool-wide { font-size: 13px; }
.tool-hint { font-size: 0.78rem; }

/* Accents Infrarch dans le tableur (sélection jexcel) */
.jexcel > tbody > tr > td.highlight-selected { background-color: rgba(0, 126, 189, 0.08) !important; }
.jexcel_cursor { border-color: var(--blue-500); }