/* =========================================================
   Bouclé — design system issu de la maquette Stitch
   Palette Material 3 "sauge", Plus Jakarta Sans, thème clair unique.
   Les valeurs (couleurs, tailles, radius, espacements) reprennent
   exactement les tokens de la maquette.
   ========================================================= */

:root{
  /* Surfaces */
  --background: #f0fcf6;
  --surface: #f0fcf6;
  --surface-container-lowest: #ffffff;
  --surface-container-low: #ebf6f1;
  --surface-container: #e5f1eb;
  --surface-container-highest: #d9e5e0;
  --surface-variant: #d9e5e0;

  /* Texte */
  --on-background: #131e1a;
  --on-surface: #131e1a;
  --on-surface-variant: #414843;
  --outline: #717973;
  --outline-variant: #c1c8c2;

  /* Sauge */
  --primary: #3f6652;
  --on-primary: #ffffff;
  --primary-container: #7da68f;
  --on-primary-container: #143b2a;
  --primary-fixed: #c1ecd3;

  --secondary: #5f5e5b;
  --tertiary-fixed: #dce4de;

  /* Inversé (bandeau installation) */
  --inverse-surface: #28332f;
  --inverse-on-surface: #e8f3ee;

  /* Erreur */
  --error: #ba1a1a;
  --error-container: #ffdad6;

  /* Espacements */
  --unit: 8px;
  --container-padding: 24px;
  --stack-gap: 16px;
  --grid-gutter: 12px;
  --section-margin: 40px;

  /* Rayons */
  --radius-sm: 0.5rem;
  --radius: 1rem;
  --radius-lg: 2rem;
  --radius-xl: 3rem;
  --radius-full: 9999px;

  /* Ombres */
  --shadow-card: 0 4px 20px 0 rgba(0,0,0,0.04);
  --shadow-soft: 0 2px 12px 0 rgba(0,0,0,0.02);
  --shadow-primary: 0 4px 12px rgba(63,102,82,0.2);
}

*{ box-sizing: border-box; }

html{
  -webkit-text-size-adjust: 100%;   /* iOS ne grossit pas le texte en paysage */
  background: var(--background);    /* couleur du rebond élastique iOS */
}

body{
  margin: 0;
  min-height: 100vh;
  background: var(--background);
  color: var(--on-background);
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 24px;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  /* Bloque le « tirer pour rafraîchir » et l'enchaînement du scroll, qui
     donnent une sensation d'app cassée une fois installée sur l'écran d'accueil. */
  overscroll-behavior-y: none;
}

::selection{ background: var(--primary-container); color: var(--on-primary-container); }

/* Les éléments d'interface ne se sélectionnent pas au appui long, et iOS
   n'affiche pas son menu contextuel sur les images de l'app.
   `touch-action: manipulation` supprime l'attente du double-tap : le bouton
   réagit immédiatement, ce qui fait toute la différence de ressenti. */
button, .nav-btn, .item, .icon-button, .brand-word, .ic, label{
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  touch-action: manipulation;
}
img{ -webkit-touch-callout: none; }

/* Les champs de saisie gardent la sélection : on ne bloque que l'interface. */
input, textarea{
  -webkit-user-select: text;
  user-select: text;
}

/* Icônes Lucide, servies depuis le sprite inline de index.html.
   `currentColor` fait suivre la couleur du texte parent, comme une police
   d'icônes, mais sans téléchargement ni dépendance externe. */
.ic{
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  /* Empêche l'icône d'intercepter le tap sur iOS : c'est le bouton qui reçoit. */
  pointer-events: none;
}
.ic.sm{ width: 16px; height: 16px; stroke-width: 2.25; }
.ic.lg{ width: 32px; height: 32px; stroke-width: 1.75; }
.ic.xl{ width: 40px; height: 40px; stroke-width: 1.5; }

