:root {
  --primary:#1B3152;--primary-light:#00B2D4;--secondary:#5AB643;
  --success:#5AB643;--warning:#f59e0b;--danger:#ef4444;
  --bg:#f1f5f9;--card-bg:#ffffff;--text:#1B3152;--text-muted:#4a6080;
  --border:#d0dce8;--input-bg:#f4f8fb;
  --shadow:0 1px 3px rgba(27,49,82,.1),0 1px 2px rgba(27,49,82,.06);
  --shadow-md:0 4px 6px -1px rgba(27,49,82,.1),0 2px 4px -1px rgba(27,49,82,.06);
  --shadow-lg:0 10px 15px -3px rgba(27,49,82,.1),0 4px 6px -2px rgba(27,49,82,.05);
  --radius:12px;--radius-sm:8px;--transition:all .2s ease;
  --shadow-up:0 -2px 10px rgba(27,49,82,.08),0 -1px 4px rgba(27,49,82,.04);
  --grad:linear-gradient(135deg,#5AB643,#00B2D4);
  --accent-rgb:0,178,212;
  /* Alias theme-aware : plusieurs modules (prévention, symptômes…) utilisent ces noms.
     Sans définition ils retombaient sur des gris fixes (#444/#555) illisibles en sombre. */
  --text-primary:var(--text);--text-secondary:var(--text-muted);
}
/* #33 — dark vars partagés : auto (media) et forcé (data-theme) */
@media(prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0d1b2a;--card-bg:#162236;--text:#e8f0f8;--text-muted:#7da0be;
    --border:#243652;--input-bg:#0d1b2a;
    --shadow:0 1px 3px rgba(0,0,0,.4),0 1px 2px rgba(0,0,0,.3);
    --shadow-md:0 4px 6px -1px rgba(0,0,0,.4),0 2px 4px -1px rgba(0,0,0,.3);
    --shadow-lg:0 10px 15px -3px rgba(0,0,0,.4),0 4px 6px -2px rgba(0,0,0,.2);
    --shadow-up:0 -2px 10px rgba(0,0,0,.35),0 -1px 4px rgba(0,0,0,.2);
  }
}
html[data-theme="dark"]{
  --bg:#0d1b2a;--card-bg:#162236;--text:#e8f0f8;--text-muted:#7da0be;
  --border:#243652;--input-bg:#0d1b2a;
  --shadow:0 1px 3px rgba(0,0,0,.4),0 1px 2px rgba(0,0,0,.3);
  --shadow-md:0 4px 6px -1px rgba(0,0,0,.4),0 2px 4px -1px rgba(0,0,0,.3);
  --shadow-lg:0 10px 15px -3px rgba(0,0,0,.4),0 4px 6px -2px rgba(0,0,0,.2);
  --shadow-up:0 -2px 10px rgba(0,0,0,.35),0 -1px 4px rgba(0,0,0,.2);
}
/* #33 — light forcé (override du dark system) */
html[data-theme="light"]{
  --bg:#f1f5f9;--card-bg:#ffffff;--text:#1B3152;--text-muted:#4a6080;
  --border:#d0dce8;--input-bg:#f4f8fb;
  --shadow:0 1px 3px rgba(27,49,82,.1),0 1px 2px rgba(27,49,82,.06);
  --shadow-md:0 4px 6px -1px rgba(27,49,82,.1),0 2px 4px -1px rgba(27,49,82,.06);
  --shadow-lg:0 10px 15px -3px rgba(27,49,82,.1),0 4px 6px -2px rgba(27,49,82,.05);
}
/* Accent « Blush » — teinte rosée, INDÉPENDANTE de clair/sombre (attribut data-accent).
   Ne surcharge que les accents de marque ; fonds, textes et statuts restent gérés par le thème. */
