/* ══════════════════════════════════════════════════════════════════════════
   ÉlecPro — HABILLAGE « APPLE / iOS »            (2026-08-11, demande Ludovic)
   ══════════════════════════════════════════════════════════════════════════

   ⚠️ FICHIER SÉPARÉ, comme desktop.css. Il n'ajoute AUCUN comportement :
      il ne fait que ré-habiller ce qui existe déjà.
      ROLLBACK = supprimer la ligne <link href="apple.css"> d'index.html (10 s).

   ⚠️ TOUS les sélecteurs sont préfixés `html` (ou `html:root`).
      Raison : les <style> injectés par renderHome() et renderEq() sont insérés
      dans le DOM APRÈS ce fichier → à spécificité égale ils gagneraient.
      Le préfixe `html` ajoute +1 en spécificité et règle ça sans !important.
      `html:root` (0,1,1) bat le `:root` (0,1,0) d'index.html.
      `html body.dark` (0,1,2) repasse ensuite devant : le mode sombre reste roi.

   ⚠️ INTERDITS ABSOLUS ici (pièges vécus, cf. mémoire) :
      · `#bottom-nav { display: … }`  → piloté en style INLINE par updateBottomNav()
        et bnavSyncViewport(). Une règle CSS afficherait la barre aux salariés.
      · `#ct { overflow-y / max-height }` → piège scroll iOS du 10/07.
      · `.card { border: 1px … }` → écraserait les liserés de statut inline.
   ══════════════════════════════════════════════════════════════════════════ */


/* ── 1. PALETTE ────────────────────────────────────────────────────────────
   ⚠️ RÉVISION DU 11/08 (20h50) — Ludovic : « l'amélioration n'est pas mal mais les
   couleurs sont trop flashy, ça fait cartoon ».
   Le 1er jet utilisait les couleurs SYSTÈME d'iOS (#007AFF, #FF9500, #FF3B30…) :
   très saturées, et par-dessus des emojis déjà colorés → effet dessin animé.
   Or l'app LCPA avait à l'origine une palette MATE (orange doré #E8A020, rouge
   brique #B53030, vert forêt #1C7A48). On garde donc la MISE EN PAGE iOS (grands
   titres, listes groupées, segmented control, espacements) et on revient à des
   couleurs sourdes, dans l'esprit d'origine — juste posées sur le fond gris froid. */
html:root{
  --bg:#F3F3F5;        /* gris neutre doux (moins bleuté que le #F2F2F7 d'iOS) */
  --s:#FFFFFF;         /* cartes, listes */
  --br:#E5E4E7;        /* séparateur / bordure */
  --f:#EFEEF1;         /* remplissage (champs, boutons gris) */
  --dk:#1C1C1E;        /* texte principal */
  --mid:#7C7B80;       /* texte secondaire */
  --ac:#C98A21;        /* orange DORÉ mat (était #E8A020 à l'origine, #FF9500 en trop vif) */
  --al:#FAF2E4;
  --ad:#96650F;
  --gr:#2C6E4C;        /* vert forêt */
  --gl:#E9F2EC;
  --rd:#A93F38;        /* rouge brique (et non le rouge pompier #FF3B30) */
  --rl:#F8ECEB;
  --bl:#2F5EA8;        /* bleu profond mat */
  --bll:#ECF1F8;
  --pu:#5C4B8A;        /* violet ardoise */
  --pl:#EFEDF6;
  /* Ajouts propres à cette feuille */
  --ios-sep:#E6E5E9;
  --ios-radius:16px;
}

/* ── 2. TYPOGRAPHIE ───────────────────────────────────────────────────────
   SF Pro d'abord, chiffres tabulaires (les montants s'alignent en colonne). */
html body{
  font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','SF Pro Display','Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  letter-spacing:-.01em;
}
html .amt,html .eh-hero-big,html .eh-badge{font-variant-numeric:tabular-nums}

/* Grand titre iOS (« Large Title ») — classe posée sur chaque écran.
   Remplace les anciens titres inline 18px/900. */
