:root{
  --ink:#0b0d0f; --ink-soft:#33383d; --grey-600:#6b7178; --grey-300:#e4e6e8; --grey-100:#f4f5f6;
  --white:#ffffff; --mint:#0fae6e; --mint-deep:#0a8a58; --teal:#00b3a4; --amber:#ff6a3d; --red:#e14d2a;
  --radius-lg:28px; --radius-md:18px; --radius-sm:12px;
  --shadow-sm:0 1px 2px rgba(11,13,15,.06),0 1px 1px rgba(11,13,15,.04);
  --shadow-md:0 8px 24px rgba(11,13,15,.08),0 2px 6px rgba(11,13,15,.05);
  --shadow-lg:0 24px 60px rgba(11,13,15,.14),0 6px 16px rgba(11,13,15,.06);
  /* Tokens sémantiques (surface/texte) — séparés de --ink/--grey-* qui restent des couleurs de
     marque fixes (boutons pleins, phone-card...). Seuls ces tokens-ci changent en mode sombre. */
  --bg-page:var(--white); --bg-surface:#ffffff; --bg-sunken:var(--grey-100);
  --text-primary:var(--ink); --text-secondary:var(--ink-soft); --border-color:var(--grey-300);
  --header-bg:rgba(255,255,255,.85);
  color-scheme:light;
}
:root[data-theme="dark"]{
  --bg-page:#101315; --bg-surface:#181c1f; --bg-sunken:#20252a;
  --text-primary:#f2f4f5; --text-secondary:#aab0b6; --border-color:#2c3238;
  --header-bg:rgba(16,19,21,.85);
  --shadow-sm:0 1px 2px rgba(0,0,0,.3),0 1px 1px rgba(0,0,0,.2);
  --shadow-md:0 8px 24px rgba(0,0,0,.4),0 2px 6px rgba(0,0,0,.25);
  --shadow-lg:0 24px 60px rgba(0,0,0,.5),0 6px 16px rgba(0,0,0,.3);
  color-scheme:dark;
}
@media(prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg-page:#101315; --bg-surface:#181c1f; --bg-sunken:#20252a;
    --text-primary:#f2f4f5; --text-secondary:#aab0b6; --border-color:#2c3238;
    --header-bg:rgba(16,19,21,.85);
    --shadow-sm:0 1px 2px rgba(0,0,0,.3),0 1px 1px rgba(0,0,0,.2);
    --shadow-md:0 8px 24px rgba(0,0,0,.4),0 2px 6px rgba(0,0,0,.25);
    --shadow-lg:0 24px 60px rgba(0,0,0,.5),0 6px 16px rgba(0,0,0,.3);
    color-scheme:dark;
  }
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
/* Scrollbar fine et discrète, couleur mint au survol — Chrome/Edge/Firefox. */
*{scrollbar-width:thin;scrollbar-color:var(--border-color) transparent;}
::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:999px;border:2px solid var(--bg-page);}
::-webkit-scrollbar-thumb:hover{background:var(--mint);}

/* Effet "ripple" au clic sur les boutons (déclenché en JS, voir app.js). */
.btn{position:relative;overflow:hidden;}
.btn .ripple{position:absolute;border-radius:50%;background:rgba(255,255,255,.5);transform:scale(0);animation:ripple-anim .5s ease-out;pointer-events:none;}
.btn-ghost .ripple, .btn.btn-ghost .ripple{background:rgba(15,174,110,.25);}
@keyframes ripple-anim{to{transform:scale(2.6);opacity:0;}}
@media(prefers-reduced-motion:reduce){.btn .ripple{display:none;}}

/* Barre de navigation basse façon appli mobile — cachée sur desktop, où le contenu tient
   déjà bien à l'écran sans qu'on ait besoin d'ancrer la navigation en bas. Cachée aussi tant
   que personne n'est connecté (body.has-bottom-nav, posé par showAuthOrApp() une fois le
   login confirmé) : sinon "Missions/Mes gains/Profil" restaient visibles et cliquables par-
   dessus l'écran de connexion, ce qui ne fait pas du tout "vraie appli". */
