/* ============================================================
   styles.css — Thème « roadtrip » chaleureux (app sœur Cap Natashquan)
   Mobile-first · gros boutons (gants) · contraste élevé (soleil)
   ============================================================ */

:root {
  --pin:      #1f4d3a;   /* vert forêt profond */
  --pin-clr:  #2e6b50;
  --cream:    #f6efe0;   /* crème chaud */
  --sable:    #eaddc4;
  --ambre:    #e08b2d;   /* orange coucher de soleil */
  --ambre-fc: #c9761d;
  --rouille:  #b34724;
  --danger:   #c0392b;
  --danger-bg:#fbe3df;
  --ok:       #2e7d4f;
  --ok-bg:    #e2f2e6;
  --warn:     #d99413;
  --warn-bg:  #fcf1d8;
  --texte:    #2a241c;
  --gris:     #7b7263;
  --ombre:    0 3px 10px rgba(31,77,58,.14);
  --rayon:    16px;
  --safe-bot: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; }
body {
  font-family: -apple-system, "Segoe UI", Roboto, system-ui, sans-serif;
  background: var(--cream);
  color: var(--texte);
  font-size: 17px;
  line-height: 1.4;
  padding-bottom: calc(74px + var(--safe-bot));
}

h1, h2, h3 { margin: 0 0 .5rem; }
h2 { font-size: 1.4rem; }
small { color: var(--gris); font-weight: 400; }
.aide { color: var(--gris); font-size: .9rem; margin: .3rem 0; }
.ref { color: var(--gris); font-size: .8rem; }
.vide { color: var(--gris); text-align: center; padding: 1.5rem; }

/* --- En-tête --- */
.app-header {
  position: sticky; top: 0; z-index: 20;
  background: var(--pin); color: var(--cream);
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(env(safe-area-inset-top,0px) + .7rem) 1rem .7rem;
  box-shadow: var(--ombre);
}
.logo { font-size: 1.25rem; font-weight: 800; letter-spacing: .3px; }
.header-btn {
  background: rgba(255,255,255,.15); border: none; color: var(--cream);
  font-size: 1.3rem; width: 44px; height: 44px; border-radius: 12px;
}

/* --- Vue --- */
.vue { padding: 1rem; max-width: 640px; margin: 0 auto; }
.chargement { text-align: center; color: var(--gris); padding: 2rem; }

/* --- Cartes --- */
.carte {
  background: #fff; border-radius: var(--rayon); padding: 1.1rem;
  box-shadow: var(--ombre); margin-bottom: 1rem;
  border: 1px solid var(--sable);
}
.carte.grande { text-align: center; padding: 1.6rem 1.1rem; }
.carte-ok       { border-left: 6px solid var(--ok); }
.carte-attention{ border-left: 6px solid var(--ambre); }
.carte-danger   { border-left: 6px solid var(--danger); background: var(--danger-bg); }
.carte-info     { background: var(--sable); }
.etat-icone { font-size: 3rem; line-height: 1; }