html .scr-t{
  font-size:30px;font-weight:800;letter-spacing:-.9px;line-height:1.12;
  color:var(--dk);margin:2px 0 16px;display:block;
}
html .scr-t .scr-t-sub{
  display:block;font-size:14px;font-weight:600;color:var(--mid);
  letter-spacing:-.2px;margin-top:3px;
}
/* Titre + bouton d'action sur la même ligne.
   Beaucoup d'écrans posent déjà leur titre dans un conteneur flex avec un bouton
   à droite (« 📝 Devis » + 🔄, « 🎙️ Assistant » + 📁…). Dans ce cas le titre ne
   doit pas garder sa marge basse, sinon la ligne se décale. */
html .scr-hd{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:16px}
html .scr-hd .scr-t,
html div[style*="display:flex"] > .scr-t{margin-bottom:0;flex:1;min-width:0}

/* Intertitres de groupe (« DOCUMENTS », « RÉFÉRENCES »…) : iOS les écrit
   en minuscules discrètes, pas en capitales criardes. */
html .stt span,html .eh-sec,html .eq-grp,html .eh-lbl,html .ca-jauge-lbl,html .sect-t{
  font-size:13px;font-weight:600;color:var(--mid);
  text-transform:none;letter-spacing:-.08px;
}
/* Les ~78 petits labels posés en style INLINE (`text-transform:uppercase`, 11-13 px,
   weight 800) : même traitement. Un style inline ne se bat qu'avec !important —
   c'est la technique déjà employée par les règles `body.dark [style*=…]`.
   Rollback ciblé : supprimer ce seul bloc. */
html [style*="text-transform:uppercase"]{
  text-transform:none!important;
  font-weight:600!important;
  letter-spacing:-.08px!important;
}
html .stt{margin-bottom:7px;padding:0 4px}
html .eh-sec{margin:6px 4px 8px}
html .eq-grp{margin:22px 6px 7px}

/* ── 3. LISTES GROUPÉES (le cœur du style iOS) ────────────────────────────
   .eh-list = le conteneur, .eh-row = la ligne. Déjà partout dans l'app
   (Accueil, Compta, Facturation, Réglages, menus ⋮) → on les affine ici et
   TOUS les écrans suivent d'un coup. */
html .eh-list{
  background:var(--s);
  border-radius:var(--ios-radius);
  box-shadow:none;                       /* iOS n'ombre pas les listes groupées */
  overflow:hidden;
  margin-bottom:18px;
}
html .eh-row{
  padding:11px 16px;gap:12px;
  border-bottom:.5px solid var(--ios-sep);   /* filet fin façon Retina */
  min-height:48px;
  transition:background .12s;
}
html .eh-row:last-child{border-bottom:none}
html .eh-row:active{background:var(--f)}
/* Séparateur en retrait, aligné sur le texte (le détail qui fait « iOS ») */
html .eh-row{position:relative;border-bottom-color:transparent}
html .eh-row:after{
  content:'';position:absolute;left:60px;right:0;bottom:0;height:.5px;
  background:var(--ios-sep);
}
html .eh-row:last-child:after{display:none}

html .eh-row-ic{
  width:30px;height:30px;border-radius:7.5px;   /* icône « app » iOS */
  font-size:16px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
}
html .eh-row-nm{font-size:16px;font-weight:400;letter-spacing:-.3px}
html .eh-chev{
  color:#C7C7CC;font-size:15px;font-weight:600;
  flex-shrink:0;margin-left:2px;
}
/* Pastilles de ton — ⚠️ RÉVISION 11/08 : le 1er jet les faisait PLEINES et vives
   (#007AFF, #FF9500…). Les vrais Réglages iOS le font avec un glyphe BLANC ; ici
   les icônes sont des EMOJIS, déjà colorés → couleur sur couleur = effet cartoon.
   Retour à des fonds sourds très clairs : l'emoji porte la couleur, le fond
   n'apporte que la nuance. (C'était déjà le principe de l'app avant la refonte.) */
