@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@600;700;800&display=swap');

:root {
  --gold-1: #F8EBB0;
  --gold-2: #CDA531;
  --gold-3: #7E611A;
  --gold-line: #8C7A34;
  --cream: #F5EFDD;
  --cream-dim: rgba(245, 239, 221, 0.75);
  --error: #FF8A80;
  /* Decalage vers le bas de tout ce qui est colle en haut (logo, fleche,
     icone compte), pour sortir de la zone floutee par iOS 26+ sous la
     barre d'etat. */
  --haut: 15px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100dvh;
  font-family: 'Inter', system-ui, sans-serif;
  overflow: hidden;
}

html { background: #001c03; }

/* iOS 26+ (Liquid Glass) floute le bord haut de l'ecran (logo, fleche
   retour, icone compte) tant qu'aucun VRAI element fixe, opaque, sans
   backdrop-filter, ne couvre toute la largeur au bord haut (un
   pseudo-element avec pointer-events:none ne compte pas : WebKit se base
   sur ce qu'un point du bord toucherait). D'ou ce vrai calque plein ecran, de la
   couleur du fond, derriere tout (z-index -1). */
#edge-top {
  position: fixed;
  inset: 0;
  background: #001c03;
  z-index: -1; /* derriere tout le contenu, mais bien reel (pas un pseudo-element) */
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 20px;
  background: #001c03;
  color: var(--cream);
}

/* flex: 1 + min-height: 0 (au lieu de laisser le body centrer un bloc qui
   se contente de sa hauteur de contenu) : sans ça, un écran dont le
   contenu dépasse la hauteur visible se fait couper net par le
   "overflow: hidden" du body, sans pouvoir défiler -- juste illisible sur
   petit écran. Avec ça, overflow-y: auto peut vraiment prendre le relai.
   "safe center" (avec repli sur un simple "center" pour les navigateurs
   qui ne le connaissent pas encore) : centre verticalement tant que ça
   rentre (le cas normal, la punchline courte par ex.), mais bascule sur
   un alignement en haut dès que le contenu dépasse la hauteur visible --
   sinon un centrage classique d'un contenu qui déborde coupe la moitié
   du haut au lieu de la rendre accessible en scrollant. */
.screen {
  width: 100%;
  max-width: 402px;
  max-height: 100dvh;
  flex: 1;
  min-height: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  justify-content: safe center;
  text-align: center;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Ecran "Ajoute une donnée" -- réserve la place du logo fixe en haut avant
   de centrer le reste, sinon le titre du formulaire chevauche le logo. */
#screen-contribution {
  padding-top: calc(max(96px, calc(env(safe-area-inset-top) + 88px)) + var(--haut));
}

.screen.active { display: flex; }

/* Logo fixe, pile au meme endroit en haut de l'ecran, quel que soit
   l'ecran affiche -- sinon il "danse" selon la hauteur du contenu au
   dessus de lui dans chaque .screen. */
.mark {
  position: fixed;
  top: calc(max(28px, env(safe-area-inset-top)) + var(--haut));
  /* Centrage sans transform : translateX(-50%) sur une largeur impaire donnait
     une position a demi-pixel, et WebKit (iOS) re-echantillonne alors le
     logo, d'ou le flou. Largeur/hauteur paires et marges auto a la place. */
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 84px;
  height: 57px;
  z-index: 5;
  filter:
    drop-shadow(0 1px 0 rgba(255, 255, 255, 0.25))
    drop-shadow(0 6px 16px rgba(0, 0, 0, 0.45))
    drop-shadow(0 2px 8px rgba(205, 165, 49, 0.35));
}


.mark.pulse { animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.08); opacity: 0.75; }
}

/* --- Onboarding --- */
/* Button - Liquid Glass - Text */


#screen-onboarding h1,
#screen-mdp h1 {
  font-size: 20px;
  font-weight: 600;
  margin: 0 0 8px;
  font-family: 'Baloo 2', 'Inter', system-ui, sans-serif
}

/* Titres "Ajoute une donnée", "À valider", "Ton compte", "Mes infos" -- en
   Baloo 2 comme le texte du scan, pour que ces écrans secondaires aient le
   même ton que l'écran carte. */
#screen-contribution h1,
#screen-validation h1,
#screen-compte h1,
#screen-mes-donnees h1 {
  font-family: 'Baloo 2', 'Inter', system-ui, sans-serif;
}
#screen-onboarding p,
#screen-mdp p.mdp-intro {
  font-size: 14px;
  color: var(--cream-dim);
  margin: 0 0 32px;
  max-width: 300px;
}
/* Même DA que les lignes de "Mon compte" (.compte-ligne) : boîte arrondie
   vert foncé, label en petites majuscules dorées au-dessus. */
