/* style.css — feuille de style de l'app.
   Extraite de l'ancien <style> de index.html le 20/09/2026.
   Alignée sur la charte UX/UI (UX_UI_CHARTER.md, sections 1 à 7) le 24/09/2026. */
  :root{
    /* Identite Corentin/Lisa alignee sur la charte UX/UI (meme hex que Muscu) */
    --corentin:#1f8fff; --corentin-rgb:31,143,255; --corentin-dark:#1a5fc4;
    --lisa:#ff3d7e; --lisa-rgb:255,61,126; --lisa-dark:#c4225f;
    --accent: var(--corentin); --accent-rgb: var(--corentin-rgb); --accent-dark: var(--corentin-dark);
    --accent-soft: rgba(var(--accent-rgb), 0.14);
    --tint: rgba(var(--accent-rgb), 0.07);
    --tint-strong: rgba(var(--accent-rgb), 0.13);

    /* Fonds et texte : valeurs exactes de la charte §1 (avant le 24/09/2026 : teintes
       propres a Course, et une bordure opaque bleu-gris #26303a, proscrite par la charte §9) */
    --bg:#0d1014; --card:#161b22; --card-2:#1e2530;
    --text:#e9eff6; --text-dim:#8a97a8;
    --border:rgba(255,255,255,0.09); --border-strong:rgba(255,255,255,0.17);

    /* Etats semantiques (valeurs Muscu) */
    --danger:#ef4444; --done:#12b981; --gold:#ffb800;

    /* Rayons : echelle a 5 crans de la charte */
    --r-xs:4px; --r-sm:10px; --r-md:14px; --r-lg:18px; --r-xl:22px; --r-pill:999px;

    /* Ombres (valeurs Muscu) */
    --shadow-sm: 0 6px 16px rgba(0,0,0,0.30);
    --shadow: 0 14px 32px rgba(0,0,0,0.44), 0 2px 8px rgba(0,0,0,0.28);
    --shadow-lg: 0 -8px 40px rgba(0,0,0,0.5);

    /* Durees d'animation (Muscu) */
    --t-fast:.15s; --t-mid:.22s;

    /* Surfaces flottantes (glassmorphism) */
    --glass-bar: rgba(19,24,31,0.86);
    --glass-modal: rgba(22,27,34,0.95);

    /* Marge tampon volontaire de 16px en plus de la vraie safe-area iOS :
       l'app ne colle jamais aux bords reels de l'ecran, meme si iOS applique
       un flou/assombrissement natif dans sa propre zone de securite. */
    --safe-top:calc(env(safe-area-inset-top) + 16px);
    --safe-bottom:env(safe-area-inset-bottom);
    /* Barre d'onglets flottante : distance entre le bas de la pilule et le VRAI bord de l'écran.
       28/09/2026 : même valeur que Budget (~22 pt). L'ancienne (safe-area − 30px ≈ 4 pt) se mesurait
       depuis une page coupée 62 pt trop haut (voir README, « bande noire du bas ») : à l'écran, la barre
       était en fait à ~66 pt du bord. Page désormais pleine hauteur → valeur de Budget, hors zone Siri. */
    --nav-offset:max(20px, calc(env(safe-area-inset-bottom) - 12px));
    /* Bouton rond « + » pose au-dessus de la pilule, a droite */
    --add-size:56px; --add-gap:12px;
    /* Hauteur totale occupee en bas par la barre (pilule 62px + distance au bord) :
       sert a decaler le contenu et les boutons fixes au-dessus. */
    --tabbar-height:calc(62px + var(--nav-offset));
  }
  :root[data-profil="Lisa"]{
    --accent: var(--lisa); --accent-rgb: var(--lisa-rgb); --accent-dark: var(--lisa-dark);
  }
  /* Mode clair retiré le 28/09/2026 : sombre uniquement (4 apps). */
  *{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
  html,body{margin:0; min-height:100%; background:var(--bg); color:var(--text);
    font-family:-apple-system,BlinkMacSystemFont,"Roboto","Segoe UI",sans-serif;
    -webkit-font-smoothing:antialiased; overscroll-behavior:none;}
  button{font-family:inherit;}
  /* 28/09/2026 — BANDE NOIRE DU BAS (voir README) : la page DÉFILE désormais comme dans Budget et Muscu.
     Avant : body{overflow:hidden} + #app en position:fixed;inset:0 + <main> qui défilait à l'intérieur.
     Mesuré sur iPhone : dans cette structure, iOS ne donnait à la page que 894 pt sur 956 (la hauteur
     de l'encoche en moins) et rien ne se dessinait dans les 62 pt du bas, quoi qu'on y mette. Budget et
     Muscu (page qui défile, barres en position:fixed) n'ont jamais eu le problème : on reprend leur
     structure. #app suit le flux normal, au moins la hauteur de l'écran ; <main> grandit avec son
     contenu (plus de défilement interne) ; la barre d'onglets est en position:fixed. */
  body{min-height:100vh;}
  #app{position:relative; min-height:100vh; display:flex; flex-direction:column;}
  header.topbar{
    padding: calc(14px + var(--safe-top)) 18px 14px;
    background:var(--card); border-bottom:1px solid var(--border);
    display:flex; align-items:center; justify-content:space-between; flex-shrink:0;
  }
  header.topbar h1{margin:0; font-size:24px; color:var(--accent);}
  main{flex:1 0 auto; padding-bottom:24px; position:relative;}
  section.vue{display:none;}
  section.vue.actif{display:block;}

  /* Sélecteur de listes (30/09/2026) : pastilles défilant horizontalement sous le titre, onglets
     Liste et Course seulement. 40 px visuels + 2 px de marge haut/bas dans le conteneur pour la zone
     tactile de 44 px (::after), qu'un overflow-x:auto couperait sinon. */
  .selecteur-listes{
    display:flex; gap:8px; overflow-x:auto; overflow-y:hidden; flex-shrink:0;
    padding:2px 18px 14px; scrollbar-width:none; overscroll-behavior-x:contain;
  }
  .selecteur-listes::-webkit-scrollbar{display:none;}
  #app[data-onglet="parametres"] .selecteur-listes{display:none;}
  .liste-chip{
    position:relative; flex-shrink:0; display:inline-flex; align-items:center; gap:7px;
    min-height:40px; padding:0 16px; border-radius:var(--r-pill);
    border:1px solid var(--border); background:var(--card); color:var(--text-dim);
    font-family:inherit; font-size:14px; font-weight:600; white-space:nowrap;
    transition: background var(--t-mid) ease, color var(--t-mid) ease, transform var(--t-fast) var(--ease-out);
  }
  .liste-chip::after{content:''; position:absolute; inset:-2px 0;}
  .liste-chip:active{transform:scale(0.97);}
  .liste-chip.actif{background:var(--accent-soft); border-color:var(--c-liste, var(--accent)); color:var(--text);}
  .liste-pastille{width:9px; height:9px; border-radius:50%; flex-shrink:0; background:var(--c-liste, var(--accent));}
  .liste-pastille-grande{width:14px; height:14px;}
  .liste-chip-ajout{width:40px; padding:0; justify-content:center; font-size:22px; font-weight:400; line-height:1;}
  .liste-badge{
    min-width:20px; height:20px; padding:0 6px; border-radius:var(--r-pill);
    background:var(--c-liste, var(--accent)); color:#fff; font-size:11.5px; font-weight:700;
    text-shadow:0 1px 1px rgba(0,0,0,.25);
    display:inline-flex; align-items:center; justify-content:center;
  }
  /* Réglages › Listes de courses : une ligne par liste (touche = renommer / supprimer) */
  .ligne-liste{
    width:100%; display:flex; align-items:center; gap:12px; min-height:56px; padding:8px 0;
    background:none; border:none; border-bottom:1px solid var(--border); color:var(--text);
    font-family:inherit; text-align:left;
  }
  .ligne-liste .nom-produit, .ligne-liste .rayon-produit{display:block;}
  .ligne-liste:active{opacity:.7;}
  .btn-nouvelle-liste{margin-top:14px;}
  /* Choix de la couleur d'une liste (fenêtre liste) : pastilles de 44 px (zone tactile charte §6.4) */
  .couleurs-liste{display:flex; flex-wrap:wrap; gap:10px;}
  .couleur-choix{
    width:44px; height:44px; padding:0; border-radius:50%; border:none; background:var(--c-liste);
    box-shadow:inset 0 0 0 1px rgba(0,0,0,.25);
    transition:transform var(--t-fast) var(--ease-out);
  }
  .couleur-choix:active{transform:scale(0.94);}
  .couleur-choix.choisie{outline:2.5px solid var(--text); outline-offset:3px;}
  .modal-erreur{min-height:18px; margin:-6px 0 0; font-size:13px; color:var(--danger);}

  /* Barre de recherche */
  .searchbar{
    margin:14px 18px 4px; display:flex; align-items:center; gap:8px;
    background:var(--card); border:1px solid var(--border); border-radius:var(--r-sm);
    min-height:44px; padding:4px 6px 4px 14px;
  }
  .searchbar input{flex:1; border:none; background:none; color:var(--text); font-size:16px; outline:none;}
  .searchbar input::placeholder{color:var(--text-dim);}
  .btn-effacer-recherche{
    position:relative; /* zone tactile etendue a 44px par ::after, sans changer le visuel */
    flex-shrink:0; width:30px; height:30px; border-radius:50%; border:none;
    background:var(--card-2); color:var(--text-dim); font-size:14px;
    display:none; align-items:center; justify-content:center; padding:0; line-height:1;
  }
  .btn-effacer-recherche:active{background:var(--border-strong);}
  .btn-effacer-recherche::after, .case::after, .btn-crayon::after{content:''; position:absolute; inset:-7px;}
  .btn-crayon::after{inset:-4px;}

  .liste{padding: 6px 18px calc(var(--tabbar-height) + var(--add-gap) + var(--add-size) + 16px);}
  .section-rayon{margin-top:22px;}
  .titre-rayon{font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:0.9px; color:var(--text-dim); margin:0 0 8px 4px;}
  .carte-produit{
    display:flex; align-items:center; gap:12px;
    background:var(--card); border:1px solid var(--border); border-radius:var(--r-lg);
    padding:10px 12px 10px 14px; margin-bottom:10px;
    box-shadow: var(--shadow-sm);
    transition: border-color var(--t-mid) ease;
  }
  /* Case a cocher : 30px visuels, zone tactile 44px (::after). Coche = action la plus
     repetee de l'app (charte §11.2) : feedback :active instantane, sans transition. */
  .case{
    position:relative; padding:0;
    flex-shrink:0; width:30px; height:30px; border-radius:var(--r-sm); border:2px solid var(--border);
    display:flex; align-items:center; justify-content:center; background:var(--card-2);
  }
  /* Couleur de la coche = couleur de la liste qui a coché le produit (--c-liste, posée par app.js
     sur la case, 30/09/2026) ; repli sur l'accent du profil. */
  .case.checked{ background:var(--c-liste, var(--accent)); border-color:var(--c-liste, var(--accent)); }
  .case.case-liste:not(.checked){ border-color:var(--c-liste, var(--border)); }   /* onglet Course : anneau à la couleur de la liste */
  .nom-liste{ color:var(--c-liste, var(--accent)); font-weight:700; }
  .case:active{ transform:scale(0.94); }
  .case svg{width:16px; height:16px; stroke:white; fill:none; stroke-width:3; display:none;}
  .case.checked svg{display:block;}
  .infos-produit{flex:1; min-width:0;}
  .nom-produit{font-size:16px; font-weight:600; margin:0;}
  .nom-produit.achete{ text-decoration:line-through; color:var(--text-dim); }
  .rayon-produit{font-size:12px; color:var(--text-dim); margin:2px 0 0;}
  .btn-crayon{
    position:relative; padding:0;
    flex-shrink:0; width:36px; height:36px; border-radius:50%; border:none;
    background:var(--card-2); color:var(--text-dim); font-size:16px;
    display:flex; align-items:center; justify-content:center;
  }
  .btn-crayon:active{background:var(--border-strong);}
  .qte-produit{
    flex-shrink:0; width:64px; min-width:64px; height:44px; border-radius:var(--r-sm);
    border:1px solid var(--border); background:var(--card-2); color:var(--text);
    text-align:center; font-size:14px; padding:0 4px;
  }
  .carte-produit.achete-carte{opacity:0.55;}


  .vide{ text-align:center; padding:60px 30px; color:var(--text-dim); }
  .vide h2{color:var(--text); font-size:20px; margin-bottom:8px;}

  /* Onglet Course */
  /* Bouton d'action principal (charte §5.3 / §5.4) */
  .btn-course-terminee{
    display:none;
    position:fixed; left:18px; right:18px; bottom:calc(var(--tabbar-height) + 14px);
    min-height:52px; padding:14px 10px; border:none; border-radius:var(--r-lg); background:var(--accent);
    color:#fff; font-size:15px; font-weight:700; z-index:20;
    box-shadow:0 10px 24px rgba(var(--accent-rgb),0.30), var(--shadow-sm);
    transition:transform var(--t-fast) var(--ease-out);
  }
  .btn-course-terminee:active{transform:scale(0.97);}
  #liste-course{padding-top:16px; padding-bottom:calc(var(--tabbar-height) + 90px);}
  .btn-course-terminee.visible{display:block;}

  /* Onglet Réglages */
  .params{padding:20px 18px calc(var(--tabbar-height) + 24px);}
  .bloc-param{background:var(--card); border:1px solid var(--border); border-radius:var(--r-lg); padding:18px; margin-bottom:18px; box-shadow: var(--shadow-sm);}
  .bloc-param h3{margin:0 0 12px; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:0.9px; color:var(--text-dim);}
  /* Selecteur de profil Corentin/Lisa — composant charte §5.6, repris tel quel */
  .profile-switch{display:flex; gap:8px; padding:5px; margin-top:2px; background:var(--card-2); border:1px solid var(--border); border-radius:var(--r-md);}
  .profile-switch-btn{flex:1; padding:11px 8px; border-radius:var(--r-sm); border:1px solid transparent; background:transparent; color:var(--text-dim); font-size:14.5px; font-weight:700; font-family:inherit;}
  .profile-switch-btn.corentin.selected{background:rgba(31,143,255,0.14); border-color:var(--corentin); color:var(--corentin);}
  .profile-switch-btn.lisa.selected{background:rgba(255,61,126,0.14); border-color:var(--lisa); color:var(--lisa);}
  .btn-large{
    width:100%; min-height:48px; padding:14px; border-radius:var(--r-md); border:1px solid var(--border);
    background:var(--card-2); color:var(--text); font-size:15px; font-weight:700;
    transition:transform var(--t-fast) var(--ease-out);
  }
  .btn-large:active{transform:scale(0.97);}
  .derniere-maj{margin:14px 0 0; font-size:12px; color:var(--text-dim); text-align:center;}

  /* Barre d'onglets flottante (style "pilule" + bouton rond a droite).
     Posee PAR-DESSUS le contenu (position:fixed depuis le 28/09/2026, comme Budget ;
     avant : absolute dans #app fixé) : le flou de fond est ainsi reellement visible.
     Le conteneur laisse passer les touches (pointer-events:none), seuls la
     pilule et le bouton rond les captent. Distance au bord : --nav-offset
     (safe-area - 30px, min 2px) : plus basse qu'avant mais toujours hors de
     la zone de geste du home indicator. */
  .tabbar-flottante{
    position:fixed; left:14px; right:14px; z-index:30;
    bottom:var(--nav-offset);
    display:flex; align-items:center; gap:10px;
    pointer-events:none;
  }
  nav.tabbar, .nav-add{
    pointer-events:auto;
    background:var(--glass-bar);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    backdrop-filter: blur(18px) saturate(160%);
    border:1px solid var(--border);
    box-shadow: var(--shadow);
  }
  nav.tabbar{
    flex:1; min-width:0; display:flex; gap:4px; height:62px; padding:5px;
    border-radius:var(--r-pill);
  }
  nav.tabbar button{
    flex:1; min-width:0; padding:0; border:none; background:transparent; color:var(--text-dim);
    border-radius:var(--r-pill);
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
    font-family:inherit; font-size:11px; font-weight:600;
    transition: background var(--t-mid) ease, color var(--t-mid) ease, transform var(--t-fast) var(--ease-out);
  }
  nav.tabbar button:active{transform:scale(0.97);}
  nav.tabbar button.actif{color:var(--accent); background:var(--accent-soft);}
  nav.tabbar button svg{width:24px; height:24px; stroke:currentColor; fill:none; stroke-width:2;}

  /* Bouton rond "+" : pose JUSTE AU-DESSUS de la pilule, aligne a droite
     (bottom:100% = haut du conteneur, dont la hauteur est celle de la pilule).
     Visible uniquement sur l'onglet Liste. */
  .nav-add{
    position:absolute; right:0; bottom:calc(100% + var(--add-gap));
    width:var(--add-size); height:var(--add-size); padding:0; border-radius:50%;
    color:var(--accent);
    display:flex; align-items:center; justify-content:center;
    transition: transform var(--t-fast) var(--ease-out);
  }
  .nav-add:active{transform:scale(0.94);}
  .nav-add svg{width:26px; height:26px; stroke:currentColor; fill:none; stroke-width:2.4; stroke-linecap:round;}
  #app:not([data-onglet="liste"]) .nav-add{display:none;}

  /* Modale ajout/édition produit */
  .modal-fond{
    position:fixed; inset:0; background:rgba(0,0,0,0.6); z-index:100;
    display:flex; align-items:flex-end; justify-content:center;
    animation:fondIn .22s var(--ease-out);
  }
  .modal-carte{
    width:100%; max-width:520px; background:var(--glass-modal);
    -webkit-backdrop-filter:blur(20px) saturate(160%); backdrop-filter:blur(20px) saturate(160%);
    border:1px solid var(--border); border-bottom:none; border-radius:var(--r-xl) var(--r-xl) 0 0;
    padding:22px 20px calc(22px + var(--safe-bottom)); max-height:80vh; overflow-y:auto;
    box-shadow: var(--shadow-lg);
    animation:feuilleIn .28s var(--ease-drawer);
  }
  @keyframes fondIn{ from{opacity:0;} to{opacity:1;} }
  @keyframes feuilleIn{ from{transform:translateY(24px); opacity:0;} to{transform:translateY(0); opacity:1;} }
  /* Boite de dialogue maison (remplace window.confirm) : par-dessus la modale produit */
  #dialogue{z-index:110;}
  .dialogue-texte{margin:-8px 0 4px; font-size:14px; line-height:1.45; color:var(--text-dim);}
  /* Ajouté à la liste (01/10/2026) : produits cochés par l'autre depuis la dernière visite */
  .nouveautes-liste{list-style:none; margin:10px 0 0; padding:0; max-height:46vh; overflow-y:auto; -webkit-overflow-scrolling:touch;}
  .nouveaute{display:flex; align-items:center; gap:12px; padding:11px 2px; border-top:1px solid var(--border);}
  .nouveaute:first-child{border-top:none;}
  .nouveaute-textes{display:flex; flex-direction:column; gap:2px; min-width:0;}
  .nouveaute-nom{font-size:15.5px; font-weight:700; color:var(--text);}
  .nouveaute-detail{font-size:12.5px; color:var(--text-dim);}
  .modal-carte h2{margin:0 0 18px; font-size:19px;}
  .champ{margin-bottom:16px;}
  .champ label{display:block; font-size:13px; color:var(--text-dim); margin-bottom:6px;}
  .champ input, .champ select{
    width:100%; min-height:48px; padding:12px 14px; border-radius:var(--r-sm); border:1px solid var(--border);
    background:var(--card-2); color:var(--text); font-size:16px;
  }
  .modal-actions{display:flex; gap:10px; margin-top:20px;}
  .modal-actions button{flex:1; min-height:48px; padding:14px; border-radius:var(--r-md); border:none; font-size:15px; font-weight:700; transition:transform var(--t-fast) var(--ease-out);}
  .modal-actions button:active{transform:scale(0.97);}
  .btn-annuler{background:var(--card-2); color:var(--text); border:1px solid var(--border) !important;}
  .btn-danger{background:var(--danger); color:#fff;}
  .btn-enregistrer{background:var(--accent); color:white;}
  .btn-supprimer{background:none; color:var(--danger); border:none; width:100%; min-height:44px; text-align:center; margin-top:6px; padding:10px; font-size:14px; font-weight:600;}


  /* Accessibilite — mouvement reduit (charte UX/UI §11.9, 24/09/2026) */
  @media (prefers-reduced-motion: reduce){
    /* « Réduit ≠ zéro » (12/10/2026, skills Emil Kowalski) : plus aucun déplacement ni agrandissement
       animé, mais les fondus et changements de couleur restent (ils aident à comprendre). Avant :
       toutes les durées à 0 s. Les halos et la transition « vitre » sont gérés par verre.css. */
    *, *::before, *::after{ transition-property:opacity, color, background-color, border-color, box-shadow !important; }
    .modal-carte{ animation-name:fondIn !important; }
  }
  /* Onglet Course : articles achetés regroupés en bas (02/10/2026) */
  .section-caddie{margin-top:28px; padding-top:14px; border-top:1px dashed var(--border-strong);}