/* Fox Suivi — rouge / noir / blanc FOX MOBILE */
:root {
  --rouge: #d81e1e; --rouge-f: #a81414; --noir: #141414; --gris: #6b6b6b;
  --fond: #f4f2f0; --carte: #fff; --ligne: #e6e2de; --vert: #1f9d55; --orange: #e08a00;
  --rayon: 16px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--fond); color: var(--noir);
  font: 17px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
a { color: var(--rouge-f); }
img, video { max-width: 100%; }
h1 { font-size: 1.55rem; margin: .2em 0 .3em; line-height: 1.2; }
h2 { font-size: 1.2rem; margin: 1.4em 0 .6em; }
h3 { font-size: 1.05rem; margin: 0; }

/* barre du haut */
.barre {
  position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between;
  background: var(--noir); color: #fff; padding: 12px 16px; padding-top: max(12px, env(safe-area-inset-top));
}
.logo { color: #fff; text-decoration: none; font-weight: 800; letter-spacing: .04em; font-size: 1.05rem; }
.logo-fox { background: var(--rouge); padding: 2px 7px; border-radius: 6px; margin-right: 2px; }
.logo small { display: block; font-weight: 400; font-size: .7rem; opacity: .7; letter-spacing: .02em; }
.barre-lien { color: #fff; font-size: .9rem; }
.page { max-width: 640px; margin: 0 auto; padding: 16px 16px 48px; }

/* cartes */
.carte { background: var(--carte); border-radius: var(--rayon); padding: 18px; margin: 0 0 16px; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.doux { color: var(--gris); }
.petit { font-size: .88rem; }
.accueil { text-align: center; margin-top: 24px; }
.accueil .form { text-align: left; }
.accueil-icone { font-size: 2.6rem; }

/* formulaires */
.form { display: grid; gap: 14px; }
.form label { display: grid; gap: 6px; font-weight: 600; font-size: .95rem; }
input, select, textarea {
  font: inherit; width: 100%; padding: 13px 14px; border: 1.5px solid var(--ligne); border-radius: 12px; background: #fff;
}
input:focus, select:focus, textarea:focus { outline: 3px solid rgba(216,30,30,.2); border-color: var(--rouge); }
.coche { display: flex !important; align-items: center; gap: 10px; grid-template-columns: none !important; }
.coche input { width: 24px; height: 24px; accent-color: var(--rouge); }

/* boutons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; text-align: center;
  font: inherit; font-weight: 700; text-decoration: none; border: 0; border-radius: 12px;
  padding: 12px 16px; cursor: pointer; min-height: 48px;
}
.btn-large { min-height: 58px; font-size: 1.08rem; width: 100%; }
.plein { width: 100%; margin-bottom: 12px; }
.btn-rouge { background: var(--rouge); color: #fff; }
.btn-rouge:active { background: var(--rouge-f); }
.btn-noir { background: var(--noir); color: #fff; }
.btn-vert { background: var(--vert); color: #fff; }
.btn-gris { background: #e9e6e3; color: var(--noir); }
.btn-blanc { background: #fff; color: var(--noir); border: 1.5px solid var(--ligne); }
.btn:disabled { opacity: .6; }
.lien { background: none; border: 0; padding: 6px 0; font: inherit; font-size: .9rem; color: var(--rouge-f); text-decoration: underline; cursor: pointer; }
.lien.rouge { color: var(--rouge); }
.deux, .trois { display: grid; gap: 10px; }
.deux { grid-template-columns: 1fr 1fr; }
.trois { grid-template-columns: repeat(3, 1fr); margin-top: 12px; }
.trois .btn { font-size: .88rem; padding: 10px 6px; }

/* gros bouton photo */
.btn-photo {
  display: flex !important; align-items: center; justify-content: center; text-align: center;
  min-height: 92px; border: 2.5px dashed var(--rouge); border-radius: var(--rayon); background: #fff5f5;
  color: var(--rouge-f); font-size: 1.15rem !important; font-weight: 800 !important; cursor: pointer; position: relative;
}
.btn-photo-2 { min-height: 64px; border-color: var(--gris); background: #fafafa; color: var(--noir); font-size: 1rem !important; }
.btn-photo input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.btn-photo.choisi { border-style: solid; background: #effaf3; border-color: var(--vert); color: var(--vert); }
.apercu { display: flex; flex-wrap: wrap; gap: 8px; }
.apercu:empty { display: none; }
.apercu img { width: 76px; height: 76px; object-fit: cover; border-radius: 10px; }

/* alertes */
.alerte { background: #fdecec; color: var(--rouge-f); padding: 12px 14px; border-radius: 12px; }
.ok { color: var(--vert); font-weight: 700; }
.pastille { background: #fff; border-radius: 12px; padding: 10px 14px; text-align: center; }
.pastille.ok { background: #effaf3; }

/* résumé + progression */
.resume h1 { margin-bottom: 8px; }
.etat-actuel { font-size: 1.25rem; font-weight: 800; display: flex; align-items: center; gap: 8px; }
.etat-actuel span { font-size: 1.6rem; }
.progres { height: 14px; background: #eee; border-radius: 99px; overflow: hidden; margin-top: 12px; }
.progres > div { height: 100%; background: linear-gradient(90deg, var(--rouge), #ff5a3c); border-radius: 99px; transition: width .6s; }
.progres-txt { text-align: right; margin: 4px 0 0; font-weight: 700; color: var(--rouge-f); }

/* frise des étapes */
.frise { position: relative; }
.etape { display: grid; grid-template-columns: 48px 1fr; gap: 12px; padding-bottom: 18px; position: relative; }
.etape::before { content: ""; position: absolute; left: 23px; top: 48px; bottom: 0; width: 2px; background: var(--ligne); }
.etape:last-child::before { display: none; }
.etape-icone {
  width: 48px; height: 48px; border-radius: 50%; background: #fff; display: grid; place-items: center;
  font-size: 1.4rem; box-shadow: 0 1px 3px rgba(0,0,0,.1); position: relative; z-index: 1;
}
.etape-anomalie .etape-icone { background: #fff4e0; }
.etape-finie .etape-icone { background: #effaf3; }
.etape-corps { background: #fff; border-radius: var(--rayon); padding: 12px 14px; box-shadow: 0 1px 3px rgba(0,0,0,.05); min-width: 0; }
.etape-corps time { display: block; color: var(--gris); font-size: .85rem; }
.etape-corps p { margin: 6px 0 0; }
.medias { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; margin-top: 10px; }
.medias:empty { display: none; }
.medias img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; display: block; }
.medias video { grid-column: 1 / -1; width: 100%; border-radius: 10px; background: #000; }
.pdf { grid-column: 1 / -1; display: block; background: #f6f4f2; padding: 12px; border-radius: 10px; font-weight: 700; text-decoration: none; color: var(--noir); }

/* avant / après */
.avant-apres { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.avant-apres figure { margin: 0; }
.avant-apres img { width: 100%; aspect-ratio: 3/4; object-fit: cover; border-radius: 12px; }
.avant-apres figcaption { text-align: center; font-weight: 700; margin-top: 4px; }

/* devis */
.devis { border: 2.5px solid var(--orange); }
canvas.signature { width: 100%; height: auto; aspect-ratio: 600 / 360; border: 2px dashed #bbb; border-radius: 12px; background: #fff; touch-action: none; }
.sig-img { max-width: 260px; border: 1px solid var(--ligne); border-radius: 8px; background: #fff; }
.pret { border: 2.5px solid var(--vert); }
.pied-page { text-align: center; font-size: .85rem; margin-top: 24px; }
.bandeau-staff { display: block; background: var(--noir); color: #fff; text-align: center; padding: 12px; border-radius: 12px; margin-bottom: 12px; text-decoration: none; font-weight: 700; }

/* atelier */
.haut-atelier { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px; }
.recherche { display: flex; gap: 8px; margin: 4px 0 6px; }
.recherche input { flex: 1; min-width: 0; }
.legende { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 12px; font-size: .8rem; }
.legende span { padding: 3px 10px; border-radius: 99px; border-left: 5px solid; background: #fff; }
.liste { display: grid; gap: 8px; }
.ligne {
  display: flex; align-items: center; gap: 12px; background: #fff; border-radius: 14px; padding: 12px 14px;
  text-decoration: none; color: var(--noir); border-left: 6px solid #ccc; box-shadow: 0 1px 3px rgba(0,0,0,.05);
}
.ligne-icone { font-size: 1.5rem; }
.ligne-txt { flex: 1; min-width: 0; display: grid; }
.ligne-txt small { color: var(--gris); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ligne-etat { font-size: .82rem; font-weight: 700; text-align: right; max-width: 40%; }
.g-cours { border-color: #3b82f6 !important; }
.g-attente { border-color: var(--orange) !important; }
.g-pret { border-color: var(--vert) !important; }
.g-relance { border-color: var(--rouge) !important; background: #fff5f5 !important; }
.g-relance .ligne-etat { color: var(--rouge); }
.g-fini { border-color: #bbb !important; opacity: .7; }

.grille-etapes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.tuile {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 92px;
  background: #fff; border-radius: var(--rayon); text-decoration: none; color: var(--noir); font-weight: 700;
  text-align: center; padding: 10px; box-shadow: 0 1px 3px rgba(0,0,0,.08); border: 2px solid transparent; font-size: .95rem;
}
.tuile span { font-size: 1.8rem; }
.tuile:active { border-color: var(--rouge); }
.tuile-faite { background: #f3f9f5; color: #3d5e48; }
.tuile-finie { background: var(--vert); color: #fff; grid-column: 1 / -1; }
.cache-client summary { font-weight: 700; cursor: pointer; }
.cache-client .form { margin-top: 12px; }
.titre-etape { display: flex; align-items: center; gap: 10px; }
.titre-etape span { font-size: 2rem; }
.puces { display: grid; gap: 8px; }
.puce { display: flex !important; align-items: center; gap: 10px; background: #fff8eb; border: 1.5px solid #f2d39a; border-radius: 12px; padding: 12px; font-weight: 700; }
.puce input { width: 22px; height: 22px; accent-color: var(--orange); }
details summary { cursor: pointer; }
details textarea { margin-top: 8px; }

/* QR à imprimer */
.ticket { background: #fff; max-width: 320px; margin: 16px auto; padding: 18px; text-align: center; border: 1px dashed #bbb; border-radius: 12px; }
.ticket-logo { margin: 0 0 10px; }
.ticket-titre { font-weight: 800; font-size: 1.1rem; margin: 10px 0 4px; }
.qr { display: flex; justify-content: center; }
.etiquette { background: #fff; max-width: 320px; margin: 0 auto; display: flex; gap: 12px; align-items: center; padding: 10px; border: 1px dashed #bbb; border-radius: 12px; }

@media (min-width: 560px) { .grille-etapes { grid-template-columns: repeat(3, 1fr); } }
@media print {
  .barre, .pas-impression { display: none !important; }
  body { background: #fff; }
  .page { padding: 0; }
  .ticket, .etiquette { border: 1px dashed #999; page-break-inside: avoid; }
}
.bon-etat { margin: -6px 0 0; font-size: .9rem; }
.bon-etat:empty { display: none; }
.bon-etat.ok { color: var(--vert); }
.bon-etat.alerte { padding: 8px 12px; }

/* v3 : logo + étapes en une colonne */
.logo { display: flex; align-items: center; gap: 10px; }
.logo-img { width: 40px; height: 40px; border-radius: 50%; flex: none; }
.grille-etapes { grid-template-columns: 1fr !important; gap: 8px; }
.tuile { flex-direction: row; justify-content: flex-start; min-height: 60px; gap: 12px; padding: 10px 16px; text-align: left; font-size: 1rem; }
.tuile span { font-size: 1.6rem; width: 34px; text-align: center; }
.tuile b { flex: 1; }
.tuile i { font-style: normal; font-size: .8rem; opacity: .75; }
.tuile-faite { background: #eef6f1; color: #3d5e48; }
.tuile-option { background: #fffaf0; }
.tuile-prochaine { background: var(--rouge); color: #fff; min-height: 72px; font-size: 1.1rem; box-shadow: 0 3px 10px rgba(216,30,30,.35); }
.tuile-prochaine i { opacity: 1; font-weight: 700; }
.tuile-finie { grid-column: auto; }
.tuile-finie.tuile-prochaine { background: var(--vert); box-shadow: 0 3px 10px rgba(31,157,85,.35); }

.note-photos { text-align: center; font-size: .85rem; background: #fff; border-radius: 12px; padding: 10px 14px; margin-top: 16px; }

.consentement { border: 2.5px solid var(--vert); }
.consentement h2 { margin-top: 0; }
.efface { grid-column: 1 / -1; background: #f3f1ef; color: var(--gris); border: 1.5px dashed #ccc; border-radius: 10px; padding: 12px; text-align: center; font-size: .9rem; }
.bandeau-ok { border: 2.5px solid var(--vert); }
.apercu-msg { background: #f2fbf5; border-radius: 10px; padding: 10px 12px; font-size: .9rem; }
.arret-msg { text-align: center; }
.cgu h2 { font-size: 1.05rem; margin: 1.2em 0 .3em; }
.cgu p, .cgu li { font-size: .95rem; }

/* v6 : vignettes avec ✕, espace de stockage */
.apercu .vignette { position: relative; width: 76px; height: 76px; }
.apercu .vignette img { width: 76px; height: 76px; object-fit: cover; border-radius: 10px; }
.vignette-fichier { display: grid; place-items: center; background: #f3f1ef; border-radius: 10px; font-size: 1.8rem; }
.retirer { position: absolute; top: -6px; right: -6px; width: 26px; height: 26px; border-radius: 50%; border: 0; background: var(--noir); color: #fff; font-size: .8rem; cursor: pointer; }
.btn-photo .compte { display: block; font-size: .85rem; font-weight: 600; }
.ajout-fichier { margin-top: 8px; }
.ajout-fichier summary { font-size: .85rem; color: var(--rouge-f); }
.ajout-fichier form { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.ajout-fichier input[type=file] { flex: 1; min-width: 180px; padding: 8px; font-size: .85rem; }
.stockage { font-size: .8rem; }

.media-case{position:relative;display:block}
.media-case:has(video){grid-column:1/-1}
.suppr-media{position:absolute;top:4px;right:4px;margin:0}
.suppr-media button{width:30px;height:30px;border-radius:50%;border:0;background:rgba(0,0,0,.7);color:#fff;font-size:15px;line-height:30px;padding:0;cursor:pointer}

.puces-liens{display:flex;flex-wrap:wrap;gap:6px}
.puces-liens .btn{width:auto;padding:8px 12px;font-size:14px}

.vu{display:inline-block;margin-top:4px;padding:2px 8px;border-radius:20px;font-size:13px;font-weight:600}
.vu-oui{background:#e6f6ea;color:#1b7a36}
.vu-non{background:#fdeaea;color:#c21818}