/* ==========================================================================
   EDF-Packler — Design System
   Source : Figma "EDF-Packler" (fileKey KYtPRXMs4NovXx6MVtWCj0, node 1:2569)
   Tokens extraits des variables Figma — ne pas inventer de valeurs ici.
   ========================================================================== */

:root{
  /* ---------- Couleurs de marque ---------- */
  --edf-orange:        #FF5E11;   /* EDF/Orange */
  --edf-navy:          #001A71;   /* EDF/Bleu foncé */
  --edf-blue:          #1156C7;   /* EDF/Bleu clair */
  --white:             #FFFFFF;   /* Blanc */

  /* ---------- Neutres ---------- */
  --neutral-highest:   #09090b;   /* Neutral/Hightest */
  --neutral-low:       #09090b14;  /* Neutral/Low  (8%) */
  --neutral-lower:     #09090b0a;  /* Neutral/Lower (4%) */
  --label-primary:     #1a1a1a;   /* Labels - Vibrant - Controls/Primary */

  /* ---------- Typographie ---------- */
  /* Avenir est nativement disponible sur iOS / macOS */
  --font-primary: Avenir, "Avenir Next", "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-size-m:      16px;   /* Typographie/Size/M */
  --line-height-m:    22px;   /* Typographie/Line Height/M */
  --text-weight:      600;    /* Typographie/Primary/Text Weight (Medium) */
  --label-weight:     800;    /* Typographie/Primary/Label Weight (Heavy) */

  /* ---------- Tailles : Button, Input, Nav ---------- */
  --icon-size-small:  14px;
  --icon-size-large:  20px;
  --icon-size-larger: 24px;
  --line-height-large:  24px;
  --line-height-larger: 28px;
  --gap-large:        8px;
  --padding-h-large:  24px;
  --padding-v-large:  12px;

  /* ---------- Liquid Glass (iOS 26) ---------- */
  --lg-frost:       7px;    /* Frost - Regular  -> blur */
  --lg-depth:       16px;   /* Depth - Regular */
  --lg-splay:       6px;    /* Splay - Regular */
  --lg-light-angle: -45deg;

  /* ---------- Rayons ---------- */
  --radius-button: 12px;   /* Button "Commencer le scan" — rounded-[12px] */
  --radius-card:   16px;   /* Navbar / card — rounded-[16px] */
  --radius-pill:   999px;

  /* ---------- Safe areas ---------- */
  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* ==========================================================================
   Base
   ========================================================================== */
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
/* L'attribut hidden doit primer sur un display:flex/grid déclaré ailleurs */
[hidden]{display:none !important}
body{
  font-family:var(--font-primary);
  font-size:var(--font-size-m);
  line-height:var(--line-height-m);
  font-weight:var(--text-weight);
  color:var(--neutral-highest);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
}

/* Écran plein, sans cadre device (démo sur vrai iPhone) */
.screen{
  position:relative;width:100%;
  min-height:100vh;min-height:100dvh;
  display:flex;flex-direction:column;
  background:var(--white);
  overflow:hidden;
}

/* ==========================================================================
   Typographie
   ========================================================================== */
.text-m  {font-size:var(--font-size-m);line-height:var(--line-height-m);font-weight:var(--text-weight)}
.label-m {font-size:var(--font-size-m);line-height:var(--line-height-m);font-weight:var(--label-weight)}

/* ==========================================================================
   Button
   ========================================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  gap:var(--gap-large);
  padding:var(--padding-v-large) var(--padding-h-large);
  border:none;border-radius:var(--radius-button);
  font-family:var(--font-primary);
  font-size:var(--font-size-m);
  line-height:var(--line-height-m);
  font-weight:var(--label-weight);
  cursor:pointer;
  transition:background-color .15s ease,opacity .15s ease;
}
.btn svg{width:var(--icon-size-large);height:var(--icon-size-large);flex:0 0 auto}

/* Primaire : navy plein, texte blanc */
.btn--primary{background:var(--edf-navy);color:var(--white)}
.btn--primary:hover{background:#00135a}
.btn--primary:disabled{opacity:.45;cursor:not-allowed}

/* Secondaire : contour */
.btn--secondary{background:var(--white);color:var(--edf-navy);box-shadow:inset 0 0 0 1.5px var(--edf-navy)}
.btn--secondary:hover{background:var(--neutral-lower)}

/* Accent orange */
.btn--accent{background:var(--edf-orange);color:var(--white)}

/* Doux (bleu clair) — ex. "Se déconnecter" */
.btn--soft{background:#EAF1FB;color:var(--edf-navy)}
.btn--soft:hover{background:#dbe7fa}

/* Danger (contour rouge) — ex. "Déconnecter l'appareil" */
.btn--danger{background:#FEF3F2;color:#D93025;box-shadow:inset 0 0 0 1px rgba(217,48,37,.35)}
.btn--danger:hover{background:#fde8e6}

/* Pleine largeur */
.btn--block{display:flex;width:100%}

/* ==========================================================================
   Card (ex. "Studio")
   ========================================================================== */
.card{
  position:relative;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:var(--gap-large);
  padding:16px;
  min-width:113px;
  background:var(--white);
  border:1.5px solid var(--neutral-low);
  border-radius:var(--radius-card);
  font-family:var(--font-primary);
  font-weight:var(--label-weight);
  color:var(--neutral-highest);
  cursor:pointer;
  transition:background .15s ease,border-color .15s ease;
}
.card svg{width:var(--icon-size-larger);height:var(--icon-size-larger)}
.card:hover{background:var(--neutral-lower)}
/* État pressé / sélectionné */
.card.is-pressed,.card[aria-pressed="true"]{
  background:#EEF3FC;
  border-color:var(--edf-blue);
}
.card .card__dot{
  position:absolute;top:8px;right:8px;
  width:10px;height:10px;border-radius:50%;
  background:var(--edf-orange);
}

/* ==========================================================================
   Switch (segmenté : "Scan IA" / "Mode manuel")
   ========================================================================== */
.switch{
  display:inline-flex;align-items:center;
  padding:4px;gap:2px;
  background:var(--label-primary);
  border-radius:var(--radius-pill);
}
.switch__opt{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 14px;border:none;border-radius:var(--radius-pill);
  background:transparent;
  color:rgba(255,255,255,.65);
  font-family:var(--font-primary);
  font-size:13px;font-weight:var(--label-weight);
  cursor:pointer;white-space:nowrap;
  transition:background .18s ease,color .18s ease;
}
.switch__opt svg{width:var(--icon-size-small);height:var(--icon-size-small)}
.switch__opt.is-active,.switch__opt[aria-selected="true"]{
  background:rgba(255,255,255,.22);
  color:var(--white);
}

/* ==========================================================================
   Liquid Glass (bouton flottant iOS 26)
   ========================================================================== */
.lg-btn{
  width:48px;height:48px;border-radius:50%;border:none;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.6);
  backdrop-filter:blur(var(--lg-frost)) saturate(180%);
  -webkit-backdrop-filter:blur(var(--lg-frost)) saturate(180%);
  box-shadow:0 var(--lg-splay) var(--lg-depth) rgba(9,9,11,.14),
             inset 0 1px 0 rgba(255,255,255,.7);
  color:var(--neutral-highest);
  cursor:pointer;
}
.lg-btn:hover{background:rgba(255,255,255,.78)}

/* ==========================================================================
   Burger / entête de navigation
   ========================================================================== */
.navbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 16px;
  background:var(--white);
  border-radius:var(--radius-card);
  box-shadow:0 2px 10px rgba(9,9,11,.06);
}
.navbar .edf-logo{width:44px;height:auto;display:block}
.burger{
  width:32px;height:32px;border:none;border-radius:50%;
  background:var(--neutral-low);
  display:flex;align-items:center;justify-content:center;
  color:var(--neutral-highest);cursor:pointer;
}
.menu-item{
  display:flex;align-items:center;gap:10px;
  padding:12px 14px;
  border:1px solid var(--neutral-low);border-radius:var(--radius-button);
  background:var(--white);
  font-weight:var(--text-weight);color:var(--neutral-highest);
  cursor:pointer;
}
.menu-item:hover{background:var(--neutral-lower)}
.menu-item svg{width:var(--icon-size-large);height:var(--icon-size-large);color:var(--edf-blue)}

/* ==========================================================================
   Écrans d'authentification (hero bleu + feuille blanche)
   Maquettes : Adresse mail (29:5585) · MDP (29:5465) · Créez votre mdp (29:5695)
   ========================================================================== */
.auth-hero{
  flex:0 0 auto;
  background:linear-gradient(180deg,var(--edf-navy) 0%,#01267F 60%,var(--edf-blue) 100%);
  display:flex;align-items:center;justify-content:center;
  padding:clamp(10px,3vh,26px) 24px clamp(30px,6vh,46px);
}
.auth-hero .logo{width:min(28vw,110px);height:auto}

.auth-sheet{
  flex:1 1 auto;
  background:var(--white);
  border-radius:24px 24px 0 0;
  margin-top:-24px;
  padding:20px clamp(16px,4.5vw,20px) calc(4px + var(--safe-bottom));
  display:flex;flex-direction:column;
  overflow-y:auto;-webkit-overflow-scrolling:touch;
}
.auth-back{
  width:44px;height:44px;border-radius:50%;border:none;
  background:#EFEFF1;
  display:flex;align-items:center;justify-content:center;
  color:var(--neutral-highest);cursor:pointer;flex:0 0 auto;
}
.auth-back:hover{background:#e5e5e8}

.auth-sheet h1{
  font-family:var(--font-primary);font-weight:900;
  font-size:22px;line-height:28px;color:var(--neutral-highest);
  margin-top:22px;
}
.auth-sheet .auth-desc{
  font-size:14px;font-weight:var(--text-weight);
  color:#3f4756;line-height:1.45;margin-top:8px;
}

/* Champ */
.auth-field{
  position:relative;display:flex;align-items:center;
  margin-top:16px;
}
.auth-field input{
  width:100%;height:56px;padding:0 20px;
  border:2px solid transparent;border-radius:var(--radius-pill);
  background:#F4F4F5;
  font-family:var(--font-primary);font-size:15px;font-weight:var(--text-weight);
  color:var(--neutral-highest);
}
.auth-field input::placeholder{color:#8a93a6}
.auth-field input:focus{outline:none;border-color:var(--edf-blue);background:var(--white)}
.auth-field.has-eye input{padding-right:56px}
.auth-field .eye{
  position:absolute;right:18px;
  border:none;background:none;color:#8a93a6;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.auth-field.is-error input{border-color:#D93025;background:#FEF5F4}

.auth-link{
  display:inline-block;margin-top:14px;
  font-family:var(--font-primary);font-weight:var(--label-weight);
  font-size:13px;color:var(--neutral-highest);
  text-decoration:underline;cursor:pointer;
}

/* Retours de validation */
.auth-note{font-size:12.5px;font-weight:var(--text-weight);color:#5b6478;margin-top:14px}
.auth-note b{font-weight:var(--label-weight)}
.auth-note .lvl-faible{color:#D93025}
.auth-note .lvl-moyen{color:#E08600}
.auth-note .lvl-fort{color:#1B9E5A}

.auth-check{
  display:flex;align-items:center;gap:8px;margin-top:14px;
  font-size:13px;font-weight:var(--label-weight);
}
.auth-check--ok{color:#1B9E5A}
.auth-check--ko{color:#D93025}

.auth-footer{margin-top:auto;padding-top:24px;display:flex;flex-direction:column;gap:14px}

/* ==========================================================================
   Pop-up / Modal — maquettes EDF-Packler (29:7492, 29:7511, 29:7855, 102:4469)
   ========================================================================== */
.modal{
  position:fixed;inset:0;z-index:60;
  display:flex;align-items:center;justify-content:center;
  padding:16px;
  background:rgba(9,9,11,.35);
  opacity:0;pointer-events:none;
  transition:opacity .22s ease;
}
.modal.show{opacity:1;pointer-events:auto}

.modal__card{
  position:relative;
  width:100%;max-width:361px;
  background:var(--white);
  border-radius:24px;
  padding:24px 20px 20px;
  box-shadow:0 20px 40px rgba(9,9,11,.18);
  transform:translateY(12px) scale(.98);
  transition:transform .22s cubic-bezier(.22,1,.36,1);
}
.modal.show .modal__card{transform:translateY(0) scale(1)}

.modal__close{
  position:absolute;top:16px;right:16px;
  width:34px;height:34px;border-radius:50%;border:none;
  background:var(--neutral-lower);
  display:flex;align-items:center;justify-content:center;
  color:var(--neutral-highest);cursor:pointer;
}
.modal__close:hover{background:var(--neutral-low)}

.modal__title{
  font-family:var(--font-primary);font-weight:var(--label-weight);
  font-size:17px;line-height:24px;
  text-align:center;color:var(--neutral-highest);
  padding:0 40px;
}

.modal__icon{
  width:44px;height:44px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  margin:22px auto;color:var(--white);
}
.modal__icon--red{background:#E2342D;box-shadow:0 0 0 8px rgba(226,52,45,.18)}
.modal__icon--blue{background:var(--edf-blue);box-shadow:0 0 0 8px rgba(17,86,199,.15)}
/* Icône simple, sans pastille (ex. fiche appareil) */
.modal__icon--plain{width:auto;height:auto;background:none;box-shadow:none;color:var(--neutral-highest)}

.modal__text{
  font-family:var(--font-primary);font-weight:var(--label-weight);
  font-size:13.5px;line-height:20px;
  text-align:center;color:var(--neutral-highest);
  margin-bottom:22px;
}
.modal__card .btn{margin-top:4px}

/* ==========================================================================
   Bottom sheet "Ajouter / Modifier un objet" — maquettes 16:4094 et 16:4140
   ========================================================================== */
.osheet-backdrop{
  position:fixed;inset:0;z-index:50;
  background:rgba(9,9,11,.35);
  opacity:0;pointer-events:none;transition:opacity .25s ease;
}
.osheet-backdrop.show{opacity:1;pointer-events:auto}

.osheet{
  position:fixed;left:50%;bottom:0;z-index:51;
  transform:translate(-50%,100%);
  width:100%;max-width:393px;
  background:var(--white);
  border-radius:24px 24px 0 0;
  box-shadow:0 -8px 10px -6px rgba(9,9,11,.06), 0 -20px 25px -5px rgba(9,9,11,.06);
  display:flex;flex-direction:column;
  max-height:92dvh;
  transition:transform .38s cubic-bezier(.22,1,.36,1);
}
.osheet.show{transform:translate(-50%,0)}

.osheet__grip{width:64px;height:6px;border-radius:100px;background:var(--neutral-low);margin:6px auto 0}

.osheet__head{
  position:relative;
  display:flex;align-items:center;justify-content:center;
  padding:12px 16px 14px;
  border-bottom:1px solid var(--neutral-low);
}
.osheet__head h3{
  font-family:var(--font-primary);font-weight:var(--label-weight);
  font-size:17px;color:var(--neutral-highest);
}
.osheet__close{
  position:absolute;left:16px;
  width:34px;height:34px;border-radius:50%;border:none;
  background:var(--neutral-lower);
  display:flex;align-items:center;justify-content:center;
  color:var(--neutral-highest);cursor:pointer;
}
.osheet__close:hover{background:var(--neutral-low)}

.osheet__body{flex:1 1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:16px}

/* Carte formulaire */
.ofield-card{background:#F4F4F5;border-radius:var(--radius-card);padding:0 14px;margin-bottom:14px}
.ofield{
  display:flex;align-items:center;gap:10px;
  min-height:54px;
  border-bottom:1px solid rgba(9,9,11,.08);
}
.ofield:last-child{border-bottom:none}
.ofield label{
  flex:0 0 auto;
  font-family:var(--font-primary);font-weight:var(--text-weight);
  font-size:15px;color:#8a93a6;
}
.ofield input{
  flex:1 1 auto;min-width:0;
  border:none;background:none;
  font-family:var(--font-primary);font-weight:var(--text-weight);
  font-size:15px;color:var(--neutral-highest);
  text-align:right;
}
.ofield input::placeholder{color:#8a93a6}
.ofield input:focus{outline:none}
.ofield input[readonly]{color:var(--edf-blue);font-weight:var(--label-weight)}
.ofield .unit{flex:0 0 auto;font-size:14px;color:#8a93a6}
.ofield--name input{text-align:left}

/* Quantité */
.oqty{
  display:flex;align-items:center;justify-content:space-between;
  background:#F4F4F5;border-radius:var(--radius-pill);
  padding:12px 16px;margin-bottom:18px;
}
.oqty__label{font-family:var(--font-primary);font-weight:var(--label-weight);font-size:15px;color:var(--neutral-highest)}
.oqty__ctrl{display:flex;align-items:center;gap:16px}
.oqty__btn{border:none;background:none;color:var(--neutral-highest);cursor:pointer;display:flex;align-items:center;justify-content:center;width:22px;height:22px}
.oqty__btn:disabled{opacity:.3;cursor:not-allowed}
.oqty__val{font-family:var(--font-primary);font-weight:900;font-size:15px;color:var(--edf-blue);min-width:14px;text-align:center}

/* Caractéristiques */
.osheet h4{
  font-family:var(--font-primary);font-weight:var(--label-weight);
  font-size:15px;color:var(--neutral-highest);margin-bottom:10px;
}
.otags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.otag{
  display:inline-flex;align-items:center;gap:5px;
  padding:8px 14px;border-radius:var(--radius-pill);border:none;
  background:#EAF1FB;color:var(--edf-blue);
  font-family:var(--font-primary);font-size:13px;font-weight:var(--label-weight);
  cursor:pointer;transition:background .15s ease,color .15s ease;
}
.otag:hover{background:#dbe7fa}
.otag.is-on{background:var(--edf-blue);color:#fff}

/* Photo */
.ophoto{
  width:100%;background:#F4F4F5;border:none;border-radius:var(--radius-card);
  padding:22px;display:flex;flex-direction:column;align-items:center;gap:8px;
  color:#8a93a6;font-family:var(--font-primary);font-size:14px;font-weight:var(--text-weight);
  cursor:pointer;
}
.ophoto svg{color:var(--edf-blue)}
.ophoto:hover{background:#ececee}

/* Footer overlay (38:3489) */
.osheet__footer{
  flex:0 0 auto;
  padding:8px 16px calc(10px + var(--safe-bottom));
  background:var(--white);
}
.osheet__progress{height:3px;border-radius:2px;background:var(--neutral-low);overflow:hidden;margin-bottom:10px}
.osheet__progress i{display:block;height:100%;background:var(--edf-blue);border-radius:2px;transition:width .3s ease}

/* ==========================================================================
   Chrome iOS (status bar / home indicator)
   ========================================================================== */
.statusbar{
  flex:0 0 auto;height:54px;padding:0 26px;padding-top:var(--safe-top);
  display:flex;align-items:center;justify-content:space-between;
  color:var(--neutral-highest);
  font-weight:var(--label-weight);font-size:16px;letter-spacing:.3px;
}
.statusbar .icons{display:flex;align-items:center;gap:7px}
.statusbar svg{display:block}
.statusbar--light{color:var(--white)}

.home-indicator{
  flex:0 0 auto;height:calc(22px + var(--safe-bottom));
  display:flex;justify-content:center;align-items:flex-start;
}
.home-indicator i{width:140px;height:5px;border-radius:3px;background:rgba(9,9,11,.85);margin-top:6px}
.home-indicator--light i{background:rgba(255,255,255,.9)}

/* ==========================================================================
   Mode PWA plein écran (ajouté à l'écran d'accueil iOS)
   La vraie status bar et le vrai home indicator d'iOS prennent le relais :
   on masque nos versions simulées et on respecte les safe areas.
   ========================================================================== */
@media (display-mode: standalone), (display-mode: fullscreen){
  .statusbar{display:none !important}
  .home-indicator{display:none !important}
  .screen{padding-top:var(--safe-top);padding-bottom:var(--safe-bottom)}
  /* Le flux caméra doit rester plein écran, sous la status bar */
  .cam-wrap{position:fixed}
}