.field {
  width: 100%;
  margin-bottom: 14px;
  text-align: left;
  border-radius: 12px;
  padding: 10px 16px 12px;
  background: rgba(255, 255, 255, 0.045);
  transition: box-shadow 0.15s ease;
}
.field label {
  display: block;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold-1);
  margin-bottom: 6px;
}
.field input {
  width: 100%;
  background: transparent;
  border: none;
  padding: 0;
  font-family: inherit;
  font-size: 16px;
  color: var(--cream);
  outline: none;
}
.field textarea,
.field select {
  width: 100%;
  background: transparent;
  border: none;
  padding: 0;
  font-family: inherit;
  font-size: 15px;
  color: var(--cream);
  outline: none;
  resize: none;
}
.field select option { color: #1a1a1a; }

#contrib-statut {
  margin-top: 14px;
  font-size: 13px;
  color: var(--cream-dim);
  min-height: 18px;
}

/* --- Ecran de validation --- */
.validation-liste {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 8px;
}
.validation-liste p {
  font-size: 14px;
  color: var(--cream-dim);
}
.validation-item {
  border: 1px solid rgba(140, 122, 52, 0.35);
  border-radius: 16px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.03);
  text-align: left;
}
.validation-auteur {
  margin: 0 0 6px;
  font-size: 12px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--gold-1);
}
.validation-texte {
  margin: 0 0 12px;
  font-size: 15px;
  line-height: 1.4;
}
.validation-actions {
  display: flex;
  gap: 10px;
}
.validation-actions .btn-gold {
  padding: 10px 18px;
  font-size: 13px;
  margin-top: 0;
}
.validation-actions .reset-link {
  margin-top: 0;
}

.onboarding-souscritre {
  font-size: 13px;
  color: var(--cream-dim);
  margin: 0 0 18px;
  line-height: 1.4;
}
.onboarding-erreur {
  min-height: 16px;
  margin: -14px 0 18px;
  font-size: 13px;
  color: var(--error);
  text-align: center;
}

.relation-progression {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-2);
  margin: -6px 0 6px;
}

.relation-question {
  font-size: 17px;
  line-height: 1.4;
  margin-bottom: 20px;
  font-weight: 600;
}


.btn-gold {
  border: none;
  border-radius: 1000px;
  cursor: pointer;
  padding: 15px 36px;
  font-family: inherit;
  font-weight: 600;
  font-size: 15px;
  color: #ffffff;
  background: var(--gold-3) 55%;
  /* box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.6),
    inset 0 -6px 10px rgba(0,0,0,0.18),
    0 6px 18px rgba(0,0,0,0.35);
  transition: transform 0.15s ease; */
}
.btn-gold:hover { transform: translateY(-1px); }
.btn-gold:active { transform: translateY(0); }

/* --- Loading (écran d'accroche) --- */
#screen-loading p {
  font-size: 14px;
  color: var(--cream-dim);
  margin-top: 4px;
}

/* --- Punchline card --- */
.owner-tag {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-1);
  margin-bottom: 10px;
}

/* --- Texte brut flouté, net au tap (plus de cadre/carte autour) --- */

.reveal-zone {
  width: 100%;
  cursor: pointer;
  opacity: 0;
  transform: translateY(10px) scale(0.98);
  animation: cardIn 0.5s ease forwards;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
@keyframes cardIn {
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.reveal-texte {
  margin: 0;
  font-family: 'Baloo 2', 'Inter', system-ui, sans-serif;
  font-size: 36px;
  line-height: 1.35;
  font-weight: 700;
  text-align: center;
  filter: blur(9px);
  transition: filter 0.4s ease;
  user-select: none;
}
.reveal-zone.revele .reveal-texte {
  filter: blur(0);
}

.screen-none-texte {
  font-family: 'Baloo 2', 'Inter', system-ui, sans-serif;
  font-size: 36px;
  line-height: 1.4;
  font-weight: 700;
  margin-top: 18px;
}

.flip-hint {
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--cream-dim);
  animation: hintPulse 1.8s ease-in-out infinite;
  transition: opacity 0.3s ease;
}
.reveal-zone.revele .flip-hint {
  opacity: 0;
  pointer-events: none;
}
@keyframes hintPulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

/* Icônes rondes discrètes en haut des écrans -- flèche retour à gauche,
   bonhomme "compte" à droite. Plus sobres que les .fab du bas (actions
   secondaires de navigation, pas des actions principales). */
.top-icon {
  position: fixed;
  top: calc(max(20px, env(safe-area-inset-top)) + var(--haut));
  z-index: 20;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
  color: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.top-icon svg { width: 23px; height: 23px; }
.top-icon:hover { background: rgba(255,255,255,0.08); }
.top-icon-left { left: max(20px, env(safe-area-inset-left)); }
.top-icon-right { right: max(20px, env(safe-area-inset-right)); }

.compte-infos {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 22px 0 28px;
}
.compte-ligne {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 12px;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.045);
}
.compte-label {
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold-1);
}

/* --- Ecran "Mes données" --- */
.donnee-section-titre {
  width: 100%;
  text-align: left;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold-1);
  margin: 22px 0 10px;
}
.donnees-liste {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.donnees-liste p {
  font-size: 14px;
  color: var(--cream-dim);
  text-align: left;
}
.donnee-item {
  border-radius: 12px;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.045);
  text-align: left;
}
.donnee-label {
  margin: 0 0 4px;
  font-size: 12px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--gold-1);
}
.donnee-texte {
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
}
.donnee-texte + .donnee-texte {
  margin-top: 4px;
}

