/* =====================================================
   BATISKOR EDL — PWA stylesheet
   Charte : bleu (#1F7CC6) + vert vif (#5DB934) + chrome
   Penser mobile-first : grands boutons, hiérarchie nette,
   minimum d'effort cognitif demandé.
   ===================================================== */
:root {
  --edl-primary: #1F7CC6;
  --edl-primary-deep: #155B92;
  --edl-accent: #5DB934;
  --edl-accent-deep: #3F8520;
  --edl-chrome: #8E9499;

  --bg: #F5F7F9;
  --paper: #FFFFFF;
  --line: #E0E5E8;
  --text: #1A1A1A;
  --muted: #6E7378;
  --subtle: #A5ABB1;

  --shadow-sm: 0 1px 4px rgba(26,26,26,0.06);
  --shadow-md: 0 4px 16px rgba(26,26,26,0.10);
  --shadow-lg: 0 12px 32px rgba(26,26,26,0.14);
}
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body {
  height: 100%;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.55;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body {
  background:
    radial-gradient(ellipse 800px 500px at 100% -10%, rgba(31,124,198,0.08), transparent),
    radial-gradient(ellipse 600px 400px at -10% 100%, rgba(93,185,52,0.06), transparent),
    var(--bg);
  min-height: 100vh;
  padding-bottom: env(safe-area-inset-bottom);
}

#app { max-width: 540px; margin: 0 auto; padding: 24px 20px; }

/* HEADER */
.app-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 0 20px; border-bottom: 1px solid var(--line); margin-bottom: 28px;
}
.app-logo {
  display: flex; align-items: center; gap: 10px;
  font-size: 18px; font-weight: 800; letter-spacing: 0.02em; color: var(--edl-primary);
}
.app-logo svg { height: 36px; width: auto; }
.app-tagline { font-size: 11px; letter-spacing: 0.25em; color: var(--muted); text-transform: uppercase; font-weight: 600; }

/* TITRES */
h1 {
  font-size: 28px; font-weight: 800; letter-spacing: -0.015em;
  color: var(--edl-primary-deep); line-height: 1.15; margin-bottom: 10px;
}
h2 { font-size: 20px; font-weight: 700; color: var(--text); margin-bottom: 8px; }
.lead { font-size: 16px; color: var(--muted); line-height: 1.6; margin-bottom: 28px; }

/* CARD */
.card {
  background: var(--paper); border-radius: 16px; padding: 24px 22px;
  box-shadow: var(--shadow-sm); border: 1px solid var(--line);
  margin-bottom: 18px;
}

/* =====================================================
   VARIANTES DE CARDS — code couleur par responsabilité
   (refait le 22/08/2026 à la demande de Chawki : plus de tranche
   latérale colorée ni de pastille ● — « ça fait intelligence
   artificielle ». À la place : carte blanche posée sur une ombre
   douce et diffuse, un lavis de couleur très léger, et un filet
   fin sous le titre dans la couleur de la partie — l'esprit du
   cahier imprimé.)
   - card-mine     : Propriétaire (bleu)
   - card-other    : Locataire (vert)
   - card-property : le bien (chrome)
   ===================================================== */