.bottom-nav{display:none;}
@media(max-width:760px){
  body.has-bottom-nav .bottom-nav{
    display:flex;position:fixed;bottom:0;left:0;right:0;z-index:100;
    background:var(--bg-surface);border-top:1px solid var(--border-color);
    padding:6px max(6px, env(safe-area-inset-right)) max(6px, env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left));
    box-shadow:0 -4px 16px rgba(11,13,15,.06);
    animation:fadeIn .3s ease both;
  }
  .bottom-nav-item{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:7px 4px;border:none;background:none;color:var(--text-secondary);font-size:.66rem;font-weight:600;cursor:pointer;-webkit-tap-highlight-color:transparent;border-radius:12px;transition:color .15s ease;position:relative;}
  .bottom-nav-item svg{width:22px;height:22px;}
  .bottom-nav-item.active{color:var(--mint-deep);}
  .bottom-nav-item .dot-badge{position:absolute;top:2px;right:calc(50% - 16px);width:8px;height:8px;border-radius:50%;background:var(--amber);border:2px solid var(--bg-surface);}
  /* Laisse la place à la barre fixe pour que le dernier élément ne soit jamais masqué. */
  body.has-bottom-nav main{padding-bottom:calc(84px + env(safe-area-inset-bottom)) !important;}
}