/* ===== Typographie ===== */
.t-display{ font-size: 28px; line-height: 36px; font-weight: 700; letter-spacing: -0.02em; }
.t-headline-lg{ font-size: 24px; line-height: 32px; font-weight: 600; letter-spacing: -0.01em; }
.t-headline-md{ font-size: 20px; line-height: 28px; font-weight: 600; }
.t-body-lg{ font-size: 18px; line-height: 28px; font-weight: 400; }
.t-body-md{ font-size: 16px; line-height: 24px; font-weight: 400; }
.t-label-lg{ font-size: 14px; line-height: 20px; font-weight: 600; letter-spacing: 0.01em; }
.t-label-sm{ font-size: 12px; line-height: 16px; font-weight: 500; }

/* ===== Écrans ===== */
/* 100dvh suit la barre d'outils Safari qui se rétracte au scroll ; 100vh reste
   en secours pour les navigateurs qui ne connaissent pas l'unité dynamique. */
.app{
  max-width: 480px;
  margin: 0 auto;
  min-height: 100vh;
  min-height: 100dvh;
  position: relative;
}
.screen{
  display: none;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}
.screen.active{
  display: flex;
  animation: screenIn .35s cubic-bezier(.22,1,.36,1);
}

/* Fondu + léger zoom arrière : contrairement à une translation vers le bas,
   ça ne crée jamais de débordement vertical pendant la transition. */
@keyframes screenIn{ from{ opacity:0; transform: scale(.985); } to{ opacity:1; transform:none; } }
@keyframes fadeInUp{ from{ opacity:0; transform: translateY(10px); } to{ opacity:1; transform:none; } }
@keyframes popIn{ 0%{ transform: scale(.6); opacity:0; } 60%{ transform: scale(1.06); opacity:1; } 100%{ transform: scale(1); } }
@keyframes successPulse{ 0%,100%{ transform: scale(1); } 50%{ transform: scale(1.04); } }
@keyframes itemSettle{ 0%{ transform: scale(1); } 40%{ transform: scale(1.02); } 100%{ transform: scale(1); } }
@keyframes toastIn{ from{ opacity:0; transform: translateY(100%); } to{ opacity:1; transform:none; } }
@keyframes flashOut{ from{ opacity:.8; } to{ opacity:0; } }
@keyframes spin{ to{ transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ===== Connexion ===== */
.login-screen{
  align-items: center;
  justify-content: center;
  padding: calc(var(--container-padding) + env(safe-area-inset-top, 0px)) var(--container-padding) calc(var(--container-padding) + env(safe-area-inset-bottom, 0px));
}
.login-inner{
  width: 100%;
  max-width: 360px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--unit);
}
.login-mark{
  width: 72px;
  height: 72px;
  border-radius: 20px;
  margin-bottom: var(--unit);
}
.login-screen h1{ margin: 0; color: var(--on-background); }
.login-sub{
  margin: 0 0 var(--stack-gap);
  color: var(--on-surface-variant);
  max-width: 28ch;
}
.login-form{
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--grid-gutter);
}
.login-form input[type="password"]{
  width: 100%;
  padding: 16px;
  border-radius: var(--radius-xl);
  border: 2px solid transparent;
  background: var(--surface-container-low);
  color: var(--on-background);
  font-family: inherit;
  font-size: 16px;          /* 16px minimum : évite le zoom automatique iOS */
  line-height: 24px;
  text-align: center;
  outline: none;
  transition: border-color .2s;
}
.login-form input[type="password"]::placeholder{ color: var(--outline); }
.login-form input[type="password"]:focus{ border-color: var(--primary); }

/* Champ PIN : chiffres espacés et bien lisibles, comme un code de coffre. */
.pin-input{
  font-size: 28px !important;
  line-height: 36px !important;
  font-weight: 700;
  letter-spacing: 0.5em;
  text-indent: 0.5em;   /* recentre malgré l'espacement ajouté après le dernier chiffre */
  padding: 18px 16px !important;
}

/* Message d'erreur commun aux formulaires */
.form-error{
  margin: 0;
  color: var(--error);
  background: var(--error-container);
  border-radius: var(--radius);
  padding: 10px 14px;
  text-align: center;
}