.donnee-item {
  position: relative;
  padding-right: 40px;
  white-space: pre-line;
}
.donnee-supprimer {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  color: var(--cream-dim);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
}
.donnee-supprimer:hover {
  background: rgba(255, 255, 255, 0.12);
  color: var(--cream);
}
.mesdonnees-souscritre {
  font-size: 13px;
  color: var(--cream-dim);
  margin: 0 0 18px;
  line-height: 1.4;
}

/* Ecran "Mes données" > type "Mes relations" -- une case par personne, un
   clic ouvre la page de détail (#screen-relation-detail). */
.donnee-relation-carte {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.045);
  border: none;
  color: inherit;
  font-family: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}
.donnee-relation-nom {
  font-weight: 500;
}
.donnee-relation-chevron {
  color: var(--gold-1);
  flex-shrink: 0;
}

/* Ecran de détail d'une relation -- "Toi" (formulaire éditable) puis la
   section en lecture seule de l'autre personne. */
#screen-relation-detail #relationdetail-supprimer {
  margin-bottom: 22px;
}
#screen-relation-detail .donnee-section-titre {
  margin-top: 22px;
}
.mesdonnees-ajout {
  width: 100%;
  margin-top: 16px;
}

/* Boutons ronds flottants "Nouvelle donnée" et "À valider", ancrés aux
   coins bas. Même langage que les icônes du haut (.top-icon) : pastille
   translucide, trait crème fin, aucun dégradé ni ombre. */
.fab {
  position: fixed;
  bottom: max(24px, env(safe-area-inset-bottom));
  z-index: 20;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  color: var(--cream-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.fab svg { width: 22px; height: 22px; }
.fab svg path { stroke-width: 2; }
.fab:hover { background: rgba(255, 255, 255, 0.1); color: var(--cream); }
.fab:active { background: rgba(255, 255, 255, 0.14); }
.fab-left { left: max(24px, env(safe-area-inset-left)); }
.fab-right { right: max(24px, env(safe-area-inset-right)); }

.badge-dot {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #e5484d;
  box-shadow: 0 0 0 2px rgba(1, 25, 4, 0.9);
}
.badge-dot[hidden] { display: none; }

.reset-link {
  margin-top: 26px;
  font-size: 12px;
  color: var(--cream-dim);
  text-decoration: underline;
  cursor: pointer;
  background: none;
  border: none;
  font-family: inherit;
}


.toast {
  position: fixed;
  left: 50%;
  bottom: 90px;
  transform: translate(-50%, 12px);
  padding: 12px 20px;
  border-radius: 12px;
  background: rgba(1, 35, 4, 0.95);
  border: 1px solid var(--gold-line);
  color: var(--cream);
  font-size: 13px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
  max-width: 90vw;
  text-align: center;
  z-index: 10;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* Boutons de navigation partagés (compte / nouvelle donnée / à valider) --
   ils vivent hors des .screen dans le HTML (voir index.html), donc cachés
   par défaut et affichés uniquement quand l'écran carte ou "aucun scan"
   est actif. Placée en fin de fichier pour gagner sur .top-icon/.fab
   (même spécificité, l'ordre dans le fichier tranche). */
.global-nav {
  display: none;
}
body:has(#screen-card.active) .global-nav,
body:has(#screen-none.active) .global-nav {
  display: flex;
}

/* --- Moments partagés (question "vous faites quoi ensemble ?") --- */
.ensemble-zone {
  width: 100%;
  max-width: 420px;
  margin-top: 26px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  animation: cardIn 0.5s ease forwards;
}
.ensemble-zone[hidden] { display: none; }
.ensemble-question {
  margin: 0;
  font-family: 'Baloo 2', 'Inter', system-ui, sans-serif;
  font-size: 20px;
  font-weight: 700;
  text-align: center;
}
.ensemble-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.ensemble-chip {
  border: 1px solid var(--gold-1);
  background: transparent;
  color: var(--cream-dim);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 13px;
  font-family: inherit;
  opacity: 0.45;
}
.ensemble-chip.on {
  background: var(--gold-1);
  color: #001c03;
  opacity: 1;
}
.ensemble-zone input {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.06);
  color: inherit;
  font-size: 16px;
  font-family: inherit;
}

.ensemble-etape { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.ensemble-etape[hidden] { display: none; }
.ensemble-chip { opacity: 1; }
.ensemble-chip.on { opacity: 1; }

#relation-titre {
  font-family: 'Baloo 2', 'Inter', system-ui, sans-serif;
}

/* Pré-remplissage navigateur (iCloud, Google) : garde le fond de l'app au
   lieu du jaune/bleu imposé par défaut. */
.field input:-webkit-autofill,
.field input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--cream);
  caret-color: var(--cream);
  transition: background-color 9999s ease-out 0s;
}