/* =============================================================================
 * TechBoard Nordnet - couche de theme (tokens + remap de transition)
 * -----------------------------------------------------------------------------
 * Charte relevee a la source chez Nordnet (cdn.nordnet.fr/components/v2 et le
 * CSS de nordnet.com) : noir pour le mot-symbole, rouge #E31B22 comme unique
 * accent de marque (#AE1720 en fonce), bleu #003DCC pour les liens.
 * Le rouge pur #F00 du logo n'est utilise QUE dans le logo, comme chez eux.
 *
 * Theme clair uniquement (mode sombre retire le 19/09/2026).
 * Le sombre n'est pas une inversion : il a ses propres surfaces et contrastes.
 * ========================================================================== */

:root {
  color-scheme: light;

  --nn-page:      #EEF1F6;
  --nn-surface:   #FFFFFF;
  --nn-surface-2: #F6F8FB;
  --nn-surface-3: #E7ECF3;

  --nn-band:      #14161A;
  --nn-band-ink:  #FFFFFF;
  --nn-band-mut:  #9CA5B3;

  --nn-ink:       #14161A;
  --nn-ink-2:     #5A6472;
  --nn-ink-3:     #7C8694;
  --nn-rule:      #DCE2EA;

  --nn-brand:      #E31B22;
  --nn-brand-ink:  #FFFFFF;
  --nn-brand-deep: #AE1720;
  --nn-brand-tint: #FCE7E7;
  --nn-link:       #003DCC;

  --nn-sh:    0 1px 2px rgba(20,22,26,.07), 0 10px 26px -14px rgba(20,22,26,.30);
  --nn-sh-hi: 0 2px 4px rgba(20,22,26,.10), 0 18px 38px -16px rgba(20,22,26,.38);

  /* etats metier : la couleur vient du statut de la mission, pas d'une palette */
  --nn-st-nouveau-fg:   #0A31A8;  --nn-st-nouveau-bg:   #E3EBFF;
  --nn-st-rdv-fg:       #8B1E6F;  --nn-st-rdv-bg:       #F7E3F1;  /* prune : distinct du bleu « nouveau » (19/09) */
  --nn-st-verif-fg:     #A63C06;  --nn-st-verif-bg:     #FBE6D6;
  --nn-st-encours-fg:   #7D5300;  --nn-st-encours-bg:   #FAF0CC;
  --nn-st-termine-fg:   #0B6440;  --nn-st-termine-bg:   #D9F1E4;
  --nn-st-annule-fg:    #8E3A32;  --nn-st-annule-bg:    #F3E2E0;

  --nn-font-disp: 'Familjen Grotesk', system-ui, sans-serif;
  --nn-font-sans: 'Instrument Sans', system-ui, sans-serif;
  --nn-radius:    14px;
  --nn-radius-sm: 10px;
}


/* Mode sombre retire le 19/09/2026 (demande utilisateur) : Nordnet est en clair uniquement.
   Anciennes valeurs : scripts/theme_AVANT_sans_sombre_2026-09-19.css. */


/* =========================================================================
 * BASE
 * ====================================================================== */
html, body {
  background: var(--nn-page);
  color: var(--nn-ink);
}
body {
  font-family: var(--nn-font-sans);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, .nn-disp { font-family: var(--nn-font-disp); letter-spacing: -0.015em; }
a { color: var(--nn-link); }

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--nn-surface-2); }
::-webkit-scrollbar-thumb { background: var(--nn-rule); border-radius: 3px; }

/* =========================================================================
 * COMPOSANTS
 * ====================================================================== */
.nn-band   { background: var(--nn-band); color: var(--nn-band-ink); }
.nn-band a { color: var(--nn-band-ink); }
.nn-band-mut { color: var(--nn-band-mut); }

.nn-logo       { display: flex; align-items: center; color: var(--nn-band-ink); }
.nn-logo svg   { display: block; height: 18px; width: auto; }

.nn-card {
  background: var(--nn-surface);
  border: 1px solid var(--nn-rule);
  border-radius: var(--nn-radius);
  box-shadow: var(--nn-sh);
}
.nn-card-hi { box-shadow: var(--nn-sh-hi); border-color: transparent; }

