/* Charte ARES CONTROLE : bleu marine (#052F61) et noir, fond blanc, sobre. */
:root {
  --marine: #052f61; --marine-fonce: #031f42; --marine-pale: #eef2f8; --marine-moyen: #d5deec;
  --noir: #0d1117; --gris: #5a6676; --bord: #d6dce6; --fond: #ffffff; --fond-doux: #f6f8fb;
  --rouge: #b3261e; --rouge-pale: #fdf0ef; --ambre: #8a5300; --ambre-pale: #fff6e5;
  --vert: #1e6b43; --vert-pale: #edf7f1;
}
* { box-sizing: border-box; }
html { font-size: 17px; }
body {
  margin: 0; background: var(--fond-doux); color: var(--noir);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; line-height: 1.45;
  -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent;
}
#app { max-width: 620px; margin: 0 auto; min-height: 100vh; padding: 0 18px 120px; background: var(--fond); box-shadow: 0 0 0 1px var(--bord); }

/* logo et accueil */
.logo { display: block; height: 64px; width: auto; margin: 0 auto; }
.accueil { text-align: center; padding: 36px 0 20px; }
.accueil .logo { height: 96px; }
.accueil.petit { padding: 22px 0 4px; }
.accueil.petit .logo { height: 56px; }
.sous-logo { color: var(--gris); margin: 14px 0 0; font-size: .95rem; letter-spacing: .02em; }

/* en-tete des ecrans */
header.haut { position: sticky; top: 0; z-index: 5; background: var(--fond); padding: 12px 0 10px; border-bottom: 2px solid var(--marine); margin: 0 -18px; padding-left: 18px; padding-right: 18px; }
header.haut .ligne { display: flex; align-items: center; gap: 10px; }
header.haut h1 { font-size: 1.05rem; font-weight: 700; margin: 0; flex: 1; color: var(--marine); letter-spacing: .01em; }
.retour { font: inherit; font-size: 1.7rem; line-height: 1; width: 44px; height: 44px; border-radius: 10px; border: 1px solid var(--bord); background: var(--fond); color: var(--marine); cursor: pointer; }
.progression { height: 5px; background: var(--marine-moyen); border-radius: 3px; margin-top: 10px; overflow: hidden; }
.progression > div { height: 100%; background: var(--marine); transition: width .2s; }
.etape { color: var(--gris); font-size: .8rem; margin-top: 5px; letter-spacing: .03em; text-transform: uppercase; }
.reseau { font-size: .75rem; color: var(--gris); padding: 3px 9px; border: 1px solid var(--bord); border-radius: 999px; white-space: nowrap; }
.reseau.hors { color: var(--rouge); border-color: var(--rouge); font-weight: 700; }

h2 { font-size: 1.3rem; margin: 24px 0 14px; color: var(--noir); font-weight: 700; letter-spacing: -.005em; }
.carte { background: var(--fond); border: 1px solid var(--bord); border-radius: 12px; padding: 16px; margin: 14px 0; }

