/* Charte graphique de kromary.fr (palette-portfolio) appliquée à l'appli Recherche emploi.
   Chargée après le <style> de chaque page : redéfinit ses variables et ses éléments communs. */

:root {
  --navy: #5D4037;          /* brun principal (--primary du portfolio) */
  --navy-light: #F0E4D7;    /* beige clair (--secondary) */
  --bg: #FBF4E9;            /* fond crème (--background) */
  --border: #DCCFC3;
  --grey: #7E6D67;          /* --muted-foreground */
  --muted: #8F7F78;
  --texte: #4D3A33;         /* --foreground */
  --cuivre: #D7A177;        /* --brand */
  --cuivre-fonce: #976050;  /* --brand-mid */
  --entete: #EAE1D8;        /* --header */
  --carte: #F6EFE8;
  --champ: #FFFCF8;
  --survol: #F8EFE5;
  --texte-2: #5E4A42;
  --navy-fonce: #4E342E;    /* survol des boutons principaux */
  --sur-fonce: #FBF4E9;     /* texte posé sur le brun */
  --danger: #B3261E;
  --err-fond: #FDECEA; --err-bord: #F5C6C0;
  --alerte-fond: #FFF6E5; --alerte-bord: #F0D999; --alerte-texte: #7A5A00;
  --ok: #2E6B34; --ok-fond: #E8F5E9; --ok-bord: #B7DFB9;
  --violet-fond: #F7F5FE; --violet-bord: #E2DAFA; --violet-texte: #5B3CC4;
  color-scheme: light;
}

/* Mode sombre : palette sombre du portfolio (fond #2D1E17, cartes #433F4A, accent #D7A177) */
:root[data-theme="dark"] {
  --navy: #D7A177;
  --navy-light: #4E342E;
  --navy-fonce: #E6B994;
  --sur-fonce: #2D1E17;
  --bg: #2D1E17;
  --entete: #3B2A22;
  --carte: #3A3540;
  --champ: #2F2A33;
  --survol: #463F4C;
  --border: #5A4A44;
  --texte: #EEE4DA;
  --texte-2: #DCCFC4;
  --grey: #B2A396;
  --muted: #95877C;
  --cuivre: #D7A177;
  --cuivre-fonce: #E3B48F;
  --danger: #FF8A80;
  --err-fond: #4A2222; --err-bord: #7A3434;
  --alerte-fond: #44361A; --alerte-bord: #7A6224; --alerte-texte: #F2CF6B;
  --ok: #8FD694; --ok-fond: #1F3A24; --ok-bord: #335E3A;
  --violet-fond: #362F4A; --violet-bord: #56497A; --violet-texte: #C4B5FF;
  color-scheme: dark;
}
:root[data-theme="dark"] header { box-shadow: 0 2px 12px rgba(0, 0, 0, .35); }
:root[data-theme="dark"] section.card, :root[data-theme="dark"] .carte { box-shadow: 0 1px 4px rgba(0, 0, 0, .3); }
:root[data-theme="dark"] .style-cv img { filter: brightness(.92); }

/* Bouton clair / sombre (ajouté par theme.js) */
header { position: relative; }
.bascule-theme {
  position: absolute; top: 12px; right: 24px;
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--champ); color: var(--texte); border: 1px solid var(--border); border-radius: 999px;
  padding: 5px 12px; font-size: .74rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; cursor: pointer;
}
.bascule-theme:hover { background: var(--navy-light); }
.bascule-theme .icone { font-size: .95rem; letter-spacing: 0; }

body {
  font-family: "Space Grotesk", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--texte);
}
h1, h2, h3, h4, .principal, .btn-primary { font-family: "Sora", "Space Grotesk", sans-serif; }

/* --- En-tête : barre claire comme la navigation du portfolio --- */
header {
  background: var(--entete);
  color: var(--texte);
  border-top: 3px solid var(--cuivre);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 2px 10px rgba(93, 64, 55, .08);
  padding: 14px 28px 12px;
}
header h1 { font-size: 1.35rem; font-weight: 800; letter-spacing: -.01em; color: var(--texte); }
header p { color: var(--grey); opacity: 1; }
.marque {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 8px;
  font-family: "Sora", sans-serif; font-weight: 700; font-size: 1.05rem; color: var(--texte); text-decoration: none;
}
.marque .k { display: inline-block; transform: scaleX(-1); margin-right: -1px; color: var(--cuivre); }
.marque .projet { font-family: "Space Grotesk", sans-serif; font-weight: 500; font-size: .85rem; color: var(--grey); padding-left: 10px; border-left: 1px solid var(--border); }
.marque:hover .projet { color: var(--navy); }

nav.app-nav { gap: 6px; margin-top: 12px; align-items: center; }
nav.app-nav a {
  color: var(--grey); opacity: 1; border-radius: 999px; padding: 7px 14px; font-weight: 600;
  transition: background-color .15s, color .15s;
}
nav.app-nav a:hover { background: rgba(93, 64, 55, .08); color: var(--navy); }
nav.app-nav a.active { background: var(--navy); color: var(--sur-fonce); }
nav.app-nav .menu-compte { padding-bottom: 0; }
nav.app-nav .menu-compte .qui { color: var(--grey); opacity: 1; }
nav.app-nav .menu-compte button { color: var(--navy); border-color: var(--border); background: var(--champ); border-radius: 999px; }
nav.app-nav .menu-compte button:hover { background: var(--navy-light); }

/* --- Cartes et formulaires --- */
section.card, .carte {
  background: var(--carte);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 1px 3px rgba(93, 64, 55, .06);
}
section.card h2 { color: var(--texte); font-weight: 700; border-bottom-color: var(--border); }
label { color: var(--texte); }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], input[type=search],
input[type=url], input:not([type]), select, textarea {
  background: var(--champ); border-color: var(--border); border-radius: 8px; color: var(--texte);
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--cuivre); outline-offset: 1px; }

button { border-radius: 10px; font-family: inherit; }
.btn-primary, .principal { background: var(--navy); color: var(--sur-fonce); }
.btn-primary:hover, .principal:hover:not(:disabled) { background: var(--navy-fonce); }
.btn-ghost, .btn-secondary { background: var(--champ); color: var(--navy); border: 1px solid var(--border); }
.btn-ghost:hover, .btn-secondary:hover { background: var(--navy-light); }
.btn-sm { padding: 5px 10px; font-size: .78rem; }
.hint { color: var(--grey); }
a { color: var(--cuivre-fonce); }

/* Onglets internes et tableaux */
.onglets button.actif, .onglets button.active { background: var(--navy); color: var(--sur-fonce); }
.onglets { border-color: var(--navy); }
table th { color: var(--texte); }

footer { color: var(--grey); }

@media (max-width: 640px) {
  header { padding: 12px 16px 10px; }
  .marque .projet { display: none; }
  .bascule-theme { top: 10px; right: 12px; padding: 5px 9px; }
  .bascule-theme .libelle { display: none; }
}

.onglets button { border-radius: 0; }

/* Carte (Leaflet) : tuiles atténuées en mode sombre */
:root[data-theme="dark"] .leaflet-tile { filter: brightness(.72) saturate(.85); }