/* ===== Application mobile « Identité à domicile » =====
   Interface pensée pour le pouce : cibles larges, un seul geste par écran,
   zones sûres respectées sur iPhone (encoche + barre d'accueil). */

:root {
  --primary: #0369a1;
  --primary-dark: #0c4a6e;
  --primary-light: #e0f2fe;
  --navy: #0f172a;
  --accent: #15803d;
  --accent-light: #dcfce7;
  --warn: #b45309;
  --warn-light: #fef3c7;
  --danger: #b91c1c;
  --danger-light: #fee2e2;
  --text: #0f172a;
  --muted: #475569;
  --border: #e2e8f0;
  --bg: #f8fafc;
  --white: #fff;
  --radius: 16px;
  --radius-sm: 10px;
  --shadow: 0 4px 16px rgba(15, 23, 42, .08);
  --font-head: 'Lexend', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Source Sans 3', 'Segoe UI', system-ui, sans-serif;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --tabbar-h: 62px;
}

* { box-sizing: border-box; min-width: 0; }
html, body { margin: 0; padding: 0; }

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  /* Pas de rebond élastique ni de sélection accidentelle : on veut que ça se
     comporte comme une app, pas comme une page web. */
  overscroll-behavior-y: none;
  -webkit-tap-highlight-color: transparent;
}

img { max-width: 100%; display: block; }
h1, h2, h3 { font-family: var(--font-head); line-height: 1.2; color: var(--navy); margin: 0; }
.muted { color: var(--muted); }
.note { color: var(--muted); font-size: .86rem; margin: .4rem 0 0; }

/* ===== Écrans ===== */
.screen { display: none; min-height: 100vh; padding-bottom: calc(var(--tabbar-h) + var(--safe-b) + 12px); }
.screen.is-active { display: block; animation: screenIn .28s ease both; }
.screen--center.is-active { display: flex; align-items: center; justify-content: center; }
@keyframes screenIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.screen-body { padding: 1.1rem 1.1rem 0; }

.app-header {
  background: linear-gradient(160deg, var(--primary-dark), var(--primary));
  color: var(--white);
  padding: calc(env(safe-area-inset-top, 0px) + 1.4rem) 1.1rem 1.5rem;
}
.app-header--sub { display: flex; align-items: center; gap: .8rem; padding-bottom: 1.1rem; }
.app-kicker { margin: 0 0 .3rem; text-transform: uppercase; letter-spacing: .1em; font-size: .72rem; opacity: .85; }
.app-title { color: var(--white); font-size: 1.6rem; }
.app-title--sm { font-size: 1.2rem; }
.btn-back {
  background: rgba(255, 255, 255, .16); border: 0; color: var(--white);
  width: 44px; height: 44px; border-radius: 50%; font-size: 1.2rem; flex: 0 0 auto;
}

.lede { font-size: 1.02rem; color: var(--muted); margin: 0 0 1.2rem; }
.section-title { font-size: 1.1rem; margin: 1.6rem 0 .8rem; }

/* ===== Les 3 étapes ===== */
.steps { list-style: none; margin: 0 0 1.4rem; padding: 0; display: grid; gap: .6rem; }
.steps li { display: flex; align-items: center; gap: .75rem; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .7rem .85rem; font-size: .93rem; }
.step-num {
  flex: 0 0 26px; height: 26px; border-radius: 50%;
  background: var(--primary-light); color: var(--primary-dark);
  display: grid; place-items: center; font-weight: 700; font-size: .82rem;
}

/* ===== Catalogue ===== */
.produits { display: grid; gap: .8rem; }
.produit {
  width: 100%; text-align: left; background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1rem; box-shadow: var(--shadow);
  /* Aligné en haut, pas centré : sur une carte à long libellé, un prix
     centré verticalement flotte au milieu du texte au lieu de se lire sur la
     même ligne que le nom du produit. */
  display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem;
  font: inherit; color: inherit;
}
.produit:active { transform: scale(.985); }
/* Le texte prend la place restante et coupe les mots trop longs plutôt que
   de pousser le prix hors de la carte. */
.produit-corps { flex: 1 1 auto; min-width: 0; }
.produit-nom {
  display: block; font-family: var(--font-head); font-weight: 700;
  font-size: 1rem; line-height: 1.22; color: var(--navy); margin-bottom: .15rem;
  overflow-wrap: anywhere;
}
.produit-desc { display: block; font-size: .85rem; color: var(--muted); overflow-wrap: anywhere; }
/* flex-shrink: 0 est indispensable — la règle globale « * { min-width: 0 } »
   autoriserait sinon le prix à être compressé sous la largeur de son texte,
   qui déborderait alors de sa boîte à cause du white-space: nowrap. */