/* ===== Barres d'en-tête ===== */
.topbar{
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 64px;
  padding: var(--unit) var(--container-padding);
  padding-top: calc(var(--unit) + env(safe-area-inset-top, 0px));
  height: calc(64px + env(safe-area-inset-top, 0px));
  background: var(--surface);
  position: sticky;
  top: 0;
  z-index: 40;
}
.brand{
  display: flex;
  align-items: center;
  gap: var(--unit);
  color: var(--primary);
}

/* Le logo est un carré plein : on l'arrondit comme une icône d'app,
   pas en cercle, sinon les angles du coffre-fort sont rognés. */
.brand-mark{
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: block;
  flex-shrink: 0;
}
.brand-word{ letter-spacing: -0.02em; }

.icon-button{
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  border-radius: var(--radius-full);
  color: var(--on-surface-variant);
  cursor: pointer;
  transition: background-color .2s, transform .15s;
}
.icon-button:hover{ background: rgba(217,229,224,.5); }
.icon-button:active{ transform: scale(.94); }
.icon-button:focus-visible{ outline: 2px solid var(--primary); outline-offset: 2px; }

/* En-tête des sous-pages : retour + titre centré */
.sheet-bar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 64px;
  padding: var(--unit) var(--container-padding);
  padding-top: calc(var(--unit) + env(safe-area-inset-top, 0px));
  height: calc(64px + env(safe-area-inset-top, 0px));
  background: var(--surface);
  position: sticky;
  top: 0;
  z-index: 40;
}
.sheet-bar h1{
  flex: 1;
  margin: 0;
  text-align: center;
  color: var(--primary);
  letter-spacing: -0.01em;
  padding: 0 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sheet-bar .spacer{ width: 40px; height: 40px; flex-shrink: 0; }

/* ===== Accueil ===== */
.home-main{
  padding: var(--stack-gap) var(--container-padding) 0;
  flex: 1;
  padding-bottom: 180px;
}
.home-head{ margin-bottom: var(--section-margin); }
.home-head h2{
  margin: 0 0 var(--stack-gap);
  color: var(--on-background);
}
.progress-row{
  display: flex;
  align-items: center;
  gap: var(--stack-gap);
  margin-bottom: var(--unit);
}
.progress-track{
  height: 12px;
  width: 100%;
  background: var(--surface-variant);
  border-radius: var(--radius-full);
  overflow: hidden;
}
/* Animée en transform plutôt qu'en largeur : pas de recalcul de mise en page
   à chaque image, donc une progression parfaitement fluide. */
.progress-fill{
  height: 100%;
  width: 100%;
  background: var(--primary);
  border-radius: var(--radius-full);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .45s cubic-bezier(.22,1,.36,1);
}
.progress-count{
  color: var(--on-surface-variant);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.home-hint{ margin: 0; color: var(--on-surface-variant); }

.item-list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--stack-gap);
}

/* Carte d'un point à vérifier */
.item{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--stack-gap);
  width: 100%;
  text-align: left;
  font-family: inherit;
  color: inherit;
  padding: var(--stack-gap);
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 2px solid var(--surface-variant);
  box-shadow: var(--shadow-card);
  cursor: pointer;
  overflow: hidden;
  transition: transform .15s, background-color .25s, border-color .25s;
}
.item:active{ transform: scale(.97); }
.item:focus-visible{ outline: 2px solid var(--primary); outline-offset: 2px; }
.item.done{
  background: var(--surface-container);
  border-color: transparent;
}
.item.just-done{ animation: itemSettle .45s cubic-bezier(.34,1.56,.64,1); }

.item-left{
  display: flex;
  align-items: center;
  gap: var(--stack-gap);
  min-width: 0;
}
.item-icon{
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  background: var(--surface-variant);
  color: var(--on-surface-variant);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background-color .25s, color .25s;
}
.item.done .item-icon{
  background: var(--primary-container);
  color: var(--on-primary-container);
}
.item-text{ min-width: 0; }
.item-name{
  display: block;
  margin: 0 0 4px;
  color: var(--on-surface);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.item-status{
  margin: 0;
  color: var(--on-surface-variant);
  display: flex;
  align-items: center;
  gap: 4px;
}
.item.done .item-status{ color: var(--primary); }

.item-thumb{
  width: 64px;
  height: 64px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--primary-container);
  flex-shrink: 0;
  background: var(--surface-container-highest);
}
.item-thumb img{ width: 100%; height: 100%; object-fit: cover; display: block; }