.nn-eyebrow {
  font-size: 10.5px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--nn-ink-2);
}
.nn-band .nn-eyebrow { color: var(--nn-band-ink); }

.nn-dot { width: 8px; height: 8px; border-radius: 99px; background: var(--nn-brand); }

.nn-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 44px; padding: 11px 16px; border: 0; cursor: pointer;
  border-radius: 11px; font-size: 14.5px; font-weight: 600;
  text-decoration: none; transition: filter .15s;
}
.nn-btn:hover { filter: brightness(.94); }
.nn-btn-primary { background: var(--nn-brand); color: var(--nn-brand-ink); }
.nn-btn-ghost   { background: var(--nn-surface-2); color: var(--nn-ink); border: 1px solid var(--nn-rule); }

.nn-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px 4px; border-radius: 999px;
  font-size: 10.5px; font-weight: 600; letter-spacing: .02em;
}
.nn-chip::before { content: ""; width: 6px; height: 6px; border-radius: 99px; background: currentColor; }

.nn-st-nouveau   { background: var(--nn-st-nouveau-bg);  color: var(--nn-st-nouveau-fg); }
.nn-st-rdv_pris  { background: var(--nn-st-rdv-bg);      color: var(--nn-st-rdv-fg); }
.nn-st-a_verifier{ background: var(--nn-st-verif-bg);    color: var(--nn-st-verif-fg); }
.nn-st-en_cours  { background: var(--nn-st-encours-bg);  color: var(--nn-st-encours-fg); }
.nn-st-termine   { background: var(--nn-st-termine-bg);  color: var(--nn-st-termine-fg); }
.nn-st-annule    { background: var(--nn-st-annule-bg);   color: var(--nn-st-annule-fg); }

/* onglets */
.nn-tab {
  padding: 13px 4px 11px; background: transparent; border: 0;
  border-bottom: 3px solid transparent; cursor: pointer;
  font-family: var(--nn-font-disp); font-size: 15.5px; font-weight: 500;
  color: var(--nn-ink-2);
}
.nn-tab.is-active { border-bottom-color: var(--nn-brand); color: var(--nn-ink); font-weight: 600; }

/* barre de charge */
.nn-load     { display: flex; height: 10px; border-radius: 99px; overflow: hidden; }
.nn-load > span { display: block; }
.nn-load > span + span { margin-left: 2px; }

/* bloc date des cartes mission */
.nn-datebox {
  flex-shrink: 0; width: 54px; padding: 8px 0 9px;
  border-radius: var(--nn-radius-sm); text-align: center;
}

/* =========================================================================
 * REMAP DE TRANSITION
 * -------------------------------------------------------------------------
 * Les ecrans pas encore refondus ecrivent encore les classes Tailwind sombres
 * en dur (bg-gray-800, text-gray-400...). Tant qu'ils ne sont pas migres, on
 * les fait pointer sur les tokens pour qu'ils suivent le theme.
 * A SUPPRIMER au fur et a mesure que chaque ecran passe aux classes .nn-*.
 * ====================================================================== */
.bg-gray-900 { background-color: var(--nn-page) !important; }
.bg-gray-800 { background-color: var(--nn-surface) !important; }
.bg-gray-750 { background-color: var(--nn-surface-2) !important; }
.bg-gray-700 { background-color: var(--nn-surface-2) !important; }
.bg-gray-600 { background-color: var(--nn-surface-3) !important; }
.hover\:bg-gray-700:hover,
.hover\:bg-gray-600:hover { background-color: var(--nn-surface-3) !important; }

.border-gray-700, .border-gray-600 { border-color: var(--nn-rule) !important; }
.divide-gray-700 > * + * { border-color: var(--nn-rule) !important; }

.text-gray-300, .text-gray-400 { color: var(--nn-ink-2) !important; }
.text-gray-500, .text-gray-600 { color: var(--nn-ink-3) !important; }
.placeholder-gray-400::placeholder { color: var(--nn-ink-3) !important; }

