/* ============================================================
   css/thumbs.css — thumbs.infiniclick.fr
   DA : bleu #1a3a6b | orange #e8621a | crème #f7f5f2
   Mise à jour : 04/2026 (structure v6)
   ============================================================ */

:root {
    --bleu:       #1a3a6b;
    --bleu-clair: #2a5298;
    --bleu-pale:  #e8eef8;
    --orange:     #e8621a;
    --orange-pale:#fdf0e8;
    --creme:      #f7f5f2;
    --blanc:      #ffffff;
    --gris-100:   #f0eeeb;
    --gris-200:   #dddbd8;
    --gris-400:   #9b9894;
    --gris-700:   #4a4845;
    --noir:       #1a1917;

    --sidebar-w:  240px;
    --radius:     8px;
    --radius-sm:  6px;
    --radius-lg:  14px;
    --shadow:     0 2px 12px rgba(26,58,107,.09);
    --shadow-lg:  0 8px 32px rgba(26,58,107,.14);

    /* Alias v6 utilisés par les blocs formulaire du modèle */
    --accent:        var(--bleu);
    --accent-light:  var(--bleu-pale);
    --accent-mid:    #b8c8e8;
    --bg:            var(--creme);
    --bg-white:      var(--blanc);
    --border:        var(--gris-200);
    --text:          var(--noir);
    --text-2:        var(--gris-700);
    --text-3:        var(--gris-400);
    --mono:          'Inter', monospace;

    --font-display: 'Inter', sans-serif;
    --font-mono:    'Inter', sans-serif;
    --font-body:    'Inter', sans-serif;
    --font:         'Inter', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; }
body {
    font-family: var(--font-body);
    background: var(--creme);
    color: var(--noir);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}
a { color: var(--bleu); text-decoration: none; }
a:hover { color: var(--orange); }
img { max-width: 100%; display: block; }
code, pre { font-family: var(--font-mono); }

/* ============================================================
   LOGIN
   ============================================================ */

.login-bg { position: fixed; inset: 0; z-index: 0; }
.login-bg .grain { position: absolute; inset: 0; opacity: .04; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.login-bg .bg-line { position: absolute; bottom: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--bleu-clair), var(--orange)); }
.login-wrap { position: relative; z-index: 1; background: var(--blanc); border-radius: var(--radius-lg); padding: 2.5rem 2rem; width: 100%; max-width: 400px; box-shadow: var(--shadow-lg); }
.login-brand { text-align: center; margin-bottom: 2rem; }
.logo-labo { font-family: var(--font-display); font-weight: 800; font-size: 2rem; color: var(--bleu); letter-spacing: -1px; }
.logo-labo span { color: var(--orange); }
.logo-sub { display: block; font-family: var(--font-mono); font-size: .7rem; color: var(--gris-400); letter-spacing: 2px; text-transform: uppercase; }
.login-tagline { font-size: .85rem; color: var(--gris-400); margin-top: .5rem; }
.login-form { display: flex; flex-direction: column; gap: 1rem; }

/* ============================================================
   LAYOUT — grille CSS
   ============================================================ */

#content  { display: flex; min-height: 100vh; }
#contenu  { display: flex; flex: 1; }

/* Sidebar */
#left {
    width: var(--sidebar-w);
    flex-shrink: 0;
    background: var(--bleu);
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Colonne droite */
#right {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-width: 0;
    background: var(--creme);
}

/* Header */
#header {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: .75rem;
    height: 44px;
    width: 100%;
    background: #e0dcd7;
    padding: 0 1.5rem;
    border-bottom: 1px solid var(--gris-200);
    position: sticky;
    top: 0;
    z-index: 50;
    flex-shrink: 0;
}

/* Contenu */
#page { flex: 1; padding: 2rem 2.5rem; }