/* --- Boutons --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  width: 100%; margin-top: .6rem; padding: .95rem 1rem;
  font-size: 1.05rem; font-weight: 700;
  border: 2px solid var(--pin); border-radius: 14px;
  background: #fff; color: var(--pin); cursor: pointer;
  min-height: 52px;
}
.btn:active { transform: scale(.98); }
.btn-primaire { background: var(--ambre); border-color: var(--ambre-fc); color: #fff; }
.btn-danger   { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn-gros     { font-size: 1.2rem; padding: 1.1rem; min-height: 60px; }
.btn-mini     { width: auto; margin: 0; padding: .5rem .9rem; font-size: .9rem; min-height: 40px; }
.btn-lien     { border: none; background: none; color: var(--ambre-fc); width: auto; text-decoration: underline; padding: .3rem; min-height: 0; }
.btn-photo    { background: var(--sable); border-color: var(--sable); color: var(--texte); }

/* --- Bandeau danger « NE PAS PARTIR » --- */
.bandeau-danger {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  background: var(--danger); color: #fff; text-align: center;
  font-weight: 800; padding: .8rem; font-size: 1.05rem;
  animation: clignote 1.2s infinite;
}
.bandeau-danger.statique { position: static; margin-bottom: 1rem; border-radius: 12px; animation: none; }
@keyframes clignote { 50% { background: #8f2b1f; } }

/* --- Stats (dashboard) --- */
.grille-stats { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; margin-bottom: 1rem; }
.grille-stats.deux { grid-template-columns: 1fr 1fr; }
.stat {
  background: #fff; border-radius: var(--rayon); padding: 1rem .6rem;
  text-align: center; box-shadow: var(--ombre); border: 1px solid var(--sable);
}
.stat-attention { background: var(--warn-bg); border-color: var(--warn); }
.stat-nombre { font-size: 2rem; font-weight: 800; color: var(--pin); }
.stat-label  { font-size: .82rem; color: var(--gris); }

/* --- Lignes rappel / listes --- */
.ligne-rappel {
  display: flex; justify-content: space-between; align-items: center;
  padding: .7rem 0; border-bottom: 1px solid var(--sable); gap: .5rem;
}
.ligne-rappel:last-child { border-bottom: none; }
.ligne-rappel.detaille { align-items: flex-start; }
.rp-nom { font-weight: 700; }
.rp-info { font-size: .85rem; color: var(--gris); }
.rp-droite { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; }
.pastille { font-size: .75rem; font-weight: 700; padding: .25rem .55rem; border-radius: 20px; white-space: nowrap; }
.p-retard { background: var(--danger-bg); color: var(--danger); }
.p-bientot{ background: var(--warn-bg); color: var(--warn); }
.p-ok     { background: var(--ok-bg); color: var(--ok); }
.conso-badge { background: var(--pin); color: #fff; padding: .3rem .6rem; border-radius: 10px; font-weight: 700; font-size: .85rem; }

/* --- Ronde : progression + zone --- */
.ronde-entete { position: sticky; top: 60px; background: var(--cream); padding-bottom: .6rem; z-index: 10; }
.progress-bar { height: 8px; background: var(--sable); border-radius: 8px; overflow: hidden; }
.progress-fill { height: 100%; background: var(--ambre); transition: width .3s; }
.ronde-zone-titre { display: flex; align-items: center; gap: .7rem; margin-top: .7rem; }
.zone-picto { font-size: 2rem; }
.zone-nom { font-size: 1.25rem; font-weight: 800; color: var(--pin); }
.zone-compteur { font-size: .8rem; color: var(--gris); }

/* --- Items de la ronde --- */
.items { margin-top: .5rem; }
.item {
  background: #fff; border-radius: var(--rayon); padding: 1rem;
  box-shadow: var(--ombre); margin-bottom: .8rem; border: 1px solid var(--sable);
  border-left: 6px solid var(--sable);
}
.item.etat-ok      { border-left-color: var(--ok); }
.item.etat-mineure { border-left-color: var(--warn); }
.item.etat-majeure { border-left-color: var(--danger); }
.item.etat-na      { border-left-color: var(--gris); opacity: .75; }
.item-tete { display: flex; gap: .7rem; }
.item-picto { font-size: 1.6rem; flex-shrink: 0; }
.item-nom { font-weight: 800; font-size: 1.1rem; }
.item-comment { font-size: .92rem; color: var(--gris); margin: .2rem 0; }
.item-meta { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; margin-top: .35rem; }

.badge { font-size: .7rem; font-weight: 700; padding: .2rem .5rem; border-radius: 20px; }
.badge-maj  { background: var(--danger-bg); color: var(--danger); }
.badge-min  { background: var(--warn-bg); color: var(--warn); }
.badge-ok   { background: var(--ok-bg); color: var(--ok); }
.badge-verif{ background: #e8e0f0; color: #6a4c93; }

/* Boutons d'état — gros, gantés */
.item-boutons { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; margin-top: .9rem; }
.etat-btn {
  padding: .8rem 0; font-size: 1.5rem; border: 2px solid var(--sable);
  border-radius: 12px; background: #fbf7ee; cursor: pointer; min-height: 56px;
}
.etat-btn.b-na { font-size: 1rem; font-weight: 800; color: var(--gris); }
.etat-btn.actif { transform: scale(1.05); }
.b-ok.actif  { background: var(--ok-bg); border-color: var(--ok); }
.b-min.actif { background: var(--warn-bg); border-color: var(--warn); }
.b-maj.actif { background: var(--danger-bg); border-color: var(--danger); }
.b-na.actif  { background: #e9e5dd; border-color: var(--gris); }

.item-defaut { margin-top: .8rem; padding-top: .8rem; border-top: 1px dashed var(--sable); }
.item-defaut[hidden] { display: none; }
textarea, .defaut-note {
  width: 100%; min-height: 70px; padding: .7rem; font-size: 1rem;
  border: 2px solid var(--sable); border-radius: 12px; font-family: inherit; resize: vertical;
}
.defaut-photo-zone { display: flex; align-items: center; gap: .6rem; margin-top: .5rem; }
.defaut-photo-zone .btn { margin-top: 0; width: auto; }
.photo-etat { font-size: .85rem; color: var(--ok); font-weight: 700; }

.ronde-nav { display: flex; gap: .7rem; margin-top: 1rem; }
.ronde-nav .btn { margin-top: 0; }
.ronde-nav > span { flex: 1; }
.ronde-nav .btn { flex: 1; }

/* --- Champs formulaire --- */
.champ { display: block; margin-bottom: .9rem; }
.champ span { display: block; font-weight: 700; margin-bottom: .3rem; }
.input-gros {
  width: 100%; padding: .9rem; font-size: 1.1rem;
  border: 2px solid var(--sable); border-radius: 12px; font-family: inherit;
}
.form-inline { display: flex; flex-direction: column; gap: .6rem; }
.form-inline .btn { margin-top: 0; }
.select-gros { padding: .7rem; font-size: 1.05rem; border-radius: 12px; border: 2px solid var(--sable); background: #fff; }

.ligne-reglage {
  display: flex; justify-content: space-between; align-items: center;
  gap: 1rem; padding: .9rem 0; border-bottom: 1px solid var(--sable);
}
.ligne-reglage:last-of-type { border-bottom: none; }
.switch { width: 52px; height: 30px; }

/* --- Cartes liste (registre) --- */
.carte-liste { cursor: pointer; }
.carte-liste-plate { background:#fff; border:1px solid var(--sable); border-radius: var(--rayon); padding: .9rem; margin-bottom:.7rem; }
.r-ok  { border-left: 6px solid var(--ok); }
.r-min { border-left: 6px solid var(--warn); }
.r-maj { border-left: 6px solid var(--danger); }
.cl-tete { display: flex; align-items: center; gap: .7rem; }
.cl-ico { font-size: 1.5rem; }
.cl-titre { font-weight: 800; }
.cl-sous { font-size: .85rem; color: var(--gris); }
.cl-fleche { margin-left: auto; font-size: 1.6rem; color: var(--gris); }
.cl-badges { display: flex; gap: .4rem; margin-top: .6rem; flex-wrap: wrap; }
.def-note { background: var(--cream); padding: .6rem; border-radius: 10px; margin: .6rem 0; font-size: .92rem; }
.def-repare { color: var(--ok); font-weight: 700; margin-top: .5rem; }
.def-photos { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: .5rem; }
.def-photos figure { margin: 0; }
.def-photos img { width: 120px; height: 90px; object-fit: cover; border-radius: 10px; border: 2px solid var(--sable); }
.def-photos figcaption { font-size: .75rem; text-align: center; color: var(--gris); }

/* --- Onglets secondaires --- */
.onglets-sec { display: flex; gap: .5rem; margin-bottom: 1rem; }
.onglet-sec { flex: 1; padding: .8rem; border: 2px solid var(--sable); background: #fff; border-radius: 12px; font-weight: 700; font-size: .95rem; }
.onglet-sec.actif { background: var(--pin); color: #fff; border-color: var(--pin); }
.sec-titre { margin: 1.2rem 0 .6rem; color: var(--pin); }
.carte-tete-btn { display: flex; justify-content: space-between; align-items: center; margin-bottom: .5rem; }
.carte-tete-btn .btn { margin-top: 0; }

/* --- Graphique conso --- */
.graphique { width: 100%; height: auto; }
.g-axe { stroke: var(--sable); stroke-width: 1.5; }
.g-ligne { fill: none; stroke: var(--ambre); stroke-width: 2.5; stroke-linejoin: round; }
.g-point { fill: var(--pin); }
.g-txt { font-size: 9px; fill: var(--gris); }

/* --- Barre d'onglets --- */
.tabbar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 30;
  display: grid; grid-template-columns: repeat(5, 1fr);
  background: #fff; border-top: 1px solid var(--sable);
  padding-bottom: var(--safe-bot); box-shadow: 0 -2px 10px rgba(0,0,0,.06);
}
.tab {
  border: none; background: none; padding: .55rem 0 .45rem;
  font-size: .72rem; font-weight: 700; color: var(--gris);
  display: flex; flex-direction: column; align-items: center; gap: .15rem;
}
.tab span { font-size: 1.45rem; }
.tab.actif { color: var(--pin); }
.tab.actif span { transform: translateY(-2px); }

/* --- Toast --- */
.toast {
  position: fixed; bottom: calc(84px + var(--safe-bot)); left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--pin); color: #fff; padding: .8rem 1.3rem;
  border-radius: 30px; font-weight: 700; z-index: 100;
  opacity: 0; transition: all .3s; box-shadow: var(--ombre);
}
.toast.visible { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ============================================================
   FICHE IMPRIMABLE
   ============================================================ */
.fiche { background: #fff; padding: 1.2rem; border-radius: var(--rayon); box-shadow: var(--ombre); }
.f-banniere { text-align: center; font-weight: 800; padding: .8rem; border-radius: 10px; margin-bottom: 1rem; font-size: 1.1rem; }
.f-ok     { background: var(--ok-bg); color: var(--ok); }
.f-warn   { background: var(--warn-bg); color: var(--warn); }
.f-danger { background: var(--danger-bg); color: var(--danger); }
.f-entete h1 { font-size: 1.4rem; color: var(--pin); }
.f-meta { display: grid; grid-template-columns: 1fr 1fr; gap: .3rem; font-size: .9rem; margin: .8rem 0; }
.f-resume { background: var(--cream); padding: .6rem; border-radius: 10px; font-size: .9rem; }
.f-zone { color: var(--pin); margin-top: 1.2rem; font-size: 1.05rem; border-bottom: 2px solid var(--sable); padding-bottom: .3rem; }
.f-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.f-table td { padding: .4rem .3rem; border-bottom: 1px solid #eee; vertical-align: top; }
.f-etat { white-space: nowrap; font-weight: 700; width: 90px; }
.f-ref { text-align: right; color: var(--gris); font-size: .78rem; white-space: nowrap; }
.f-note { color: var(--rouille); font-size: .85rem; margin-top: .2rem; }
.f-mineure { background: #fffaf0; }
.f-majeure { background: #fdf0ee; }
.f-pied { margin-top: 1.5rem; font-size: .78rem; color: var(--gris); text-align: center; border-top: 1px solid var(--sable); padding-top: .6rem; }
.fiche-actions { display: flex; gap: .7rem; margin-top: 1rem; }
.fiche-actions .btn { margin-top: 0; }

@media print {
  .app-header, .tabbar, .no-print, .toast, .bandeau-danger { display: none !important; }
  body { background: #fff; padding: 0; }
  .vue { padding: 0; max-width: none; }
  .fiche { box-shadow: none; border-radius: 0; }
  .f-mineure, .f-majeure { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* Écrans larges (tablette / bureau) */
@media (min-width: 700px) {
  .f-meta { grid-template-columns: 1fr 1fr 1fr; }
}