.card-mine, .card-other, .card-property {
  border: 1px solid rgba(20, 41, 60, 0.07);
  background: #FFFFFF;
  box-shadow: 0 2px 6px rgba(20, 41, 60, 0.04), 0 14px 36px rgba(20, 41, 60, 0.09);
}
.card-mine > h2, .card-other > h2, .card-property > h2 {
  padding-bottom: 9px; margin-bottom: 14px;
}
.card-mine {
  background: linear-gradient(180deg, rgba(31,124,198,0.045) 0%, #FFFFFF 34%);
}
.card-mine > h2 {
  color: var(--edl-primary-deep);
  border-bottom: 2px solid var(--edl-primary);
}
.card-other {
  background: linear-gradient(180deg, rgba(93,185,52,0.05) 0%, #FFFFFF 34%);
}
.card-other > h2 {
  color: var(--edl-accent-deep);
  border-bottom: 2px solid var(--edl-accent);
}
.card-property {
  background: linear-gradient(180deg, rgba(142,148,153,0.05) 0%, #FFFFFF 34%);
}
.card-property > h2 {
  color: #5A5F65;
  border-bottom: 2px solid var(--edl-chrome);
}

/* Légende couleur — affichée près du stepper pour mémoriser le code */
.color-legend {
  display: flex; gap: 14px; flex-wrap: wrap;
  margin: -2px 0 14px; font-size: 11.5px; color: var(--muted);
}
.color-legend span { display: inline-flex; align-items: center; gap: 5px; }
.color-legend i {
  width: 10px; height: 10px; border-radius: 50%; display: inline-block;
}

/* FORMULAIRE — pensé pour grands doigts */
.field { margin-bottom: 18px; }
.field label {
  display: block; font-size: 13px; font-weight: 600; color: var(--text);
  margin-bottom: 8px; letter-spacing: 0.01em;
}
.field input,
.field select,
.field textarea {
  width: 100%; padding: 16px 18px; font-size: 16px;
  font-family: inherit; color: var(--text); background: var(--paper);
  border: 1.5px solid var(--line); border-radius: 12px;
  transition: border-color 0.18s, box-shadow 0.18s;
  -webkit-appearance: none; appearance: none;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none; border-color: var(--edl-primary);
  box-shadow: 0 0 0 4px rgba(31,124,198,0.12);
}
.field input::placeholder { color: var(--subtle); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field-help { font-size: 12.5px; color: var(--muted); margin-top: 6px; line-height: 1.5; }

/* BOUTONS — gros, lisibles */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 18px 24px; font-size: 16px; font-weight: 700;
  font-family: inherit; border: none; border-radius: 14px; cursor: pointer;
  text-decoration: none; letter-spacing: 0.01em;
  transition: all 0.2s; min-height: 56px;
}
.btn-primary { background: #14293C; color: #FFFFFF; } /* encre — action, jamais une personne */
.btn-primary:hover { background: #0B1B2A; transform: translateY(-1px); }
.btn-primary:active { transform: translateY(0); }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.btn-accent { background: #128083; color: #FFFFFF; } /* sarcelle — validation, jamais une personne */
.btn-accent:hover { background: #0C5D60; transform: translateY(-1px); }
.btn-ghost {
  background: transparent; color: #14293C;
  border: 1.5px solid rgba(20,41,60,0.55);
}
.btn-ghost:hover { background: rgba(31,124,198,0.06); }

/* Mini boutons de navigation (pièce précédente / suivante) */
.btn-mini-nav {
  width: 38px; height: 38px; border-radius: 10px;
  background: rgba(184,115,51,0.08); color: #B87333;
  border: 1.5px solid rgba(184,115,51,0.30);
  font-size: 18px; font-weight: 700; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: all 0.15s;
}
.btn-mini-nav:hover:not(:disabled) { background: rgba(184,115,51,0.18); transform: translateY(-1px); }
.btn-mini-nav:disabled { opacity: 0.35; cursor: not-allowed; }

/* Textarea : même style que les inputs */
.field textarea {
  resize: vertical; min-height: 90px; font-family: inherit;
}

/* MESSAGES */
.msg { padding: 14px 18px; border-radius: 12px; font-size: 14.5px; margin-bottom: 18px; line-height: 1.5; }
.msg-success { background: rgba(93,185,52,0.10); color: var(--edl-accent-deep); border: 1px solid rgba(93,185,52,0.30); }
.msg-error { background: rgba(220,53,69,0.08); color: #b02a37; border: 1px solid rgba(220,53,69,0.25); }
.msg-info { background: rgba(31,124,198,0.08); color: var(--edl-primary-deep); border: 1px solid rgba(31,124,198,0.20); }

/* CODE BSK affiché — désactive les ligatures OpenType pour conserver
   les vrais tirets courts (-) saisis dans le HTML */
.code-display {
  font-family: 'Menlo', 'Consolas', monospace;
  font-size: 22px; font-weight: 700; letter-spacing: 0.04em;
  color: var(--edl-primary); background: rgba(31,124,198,0.06);
  padding: 14px 20px; border-radius: 12px; text-align: center;
  border: 1.5px dashed rgba(31,124,198,0.35);
  margin: 14px 0;
  font-variant-ligatures: none;
  font-feature-settings: "liga" 0, "calt" 0, "kern" 0;
  -webkit-font-feature-settings: "liga" 0, "calt" 0, "kern" 0;
}

/* FOOTER */
.app-footer {
  text-align: center; font-size: 11px; color: var(--subtle);
  margin-top: 40px; padding: 20px 0; letter-spacing: 0.04em; line-height: 1.7;
}
.app-footer .separator { margin: 0 8px; opacity: 0.5; }

/* SPINNER */
.spinner {
  display: inline-block; width: 18px; height: 18px;
  border: 2.5px solid rgba(255,255,255,0.30);
  border-top-color: #FFFFFF; border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }


/* ── Charte des personnes (23/08) : fond ambiant de la personne identifiée ──
   Prime sur les fonds de phase posés par phases.js. */
body[data-edl-role="proprio"] { background: #EDF4FB !important; }
body[data-edl-role="locataire"] { background: #EEF6EC !important; }


/* =====================================================
   MOBILE D'ABORD — chantier « graphisme mobile » du 23/08/2026
   Demande de Chawki après son grand test au téléphone :
   1) plus AUCUN défilement horizontal (« je lis la moitié d'une phrase »),
   2) l'app doit être pratique au pouce, téléphone d'abord, tablette ensuite.
   RIEN ici ne touche à la charte (bleu = propriétaire, vert = locataire,
   encre = action, sarcelle = validation, grenat = sortie) ni à la logique.
   Ordre : ces règles sont EN FIN de feuille, elles priment sur celles du haut.
   ===================================================== */

/* -- Largeur de gouttière, en variable : la barre des 4 phases (phases.js)
      s'aligne dessus au pixel près, y compris sur les écrans très étroits. -- */
:root { --edl-pad-x: 20px; }
@media (max-width: 380px) { :root { --edl-pad-x: 15px; } }

/* -- 1. ZÉRO DÉFILEMENT HORIZONTAL --------------------------------------
   « clip » plutôt que « hidden » : clip ne crée pas de conteneur de
   défilement, donc le bandeau des 4 phases reste collé en haut (sticky). -- */
html, body { max-width: 100%; overflow-x: hidden; }
@supports (overflow-x: clip) { html, body { overflow-x: clip; } }
html { -webkit-text-size-adjust: 100%; }

#app {
  width: 100%;
  padding-top: 20px;
  padding-bottom: 28px;
  padding-left: calc(var(--edl-pad-x) + env(safe-area-inset-left));
  padding-right: calc(var(--edl-pad-x) + env(safe-area-inset-right));
  overflow-wrap: anywhere;   /* un mot trop long (e-mail, IBAN, code) se coupe au lieu de déborder */
}
/* Les enfants de grille et de flexbox ont par défaut une largeur minimale
   égale à leur contenu : c'est LA cause n°1 des débordements. On l'annule. */
#app *, .edl-aide-pop * { min-width: 0; }
#app img, #app svg, #app canvas, #app video, #app iframe, #app table { max-width: 100%; }
#app input, #app select, #app textarea { max-width: 100%; }

/* La barre des 4 phases suit la gouttière et l'encoche */
body .edl-phases {
  margin-left: calc(-1 * (var(--edl-pad-x) + env(safe-area-inset-left)));
  margin-right: calc(-1 * (var(--edl-pad-x) + env(safe-area-inset-right)));
  padding-left: calc(12px + env(safe-area-inset-left));
  padding-right: calc(12px + env(safe-area-inset-right));
}

/* Codes, e-mails, IBAN : on autorise la coupure au milieu du mot */
.code-display { word-break: break-all; overflow-wrap: anywhere; }
@media (max-width: 420px) { .code-display { font-size: 18px; padding: 12px 14px; } }
.edl-mot-long { word-break: break-all; overflow-wrap: anywhere; }

/* Deux colonnes qui savent redevenir une seule quand la place manque */
.field-row { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
@media (max-width: 430px) { .field-row { grid-template-columns: 1fr; } }

/* -- 2. SAISIE : bon clavier, pas de zoom forcé iOS ---------------------
   Sous 16 px, Safari iPhone zoome tout seul dès qu'on touche un champ
   et ne dézoome jamais : le texte finit hors écran. 16 px partout. -- */
#app input, #app select, #app textarea { font-size: 16px; }
@media (max-width: 820px) {
  .field input, .field select, .field textarea { padding: 14px 16px; min-height: 50px; }
  .field textarea { min-height: 96px; }
}

/* -- 3. CIBLES TACTILES : 44 px minimum au pouce ------------------------ */
@media (max-width: 820px) {
  .btn { min-height: 52px; padding: 16px 20px; }
  .btn-mini-nav { width: 44px; height: 44px; border-radius: 12px; font-size: 20px; }
  #app input[type="checkbox"], #app input[type="radio"] { width: 24px; height: 24px; flex: none; }
  /* les petites bulles d'aide « ? » (aide.js) restent atteignables */
  body .edl-aide-badge { min-width: 28px; min-height: 28px; }
}

/* -- 4. CONFORT DE LECTURE AU TÉLÉPHONE --------------------------------
   Moins de hauteur perdue en en-tête, titres à la bonne échelle. -- */
@media (max-width: 430px) {
  h1 { font-size: 24px; line-height: 1.18; }
  h2 { font-size: 18px; }
  .lead { font-size: 15px; margin-bottom: 20px; }
  .card { padding: 18px 16px; border-radius: 14px; }
  .app-header { padding: 8px 0 14px; margin-bottom: 18px; }
  .app-logo svg { height: 30px; }
  .app-logo { font-size: 16px; }
  .app-footer { margin-top: 28px; padding: 16px 0; }
}

/* -- 5. TABLETTE (768–1024 px) : on respire, sans passer au bureau ------ */
@media (min-width: 700px) and (max-width: 1100px) {
  #app { max-width: 640px; }
}

/* -- 6. IMPRESSION : rien de ce qui précède ne doit rogner le document -- */
@media print {
  html, body { overflow: visible !important; max-width: none !important; }
  #app { padding: 0 !important; max-width: none !important; }
}

/* -- 7. BARRE D'OUTILS DES DOCUMENTS (rapport, factures) ----------------
   Elle était collée avec des marges négatives de 20 px fixes : dès que la
   gouttière se resserrait, elle dépassait de l'écran. Elle suit maintenant
   la même variable que le reste, et ses boutons s'empilent au téléphone. -- */
.edl-barre-outils {
  position: sticky; top: 0; z-index: 50;
  background: #FFFFFF; border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  padding: 12px calc(var(--edl-pad-x) + env(safe-area-inset-right))
           12px calc(var(--edl-pad-x) + env(safe-area-inset-left));
  margin: -20px calc(-1 * (var(--edl-pad-x) + env(safe-area-inset-right)))
          22px calc(-1 * (var(--edl-pad-x) + env(safe-area-inset-left)));
}
.edl-barre-outils > div { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
@media (max-width: 560px) {
  .edl-barre-outils { gap: 8px; }
  .edl-barre-outils .btn { flex: 1 1 auto; }
}
@media print { .edl-barre-outils { display: none !important; } }

/* -- 8. HAUTEUR D'EN-TÊTE AU TÉLÉPHONE ---------------------------------
   Le bandeau des 4 phases reste (Chawki y tient : « qu'on sache toujours
   où on est »), mais il se resserre de quelques pixels sur un petit écran :
   autant de gagné pour le contenu, sans rien retirer de l'information. -- */
@media (max-width: 430px) {
  body .edl-phases { padding-top: 6px; padding-bottom: 5px; }
  body .edl-ph { padding: 3px 2px 4px; }
  body .edl-ph .pastille { width: 18px; height: 18px; font-size: 10px; }
  body .edl-phases-ligne { margin-top: 3px; font-size: 11px; }
}