.item-shoot{
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  background: var(--primary);
  color: var(--on-primary);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 1px 3px rgba(0,0,0,.1);
}

/* État vide */
.empty-state{
  display: none;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 48px var(--container-padding);
  gap: var(--unit);
}
.empty-state:not([hidden]){ display: flex; }
.empty-icon{
  width: 64px;
  height: 64px;
  border-radius: var(--radius-full);
  background: var(--surface-container);
  color: var(--on-surface-variant);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--unit);
}
.empty-state h3{ margin: 0; color: var(--on-surface); }
.empty-state p{ margin: 0; color: var(--on-surface-variant); max-width: 280px; }
.empty-cta{ margin-top: var(--stack-gap); width: auto; padding-left: 32px; padding-right: 32px; }

/* Liste des réglages vide */
.settings-empty{
  color: var(--on-surface-variant);
  padding: var(--stack-gap);
  background: var(--surface-container);
  border-radius: var(--radius);
  text-align: center;
}

/* ===== Zone d'action fixe (accueil) ===== */
.action-dock{
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 30;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 48px var(--container-padding) calc(24px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(to top, var(--background) 55%, rgba(240,252,246,0));
  pointer-events: none;
}
.action-dock > *{ pointer-events: auto; }

.btn{
  width: 100%;
  max-width: 432px;
  padding: 16px 24px;
  border-radius: var(--radius-full);
  border: none;
  font-family: inherit;
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--unit);
  transition: transform .15s, background-color .25s, color .25s, opacity .25s;
}
.btn:active{ transform: scale(.98); }
.btn:focus-visible{ outline: 2px solid var(--primary); outline-offset: 2px; }

.btn-primary{
  background: var(--primary);
  color: var(--on-primary);
  box-shadow: var(--shadow-primary);
}
.btn-disabled,
.btn:disabled{
  background: var(--surface-variant);
  color: var(--on-surface-variant);
  box-shadow: none;
  cursor: not-allowed;
}
.btn-outline{
  background: none;
  color: var(--primary);
  border: 2px solid var(--tertiary-fixed);
}

/* ===== Détail / appareil photo ===== */
.camera-main{
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 0 var(--container-padding) var(--container-padding);
}
.camera-view{
  flex: 1;
  /* min-height:0 laisse le viseur se comprimer sur les petits écrans plutôt que
     de faire déborder l'écran photo, qui doit tenir sans défilement. */
  min-height: 0;
  margin: var(--stack-gap) 0 var(--section-margin);
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 2px solid var(--outline-variant);
  background: var(--surface-container);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-card);
}
.camera-photo{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.camera-overlay{
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--stack-gap);
  padding: 32px;
  text-align: center;
  color: var(--on-surface-variant);
  background: var(--surface-container);
}
.camera-overlay p{ margin: 0; max-width: 250px; }
.camera-overlay .ic{ opacity: .55; }
.camera-overlay.captured{ background: var(--surface-container); color: var(--primary); gap: var(--unit); }


/* Coins décoratifs du viseur */
.viewfinder{
  position: absolute;
  inset: 0;
  padding: 32px;
  pointer-events: none;
}
.viewfinder-inner{
  width: 100%;
  height: 100%;
  border: 1px solid rgba(193,200,194,.3);
  position: relative;
}
.viewfinder-inner span{
  position: absolute;
  width: 32px;
  height: 32px;
  border-color: var(--primary);
  border-style: solid;
  border-width: 0;
}
.viewfinder-inner .tl{ top:0; left:0; border-top-width:2px; border-left-width:2px; border-top-left-radius: var(--radius-sm); }
.viewfinder-inner .tr{ top:0; right:0; border-top-width:2px; border-right-width:2px; border-top-right-radius: var(--radius-sm); }
.viewfinder-inner .bl{ bottom:0; left:0; border-bottom-width:2px; border-left-width:2px; border-bottom-left-radius: var(--radius-sm); }
.viewfinder-inner .br{ bottom:0; right:0; border-bottom-width:2px; border-right-width:2px; border-bottom-right-radius: var(--radius-sm); }