/* champs */
.champ { margin: 22px 0; }
.champ > .libelle { margin-bottom: 8px; }
.champ label { font-weight: 600; }
.requis label::after { content: " *"; color: var(--marine); }
.aide { color: var(--gris); font-size: .85rem; margin-top: 6px; }
input[type=text], input[type=number], input[type=date], input[type=password], textarea, select {
  width: 100%; font: inherit; color: var(--noir); background: var(--fond);
  border: 1.5px solid var(--bord); border-radius: 10px; padding: 12px 14px; min-height: 52px;
}
textarea { min-height: 104px; resize: vertical; }
select { appearance: none; -webkit-appearance: none; padding-right: 40px; background-repeat: no-repeat; background-position: right 14px center; background-size: 14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23052F61' stroke-width='2'/%3E%3C/svg%3E"); }
input:focus, textarea:focus, select:focus, button:focus-visible, .fichier-bouton:focus-within { outline: 3px solid var(--marine-moyen); outline-offset: 1px; border-color: var(--marine); }
.avec-unite { display: flex; align-items: center; gap: 10px; }
.avec-unite span { font-weight: 600; color: var(--gris); }

/* reponses toutes faites sous un champ numerique (Inconnu, Non declare) */
.puces { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.puce { font: inherit; font-size: .9rem; font-weight: 600; min-height: 40px; padding: 6px 16px; border-radius: 999px; border: 1.5px solid var(--bord); background: var(--fond); color: var(--marine); cursor: pointer; }
.puce[aria-pressed=true] { background: var(--marine); border-color: var(--marine); color: #fff; }

/* choix : boutons larges */
.choix { display: flex; flex-wrap: wrap; gap: 8px; }
.choix button, .bouton {
  font: inherit; font-weight: 600; min-height: 50px; padding: 10px 16px; border-radius: 10px;
  border: 1.5px solid var(--bord); background: var(--fond); color: var(--noir); cursor: pointer;
}
.choix button { flex: 1 1 auto; }
.yesno button { flex: 1 1 0; }
.choix button[aria-pressed=true] { background: var(--marine); border-color: var(--marine); color: #fff; }
.choix button.nv[aria-pressed=true] { background: var(--gris); border-color: var(--gris); }

/* choix multiples : liste a cocher, defauts groupes */
.choix.liste { flex-direction: column; gap: 0; border: 1px solid var(--bord); border-radius: 12px; overflow: hidden; }
.choix.liste .groupe { background: var(--marine-pale); color: var(--marine); font-weight: 700; font-size: .85rem; padding: 9px 14px; letter-spacing: .02em; text-transform: uppercase; border-top: 1px solid var(--bord); }
.choix.liste .groupe:first-child { border-top: 0; }
.choix.liste button { display: flex; align-items: flex-start; gap: 12px; text-align: left; border: 0; border-top: 1px solid var(--bord); border-radius: 0; font-weight: 500; background: var(--fond); color: var(--noir); width: 100%; padding: 12px 14px; }
.choix.liste .groupe + button { border-top: 0; }
.choix.liste button[aria-pressed=true] { background: var(--marine-pale); color: var(--noir); }
.case { flex: 0 0 24px; height: 24px; margin-top: 1px; border: 2px solid var(--gris); border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; font-size: 1rem; font-weight: 800; color: #fff; background: var(--fond); }
button[aria-pressed=true] .case { background: var(--marine); border-color: var(--marine); }
.texte { flex: 1; }
.motif { display: block; margin-top: 3px; font-weight: 500; color: var(--marine); font-size: .8rem; }
.proposition { margin-top: 8px; font-size: .85rem; color: var(--marine); background: var(--marine-pale); border-radius: 8px; padding: 8px 12px; }
.lien { font: inherit; font-weight: 700; color: var(--marine); background: none; border: 0; padding: 0 0 0 4px; text-decoration: underline; cursor: pointer; }

/* boutons */
.bouton.principal { background: var(--marine); border-color: var(--marine); color: #fff; }
.bouton.plein { width: 100%; }
.bouton.discret { border-color: transparent; background: transparent; color: var(--marine); }
.bouton.danger { color: var(--rouge); border-color: var(--rouge); }
.confirmation { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px; font-size: .95rem; }
.confirmation .petit-bouton { margin-top: 0; }
.petit-bouton { min-height: 38px; padding: 6px 14px; margin-top: 6px; font-size: .9rem; }
.bouton[disabled] { opacity: .4; cursor: not-allowed; }
.bas { position: fixed; left: 0; right: 0; bottom: 0; z-index: 6; background: var(--fond); border-top: 1px solid var(--bord); padding: 10px 18px calc(10px + env(safe-area-inset-bottom)); }
.bas .interne { max-width: 584px; margin: 0 auto; display: flex; gap: 10px; }
.bas .bouton { flex: 1; }

/* listes d'accueil */
.liste-grosse { list-style: none; padding: 0; margin: 0; }
.liste-grosse li { margin: 10px 0; }
.liste-grosse button:not(.bouton) { position: relative; width: 100%; text-align: left; display: block; padding: 16px 40px 16px 18px; font: inherit; background: var(--fond); color: var(--noir); border: 1.5px solid var(--bord); border-left: 5px solid var(--marine); border-radius: 12px; cursor: pointer; }
.liste-grosse button b { display: block; font-size: 1.05rem; color: var(--marine); }
.liste-grosse button small { color: var(--gris); }
.fleche { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font-size: 1.6rem; color: var(--marine); }
.pied-liens { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 28px; padding-top: 14px; border-top: 1px solid var(--bord); }
.pied-liens .reseau { margin-left: auto; }
.pied-liens .bouton { white-space: nowrap; padding-left: 10px; padding-right: 10px; }

/* messages */
.message { padding: 12px 14px; border-radius: 10px; margin: 14px 0; border: 1px solid; }
.message.erreur { background: var(--rouge-pale); color: var(--rouge); border-color: #f0c4c0; }
.message.alerte { background: var(--ambre-pale); color: var(--ambre); border-color: #f0d9a8; }
.message.ok { background: var(--vert-pale); color: var(--vert); border-color: #bfe0cd; }
.message ul { margin: 6px 0 0 18px; padding: 0; }
.etapes-mail p { margin: 0 0 8px; }
.etapes-mail a.bouton { display: flex; align-items: center; justify-content: center; text-decoration: none; margin-top: 4px; }
.badge { display: inline-block; background: var(--marine); color: #fff; border-radius: 999px; padding: 1px 10px; font-size: .8rem; font-weight: 700; }

/* photos */
.boutons-photo { display: flex; gap: 8px; flex-wrap: wrap; }
.vignettes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.vignettes figure { margin: 0; position: relative; }
.vignettes img { width: 96px; height: 96px; object-fit: cover; border-radius: 10px; border: 1.5px solid var(--bord); display: block; }
.vignettes button { position: absolute; top: -8px; right: -8px; width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid var(--rouge); background: #fff; color: var(--rouge); font-weight: 700; cursor: pointer; }
.fichier-bouton { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; }
.fichier-bouton input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }

/* recapitulatif */
.recap-ligne { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--bord); }
.recap-ligne:last-child { border-bottom: 0; }
.recap-ligne span:first-child { color: var(--gris); }
.avis-carte { border-left: 5px solid var(--marine); background: var(--marine-pale); }
.avis-carte b { display: block; font-size: 1.1rem; color: var(--marine); margin: 4px 0; }
.petit { color: var(--gris); font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; }
.centre { text-align: center; padding-top: 20px; }
.pastille { width: 76px; height: 76px; border-radius: 50%; background: var(--marine); color: #fff; font-size: 2.4rem; display: flex; align-items: center; justify-content: center; margin: 22px auto 0; }
.pastille.ok { background: var(--vert); }

/* bouton accueil, indicateur reseau, logo client, version */
.accueil-haut { flex: none; width: 44px; height: 44px; border-radius: 10px; border: 1px solid var(--bord); background: var(--fond); color: var(--marine); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.accueil-haut:active, .retour:active { background: var(--marine-pale); }
.point-reseau { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--vert); }
.liste-grosse button.avec-logo { display: flex; align-items: center; gap: 14px; padding-left: 14px; }
.logo-client { flex: none; width: 112px; height: auto; border-radius: 6px; border: 1px solid var(--bord); display: block; }
.info { flex: 1; min-width: 0; }
.info .badge { margin-top: 6px; }
.version { text-align: center; color: var(--gris); font-size: .8rem; margin: 22px 0 6px; letter-spacing: .03em; }

/* liste d'elements repetes (ouvrages) */
.item { background: var(--fond-doux); }
.item-tete { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.item-tete b { color: var(--marine); }
.item .champ { margin: 14px 0; }
.repeat .puces { margin-top: 14px; }

/* listes d'elements (equipements, ouvrages...) */
.item-tete { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; flex-wrap: wrap; }
.item-tete small { display: block; color: var(--gris); font-weight: 400; margin-top: 2px; }
.item-tete .actions { display: flex; gap: 6px; flex-wrap: wrap; }
.item-tete .petit-bouton { margin-top: 0; }
.choix.compact button { min-height: 38px; padding: 6px 12px; font-size: .92rem; }
.gps-msg { margin-top: 6px; }

/* mes rapports : par client, puis par jour ; une carte par rapport et ses versions */
.client-rapports h2 { display: flex; align-items: center; gap: 10px; color: var(--marine); border-bottom: 2px solid var(--marine-moyen); padding-bottom: 6px; }
.compte { font-size: .8rem; font-weight: 700; color: var(--marine); background: var(--marine-pale); border-radius: 999px; padding: 2px 10px; }
.jour { font-size: .8rem; font-weight: 700; color: var(--gris); text-transform: uppercase; letter-spacing: .04em; margin: 18px 0 6px; }
.liste-rapports { list-style: none; padding: 0; margin: 0; }
.rapport { border-left: 5px solid var(--marine); margin: 10px 0; }
.rapport .titre { font-weight: 700; color: var(--marine); overflow-wrap: anywhere; }
.rapport small { display: block; color: var(--gris); margin-top: 2px; }
.rapport a { color: var(--marine); font-weight: 600; }
.rapport.attente { border-left-color: var(--ambre); }
.rapport.attente .titre { color: var(--ambre); }
.sur-tel { color: var(--vert); font-weight: 600; }
.lien[disabled] { opacity: .4; cursor: not-allowed; text-decoration: none; }
.versions { margin-top: 8px; font-size: .9rem; color: var(--gris); }
.versions .lien { padding: 0 6px 0 2px; }
.actions-rapport { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.actions-rapport .bouton { flex: 1 1 auto; min-height: 44px; padding: 8px 12px; font-size: .92rem; }
.centre + .actions-rapport { margin-top: 22px; }
.retour-action .message { margin: 10px 0 0; font-size: .9rem; }

/* photos prises depuis l'appli : nom et position GPS */
.bouton.avec-icone { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.vignettes figure.nommee { width: 132px; }
.vignettes figure.nommee img { width: 132px; height: 99px; }
.vignettes figcaption { margin-top: 4px; font-size: .78rem; line-height: 1.25; }
.vignettes figcaption small { display: block; color: var(--gris); }
.vignettes .nom-photo { position: static; width: auto; height: auto; border-radius: 0; font: inherit; font-weight: 600; color: var(--marine); background: none; border: 0; padding: 2px 0; text-align: left; text-decoration: underline dotted; cursor: pointer; overflow-wrap: anywhere; }
.feuille-fond { position: fixed; inset: 0; z-index: 20; background: rgba(5, 15, 30, .55); display: flex; align-items: flex-end; justify-content: center; }
.feuille { background: var(--fond); width: 100%; max-width: 620px; max-height: 94vh; overflow: auto; border-radius: 16px 16px 0 0; padding: 18px 18px calc(18px + env(safe-area-inset-bottom)); }
.feuille h2 { margin: 0 0 12px; font-size: 1.15rem; }
.feuille .champ { margin: 16px 0 10px; }
.apercu { position: relative; width: fit-content; max-width: 100%; margin: 0 auto; }
.apercu img { display: block; max-width: 100%; max-height: 42vh; border-radius: 10px; }
.apercu figcaption { position: absolute; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, .6); color: #fff; padding: 6px 10px; border-radius: 0 0 10px 10px; font-size: .78rem; line-height: 1.3; }
.apercu figcaption b { display: block; font-size: .9rem; }
.feuille-boutons { display: flex; gap: 10px; margin-top: 12px; }
.feuille-boutons .bouton { flex: 1; }
#annonce { position: fixed; left: 50%; bottom: 90px; transform: translate(-50%, 16px); opacity: 0; transition: opacity .2s, transform .2s; background: var(--noir); color: #fff; padding: 10px 16px; border-radius: 999px; font-size: .9rem; z-index: 30; pointer-events: none; max-width: 90vw; text-align: center; }
#annonce.visible { opacity: 1; transform: translate(-50%, 0); }

/* mot de passe avec bouton Afficher */
.avec-oeil { display: flex; gap: 8px; align-items: center; }
.avec-oeil input { flex: 1; min-width: 0; }
.avec-oeil .bouton { flex: 0 0 auto; margin-top: 0; min-height: 48px; }

/* version et nouveautes */
.version .lien { font-size: inherit; font-weight: 600; padding: 0; }
.bandeau-version { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.bandeau-version span { display: block; font-size: .9rem; }
.bandeau-version .actions { display: flex; gap: 6px; }
.notes-version h2 { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; color: var(--marine); border-bottom: 2px solid var(--marine-moyen); padding-bottom: 6px; }
.notes-version h2 small { font-size: .85rem; font-weight: 600; color: var(--gris); }
.notes-version ul { padding-left: 20px; margin: 10px 0 18px; }
.notes-version li { margin: 6px 0; line-height: 1.45; }