/* ============================================================
   CAE Casa Confort — feuille de style unique.
   Pensée pour le téléphone d'abord : les installateurs travaillent dessus,
   souvent dans un comble, souvent avec des gants.
   ============================================================ */

:root {
  color-scheme: light;

  /* Vert sapin du bâti isolé, ambre de la laine minérale, ardoise pour le texte. */
  --vert:        #0f766e;
  --vert-clair:  #ccfbf1;
  --ambre:       #b45309;
  --ambre-clair: #fef3c7;
  --rouge:       #b91c1c;
  --rouge-clair: #fee2e2;

  --encre:       #1c2024;
  --encre-douce: #5b6570;
  --ligne:       #dfe3e8;
  --fond:        #f6f7f9;
  --surface:     #ffffff;

  --rayon: 8px;
  --gouttiere: max(16px, env(safe-area-inset-left, 0px));

  /* Hauteur de cible tactile. 44 px est le minimum confortable avec des gants. */
  --cible: 48px;

  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* Trois états possibles : choix explicite clair, choix explicite sombre, ou
   rien du tout (le réglage « système »), qui est le cas le plus fréquent.
   Le :not([data-theme="light"]) fait gagner un choix clair sur un OS sombre. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --vert:        #5eead4;
    --vert-clair:  #134e4a;
    --ambre:       #fbbf24;
    --ambre-clair: #451a03;
    --rouge:       #fca5a5;
    --rouge-clair: #450a0a;
    --encre:       #e8eaed;
    --encre-douce: #9aa4b0;
    --ligne:       #2c3238;
    --fond:        #14181c;
    --surface:     #1c2126;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --vert: #5eead4; --vert-clair: #134e4a;
  --ambre: #fbbf24; --ambre-clair: #451a03;
  --rouge: #fca5a5; --rouge-clair: #450a0a;
  --encre: #e8eaed; --encre-douce: #9aa4b0;
  --ligne: #2c3238; --fond: #14181c; --surface: #1c2126;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font-size: 16px;          /* jamais moins : iOS zoome sur un champ sous 16 px */
  line-height: 1.5;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

img { max-width: 100%; }
[hidden] { display: none !important; }

.saut {
  position: absolute; left: -9999px;
}
.saut:focus {
  left: 8px; top: 8px; z-index: 100; background: var(--surface);
  padding: 10px 14px; border-radius: var(--rayon);
}

/* ---------- Barre du haut ---------- */

.barre {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 10;
  display: flex; align-items: center; gap: 12px;
  background: var(--surface);
  border-bottom: 1px solid var(--ligne);
  padding: 10px var(--gouttiere);
  min-height: var(--cible);
}
.barre h1 { font-size: 17px; margin: 0; flex: 1; min-width: 0;
            overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barre-droite { display: flex; align-items: center; gap: 10px; }

.retour {
  border: none; background: none; color: var(--vert);
  font-size: 28px; line-height: 1; cursor: pointer;
  min-width: var(--cible); min-height: var(--cible);
}

/* Toujours visible, comme chez Ahverde : le terrain doit pouvoir remonter un
   problème au moment où il le rencontre, pas le soir. */
.signaler {
  background: var(--rouge-clair); color: var(--rouge);
  border: 1px solid transparent; border-radius: var(--rayon);
  font-size: 13px; font-weight: 600; padding: 8px 12px;
  min-height: 40px; cursor: pointer; white-space: nowrap;
}

.pastille { width: 10px; height: 10px; border-radius: 50%; background: var(--encre-douce); }
.pastille.en-ligne   { background: #16a34a; }
.pastille.hors-ligne { background: var(--ambre); }

/* ---------- Contenu ---------- */

.principal {
  padding: 16px var(--gouttiere) 40px;
  max-width: 1100px; margin: 0 auto;
}
.chargement { text-align: center; color: var(--encre-douce); padding: 60px 0; }

.carte {
  background: var(--surface); border: 1px solid var(--ligne);
  border-radius: var(--rayon); padding: 18px; margin-bottom: 16px;
}
.carte h2 { font-size: 16px; margin: 0 0 14px; }

/* Deux colonnes, contact et habitat, comme Ahverde. Elles s'empilent sur
   téléphone : c'est là que la saisie se fait le plus souvent. */
.deux-colonnes { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 820px) {
  .deux-colonnes { grid-template-columns: 1fr minmax(280px, 380px); }
}
.colonne-habitat { background: var(--vert-clair); border-color: transparent; }

/* ---------- Champs ---------- */

.champ { margin-bottom: 14px; }
.champ label { display: block; font-size: 13px; font-weight: 600;
               color: var(--encre-douce); margin-bottom: 5px; }
.champ .oblig { color: var(--rouge); }

input, select, textarea {
  width: 100%; font: inherit; color: var(--encre);
  background: var(--surface);
  border: 1px solid var(--ligne); border-radius: var(--rayon);
  padding: 11px 12px; min-height: var(--cible);
}
input:focus, select:focus, textarea:focus, button:focus-visible {
  outline: 2px solid var(--vert); outline-offset: 1px;
}
textarea { min-height: 96px; resize: vertical; }

/* L'aide dit ce que le champ DÉCLENCHE, pas ce qu'il contient. */
.champ .aide {
  margin: 6px 0 0; font-size: 12.5px; color: var(--ambre);
  background: var(--ambre-clair); border-radius: 5px; padding: 6px 9px;
}

.bouton {
  font: inherit; font-weight: 600; cursor: pointer;
  background: var(--vert); color: #fff; border: none;
  border-radius: var(--rayon); padding: 12px 20px; min-height: var(--cible);
}
.bouton.secondaire { background: transparent; color: var(--vert);
                     border: 1px solid var(--ligne); }
.bouton:disabled { opacity: .5; cursor: not-allowed; }

/* ---------- Modale de sélection ---------- */

.modale {
  border: none; border-radius: 14px; padding: 0; width: min(520px, 92vw);
  background: var(--surface); color: var(--encre);
}
.modale::backdrop { background: rgba(0,0,0,.45); }
.modale-tete { display: flex; align-items: center; gap: 12px;
               padding: 18px 18px 10px; }
.modale-tete h2 { font-size: 18px; margin: 0; flex: 1; }
.fermer { border: none; background: none; font-size: 20px; cursor: pointer;
          color: var(--encre-douce); min-width: 40px; min-height: 40px; }
.choix-recherche { margin: 0 18px 12px; width: calc(100% - 36px); }
.choix-liste { max-height: 56vh; overflow-y: auto; padding: 0 10px 14px; }
.choix {
  display: flex; align-items: center; gap: 14px; width: 100%;
  background: none; border: none; border-radius: var(--rayon);
  padding: 12px; cursor: pointer; text-align: left; font: inherit;
  color: var(--encre); min-height: var(--cible);
}
.choix:hover, .choix:focus-visible { background: var(--fond); }
.choix-icone {
  width: 40px; height: 40px; flex: none; border-radius: 10px;
  background: var(--fond); display: grid; place-items: center; font-size: 19px;
}
.choix-texte { display: flex; flex-direction: column; min-width: 0; }
.choix-libelle { font-weight: 600; }
.choix-detail { font-size: 12.5px; color: var(--encre-douce); }

/* ---------- Messages ---------- */

#toasts {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 50; display: flex; flex-direction: column; gap: 8px;
  width: min(460px, calc(100vw - 32px));
}
.toast {
  background: var(--encre); color: var(--fond);
  padding: 12px 15px; border-radius: var(--rayon); font-size: 14.5px;
}
.toast-succes { background: #15803d; color: #fff; }
.toast-alerte { background: var(--ambre); color: #fff; }
.toast-erreur { background: var(--rouge); color: #fff; }

/* ---------- Pied ---------- */

.pied {
  padding: 14px var(--gouttiere) calc(14px + env(safe-area-inset-bottom, 0px));
  font-size: 12px; color: var(--encre-douce); text-align: center;
  border-top: 1px solid var(--ligne);
}

.noscript { padding: 24px; text-align: center; }

/* Les tableaux larges défilent dans leur propre conteneur, jamais la page. */
.defilant { overflow-x: auto; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}