/* Bouton "retour en haut" flottant. */
.back-to-top{position:fixed;bottom:24px;right:24px;width:44px;height:44px;border-radius:50%;background:var(--ink);color:#fff;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:var(--shadow-md);opacity:0;pointer-events:none;transform:translateY(8px);transition:opacity .2s ease,transform .2s ease;z-index:150;}
.back-to-top.show{opacity:1;pointer-events:auto;transform:translateY(0);}
.back-to-top svg{width:20px;height:20px;}

/* Bouton "retour" flottant, injecté seulement en mode PWA standalone (voir app.js) où l'OS ne
   fournit ni barre d'adresse ni bouton retour ni geste de balayage. */
.pwa-back-btn{position:fixed;top:max(14px, env(safe-area-inset-top));left:max(14px, env(safe-area-inset-left));width:40px;height:40px;border-radius:50%;background:var(--bg-surface);color:var(--text-primary);border:1px solid var(--border-color);display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:var(--shadow-md);z-index:250;-webkit-tap-highlight-color:transparent;}
.pwa-back-btn svg{width:20px;height:20px;}
html, body{overscroll-behavior-y:contain;}
body{font-family:'Inter',sans-serif;background:var(--bg-page);color:var(--text-primary);letter-spacing:-0.011em;-webkit-font-smoothing:antialiased;transition:background .2s ease,color .2s ease;-webkit-tap-highlight-color:transparent;}
a{color:inherit;text-decoration:none;}
::selection{background:var(--mint);color:#04150e;}
.wrap{max-width:1140px;margin:0 auto;padding:0 max(24px, env(safe-area-inset-right)) 0 max(24px, env(safe-area-inset-left));}
header{position:sticky;top:0;z-index:50;background:var(--header-bg);backdrop-filter:blur(14px);border-bottom:1px solid var(--border-color);}
.nav{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;flex-wrap:wrap;gap:8px;}
.theme-toggle{width:40px;height:40px;min-width:40px;min-height:40px;border-radius:50%;border:1px solid var(--border-color);background:var(--bg-surface);color:var(--ink);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;transition:border-color .15s ease,transform .15s ease;-webkit-tap-highlight-color:transparent;}
.theme-toggle:hover{border-color:var(--ink);transform:scale(1.06);}
.theme-toggle:active{transform:scale(.92);}
.theme-toggle svg{width:18px;height:18px;}
.theme-toggle .sun{display:none;}
:root[data-theme="dark"] .theme-toggle .moon{display:none;}
:root[data-theme="dark"] .theme-toggle .sun{display:block;}
@media(prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .theme-toggle .moon{display:none;}
  :root:not([data-theme="light"]) .theme-toggle .sun{display:block;}
}
/* Les boutons du header (toujours des libellés courts, un seul mot ou deux) ne doivent
   jamais se retrouver coupés en deux lignes façon vieux bouton HTML des années 2000. */
.nav-actions .btn{white-space:nowrap;}

/* Menu mobile (hamburger) : sur les pages marketing, les liens de nav (.main-links) et les
   deux CTA header sont masqués sous 760px faute de place — sans ce menu, "Devenir partenaire",
   "Contact" etc. seraient introuvables sur téléphone (accessibles seulement tout en bas du
   footer). #mobileMenu est un panneau INDÉPENDANT, placé en dehors de <header> dans le HTML
   (pas de duplication de .main-links) : un ancêtre avec transform/filter/backdrop-filter crée
   un nouveau "containing block" pour ses descendants position:fixed, ce qui piégeait le panneau
   à l'intérieur de la petite boîte du header (73px) quand il vivait dedans — bug corrigé en le
   sortant complètement de <header> plutôt qu'en jonglant avec les propriétés CSS de l'ancêtre. */
.menu-toggle{display:none;width:40px;height:40px;min-width:40px;border-radius:50%;border:1px solid var(--border-color);background:var(--bg-surface);color:var(--ink);align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;-webkit-tap-highlight-color:transparent;}
.menu-toggle svg{width:20px;height:20px;}
.menu-toggle .icon-close{display:none;}
body.mobile-menu-open .menu-toggle .icon-open{display:none;}
body.mobile-menu-open .menu-toggle .icon-close{display:block;}
.mobile-menu{display:none;}
.mobile-menu-cta{display:none;}
@media(max-width:760px){
  .menu-toggle{display:inline-flex;}
  .nav-actions > a.btn{display:none;}
  .mobile-menu{
    display:flex;flex-direction:column;gap:2px;
    position:fixed;top:73px;left:0;right:0;bottom:0;
    background:var(--bg-page);padding:20px 24px 32px;
    transform:translateX(100%);transition:transform .28s ease;
    z-index:200;overflow-y:auto;
  }
  body.mobile-menu-open .mobile-menu{transform:translateX(0);}
  .mobile-menu > a{display:block;font-size:1.08rem;font-weight:700;padding:16px 4px;border-bottom:1px solid var(--border-color);color:var(--text-primary);}
  .mobile-menu-cta{display:flex;flex-direction:column;gap:10px;margin-top:22px;}
  .mobile-menu-cta .btn{width:100%;text-align:center;}
  body.mobile-menu-open{overflow:hidden;}
}
.logo{font-weight:800;font-size:1.28rem;letter-spacing:-0.02em;}
.logo .dot{color:var(--mint);}
.user-name{font-size:.9rem;color:var(--ink-soft);margin-right:14px;max-width:38vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block;vertical-align:middle;}
.btn{font-weight:600;font-size:.95rem;padding:13px 24px;border-radius:999px;display:inline-block;border:1px solid transparent;cursor:pointer;transition:transform .2s cubic-bezier(.4,0,.2,1),box-shadow .2s cubic-bezier(.4,0,.2,1),background .15s ease,border-color .15s ease;-webkit-tap-highlight-color:transparent;}
.btn:active{transform:scale(.97);}
.btn-sm{padding:8px 16px;font-size:.85rem;}
@media(max-width:760px){.btn-sm{padding:10px 18px;}}
.btn-primary{background:var(--ink);color:#fff;box-shadow:var(--shadow-sm);}
.btn-primary:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);}
.btn-primary:disabled{opacity:.5;cursor:not-allowed;transform:none;}
.btn-ghost{border-color:var(--border-color);background:var(--bg-surface);color:var(--text-primary);}
.btn-ghost:hover{border-color:var(--text-primary);transform:translateY(-2px);box-shadow:var(--shadow-sm);}
.btn-mint{background:var(--mint);color:#04150e;}
.btn-mint:hover{background:var(--mint-deep);color:#fff;transform:translateY(-2px);box-shadow:var(--shadow-md);}
.card{background:var(--bg-surface);border:1px solid var(--border-color);border-radius:var(--radius-md);padding:24px;}
.input, select, textarea{width:100%;font-family:inherit;background:var(--bg-sunken);border:1px solid var(--border-color);color:var(--text-primary);padding:13px 16px;border-radius:var(--radius-sm);font-size:.95rem;transition:border-color .15s ease,box-shadow .15s ease;}
/* iOS Safari zoome automatiquement la page quand un champ a un font-size < 16px au focus —
   très gênant sur mobile (le zoom reste après le blur). On force 16px uniquement sous 480px,
   où ça compte vraiment, pour garder le rendu desktop compact. */
@media(max-width:480px){
  .input, select, textarea{font-size:16px;}
}
.input:focus, select:focus, textarea:focus{outline:2px solid var(--mint);outline-offset:1px;box-shadow:0 0 0 4px rgba(15,174,110,.12);}
label{font-size:.85rem;font-weight:600;color:var(--text-secondary);display:block;margin-bottom:6px;}
.field{margin-bottom:16px;}
.checkbox-field{display:flex;align-items:flex-start;gap:10px;margin-bottom:16px;}
.checkbox-field input[type="checkbox"]{width:18px;height:18px;flex-shrink:0;margin-top:1px;accent-color:var(--mint);cursor:pointer;}
.checkbox-field label{font-size:.85rem;color:var(--text-secondary);font-weight:400;margin-bottom:0;cursor:pointer;}
.checkbox-field a{color:var(--mint-deep);font-weight:600;}
.pill{display:inline-flex;align-items:center;gap:8px;font-size:.8rem;font-weight:600;padding:6px 14px;border-radius:999px;}
.pill-mint{background:rgba(15,174,110,.12);color:var(--mint-deep);border:1px solid rgba(15,174,110,.22);}
.pill-amber{background:rgba(255,106,61,.12);color:#e8703f;border:1px solid rgba(255,106,61,.22);}
.pill-grey{background:var(--bg-sunken);color:var(--text-secondary);border:1px solid var(--border-color);}
:root[data-theme="dark"] .pill-amber{color:#ff9569;}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .pill-amber{color:#ff9569;}}
/* Anneau de focus clavier cohérent sur tous les contrôles interactifs. */
.btn:focus-visible, .tab:focus-visible, .filter-pill:focus-visible, .switch:focus-visible, a:focus-visible{
  outline:2px solid var(--mint);outline-offset:2px;
}

/* Léger relief au survol/appui, partagé par toutes les cartes de liste (missions, candidatures, commandes, clients). */
.job-card, .req-item, .data-card, .pro-card{
  transition:box-shadow .2s cubic-bezier(.4,0,.2,1), border-color .15s ease, transform .2s cubic-bezier(.4,0,.2,1);
  -webkit-tap-highlight-color:transparent;
}
.job-card:hover, .req-item:hover, .data-card:hover, .pro-card:hover{box-shadow:var(--shadow-sm);transform:translateY(-2px);}
.job-card:active, .req-item:active, .data-card:active, .pro-card:active{transform:scale(.995);}

/* Messagerie client/serrurier (par mission) — utilisée par client.html et pro.html. */
.chat-toggle{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border:1px solid var(--border-color);border-radius:var(--radius-md);cursor:pointer;margin-top:14px;background:var(--bg-surface);transition:border-color .15s ease;}
.chat-toggle:hover{border-color:var(--text-primary);}
.chat-toggle .label{display:flex;align-items:center;gap:10px;font-weight:600;font-size:.9rem;}
.chat-badge{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--red);color:#fff;font-size:.72rem;font-weight:700;}
.chat-panel{border:1px solid var(--border-color);border-radius:var(--radius-md);margin-top:14px;overflow:hidden;background:var(--bg-surface);}
.chat-panel .chat-head{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid var(--border-color);font-weight:600;font-size:.88rem;}
.chat-panel .chat-head button{background:none;border:none;color:var(--text-secondary);cursor:pointer;font-size:.85rem;font-weight:600;}
.chat-messages{height:min(58vh,520px);overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:8px;}
.chat-bubble{max-width:78%;padding:9px 13px;border-radius:16px;font-size:.87rem;line-height:1.4;word-break:break-word;}
.chat-bubble.mine{align-self:flex-end;background:var(--mint);color:#04150e;border-bottom-right-radius:4px;}
.chat-bubble.theirs{align-self:flex-start;background:var(--bg-sunken);color:var(--text-primary);border-bottom-left-radius:4px;}
.chat-bubble .time{display:block;font-size:.66rem;opacity:.65;margin-top:3px;}
.chat-empty{padding:24px 16px;text-align:center;font-size:.85rem;color:var(--text-secondary);}
.chat-input-row{display:flex;gap:8px;padding:10px;border-top:1px solid var(--border-color);}
.chat-input-row .input{flex:1;padding:10px 14px;}
.chat-input-row button{flex-shrink:0;}

/* Liste des conversations (page Messages). */
.conversation-item{display:flex;align-items:center;gap:12px;padding:14px 16px;border:1px solid var(--border-color);border-radius:var(--radius-md);margin-bottom:10px;cursor:pointer;background:var(--bg-surface);transition:border-color .15s ease,box-shadow .15s ease;}
.conversation-item:hover{border-color:var(--text-primary);box-shadow:var(--shadow-sm);}
.conversation-item .conv-avatar{width:44px;height:44px;border-radius:50%;background:linear-gradient(160deg,var(--mint) 0%,var(--mint-deep) 100%);display:flex;align-items:center;justify-content:center;color:#04150e;font-weight:800;font-size:1rem;flex-shrink:0;}
.conversation-item .conv-body{flex:1;min-width:0;}
.conversation-item .conv-name{font-weight:700;font-size:.92rem;display:flex;justify-content:space-between;gap:8px;}
.conversation-item .conv-preview{font-size:.83rem;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px;}
.conversation-item .conv-time{font-size:.72rem;color:var(--text-secondary);flex-shrink:0;}
.conversation-item.unread .conv-preview{color:var(--text-primary);font-weight:600;}

.pulse{width:8px;height:8px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 0 rgba(15,174,110,.5);animation:pulse 1.8s infinite;}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(15,174,110,.45);}70%{box-shadow:0 0 0 9px rgba(15,174,110,0);}100%{box-shadow:0 0 0 0 rgba(15,174,110,0);}}
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;padding:14px 22px;border-radius:999px;font-size:.9rem;font-weight:500;box-shadow:var(--shadow-lg);z-index:200;opacity:0;transition:opacity .25s ease, transform .25s ease;pointer-events:none;}
.toast.show{opacity:1;transform:translateX(-50%) translateY(-6px);}
.toast.error{background:var(--red);}
#map{width:100%;height:280px;border-radius:var(--radius-md);background:var(--bg-sunken);overflow:hidden;border:1px solid var(--border-color);}
.spinner{width:16px;height:16px;border-radius:50%;border:2px solid rgba(128,128,128,.25);border-top-color:var(--text-primary);animation:spin .7s linear infinite;display:inline-block;vertical-align:middle;}
@keyframes spin{to{transform:rotate(360deg);}}
.hidden{display:none !important;}

/* Apparition douce : rejoue à chaque fois qu'un bloc passe de display:none à visible. */
@keyframes fadeIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}
.fade-in, .job-card, .req-item, .empty-state{animation:fadeIn .35s ease both;}

/* Etat vide, plus accueillant qu'un simple paragraphe gris. */
.empty-state{text-align:center;padding:44px 20px;}
.empty-state .empty-icon{width:46px;height:46px;border-radius:50%;border:2px dashed var(--border-color);margin:0 auto 14px;display:flex;align-items:center;justify-content:center;}
.empty-state .empty-icon::before{content:'';width:9px;height:9px;border-radius:50%;background:var(--border-color);}
.empty-state p{color:var(--text-secondary);font-size:.9rem;max-width:280px;margin:0 auto;}

@media(max-width:480px){
  .card{padding:18px;}
  .wrap{padding-left:max(16px, env(safe-area-inset-left));padding-right:max(16px, env(safe-area-inset-right));}
}

/* Squelette de chargement (le temps qu'un premier fetch réponde), plus pro qu'un blanc puis un pop. */
.skeleton-card{height:76px;border-radius:var(--radius-sm);margin-bottom:10px;
  background:linear-gradient(90deg, var(--bg-sunken) 25%, var(--border-color) 37%, var(--bg-sunken) 63%);
  background-size:400% 100%;animation:skeleton-shimmer 1.4s ease infinite;}
@keyframes skeleton-shimmer{0%{background-position:100% 50%;}100%{background-position:0 50%;}}

/* Apparition au scroll (page d'accueil) : rien de bruyant, juste un léger fondu-montée.
   Utilise `animation` (pas `transition`) pour ne jamais entrer en conflit avec la transition
   propre d'un élément survolable comme .role-card. */
.reveal{opacity:0;}
.reveal-in{animation:fadeIn .5s ease both;}
@media(prefers-reduced-motion: reduce){
  .reveal, .reveal-in{opacity:1;animation:none;}
  .fade-in, .job-card, .req-item, .empty-state, .skeleton-card{animation:none;}
}