.produit-prix {
  flex: 0 0 auto;
  font-family: var(--font-head); font-weight: 700; font-size: 1.15rem;
  color: var(--primary-dark); white-space: nowrap; text-align: right;
  /* Même interligne que le nom du produit : les deux premières lignes se
     lisent alors sur la même ligne optique. */
  line-height: 1.22;
}
.produit-rappel { background: var(--primary-light); color: var(--primary-dark); border-radius: var(--radius-sm); padding: .6rem .8rem; font-size: .9rem; margin: 0 0 1rem; font-weight: 600; }
.tag-signature { display: inline-block; margin-top: .35rem; font-size: .74rem; background: var(--warn-light); color: var(--warn); border-radius: 20px; padding: .1rem .55rem; font-weight: 600; }

/* ===== Viseur ===== */
.viseur {
  position: relative; width: 100%; aspect-ratio: 35 / 45; max-height: 58vh;
  margin: 0 auto 1rem; background: #0f172a; border-radius: var(--radius);
  overflow: hidden; display: grid; place-items: center;
}
.viseur video { width: 100%; height: 100%; object-fit: cover; }
/* La caméra frontale est présentée en miroir : sans ça, se cadrer est
   contre-intuitif. La capture, elle, est dé-miroitée côté canvas. */
.viseur.is-front video { transform: scaleX(-1); }
.gabarit { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.viseur-message {
  position: absolute; bottom: .8rem; left: .8rem; right: .8rem; margin: 0;
  background: rgba(15, 23, 42, .78); color: #fff; border-radius: var(--radius-sm);
  padding: .5rem .7rem; font-size: .84rem; text-align: center;
}
.viseur-message:empty { display: none; }

.conseils-prise { margin: 0 0 1.2rem; padding-left: 1.1rem; color: var(--muted); font-size: .88rem; display: grid; gap: .25rem; }
.studio-actions { display: grid; gap: .6rem; }

/* ===== Boutons ===== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  font-family: var(--font-head); font-weight: 600; font-size: 1rem;
  border-radius: var(--radius-sm); border: 1px solid transparent;
  padding: .78rem 1.1rem; cursor: pointer; text-decoration: none; width: 100%;
}
.btn-lg { padding: 1rem 1.1rem; font-size: 1.05rem; }
.btn-primary { background: var(--primary); color: var(--white); }
.btn-primary:active { background: var(--primary-dark); }
.btn-primary[disabled] { background: #94a3b8; }
.btn-ghost { background: var(--white); color: var(--primary-dark); border-color: var(--border); }
.btn-danger-ghost { background: none; border: 0; color: var(--danger); font-size: .85rem; padding: .25rem 0; width: auto; }
.actions-pile { display: grid; gap: .6rem; margin: 1.2rem 0; }

/* ===== Analyse ===== */
.analyse-box { text-align: center; padding: 2rem 1.5rem; }
.spinner {
  width: 52px; height: 52px; margin: 0 auto 1.4rem; border-radius: 50%;
  border: 4px solid var(--primary-light); border-top-color: var(--primary);
  animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .spinner { animation-duration: 3s; }
  .screen.is-active { animation: none; }
}

/* ===== Résultat ===== */
.verdict { border-radius: var(--radius); padding: .9rem 1rem; margin-bottom: 1.1rem; font-size: .93rem; }
.verdict strong { display: block; font-family: var(--font-head); margin-bottom: .15rem; }
.verdict--ok { background: var(--accent-light); color: #14532d; }
.verdict--doute { background: var(--warn-light); color: #78350f; }
.verdict--ko { background: var(--danger-light); color: #7f1d1d; }

.apercus { display: flex; gap: 1rem; align-items: flex-start; justify-content: center; margin-bottom: 1.2rem; }
.apercu { margin: 0; text-align: center; font-size: .8rem; color: var(--muted); }
.apercu img { border-radius: 8px; border: 1px solid var(--border); box-shadow: var(--shadow); margin-bottom: .45rem; }
.apercu:not(.apercu--planche) img { width: 130px; }
.apercu--planche img { width: 108px; }
.apercu figcaption { line-height: 1.3; }

.conseils { background: var(--white); border: 1px solid var(--border); border-left: 4px solid var(--primary); border-radius: var(--radius-sm); padding: .8rem 1rem; margin-bottom: 1.1rem; }
.conseils h3 { font-size: .92rem; margin-bottom: .4rem; }
.conseils ul { margin: 0; padding-left: 1.1rem; font-size: .88rem; color: var(--muted); display: grid; gap: .2rem; }

.form-bloc { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem; }
.form-bloc > label { font-family: var(--font-head); font-weight: 600; display: block; margin-bottom: .6rem; }
.stepper { display: flex; align-items: center; gap: 1rem; }
.stepper button { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--border); background: var(--bg); font-size: 1.3rem; color: var(--primary-dark); }
.stepper output { font-family: var(--font-head); font-weight: 700; font-size: 1.2rem; min-width: 1.5rem; text-align: center; }

/* ===== Panier ===== */
.panier-ligne { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: .85rem; margin-bottom: .8rem; display: flex; gap: .85rem; }
.panier-ligne img { width: 62px; border-radius: 6px; border: 1px solid var(--border); flex: 0 0 auto; }
.panier-ligne-corps { flex: 1; }
.panier-ligne h3 { font-size: .97rem; }
.panier-ligne .prix { font-family: var(--font-head); font-weight: 700; color: var(--primary-dark); }
.recap { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem; margin: 1rem 0; }
.recap-ligne { display: flex; justify-content: space-between; padding: .3rem 0; font-size: .93rem; }
.recap-total { display: flex; justify-content: space-between; border-top: 1px solid var(--border); margin-top: .5rem; padding-top: .6rem; font-family: var(--font-head); font-weight: 700; font-size: 1.15rem; color: var(--primary-dark); }
.vide { text-align: center; padding: 2.5rem 1rem; color: var(--muted); }
.vide-ico { font-size: 2.6rem; margin-bottom: .6rem; }

/* ===== Compte ===== */
.champ { margin-bottom: .85rem; }
.champ label { display: block; font-size: .87rem; font-weight: 600; margin-bottom: .3rem; }
.champ input {
  width: 100%; padding: .8rem .9rem; border: 1px solid var(--border);
  border-radius: var(--radius-sm); font: inherit; background: var(--white);
  /* 16px minimum : en dessous, iOS zoome au focus. */
  font-size: 16px;
}
.champ input:focus { outline: 2px solid var(--primary); outline-offset: 1px; }
.carte { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem; margin-bottom: .9rem; }
.bascule-auth { background: none; border: 0; color: var(--primary); font: inherit; text-decoration: underline; padding: .5rem 0; width: 100%; }
.cmd-ligne { display: flex; justify-content: space-between; align-items: center; gap: .6rem; padding: .7rem 0; border-bottom: 1px solid var(--border); }
.cmd-ligne:last-child { border-bottom: 0; }
.statut { font-size: .74rem; font-weight: 700; border-radius: 20px; padding: .12rem .6rem; white-space: nowrap; }
.statut--attente { background: var(--warn-light); color: var(--warn); }
.statut--ok { background: var(--accent-light); color: #14532d; }
.statut--annule { background: var(--danger-light); color: var(--danger); }
.alerte-renvoi { background: var(--warn-light); color: #78350f; border-radius: var(--radius-sm); padding: .7rem .85rem; font-size: .87rem; margin-top: .6rem; }

/* ===== Barre d'onglets ===== */
.tabbar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 40;
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--border);
  padding-bottom: var(--safe-b);
}
.tabbar button {
  position: relative; background: none; border: 0; padding: .5rem .2rem .55rem;
  display: grid; gap: .12rem; justify-items: center;
  font: inherit; font-size: .7rem; color: var(--muted);
}
.tabbar button.is-active { color: var(--primary); font-weight: 700; }
.tab-ico { font-size: 1.25rem; line-height: 1; }
.tab-cta.is-active .tab-ico { transform: scale(1.08); }
.badge {
  position: absolute; top: .28rem; right: 50%; translate: 26px 0;
  background: var(--danger); color: #fff; font-size: .64rem; font-weight: 700;
  min-width: 17px; height: 17px; border-radius: 9px; display: grid; place-items: center; padding: 0 4px;
}

/* ===== Toast ===== */
.toast {
  position: fixed; left: 1rem; right: 1rem; z-index: 60;
  bottom: calc(var(--tabbar-h) + var(--safe-b) + 12px);
  background: var(--navy); color: #fff; border-radius: var(--radius-sm);
  padding: .8rem 1rem; font-size: .9rem; text-align: center;
  opacity: 0; translate: 0 12px; pointer-events: none;
  transition: opacity .25s ease, translate .25s ease;
}
.toast.is-visible { opacity: 1; translate: 0; }
.toast--erreur { background: var(--danger); }

/* Écrans larges : on garde la colonne étroite d'une app mobile. */
@media (min-width: 620px) {
  #app, .tabbar, .toast { max-width: 520px; margin-inline: auto; }
  .tabbar { left: 50%; right: auto; translate: -50% 0; width: 100%; border-radius: 16px 16px 0 0; }
  .toast { left: 50%; right: auto; translate: -50% 0; width: calc(100% - 2rem); }
  .toast.is-visible { translate: -50% 0; }
}

/* En application native, l'appareil photo du système s'ouvre au déclenchement :
   le viseur ne montre alors pas de flux vidéo mais le gabarit de cadrage
   attendu, sur un fond neutre. */
.viseur--natif video { display: none; }
.viseur--natif { background: linear-gradient(160deg, #1e293b, #0f172a); }
.viseur--natif .gabarit { opacity: .95; }

/* ===== Accueil : bandeau illustré ===== */
.app-header--hero { padding-bottom: 1.1rem; }
.hero {
  width: 100%; max-width: 340px; height: auto;
  margin: 1.1rem auto 0; display: block;
  animation: heroApparait .7s cubic-bezier(.16, 1, .3, 1) both;
}
@keyframes heroApparait { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .hero { animation: none; } }

/* Bandeau de réassurance, à cheval sur le bas du bandeau bleu */
.garanties {
  list-style: none; margin: -2.2rem 0 1.2rem; padding: .7rem .5rem;
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: .3rem;
  text-align: center;
}
.garanties li {
  font-size: .7rem; line-height: 1.25; color: var(--muted); font-weight: 600;
  padding: 0 .15rem;
}
.garanties li::before {
  content: "✓"; display: block; color: var(--accent);
  font-size: .95rem; font-weight: 700; margin-bottom: .1rem;
}

/* Refus du contrôle automatique : on explique, et on laisse le choix. */
.refus {
  background: var(--warn-light); border: 1px solid #fcd34d;
  border-radius: var(--radius); padding: 1rem; margin-bottom: 1.1rem;
}
.refus h3 { font-size: 1rem; color: #78350f; margin-bottom: .35rem; }
.refus p { margin: 0 0 .6rem; font-size: .92rem; color: #78350f; }
.refus ul { margin: 0 0 .9rem; padding-left: 1.1rem; font-size: .88rem; color: #78350f; display: grid; gap: .2rem; }
.refus ul:empty { display: none; }
.refus .note { color: #92400e; margin-top: .6rem; }
.tag-forcee {
  display: inline-block; font-size: .72rem; font-weight: 700;
  background: var(--warn-light); color: var(--warn);
  border-radius: 20px; padding: .1rem .55rem; margin-top: .25rem;
}

/* Connexion par compte externe */
.oauth-choix { margin-top: 1.2rem; }
.oauth-separateur { position: relative; text-align: center; margin: 0 0 .9rem; }
.oauth-separateur::before { content: ""; position: absolute; top: 50%; left: 0; right: 0; height: 1px; background: var(--border); }
.oauth-separateur span { position: relative; background: var(--white); padding: 0 .8rem; color: var(--muted); font-size: .82rem; }
.oauth-boutons { display: grid; gap: .55rem; }
.oauth-btn {
  min-height: 46px; padding: .6rem 1rem; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--white); color: var(--text);
  font-family: var(--font-head); font-weight: 600; font-size: .95rem; width: 100%;
}
.oauth-btn--apple { background: #000; color: #fff; border-color: #000; }

/* Choix du format depuis l'écran de résultat */
.formats { display: grid; gap: .5rem; }
.format {
  display: flex; justify-content: space-between; align-items: center; gap: .8rem;
  width: 100%; min-height: 46px; text-align: left; padding: .7rem .85rem;
  font: inherit; color: inherit;
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.format.is-active { border-color: var(--primary); background: var(--primary-light); }
.format-nom { flex: 1 1 auto; min-width: 0; font-size: .9rem; line-height: 1.25; overflow-wrap: anywhere; }
/* Comme pour les cartes produit, le prix ne doit jamais être compressé sous
   la largeur de son texte : la règle globale « min-width: 0 » l'autoriserait. */
.format-prix {
  flex: 0 0 auto; font-family: var(--font-head); font-weight: 700;
  color: var(--primary-dark); white-space: nowrap;
}
.total-ligne {
  margin: .8rem 0 0; padding-top: .7rem; border-top: 1px solid var(--border);
  font-family: var(--font-head); font-weight: 700; font-size: 1.1rem; color: var(--primary-dark);
}
.total-ligne:empty { display: none; }