/* text-white : reste blanc sur un fond sature, devient l'encre du theme ailleurs */
.text-white:not([class*="bg-blue-"]):not([class*="bg-purple-"]):not([class*="bg-green-"]):not([class*="bg-red-"]):not([class*="bg-orange-"]):not([class*="bg-yellow-"]):not([class*="bg-indigo-"]):not([class*="bg-pink-"]):not([class*="bg-teal-"]):not([class*="bg-cyan-"]):not([class*="bg-gradient"]):not([class*="badge-"]):not(.nn-btn-primary):not(.nn-band) { color: var(--nn-ink) !important; }

[class*="bg-blue-"]   .text-white, [class*="bg-purple-"] .text-white,
[class*="bg-green-"]  .text-white, [class*="bg-red-"]    .text-white,
[class*="bg-orange-"] .text-white, [class*="bg-yellow-"] .text-white,
[class*="bg-gradient"] .text-white, [class*="badge-"]    .text-white,
.nn-band .text-white { color: #FFFFFF !important; }

/* badges de statut historiques : on les branche sur les tokens metier */
.badge-nouveau    { background: var(--nn-st-nouveau-bg) !important; color: var(--nn-st-nouveau-fg) !important; }
.badge-rdv_pris   { background: var(--nn-st-rdv-bg)     !important; color: var(--nn-st-rdv-fg)     !important; }
.badge-a_verifier { background: var(--nn-st-verif-bg)   !important; color: var(--nn-st-verif-fg)   !important; }
.badge-en_cours   { background: var(--nn-st-encours-bg) !important; color: var(--nn-st-encours-fg) !important; }
.badge-termine    { background: var(--nn-st-termine-bg) !important; color: var(--nn-st-termine-fg) !important; }
.badge-annule     { background: var(--nn-st-annule-bg)  !important; color: var(--nn-st-annule-fg)  !important; }

/* creneaux du calendrier (styles inline de index.php) */
.slot-card  { background: var(--nn-surface-2) !important; border-color: var(--nn-rule) !important; }
.slot-card:hover { background: var(--nn-surface-3) !important; }
.slot-date  { color: var(--nn-ink) !important; }
.slot-reason{ color: var(--nn-ink-2) !important; }

/* lignes d'information d'une fiche (icone + libelle + valeur) */
.nn-row {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 16px; border-top: 1px solid var(--nn-rule);
  text-decoration: none; color: inherit;
}
a.nn-row:hover { background: var(--nn-surface-2); }
.nn-row-ic {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; flex-shrink: 0;
  background: var(--nn-surface-2); color: var(--nn-ink-2);
  border-radius: var(--nn-radius-sm);
}
.nn-row-label {
  display: block; font-size: 10.5px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--nn-ink-2);
}
.nn-row-value { display: block; font-size: 14.5px; font-weight: 500; color: var(--nn-ink); margin-top: 2px; }

/* boutons d'action : la teinte vient de l'etat metier via .nn-st-* */
.nn-action {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 44px; padding: 11px 14px; border: 0; cursor: pointer;
  border-radius: 11px; font-size: 13.5px; font-weight: 600;
  text-align: center; text-decoration: none; transition: filter .15s;
}
.nn-action:hover { filter: brightness(.94); }

/* retour arriere */
.nn-back {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0; margin-bottom: 8px;
  background: transparent; border: 0; cursor: pointer;
  font-size: 13.5px; font-weight: 600; color: var(--nn-ink-2);
}
.nn-back:hover { color: var(--nn-ink); }

/* titre de section dans une fiche */
.nn-section-title {
  font-family: var(--nn-font-disp); font-size: 16px; font-weight: 600;
  color: var(--nn-ink); letter-spacing: -0.01em; margin: 0 0 10px;
}


/* --- Variantes a opacite (bg-gray-700/50, bg-red-900/30...) ---------------
   Le remap par classe exacte ne les attrape pas : la classe generee est
   `bg-gray-700\/50`. On passe donc par un selecteur d'attribut, qui couvre
   toutes les opacites d'un coup. Ces fonds translucides sombres servaient
   de panneaux et de pastilles : ils deviennent des surfaces ou des teintes
   d'etat metier. -------------------------------------------------------- */