.camera-flash{
  position: absolute;
  inset: 0;
  background: var(--surface-container-lowest);
  z-index: 10;
  pointer-events: none;
  animation: flashOut .4s ease-out forwards;
}

.camera-controls{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--section-margin);
  margin-top: auto;
}
.shutter{
  width: 80px;
  height: 80px;
  border-radius: var(--radius-full);
  border: 4px solid var(--primary);
  background: var(--surface-container-lowest);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  box-shadow: 0 4px 12px rgba(63,102,82,.15);
  transition: transform .15s, background-color .2s;
}
.shutter:active{ transform: scale(.92); }
.shutter:focus-visible{ outline: 2px solid var(--primary); outline-offset: 4px; }
.shutter-inner{
  width: 56px;
  height: 56px;
  border-radius: var(--radius-full);
  background: var(--primary);
  color: var(--on-primary);
  display: flex;
  align-items: center;
  justify-content: center;
}
.visually-hidden{
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ===== Confirmation ===== */
.done-screen{
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  padding: var(--container-padding);
  text-align: center;
}
.done-glow{
  position: absolute;
  width: 500px;
  height: 500px;
  border-radius: var(--radius-full);
  background: radial-gradient(circle at 30% 30%, var(--primary-fixed), transparent 70%);
  filter: blur(60px);
  opacity: .4;
  pointer-events: none;
}
.done-inner{
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 432px;
}
.done-badge-ring{
  padding: var(--stack-gap);
  border-radius: var(--radius-full);
  background: rgba(166,208,183,.3);
  margin-bottom: 32px;
  animation: popIn .6s cubic-bezier(.34,1.56,.64,1), successPulse 3s 1s ease-in-out infinite;
}
.done-badge{
  width: 128px;
  height: 128px;
  border-radius: var(--radius-full);
  background: var(--primary);
  color: var(--on-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 30px rgba(0,0,0,.12);
}
.done-badge .ic{ width: 60px; height: 60px; stroke-width: 1.75; }
.done-screen h2{
  margin: 0 0 var(--stack-gap);
  color: var(--on-background);
  animation: fadeInUp .5s .1s both;
}
.done-sub{
  margin: 0 0 48px;
  color: var(--on-surface-variant);
  max-width: 280px;
  animation: fadeInUp .5s .2s both;
}
.done-sub small{
  display: block;
  margin-top: var(--unit);
  color: var(--secondary);
  font-size: 14px;
  line-height: 20px;
}
.done-screen .btn{ animation: fadeInUp .5s .3s both; }

/* ===== Réglages ===== */
.settings-main{
  flex: 1;
  padding: var(--stack-gap) var(--container-padding) var(--section-margin);
  display: flex;
  flex-direction: column;
  gap: var(--section-margin);
}
.settings-intro{ margin: 0; color: var(--on-surface-variant); }
.settings-section{ display: flex; flex-direction: column; gap: var(--stack-gap); }
.settings-section h2{ margin: 0; color: var(--on-surface); }

.settings-list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--unit);
}
.settings-item{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--stack-gap);
  padding: var(--stack-gap);
  background: var(--surface-container-lowest);
  border: 1px solid var(--tertiary-fixed);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  animation: fadeInUp .3s both;
}
.settings-item-left{
  display: flex;
  align-items: center;
  gap: var(--stack-gap);
  min-width: 0;
}
.settings-item-icon{
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  background: var(--surface-container);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.settings-item-name{
  color: var(--on-surface);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.btn-delete{
  width: 40px;
  height: 40px;
  border: none;
  background: none;
  border-radius: var(--radius-full);
  color: rgba(186,26,26,.7);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background-color .2s, color .2s, transform .15s;
}
.btn-delete:hover{ background: var(--error-container); color: var(--error); }
.btn-delete:active{ transform: scale(.9); }
.btn-delete:focus-visible{ outline: 2px solid var(--error); outline-offset: 2px; }

.btn-add{
  width: 100%;
  margin-top: var(--unit);
  padding: 16px;
  border-radius: var(--radius-full);
  border: 2px solid var(--outline-variant);
  background: none;
  color: var(--on-surface-variant);
  font-family: inherit;
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  letter-spacing: 0.01em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--unit);
  cursor: pointer;
  transition: background-color .2s, transform .15s;
}
.btn-add:hover{ background: var(--surface-container-highest); }
.btn-add:active{ transform: scale(.98); }
.btn-add:focus-visible{ outline: 2px solid var(--primary); outline-offset: 2px; }

.info-block{
  background: var(--surface-container);
  padding: var(--container-padding);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  gap: var(--stack-gap);
}
.info-row{
  display: flex;
  align-items: flex-start;
  gap: var(--grid-gutter);
  color: var(--on-surface-variant);
}
.info-row .ic{ color: var(--primary); }
.info-row p{ margin: 0; }
.info-row strong{ color: var(--on-surface); font-weight: 700; }
.link-btn{
  align-self: flex-start;
  margin-left: 36px;
  background: none;
  border: none;
  padding: 0;
  color: var(--primary);
  font-family: inherit;
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  letter-spacing: 0.01em;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}
.link-btn:focus-visible{ outline: 2px solid var(--primary); outline-offset: 2px; }

/* ===== Ajouter un point ===== */
.add-main{
  flex: 1;
  padding: var(--stack-gap) var(--container-padding) 140px;
  display: flex;
  flex-direction: column;
  gap: var(--section-margin);
}
.field{ display: flex; flex-direction: column; gap: var(--unit); }
.field label{ color: var(--on-surface-variant); }
.field input[type="text"]{
  width: 100%;
  padding: 16px;
  border-radius: var(--radius-xl);
  border: 2px solid transparent;
  background: var(--surface-container-low);
  color: var(--on-background);
  font-family: inherit;
  font-size: 18px;
  line-height: 28px;
  outline: none;
  box-shadow: inset 0 2px 4px rgba(0,0,0,.02);
  transition: border-color .2s;
}
.field input[type="text"]::placeholder{ color: var(--outline); }
.field input[type="text"]:focus{ border-color: var(--primary); }

.icon-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--grid-gutter);
}
.icon-pick{
  aspect-ratio: 1;
  border-radius: var(--radius-xl);
  border: none;
  background: var(--surface-container);
  color: var(--on-surface-variant);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color .2s, color .2s, transform .15s, box-shadow .2s;
}
.icon-pick:active{ transform: scale(.95); }
.icon-pick:focus-visible{ outline: 2px solid var(--primary); outline-offset: 2px; }
.icon-pick.selected{
  background: var(--primary-container);
  color: var(--on-primary-container);
  box-shadow: 0 4px 12px rgba(125,166,143,.3);
}

