/* Thème de Tableau de bord v1 (direction A « outil pro sombre », et sa version claire). Voir DESIGN.md.
   Toutes les pages utilisent les mêmes noms de couleurs (--bg, --card, --txt…) : ce fichier les remplace selon le thème
   choisi dans Réglages > Affichage (html[data-theme], posé par static/theme.js avant l'affichage). */
/* Thème d'Arkora (charte du 2 novembre 2026) : bleu nuit #0B1F3A, une seule couleur vive, le cyan #00C8DE ; fond blanc
   ou bleu nuit, pas de dégradé. Mêmes noms de couleurs que nos autres applis (--bg, --card, --acc…). Mode sombre = bleu nuit. */
html[data-theme="sombre"]{color-scheme:dark;
  --bg:#0b1f3a;--card:#132a4c;--card2:#1b355c;--champ:#132a4c;--bd:#26426d;--bd2:#335181;
  --txt:#ffffff;--mut:#9db0ca;--acc:#00c8de;--acc2:#00c8de;--on-acc:#0b1f3a;--acc-doux:rgba(0,200,222,.14);
  --ok:#34d399;--ko:#ff6b6b;--warn:#fbbf24;--menu:#0a1a32;--menu-txt:#b8c6da;--menu-actif:#1b355c;--r:12px;
  --remplissage:rgba(157,176,202,.16);--pouce:#41608f}
html[data-theme="clair"]{color-scheme:light;   /* textes cyan : #00869A, le cyan de la charte assombri pour rester lisible sur blanc */
  --bg:#f4f6f9;--card:#ffffff;--card2:#eef1f5;--champ:#ffffff;--bd:#d6dce6;--bd2:#b8c2d1;
  --txt:#0b1f3a;--mut:#5b6b82;--acc:#0b1f3a;--acc2:#00869a;--on-acc:#ffffff;--acc-doux:rgba(0,200,222,.12);
  --ok:#15803d;--ko:#c81e1e;--warn:#b45309;--menu:#ffffff;--menu-txt:#3a4a62;--menu-actif:#eef1f5;--r:12px;
  --remplissage:rgba(11,31,58,.07);--pouce:#ffffff}
html[data-theme] body{background:var(--bg);color:var(--txt);-webkit-font-smoothing:antialiased;
  font-family:"Space Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;font-weight:500}
/* le nom ARKORA (charte : Space Grotesk Bold, capitales, approche +270) */
.arkora-nom{font-family:"Space Grotesk",sans-serif;font-weight:700;letter-spacing:.27em;text-transform:uppercase;color:var(--txt)}
/* chiffres alignés, traits fins, un seul arrondi discret */
html[data-theme] .gros,html[data-theme] .kpi b,html[data-theme] .kpi .val,html[data-theme] td{font-variant-numeric:tabular-nums}
html[data-theme] .carte,html[data-theme] .card,html[data-theme] .kpi,html[data-theme] section.version,html[data-theme] main>section{border-radius:8px;box-shadow:none}
html[data-theme] input,html[data-theme] select,html[data-theme] textarea{background:var(--champ);color:var(--txt);border-color:var(--bd)}
html[data-theme] ::placeholder{color:var(--mut)}
@media (prefers-reduced-motion: reduce){html[data-theme] *{transition:none!important}}
/* bandeau des relances (page Prospects) : discret, pas un aplat de couleur */
html[data-theme] .bandeau{background:var(--card);color:var(--warn);border:1px solid color-mix(in srgb,var(--warn) 45%,transparent);border-radius:8px;font-weight:500}
html[data-theme] .bandeau.retard{background:var(--card);color:var(--ko);border-color:color-mix(in srgb,var(--ko) 45%,transparent)}
/* Retour à l'appui (règle Apple : réagir dès qu'on appuie, pas au relâchement). Voir DESIGN.md. */
html[data-theme] :is(button,.btn,.bouton,input[type=submit],input[type=button]){-webkit-tap-highlight-color:transparent;transition:transform .1s ease-out}
html[data-theme] :is(button,.btn,.bouton,input[type=submit],input[type=button]):not(:disabled):active{transform:scale(.97)}
/* Fenêtres : apparition et fermeture courtes (fond en fondu, carte qui grandit légèrement ; par le bas sur téléphone) */
html[data-theme] .modal{opacity:0;transition:opacity .16s ease-out,display .16s allow-discrete}
html[data-theme] .modal.open{opacity:1}
html[data-theme] .modal .card{transform:scale(.97);transition:transform .2s cubic-bezier(.2,.8,.2,1)}
html[data-theme] .modal.open .card{transform:none}
@starting-style{html[data-theme] .modal.open{opacity:0}html[data-theme] .modal.open .card{transform:scale(.97)}}
@media (max-width:760px){html[data-theme] .modal .card{transform:translateY(24px)}
  @starting-style{html[data-theme] .modal.open .card{transform:translateY(24px)}}}
/* Taille du texte : toutes les tailles sont en rem, donc suivent la taille de base de la page.
   Sur téléphone et tablette Apple, la base suit le réglage du système (Réglages > Luminosité et affichage > Taille du texte) ;
   17 px par défaut sur iPhone. Réservé aux écrans tactiles : sur Mac, cette valeur vaut 13 px et réduirait tout. */
@media (hover:none) and (pointer:coarse){@supports (font:-apple-system-body){html[data-theme]{font:-apple-system-body}}}
/* Grands titres : lettres un peu resserrées (plus le texte est grand, plus il paraît espacé) */
html[data-theme] h1{letter-spacing:-.01em}
/* Chargement d'une page (style v2) : roue façon iPhone, bien visible au milieu de l'écran (templates/react.html et
   composant Chargement de interface/src/communs.tsx). Elle tourne aussi avec « moins d'animations », plus lentement. */
.chargement-page{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;min-height:55vh;color:var(--mut);font-size:1rem;font-weight:500}
.roue{width:48px;height:48px;color:var(--acc);animation:roue .9s steps(8) infinite}
@keyframes roue{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){.roue{animation-duration:2.4s}}
/* pas de zoom dans l'appli (pincement ni double appui), comme une vraie appli (15/10/2026). Les cartes Leaflet gardent
   leur propre zoom à deux doigts. Pour Safari sur iPhone, voir aussi theme.js (gesturestart). */
html{touch-action:pan-x pan-y}

/* icône d'Arkora : bleu nuit + cyan sur fond clair, blanc + cyan sur fond bleu nuit (charte) */
html[data-theme="clair"] .icone-sombre,html[data-theme="sombre"] .icone-clair{display:none}