html[data-accent="blush"]{
  --primary-light:#EC4899;
  --accent-rgb:236,72,153;
  --grad:linear-gradient(135deg,#FF8FB1,#C86DD7);
}
html[data-accent="blush"] .btn-primary:hover{background:linear-gradient(135deg,#f472a3,#b45bc9)}
/* Accent « Sun » — tons jaune orangé, INDÉPENDANT de clair/sombre (attribut data-accent). */
html[data-accent="sun"]{
  --primary-light:#F59E0B;
  --accent-rgb:245,158,11;
  --grad:linear-gradient(135deg,#FDBA3B,#F97316);
}
html[data-accent="sun"] .btn-primary:hover{background:linear-gradient(135deg,#f6ad2e,#ea6c0f)}
/* Accent « Stone » — gris chaud / taupe minéral, INDÉPENDANT de clair/sombre (attribut data-accent).
   Remplace l'ancien « Forest » (trop de vert avec JYL + Vital). */
html[data-accent="stone"]{
  --primary-light:#78716C;
  --accent-rgb:120,113,108;
  --grad:linear-gradient(135deg,#A8A29E,#57534E);
}
html[data-accent="stone"] .btn-primary:hover{background:linear-gradient(135deg,#8c847e,#4a453f)}
/* Thème « Vital » — palette santé EUCALYPTUS / VERT D'EAU, doux & PLAT (sans dégradé).
   Contrairement aux accents (blush/sun/forest) qui ne changent QUE l'accent, Vital reverdit aussi
   --primary (titres/en-têtes/splash) ET éclaircit le fond en mint clair (mode CLAIR uniquement) pour
   un vrai changement d'apparence. --grad est aplati en couleur unie (aucun dégradé).
   Palette : F7FFFD · D9F5EF · A7E3D4 · 5BB9A6 · 2F5D57. */
html[data-accent="vital"]{
  --primary:#2F5D57;              /* pin profond lisible : titres, splash, bordures (remplace le marine) */
  --primary-light:#5BB9A6;        /* accent vert d'eau : en-têtes, boutons, nav active, liens */
  --accent-rgb:91,185,166;
  --success:#5BB9A6;--secondary:#5BB9A6;
  --grad:#5BB9A6;                 /* APLAT uni — plus aucun dégradé */
}
html[data-accent="vital"] .btn-primary:hover{background:#4aa693}
/* Fond mint clair — MODE CLAIR SEULEMENT (forcé clair + système clair non-forcé-sombre).
   Le mode sombre garde son fond foncé (sinon illisible). */
html[data-accent="vital"][data-theme="light"]{ --bg:#F7FFFD; --input-bg:#ECFAF5; --border:#cfe7e0; }
@media(prefers-color-scheme:light){
  html[data-accent="vital"]:not([data-theme="dark"]){ --bg:#F7FFFD; --input-bg:#ECFAF5; --border:#cfe7e0; }
}
/* Thème « Beach » — comme Vital mais palette PLAGE : fond sable très clair (mode clair),
   titres BLEU OCÉAN, accent TURQUOISE MER. Aplats, aucun dégradé.
   Palette : FFFDF6 · F7EFDD · 7FD3D8 · 14A9BE · 15617B. */
html[data-accent="beach"]{
  --primary:#15617B;              /* bleu océan profond : titres, en-têtes, splash, bordures */
  --primary-light:#22C3D8;        /* turquoise lagon clair : boutons, nav active, liens */
  --accent-rgb:34,195,216;
  --success:#22C3D8;--secondary:#22C3D8;
  --grad:#22C3D8;                 /* APLAT uni — aucun dégradé */
}
html[data-accent="beach"] .btn-primary:hover{background:#1aa9bd}
/* Fond sable clair — MODE CLAIR SEULEMENT (le sombre garde son fond foncé). */
html[data-accent="beach"][data-theme="light"]{ --bg:#FAF2DE; --input-bg:#F5EACF; --border:#E7D6B4; }
@media(prefers-color-scheme:light){
  html[data-accent="beach"]:not([data-theme="dark"]){ --bg:#FAF2DE; --input-bg:#F5EACF; --border:#E7D6B4; }
}
/* Bannière « mise à jour disponible » (pilotée par version.json serveur) */
.update-banner[hidden]{display:none}   /* l'attribut hidden doit primer sur display:flex ci-dessous */
.update-banner{position:fixed;top:0;left:0;right:0;z-index:2000;display:flex;align-items:center;gap:10px;
  padding:10px 14px;padding-top:calc(10px + var(--safe-area-inset-top,env(safe-area-inset-top,0px)));
  background:var(--primary-light);color:#fff;font-size:14px;font-weight:600;box-shadow:0 2px 8px rgba(0,0,0,.2)}
.update-banner .btn{margin-left:auto;flex-shrink:0}
.update-banner-x{background:transparent;border:0;color:#fff;font-size:22px;line-height:1;cursor:pointer;padding:0 4px;opacity:.9;flex-shrink:0}
.update-banner-x:hover{opacity:1}
/* Lien « Sources & références » (Apple 1.4.1 : citations infos santé) */
.sources-link{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;color:var(--primary-light);cursor:pointer;text-decoration:underline;font-weight:600}
.sources-link:hover{opacity:.85}
/* iOS : modales (bottom-sheet « Ajouter un aliment ») dimensionnées AU-DESSUS du clavier via
   visualViewport (--vvh = hauteur visible, kb-open quand clavier ouvert). Android non concerné. */
/* iPhone SANS encoche (8/SE) : env(safe-area-inset-top)=0 mais la barre d'état occupe ~20px.
   En edge-to-edge (WebView iOS plein écran depuis le retrait d'overlaysWebView pour Capawesome/
   Android), on force un plancher iOS de 20px → l'en-tête + les modales ne passent plus sous l'heure.
   iPhone à encoche : max garde les ~47px réels. Android : variable NON redéfinie → env() (=0, la
   WebView est déjà rembourrée nativement par le plugin edge-to-edge). cf. INC-0001 / 2.58.2. */
html.is-ios{--safe-area-inset-top:max(env(safe-area-inset-top,0px),20px)}
html.is-ios .modal-backdrop{height:var(--vvh,100%);top:0;bottom:auto;padding-top:var(--safe-area-inset-top,env(safe-area-inset-top,0px))!important}
/* Feuille ancrée en bas (align-items:flex-end + padding-bottom 62px) : la hauteur max doit tenir
   dans la zone visible (vvh − safe-area haut − 62px bas − 8px marge) sinon la feuille déborde par
   le HAUT et l'en-tête (croix) passe sous l'encoche. */
html.is-ios .modal{max-height:calc(var(--vvh,90vh) - var(--safe-area-inset-top,env(safe-area-inset-top,0px)) - 70px)!important}
/* iOS : réserve la zone sûre du bas (home indicator) sous le contenu des modales — sinon la
   dernière ligne (ex. liens « Conditions d'utilisation »/« Confidentialité » du paywall scan)
   est masquée sur iPhone Face ID. 0 px sur iPhone 8, ~34 px sur X et +. */
html.is-ios .modal-body{padding-bottom:calc(20px + var(--safe-area-inset-bottom,env(safe-area-inset-bottom,0px)))!important}
html.is-ios body.kb-open .modal-backdrop{padding-bottom:8px!important}
html.is-ios .modal-overlay{height:var(--vvh,100%);top:0;bottom:auto;padding-top:var(--safe-area-inset-top,env(safe-area-inset-top,0px))!important}
html.is-ios .modal-overlay .modal-content{max-height:calc(var(--vvh,100vh) - 24px - var(--safe-area-inset-top,env(safe-area-inset-top,0px)))!important}
/* Scanner natif ML Kit : la caméra est peinte par le natif DERRIÈRE la WebView → on rend la page
   transparente et on ne laisse voir que l'overlay (cadre + statut + Fermer). visibility (pas display)
   pour que le bouton reste cliquable et que la caméra transparaisse. */
#scanNativeOverlay{position:fixed;inset:0;z-index:3000;display:none;flex-direction:column;align-items:center;justify-content:center;pointer-events:none}
body.scanning-active{background:transparent!important}
body.scanning-active > *{visibility:hidden}
body.scanning-active #scanNativeOverlay{display:flex;visibility:visible}
#scanNativeOverlay .scan-frame{width:78%;max-width:320px;height:170px;border:3px solid #fff;border-radius:16px;box-shadow:0 0 0 4000px rgba(0,0,0,.45)}
#scanNativeOverlay .scan-native-status{margin-top:22px;color:#fff;font-size:14px;text-align:center;text-shadow:0 1px 3px rgba(0,0,0,.7);padding:0 24px}
#scanNativeOverlay .scan-native-cancel{margin-top:20px;pointer-events:auto}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;overflow-x:hidden}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background:var(--bg);color:var(--text);min-height:100vh;transition:background .3s,color .3s;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{cursor:pointer;font-family:inherit}
input,select,textarea{font-family:inherit}

/* LAYOUT */
.app{display:flex;min-height:100vh}
.sidebar{width:240px;background:var(--card-bg);border-inline-end:1px solid var(--border);display:flex;flex-direction:column;position:fixed;top:0;inset-inline-start:0;height:100vh;z-index:100;transition:transform .3s,var(--transition)}
.sidebar-brand{padding:12px 16px 0;border-bottom:1px solid var(--border);display:flex;flex-direction:column;align-items:center;gap:0}
.sidebar-brand .logo{width:100%;max-width:208px;height:auto;display:block}
.sidebar-brand h1,.sidebar-brand span{display:none}
.sidebar-firstname{text-align:center;font-size:13px;font-weight:800;letter-spacing:2px;text-transform:uppercase;padding:8px 0 12px;color:var(--primary);background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.sidebar-nav{flex:1;padding:12px 0;overflow-y:auto}
.nav-item{display:flex;align-items:center;gap:10px;padding:10px 20px;cursor:pointer;border-radius:0;transition:var(--transition);font-size:14px;font-weight:500;color:var(--text-muted);border-left:3px solid transparent}
.nav-item:hover{background:rgba(var(--accent-rgb),.08);color:var(--primary-light)}
.nav-item.active{background:rgba(var(--accent-rgb),.1);color:var(--primary-light);border-left-color:var(--primary-light)}
.nav-item i{width:18px;text-align:center;font-size:15px}
.sidebar-footer{padding:16px 20px;border-top:1px solid var(--border)}
.btn-profile{display:flex;align-items:center;gap:8px;width:100%;padding:8px 12px;border-radius:var(--radius-sm);background:var(--input-bg);border:1px solid var(--border);color:var(--text);font-size:13px;font-weight:500;transition:var(--transition)}
.btn-profile:hover{border-color:var(--primary);color:var(--primary)}
.main{flex:1;margin-inline-start:240px;min-height:100vh;display:flex;flex-direction:column}
.topbar{background:var(--card-bg);border-bottom:1px solid var(--border);padding:var(--safe-area-inset-top,env(safe-area-inset-top,0px)) 24px 0;height:calc(60px + var(--safe-area-inset-top,env(safe-area-inset-top,0px)));display:flex;align-items:flex-end;justify-content:space-between;padding-bottom:0;position:sticky;top:0;z-index:50}
/* #34 — Indicateur réseau global */
#net-loader{position:fixed;top:0;left:0;right:0;height:3px;background:var(--grad);z-index:9999;transform:scaleX(0);transform-origin:left;transition:transform .3s ease,opacity .3s ease;opacity:0;pointer-events:none}
#net-loader.active{opacity:1;animation:netProgress 1.6s ease-in-out infinite}
@keyframes netProgress{0%{transform:scaleX(0)}60%{transform:scaleX(.85)}100%{transform:scaleX(1)}}
@media(prefers-reduced-motion:reduce){#net-loader.active{animation:none;transform:scaleX(1)}}
.topbar-logo-mobile{display:none;height:40px;width:auto;object-fit:contain}

.topbar-title{display:none}
.topbar-actions{display:flex;align-items:center;gap:10px}
.btn-profile-mobile{display:none}

.content{padding:24px;flex:1}
.hamburger{display:none;background:none;border:none;color:var(--text);font-size:20px;padding:4px 8px}

/* BOTTOM NAV (smartphone) */
.bottom-nav{display:none;position:fixed;/* [FIX] affiché via media query @600px */bottom:0;left:0;right:0;height:calc(60px + var(--safe-area-inset-bottom,env(safe-area-inset-bottom,0px)));background:var(--card-bg);border-top:1px solid var(--border);z-index:200;justify-content:flex-start;align-items:center;padding:0 4px var(--safe-area-inset-bottom,env(safe-area-inset-bottom,0px));box-shadow:var(--shadow-up);overflow-x:auto;overflow-y:hidden;flex-wrap:nowrap;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.bottom-nav::-webkit-scrollbar{display:none}
.bottom-nav-item{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 4px;border:none;background:none;color:var(--text-muted);font-size:10px;font-weight:600;cursor:pointer;border-radius:var(--radius-sm);transition:var(--transition);min-width:60px;flex:1 1 auto;text-align:center;line-height:1.1;scroll-snap-align:center}
.bottom-nav-item span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.bottom-nav-item i{font-size:17px}
.bottom-nav-item.active{color:var(--primary-light)}
.bottom-nav-item:active{background:rgba(var(--accent-rgb),.1)}
.more-menu{display:none;position:fixed;bottom:calc(68px + var(--safe-area-inset-bottom,env(safe-area-inset-bottom,0px)));left:0;right:0;background:var(--card-bg);border-top:1px solid var(--border);border-radius:var(--radius) var(--radius) 0 0;box-shadow:var(--shadow-up);z-index:199;padding:12px 0 4px}
.more-menu.open{display:block}
.more-menu-item{display:flex;align-items:center;gap:14px;padding:14px 24px;font-size:15px;font-weight:600;color:var(--text);cursor:pointer;transition:var(--transition)}
.more-menu-item:active,.more-menu-item:hover{background:rgba(var(--accent-rgb),.08);color:var(--primary-light)}
.more-menu-item i{width:22px;text-align:center;font-size:18px;color:var(--primary-light)}
.more-overlay{display:none;position:fixed;inset:0;z-index:198}
.more-overlay.open{display:block}
.overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:90}

/* CARDS */
/* #47 — border-left réduit : la couleur n'est plus systématique. Utiliser .card--accent pour un accent explicite */
.card{background:var(--card-bg);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px;transition:var(--transition)}
.card--accent{border-left:4px solid var(--primary-light)}
.card:hover{box-shadow:var(--shadow-md)}
.card-title{font-size:13px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:12px;display:flex;align-items:center;gap:6px}
.card-value{font-size:28px;font-weight:800;color:var(--text);line-height:1}
.card-sub{font-size:12px;color:var(--text-muted);margin-top:4px}
.card-badge{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:20px;font-size:12px;font-weight:600;margin-top:8px}

/* Bloc "Soutenir le projet" (dons) — masqué sur iOS/iPadOS (règles App Store : un lien de don
   externe qui contourne l'achat intégré est un motif de rejet ; OK sur web + Android/Google Play) */
html.is-ios .support-card{display:none!important}
/* Réglages : marge basse pour que le FAB (+) flottant ne recouvre pas le dernier réglage
   (Rappels). La page est plus courte sur iOS (carte dons masquée), d'où le manque de place. */
#section-reglages{padding-bottom:120px}
.badge-green{background:rgba(16,185,129,.15);color:var(--success)}
.badge-orange{background:rgba(245,158,11,.15);color:var(--warning)}
.badge-red{background:rgba(239,68,68,.15);color:var(--danger)}
.badge-blue{background:rgba(79,70,229,.15);color:var(--primary)}

/* GRID */
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.grid-auto{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px}

/* SECTIONS */
.section{display:none}
.section.active{display:block}
.section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;flex-wrap:wrap;gap:10px}
.section-header h2{font-size:20px;font-weight:700}

/* BUTTONS */
.btn{display:inline-flex;align-items:center;gap:6px;padding:9px 18px;border-radius:var(--radius-sm);font-size:14px;font-weight:600;border:none;transition:var(--transition);cursor:pointer;min-height:44px}
.btn-primary{background:var(--grad);color:#fff;border:none}
.btn-primary:hover{background:linear-gradient(135deg,#4da636,#009ab8);transform:translateY(-1px);box-shadow:var(--shadow-md)}
.btn-secondary{background:var(--input-bg);color:var(--text);border:1px solid var(--border)}
.btn-secondary:hover{border-color:var(--primary);color:var(--primary)}
.btn-danger{background:var(--danger);color:#fff}
.btn-danger:hover{background:#dc2626}
.btn-success{background:var(--secondary);color:#fff}
.btn-success:hover{background:#059669}
.btn-sm{padding:6px 12px;font-size:13px;min-height:44px}
.btn-icon{width:44px;height:44px;padding:0;justify-content:center;min-height:44px}
.accent-opt.active{border-color:var(--primary-light);color:var(--primary-light);font-weight:700}
.fast-proto{padding:6px 14px;border:1px solid var(--border);background:var(--input-bg);color:var(--text-muted);border-radius:20px;font-size:13px;font-weight:600;cursor:pointer;transition:var(--transition);min-height:40px}
.fast-proto.active{border-color:var(--primary-light);color:var(--primary-light);background:rgba(var(--accent-rgb),.10)}
/* L'onglet Jeûne est masqué tant que non activé : .bottom-nav-item/.nav-item ont display:flex
   qui écrase l'attribut [hidden] de la feuille UA → on force le masquage ici. */
.fasting-nav[hidden]{display:none!important}
/* Modules optionnels (interface personnalisable) : même souci que .fasting-nav — les items
   de nav ont display:flex qui écrase [hidden]. On force le masquage des onglets désactivés. */
[data-module][hidden]{display:none!important}

/* FORM */
.form-group{margin-bottom:16px}
.form-label{display:block;font-size:13px;font-weight:600;color:var(--text-muted);margin-bottom:6px}
.form-control{width:100%;padding:9px 12px;border-radius:var(--radius-sm);border:1.5px solid var(--border);background:var(--input-bg);color:var(--text);font-size:14px;transition:var(--transition);outline:none}
.form-control:focus{border-color:var(--primary-light);box-shadow:0 0 0 3px rgba(var(--accent-rgb),.12)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form-hint{font-size:12px;color:var(--text-muted);margin-top:4px}
textarea.form-control{resize:vertical;min-height:70px}

/* MODAL */
.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:200;display:flex;align-items:center;justify-content:center;padding:16px;animation:fadeIn .2s}
.modal{background:var(--card-bg);border-radius:var(--radius);box-shadow:var(--shadow-lg);width:100%;max-width:520px;max-height:90vh;overflow-y:auto;animation:slideUp .3s}
.modal-header{padding:20px 20px 0;display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.modal-header h3{font-size:18px;font-weight:700}
.modal-body{padding:0 20px 20px}
.modal-footer{padding:16px 20px;border-top:1px solid var(--border);display:flex;gap:10px;justify-content:flex-end}
/* Modales inline (modal-overlay) */
/* Objectif macro : barre à 3 segments G/P/L + repères de cible (Saisie repas) */
.macro-split-wrap{margin-top:12px}
.macro-goal-row{margin-top:8px}
.macro-goal-head{display:flex;justify-content:space-between;font-size:12px;margin-bottom:3px}
.macro-goal-sub{font-size:11px;color:var(--text-muted);margin-top:2px;font-weight:600}
.modal-overlay{position:fixed;inset:0;z-index:600;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;padding:16px;overflow-y:auto}/* >500 pour passer AU-DESSUS de .setup-screen : sinon un jylConfirm() pendant l'onboarding (ex. cible>départ) s'affiche derrière l'écran → await bloqué → onboarding figé */
.modal-overlay .modal-content{margin:0;max-height:calc(100vh - 32px);overflow-y:auto}
.modal-overlay[hidden]{display:none}
.modal-content{background:var(--card-bg);border-radius:var(--radius);box-shadow:var(--shadow-lg);margin:16px auto 0;animation:slideUp .3s}
.modal-title{font-size:17px;font-weight:700;display:flex;align-items:center;gap:8px}
.modal-close{background:none;border:none;color:var(--text-muted);font-size:20px;cursor:pointer;padding:0;line-height:1;transition:color .2s;min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-sm)}
.modal-close:hover{color:var(--danger)}
/* Articles : en-tête collant → la croix reste visible même en défilant les 12 articles. */
#articlesModal .modal-header,#articleReadModal .modal-header{position:sticky;top:0;z-index:3;background:var(--card-bg);margin-bottom:12px;padding-top:14px}
/* iOS : en bottom-sheet (align-items:flex-end), une modale PLEINE (12 articles) avec max-height ≈ vvh
   débordait par le HAUT hors écran → la croix passait au-dessus de la status bar (bug iPhone 8).
   On borne la hauteur (−100px + zone sûre haute) pour garder le sommet visible sous la status bar. */
html.is-ios #articlesModal .modal,html.is-ios #articleReadModal .modal{max-height:calc(var(--vvh,90vh) - 100px - var(--safe-area-inset-top,env(safe-area-inset-top,0px)))!important}

/* GAUGE */
.gauge-wrap{display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px 0}
.gauge-svg{width:140px;height:80px}
.gauge-label{font-size:13px;color:var(--text-muted);font-weight:500;text-align:center}
.gauge-val{font-size:22px;font-weight:800;text-align:center}

/* PROGRESS BAR */
.progress-wrap{margin:8px 0}
.progress-label{display:flex;justify-content:space-between;font-size:12px;color:var(--text-muted);margin-bottom:4px}
.progress-bar{height:8px;background:var(--border);border-radius:4px;overflow:hidden}
.progress-fill{height:100%;border-radius:4px;transition:width .5s ease;background:var(--grad)}
.progress-fill.green{background:linear-gradient(90deg,var(--success),#34d399)}
.progress-fill.orange{background:linear-gradient(90deg,var(--warning),#fbbf24)}
.progress-fill.red{background:linear-gradient(90deg,var(--danger),#f87171)}

/* TABLE */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--radius);border:1px solid var(--border)}

/* Historique mobile : cartes */
.history-card-list{display:none;flex-direction:column;gap:10px}
.hcard{background:var(--card-bg);border-radius:var(--radius);box-shadow:var(--shadow);border-left:4px solid var(--border);position:relative;overflow:hidden;user-select:none;touch-action:pan-y}
/* #54 — swipe-to-delete */
.hcard-swipe-bg{position:absolute;inset:0;background:var(--danger);display:flex;align-items:center;justify-content:flex-end;padding:0 20px;border-radius:var(--radius);z-index:0;transition:opacity .15s}
.hcard-swipe-bg i{color:#fff;font-size:22px}
/* [FIX] le padding et le fond passent du conteneur .hcard au contenu .hcard-swipe-content :
   ainsi le contenu recouvre intégralement la carte (bord à bord, comme .hcard-swipe-bg
   avec inset:0) et ne laisse plus apparaître d'« encadré » rouge sur les zones de padding */
.hcard-swipe-content{display:block;position:relative;z-index:1;background:var(--card-bg);border-radius:var(--radius);padding:14px;transition:transform .2s ease,opacity .15s}
@media(prefers-reduced-motion:reduce){.hcard-swipe-content{transition:none}}
.hcard.deficit{border-left-color:var(--success)}
.hcard.surplus{border-left-color:var(--danger)}
.hcard-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.hcard-date{font-weight:700;font-size:14px}
.hcard-actions{display:flex;gap:10px}
.hcard-row{display:grid;grid-template-columns:1fr 1fr;gap:4px 12px;font-size:13px}
.hcard-item{display:flex;flex-direction:column}
.hcard-item .lbl{font-size:12px;color:var(--text-muted);font-weight:600;text-transform:uppercase;letter-spacing:.3px}
.hcard-item .val{font-weight:700}
.hcard-note{margin-top:8px;font-size:12px;color:var(--text-muted);font-style:italic}

table{width:100%;border-collapse:collapse;font-size:13px}
thead th{background:var(--input-bg);padding:10px 12px;text-align:left;font-weight:600;color:var(--text-muted);font-size:12px;text-transform:uppercase;letter-spacing:.5px;white-space:nowrap;cursor:pointer;user-select:none;transition:var(--transition)}
thead th:hover{color:var(--primary)}
/* #29 — icônes de tri FA dans les en-têtes de colonnes */
thead th{position:relative}
thead th::after{font-family:'Font Awesome 6 Free';font-weight:900;font-size:12px;margin-left:5px;color:var(--border);content:'\f0dc';vertical-align:middle}
thead th.sort-asc::after{content:'\f0de';color:var(--primary-light)}
thead th.sort-desc::after{content:'\f0dd';color:var(--primary-light)}
/* Sélecteur de tri mobile */
.history-sort-mobile{display:none;align-items:center;gap:8px;margin-bottom:12px}
.history-sort-mobile select{flex:1;padding:8px 12px;border-radius:var(--radius-sm);border:1.5px solid var(--border);background:var(--input-bg);color:var(--text);font-size:14px;font-weight:600;outline:none;transition:var(--transition)}
.history-sort-mobile select:focus{border-color:var(--primary-light)}
.history-sort-dir-btn{padding:8px 12px;border-radius:var(--radius-sm);border:1.5px solid var(--border);background:var(--input-bg);color:var(--text);font-size:14px;cursor:pointer;transition:var(--transition);min-height:44px;min-width:44px;display:flex;align-items:center;justify-content:center}
.history-sort-dir-btn:hover{border-color:var(--primary-light);color:var(--primary-light)}
@media(max-width:600px){.history-sort-mobile{display:flex}}
tbody tr{border-top:1px solid var(--border);transition:background .15s}
tbody tr:hover{background:rgba(79,70,229,.04)}
td{padding:10px 12px;white-space:nowrap;vertical-align:middle}
.td-actions{display:flex;gap:10px}

/* SEARCH BAR */
/* [FIX] légende du filtre par période de l'Historique : indique clairement à quoi servent les deux champs date */
.history-date-filter-caption{display:flex;align-items:center;flex-wrap:wrap;gap:6px;font-size:12px;font-weight:600;color:var(--text-muted);margin:14px 0 8px}
.search-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.search-input-wrap{position:relative;flex:1;min-width:200px}
.search-input-wrap i{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--text-muted);font-size:13px}
/* [FIX] filtre par période de l'Historique : libellé + champ alignés sur une seule ligne (clarté + alignement homogène) */
.history-date-row{display:flex;align-items:center;gap:8px}
.history-date-row label{flex-shrink:0;min-width:34px;margin-bottom:0}
.history-date-row .search-input-wrap{flex:1}
.search-input{padding-left:32px}

/* STATS */
.stat-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}
.stat-item{background:var(--input-bg);border-radius:var(--radius-sm);padding:14px;border:1px solid var(--border)}
.stat-item .label{font-size:12px;color:var(--text-muted);font-weight:600;text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px}
.stat-item .value{font-size:20px;font-weight:800}
.stat-item .unit{font-size:12px;color:var(--text-muted);font-weight:400}

/* BADGES */
.badges-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px}
.badge-card{border-radius:var(--radius);padding:20px;text-align:center;border:2px solid var(--border);background:var(--card-bg);transition:var(--transition);position:relative;overflow:hidden}
.badge-card.earned{border-color:var(--warning);background:linear-gradient(135deg,rgba(245,158,11,.08),rgba(251,191,36,.05))}
.badge-card.earned::after{content:'✓';position:absolute;top:8px;right:10px;color:var(--warning);font-weight:800;font-size:14px}
.badge-card.locked{opacity:.5;filter:grayscale(1)}
.badge-icon{font-size:36px;margin-bottom:10px}
.badge-name{font-size:13px;font-weight:700;margin-bottom:4px}
.badge-desc{font-size:12px;color:var(--text-muted)}
.badge-date{font-size:12px;color:var(--warning);font-weight:600;margin-top:6px}

/* CHARTS */
.chart-card{background:var(--card-bg);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px}
.chart-title{font-size:14px;font-weight:700;margin-bottom:16px;display:flex;align-items:center;gap:8px}
.charts-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.chart-container{position:relative;height:220px}

/* #51 — Splash screen */
#splash-screen{position:fixed;inset:0;background:var(--primary);z-index:9998;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;transition:opacity .35s ease}
#splash-screen.hide{opacity:0;pointer-events:none}
.splash-logo{font-size:48px;font-weight:900;color:#fff;letter-spacing:-1px;animation:slideUp .4s ease}
.splash-sub{font-size:14px;color:rgba(255,255,255,.6);font-weight:500;letter-spacing:1px;text-transform:uppercase}
.splash-spinner{width:28px;height:28px;border:3px solid rgba(255,255,255,.25);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite}
@media(prefers-reduced-motion:reduce){#splash-screen{transition:none}.splash-logo{animation:none}.splash-spinner{animation:none}}
/* SETUP SCREEN */
#splash-screen+.setup-screen,#splash-screen~*{} /* make splash always on top */
.setup-screen{position:fixed;inset:0;background:var(--bg);z-index:500;display:flex;align-items:flex-start;justify-content:center;padding:20px;animation:fadeIn .3s;overflow-y:auto}
.setup-card{background:var(--card-bg);border-radius:var(--radius);box-shadow:var(--shadow-lg);width:100%;max-width:520px;padding:32px;animation:slideUp .4s}
.setup-card h2{font-size:22px;font-weight:800;margin-bottom:6px;color:var(--primary)}
.setup-card p{color:var(--text-muted);font-size:14px;margin-bottom:24px}
.setup-logo{display:flex;justify-content:center;margin-bottom:16px}.setup-logo img{width:360px;height:360px;object-fit:contain}
.sex-btn-group{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:4px}
.sex-btn{padding:12px;border-radius:var(--radius-sm);border:2px solid var(--border);background:var(--input-bg);color:var(--text);font-size:14px;font-weight:600;transition:var(--transition);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px}
.sex-btn.selected,.sex-btn:hover{border-color:var(--primary-light);color:var(--primary-light);background:rgba(var(--accent-rgb),.08)}

/* CALORIE INDICATOR */
.cal-indicator{display:flex;align-items:center;gap:8px;padding:10px 14px;border-radius:var(--radius-sm);font-size:13px;font-weight:600;margin-top:8px}
.cal-indicator.green{background:rgba(16,185,129,.12);color:var(--success)}
.cal-indicator.orange{background:rgba(245,158,11,.12);color:var(--warning)}
.cal-indicator.red{background:rgba(239,68,68,.12);color:var(--danger)}
.cal-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}

/* SETUP STEPS */
.step-indicator{display:flex;gap:6px;margin-bottom:24px}
.step-dot{width:8px;height:8px;border-radius:50%;background:var(--border);transition:var(--transition)}
.step-dot.active{background:var(--primary);width:20px;border-radius:4px}
.step-dot.done{background:var(--success)}

/* BMR INFO */
.bmr-info-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.bmr-item{background:var(--input-bg);border-radius:var(--radius-sm);padding:12px;border:1px solid var(--border);text-align:center}
.bmr-item .val{font-size:22px;font-weight:800;color:var(--primary)}
.bmr-item .lbl{font-size:12px;color:var(--text-muted);margin-top:2px}

/* ANIMATIONS */
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes slideUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
.animate-in{animation:slideUp .3s ease both}
.animate-pulse{animation:pulse 2s infinite}
/* #50 — Micro-animations feedback */
@keyframes jylWeighSave{0%{transform:scale(1)}30%{transform:scale(1.04)}70%{transform:scale(.97)}100%{transform:scale(1)}}
@keyframes jylDropBounce{0%{transform:translateY(0)}25%{transform:translateY(-6px)}60%{transform:translateY(2px)}100%{transform:translateY(0)}}
@keyframes jylBadgePop{0%{transform:scale(1);box-shadow:var(--shadow)}40%{transform:scale(1.06);box-shadow:0 0 0 4px rgba(245,158,11,.4)}100%{transform:scale(1);box-shadow:var(--shadow)}}
.anim-weigh-save{animation:jylWeighSave .45s ease both}
.anim-drop-bounce{animation:jylDropBounce .4s ease both}
.anim-badge-pop{animation:jylBadgePop .55s ease both}
@media(prefers-reduced-motion:reduce){.anim-weigh-save,.anim-drop-bounce,.anim-badge-pop{animation:none}}

/* TOAST */
.toast-container{position:fixed;bottom:20px;right:20px;z-index:1000;display:flex;flex-direction:column;gap:8px}
.toast{background:var(--card-bg);border-radius:var(--radius-sm);box-shadow:var(--shadow-lg);padding:12px 16px;font-size:14px;font-weight:500;display:flex;align-items:center;gap:10px;animation:slideUp .3s;border-left:4px solid var(--success);min-width:220px}
.toast.error{border-left-color:var(--danger)}
.toast.warning{border-left-color:var(--warning)}
.toast-undo-btn{margin-left:auto;background:none;border:1px solid currentColor;border-radius:var(--radius-sm);color:var(--warning);padding:4px 12px;font-size:13px;font-weight:700;cursor:pointer;min-height:36px;white-space:nowrap;flex-shrink:0}
.toast-undo-btn:hover{background:rgba(245,158,11,.15)}
.toast-undo-btn:focus-visible{outline:2px solid var(--warning);outline-offset:2px}

/* EXPORT SECTION */
.export-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px}
.export-card{background:var(--card-bg);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px;text-align:center;border:2px solid transparent;transition:var(--transition);cursor:pointer}
.export-card:hover{border-color:var(--primary);transform:translateY(-2px);box-shadow:var(--shadow-md)}
.export-card i{font-size:32px;margin-bottom:10px;display:block}
.export-card .name{font-size:14px;font-weight:700;margin-bottom:4px}
.export-card .desc{font-size:12px;color:var(--text-muted)}

/* DANGER ZONE */
.danger-zone{border:2px solid var(--danger);border-radius:var(--radius);padding:20px 24px;margin-top:24px;background:rgba(239,68,68,.04)}
.danger-zone-header{display:flex;align-items:center;gap:10px;color:var(--danger);margin-bottom:8px}
.danger-zone-header h3{font-size:16px;font-weight:800;color:var(--danger);margin:0}
.danger-zone p{font-size:13px;color:var(--text-muted);margin-bottom:12px;line-height:1.5}
.danger-zone .danger-hint{color:var(--danger);font-size:12px;margin-top:8px;display:flex;align-items:flex-start;gap:6px}
/* DIVIDER */
.divider{height:1px;background:var(--border);margin:20px 0}
hr{border:none;border-top:1px solid var(--border);margin:16px 0}

/* SCROLL */
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}

/* RESPONSIVE */
@media(max-width:1024px){
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .charts-grid{grid-template-columns:1fr}
}

/* ── TABLETTE ── */
@media(max-width:768px){
  .sidebar{transform:translateX(-100%);width:260px}
  [dir=rtl] .sidebar{transform:translateX(100%)}
  .sidebar.open{transform:translateX(0)}
  [dir=rtl] .sidebar.open{transform:translateX(0)}
  .main{margin-inline-start:0}
  /* [#42] règle "hamburger : display flex (forcé)" inatteignable : la condition
     max-width:768px implique toujours max-width:900px, et la règle "display none (forcé)"
     du bloc @media(max-width:900px) plus bas, déclarée après, gagne systématiquement la cascade */
  .overlay.active{display:block}
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
  .form-row{grid-template-columns:1fr}
  .content{padding:16px}
  .bmr-info-grid{grid-template-columns:1fr}
  .stat-row{grid-template-columns:repeat(2,1fr)}
}

/* ── SMARTPHONE ── */
@media(max-width:600px){
  .bottom-nav{display:flex}
  .content{padding:12px}
  .grid-2,.grid-3,.grid-4,.charts-grid{grid-template-columns:1fr}
  .macro-dash{grid-template-columns:repeat(2,1fr)}
  .stat-row{grid-template-columns:1fr 1fr}
  .card-value{font-size:22px}
  .section-header{flex-direction:column;align-items:flex-start;gap:8px}
  .section-header h2{font-size:17px}
  .sym-hero-t{font-size:17px}
  .search-bar{flex-direction:column;align-items:stretch}
  .search-input-wrap{min-width:unset;width:100%}
  /* [FIX] barre de recherche Historique : champ + bouton « Rafraîchir » restent côte à côte,
     bouton à sa taille naturelle aligné à droite (pas étiré, pas centré sous le champ) */
  .history-search-bar{flex-direction:row;align-items:center}
  .history-search-bar .search-input-wrap{width:auto}
  .history-search-bar .btn{flex-shrink:0}
  /* [FIX] filtre par période : une ligne compacte « libellé + champ » par date, alignées à gauche comme le reste */
  .history-date-filter{flex-direction:column;align-items:stretch}
  .history-date-filter .form-group{width:100%}
  .form-row{grid-template-columns:1fr}
  .macros-grid{grid-template-columns:repeat(2,1fr)}
  .macro-detail-grid{grid-template-columns:repeat(2,1fr)}
  .daily-summary{grid-template-columns:1fr}
  .export-grid{grid-template-columns:1fr 1fr}
  .badges-grid{grid-template-columns:repeat(2,1fr)}
  .fav-grid{grid-template-columns:repeat(2,1fr)}
  .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  table{min-width:580px}
  /* [#42] règle "history-card-list : display flex (forcé)" déjà déclarée
     (et toujours gagnante en cascade) dans le bloc @media(max-width:900px) ci-dessous */
  #historyTable{display:none!important}
  .btn{min-height:44px}
  .btn-sm{min-height:44px;font-size:12px}
  .bmr-info-grid{grid-template-columns:1fr}
  /* [#42] règle "dashboard-meta : display none (forcé)" dupliquée et déjà déclarée (cascade gagnante)
     dans le bloc @media(max-width:900px) plus bas — supprimé d'ici pour éviter la redondance */
  .dash-cta{display:flex!important} /* [FIX] raccourcis cartes visibles sur mobile */
  .meta-item{width:100%}
  .nutri-stats{grid-template-columns:repeat(2,1fr)}
  .topbar-logo-mobile{display:block}
}
/* ── TRÈS PETIT (320px) ── */
@media(max-width:360px){
  .content{padding:8px}
  .stat-row{grid-template-columns:1fr}
  .badges-grid{grid-template-columns:1fr}
  .macro-dash{grid-template-columns:1fr}
  .card-value{font-size:20px}
  .bottom-nav-item span{font-size:9.5px}
  .bottom-nav-item{padding:4px 1px;min-width:0}
  .export-grid{grid-template-columns:1fr}
}

/* EXTRA */
.text-success{color:var(--success)}
.text-warning{color:var(--warning)}
.text-danger{color:var(--danger)}
.text-muted{color:var(--text-muted)}
.text-primary{color:var(--primary)}
.font-bold{font-weight:700}
.mt-4{margin-top:16px}
.mb-4{margin-bottom:16px}
.gap-2{gap:8px}
.flex{display:flex}
.items-center{align-items:center}
.justify-between{justify-content:space-between}
.w-full{width:100%}
.hidden{display:none!important}

/* SR ONLY (screen-reader) */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* TOOLTIP */
.tooltip-wrap{position:relative;display:inline-flex;align-items:center;gap:4px;cursor:help}
.tooltip-icon{color:var(--text-muted);font-size:12px;flex-shrink:0}
.tooltip-box{display:none;position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);background:var(--text);color:var(--card-bg);border-radius:var(--radius-sm);padding:8px 12px;font-size:12px;font-weight:400;width:230px;text-align:left;line-height:1.4;z-index:999;box-shadow:var(--shadow-lg);pointer-events:none;white-space:normal}
.tooltip-box::after{content:'';position:absolute;top:100%;left:50%;transform:translateX(-50%);border:6px solid transparent;border-top-color:var(--text)}
.tooltip-wrap:hover .tooltip-box,.tooltip-wrap:focus-within .tooltip-box{display:block}
/* FIELD VALIDATION */
.form-control.error{border-color:var(--danger);box-shadow:0 0 0 3px rgba(239,68,68,.15)} /* [#42] priorité forcée retirée : (0,0,2,0) = même spécificité que .form-control:focus mais déclaré après → gagne déjà en cascade */
.field-error{font-size:12px;color:var(--danger);margin-top:4px;display:flex;align-items:center;gap:4px}
/* CHART SPINNER */
.chart-container{position:relative}
.chart-loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(var(--card-bg),0.85);border-radius:var(--radius);z-index:2}
/* DAILY ENTRY FORM */
.day-card{background:var(--card-bg);border-radius:var(--radius);box-shadow:var(--shadow);padding:24px;max-width:600px;margin:0 auto}
.day-tabs{display:flex;gap:4px;background:var(--input-bg);border-radius:var(--radius-sm);padding:4px;margin-bottom:20px}
.day-tab{flex:1;padding:7px;min-height:44px;border:none;background:none;border-radius:var(--radius-sm);font-size:13px;font-weight:600;color:var(--text-muted);cursor:pointer;transition:var(--transition)}
.day-tab.active{background:var(--card-bg);color:var(--primary);box-shadow:var(--shadow)}

/* SECTION specific */
.dashboard-meta{background:var(--card-bg);border-radius:var(--radius);padding:16px 20px;box-shadow:var(--shadow);margin-bottom:16px;display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between}
.meta-item{display:flex;flex-direction:column}
.meta-item .label{font-size:12px;color:var(--text-muted);font-weight:600;text-transform:uppercase}
.meta-item .value{font-size:16px;font-weight:700}

/* Number inputs */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
input[type=number]{-moz-appearance:textfield}


/* Tag / chips */
.chip{display:inline-flex;align-items:center;padding:4px 10px;border-radius:20px;font-size:12px;font-weight:600;background:var(--input-bg);border:1px solid var(--border);color:var(--text-muted)}

/* legacy */
.food-search-bar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:16px}
.food-search-bar .search-input-wrap{flex:1;min-width:200px}
.food-results{margin-top:12px;display:flex;flex-direction:column;gap:8px;max-height:320px;overflow-y:auto}
.food-result-item{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:var(--radius-sm);border:1.5px solid var(--border);background:var(--input-bg);cursor:pointer;transition:var(--transition)}
.food-result-item:hover{border-color:var(--primary-light);background:rgba(var(--accent-rgb),.06)}
.food-result-img{width:50px;height:50px;border-radius:var(--radius-sm);object-fit:contain;background:#fff;flex-shrink:0}
.food-result-ph{width:50px;height:50px;border-radius:var(--radius-sm);background:var(--border);display:flex;align-items:center;justify-content:center;color:var(--text-muted);font-size:20px;flex-shrink:0}
.food-result-info{flex:1;min-width:0}
.food-result-name{font-weight:700;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.food-result-brand{font-size:12px;color:var(--text-muted)}
.food-result-meta{display:flex;align-items:center;gap:8px;margin-top:4px;flex-wrap:wrap}
.food-kcal{font-size:12px;font-weight:700;color:var(--warning)}
.ns{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:4px;font-size:12px;font-weight:900;color:#fff;text-transform:uppercase;flex-shrink:0}
.ns-a{background:#038141}.ns-b{background:#85bb2f}.ns-c{background:#fecb02;color:#333}.ns-d{background:#ee8100}.ns-e{background:#e63312}.ns-u{background:var(--border);color:var(--text-muted)}
.nova-b{display:inline-flex;align-items:center;padding:1px 5px;border-radius:10px;font-size:12px;font-weight:700}
.nova-1{background:rgba(56,161,105,.15);color:#38a169}.nova-2{background:rgba(237,173,14,.15);color:#b7791f}
.nova-3{background:rgba(221,107,32,.15);color:#c05621}.nova-4{background:rgba(229,62,62,.15);color:#c53030}
.sel-product{background:var(--input-bg);border-radius:var(--radius);border:2px solid var(--primary-light);padding:16px;margin-top:16px;animation:slideUp .3s}
.sel-product-hdr{display:flex;gap:14px;align-items:flex-start;margin-bottom:14px}
.sel-product-img{width:80px;height:80px;border-radius:var(--radius-sm);object-fit:contain;background:#fff;flex-shrink:0;border:1px solid var(--border)}
.sel-product-title{font-size:15px;font-weight:800;margin-bottom:4px}
.sel-product-brand{font-size:12px;color:var(--text-muted);margin-bottom:8px}
.macros-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:12px 0}
.macro-box{background:var(--card-bg);border-radius:var(--radius-sm);padding:10px;text-align:center;border:1px solid var(--border)}
.macro-box .mv{font-size:17px;font-weight:800}.macro-box .ml{font-size:12px;color:var(--text-muted);font-weight:600;text-transform:uppercase}
.qty-row{display:flex;gap:10px;align-items:center;margin-top:12px;flex-wrap:wrap}
.qty-preview{font-size:13px;color:var(--primary-light);font-weight:700}
.food-table{width:100%;border-collapse:collapse;font-size:13px;margin-top:8px}
.food-table th{background:var(--input-bg);padding:8px 10px;text-align:left;font-size:12px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.4px}
.food-table td{padding:9px 10px;border-top:1px solid var(--border);vertical-align:middle}
.food-table tr:hover td{background:rgba(var(--accent-rgb),.03)}
.food-img-sm{width:36px;height:36px;border-radius:var(--radius-sm);object-fit:contain;background:#fff;border:1px solid var(--border)}
.food-cards-m{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.food-item-c{background:var(--card-bg);border-radius:var(--radius-sm);border-left:3px solid var(--primary-light);padding:10px 12px;display:flex;gap:10px;align-items:center}
.food-item-c .fi-info{flex:1;min-width:0}
.food-item-c .fi-name{font-weight:700;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.food-item-c .fi-qty{font-size:12px;color:var(--text-muted)}
.food-item-c .fi-macros{display:flex;gap:8px;margin-top:4px;font-size:12px;flex-wrap:wrap}
.scanner-modal{position:fixed;inset:0;background:rgba(0,0,0,.85);z-index:300;display:flex;align-items:center;justify-content:center;padding:20px}
/* Dictée & scan d'assiette : overlays lancés PAR-DESSUS une autre modale (repas OU création de recette).
   .modal-backdrop est à z-index:200 → à égalité, l'ordre DOM tranche et la modale recette (plus bas dans le HTML)
   passait DEVANT #voiceModal/#mealScanModal. On les élève au-dessus des modales (600) et sous les toasts (1000). */
#voiceModal,#mealScanModal{z-index:700}
.scanner-inner{background:var(--card-bg);border-radius:var(--radius);padding:20px;width:100%;max-width:420px}
.scanner-inner h3{font-size:16px;font-weight:700;margin-bottom:16px}
.food-loading{display:flex;align-items:center;gap:10px;padding:16px;color:var(--text-muted);font-size:13px}
.spinner{width:18px;height:18px;border:2px solid var(--border);border-top-color:var(--primary-light);border-radius:50%;animation:spin .7s linear infinite;flex-shrink:0}
@keyframes spin{to{transform:rotate(360deg)}}
.nutri-stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin-bottom:20px}
.nutri-stat{background:var(--card-bg);border-radius:var(--radius-sm);padding:14px;box-shadow:var(--shadow);border:1px solid var(--border)}
.nutri-stat .nv{font-size:22px;font-weight:800}.nutri-stat .nl{font-size:12px;color:var(--text-muted);font-weight:600;text-transform:uppercase;letter-spacing:.4px;margin-top:2px}
.macro-pie-wrap{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:center}
.macro-leg{display:flex;flex-direction:column;gap:10px}
.macro-leg-item{display:flex;align-items:center;gap:10px;font-size:13px}
.macro-dot{width:14px;height:14px;border-radius:3px;flex-shrink:0}
.macro-pct{font-weight:700;font-size:15px;margin-left:auto}
.macro-dash{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px}
.macro-dash-card{background:var(--card-bg);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px}
.macro-dash-card .dv{font-size:22px;font-weight:800}.macro-dash-card .dl{font-size:12px;color:var(--text-muted);text-transform:uppercase;font-weight:600;letter-spacing:.4px;margin-top:2px}
@media(max-width:768px){.macros-grid{grid-template-columns:repeat(2,1fr)}}

@media(min-width:601px){.food-cards-m{display:none}}
/* ══════════════════════════════════════════════════════════
   JOURNAL PAR REPAS v2
   ══════════════════════════════════════════════════════════ */

/* Tabs alimentation */
.food-tabs{display:flex;gap:4px;background:var(--input-bg);border-radius:var(--radius-sm);padding:4px;margin-bottom:16px;overflow-x:auto;flex-wrap:nowrap}
.food-tab{flex-shrink:0;padding:7px 14px;min-height:44px;border:none;background:none;border-radius:var(--radius-sm);font-size:13px;font-weight:600;color:var(--text-muted);cursor:pointer;transition:var(--transition);white-space:nowrap;display:inline-flex;align-items:center;gap:6px}
.food-tab.active{background:var(--card-bg);color:var(--primary-light);box-shadow:var(--shadow)}

/* Section repas */
.meal-section{background:var(--card-bg);border-radius:var(--radius);box-shadow:var(--shadow);border-left:4px solid var(--primary-light);margin-bottom:14px;overflow:hidden}
.meal-section.pdb{border-left-color:#f59e0b}
.meal-section.dej{border-left-color:#10b981}
.meal-section.din{border-left-color:#6366f1}
.meal-section.enc{border-left-color:#f43f5e}
.meal-header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;cursor:pointer;user-select:none;transition:background .15s}
.meal-header:hover{background:rgba(0,0,0,.02)}
.meal-header-left{display:flex;align-items:center;gap:10px}
.meal-emoji{font-size:20px;line-height:1}
.meal-label{font-weight:700;font-size:15px}
.meal-count{background:var(--input-bg);border-radius:20px;padding:2px 8px;font-size:12px;color:var(--text-muted);font-weight:600}
.meal-header-right{display:flex;align-items:center;gap:10px}
.meal-kcal{font-size:13px;font-weight:700;color:var(--warning)}
.meal-pct{font-size:12px;color:var(--text-muted);font-weight:400}
.meal-chevron{font-size:12px;color:var(--text-muted);transition:transform .2s}
.meal-chevron.open{transform:rotate(180deg)}
.meal-progress{padding:0 16px 8px}
.meal-body{border-top:1px solid var(--border);overflow:hidden;transition:max-height .3s ease}
.meal-body.collapsed{display:none}
.meal-empty{text-align:center;padding:16px;color:var(--text-muted);font-size:13px;font-style:italic}
.meal-actions{display:flex;gap:8px;padding:12px 16px;flex-wrap:wrap;border-top:1px solid var(--border);background:var(--input-bg)}
.meal-actions .btn{font-size:12px;padding:7px 12px}

/* Items dans repas */
.meal-item-row{display:flex;align-items:center;gap:10px;padding:10px 16px;border-bottom:1px solid var(--border)}
.meal-item-row:last-child{border-bottom:none}
.meal-item-img{width:36px;height:36px;border-radius:var(--radius-sm);object-fit:contain;background:#fff;flex-shrink:0;border:1px solid var(--border)}
.meal-item-info{flex:1;min-width:0}
.meal-item-name{font-weight:700;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.meal-item-meta{font-size:12px;color:var(--text-muted)}
.meal-item-kcal{font-weight:800;color:var(--warning);font-size:13px;white-space:nowrap}

/* Récapitulatif journalier */
.daily-summary{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.summary-row{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;border-radius:var(--radius-sm);background:var(--input-bg);font-size:13px}
.summary-total{border-top:2px solid var(--primary-light);padding-top:10px;margin-top:4px;font-weight:800;font-size:15px}
.macro-detail-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}
.macro-detail-item{background:var(--input-bg);border-radius:var(--radius-sm);padding:10px;text-align:center}
.macro-detail-item .v{font-size:16px;font-weight:800}
.macro-detail-item .l{font-size:12px;color:var(--text-muted);text-transform:uppercase;font-weight:600}

/* Score alimentaire tooltip */
.score-title-wrap{display:flex;align-items:center;gap:6px}
/* Score alimentaire */
.food-score-card{background:var(--card-bg);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px;border-left:4px solid var(--primary-light);margin-bottom:14px}
.score-circle{width:80px;height:80px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:900;color:#fff;flex-shrink:0}
.score-excellent{background:linear-gradient(135deg,#038141,#56ab2f)}
.score-bon{background:linear-gradient(135deg,#5AB643,#85bb2f)}
.score-moyen{background:linear-gradient(135deg,#f59e0b,#fecb02)}
.score-bas{background:linear-gradient(135deg,#ef4444,#f87171)}
.score-details{flex:1}
.score-label{font-size:16px;font-weight:800;margin-bottom:4px}
.score-criteria{display:flex;flex-direction:column;gap:4px;margin-top:8px}
.score-crit-item{display:flex;align-items:center;gap:8px;font-size:12px}
.score-crit-item i{width:14px;text-align:center}

/* Détections comportementales */
.detection-list{display:flex;flex-direction:column;gap:8px}
.detection-item{display:flex;align-items:flex-start;gap:10px;padding:10px 14px;border-radius:var(--radius-sm);border-left:3px solid}
.det-warning{background:rgba(245,158,11,.1);border-left-color:var(--warning)}
.det-danger{background:rgba(239,68,68,.1);border-left-color:var(--danger)}
.det-info{background:rgba(var(--accent-rgb),.1);border-left-color:var(--primary-light)}
.detection-item i{margin-top:2px;flex-shrink:0}
.detection-item .det-msg{font-size:13px;font-weight:600}
.detection-item .det-sub{font-size:12px;color:var(--text-muted);margin-top:2px}

/* Chronologie */
.timeline-wrap{position:relative;padding-left:30px}
.timeline-wrap::before{content:'';position:absolute;left:10px;top:0;bottom:0;width:2px;background:var(--border)}
.timeline-event{position:relative;margin-bottom:16px}
.timeline-dot{position:absolute;left:-24px;top:4px;width:12px;height:12px;border-radius:50%;background:var(--primary-light);border:2px solid var(--card-bg)}
.timeline-time{font-size:12px;color:var(--text-muted);font-weight:600;margin-bottom:2px}
.timeline-card{background:var(--card-bg);border-radius:var(--radius-sm);padding:10px 14px;box-shadow:var(--shadow);border-left:3px solid var(--primary-light)}
.timeline-card .tc-name{font-weight:700;font-size:13px}
.timeline-card .tc-info{font-size:12px;color:var(--text-muted)}
.timeline-meal-group{margin-bottom:20px}
.timeline-meal-title{font-size:12px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px}

/* Favoris */
.fav-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px}
.fav-item{background:var(--card-bg);border-radius:var(--radius-sm);box-shadow:var(--shadow);padding:14px;border:1.5px solid var(--border);cursor:pointer;transition:var(--transition);position:relative}
.fav-item:hover{border-color:var(--primary-light)}
.fav-item .fi-name{font-weight:700;font-size:13px;margin-bottom:2px}
.fav-item .fi-kcal{font-size:12px;color:var(--warning);font-weight:700}
.fav-remove{position:absolute;top:6px;right:6px;background:none;border:none;color:var(--text-muted);font-size:12px;cursor:pointer;padding:2px}
.fav-remove:hover{color:var(--danger)}

/* Recettes */
.recipe-card{background:var(--card-bg);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px;border-left:4px solid var(--primary-light);margin-bottom:10px}
.recipe-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:8px}
.recipe-title{font-size:15px;font-weight:800}
.recipe-meta{font-size:12px;color:var(--text-muted)}
.recipe-ingredients{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.recipe-tag{background:var(--input-bg);border-radius:20px;padding:3px 10px;font-size:12px;font-weight:600;color:var(--text-muted)}

/* Modèles de repas */
.template-card{background:var(--card-bg);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px;border-left:4px solid var(--success);margin-bottom:10px}

/* Objectifs repas */
.meal-target-row{display:flex;align-items:center;gap:12px;padding:8px 0;border-bottom:1px solid var(--border)}
.meal-target-row:last-child{border-bottom:none}
.meal-target-label{flex:1;font-size:13px;font-weight:600}
.meal-target-input{width:70px;text-align:center}

/* Modal add food */
.add-food-modal-header{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.add-food-meal-tag{padding:4px 12px;border-radius:20px;font-size:12px;font-weight:700;color:#fff}

/* Analyse comportementale */
.analysis-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.analysis-item{background:var(--card-bg);border-radius:var(--radius-sm);padding:14px;box-shadow:var(--shadow);border-left:4px solid var(--primary-light)}
.analysis-item .av{font-size:20px;font-weight:800}
.analysis-item .al{font-size:12px;color:var(--text-muted);text-transform:uppercase;font-weight:600;letter-spacing:.4px;margin-top:2px}

/* Responsive */


/* [FIX] règle résiduelle retirée : la section Saisie poids doit s'afficher comme les autres */


/* ════════════════════════════════════════════════════
   RESPONSIVE MOBILE — généré et nettoyé
   ════════════════════════════════════════════════════ */
/* ================================================================
   MOBILE v3 — correctif complet
   Cause racine : .app est flex → min-width implicite des enfants
   Solution : display:block sur .app + containment overflow
   ================================================================ */
@media screen and (max-width:900px){
  html,body{overflow-x:hidden!important;width:100%!important;max-width:100%!important}
  body{padding-bottom:calc(72px + var(--safe-area-inset-bottom,env(safe-area-inset-bottom,0px)))!important}
  .app{display:block!important;width:100%!important;max-width:100%!important;overflow-x:hidden!important}
  .sidebar{display:none!important}
  .hamburger{display:none!important}
  .bottom-nav{display:flex!important}
  .main{margin-inline-start:0!important;width:100%!important;max-width:100%!important;min-width:0!important;overflow-x:hidden!important}
  .topbar{padding:var(--safe-area-inset-top,env(safe-area-inset-top,0px)) 12px 0!important;height:calc(52px + var(--safe-area-inset-top,env(safe-area-inset-top,0px)))!important;width:100%!important;max-width:100%!important;box-sizing:border-box!important;overflow:hidden!important}
  .topbar-logo-mobile{display:block!important}
  .topbar-title{display:none!important}
  .topbar-actions .chip{display:inline-flex!important}
  .btn-profile-mobile{display:flex!important}
  .content{padding:12px;width:100%;max-width:100%;min-width:0;box-sizing:border-box;overflow-x:hidden} /* [#42] priorité forcée retirée : aucune règle .content concurrente de spécificité égale ou sup. déclarée après — l'ordre source suffit déjà à garantir la cascade voulue */
  .section,.section.active{width:100%!important;max-width:100%!important;min-width:0!important;overflow-x:hidden!important;box-sizing:border-box!important}
  .card{padding:14px!important;width:100%;box-sizing:border-box} /* [#42] priorité forcée conservée sur padding seul (nécessaire pour surcharger un style inline padding:32px sur certaines cartes) ; retiré sur width/box-sizing, sans règle concurrente */
  .card-value{font-size:22px!important}
  .grid-2,.grid-3,.grid-4,.stat-row,.charts-grid,.form-row,.analysis-grid,.macro-pie-wrap,.daily-summary{grid-template-columns:1fr!important}
  .macros-grid,.nutri-full-grid,.macro-detail-grid,.macro-dash,.fav-grid,.export-grid,.badges-grid{grid-template-columns:repeat(2,1fr)!important}
  .bmr-info-grid{grid-template-columns:1fr 1fr!important}
  #section-alimentation{width:100%!important;max-width:100%!important;overflow-x:hidden!important}
  .food-tabs{display:flex!important;width:100%!important;max-width:100%!important;overflow-x:auto!important;overflow-y:hidden!important;-webkit-overflow-scrolling:touch!important;scrollbar-width:none!important;flex-wrap:nowrap!important;gap:2px!important;padding:4px!important;box-sizing:border-box!important}
  .food-tabs::-webkit-scrollbar{display:none!important}
  .food-tab{padding:6px 10px!important;font-size:12px!important;flex-shrink:0!important;white-space:nowrap!important}
  .modal-backdrop{padding:0 0 calc(62px + var(--safe-area-inset-bottom,env(safe-area-inset-bottom,0px))) 0!important;align-items:flex-end!important}
  .modal{width:100%!important;max-width:100%!important;max-height:88vh!important;border-radius:20px 20px 0 0!important;overflow-x:hidden!important;overflow-y:auto!important}
  .modal[style]{max-width:100%!important}
  /* Zone sûre du bas (barre de navigation gestuelle / système) sous le contenu scrollable des
     feuilles « Ajouter un aliment » etc. : sinon le dernier élément passe sous la barre d'onglets
     en edge-to-edge Android (insets natifs via --sab ; iOS via env). */
  .modal-body{overflow-x:hidden!important;padding-bottom:calc(20px + var(--safe-area-inset-bottom,env(safe-area-inset-bottom,0px)))!important}
  .modal-header{padding-top:14px!important}
  .sel-product{padding:12px!important;width:100%!important;max-width:100%!important;box-sizing:border-box!important;overflow-x:hidden!important}
  .sel-product-hdr .sel-product-img{width:56px;height:56px}
  .food-results{max-width:100%!important;box-sizing:border-box!important}
  .food-result-item{min-width:0!important;max-width:100%!important;box-sizing:border-box!important}
  .food-result-info{min-width:0!important;overflow:hidden!important}
  .jyl-qty-block,.recent-foods-section{max-width:100%!important;box-sizing:border-box!important}
  .jyl-qty-line{flex-wrap:wrap}
  .jyl-qty-line input{width:80px;max-width:80px;flex-shrink:0}
  .jyl-qty-line .qty-preview{flex:1;min-width:0;max-width:100%}
  .unit-btns{flex-wrap:wrap}
  .recent-chip .rc-kcal{display:none}
  .table-wrap,.historyTable-wrap{display:none!important}
  .history-card-list{display:flex!important}
  .food-table{display:none!important}
  .food-cards-m{display:flex!important}
  .section-header{flex-direction:column;align-items:flex-start;gap:8px} /* [#42] priorité forcée retirée : valeurs identiques à .section-header du bloc @media(max-width:600px), gagne déjà nativement par ordre source */
  .section-header h2{font-size:16px}
  .sym-hero-t{font-size:16px}
  .gauge-svg{width:120px;height:70px}
  .chart-container{height:180px} /* [#42] priorité forcée retirée : aucune règle .chart-container concurrente déclarée après — l'ordre source suffit */
  .setup-screen{padding:12px} /* [#42] priorité forcée retirée : idem (aucune règle/style inline concurrent) */
  .setup-card{padding:20px} /* [#42] priorité forcée retirée : aucune règle .setup-card concurrente de spécificité égale ou sup. ni style inline — l'ordre source (déclaré après la règle de base) suffit à imposer cette valeur */
  .setup-logo img{width:180px;height:180px}
  .btn{padding:10px 14px!important;font-size:13px!important}
  .btn-sm{padding:8px 12px} /* [#42] priorité forcée retirée : aucune règle .btn-sm concurrente de spécificité égale ou sup., ni style inline — l'ordre source suffit */
  .td-actions .btn{min-width:44px;min-height:44px}
  .dashboard-meta{display:none!important}
  .dashboard-meta::-webkit-scrollbar{display:none}
  .meta-item{flex-shrink:0}
  .meal-actions{gap:6px}
  .meal-actions .btn{padding:7px 10px;font-size:12px}
  .meal-label{font-size:13px}
  .meal-header{padding:12px}
  .toast-container{bottom:calc(74px + var(--safe-area-inset-bottom,env(safe-area-inset-bottom,0px)));left:10px;right:10px}
  .toast{min-width:unset;width:100%;box-sizing:border-box}
  .scanner-inner{max-width:100%;box-sizing:border-box}
  .day-card{padding:16px;max-width:100%;box-sizing:border-box}
  .more-menu{left:0!important;right:0!important}
  /* Modaux inline style — override forcé */
  div.modal[style*="max-width"]{max-width:100%!important;width:100%!important}
}
@media screen and (max-width:500px){
  .content{padding:8px} /* [#42] priorité forcée retirée : valeur identique à .content du bloc @media(max-width:360px), gagne déjà nativement par ordre source */
  .card{padding:12px!important}
  .export-grid,.badges-grid{grid-template-columns:1fr!important}
  .topbar-actions .btn span{display:none!important}
  .food-tab{padding:5px 8px!important;font-size:12px!important}
}

/* [FIX-3.4] Empty states avec CTA */
.empty-state{text-align:center;padding:32px 20px;color:var(--text-muted)}
.empty-state i{font-size:34px;opacity:.35;margin-bottom:12px;display:block}
.empty-state .es-title{font-weight:700;font-size:15px;color:var(--text);margin-bottom:4px}
.empty-state .es-desc{font-size:13px;margin-bottom:14px;max-width:340px;margin-left:auto;margin-right:auto;line-height:1.4}
.daily-cta:hover{box-shadow:var(--shadow-md);transform:translateY(-1px)}
.dash-cta{display:none!important} /* [FIX] raccourcis cartes : mobile uniquement */
.daily-cta:focus-visible{outline:2px solid var(--primary-light);outline-offset:2px}
.src-badge{font-size:12px;margin-left:auto;opacity:.85;white-space:nowrap;flex-shrink:0}
/* Historique hydratation repliable (details/summary), fermé par défaut */
.hydro-hist summary{cursor:pointer;font-weight:600;font-size:14px;padding:8px 2px;color:var(--text)}
.hydro-hist summary i{margin-right:4px}
.hydro-hist-count{color:var(--text-muted);font-weight:500}
.hydro-hist[open] summary{margin-bottom:6px}
.hydro-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch} /* [FIX] historique hydratation visible sur mobile */
.hydro-table-wrap table{min-width:0;width:100%} /* [FIX] s'adapte à l'écran -> colonne Actions accessible sur mobile */
.hydro-table-wrap th,.hydro-table-wrap td{padding:8px 8px}
/* ===== Page d'aide (FAQ accordéon) ===== */
.help-search-wrap{margin-bottom:16px}
.help-item{background:var(--card-bg);border:1px solid var(--border);border-left:4px solid var(--primary-light);border-radius:var(--radius-sm);margin-bottom:10px;overflow:hidden}
.help-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;background:none;border:none;text-align:left;font-size:15px;font-weight:700;color:var(--text);cursor:pointer;font-family:inherit}
.help-q:hover{background:rgba(var(--accent-rgb),.06)}
.help-q>span{display:flex;align-items:center;gap:10px}
.help-chev{transition:transform .25s;color:var(--text-muted);font-size:13px;flex-shrink:0}
.help-item.open .help-chev{transform:rotate(180deg)}
.help-a{display:none;padding:0 16px 16px;font-size:14px;line-height:1.6;color:var(--text-muted)}
.help-item.open .help-a{display:block}
.help-a p{margin:6px 0}
.help-a ul{margin:6px 0 6px 20px;display:block}
.help-a li{margin:3px 0;list-style:disc}
.help-a strong{color:var(--text)}
.help-a .ex{background:var(--input-bg);border-radius:var(--radius-sm);padding:8px 10px;margin-top:8px;font-size:13px;border-left:3px solid var(--secondary)}
.help-to-top{position:fixed;right:18px;bottom:calc(78px + var(--safe-area-inset-bottom,env(safe-area-inset-bottom,0px)));width:46px;height:46px;border-radius:50%;background:var(--grad);color:#fff;border:none;box-shadow:var(--shadow-lg);font-size:16px;cursor:pointer;z-index:80;display:flex;align-items:center;justify-content:center}
@media print{
  body *{visibility:hidden!important}
  #section-aide,#section-aide *{visibility:visible!important}
  #section-aide{position:absolute;left:0;top:0;width:100%;padding:0}
  .help-a{display:block!important}
  .help-chev,.help-to-top,.help-search-wrap,.section-header .btn{display:none!important}
  /* ── Rapport médecin : seul #reportPrint est visible à l'impression ── */
  #reportPrint,#reportPrint *{visibility:visible!important}
  #reportPrint{display:block!important;position:absolute;left:0;top:0;width:100%;padding:0;color:#000;background:#fff}
}
/* ─── RAPPORT POUR LE MÉDECIN ────────────────────────────────────────── */
/* Conteneur caché à l'écran, révélé uniquement à l'impression (via @media print) */
#reportPrint{display:none}
@page{size:A4;margin:14mm}
.rpt-doc{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;color:#1a1a1a;font-size:12px;line-height:1.45}
.rpt-head{display:flex;align-items:flex-start;gap:14px;border-bottom:3px solid #1B3152;padding-bottom:12px;margin-bottom:16px}
.rpt-logo{width:54px;height:54px;flex-shrink:0;border-radius:10px}
.rpt-head-txt{flex:1;min-width:0}
.rpt-head-txt h1{font-size:19px;font-weight:800;color:#1B3152;line-height:1.2;margin:0}
.rpt-sub{font-size:11.5px;color:#555;margin:2px 0 8px}
.rpt-meta{font-size:11px;color:#444;line-height:1.55}
.rpt-meta span{display:inline-block;margin-right:18px}
.rpt-meta strong{color:#1B3152}
.rpt-sec{margin:0 0 18px;page-break-inside:avoid}
.rpt-sec h2{font-size:14px;font-weight:800;color:#1B3152;border-left:4px solid #5AB643;padding-left:9px;margin:0 0 10px;text-transform:uppercase;letter-spacing:.4px}
.rpt-kpis{display:flex;flex-wrap:wrap;gap:10px}
.rpt-kpi{flex:1 1 0;min-width:120px;border:1px solid #d9dde3;border-top:3px solid #00B2D4;border-radius:8px;padding:10px 12px;background:#fafbfc;text-align:center}
.rpt-kpi-v{font-size:19px;font-weight:800;color:#1B3152;line-height:1.1}
.rpt-kpi-l{font-size:10px;font-weight:700;color:#667;text-transform:uppercase;letter-spacing:.5px;margin-top:4px}
.rpt-table{width:100%;border-collapse:collapse;font-size:11px;margin-top:6px}
.rpt-table th,.rpt-table td{border:1px solid #d9dde3;padding:6px 8px;text-align:left}
.rpt-table th{background:#1B3152;color:#fff;font-weight:700;font-size:10px;text-transform:uppercase;letter-spacing:.3px}
.rpt-table tbody tr:nth-child(even){background:#f5f7fa}
.rpt-badge{display:inline-block;padding:2px 9px;border-radius:11px;font-size:10px;font-weight:700;white-space:nowrap}
.rpt-badge.rpt-green{background:#e3f4dd;color:#2f7d1c}
.rpt-badge.rpt-orange{background:#fdeede;color:#b5651b}
.rpt-badge.rpt-red{background:#fbe2e0;color:#c0341d}
.rpt-badge.rpt-gray{background:#eceef1;color:#667}
.rpt-chart{width:100%;max-width:560px;display:block;margin:4px auto 8px}
.rpt-empty{font-size:11px;color:#889;font-style:italic;padding:6px 0}
.rpt-other-h{font-size:11.5px;margin:10px 0 4px}
.rpt-other{font-size:11px;color:#556;margin:0;padding-left:20px}
.rpt-other li{margin-bottom:2px}
.rpt-foot{margin-top:18px;padding-top:10px;border-top:1px solid #d9dde3;font-size:9.5px;color:#789;line-height:1.5}
/* Note RGPD dans la modale de configuration (écran) */
.rpt-rgpd{display:flex;gap:9px;align-items:flex-start;background:var(--input-bg);border:1px solid var(--border);border-left:3px solid var(--secondary);border-radius:var(--radius-sm);padding:10px 12px;font-size:12px;color:var(--text-muted);line-height:1.45;margin:14px 0}
.rpt-rgpd i{color:var(--secondary);margin-top:2px;flex-shrink:0}
/* ─── SÉRIE DE PESÉE (rétention) ────────────────────────────────────── */
.streak-card{display:flex;align-items:center;gap:12px;background:rgba(var(--accent-rgb),.10);border:1px solid rgba(var(--accent-rgb),.25);border-radius:var(--radius);padding:12px 16px;margin-bottom:16px}
.streak-card .streak-fire{font-size:24px;line-height:1;flex-shrink:0}
.streak-card .streak-n{font-size:15px;font-weight:700;color:var(--primary-light);line-height:1.35}
.streak-card .streak-sub{font-size:14px;color:var(--text);line-height:1.4}
.streak-card.streak-prompt{background:var(--card-bg);border:1px dashed var(--border)}
/* ─── BANDEAU PARRAINAGE (défilant) ─────────────────────────────────── */
.ref-banner{position:relative;overflow:hidden;white-space:nowrap;background:var(--grad);color:#fff;border-radius:12px;padding:9px 34px 9px 0;margin-bottom:12px;cursor:pointer;box-shadow:var(--shadow-sm)}
.ref-banner-track{display:inline-block;white-space:nowrap;will-change:transform;animation:ref-marquee 20s linear infinite;font-size:.9rem;font-weight:600}
.ref-banner-track span{padding:0 1.5rem}
.ref-banner:hover .ref-banner-track,.ref-banner:focus .ref-banner-track{animation-play-state:paused}
.ref-banner-cta{position:absolute;right:0;top:0;bottom:0;width:34px;display:flex;align-items:center;justify-content:center;font-size:1rem;background:linear-gradient(90deg,transparent,rgba(0,0,0,.12) 40%);pointer-events:none;animation:ref-nudge 1.2s ease-in-out infinite}
@keyframes ref-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes ref-nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(3px)}}
[dir=rtl] .ref-banner{padding:9px 0 9px 34px}
[dir=rtl] .ref-banner-cta{right:auto;left:0;transform:scaleX(-1);background:linear-gradient(270deg,transparent,rgba(0,0,0,.12) 40%)}
[dir=rtl] .ref-banner-track{animation-name:ref-marquee-rtl}
@keyframes ref-marquee-rtl{from{transform:translateX(-50%)}to{transform:translateX(0)}}
/* ─── ARTICLES (lecture) ────────────────────────────────────────────── */
.article-body{font-size:15px;line-height:1.65;color:var(--text)}
.article-body h2,.article-body h3{color:var(--primary);margin:18px 0 8px;line-height:1.3}
.article-body h3{font-size:1.05rem}
.article-body p{margin:0 0 12px}
.article-body ul,.article-body ol{margin:0 0 12px;padding-left:22px}
.article-body li{margin:4px 0}
.article-body img{max-width:100%;height:auto;border-radius:10px;margin:8px 0}
.article-body a{color:var(--primary-light);text-decoration:underline}
.article-card:hover{box-shadow:var(--shadow-sm)}
/* ─── HERO CARD ─────────────────────────────────────────────────────── */
.hero-card{background:var(--grad);border-radius:var(--radius);padding:20px 24px;margin-bottom:16px;color:#fff;display:flex;align-items:center;gap:16px;box-shadow:var(--shadow-md)}
.hero-card-icon{font-size:30px;flex-shrink:0;line-height:1}
.hero-card-body{flex:1;min-width:0}
.hero-card-title{font-size:17px;font-weight:800;line-height:1.35;margin-bottom:4px}
.hero-card-sub{font-size:13px;opacity:.88;line-height:1.45}
.hero-card.hero-empty{background:var(--card-bg);border:2px dashed var(--border);color:var(--text-muted)}
.hero-card.hero-empty .hero-card-title{color:var(--text)}
/* Hero à 2 rangées quand il porte la barre 7 jours : icône+texte en haut, barre pleine largeur dessous */
.hero-card.hero-has-week{flex-direction:column;align-items:stretch;gap:0}
.hero-card .hero-top{display:flex;align-items:center;gap:16px;width:100%}
/* Barre 7 jours (lun→dim) en bas du hero — pastille pleine = repas saisi, discrète = passé sans repas, anneau = à venir */
.hero-week{display:flex;align-items:center;gap:6px;margin-top:14px;width:100%}
.hero-week .hw-days{display:flex;justify-content:space-between;gap:6px;flex:1;min-width:0}
.hero-week .hw-nav{flex:0 0 auto;background:transparent;border:none;color:#fff;opacity:.75;font-size:22px;line-height:1;padding:2px 6px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.hero-week .hw-nav:active{opacity:1;transform:scale(.88)}
.hero-week .hw-day{display:flex;flex-direction:column;align-items:center;gap:4px;flex:1;min-width:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.hero-week .hw-day:active{transform:scale(.92)}
.hero-week .hw-day .hw-dot{transition:transform .1s ease}
.hero-week .hw-dot{width:20px;height:20px;border-radius:50%;box-sizing:border-box}
.hero-week .hw-done{background:#fff}
.hero-week .hw-empty{background:rgba(255,255,255,.24)}
.hero-week .hw-future{background:transparent;border:1.5px solid rgba(255,255,255,.5)}
.hero-week .hw-day.hw-today .hw-dot{background:#FFCE54;border:none;box-shadow:0 0 0 2px rgba(255,255,255,.55)}
.hero-week .hw-day.hw-sel .hw-dot{box-shadow:0 0 0 2px rgba(255,255,255,.95);transform:scale(1.12)}
.hero-week .hw-day.hw-sel .hw-lbl{opacity:1;text-decoration:underline}
.hero-week .hw-lbl{font-size:10px;font-weight:700;color:#fff;opacity:.85;line-height:1}
/* Récap du jour sélectionné, sous la barre (dans le hero) */
.hero-day{margin-top:12px;padding-top:10px;border-top:1px solid rgba(255,255,255,.22);display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;font-size:13px}
.hero-day .hero-day-date{font-weight:800;text-transform:capitalize}
.hero-day .hero-day-cal{font-weight:700}
.hero-day .hero-day-macros{opacity:.85}
/* ─── DASHBOARD PRIMARY STRIP ───────────────────────────────────────── */
.dash-primary-card{background:var(--card-bg);border-radius:var(--radius);padding:16px 12px;box-shadow:var(--shadow);text-align:center;border-top:3px solid var(--primary-light)}
.dash-primary-label{font-size:12px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px}
.dash-primary-value{font-size:24px;font-weight:800;color:var(--text);line-height:1}
.dash-primary-sub{font-size:12px;color:var(--text-muted);margin-top:5px;line-height:1.3}
/* ─── DASHBOARD TOGGLE ───────────────────────────────────────────────── */
.dash-toggle-btn{display:flex;align-items:center;gap:8px;margin:0 0 16px;padding:10px 16px;background:var(--input-bg);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-muted);font-size:13px;font-weight:600;cursor:pointer;transition:var(--transition);min-height:44px;width:100%;justify-content:center}
.dash-toggle-btn:hover{border-color:var(--primary-light);color:var(--primary-light)}
.dash-toggle-btn:focus-visible{outline:2px solid var(--primary-light);outline-offset:2px}
.dtb-chev{transition:transform .25s}
.dash-toggle-btn.open .dtb-chev{transform:rotate(180deg)}
#dashDetails{display:none}
#dashDetails.open{display:block}
/* ─── FAB ─────────────────────────────────────────────────────────────── */
.fab-container{position:fixed;bottom:calc(72px + var(--safe-area-inset-bottom,env(safe-area-inset-bottom,0px)));right:16px;z-index:195;display:flex;flex-direction:column-reverse;align-items:flex-end;gap:10px}
.fab-btn{width:56px;height:56px;border-radius:50%;background:var(--grad);border:none;color:#fff;font-size:20px;box-shadow:var(--shadow-lg);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:box-shadow .2s}
.fab-btn:hover{box-shadow:var(--shadow-lg);filter:brightness(1.08)}
.fab-btn:focus-visible{outline:3px solid var(--primary-light);outline-offset:3px}
.fab-btn i{transition:transform .25s}
.fab-btn[aria-expanded="true"] i{transform:rotate(45deg)}
.fab-menu{display:flex;flex-direction:column;gap:8px;align-items:flex-end}
.fab-menu[hidden]{display:none!important}
.fab-item{display:flex;align-items:center;gap:10px;padding:10px 16px;border-radius:24px;background:var(--card-bg);border:1px solid var(--border);box-shadow:var(--shadow-md);font-size:14px;font-weight:600;color:var(--text);cursor:pointer;min-height:44px;white-space:nowrap;transition:var(--transition)}
.fab-item:hover{background:var(--input-bg);border-color:var(--primary-light);color:var(--primary-light)}
.fab-item i{width:18px;text-align:center;color:var(--primary-light)}
.fab-item:focus-visible{outline:2px solid var(--primary-light);outline-offset:2px}
/* ─── CHART INTERPRETATIONS (#16) ───────────────────────────────────── */
.chart-interp{font-size:12px;color:var(--text-muted);line-height:1.5;padding:7px 12px;background:var(--input-bg);border-radius:var(--radius-sm);margin-top:8px;min-height:18px}
/* ─── ADVANCED CHART DETAILS BLOCK (#23) ────────────────────────────── */
.chart-advanced{margin-top:20px;border:1px solid var(--border);border-radius:var(--radius-sm)}
.chart-advanced-summary{display:flex;align-items:center;gap:8px;padding:12px 16px;cursor:pointer;font-size:13px;font-weight:700;color:var(--text-muted);list-style:none;user-select:none;min-height:44px;border-radius:var(--radius-sm)}
.chart-advanced-summary::-webkit-details-marker{display:none}
.adv-chev{margin-left:auto;transition:transform .2s}
details.chart-advanced[open] .adv-chev{transform:rotate(180deg)}
.chart-advanced-summary:hover{color:var(--primary-light)}
.chart-advanced-inner{padding:12px 12px 4px}
/* ─── CALORIE RING (#36) ─────────────────────────────────────────────── */
.cal-ring-card{background:var(--card-bg);border-radius:var(--radius);padding:16px 20px;box-shadow:var(--shadow);display:flex;align-items:center;gap:20px;margin-bottom:16px;flex-wrap:wrap;justify-content:center}
.cal-ring-values{display:flex;flex-direction:column;gap:6px;flex:1;min-width:140px}
.cal-ring-row{display:flex;align-items:center;gap:8px;font-size:13px}
.cal-ring-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.cal-ring-lbl{color:var(--text-muted);flex:1}
.cal-ring-val{font-weight:700}
/* ─── MODE SIMPLE (#25) ─────────────────────────────────────────────── */
/* .adv-only est masqué via JS (_applyAppMode) — pas de transition ici */
/* ─── DASH BLOCKS (#24) ──────────────────────────────────────────────── */
.dash-block{transition:opacity .2s}
.dash-block-hdr{margin-bottom:12px;font-size:13px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;display:flex;align-items:center;gap:6px}
.dash-block[data-hidden="1"]{display:none}
/* Modale personnalisation cartes */
.dash-card-list{display:flex;flex-direction:column;gap:8px;margin:12px 0}
.dash-card-item{display:flex;align-items:center;gap:10px;padding:8px 12px;background:var(--input-bg);border:1px solid var(--border);border-radius:var(--radius-sm)}
.dash-card-item label{flex:1;cursor:pointer;font-size:14px;display:flex;align-items:center;gap:8px}
.dash-card-item .move-btns{display:flex;gap:4px}
.dash-card-item .move-btns button{min-width:32px;min-height:32px;padding:0;background:none;border:1px solid var(--border);border-radius:4px;color:var(--text-muted);cursor:pointer;display:flex;align-items:center;justify-content:center}
.dash-card-item .move-btns button:hover{background:var(--card-bg);color:var(--primary-light)}
.dash-card-item .move-btns button:disabled{opacity:.3;cursor:default}
/* ─── ONBOARDING CHECKLIST (#18) ────────────────────────────────────── */
.onb-checklist{background:var(--card-bg);border:1px solid var(--border);border-radius:var(--radius);padding:16px 20px;margin-bottom:16px;box-shadow:var(--shadow)}
.onb-checklist-title{font-size:14px;font-weight:700;margin-bottom:12px;display:flex;align-items:center;gap:8px}
.onb-step{display:flex;align-items:center;gap:12px;padding:8px 0;font-size:14px;border-top:1px solid var(--border)}
.onb-step:first-of-type{border-top:none}
.onb-step-icon{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0}
.onb-step-icon.done{background:var(--success);color:#fff}
.onb-step-icon.todo{background:var(--border);color:var(--text-muted)}
.onb-step-label{flex:1;color:var(--text)}
.onb-step-label.done{color:var(--text-muted);text-decoration:line-through}
/* ─── ENCOURAGEMENT BUBBLE (enc) ────────────────────────────────────── */
.enc-bubble{max-width:210px;background:var(--card-bg);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:10px 12px;font-size:13px;line-height:1.45;color:var(--text);display:flex;align-items:flex-start;gap:8px}
.enc-bubble[hidden]{display:none!important}
.enc-bubble-icon{font-size:16px;flex-shrink:0;line-height:1.45}
.enc-bubble-text{flex:1}
.enc-bubble-close{background:none;border:none;color:var(--text-muted);cursor:pointer;padding:0 0 0 4px;font-size:16px;line-height:1;flex-shrink:0;display:flex;align-items:center;min-height:24px}
.enc-bubble-close:hover{color:var(--text)}
.enc-bubble-close:focus-visible{outline:2px solid var(--primary-light);border-radius:2px}
/* ─── ANALYSES HUB + TABS (#15) ─────────────────────────────────────── */
.analyses-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:20px;padding-bottom:14px;border-bottom:1px solid var(--border)}
.atab{display:flex;align-items:center;gap:6px;padding:8px 16px;border:1px solid var(--border);background:none;color:var(--text-muted);font-size:13px;font-weight:600;cursor:pointer;border-radius:var(--radius-sm);transition:var(--transition);min-height:44px}
.atab:hover{border-color:var(--primary-light);color:var(--primary-light)}
.atab.active{background:rgba(var(--accent-rgb),.1);border-color:var(--primary-light);color:var(--primary-light)}
.atab:focus-visible{outline:2px solid var(--primary-light);outline-offset:2px}
.analyses-hub-card{display:flex;align-items:center;gap:16px;padding:20px;cursor:pointer;background:var(--card-bg);border-radius:var(--radius);box-shadow:var(--shadow);border-left:4px solid var(--primary-light);transition:var(--transition)}
.analyses-hub-card:hover{box-shadow:var(--shadow-md);transform:translateY(-1px)}
.analyses-hub-card:focus-visible{outline:2px solid var(--primary-light);outline-offset:2px}
/* ─── RECENT FOODS IN ADD-FOOD MODAL ────────────────────────────────── */
.recent-foods-section{margin-top:14px;padding-top:14px;border-top:1px solid var(--border)}
.recent-foods-title{font-size:12px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px;display:flex;align-items:center;gap:6px}
.recent-chips{display:grid;grid-template-columns:repeat(2,1fr);grid-auto-flow:row;gap:8px}
.recent-chip{display:flex;align-items:center;gap:6px;padding:6px 12px;background:var(--input-bg);border:1px solid var(--border);border-radius:20px;font-size:13px;cursor:pointer;transition:var(--transition);min-height:40px;color:var(--text);min-width:0}
.recent-chip:hover{border-color:var(--primary-light);background:rgba(var(--accent-rgb),.07);color:var(--primary-light)}
.recent-chip:focus-visible{outline:2px solid var(--primary-light);outline-offset:2px}
.rc-name{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}
.rc-qty{font-size:12px;color:var(--secondary);flex-shrink:0}
.rc-kcal{font-size:12px;color:var(--text-muted);flex-shrink:0}

/* [FIX-OFFLINE-BANNER] #offlineBanner porte un style inline "display:flex" (mise en page),
 * qui a une priorité supérieure à la règle UA [hidden]{display:none} : sans cette règle,
 * l'attribut "hidden" géré en JS (_setOfflineBanner) n'a visuellement aucun effet et le
 * bandeau reste affiché en permanence. !important rétablit la priorité attendue. */
#offlineBanner[hidden]{display:none!important}

/* ── Pèse-personne impédancemètre (composition corporelle) ───────────────── */
.impedance-toggle {
  display: flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  padding: 10px 14px;
  background: var(--input-bg);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}
.impedance-toggle input[type="checkbox"] {
  width: 17px; height: 17px;
  accent-color: var(--primary);
  cursor: pointer;
  flex-shrink: 0;
}
.impedance-toggle:has(input:checked) {
  border-color: var(--primary);
  background: rgba(var(--primary-rgb,99,102,241),.06);
}
.impedance-block {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height .38s ease, opacity .3s ease, margin-top .3s ease;
  margin-top: 0;
}
.impedance-block.open {
  max-height: 320px;
  opacity: 1;
  margin-top: 12px;
}
.input-with-unit { position: relative; }
.input-with-unit .form-control { padding-right: 38px; }
.input-unit {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  pointer-events: none;
}

/* ── Page Prévention santé ───────────────────────────────────────────────── */
.prev-wrap { max-width: 740px; margin: 0 auto; padding: 4px 0 24px; }
.prev-hero { text-align: center; padding: 8px 4px 4px; }
.prev-hero-ic {
  width: 56px; height: 56px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 12px;
  background: rgba(var(--accent-rgb),.14);
  color: var(--primary-light); font-size: 24px;
}
.prev-hero-t { font-size: 22px; line-height: 1.3; font-weight: 700; margin: 0 0 8px; color: var(--text-primary); }
.prev-hero-s { font-size: 14px; line-height: 1.6; color: var(--text-muted); max-width: 560px; margin: 0 auto; }
.prev-risk {
  margin: 22px 0; padding: 16px 18px;
  border-radius: var(--radius-md,14px);
  background: rgba(239,68,68,.07);
  border: 1px solid rgba(239,68,68,.25);
  border-left: 4px solid var(--danger,#ef4444);
}
.prev-risk-h { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: 15px; color: var(--danger,#ef4444); margin-bottom: 8px; }
.prev-risk-b { font-size: 13.5px; line-height: 1.65; color: var(--text-secondary,#444); margin: 0; }
.prev-advice-t { font-size: 17px; font-weight: 700; margin: 24px 0 12px; color: var(--text-primary); }
.prev-cards { display: grid; gap: 12px; }
.prev-card {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 14px 16px; border-radius: var(--radius-md,14px);
  background: var(--card-bg); border: 1px solid var(--border);
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.prev-card-ic {
  flex-shrink: 0; width: 40px; height: 40px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(var(--accent-rgb),.14);
  color: var(--primary-light); font-size: 17px;
}
.prev-card-t { font-size: 15px; font-weight: 600; margin: 0 0 4px; color: var(--text-primary); }
.prev-card-b { font-size: 13px; line-height: 1.6; color: var(--text-muted); margin: 0; }
.prev-disclaimer {
  display: flex; gap: 8px; align-items: flex-start;
  margin: 22px 0 8px; padding: 12px 14px;
  border-radius: var(--radius-sm); background: var(--input-bg);
  font-size: 12px; line-height: 1.55; color: var(--text-muted);
}
@media (min-width: 560px) {
  .prev-cards { grid-template-columns: 1fr 1fr; }
  .prev-hero-t { font-size: 25px; }
}

/* ── Module Symptômes ────────────────────────────────────────────────────── */
.sym-wrap { max-width: 740px; margin: 0 auto; padding: 4px 0 24px; }
.sym-hero { padding: 4px 2px 2px; }
.sym-hero-t { font-size: 20px; font-weight: 700; margin: 0 0 6px; color: var(--text-primary); }
.sym-hero-s { font-size: 13.5px; line-height: 1.55; color: var(--text-muted); margin: 0; }
.sym-daterow { display: flex; flex-direction: column; gap: 6px; margin: 16px 0 4px; }
.sym-daterow .form-control { max-width: 220px; }
.sym-cat { margin-top: 16px; border: 1px solid var(--border); border-radius: var(--radius-md,14px); background: var(--card-bg); overflow: hidden; }
.sym-cat-h { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--text-secondary,#555); background: var(--input-bg); padding: 9px 14px; }
.sym-row { display: flex; align-items: flex-start; gap: 12px; padding: 13px 14px; border-top: 1px solid var(--border-light,var(--border)); }
.sym-cat .sym-row:first-of-type { border-top: none; }
.sym-ic { flex-shrink: 0; width: 34px; height: 34px; border-radius: 9px; display: flex; align-items: center; justify-content: center; background: rgba(var(--primary-rgb,99,102,241),.10); color: var(--primary); font-size: 15px; margin-top: 2px; }
.sym-body { flex: 1; min-width: 0; }
.sym-line { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.sym-n { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.sym-slide-lbl { font-size: 12px; font-weight: 700; flex-shrink: 0; white-space: nowrap; }
.sym-d { font-size: 11.5px; line-height: 1.4; color: var(--text-muted); margin: 1px 0 9px; }
.sym-slider {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 24px;              /* zone tactile haute (iOS/Android) ; la barre reste fine via padding + background-clip */
  padding: 9px 0; box-sizing: border-box;
  border-radius: 5px;
  background: linear-gradient(90deg,#2ecc71,#a3cb38 30%,#f1c40f 55%,#e67e22 78%,#e74c3c);
  background-clip: content-box;           /* le dégradé (6px) reste centré, mais on touche 24px de haut */
  outline: none; cursor: pointer;
  touch-action: pan-y;   /* le scroll vertical reste natif ; le glissement horizontal est piloté en JS (détection d'intention) */
}
/* RTL : le thumb natif est miroité (0 à droite) → on inverse aussi le dégradé (vert à droite, rouge à gauche) */
[dir=rtl] .sym-slider { background: linear-gradient(270deg,#2ecc71,#a3cb38 30%,#f1c40f 55%,#e67e22 78%,#e74c3c); background-clip: content-box; }
.sym-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 20px; height: 20px; border-radius: 50%;
  background: #fff; border: 3px solid var(--primary);
  box-shadow: 0 1px 4px rgba(0,0,0,.3); cursor: pointer;
}
.sym-slider::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%;
  background: #fff; border: 3px solid var(--primary);
  box-shadow: 0 1px 4px rgba(0,0,0,.3); cursor: pointer;
}
.sym-slider:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
/* Curseur désactivé (synchro activité : Marche/Course… gérés par Health) : piste grise unie,
   désaturée, bien distincte des curseurs actifs. */
.sym-slider:disabled {
  background: var(--border);
  filter: grayscale(1);
  opacity: .45;
  cursor: not-allowed;
}
.sym-slider:disabled::-webkit-slider-thumb { background: #d3dce6; border-color: var(--text-muted); box-shadow: none; }
.sym-slider:disabled::-moz-range-thumb { background: #d3dce6; border-color: var(--text-muted); box-shadow: none; }
/* Curseur désactivé (ex. rythme d'objectif bloqué par le garde-fou BMR) : rendu grisé */
#editPace:disabled { opacity: .4; cursor: not-allowed; filter: grayscale(1); }
#editPaceGroup:has(#editPace:disabled) .form-label { opacity: .55; }
.sym-save { width: 100%; margin-top: 18px; }
.sym-alert {
  margin: 16px 0; padding: 14px 16px;
  border-radius: var(--radius-md,14px);
  background: rgba(230,126,34,.08);
  border: 1px solid rgba(230,126,34,.30);
  border-left: 4px solid #e67e22;
}
.sym-alert-h { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: 14.5px; color: #c8651a; margin-bottom: 7px; }
.sym-alert-b { font-size: 13px; line-height: 1.6; color: var(--text-secondary,#444); margin: 0; }
.sym-recur { margin-top: 24px; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius-md,14px); background: var(--card-bg); }
.sym-recur-h { font-size: 13px; font-weight: 700; color: var(--text-secondary,#555); margin-bottom: 12px; }
.sym-recur-empty { font-size: 13px; color: var(--text-muted); text-align: center; padding: 8px 0; }
.sym-recur-row { display: flex; align-items: center; gap: 10px; margin: 7px 0; }
.sym-recur-n { flex: 0 0 44%; font-size: 12.5px; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sym-recur-n i { width: 16px; color: var(--primary); margin-right: 4px; }
.sym-recur-bar { flex: 1; height: 8px; border-radius: 5px; background: var(--input-bg); overflow: hidden; }
.sym-recur-bar > span { display: block; height: 100%; border-radius: 5px; background: linear-gradient(90deg,#f1c40f,#e67e22); }
.sym-recur-c { flex-shrink: 0; font-size: 11.5px; color: var(--text-muted); min-width: 42px; text-align: right; }
/* .sym-hero-t aligné sur .section-header h2 (même police/taille que les autres pages) */

/* Tableau récurrence 7 jours (pastilles) */
.sym-grow { display: flex; align-items: center; gap: 6px; padding: 6px 0; border-bottom: 1px solid var(--border-light, var(--border)); }
.sym-grow:last-of-type { border-bottom: none; }
.sym-ghead { border-bottom: 1px solid var(--border); }
.sym-gname { flex: 1 1 auto; min-width: 0; text-align: left; font-size: 12.5px; line-height: 1.25; color: var(--text-primary); word-break: break-word; }
.sym-gname i { width: 15px; color: var(--primary); margin-right: 4px; }
.sym-gdays { flex: 0 0 auto; display: flex; gap: 4px; }
.sym-gcell { flex: 0 0 auto; width: 22px; text-align: center; font-size: 12px; font-weight: 600; color: var(--text-muted); }
.sym-gtoday { color: var(--primary); }
.sym-dot { display: inline-block; width: 13px; height: 13px; border-radius: 50%; vertical-align: middle; }
.sym-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 12px; font-size: 11.5px; color: var(--text-muted); }
.sym-leg { display: inline-flex; align-items: center; gap: 5px; }
.sym-leg .sym-dot { width: 11px; height: 11px; }
/* [FIX dark] --primary (#1B3152) n'est pas redéfini en sombre → icônes marine invisibles sur fond sombre. On les éclaircit via --primary-light, mode clair inchangé. */
html[data-theme="dark"] .sym-ic,
html[data-theme="dark"] .sym-gname i,
html[data-theme="dark"] .sym-recur-n i,
html[data-theme="dark"] .sym-gtoday { color: var(--primary-light); }
@media(prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .sym-ic,
  :root:not([data-theme="light"]) .sym-gname i,
  :root:not([data-theme="light"]) .sym-recur-n i,
  :root:not([data-theme="light"]) .sym-gtoday { color: var(--primary-light); }
}
/* Icône enveloppe Articles (topbar) : en mode sombre --primary est trop foncé sur la barre,
   on l'éclaircit avec --primary-light (couleur inline → !important). Cf. bug envelope peu visible. */
html[data-theme="dark"] #articlesBtn { color: var(--primary-light) !important; }
@media(prefers-color-scheme:dark){
  :root:not([data-theme="light"]) #articlesBtn { color: var(--primary-light) !important; }
}

/* ── Saisie vocale : pastille micro qui pulse pendant l'écoute ─────────────── */
.voice-pulse{width:76px;height:76px;margin:0 auto;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:var(--primary);color:#fff;font-size:30px;position:relative;animation:voicePulse 1.6s infinite}
@keyframes voicePulse{
  0%{box-shadow:0 0 0 0 rgba(91,185,166,.55)}
  70%{box-shadow:0 0 0 18px rgba(91,185,166,0)}
  100%{box-shadow:0 0 0 0 rgba(91,185,166,0)}
}

/* ── Page « Ajouter un aliment » : bouton Scanner + accordéons ─────────────── */
.scan-cta {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; margin-top: 10px; padding: 13px 16px;
  background: var(--grad); color: #fff; border: none;
  border-radius: var(--radius-sm); font-size: 15px; font-weight: 600; cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,.12);
  transition: transform .1s ease, filter .15s ease;
}
.scan-cta[hidden] { display: none !important; }
.scan-cta i { font-size: 21px; }
.scan-cta:hover { filter: brightness(1.06); }
.scan-cta:active { transform: scale(.98); }

.qa-acc {
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  margin-top: 10px; overflow: hidden; background: var(--card-bg);
}
.qa-acc-head {
  width: 100%; display: flex; align-items: center; gap: 9px;
  padding: 11px 13px; background: none; border: none; cursor: pointer;
  font-size: 14px; font-weight: 600; color: var(--text-primary); text-align: left;
}
.qa-acc-ic { display: inline-flex; color: var(--primary); }
.qa-acc-label { flex: 1; }
.qa-acc-count { font-size: 12px; font-weight: 600; color: var(--text-muted); background: var(--input-bg); border-radius: 10px; padding: 1px 8px; }
.qa-acc-chevron { color: var(--text-muted); font-size: 13px; transition: transform .25s ease; }
.qa-acc.open .qa-acc-chevron { transform: rotate(180deg); }
.qa-acc-body { max-height: 0; opacity: 0; overflow: hidden; transition: max-height .3s ease, opacity .25s ease; }
.qa-acc.open .qa-acc-body { max-height: 1200px; opacity: 1; }
.qa-acc-body .recent-chips { padding: 2px 12px 12px; }

/* Éléments réservés à l'app native (Capacitor) : masqués en web/PWA, affichés si body.is-native */
.native-only { display: none !important; }
body.is-native .native-only { display: flex !important; }
/* Les cartes Export/Import empilent icône + nom + description (bloc). En natif, .native-only
   force display:flex (rangée) → on rétablit l'empilement vertical pour la carte « Partager ». */
body.is-native .export-card.native-only { flex-direction: column; align-items: center; }

/* Séparateur « ou » sous le bouton Continuer du setup (avant le bouton Importer) */
.setup-import-sep { display:flex; align-items:center; text-align:center; color:var(--text-muted); font-size:.82rem; margin:16px 0 10px; gap:10px; text-transform:uppercase; letter-spacing:.05em; }
.setup-import-sep::before, .setup-import-sep::after { content:''; flex:1; height:1px; background:var(--border); }

/* ── Carte détection de plateau (conditionnelle, dashboard) ─────────────────── */
.plateau-card {
  position: relative;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-left: 4px solid var(--primary-light);
  border-radius: 14px;
  padding: 16px 18px;
  margin-bottom: 16px;
  box-shadow: 0 2px 10px rgba(0,0,0,.05);
}
/* Carte activité (synchro santé) : pas + calories actives */
.activity-card {
  display: flex; align-items: center; gap: 8px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 16px;
  box-shadow: 0 2px 10px rgba(0,0,0,.05);
}
.activity-col { display: flex; align-items: center; gap: 10px; flex: 1; justify-content: center; }
.activity-ic { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(0,178,212,.10); color: var(--primary-light); font-size: 15px; }
.activity-val { font-weight: 800; font-size: 1.15rem; color: var(--text); line-height: 1.1; }
.activity-lbl { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .03em; }
.activity-sep { width: 1px; align-self: stretch; background: var(--border); }
.plateau-head { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--primary); font-size: 1.02rem; margin-bottom: 8px; }
.plateau-head i { color: var(--primary-light); }
.plateau-intro { color: var(--text); margin: 0 0 8px; font-size: .95rem; }
.plateau-diag  { color: var(--text); margin: 0 0 6px; font-size: .9rem; }
.plateau-waist { color: var(--text-muted); margin: 0 0 12px; font-size: .85rem; }
.plateau-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.plateau-actions .btn { flex: 1 1 auto; min-width: 150px; }
.plateau-foot { color: var(--text-muted); font-size: .78rem; margin: 0; font-style: italic; }
.plateau-close {
  position: absolute; top: 10px; right: 10px;
  background: transparent; border: none; cursor: pointer;
  color: var(--text-muted); font-size: 1rem; line-height: 1; padding: 4px;
  border-radius: 6px;
}
.plateau-close:hover { background: var(--input-bg); color: var(--text); }
.plateau-link { display:block; width:100%; background:transparent; border:none; cursor:pointer; color:var(--text-muted); font-size:.85rem; padding:7px; margin-bottom:6px; border-radius:8px; }
.plateau-link:hover { background:var(--input-bg); color:var(--text); text-decoration:underline; }

/* ═══════════════════════════════════════════════════════════════════════
 * RTL — écriture de droite à gauche (arabe + toute langue de RTL_LANGS).
 * Réagit à l'attribut dir="rtl" posé sur <html> par _applyDir(), donc
 * indépendant de la langue : hébreu/farsi/ourdou en hériteront gratuitement.
 * La sidebar et .main sont déjà gérées par des propriétés logiques plus haut.
 * ═══════════════════════════════════════════════════════════════════════ */

/* — Alignements de texte : start (gauche→droite) devient la droite — */
[dir=rtl] thead th,
[dir=rtl] .food-table th,
[dir=rtl] .help-q,
[dir=rtl] .tooltip-box,
[dir=rtl] .sym-gname,
[dir=rtl] .rpt-table th,
[dir=rtl] .rpt-table td { text-align: right; }
/* — Colonnes de valeurs alignées à la fin (end) : passent à gauche — */
[dir=rtl] .sym-recur-c { text-align: left; }

/* — Icône de recherche + retrait du champ — */
[dir=rtl] .search-input-wrap i { left: auto; right: 10px; }
[dir=rtl] .search-input { padding-left: 12px; padding-right: 32px; }
[dir=rtl] .input-with-unit .form-control { padding-right: 12px; padding-left: 38px; }
[dir=rtl] .input-with-unit .unit-suffix { right: auto; left: 12px; }

/* — Helpers « pousser vers la fin » (margin-left:auto en LTR) — */
[dir=rtl] .toast-undo-btn,
[dir=rtl] .src-badge,
[dir=rtl] .macro-pct,
[dir=rtl] .adv-chev,
[dir=rtl] .update-banner .btn { margin-left: 0; margin-right: auto; }

/* — Éléments positionnés en absolu (coins) — */
[dir=rtl] .badge-card.earned::after { right: auto; left: 10px; }
[dir=rtl] .fav-remove { right: auto; left: 6px; }
[dir=rtl] .help-to-top { right: auto; left: 18px; }
[dir=rtl] .fab-container { right: auto; left: 16px; align-items: flex-start; }
[dir=rtl] .plateau-close { right: auto; left: 10px; }
[dir=rtl] .thead th::after,
[dir=rtl] thead th::after { margin-left: 0; margin-right: 5px; }

/* — Flèche indicatrice / chevrons directionnels : on miroite — */
[dir=rtl] .adv-chev,
[dir=rtl] .help-chev { transform: scaleX(-1); }

/* — Bandes d'accent colorées des cartes : passent du bord gauche au bord droit — */
[dir=rtl] .card--accent,
[dir=rtl] .hcard,
[dir=rtl] .toast,
[dir=rtl] .food-item-c,
[dir=rtl] .meal-section,
[dir=rtl] .food-score-card,
[dir=rtl] .detection-item,
[dir=rtl] .timeline-card,
[dir=rtl] .recipe-card,
[dir=rtl] .template-card,
[dir=rtl] .analysis-item,
[dir=rtl] .analyses-hub-card,
[dir=rtl] .help-item,
[dir=rtl] .help-a .ex {
  border-left: 0;
  border-right: 4px solid var(--primary-light);
}
/* Variantes de couleur de bande (border-left-color en LTR) — on réapplique côté droit */
[dir=rtl] .hcard.deficit { border-right-color: var(--success); }
[dir=rtl] .hcard.surplus { border-right-color: var(--danger); }
[dir=rtl] .toast.error { border-right-color: var(--danger); }
[dir=rtl] .toast.warning { border-right-color: var(--warning); }
[dir=rtl] .meal-section.pdb { border-right-color: #f59e0b; }
[dir=rtl] .meal-section.dej { border-right-color: #10b981; }
[dir=rtl] .meal-section.din { border-right-color: #6366f1; }
[dir=rtl] .meal-section.enc { border-right-color: #f43f5e; }
[dir=rtl] .detection-item { border-right-width: 3px; }
[dir=rtl] .det-warning { border-right-color: var(--warning); }
[dir=rtl] .det-danger  { border-right-color: var(--danger); }
[dir=rtl] .det-info    { border-right-color: var(--primary-light); }
[dir=rtl] .food-item-c,
[dir=rtl] .timeline-card,
[dir=rtl] .help-a .ex { border-right-width: 3px; }

/* — Timeline : la barre verticale et les pastilles passent à droite — */
[dir=rtl] .timeline-wrap { padding-left: 0; padding-right: 30px; }
[dir=rtl] .timeline-wrap::before { left: auto; right: 10px; }
[dir=rtl] .timeline-dot { left: auto; right: -24px; }

/* ── Recherche d'ingrédient (création de recette perso) ─────────────────── */
.rec-ing-results { display: flex; flex-direction: column; gap: 4px; max-height: 220px; overflow-y: auto; margin: 6px 0; }
.rec-ing-row { display: flex; justify-content: space-between; gap: 10px; align-items: center; width: 100%; text-align: inherit; border: 1px solid var(--border); background: var(--card-bg,#fff); border-radius: 8px; padding: 8px 10px; font: inherit; font-size: 13.5px; cursor: pointer; }
.rec-ing-row:active { background: var(--input-bg,#f1f5f9); }
.rec-ing-k { color: var(--text-muted); font-size: 12px; white-space: nowrap; }
.rec-ing-none { color: var(--text-muted); font-size: 13px; padding: 6px 2px; }
.rec-ing-pick { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; border: 1px solid var(--primary-light,#5BB9A6); border-radius: 10px; padding: 8px 10px; }
.rec-ing-pn { flex: 1; min-width: 100px; font-weight: 600; font-size: 13.5px; }
.rec-ing-pick input { width: 80px; padding: 7px; border: 1px solid var(--border); border-radius: 8px; background: var(--card-bg,#fff); color: var(--text); font: inherit; }
.rec-ing-manual { margin-top: 8px; }
.rec-ing-manual summary { cursor: pointer; font-size: 13px; color: var(--text-muted); }

/* ── Catalogue « Recettes JYL » ─────────────────────────────────────────── */
.rc-subtabs { display: flex; gap: 6px; background: var(--input-bg, #f1f5f9); border-radius: 12px; padding: 4px; margin-bottom: 14px; }
.rc-subtab { flex: 1; border: 0; background: transparent; padding: 9px 8px; border-radius: 9px; font: inherit; font-weight: 600; font-size: 14px; color: var(--text-muted); cursor: pointer; }
.rc-subtab.active { background: var(--card-bg, #fff); color: var(--primary); box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.rc-chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 8px; margin-bottom: 10px; -webkit-overflow-scrolling: touch; }
.rc-chip { flex: none; border: 1px solid var(--border); background: var(--card-bg, #fff); color: var(--text); padding: 6px 12px; border-radius: 999px; font: inherit; font-size: 13px; white-space: nowrap; cursor: pointer; }
.rc-chip.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.rc-list { display: flex; flex-direction: column; gap: 8px; }
.rc-card { display: flex; align-items: center; gap: 12px; width: 100%; text-align: inherit; border: 1px solid var(--border); background: var(--card-bg, #fff); border-radius: 12px; padding: 10px 12px; cursor: pointer; }
.rc-card:active { transform: scale(.99); }
.rc-card-emoji { font-size: 26px; flex: none; width: 40px; text-align: center; }
.rc-card-body { flex: 1; min-width: 0; }
.rc-card-title { font-weight: 700; font-size: 14.5px; color: var(--text); }
.rc-card-meta { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.rc-card-arrow { color: var(--text-muted); font-size: 13px; flex: none; }
.rc-badge { display: inline-block; font-size: 11px; padding: 2px 8px; border-radius: 999px; background: var(--input-bg,#eef2f7); color: var(--text-muted); margin-inline-start: 6px; }
.rc-badge-jyl { background: var(--primary-light, #5BB9A6); color: #fff; }
.rc-detail-head { font-size: 13px; color: var(--text-muted); margin-bottom: 8px; }
.rc-detail-macro { font-size: 13px; font-weight: 600; color: var(--primary); background: var(--input-bg,#f1f5f9); border-radius: 10px; padding: 8px 10px; margin-bottom: 12px; }
.rc-detail-sec { margin-bottom: 14px; }
.rc-detail-h { font-weight: 700; font-size: 14px; color: var(--text); margin-bottom: 6px; }
.rc-ings { list-style: none; margin: 0; padding: 0; }
.rc-ings li { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; border-bottom: 1px dashed var(--border); font-size: 13.5px; }
.rc-ing-q { color: var(--text-muted); white-space: nowrap; }
.rc-steps { margin: 0; padding: 0; list-style: none; }
.rc-steps li { display: flex; gap: 10px; align-items: flex-start; padding: 5px 0; font-size: 13.5px; line-height: 1.5; }
.rc-step-n { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--primary); color: #fff; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.rc-detail-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin-top: 6px; }
.rc-mult { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text-muted); }
.rc-mult input, .rc-mult select { width: 110px; padding: 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--card-bg,#fff); color: var(--text); font: inherit; }
.rc-detail-actions .btn { flex: 1 1 auto; }

/* ── Modale AIDE : iframe plein écran (aide.php, contenu en BD).
   L'en-tête + « × » sont rendus par la page elle-même. Le fond de l'overlay
   reprend la couleur des cartes pour que les zones sûres (encoche/barre) se fondent. */
.help-modal { position: fixed; inset: 0; z-index: 9999; display: none; background: var(--card-bg);
  padding-top: var(--safe-area-inset-top,env(safe-area-inset-top,0px)); padding-bottom: var(--safe-area-inset-bottom,env(safe-area-inset-bottom,0px)); }
.help-modal.open { display: block; }
.help-frame { width: 100%; height: 100%; border: 0; display: block; background: var(--bg); }

/* #12 Affichage lite : masque les éléments avancés quand html.is-lite */
html.is-lite .lite-hide{display:none!important}

/* Mode « sans les chiffres » : masque les éléments calorifiques quand html.is-nonum */
html.is-nonum .nonum-hide{display:none!important}
/* Repère qualitatif au centre de l'anneau (« Votre assiette du jour ») */
.plate-tier{font-size:15px;font-weight:800;line-height:1.25;text-align:center}
.plate-title{font-size:13px;color:var(--text-muted);margin-bottom:4px}
/* Barres macro qualitatives (équilibre du jour, sans grammes) */
.balance-row{display:flex;align-items:center;gap:8px;margin:6px 0}
.balance-lbl{flex:0 0 82px;font-size:13px;color:var(--text)}
.balance-track{flex:1;height:8px;border-radius:5px;background:var(--border);overflow:hidden}
.balance-fill{height:100%;border-radius:5px}
.balance-tag{flex:0 0 auto;font-size:12px;font-weight:700}
/* Boutons de choix « chiffres / équilibre » (onboarding + Réglages) : état sélectionné */
#onbDispNums.active,#onbDispBalance.active,#setDispNums.active,#setDispBalance.active{
  border-color:var(--primary-light)!important;box-shadow:inset 0 0 0 2px var(--primary-light);font-weight:700}

/* #18 Mini-tour d'accueil (coachmarks : spotlight + bulle fléchée + Suivant) */
#tourOverlay{position:fixed;inset:0;z-index:9997}
#tourRing{position:fixed;border-radius:12px;border:2px solid var(--primary-light);box-shadow:0 0 0 9999px rgba(2,6,23,.62);transition:top .2s,left .2s,width .2s,height .2s;pointer-events:none}
#tourBox{position:fixed;z-index:9998;background:var(--card-bg);color:var(--text);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow-lg);padding:14px 16px;box-sizing:border-box}
#tourText{font-size:14px;line-height:1.5}
#tourFoot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px}
#tourCount{font-size:12px;color:var(--text-muted)}
#tourSkip{background:none;border:none;color:var(--text-muted);font-size:13px;cursor:pointer;padding:4px}
#tourArrow{position:absolute;bottom:-9px;width:16px;height:16px;background:var(--card-bg);border-right:1px solid var(--border);border-bottom:1px solid var(--border);transform:rotate(45deg)}
[dir=rtl] #tourArrow{border-right:none;border-left:1px solid var(--border)}