.bottom-bar{
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 480px;
  background: rgba(240,252,246,.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: var(--container-padding);
  padding-bottom: calc(var(--container-padding) + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -8px 24px rgba(0,0,0,.02);
  z-index: 20;
  display: flex;
  gap: var(--stack-gap);
}
.bottom-bar .btn{ max-width: none; }
.bottom-bar .btn-outline{ flex: 1; }
.bottom-bar .btn-primary{ flex: 2; }

/* Déconnexion : action secondaire, volontairement discrète */
.btn-logout{
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: var(--unit);
  padding: 12px 24px;
  border: 1.5px solid var(--tertiary-fixed);
  border-radius: var(--radius-full);
  background: none;
  color: var(--on-surface-variant);
  font-family: inherit;
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .2s, color .2s, transform .15s;
}
.btn-logout:hover{ background: var(--surface-container); color: var(--on-surface); }
.btn-logout:active{ transform: scale(.97); }
.btn-logout:focus-visible{ outline: 2px solid var(--primary); outline-offset: 2px; }

/* ===== Historique ===== */
.history-notice{
  margin: 0;
  padding: 12px 14px;
  border-radius: var(--radius);
  background: var(--surface-container);
  color: var(--on-surface-variant);
  text-align: center;
}
.history-main{
  flex: 1;
  padding: var(--stack-gap) var(--container-padding) 120px;
  display: flex;
  flex-direction: column;
  gap: var(--section-margin);
}
/* content-visibility évite à Safari de calculer et peindre les groupes de
   photos hors écran. `contain-intrinsic-size` réserve leur hauteur estimée
   pour que la barre de défilement ne saute pas pendant le scroll. */
.hist-group{
  display: flex;
  flex-direction: column;
  gap: var(--stack-gap);
  animation: fadeInUp .5s both;
  content-visibility: auto;
  contain-intrinsic-size: auto 220px;
}
.hist-label{
  color: var(--on-surface-variant);
  text-transform: uppercase;
  letter-spacing: .08em;
}
.hist-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--grid-gutter);
}
.hist-thumb{
  aspect-ratio: 1;
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
  background: var(--surface-container-highest);
  box-shadow: var(--shadow-card);
  transition: transform .2s;
}
.hist-thumb:active{ transform: scale(.95); }
.hist-thumb img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.hist-pending{
  position: absolute;
  bottom: 6px;
  right: 6px;
  width: 20px;
  height: 20px;
  border-radius: var(--radius-full);
  background: var(--inverse-surface);
  color: var(--inverse-on-surface);
  display: flex;
  align-items: center;
  justify-content: center;
}
.hist-pending .ic, .hist-pending-ic{ width: 13px; height: 13px; stroke-width: 2.5; }

