/* L'appli de l'atelier, aux couleurs du site menuiseriehamard.com (d'après la maquette) */
:root {
  --fond: #F6F5F2; --encre: #1C1C1A; --bronze: #9C8460; --gris: #6E6A63; --gris-fonce: #4A463F;
  --sable: #ECE9E3; --trait: #E3DED5; --blanc: #FFFFFF; --rouge: #A33A2A;
  --titre: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --texte: "Jost", "Avenir Next", Avenir, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--fond); color: var(--encre); font-family: var(--texte); font-weight: 300; }
body { min-height: 100vh; }
button { font: inherit; cursor: pointer; color: inherit; }
[hidden] { display: none !important; }
h1, h2 { margin: 0; }

.surtitre { margin: 0; font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: var(--gris); }
.date { margin: 4px 0 0; font-size: 13px; color: var(--gris-fonce); }
.titre { font-family: var(--titre); font-weight: 300; font-size: 40px; line-height: 1.05; letter-spacing: -1px; }
.petit-titre { font-size: 11px; font-weight: 400; letter-spacing: 3px; text-transform: uppercase; color: var(--gris); }
.erreur { color: var(--rouge); min-height: 1.2em; }
.aide-texte { font-size: 13px; color: var(--gris); margin: 6px 0 14px; }
.pastille-essai { margin-left: 6px; padding: 2px 8px; border-radius: 999px; background: var(--bronze); color: #fff; letter-spacing: 1px; }

.bouton-noir, .bouton-clair { min-height: 44px; padding: 0 20px; border-radius: 999px; font-size: 14px; font-weight: 400; }
.bouton-noir { border: none; background: var(--encre); color: var(--fond); }
.bouton-clair { border: 1px solid var(--encre); background: transparent; }
.bouton-noir.petit { min-height: 38px; padding: 0 16px; font-size: 13px; }
.danger { border-color: var(--rouge); color: var(--rouge); }
.rond { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--encre); background: transparent; font-family: var(--titre); font-size: 22px; }

/* Connexion */
.ecran-centre { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 24px; text-align: center; }
.ecran-centre h1 { font-family: var(--titre); font-weight: 300; font-size: 56px; }
.ecran-centre p { max-width: 340px; line-height: 1.5; }

/* En-tête */
.entete { display: flex; justify-content: space-between; align-items: center; padding: calc(20px + env(safe-area-inset-top)) 22px 12px; }
.entete-droite { display: flex; gap: 10px; align-items: center; }