html .eh-row.blue   .eh-row-ic{background:#EAF0F8;color:#2F5EA8}
html .eh-row.amber  .eh-row-ic{background:#F8F1E2;color:#96650F}
html .eh-row.violet .eh-row-ic{background:#EFEDF6;color:#5C4B8A}
html .eh-row.teal   .eh-row-ic{background:#E7F1F0;color:#2A6A66}
html .eh-row.slate  .eh-row-ic{background:#EDECEF;color:#5F5F66}
html .eh-row.green  .eh-row-ic{background:#E9F2EC;color:#2C6E4C}
html .eh-row.red    .eh-row-ic{background:#F8ECEB;color:#A93F38}

/* Valeur grise à droite (état) — pattern des Réglages iOS */
html .eq-val{font-size:16px;color:var(--mid);font-weight:400;letter-spacing:-.3px}
html .eq-sub{font-size:12.5px;color:var(--mid);font-weight:400;margin-top:0}

/* Badge de compteur : pastille pleine iOS */
html .eh-badge{
  background:var(--f);color:var(--mid);
  border-radius:20px;padding:2px 9px;font-size:14px;font-weight:600;
  min-width:22px;text-align:center;
}
html .eh-badge.warn{background:var(--rd);color:#fff;font-weight:700}

/* ── 4. CARTES ────────────────────────────────────────────────────────────
   ⚠️ On NE touche PAS à `border` (les liserés de statut sont inline). */
html .card{
  border-radius:var(--ios-radius);
  box-shadow:none;
  padding:14px 16px;
  margin-bottom:11px;
}
html .cdsm{border-radius:12px;border-color:var(--ios-sep)}
/* Tuiles de l'accueil */
html .eh-hero{
  border-radius:var(--ios-radius);
  box-shadow:none;
  padding:15px 15px 17px;
}
html .eh-hero:active{transform:scale(.97);transition:transform .1s}
html .eh-hero-ic{width:38px;height:38px;border-radius:9.5px;font-size:19px;margin-bottom:22px}
html .eh-hero-t{font-size:13px;font-weight:500;color:var(--mid);letter-spacing:-.1px}
html .eh-hero-big{font-size:26px;font-weight:700;letter-spacing:-1px;margin-top:4px}
html .eh-hero-sub{font-size:12.5px;font-weight:400;margin-top:1px}

/* ── 4 bis. ACCUEIL ───────────────────────────────────────────────────────
   ⚠️ Le dégradé de l'en-tête se terminait sur l'ANCIEN beige (#F0EFE9) écrit en dur :
   avec la nouvelle palette il laissait une marche visible au raccord. Il finit
   maintenant sur var(--bg) → se raccorde tout seul, mode sombre compris. */
html .eh-head{
  background:linear-gradient(180deg,#12233F 0%,#25406E 42%,#7E97C4 80%,var(--bg) 100%);
  padding-bottom:22px;
}
html .eh-hi{font-size:26px;font-weight:800;letter-spacing:-.7px}
html .eh-date{font-size:13px;color:rgba(255,255,255,.85);font-weight:400}
/* Les 5 boutons ronds de l'en-tête : carrés arrondis façon icône d'app iOS */
html .eh-cam,html .eh-note,html .eh-mic,html .eh-ret{
  width:52px;height:52px;border-radius:14px;
  background:rgba(255,255,255,.22);border:none;
}
html .eh-cam:active,html .eh-note:active,html .eh-mic:active,html .eh-ret:active{transform:scale(.92)}
/* Carte « Ma journée » */
html .eh-today{border-radius:var(--ios-radius);box-shadow:none;padding:12px 15px}
html .eh-today .eh-tic{width:34px;height:34px;border-radius:8.5px;background:var(--bll);color:var(--bl);font-size:16px}
html .eh-todayval{font-size:16px;font-weight:500;letter-spacing:-.3px}
html .eh-lbl{font-size:12.5px;font-weight:400}
html .eh-heroes{gap:11px;margin-bottom:20px}

/* ── 5. BOUTONS ───────────────────────────────────────────────────────────
   iOS : coins très arrondis, pas d'ombre, retour au toucher par l'opacité. */
html .btn{
  border-radius:12px;font-weight:600;font-size:16px;letter-spacing:-.3px;
  padding:12px 18px;box-shadow:none;transition:opacity .1s,transform .1s;
}
html .btn:active{opacity:.55;transform:scale(.985)}
html .bsm{border-radius:10px;font-size:14px;padding:8px 14px;min-height:34px}
html .bxs{border-radius:8px;font-size:12.5px;padding:6px 11px;min-height:29px;font-weight:600}
html .bfl{border-radius:13px}
/* Tons : plein pour l'action principale, teinté pour les secondaires */
html .bdk{background:var(--dk);color:#fff}
html .bac{background:var(--ac);color:#fff}
html .brd{background:var(--rd);color:#fff}
html .bgr{background:var(--gl);color:var(--gr)}
html .bgh{background:var(--f);color:var(--bl)}
html .bbl{background:var(--bll);color:var(--bl)}
html .bpu{background:var(--pl);color:var(--pu)}
/* Barre d'icônes d'une fiche */
html .ibtn{border-radius:10px}
html .ibtn .iic{font-size:19px}
html .ibtn .ilbl{font-size:9.5px;font-weight:500;color:var(--mid)}
html .ibtn:active{background:var(--f)}

/* ── 6. CHAMPS DE SAISIE ──────────────────────────────────────────────────
   iOS : pas de bordure, un fond gris doux, coins 12. */
html input,html textarea,html select{
  border:none;background:var(--f);border-radius:12px;
  padding:12px 14px;font-size:16px;letter-spacing:-.3px;   /* 16px = pas de zoom auto iOS */
  color:var(--dk);
}
html input:focus,html textarea:focus,html select:focus{
  box-shadow:0 0 0 3.5px rgba(47,94,168,.16);
}
html input[type=checkbox],html input[type=radio]{width:auto;accent-color:var(--bl)}
html .f label,html .lbl{
  font-size:13px;font-weight:600;color:var(--mid);
  text-transform:none;letter-spacing:-.08px;margin-bottom:6px;
}

/* ── 7. SEGMENTED CONTROL (les bascules .tgg / .tg) ───────────────────────
   Ex. « ▶️ Actuel | 🚧 Futur », « 📅 Agenda | ⏱️ Pointage ».
   iOS : un rail gris, une pilule blanche qui glisse. */
html .tgg{
  background:var(--f);border-radius:10px;padding:2px;gap:2px;
  display:inline-flex;flex-wrap:nowrap;width:100%;
  max-width:430px;   /* sur PC il s'étirait sur 1 200 px : iOS ne l'étale jamais */
}
html .tgg .tg{
  flex:1;justify-content:center;
  border:none;background:transparent;border-radius:8px;
  padding:7px 10px;font-size:13.5px;font-weight:600;color:var(--dk);
  transition:background .15s,box-shadow .15s;
}
html .tgg .tg.on{
  background:var(--s);color:var(--dk);
  box-shadow:0 3px 8px rgba(0,0,0,.12),0 3px 1px rgba(0,0,0,.04);
}
/* Les .tg hors d'un .tgg (filtres multi-lignes) restent des puces */
html .tg{border-radius:9px;font-size:13.5px;font-weight:500}

/* ── 8. BARRE DU BAS ──────────────────────────────────────────────────────
   ⚠️ AUCUNE règle `display` ici (cf. en-tête du fichier). */
/* ⚠️ PAS DE `backdrop-filter` ICI (retiré le 11/08 à 21h30 — Ludovic : « j'ai navigué
   et perdu la barre du bas », capture d'écran à l'appui).
   Pourquoi : `repinBottomNav()` et `bnavSyncViewport()` masquent la barre en
   `visibility:hidden` puis la restaurent (repaint anti-dérive iOS + repli du clavier).
   Sur WebKit, un élément `position:fixed` qui porte un `backdrop-filter` est composé
   sur une couche GPU à part : le cycle hidden→visible peut ne jamais être recomposé,
   et la barre **ne revient plus**. Le flou était purement décoratif, le fond opaque
   ne change rien à l'usage. NE PAS LE REMETTRE. */
html #bottom-nav{
  background:var(--s);
  border-top:.5px solid var(--ios-sep);
  box-shadow:0 -1px 10px rgba(0,0,0,.05);
  padding-top:6px;
}
html #bottom-nav button{
  font-size:10px;font-weight:500;letter-spacing:0;color:#8A8A8E;gap:2px;
  transition:color .12s;
}
html #bottom-nav button span{font-size:24px}
html #bottom-nav button.on{color:var(--bl);font-weight:600}
html #bottom-nav button:active{opacity:.5}
/* Pastille de compteur sur un onglet (🧾 = devis acceptés qui attendent leur facture).
   `position:relative` seulement — on ne touche PAS à `display` (piloté en inline). */
html #bottom-nav button{position:relative}
html .bn-bdg{
  position:absolute;top:0;left:50%;margin-left:6px;
  min-width:18px;height:18px;padding:0 5px;
  background:var(--rd);color:#fff;border-radius:9px;
  font-size:11px;font-weight:700;line-height:18px;text-align:center;
  letter-spacing:0;box-shadow:0 0 0 2px var(--s);
}

/* ── 9. EN-TÊTE ───────────────────────────────────────────────────────────
   Le bandeau bleu LCPA est conservé (identité), juste adouci et aplati. */
html #nav{
  background:linear-gradient(180deg,#12233F 0%,#25406E 55%,#3A5F9C 100%);
  box-shadow:none;
}
html #nav-top{padding:14px 16px 6px}

/* ── 10. FEUILLES MODALES (overlays du bas) ───────────────────────────────
   iOS 17 : coins 28, poignée en haut, fond légèrement remonté. */
/* Pas de backdrop-filter non plus sur les overlays : eux aussi sont position:fixed,
   même famille de bug de composition WebKit que la barre du bas. */
html .ov{background:rgba(0,0,0,.38)}
html .sh{
  border-radius:28px 28px 0 0;
  padding:10px 20px calc(env(safe-area-inset-bottom,0px) + 28px);
}
html .sh:before{
  content:'';display:block;width:36px;height:5px;border-radius:3px;
  background:#D1D1D6;margin:0 auto 14px;
}
html .sh-h h3{font-size:18px;font-weight:700;letter-spacing:-.4px}
html .xb{
  background:var(--f);color:#8A8A8E;font-size:17px;font-weight:600;
  width:30px;height:30px;
}
html .xb:active{opacity:.5}

/* ── 11. DIVERS ───────────────────────────────────────────────────────────*/
html .bdg{border-radius:20px;font-size:12px;font-weight:600;padding:3px 9px;letter-spacing:-.1px}
html .swipe-wrap,html .swipe-card{border-radius:var(--ios-radius)}
html .swipe-del{border-radius:0 var(--ios-radius) var(--ios-radius) 0;background:var(--rd);font-weight:600}
html .sw-tr{background:#E9E9EB}
html .sw input:checked+.sw-tr{background:#4C8C63}
html .eq-back{color:var(--bl);font-size:17px;font-weight:400;letter-spacing:-.4px;margin-bottom:8px}
html .eq-titre{font-size:30px;font-weight:800;letter-spacing:-.9px;margin-bottom:16px}
html .eq-nrow{padding:11px 16px;border-bottom:none;position:relative;min-height:48px}
html .eq-nrow:after{content:'';position:absolute;left:60px;right:0;bottom:0;height:.5px;background:var(--ios-sep)}
html .eq-nrow:last-child:after{display:none}
html .eq-nrow:active{background:var(--f)}
html .eq-off{border-radius:20px;font-weight:600;font-size:12px;background:#FFEBEA;color:#D70015}
/* Le fond de la zone de contenu suit la palette (il était figé en #F0EFE9) */
html #ct{background:var(--bg)}

/* ── 12. RATTRAPAGE DES COULEURS ÉCRITES EN DUR ───────────────────────────
   ~25 endroits portent encore l'ancien bleu / beige en style inline.
   Même technique que les règles `body.dark [style*=…]` d'index.html.
   Sans ça, ces éléments resteraient sur l'ancienne palette. */
/* Bouton d'action principal : l'app en avait trois teintes différentes selon l'écran
   (#0E7490 canard, #1C75BC bleu ardoise). iOS n'en a qu'une → tous en bleu système.
   Ciblé sur `button` seulement : les mêmes teintes servent aussi de couleur de TEXTE
   et de bandeau ailleurs, qu'on ne veut pas toucher. */
html button[style*="background:#0E7490"],
html button[style*="background:#1C75BC"]{background:var(--bl)!important;color:#fff!important}
html [style*="#1A4FD6"]{color:var(--bl)!important}
html [style*="background:#1A4FD6"]{background:var(--bl)!important;color:#fff!important}
html [style*="border:1px solid #E0DDD5"],
html [style*="border:1.5px solid #E0DDD5"]{border-color:var(--ios-sep)!important}
html [style*="background:#F0EFE9"]{background:var(--bg)!important}
html [style*="background:#ECEAE3"]{background:var(--f)!important}
html [style*="color:#5C5A54"]{color:var(--mid)!important}

/* ── 13. MODE SOMBRE ──────────────────────────────────────────────────────
   Palette « dark » d'iOS. `html body.dark` (0,1,2) passe devant `html:root`. */
html body.dark{
  --bg:#000000;        /* iOS met le fond groupé en NOIR pur */
  --s:#1C1C1E;
  --br:#38383A;
  --f:#2C2C2E;
  --dk:#F2F2F7;
  --mid:#98989F;
  --al:#33280F;--ad:#D6A048;
  --gl:#132A1D;--gr:#66B489;
  --rl:#33191A;--rd:#D4736C;
  --bll:#16233A;--bl:#7BA3DC;
  --pl:#241F33;--pu:#A092C9;
  --ios-sep:#38383A;
}
html body.dark .eh-list,html body.dark .card,html body.dark .eh-hero{box-shadow:none}
/* Les pastilles pastel sont faites pour un fond clair : sur du noir elles font des
   petits carrés blancs qui sautent aux yeux. En sombre, on garde la même nuance
   mais en version profonde — l'emoji reste parfaitement lisible dessus. */
html body.dark .eh-row.blue   .eh-row-ic{background:#1B2534}
html body.dark .eh-row.amber  .eh-row-ic{background:#2E2718}
html body.dark .eh-row.violet .eh-row-ic{background:#252131}
html body.dark .eh-row.teal   .eh-row-ic{background:#182A2A}
html body.dark .eh-row.slate  .eh-row-ic{background:#242427}
html body.dark .eh-row.green  .eh-row-ic{background:#18271E}
html body.dark .eh-row.red    .eh-row-ic{background:#2B1D1D}
html body.dark .eh-today .eh-tic{background:#1B2534}
html body.dark #bottom-nav{
  /* Opaque, comme en clair (12/08) : le flou qui masquait la semi-transparence a été
     retiré le 11/08 (bug WebKit barre disparue) — à 82 % le contenu se lisait à travers. */
  background:var(--s);border-top-color:rgba(255,255,255,.16);
}
html body.dark #bottom-nav button.on{color:var(--bl)}
html body.dark .sh:before{background:#48484A}
html body.dark .sw-tr{background:#39393D}
html body.dark .eh-chev{color:#5A5A5F}
html body.dark .tgg .tg.on{background:#636366;box-shadow:none}
html body.dark #nav{background:linear-gradient(180deg,#0B121D 0%,#172741 60%,#2B4570 100%)}
html body.dark .xb{background:var(--f)}