/* ============================================================================
   SBG Devis — BASE : remise à zéro, typographie, mise en page d'un écran.
   Toutes les valeurs de design viennent de tokens.css (var(--…)).
   Un écran = .ecran > .entete + .fil (défile) + .feuille (barre du bas arrondie).
   Jetons demandés mais pas encore dans tokens.css : var(--nouveau, var(--existant-le-plus-proche)).
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  height: 100%;
  background: var(--lin);
}

body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  background: var(--lin);
  color: var(--texte);
  font-family: var(--police-texte);
  font-size: var(--taille-l);
  line-height: normal; /* comme la maquette : --interligne est réservé aux textes suivis (bulles, notes) */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
}

h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg, video, canvas { display: block; max-width: 100%; }
svg.icone { flex: none; }

button, input, select, textarea {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}
button {
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  text-align: inherit;
  touch-action: manipulation;
}
button:disabled { cursor: default; }
a { color: var(--orange-action); text-decoration: none; touch-action: manipulation; }

:focus { outline: none; }
:focus-visible {
  outline: 3px solid var(--orange-action);
  outline-offset: 2px;
}
[tabindex="-1"]:focus { outline: none; }

::selection { background: var(--peche); color: var(--texte); }

/* --- Racine de l'app ----------------------------------------------------- */
.app {
  height: 100%;
  max-width: var(--largeur-max);
  margin: 0 auto;
}

/* --- Écran : hauteur visible réelle (Safari iPhone ≈ 664 px utiles) ------ */
.ecran {
  position: relative;
  height: 100vh;
  height: 100dvh;
  width: 100%;
  max-width: var(--largeur-max);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--lin);
  animation: sbg-apparition var(--duree) ease-out;
}

/* --- En-tête blanc (écrans d'étape) ------------------------------------- */
.entete {
  flex: none;
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: var(--esp-4);
  padding: var(--esp-4) var(--esp-5);
  padding-top: max(var(--esp-4), env(safe-area-inset-top));
  background: var(--blanc);
  box-shadow: var(--ombre-entete);
}

.entete__textes {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.entete__titre {
  margin: 0;
  font-family: var(--police-titre);
  font-size: var(--taille-3xl);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.15;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.entete__sous-titre {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: var(--taille-s);
  color: var(--gris);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.entete__sous-titre--ok { color: var(--vert); font-weight: 600; }
.entete__sous-titre--attente { color: var(--brun); font-weight: 600; }

/* Pastille d'initiales dans l'en-tête (écran Annonce) */
.entete__avatar {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: var(--rayon-s);
  background: var(--peche);
  color: var(--brun);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--police-titre);
  font-size: var(--taille-m);
  font-weight: 800;
}

/* Grand en-tête arrondi de l'accueil : logo + bouton, puis titre de page */
.entete--accueil {
  flex-direction: column;
  align-items: stretch;
  gap: var(--esp-5);
  padding: var(--esp-6) var(--esp-7) var(--esp-8);
  padding-top: max(var(--esp-6), env(safe-area-inset-top));
  border-radius: var(--rayon-entete, 0 0 var(--rayon-carte) var(--rayon-carte));
  box-shadow: var(--ombre-entete);
}
.entete--centre { align-items: center; text-align: center; }
.entete__ligne {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-4);
}
.entete__logo {
  display: block;
  width: 96px;
  height: 69px;
  object-fit: contain;
}
.entete__titre-page {
  margin: 0;
  font-family: var(--police-titre);
  font-size: var(--taille-titre-page);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
}
/* Recherche + onglets de l'accueil, sous le logo (toujours visibles dès qu'il y a un devis) */
.accueil__outils { display: flex; flex-direction: column; gap: var(--esp-4); }

/* --- Fil : zone centrale qui défile, calée en bas quand il y a de la place -- */
.fil {
  flex: 1;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  gap: var(--esp-4);
  padding: var(--esp-4) var(--esp-7) var(--esp-5);
}
.fil > * { flex: none; }
.fil > :first-child { margin-top: auto; }
/* Élément épinglé en haut du fil (ex. bandeau « Réseau faible ») : le reste reste calé en bas */
.fil > .fil__epingle { align-self: stretch; margin-top: 0; margin-bottom: auto; }
/* Variante : contenu en haut (accueil, réglages, formulaires) */
.fil--haut > :first-child { margin-top: 0; }
/* Variante : contenu centré verticalement (connexion) */
.fil--centre > :first-child { margin-top: auto; }
.fil--centre > :last-child { margin-bottom: auto; }

/* --- Feuille : barre du bas blanche, arrondie en haut ------------------- */
.feuille {
  flex: none;
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: var(--esp-4);
  padding: var(--esp-5) var(--esp-7) max(var(--esp-8), env(safe-area-inset-bottom));
  background: var(--blanc);
  border-radius: var(--rayon-feuille);
  box-shadow: var(--ombre-feuille);
}
.feuille--colonne {
  flex-direction: column;
  align-items: stretch;
  gap: var(--esp-3);
}
.feuille--centree {
  flex-direction: column;
  justify-content: center;
  padding-top: var(--esp-8);
  padding-bottom: max(var(--esp-9), env(safe-area-inset-bottom));
}

/* --- Utilitaires ---------------------------------------------------------- */
.cache { display: none !important; }
.masque-visuel {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

@keyframes sbg-apparition {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

/* --- Petits écrans (Safari iPhone : ~664 px utiles) : on resserre les marges, pas les tailles -- */
@media (max-height: 760px) {
  .entete--accueil .entete__logo { width: 72px; height: 52px; } /* la liste garde 4 devis visibles dans Safari */
}
@media (max-height: 720px) {
  .entete--accueil { gap: var(--esp-3); padding-bottom: var(--esp-6); }
  .accueil__outils { gap: var(--esp-3); }
  .feuille--centree { padding-top: var(--esp-5); padding-bottom: max(var(--esp-6), env(safe-area-inset-bottom)); }
  .feuille--centree .bouton-micro { gap: var(--esp-5); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}