.loader{
  align-self: center;
  width: 28px;
  height: 28px;
  border: 3px solid var(--surface-variant);
  border-top-color: var(--primary);
  border-radius: var(--radius-full);
  animation: spin .8s linear infinite;
  margin: 48px auto;
}

/* ===== Navigation basse ===== */
.bottom-nav{
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 480px;
  z-index: 50;
  background: var(--surface);
  border-top: 2px solid var(--tertiary-fixed);
  box-shadow: 0 -4px 20px 0 rgba(0,0,0,.04);
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: var(--unit) var(--container-padding) calc(24px + env(safe-area-inset-bottom, 0px));
}
.nav-btn{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 4px 16px;
  border: none;
  background: none;
  border-radius: var(--radius-xl);
  color: var(--on-surface-variant);
  font-family: inherit;
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color .2s, color .2s, transform .15s;
}
.nav-btn:active{ transform: scale(.92); }
.nav-btn:focus-visible{ outline: 2px solid var(--primary); outline-offset: 2px; }
.nav-btn.active{
  background: var(--primary-container);
  color: var(--on-primary-container);
}


/* ===== Bandeau d'installation ===== */
.install-banner{
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 480px;
  background: var(--inverse-surface);
  color: var(--inverse-on-surface);
  padding: var(--stack-gap);
  padding-bottom: calc(var(--stack-gap) + env(safe-area-inset-bottom, 0px));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--grid-gutter);
  z-index: 60;
  animation: toastIn .4s cubic-bezier(.22,1,.36,1);
}
.install-text{ flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.install-steps{
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  opacity: .82;
}
.install-steps .ic{ display: inline-block; vertical-align: -3px; }
.install-actions{ display: flex; align-items: center; gap: var(--grid-gutter); }
.btn-install{
  background: var(--primary-container);
  color: var(--on-primary-container);
  border: none;
  padding: 8px 16px;
  border-radius: var(--radius-full);
  font-family: inherit;
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  cursor: pointer;
}
.btn-dismiss{
  background: none;
  border: none;
  color: var(--inverse-on-surface);
  padding: 4px;
  display: flex;
  cursor: pointer;
  border-radius: var(--radius-full);
}
.btn-install:focus-visible,
.btn-dismiss:focus-visible{ outline: 2px solid var(--inverse-on-surface); outline-offset: 2px; }