/* Bandeau coup de main */
.bandeau-aide { margin: 0 16px 8px; padding: 16px 20px; border-radius: 24px; background: var(--encre); color: var(--fond);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.bandeau-aide .qui { font-family: var(--titre); font-size: 26px; line-height: 1.1; }
.bandeau-aide small { display: block; color: #C0BFBC; font-size: 13px; margin-top: 4px; }
.bandeau-aide .boutons { display: flex; gap: 8px; }
.bandeau-aide button { min-height: 44px; padding: 0 18px; border-radius: 999px; border: none; background: var(--bronze); color: var(--encre); font-weight: 400; }
.bandeau-aide button.clair { background: transparent; border: 1px solid #535250; color: var(--fond); }

/* Contenu */
.contenu { padding: 8px 22px calc(110px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 26px; }
.vue { display: none; flex-direction: column; gap: 14px; }
.vue.active { display: flex; }
.titre-ligne { display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; align-items: center; }

.coup-de-main { width: 100%; min-height: 72px; border: none; border-radius: 999px; background: var(--encre); color: var(--fond);
  display: flex; align-items: center; justify-content: space-between; padding: 0 10px 0 28px; text-align: left; }
.coup-de-main strong { display: block; font-size: 18px; font-weight: 400; }
.coup-de-main small { font-size: 12px; color: #C0BFBC; }
.main-rond { width: 52px; height: 52px; border-radius: 50%; background: var(--bronze); display: flex; align-items: center; justify-content: center; }

.liste { display: flex; flex-direction: column; gap: 10px; }
.vide { color: var(--gris); font-size: 14px; padding: 6px 2px; }

/* Une livraison */
.livraison { background: var(--blanc); border: 1px solid var(--trait); border-radius: 20px; padding: 14px 16px; display: flex; gap: 12px; align-items: center; }
.livraison .infos { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; text-align: left; background: none; border: none; padding: 0; }
.livraison .quoi { font-size: 15px; font-weight: 400; }
.livraison .detail { font-size: 12px; color: var(--gris); }
.livraison .retard { color: var(--rouge); font-weight: 400; }
.livraison .avancer { min-height: 40px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--bronze); background: var(--sable); font-size: 12px; white-space: nowrap; }
.livraison.arrivee { background: var(--encre); color: var(--fond); border-color: var(--encre); }
.livraison.arrivee .detail { color: #C0BFBC; }
.pastille { font-size: 11px; padding: 6px 10px; border-radius: 999px; white-space: nowrap; border: 1px solid #C0BFBC; color: var(--gris-fonce); }

.colonnes { display: flex; flex-direction: column; gap: 18px; }
.colonne { background: var(--sable); border-radius: 24px; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.colonne-tete { display: flex; justify-content: space-between; align-items: center; padding: 0 4px; }
.colonne-tete span:first-child { font-family: var(--titre); font-size: 26px; font-weight: 400; }
.compte { min-width: 32px; height: 32px; border-radius: 999px; border: 1px solid var(--encre); display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 400; }

/* Chantiers et tâches */
.liste-chantiers { display: flex; flex-direction: column; gap: 10px; }
.carte-chantier { width: 100%; text-align: left; background: var(--blanc); border: 1px solid var(--trait); border-radius: 20px; padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; }
.carte-chantier .nom { font-family: var(--titre); font-size: 24px; font-weight: 400; line-height: 1.1; }
.carte-chantier .detail { font-size: 12px; color: var(--gris); }
.carte-chantier .jauge { height: 6px; border-radius: 999px; background: var(--sable); overflow: hidden; }
.carte-chantier .jauge span { display: block; height: 100%; background: var(--bronze); }
.carte-chantier.termine { opacity: 0.6; }
.groupe-titre { font-size: 12px; color: var(--gris-fonce); margin: 6px 2px 0; }
.ligne-tache { display: flex; align-items: center; gap: 10px; background: var(--blanc); border: 1px solid var(--trait); border-radius: 16px; padding: 10px 12px; }
.ligne-tache input[type="checkbox"] { width: 24px; height: 24px; flex-shrink: 0; accent-color: var(--bronze); }
.ligne-tache .texte { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 15px; }
.ligne-tache .texte small { font-size: 12px; color: var(--gris); }
.ligne-tache .texte small.retard { color: var(--rouge); }
.ligne-tache.faite .texte > span { text-decoration: line-through; color: var(--gris); }
.ligne-tache .effacer { border: none; background: none; color: var(--gris); font-size: 18px; min-width: 32px; min-height: 32px; }
.fenetre-chantier { width: min(620px, calc(100vw - 16px)); max-height: calc(100vh - 32px); padding: 0; }
.fenetre-chantier[open] { display: flex; flex-direction: column; }
.chantier-corps { overflow-y: auto; padding: 4px 18px 18px; display: flex; flex-direction: column; gap: 10px; }
.chantier-corps h3 { margin: 10px 0 0; }
.nouvelle-tache { display: flex; flex-direction: column; gap: 8px; }
.ligne-champs { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }
.ligne-champs > * { flex: 1; min-width: 120px; }
.ligne-champs > button { flex: 0 0 auto; }
textarea { font: inherit; font-size: 16px; color: var(--encre); background: var(--blanc); border: 1px solid var(--trait); border-radius: 12px; padding: 10px 12px; width: 100%; resize: vertical; }

/* Planning */
.semaine-nav { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--gris-fonce); }
.petit-rond { min-height: 36px; width: 36px; padding: 0; font-size: 18px; }
.planning-qui { display: flex; flex-wrap: wrap; gap: 8px; }
.planning-qui .qui-pastille { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--gris-fonce); background: var(--blanc); border: 1px solid var(--trait); border-radius: 999px; padding: 4px 10px 4px 4px; }
.planning-qui button.qui-pastille { cursor: pointer; border-color: var(--bronze); background: var(--sable); }
.initiale-p { width: 24px; height: 24px; flex-shrink: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-family: var(--titre); font-size: 15px; }
.couleur-Pierre { background: var(--encre); color: var(--fond); }
.couleur-Stéphane { background: var(--bronze); color: var(--encre); }
.couleur-Léo { background: #C0BFBC; color: var(--encre); }
.planning { display: flex; flex-direction: column; gap: 10px; }
.jour { background: var(--blanc); border: 1px solid var(--trait); border-radius: 20px; padding: 12px 16px; }
.jour.aujourdhui { border-color: var(--bronze); }
.jour-titre { font-family: var(--titre); font-size: 22px; margin-bottom: 4px; }
.evenement { display: flex; gap: 10px; align-items: flex-start; padding: 6px 0; }
.evenement + .evenement { border-top: 1px solid var(--sable); }
.evenement .heure { width: 92px; flex-shrink: 0; font-size: 13px; color: var(--gris-fonce); padding-top: 3px; }
.evenement .texte { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 14px; }
.evenement .texte small { color: var(--gris); font-size: 12px; }
.choix { flex-direction: row !important; align-items: center; gap: 10px !important; font-size: 14px !important; color: var(--encre) !important; }
.choix input { width: auto; }

/* Équipe */
.carte-blanche { background: var(--blanc); border: 1px solid var(--trait); border-radius: 20px; display: flex; flex-direction: column; }
.membre { display: flex; align-items: center; gap: 14px; padding: 14px 18px; }
.membre + .membre { border-top: 1px solid var(--sable); }
.membre .initiale { width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%; background: var(--sable); display: flex; align-items: center; justify-content: center; font-family: var(--titre); font-size: 20px; }
.membre .qui { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.membre .nom { font-size: 15px; font-weight: 400; }
.membre .tache { font-size: 12px; color: var(--gris); }
.membre .lieu { font-size: 12px; color: var(--gris-fonce); }
.ma-tache { display: flex; flex-direction: column; gap: 10px; background: var(--sable); border-radius: 20px; padding: 16px; }
.ma-tache label { font-size: 13px; color: var(--gris-fonce); }
.choix-lieu { display: flex; gap: 8px; flex-wrap: wrap; }
.choix-lieu button { min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid #C0BFBC; background: var(--blanc); }
.choix-lieu button[aria-pressed="true"] { background: var(--encre); color: var(--fond); border-color: var(--encre); }

input, select { font: inherit; font-size: 16px; color: var(--encre); background: var(--blanc); border: 1px solid var(--trait); border-radius: 12px; padding: 10px 12px; width: 100%; }
input:focus, select:focus, button:focus-visible { outline: 2px solid var(--bronze); outline-offset: 1px; }

.membres { display: flex; flex-direction: column; gap: 8px; padding: 12px 0; border-top: 1px solid var(--trait); border-bottom: 1px solid var(--trait); }
.bouton-fichier { display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--encre); font-size: 14px; }
.membre-ligne { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 13px; overflow-wrap: anywhere; }

/* Fenêtres (fiche, coup de main, réglages) */
dialog { border: none; border-radius: 24px; padding: 22px; width: min(440px, calc(100vw - 32px)); background: var(--fond); color: var(--encre); }
dialog::backdrop { background: rgba(28, 28, 26, 0.45); }
dialog form { display: flex; flex-direction: column; gap: 12px; }
dialog h2 { font-family: var(--titre); font-weight: 400; font-size: 30px; }
dialog label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--gris-fonce); }
.fiche-boutons { display: grid; grid-template-columns: auto 1fr auto auto; gap: 8px; margin-top: 6px; }

/* Claude */
.bouton-claude { position: fixed; right: 18px; bottom: calc(92px + env(safe-area-inset-bottom)); z-index: 5; min-height: 52px; padding: 0 20px;
  border: none; border-radius: 999px; background: var(--bronze); color: var(--encre); font-family: var(--titre); font-size: 20px; box-shadow: 0 4px 14px rgba(28,28,26,0.18); }
.fenetre-claude { width: min(560px, calc(100vw - 16px)); height: min(720px, calc(100vh - 32px)); padding: 0; }
.fenetre-claude[open] { display: flex; flex-direction: column; }
.claude-tete { display: flex; justify-content: space-between; align-items: center; padding: 16px 18px 8px; }
.claude-fil { flex: 1; overflow-y: auto; padding: 8px 18px; display: flex; flex-direction: column; gap: 10px; }
.claude-saisie { display: flex; flex-direction: row !important; gap: 8px; padding: 12px; border-top: 1px solid var(--trait); }
.claude-saisie textarea { flex: 1; resize: none; font: 16px var(--texte); border: 1px solid var(--trait); border-radius: 18px; padding: 10px 14px; max-height: 120px; }
.message { max-width: 88%; padding: 10px 14px; border-radius: 16px; font-size: 15px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.message.moi { align-self: flex-end; background: var(--encre); color: var(--fond); }
.message.claude { align-self: flex-start; background: var(--blanc); border: 1px solid var(--trait); }
.message.attente { color: var(--gris); font-style: italic; }
.proposition { align-self: flex-start; max-width: 92%; background: var(--sable); border: 1px solid var(--bronze); border-radius: 16px; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.proposition .boutons { display: flex; gap: 8px; }
.proposition .fait { color: var(--gris-fonce); font-style: italic; }

/* Onglets du téléphone */
.onglets { position: fixed; left: 0; right: 0; bottom: 0; border-top: 1px solid var(--trait); background: var(--fond);
  display: grid; grid-template-columns: repeat(5, 1fr); padding: 6px 4px calc(10px + env(safe-area-inset-bottom)); }
.onglets button { min-height: 56px; border: none; background: transparent; color: var(--gris); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: 11px; }
.onglets button[aria-current="page"] { color: var(--encre); font-weight: 400; }

/* Grand écran (PC, écran mural) : tout visible d'un coup, comme la maquette de l'écran mural */
@media (min-width: 960px) {
  .onglets { display: none; }
  .bouton-claude { bottom: 24px; right: 28px; }
  .entete { padding: 28px 48px 16px; }
  .bandeau-aide { margin: 0 48px 12px; }
  .contenu { padding: 8px 48px 40px; display: grid; grid-template-columns: minmax(0, 2.3fr) minmax(300px, 1fr); grid-template-areas: "jour equipe" "chantiers equipe" "livraisons livraisons" "planning planning"; gap: 28px 36px; align-items: start; }
  #vue-planning { grid-area: planning; }
  #vue-chantiers { grid-area: chantiers; }
  .liste-chantiers { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
  .groupe-titre { grid-column: 1 / -1; }
  .planning { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
  .jour { padding: 10px; min-height: 120px; }
  .jour-titre { font-size: 18px; }
  .evenement { flex-direction: column; gap: 2px; }
  .evenement .heure { width: auto; padding-top: 0; }
  .vue { display: flex; }
  #vue-aujourdhui { grid-area: jour; }
  #vue-livraisons { grid-area: livraisons; }
  #vue-equipe { grid-area: equipe; }
  #titre-a-surveiller, #liste-du-jour { display: none; }
  .titre { font-size: 52px; }
  .colonnes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
  .colonne .livraison { flex-direction: column; align-items: stretch; gap: 10px; }
  .colonne .avancer { align-self: flex-start; }
}