/* =============================================================================
   Play Contrôle — habillage Bootstrap 5 (charte orange / noir)
   Les couleurs sont définies une seule fois ici, en variables CSS.
   ============================================================================= */

:root {
  --pc-orange:       #F26522;
  --pc-orange-dark:  #D14E10;
  --pc-orange-soft:  #FFF1E8;
  --pc-black:        #14161A;
  --pc-black-soft:   #1E2228;
  --pc-grey:         #6B7280;
  --pc-grey-light:   #F4F5F7;
  --pc-border:       #E3E6EA;

  --bs-primary:      #F26522;
  --bs-primary-rgb:  242, 101, 34;
  --bs-link-color:   #D14E10;
  --bs-link-hover-color: #14161A;
  --bs-body-color:   #23272F;
  --bs-body-bg:      #F7F8FA;
  --bs-border-color: #E3E6EA;
}

body {
  background: var(--bs-body-bg);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* --- Marque ---------------------------------------------------------------- */
.pc-brand {
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #fff;
  text-decoration: none;
  font-size: 1.15rem;
}
.pc-brand span { color: var(--pc-orange); }
.pc-brand--dark { color: var(--pc-black); }

/* --- Barre de navigation --------------------------------------------------- */
.pc-navbar {
  background: var(--pc-black);
  border-bottom: 3px solid var(--pc-orange);
}
.pc-navbar .nav-link {
  color: rgba(255, 255, 255, .78);
  font-weight: 500;
  padding: .5rem .85rem;
  border-radius: .4rem;
}
.pc-navbar .nav-link:hover,
.pc-navbar .nav-link:focus { color: #fff; background: rgba(255, 255, 255, .08); }
.pc-navbar .nav-link.active { color: #fff; background: var(--pc-orange); }
.pc-navbar .dropdown-menu { border: 1px solid var(--pc-border); box-shadow: 0 12px 28px rgba(0,0,0,.12); }

/* --- Cartes et blocs ------------------------------------------------------- */
.card {
  border: 1px solid var(--pc-border);
  border-radius: .65rem;
  box-shadow: 0 1px 2px rgba(20, 22, 26, .04);
}
.card-header {
  background: #fff;
  border-bottom: 1px solid var(--pc-border);
  font-weight: 600;
}
.pc-section-title {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--pc-grey);
}

/* Tuiles du tableau de bord */
.pc-tile {
  display: block;
  padding: 1rem 1.15rem;
  border-radius: .65rem;
  background: #fff;
  border: 1px solid var(--pc-border);
  border-left: 4px solid var(--pc-orange);
  text-decoration: none;
  color: inherit;
  height: 100%;
  transition: transform .12s ease, box-shadow .12s ease;
}
.pc-tile:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(20,22,26,.08); color: inherit; }
.pc-tile__value { font-size: 2rem; font-weight: 700; line-height: 1.1; color: var(--pc-black); }
.pc-tile__label { color: var(--pc-grey); font-size: .9rem; }

/* --- Boutons --------------------------------------------------------------- */
.btn-primary {
  --bs-btn-bg: var(--pc-orange);
  --bs-btn-border-color: var(--pc-orange);
  --bs-btn-hover-bg: var(--pc-orange-dark);
  --bs-btn-hover-border-color: var(--pc-orange-dark);
  --bs-btn-active-bg: var(--pc-orange-dark);
  --bs-btn-active-border-color: var(--pc-orange-dark);
  --bs-btn-disabled-bg: var(--pc-orange);
  --bs-btn-disabled-border-color: var(--pc-orange);
  font-weight: 600;
}
.btn-outline-primary {
  --bs-btn-color: var(--pc-orange-dark);
  --bs-btn-border-color: var(--pc-orange);
  --bs-btn-hover-bg: var(--pc-orange);
  --bs-btn-hover-border-color: var(--pc-orange);
  --bs-btn-active-bg: var(--pc-orange-dark);
  --bs-btn-active-border-color: var(--pc-orange-dark);
  font-weight: 600;
}
.btn-dark {
  --bs-btn-bg: var(--pc-black);
  --bs-btn-border-color: var(--pc-black);
  --bs-btn-hover-bg: #000;
  --bs-btn-hover-border-color: #000;
}
.text-bg-primary { background-color: var(--pc-orange) !important; }

/* --- Formulaires ----------------------------------------------------------- */
.form-control:focus, .form-select:focus, .form-check-input:focus {
  border-color: var(--pc-orange);
  box-shadow: 0 0 0 .2rem rgba(242, 101, 34, .18);
}
.form-check-input:checked {
  background-color: var(--pc-orange);
  border-color: var(--pc-orange);
}
.form-label { font-weight: 600; font-size: .9rem; }
.required::after { content: " *"; color: var(--pc-orange-dark); }

/* --- Progression du formulaire de demande ---------------------------------- */
.pc-steps { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; padding: 0; margin: 0 0 1.25rem; }
.pc-steps li {
  flex: 1 1 auto;
  min-width: 120px;
  padding: .5rem .7rem;
  border-radius: .5rem;
  background: #fff;
  border: 1px solid var(--pc-border);
  font-size: .82rem;
  color: var(--pc-grey);
}
.pc-steps li .pc-steps__num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.4rem; height: 1.4rem; margin-right: .4rem;
  border-radius: 50%; background: var(--pc-grey-light); color: var(--pc-grey);
  font-weight: 700; font-size: .75rem;
}
.pc-steps li.is-done { border-color: var(--pc-orange); color: var(--pc-black); }
.pc-steps li.is-done .pc-steps__num { background: var(--pc-orange-soft); color: var(--pc-orange-dark); }
.pc-steps li.is-current { background: var(--pc-black); border-color: var(--pc-black); color: #fff; }
.pc-steps li.is-current .pc-steps__num { background: var(--pc-orange); color: #fff; }

/* Choix « combien de sites ? » : grandes cibles tactiles */
.pc-choice { display: flex; flex-wrap: wrap; gap: .6rem; }
.pc-choice input { position: absolute; opacity: 0; pointer-events: none; }
.pc-choice label {
  min-width: 4.5rem; padding: .85rem 1.1rem; text-align: center;
  border: 2px solid var(--pc-border); border-radius: .6rem; background: #fff;
  font-weight: 600; cursor: pointer; transition: all .12s ease;
}
.pc-choice input:checked + label { border-color: var(--pc-orange); background: var(--pc-orange-soft); color: var(--pc-orange-dark); }
.pc-choice input:focus-visible + label { box-shadow: 0 0 0 .2rem rgba(242,101,34,.25); }

/* Carte d'un site dans le formulaire */
.pc-site-card { border-left: 4px solid var(--pc-orange); }
.pc-site-card .card-header { background: var(--pc-orange-soft); }

/* Cases à cocher « types d'installation » façon boutons */
.pc-toggle-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: .55rem; }
.pc-toggle {
  display: flex; align-items: center; gap: .6rem;
  padding: .7rem .85rem; border: 2px solid var(--pc-border); border-radius: .55rem;
  background: #fff; cursor: pointer; font-weight: 500;
}
.pc-toggle:has(input:checked) { border-color: var(--pc-orange); background: var(--pc-orange-soft); }
.pc-toggle input { margin: 0; }

/* --- Sauvegarde automatique ------------------------------------------------ */
.pc-autosave {
  font-size: .82rem;
  color: var(--pc-grey);
  min-height: 1.2rem;
}
.pc-autosave.is-saving { color: var(--pc-orange-dark); }

/* --- Tableaux -------------------------------------------------------------- */
.table > :not(caption) > * > * { padding: .7rem .75rem; }
.table thead th {
  font-size: .78rem; text-transform: uppercase; letter-spacing: .04em;
  color: var(--pc-grey); border-bottom-width: 1px;
}
.pc-table-link { text-decoration: none; font-weight: 600; color: var(--pc-black); }
.pc-table-link:hover { color: var(--pc-orange-dark); }

/* --- Divers ---------------------------------------------------------------- */
.pc-empty {
  padding: 2.5rem 1rem; text-align: center; color: var(--pc-grey);
  border: 1px dashed var(--pc-border); border-radius: .65rem; background: #fff;
}
.pc-auth-wrap { min-height: 100vh; display: flex; align-items: center; background: var(--pc-black); }
.pc-auth-card { max-width: 460px; width: 100%; margin: 2rem auto; }
.pc-footer { color: var(--pc-grey); font-size: .85rem; }

/* Interface terrain : cibles larges sur mobile et tablette (§45) */
@media (max-width: 991.98px) {
  .btn { padding: .6rem 1rem; }
  .form-control, .form-select { min-height: 2.85rem; font-size: 1rem; }
  .pc-choice label { min-width: 4rem; padding: 1rem; }
}

/* =============================================================================
   Saisie terrain (§45, §47) — grosses cibles, lecture rapide sur tablette
   ========================================================================== */
.pc-check__label { flex: 1 1 300px; font-size: .95rem; line-height: 1.35; }
.pc-check__answers { display: flex; flex-wrap: wrap; gap: .3rem; }
.pc-check__answers .btn { min-width: 3.2rem; font-weight: 700; }
.pc-check:last-child { border-bottom: 0 !important; }

@media (max-width: 767.98px) {
  .pc-check__answers { width: 100%; }
  .pc-check__answers .btn { flex: 1 1 auto; padding: .6rem .4rem; font-size: .95rem; }
}

/* Planning */
.pc-planning { display: grid; gap: .5rem; }
.pc-planning__day {
  background: #fff; border: 1px solid var(--pc-border); border-radius: .55rem;
  padding: .65rem .75rem; min-height: 86px;
}
.pc-planning__day--off { background: var(--pc-grey-light); }
.pc-planning__date { font-size: .78rem; font-weight: 700; color: var(--pc-grey); text-transform: uppercase; }
.pc-planning__item {
  display: block; margin-top: .4rem; padding: .4rem .5rem; border-radius: .35rem;
  background: var(--pc-orange-soft); border-left: 3px solid var(--pc-orange);
  font-size: .8rem; text-decoration: none; color: inherit;
}
.pc-planning__item:hover { background: #ffe4d3; color: inherit; }
@media (min-width: 768px) {
  .pc-planning--semaine { grid-template-columns: repeat(7, 1fr); }
  .pc-planning--mois { grid-template-columns: repeat(7, 1fr); }
}

/* Carte des interventions */
#pc-map { height: 460px; border-radius: .55rem; border: 1px solid var(--pc-border); }

/* Vignettes de photos */
.pc-thumb {
  width: 92px; height: 92px; object-fit: cover; border-radius: .4rem;
  border: 1px solid var(--pc-border);
}