[class*="bg-gray-700/"] { background-color: var(--nn-surface-2) !important; }
[class*="bg-gray-800/"] { background-color: var(--nn-surface) !important; }
[class*="bg-gray-900/"] { background-color: var(--nn-surface) !important; }
[class*="bg-gray-600/"] { background-color: var(--nn-surface-3) !important; }

[class*="bg-blue-900/"], [class*="bg-blue-800/"] { background-color: var(--nn-st-nouveau-bg) !important; }
[class*="bg-purple-900/"], [class*="bg-purple-800/"] { background-color: var(--nn-st-rdv-bg) !important; }
[class*="bg-orange-900/"], [class*="bg-orange-800/"] { background-color: var(--nn-st-verif-bg) !important; }
[class*="bg-yellow-900/"], [class*="bg-yellow-800/"] { background-color: var(--nn-st-encours-bg) !important; }
[class*="bg-green-900/"], [class*="bg-green-800/"] { background-color: var(--nn-st-termine-bg) !important; }
[class*="bg-red-900/"], [class*="bg-red-800/"] { background-color: var(--nn-st-annule-bg) !important; }

/* --- Textes clairs prevus pour un fond sombre ------------------------------
   220 occurrences dans le projet. Sur une surface claire ils sont illisibles :
   on les ramene sur l'encre de l'etat metier correspondant, qui garde le sens
   et le contraste dans les deux themes. ---------------------------------- */
.text-blue-300, .text-blue-400 { color: var(--nn-st-nouveau-fg) !important; }
.text-purple-300, .text-purple-400 { color: var(--nn-st-rdv-fg) !important; }
.text-orange-300, .text-orange-400 { color: var(--nn-st-verif-fg) !important; }
.text-yellow-300, .text-yellow-400 { color: var(--nn-st-encours-fg) !important; }
.text-green-300, .text-green-400 { color: var(--nn-st-termine-fg) !important; }
.text-red-300, .text-red-400 { color: var(--nn-st-annule-fg) !important; }
.text-indigo-300, .text-indigo-400 { color: var(--nn-st-rdv-fg) !important; }

/* Sur un bandeau de marque, le texte doit rester clair. */
.nn-band .text-gray-300, .nn-band .text-gray-400 { color: var(--nn-band-mut) !important; }

/* Bordures colorees : elles portent le meme sens que le fond, on les aligne
   sur l'encre de l'etat metier. Couvre aussi les variantes a opacite. */
[class*="border-blue-400"], [class*="border-blue-500"], [class*="border-blue-600"], [class*="border-blue-700"], [class*="border-blue-800"], [class*="border-blue-900"] { border-color: var(--nn-st-nouveau-fg) !important; }
[class*="border-purple-400"], [class*="border-purple-500"], [class*="border-purple-600"], [class*="border-purple-700"], [class*="border-purple-800"], [class*="border-purple-900"] { border-color: var(--nn-st-rdv-fg) !important; }
[class*="border-orange-400"], [class*="border-orange-500"], [class*="border-orange-600"], [class*="border-orange-700"], [class*="border-orange-800"], [class*="border-orange-900"] { border-color: var(--nn-st-verif-fg) !important; }
[class*="border-yellow-400"], [class*="border-yellow-500"], [class*="border-yellow-600"], [class*="border-yellow-700"], [class*="border-yellow-800"], [class*="border-yellow-900"] { border-color: var(--nn-st-encours-fg) !important; }
[class*="border-green-400"], [class*="border-green-500"], [class*="border-green-600"], [class*="border-green-700"], [class*="border-green-800"], [class*="border-green-900"] { border-color: var(--nn-st-termine-fg) !important; }
[class*="border-red-400"], [class*="border-red-500"], [class*="border-red-600"], [class*="border-red-700"], [class*="border-red-800"], [class*="border-red-900"] { border-color: var(--nn-st-annule-fg) !important; }