/* Pictos header */
.picto-btn { display: flex; align-items: center; justify-content: center; color: var(--bleu); text-decoration: none; transition: color .15s; }
.picto-btn:hover { color: var(--orange); }
.picto-wrap { position: relative; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; }
.picto-wrap > svg { width: 22px; height: 22px; }
.picto-badge { position: absolute; top: -5px; right: -7px; min-width: 15px; height: 15px; background: var(--orange); color: var(--blanc); border-radius: 20px; font-size: .58rem; font-weight: 800; display: flex; align-items: center; justify-content: center; padding: 0 3px; line-height: 1; }
.picto-badge-ok { background: #16a34a; top: -4px; right: -5px; min-width: 14px; height: 14px; padding: 2px; }
.picto-badge-ok > svg { width: 8px !important; height: 8px !important; }
.picto-badge-panier { background: #16a34a; }

/* Sidebar logo */
.sidebar-logo { padding: 1.5rem 1.25rem 1rem; border-bottom: 1px solid rgba(255,255,255,.08); margin-bottom: .5rem; }
.sidebar .logo-labo { font-size: 1.4rem; color: var(--blanc); }
.sidebar .logo-labo span { color: var(--orange); }
.sidebar .logo-sub { color: rgba(255,255,255,.4); }
.sidebar-nav { flex: 1; padding: .5rem 0; overflow-y: auto; }

/* Nav items */
.nav-item {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .65rem 1.25rem;
    color: rgba(255,255,255,.65);
    font-size: .875rem;
    font-weight: 600;
    transition: background .15s, color .15s;
    border-left: 3px solid transparent;
}
.nav-item:hover { background: rgba(255,255,255,.07); color: var(--blanc); }
.nav-item.active { background: rgba(255,255,255,.1); color: var(--blanc); border-left-color: var(--orange); }
.nav-icon { width: 16px; height: 16px; display: inline-flex; }

/* Sidebar footer */
.sidebar-footer { padding: 1rem 1.25rem; border-top: 1px solid rgba(255,255,255,.08); display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.user-info { display: flex; flex-direction: column; gap: .1rem; overflow: hidden; }
.user-name { color: var(--blanc); font-size: .85rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-role { font-family: var(--font-mono); font-size: .65rem; letter-spacing: 1px; text-transform: uppercase; }
.priv-2 { color: var(--orange); }
.priv-1 { color: rgba(255,255,255,.5); }
.btn-logout { color: rgba(255,255,255,.5); padding: .4rem; border-radius: var(--radius); transition: color .15s, background .15s; flex-shrink: 0; }
.btn-logout:hover { color: var(--blanc); background: rgba(255,255,255,.1); }

/* ============================================================
   PAGE HEADER
   ============================================================ */

.page-header { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
.page-title { font-size: 22px; font-weight: 700; letter-spacing: -.5px; color: var(--bleu); }
.page-subtitle { font-size: .875rem; color: var(--gris-400); margin-top: .25rem; }

/* ============================================================
   BOUTONS
   ============================================================ */

.btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 15px;
    border-radius: var(--radius-sm);
    font-family: var(--font);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all .18s;
    white-space: nowrap;
    text-decoration: none;
}
.btn-primary  { background: var(--orange); color: var(--blanc); border-color: var(--orange); }
.btn-primary:hover { background: #cf5516; border-color: #cf5516; color: var(--blanc); }
.btn-outline  { color: var(--gris-700); border-color: var(--gris-200); background: transparent; }
.btn-outline:hover { border-color: var(--bleu); color: var(--bleu); background: var(--bleu-pale); }
.btn-danger   { background: #FEF2F2; color: #dc3545; border-color: #FECACA; }
.btn-danger:hover { background: #FEE2E2; border-color: #FCA5A5; }
.btn-sm { height: 30px; padding: 0 11px; font-size: 12px; }
.btn-full { width: 100%; justify-content: center; }
.btn-ghost { background: transparent; color: var(--bleu); border-color: var(--gris-200); }
.btn-ghost:hover { color: var(--blanc); background: var(--bleu); border-color: var(--bleu); }
.btn-conn { width: 100%; padding: .7rem; background: var(--orange); color: var(--blanc); border: none; border-radius: var(--radius); font-weight: 700; font-size: .875rem; cursor: pointer; margin-top: 1.25rem; transition: background .15s; font-family: var(--font-body); }
.btn-conn:hover { background: #cf5516; }
.btn:disabled, button:disabled { opacity:.45; cursor:not-allowed; pointer-events:none; }

/* ============================================================
   ALERTES
   ============================================================ */

.alert { padding: .85rem 1rem; border-radius: var(--radius); font-size: .875rem; margin-bottom: 1.25rem; font-weight: 600; }
.alert-success { background: #d4edda; color: #155724; border-left: 1px solid #28a745; }
.alert-error   { background: #f8d7da; color: #721c24; border-left: 1px solid #dc3545; }
.alert-warn    { background: #fff3cd; color: #856404; border-left: 1px solid #ffc107; }
.alert-info    { background: var(--bleu-pale); color: var(--bleu); border-left: 1px solid var(--bleu); }

/* Toast */
.toast { position: fixed; top: 1.5rem; left: 50%; transform: translateX(-50%) translateY(-120%); width: 500px; max-width: calc(100vw - 2rem); padding: .9rem 1.25rem; border-radius: var(--radius); font-size: .875rem; font-weight: 600; box-shadow: var(--shadow-lg); z-index: 9999; opacity: 0; transition: transform .3s ease, opacity .3s ease; text-align: center; }
.toast.toast-visible { transform: translateX(-50%) translateY(0); opacity: 1; }
.toast.toast-error   { background: #f8d7da; color: #721c24; border: 1px solid #dc3545; }
.toast.toast-success { background: #d4edda; color: #155724; border: 1px solid #28a745; }
.toast.toast-warn    { background: #fff3cd; color: #856404; border: 1px solid #ffc107; }

/* ============================================================
   FORMULAIRES (structure modèle v6)
   ============================================================ */

.form-card {
    border: 1px solid var(--gris-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    background: var(--blanc);
    padding: 24px 28px;
    margin-bottom: 20px;
}

.form-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 18px;
}
.form-row:last-child { margin-bottom: 0; }

.form-row label {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--gris-700);
}

input.inp,
select.sel,
textarea.ta {
    width: 100%;
    height: 38px;
    padding: 0 12px;
    border: 1px solid var(--gris-200);
    border-radius: var(--radius-sm);
    background: var(--creme);
    font-family: var(--font);
    font-size: 14px;
    color: var(--noir);
    outline: none;
    transition: border-color .2s;
    appearance: none;
    -webkit-appearance: none;
}
textarea.ta { height: auto; min-height: 120px; padding: 10px 12px; resize: vertical; line-height: 1.6; }
input.inp:focus,
select.sel:focus,
textarea.ta:focus { border-color: var(--bleu-clair); }
input.inp::placeholder,
textarea.ta::placeholder { color: var(--gris-400); }

select.sel {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%239b9894' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-color: var(--creme);
    padding-right: 28px;
    cursor: pointer;
}

/* Pied de formulaire */
.form-footer {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--gris-200);
    flex-wrap: wrap;
}

/* Utilitaires texte */
.text-muted { color: var(--gris-400); }
.text-sm { font-size: 12px; }

/* ============================================================
   INPUT AVEC ICÔNE (inp-icon-wrap — modèle v6)
   ============================================================ */

.inp-icon-wrap {
    position: relative;
    display: flex;
    align-items: stretch;
}
.inp-icon-wrap .inp-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    flex-shrink: 0;
    background: var(--bleu);
    color: #fff;
    border-radius: var(--radius-sm) 0 0 var(--radius-sm);
    border: 1px solid var(--bleu);
    border-right: none;
    pointer-events: none;
}
.inp-icon-wrap input.inp {
    border-left: none;
    padding-left: 12px;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.inp-with-eye {
    border-radius: 0 !important;
    padding-right: 12px !important;
}
.inp-icon-wrap input.inp:focus {
    border-color: var(--bleu-clair);
    box-shadow: none;
}

/* Anti-autofill Chrome */
.inp-icon-wrap input.inp:-webkit-autofill,
.inp-icon-wrap input.inp:-webkit-autofill:hover,
.inp-icon-wrap input.inp:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px var(--creme) inset !important;
    box-shadow: 0 0 0 1000px var(--creme) inset !important;
    -webkit-text-fill-color: var(--noir) !important;
}

/* Bouton œil */
.inp-eye {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    flex-shrink: 0;
    background: var(--bleu);
    color: #fff;
    border: 1px solid var(--bleu);
    border-left: none;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    cursor: pointer;
    transition: background .15s;
    padding: 0;
}
.inp-eye:hover  { background: var(--bleu-clair); border-color: var(--bleu-clair); }
.inp-eye:focus  { outline: none; }

/* ============================================================
   FORCE MOT DE PASSE
   ============================================================ */

.pw-suggestion:hover {
    border-color: var(--bleu-clair) !important;
    background: var(--bleu-pale) !important;
    transition: background .2s, border-color .2s;
}

.pw-cr { display: flex; align-items: center; gap: 8px; font-size: .8rem; color: var(--gris-400); transition: color .2s; }
.pw-cr-dot { width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--gris-200); flex-shrink: 0; display: flex; align-items: center; justify-content: center; transition: background .2s, border-color .2s; }
.pw-cr.pw-cr-ok { color: var(--gris-700); }
.pw-cr.pw-cr-ok .pw-cr-dot { background: #10B981; border-color: #10B981; }
.pw-cr.pw-cr-ok .pw-cr-dot::after { content: ''; display: block; width: 5px; height: 3px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg) translate(1px,-1px); }

/* ============================================================
   TABLEAUX
   ============================================================ */

.table-wrap { overflow-x: auto; border-radius: var(--radius-lg); box-shadow: var(--shadow); background: var(--blanc); margin-bottom: 1.5rem; }
.table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.table thead { background: var(--bleu); color: var(--blanc); }
.table th { padding: .75rem 1rem; text-align: left; font-weight: 700; font-size: .8rem; letter-spacing: .3px; text-transform: uppercase; }
.table td { padding: .7rem 1rem; border-bottom: 1px solid var(--gris-100); vertical-align: middle; }
.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr:hover { background: var(--creme); }
.row-inactive td { opacity: .5; }
.table .actions { display: flex; gap: .4rem; }
.col-montant, .table th.col-montant, .table td.col-montant { text-align: right; }
.col-centre, .table th.col-centre, .table td.col-centre { text-align: center; }

/* ============================================================
   BADGES / PILLS
   ============================================================ */

.badge { display: inline-block; padding: .2rem .6rem; border-radius: 20px; font-family: var(--font-mono); font-size: .7rem; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; }
.badge-ok    { background: #d4edda; color: #155724; }
.badge-off   { background: var(--gris-100); color: var(--gris-400); }
.badge-error { background: #f8d7da; color: #721c24; }
.badge-warn  { background: #fff3cd; color: #856404; }
.badge-priv2 { background: var(--bleu); color: var(--blanc); }
.badge-priv1 { background: var(--gris-100); color: var(--gris-700); }

/* ============================================================
   BLOCS / STATS / QUICK LINKS
   ============================================================ */

.bloc { background: var(--blanc); border-radius: var(--radius-lg); padding: 1.5rem; box-shadow: var(--shadow); margin-bottom: 1.5rem; display: flex; flex-direction: column; gap: 1.1rem; }
.bloc-title { font-weight: 800; font-size: .9rem; color: var(--bleu); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 1rem; padding-bottom: .5rem; border-bottom: 2px solid var(--gris-100); }

.stats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 1rem; margin-bottom: 2rem; }
.stat-card { background: var(--blanc); border-radius: var(--radius-lg); padding: 1.25rem 1rem; box-shadow: var(--shadow); border-top: 4px solid var(--bleu-pale); text-align: center; }
.stat-card.stat-alert { border-top-color: #dc3545; }
.stat-card.stat-warn  { border-top-color: #ffc107; }
.stat-value { font-family: var(--font-display); font-weight: 800; font-size: 2rem; color: var(--bleu); line-height: 1; margin-bottom: .25rem; }
.stat-label { font-size: .8rem; color: var(--gris-400); font-weight: 600; }

.section-title { font-weight: 800; font-size: .85rem; color: var(--gris-400); text-transform: uppercase; letter-spacing: .5px; margin-bottom: .75rem; }
.quick-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; margin-bottom: 2rem; }
.quick-link { display: flex; flex-direction: column; gap: .25rem; background: var(--blanc); border-radius: var(--radius-lg); padding: 1rem 1.25rem; box-shadow: var(--shadow); border: 2px solid transparent; transition: border-color .15s; color: var(--noir); }
.quick-link:hover { border-color: var(--orange); color: var(--noir); }
.quick-link strong { color: var(--bleu); font-size: .95rem; }
.quick-link span { font-size: .8rem; color: var(--gris-400); }

/* ============================================================
   CLÉS / INFO / CODE
   ============================================================ */

.cle-display { background: var(--creme); border: 1px solid var(--gris-200); border-radius: var(--radius); padding: 1rem; }
.cle-value { display: flex; align-items: center; gap: .75rem; margin-bottom: .5rem; }
.cle-value code { font-size: .85rem; color: var(--bleu); word-break: break-all; flex: 1; }
.cle-usage { font-family: var(--font-mono); font-size: .75rem; color: var(--gris-400); word-break: break-all; margin-top: .5rem; }
.cle-short { font-family: var(--font-mono); font-size: .8rem; color: var(--bleu); background: var(--bleu-pale); padding: .15rem .4rem; border-radius: 4px; }
.cle-meta { font-size: .8rem; color: var(--gris-400); margin-top: .5rem; }
.cle-actions { display: flex; gap: .5rem; margin-top: .5rem; }

.info-grid { display: flex; flex-direction: column; gap: .5rem; }
.info-row { display: flex; align-items: center; gap: 1rem; }
.info-label { font-size: .8rem; font-weight: 700; color: var(--gris-400); width: 80px; flex-shrink: 0; text-transform: uppercase; letter-spacing: .3px; }

.code-block { background: var(--noir); color: #a8d8a8; padding: 1rem; border-radius: var(--radius); font-size: .8rem; line-height: 1.7; overflow-x: auto; white-space: pre; }

/* ============================================================
   ACTION BAR / FILTRES / PAGINATION
   ============================================================ */

.action-bar { display: flex; align-items: center; gap: .75rem; flex-wrap: nowrap; margin-bottom: 1.25rem; }
.row-actions { display: flex; align-items: center; gap: .5rem; justify-content: center; }
.ra { display: inline-flex; align-items: center; font-size: .8rem; font-weight: 600; cursor: pointer; text-decoration: none; transition: color .15s, background .15s; border: none; background: none; padding: 0; }
.ra-edit { color: var(--bleu); }
.ra-edit:hover { color: var(--orange); }
.ra-del { color: var(--gris-400); padding: .2rem; border-radius: var(--radius); }
.ra-del:hover { color: #dc3545; background: #f8d7da; }

.search-box { display: flex; align-items: center; gap: .5rem; background: var(--blanc); border: 1px solid var(--gris-200); border-radius: var(--radius); padding: .45rem .75rem; min-width: 220px; }
.search-box input { border: none; outline: none; background: transparent; font-size: .875rem; color: var(--noir); width: 100%; }
.filt { padding: .45rem .75rem; border: 1px solid var(--gris-200); border-radius: var(--radius); font-size: .875rem; color: var(--noir); background: var(--blanc); cursor: pointer; }
.ab-spacer { flex: 1; }
.filter-bar { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.filter-btn { padding: .4rem .9rem; border-radius: 20px; font-size: .8rem; font-weight: 700; border: 1px solid var(--gris-200); color: var(--gris-700); background: var(--blanc); transition: border-color .15s, color .15s; }
.filter-btn:hover, .filter-btn.active { border-color: var(--bleu); color: var(--bleu); background: var(--bleu-pale); }

.td-thumb { width: 64px; }
.thumb-preview { width: 56px; height: 40px; object-fit: cover; border-radius: 4px; border: 1px solid var(--gris-200); }
.thumb-placeholder { width: 56px; height: 40px; background: var(--orange-pale); color: var(--orange); display: flex; align-items: center; justify-content: center; border-radius: 4px; font-family: var(--font-mono); font-size: .65rem; font-weight: 700; }
.thumb-error { width: 56px; height: 40px; background: #f8d7da; color: #dc3545; display: flex; align-items: center; justify-content: center; border-radius: 4px; font-weight: 700; }
.td-url { max-width: 320px; }
.td-url a { font-size: .8rem; color: var(--bleu); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }

.pagination { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: 1rem; }
.page-btn { padding: .35rem .7rem; border-radius: var(--radius); font-size: .8rem; font-weight: 700; border: 2px solid var(--gris-200); color: var(--gris-700); background: var(--blanc); }
.page-btn.active, .page-btn:hover { border-color: var(--bleu); color: var(--bleu); background: var(--bleu-pale); }

/* ============================================================
   TEST API / MISC
   ============================================================ */

.test-api-wrap { display: flex; flex-direction: column; gap: 1.5rem; max-width: 700px; }
.input-row { display: flex; gap: .5rem; }
.input-row input { flex: 1; }
.result-status { padding: .65rem .85rem; border-radius: var(--radius); font-weight: 700; font-size: .875rem; margin-bottom: .75rem; }
.result-status.loading { background: var(--bleu-pale); color: var(--bleu); }
.result-status.ok      { background: #d4edda; color: #155724; }
.result-status.error   { background: #f8d7da; color: #721c24; }
.result-img { max-height: 300px; border-radius: var(--radius); border: 1px solid var(--gris-200); margin-bottom: .75rem; object-fit: contain; }

.btn-action { font-size: 1rem; padding: .2rem .4rem; border-radius: 4px; transition: background .12s; display: inline-flex; align-items: center; }
.btn-action:hover { background: var(--gris-100); }
.btn-copy-inline { background: none; border: none; cursor: pointer; font-size: .9rem; color: var(--gris-400); padding: .1rem .3rem; transition: color .15s; }
.btn-copy-inline:hover { color: var(--bleu); }
.empty-state { text-align: center; padding: 3rem; color: var(--gris-400); font-size: .9rem; }
.field-group { margin-top: 1rem; }
.field-group-label { font-size: .8rem; font-weight: 700; color: var(--gris-400); text-transform: uppercase; letter-spacing: .3px; margin-bottom: .5rem; }
.badge-count { font-family: var(--font-mono); font-size: .8rem; color: var(--gris-400); }
.label-hint { font-size: .75rem; color: var(--gris-400); font-weight: 400; text-transform: none; margin-left: .3rem; }
.req { color: var(--orange); }

/* ============================================================
   SIDEBAR — état non connecté
   ============================================================ */

.sidebar-conn { flex: 1; padding: 1.5rem 1.25rem; display: flex; flex-direction: column; }
.sidebar-conn h2 { font-weight: 800; font-size: .75rem; color: #fff; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 1.25rem; padding-bottom: .75rem; border-bottom: 1px solid rgba(255,255,255,.08); }
.sidebar-conn .sc-field { margin-bottom: .85rem; }
.sidebar-conn .sc-field label { display: block; font-size: .68rem; font-weight: 700; color: #fff; letter-spacing: .3px; text-transform: uppercase; margin-bottom: .3rem; }
.sidebar-conn .sc-field input { width: 100%; padding: .6rem .85rem; border: 1px solid rgba(255,255,255,.2); border-radius: var(--radius); background: rgba(0,0,0,.2); color: #fff; font-size: .875rem; font-family: var(--font-body); transition: border-color .15s; -webkit-text-fill-color: #fff; caret-color: #fff; }
.sidebar-conn .sc-field input::placeholder { color: rgba(255,255,255,.35); }
.sidebar-conn .sc-field input:focus { outline: none; border-color: var(--orange); }
.sidebar-conn .sc-field input:-webkit-autofill,
.sidebar-conn .sc-field input:-webkit-autofill:hover,
.sidebar-conn .sc-field input:-webkit-autofill:focus,
.sidebar-conn .sc-field input:-webkit-autofill:active { -webkit-box-shadow: 0 0 0 1000px #152d54 inset !important; -webkit-text-fill-color: #fff !important; caret-color: #fff !important; transition: background-color 9999s ease-in-out 0s !important; }
.sidebar-conn-footer { margin-top: auto; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.08); font-size: .78rem; color: rgba(255,255,255,.6); line-height: 1.8; }
.sidebar-conn-footer a { color: rgba(255,255,255,.8); }
.sidebar-conn-footer a:hover { color: var(--orange); }

/* ============================================================
   LANDING — colonne droite
   ============================================================ */

.landing-header { padding: .625rem 2.5rem 1.5rem; border-bottom: 2px solid var(--gris-200); margin-bottom: 1.5rem; }
.landing-header h1 { font-weight: 800; font-size: 2rem; color: var(--bleu); letter-spacing: -.5px; line-height: 1.2; margin-bottom: .75rem; }
.landing-header h1 span { color: var(--orange); }
.landing-header-desc { font-size: .95rem; color: var(--gris-700); line-height: 1.7; margin-bottom: 1.25rem; }
.landing-badges { display: flex; flex-wrap: wrap; gap: .5rem; }
.landing-badge { background: var(--blanc); color: var(--gris-700); border: 1px solid var(--gris-200); border-radius: 20px; padding: .25rem .75rem; font-size: .78rem; font-weight: 600; box-shadow: var(--shadow); }
.landing-h2 { font-weight: 800; font-size: 1.35rem; color: var(--bleu); letter-spacing: -.3px; margin-bottom: .5rem; padding: 0 2.5rem; }
.landing-h2-desc { font-size: .875rem; color: var(--gris-700); line-height: 1.7; margin-bottom: 1.5rem; padding: 0 2.5rem; }

.landing-plans-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 280px)); gap: 1rem; margin-bottom: 2.5rem; justify-content: center; padding: 0 2.5rem; }
.landing-plan-card { background: var(--blanc); border-radius: var(--radius-lg); padding: 1.5rem 1.25rem; box-shadow: var(--shadow); border: 1px solid transparent; display: flex; flex-direction: column; }
.landing-plan-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.landing-plan-card.is-pro { border-color: var(--orange); }
.landing-plan-badge { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); background: var(--orange); color: var(--blanc); font-size: .65rem; font-weight: 800; padding: .2rem .7rem; border-radius: 20px; letter-spacing: .5px; text-transform: uppercase; white-space: nowrap; }
.landing-plan-nom { font-weight: 800; font-size: .95rem; color: var(--bleu); margin-bottom: .5rem; }
.landing-plan-apartir { font-size: .78rem; font-weight: 600; color: var(--gris-400); margin-bottom: .15rem; }
.landing-plan-prix-mois { font-weight: 800; font-size: 1.85rem; color: var(--bleu); line-height: 1; }
.landing-plan-prix-mois span { font-size: .85rem; font-weight: 600; color: var(--gris-400); }
.landing-plan-prix-ttc { font-size: .78rem; color: var(--gris-400); margin: .2rem 0 .25rem; }
.landing-plan-facturation { font-size: .72rem; color: var(--gris-400); font-style: italic; margin-bottom: .85rem; }
.landing-plan-sites { display: inline-block; background: var(--bleu-pale); color: var(--bleu); font-size: .72rem; font-weight: 700; padding: .2rem .65rem; border-radius: 20px; margin-bottom: .85rem; }
.landing-plan-features { list-style: none; display: flex; flex-direction: column; gap: .35rem; margin-bottom: 1.1rem; flex: 1; }
.landing-plan-features li { font-size: .8rem; color: var(--gris-700); display: flex; align-items: flex-start; gap: .4rem; }
.landing-plan-features li::before { content: '✓'; color: var(--orange); font-weight: 800; flex-shrink: 0; margin-top: .05rem; }
.btn-plan { width: 100%; justify-content: center; padding: .65rem; font-size: .875rem; }

.landing-test-bloc { background: var(--blanc); border-radius: var(--radius-lg); padding: 1.5rem; box-shadow: var(--shadow); margin: 0 2.5rem 2.5rem; }
.landing-test-bloc h3 { font-weight: 800; font-size: .95rem; color: var(--bleu); margin-bottom: .35rem; }
.landing-test-bloc p { font-size: .82rem; color: var(--gris-400); margin-bottom: 1rem; }
.landing-test-row { display: flex; gap: .5rem; margin-bottom: .75rem; }
.landing-test-row input { flex: 1; padding: .6rem .85rem; border: 1px solid var(--gris-200); border-radius: var(--radius); font-size: .875rem; color: var(--noir); background: var(--blanc); transition: border-color .15s; }
.landing-test-row input:focus { outline: none; border-color: var(--bleu); }
.landing-test-msg { font-size: .85rem; padding: .6rem .85rem; border-radius: var(--radius); font-weight: 600; display: none; margin-bottom: .75rem; }
.landing-test-msg.loading { background: var(--bleu-pale); color: var(--bleu); display: block; }
.landing-test-msg.error   { background: #f8d7da; color: #721c24; display: block; }
.landing-test-img { max-width: 100%; border-radius: var(--radius); border: 1px solid var(--gris-200); display: none; }

.landing-panier { position: fixed; bottom: 0; left: var(--sidebar-w); right: 0; background: var(--bleu); color: var(--blanc); padding: 1rem 2.5rem; display: none; align-items: center; justify-content: space-between; gap: 1rem; z-index: 200; box-shadow: 0 -4px 20px rgba(26,58,107,.25); }
.landing-panier.visible { display: flex; }
.landing-panier-info { font-size: .9rem; }
.landing-panier-info strong { color: var(--orange); }
.landing-panier-actions { display: flex; gap: .75rem; }

/* Logo thumbs */
.logo-thumbs { font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; color: var(--blanc); display: block; }
.logo-thumbs span { color: var(--orange); }
.sidebar .logo-thumbs { font-size: 1.4rem; }
.sidebar-logo a { text-decoration: none; display: block; }

/* ============================================================
   PANIER
   ============================================================ */

.panier-wrap { max-width: 800px; }
.tfoot-label { text-align: right; }
.tfoot-ht { font-weight: 700; }
.tfoot-ttc { font-weight: 800; font-size: 1.05rem; }
.tfoot-ttc-val { color: var(--orange); }

/* CP suggestions */
.cp-suggestions { position: absolute; top: calc(100% + 2px); left: 0; min-width: 100%; background: var(--blanc); border: 1px solid var(--gris-200); border-radius: var(--radius); margin: 0; padding: 4px 0; list-style: none; z-index: 200; box-shadow: var(--shadow-lg); }
.cp-suggestions li { padding: 7px 12px; font-size: .875rem; color: var(--bleu); font-weight: 700; cursor: pointer; transition: background .12s; display: flex; gap: 8px; align-items: baseline; border-bottom: 1px solid var(--gris-100); }
.cp-suggestions li:last-child { border-bottom: none; }
.cp-suggestions li:hover, .cp-suggestions li.active { background: var(--bleu-pale); }

/* Modale */
.modal-overlay { position: fixed; inset: 0; background: rgba(26,58,107,.45); z-index: 1000; display: flex; align-items: center; justify-content: center; }
.modal-box { background: var(--blanc); border-radius: var(--radius-lg); padding: 2rem 2rem 1.5rem; max-width: 360px; width: calc(100% - 2rem); box-shadow: var(--shadow-lg); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.modal-icon svg { width: 40px; height: 40px; color: var(--orange); }
.modal-box p { font-size: .9rem; color: var(--gris-700); line-height: 1.6; }

/* ============================================================
   ANTI-AUTOFILL / RESET
   ============================================================ */

#right input:-webkit-autofill,
#right input:-webkit-autofill:hover,
#right input:-webkit-autofill:focus,
#right input:-webkit-autofill:active { -webkit-box-shadow: 0 0 0 1000px var(--creme) inset !important; -webkit-text-fill-color: var(--noir) !important; transition: background-color 9999s ease-in-out 0s !important; }
input:focus, select:focus, textarea:focus, button:focus { outline: none !important; box-shadow: none !important; }
.sidebar-conn .sc-field input:focus { border-color: var(--orange) !important; }

/* ============================================================
   FAVICON MOBILE / CONN MOBILE
   ============================================================ */

.sidebar-logo-favicon { display: none; }
.conn-mobile-only { display: none; }
.sidebar-conn-mobile { display: none; }

/* ============================================================
   TOOLTIPS data-tip
   ============================================================ */

[data-tip] { position: relative; overflow: visible; }
[data-tip]::before,
[data-tip]::after { content: ''; position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%) translateY(4px); pointer-events: none; opacity: 0; transition: opacity .15s ease, transform .15s ease; z-index: 9999; overflow: visible; }
[data-tip]::after { content: attr(data-tip); background: #1A1F36; color: #fff; font-size: 11.5px; font-weight: 500; white-space: nowrap; padding: 5px 9px; border-radius: 6px; box-shadow: 0 4px 12px rgba(0,0,0,.18); }
[data-tip]::before { bottom: calc(100% + 2px); width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid #1A1F36; background: none; }
[data-tip]:hover::before, [data-tip]:hover::after { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 768px) {

    #left { width: 64px; flex-shrink: 0; overflow-x: clip; overflow-y: visible; }

    .sidebar-logo { padding: .75rem 0; text-align: center; border-bottom: 1px solid rgba(255,255,255,.08); }
    .sidebar-logo .logo-thumbs { display: none; }
    .sidebar-logo .logo-sub    { display: none; }
    .sidebar-logo a { display: flex; align-items: center; justify-content: center; height: 32px; }
    .sidebar-logo-favicon { display: block; width: 22px; height: 22px; }

    .sidebar-nav .nav-item[data-tip]::before,
    .sidebar-nav .nav-item[data-tip]::after { top: 50%; left: calc(100% + 8px); bottom: auto; transform: translateY(-50%) translateX(-4px); z-index: 10000; }
    .sidebar-nav .nav-item[data-tip]:hover::before,
    .sidebar-nav .nav-item[data-tip]:hover::after { opacity: 1; transform: translateY(-50%) translateX(0); }
    .sidebar-nav .nav-item[data-tip]::after { left: calc(100% + 8px); }
    .sidebar-nav .nav-item[data-tip]::before { top: 50%; left: calc(100% + 3px); border-left: none; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-right: 5px solid #1A1F36; background: none; width: 0; height: 0; padding: 0; border-radius: 0; }

    .sidebar-nav { padding: .5rem 0; }
    .nav-item { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 2px; border-left: none; width: 56px; height: auto; padding: .4rem 0; border-radius: 8px; margin: .2rem auto; }
    .nav-item:hover { background: rgba(255,255,255,.1); color: var(--blanc); }
    .nav-item.active { background: rgba(232,98,26,.15); color: var(--orange); }
    .nav-item span:last-child { display: none; }
    .nav-icon { width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; }
    .nav-label { display: block !important; font-size: .5rem; font-weight: 700; color: rgba(255,255,255,.6); text-align: center; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 58px; }
    .nav-item.active .nav-label { color: var(--orange); }

    .sidebar-footer { padding: .75rem 0; justify-content: center; flex-direction: column; gap: .5rem; }
    .user-info { display: none; }
    .btn-logout { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; background: rgba(255,255,255,.06); margin: 0 auto; padding: 0; }

    .sidebar-conn { display: none; }
    .sidebar-conn-mobile { display: flex; flex-direction: column; align-items: center; padding: .5rem 0; gap: .25rem; }
    .sidebar-conn-mobile a { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; color: rgba(255,255,255,.6); background: rgba(255,255,255,.06); transition: color .15s, background .15s; }
    .sidebar-conn-mobile a:hover { color: var(--orange); background: rgba(232,98,26,.15); }

    .conn-mobile-only { display: block; }

    #header { overflow: hidden; padding: 0 .75rem; gap: .5rem; }
    #content { overflow-x: clip; }
    #right { min-width: 0; }
    #page  { padding: 1.25rem; }

    .landing-header { padding: 0 0 1.25rem; }
    .landing-badge { white-space: nowrap; }
    .landing-h2, .landing-h2-desc { padding: 0; }
    .landing-plans-grid { grid-template-columns: 1fr; padding: 0; }
    .landing-panier { left: 64px; }
    .landing-test-bloc { margin: 0 0 1.25rem; }
    .landing-test-row { flex-direction: column; }
    .landing-test-row .btn { width: 100%; justify-content: center; }

    /* Formulaires : grille 1 colonne */
    .form-card > div[style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
}

@media (max-width: 600px) {
    #page { padding: 1.25rem; }
}