/* --- Fonds satures : le texte doit rester blanc ---------------------------
   82 boutons du projet portent un fond colore SANS classe `text-white` : ils
   heritaient du blanc de `body class="text-white"`, retire avec le passage au
   theme clair. Sans cette regle, ils s'affichent en encre sombre sur bleu.
   Selecteurs de classe EXACTS a dessein : `.bg-blue-500` ne matche pas
   `bg-blue-500/30`, qui est une teinte claire et doit garder une encre sombre. */
.bg-blue-500, .bg-blue-600, .bg-blue-700, .bg-green-500, .bg-green-600,
.bg-green-700, .bg-indigo-500, .bg-orange-500, .bg-orange-600, .bg-orange-700,
.bg-orange-800, .bg-purple-500, .bg-purple-600, .bg-purple-700, .bg-red-500,
.bg-red-600, .bg-red-700, .bg-red-800, .bg-yellow-500, .bg-yellow-600,
.bg-yellow-700 { color: #FFFFFF !important; }

/* Le jaune sature est trop clair pour du blanc : on garde une encre sombre. */
.bg-yellow-500, .bg-yellow-600 { color: #14161A !important; }
/* Degrades historiques (dont le bleu -> violet, signature a bannir) : aplatis.
   Les bandeaux passent sur la couleur de marque, les cartes sur une surface. */
[class*="bg-gradient-to-"] { background-image: none !important; background-color: var(--nn-band) !important; }
[class*="bg-gradient-to-"][class*="from-gray-"] { background-color: var(--nn-surface) !important; }
[class*="bg-gradient-to-"]:not([class*="from-gray-"]) { color: var(--nn-band-ink) !important; }

/* =============================================================================
 * Champs date / heure sur iOS (19/09/2026)
 * Safari iOS donne a ces champs une largeur intrinseque qui ignore width:100% :
 * ils debordaient de l'ecran (compte rendu, report de RDV, planning). On retire
 * l'apparence native (le selecteur iOS s'ouvre toujours au toucher), on borne la
 * largeur, et on autorise leur conteneur de grille/flex a retrecir.
 * ========================================================================== */
input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"] {
    -webkit-appearance: none;
    appearance: none;
    display: block;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    min-height: 44px;
    line-height: 1.25;
}
input[type="date"]::-webkit-date-and-time-value,
input[type="time"]::-webkit-date-and-time-value,
input[type="datetime-local"]::-webkit-date-and-time-value,
input[type="month"]::-webkit-date-and-time-value {
    text-align: left;
    margin: 0;
    min-height: 1.25em;
}
*:has(> input[type="date"]), *:has(> input[type="time"]), *:has(> input[type="datetime-local"]) {
    min-width: 0;
}

/* =============================================================================
 * Boutons d'action a la couleur Nordnet (19/09/2026)
 * Les anciens boutons Tailwind bleus (bg-blue-500/600/700) passent au rouge du
 * logo, comme .nn-btn-primary. Limite aux vrais boutons (button, a, submit) :
 * les pastilles de statut « nouveau » du planning, les avatars et les legendes
 * restent bleus, ce sont des couleurs d'etat, pas des actions.
 * ========================================================================== */
button.bg-blue-500, button.bg-blue-600, button.bg-blue-700,
a.bg-blue-500, a.bg-blue-600, a.bg-blue-700,
input[type="submit"].bg-blue-600, input[type="button"].bg-blue-600 {
    background-color: var(--nn-brand) !important;
    border-color: var(--nn-brand) !important;
    color: var(--nn-brand-ink) !important;
}
button.bg-blue-500 *, button.bg-blue-600 *, button.bg-blue-700 *,
a.bg-blue-500 *, a.bg-blue-600 *, a.bg-blue-700 * { color: inherit !important; }
button.hover\:bg-blue-600:hover, button.hover\:bg-blue-700:hover, button.hover\:bg-blue-800:hover,
a.hover\:bg-blue-600:hover, a.hover\:bg-blue-700:hover, a.hover\:bg-blue-800:hover,
button[class*="bg-blue-"]:not([class*="bg-blue-"][class*="/"]):active {
    background-color: var(--nn-brand-deep) !important;
    border-color: var(--nn-brand-deep) !important;
}
button.bg-blue-600:disabled, button.bg-blue-700:disabled { opacity: .5; }
/* Anneau de focus des champs : meme rouge que les boutons, au lieu du bleu Tailwind. */
[class*="focus:ring-blue-"]:focus { --tw-ring-color: var(--nn-brand) !important; }
[class*="focus:border-blue-"]:focus { border-color: var(--nn-brand) !important; }

/* =============================================================================
 * Bandeau unique (19/09/2026) : partials/header_band.php ET index.php (renderHeader)
 * ========================================================================== */
.nn-bandeau { position: relative; z-index: 60; }
.nn-bandeau-colle { position: sticky; top: 0; }
.nn-bandeau-in { display: flex; align-items: center; gap: 12px; min-height: 56px; max-width: 80rem; margin: 0 auto; padding: 6px 16px; }
.nn-bandeau-logo { flex-shrink: 0; color: var(--nn-band-ink); }
.nn-bandeau-sep { width: 1px; height: 20px; background: var(--nn-band-mut); opacity: .4; }
.nn-bandeau-titre { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; color: var(--nn-band-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.nn-bandeau-droite { margin-left: auto; display: flex; align-items: center; gap: 8px; margin-right: -8px; min-width: 0; }
.nn-bandeau-nom { font-size: 12px; white-space: nowrap; }
.nn-bandeau-nav { display: flex; align-items: center; gap: 2px; }
.nn-bandeau-btn { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex-shrink: 0; color: var(--nn-band-ink); background: transparent; border: 0; border-radius: 0; cursor: pointer; text-decoration: none; }
.nn-bandeau-btn:hover { background: rgba(255, 255, 255, .08); }
.nn-bandeau-btn.is-ici { box-shadow: inset 0 -3px 0 var(--nn-brand); }
@media (max-width: 640px) {
  .nn-bandeau-nom, .nn-bandeau-sep, .nn-bandeau-titre { display: none; }
  .nn-bandeau-btn { width: 42px; }
}

/* Trois onglets sur une ligne au telephone (19/09/2026) */
.nn-tab { white-space: nowrap; }
@media (max-width: 480px) {
  .nn-tab { font-size: 14px; padding-left: 0; padding-right: 0; }
}

/* Boutons « Appeler » et « Nouvelle mission » (19/09/2026) : orange de la marque
   Orange (#FF7900), texte blanc (demande utilisateur), en gras pour rester lisible. */
.nn-btn-orange { background: #FF7900 !important; color: #fff !important; font-weight: 700 !important; border: 0; cursor: pointer; }
.nn-btn-orange * { color: inherit !important; }
.nn-btn-orange:hover, .nn-btn-orange:active { background: #F16E00 !important; }
.nn-btn-orange:focus-visible { outline: 2px solid #000; outline-offset: 2px; }

/* Demarrer (vert, texte blanc) et Reprendre l'intervention (jaune, texte sombre
   pour rester lisible) sur les cartes et la fiche mission (19/09/2026). */
.nn-btn-go { background: #15803d !important; color: #fff !important; font-weight: 700 !important; border: 0; cursor: pointer; }
.nn-btn-go:hover, .nn-btn-go:active { background: #116932 !important; }
.nn-btn-reprise { background: #FACC15 !important; color: #1F1A05 !important; font-weight: 700 !important; border: 0; cursor: pointer; }
.nn-btn-reprise:hover, .nn-btn-reprise:active { background: #EAB308 !important; }
.nn-btn-go *, .nn-btn-reprise * { color: inherit !important; }

/* Bandeau a 7 icones (Factures, 19/09/2026) : tient sur un iPhone */
@media (max-width: 420px) {
  .nn-bandeau-in { gap: 6px; padding-left: 12px; padding-right: 12px; }
  .nn-bandeau-logo svg { width: 92px; height: auto; }
  .nn-bandeau-btn { width: 36px; }
  .nn-bandeau-droite { margin-right: -4px; }
}