/* ============================================
   theme.css — pointage.app
   Couleurs et style propres à chaque client.
   Pour COZI : bordeaux, jaune, teal, orange.
   v1.1
   ============================================ */

:root {
  --couleur-principale:   #A3215A;
  --couleur-secondaire:   #D4A017;
  --couleur-accent:       #2A9D8F;
  --couleur-orange:       #E76F1F;

  --gris-fonce:           #2C2C2C;
  --gris-moyen:           #6B6B6B;
  --gris-clair:           #F2F2F2;
  --blanc:                #FFFFFF;

  --couleur-succes:       #2ECC71;
  --couleur-erreur:       #E74C3C;
  --couleur-attente:      #F39C12;
  --couleur-info:         #3498DB;

  --font-titre:           'Montserrat', sans-serif;
  --font-corps:           'Open Sans', sans-serif;

  --taille-xs:            0.75rem;
  --taille-sm:            0.875rem;
  --taille-base:          1rem;
  --taille-md:            1.125rem;
  --taille-lg:            1.5rem;
  --taille-xl:            2rem;

  --espace-xs:            0.25rem;
  --espace-sm:            0.5rem;
  --espace-md:            1rem;
  --espace-lg:            1.5rem;
  --espace-xl:            2rem;

  --rayon-sm:             6px;
  --rayon-md:             12px;
  --rayon-lg:             20px;

  --ombre-legere:         0 2px 8px rgba(0,0,0,0.08);
  --ombre-moyenne:        0 4px 16px rgba(0,0,0,0.12);
  --ombre-forte:          0 8px 32px rgba(0,0,0,0.18);

  --transition:           0.2s ease;
  --header-bg:            #8A8A8A;
  --header-hauteur:       140px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; -webkit-text-size-adjust: 100%; }

body {
  font-family:      var(--font-corps);
  font-size:        var(--taille-base);
  color:            var(--gris-fonce);
  background-color: var(--gris-clair);
  min-height:       100vh;
  line-height:      1.6;
}

/* ---- BARRE COULEURS ---- */
.barre-couleurs { display: flex; height: 6px; width: 100%; }
.barre-couleurs span:nth-child(1) { background: var(--couleur-principale); flex: 2; }
.barre-couleurs span:nth-child(2) { background: var(--couleur-secondaire); flex: 1.5; }
.barre-couleurs span:nth-child(3) { background: var(--couleur-accent);     flex: 1.5; }
.barre-couleurs span:nth-child(4) { background: var(--couleur-orange);     flex: 1; }

/* ---- HEADER ---- */
.header {
  background-color: var(--header-bg);
  padding:          var(--espace-lg) var(--espace-md);
  text-align:       center;
}
.header-logo  { height: 60px; width: auto; margin-bottom: var(--espace-sm); }
.header-titre {
  font-family:  var(--font-titre);
  font-size:    var(--taille-lg);
  font-weight:  700;
  color:        var(--blanc);
  margin-top:   var(--espace-sm);
}

/* ---- CONTENEUR ---- */
.conteneur { max-width: 480px; margin: 0 auto; padding: var(--espace-lg) var(--espace-md); }

/* ---- CARTE ---- */
.carte {
  background:     var(--blanc);
  border-radius:  var(--rayon-md);
  padding:        var(--espace-lg);
  box-shadow:     var(--ombre-legere);
  margin-bottom:  var(--espace-md);
}

/* ---- FORMULAIRE ---- */
.champ { margin-bottom: var(--espace-md); }
.champ label {
  display:        block;
  font-size:      var(--taille-sm);
  font-weight:    600;
  color:          var(--gris-moyen);
  margin-bottom:  var(--espace-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.champ input,
.champ select,
.champ textarea {
  width:          100%;
  padding:        0.75rem var(--espace-md);
  border:         1.5px solid #DEDEDE;
  border-radius:  var(--rayon-sm);
  font-family:    var(--font-corps);
  font-size:      var(--taille-base);
  color:          var(--gris-fonce);
  background:     var(--blanc);
  transition:     border-color var(--transition), box-shadow var(--transition);
  appearance:     none;
}
.champ input:focus,
.champ select:focus,
.champ textarea:focus {
  outline:     none;
  border-color: var(--couleur-principale);
  box-shadow:  0 0 0 3px rgba(163,33,90,0.12);
}
.champ textarea { resize: vertical; min-height: 80px; }

/* ---- BOUTONS ---- */
.btn {
  display:        block;
  width:          100%;
  padding:        0.875rem var(--espace-md);
  border:         none;
  border-radius:  var(--rayon-sm);
  font-family:    var(--font-titre);
  font-size:      var(--taille-md);
  font-weight:    700;
  cursor:         pointer;
  transition:     background var(--transition), transform var(--transition);
  text-align:     center;
  letter-spacing: 0.03em;
}
.btn:active { transform: scale(0.98); }
.btn-principal { background: var(--couleur-principale); color: var(--blanc); }
.btn-principal:hover { background: #8A1A4A; }
.btn-secondaire { background: var(--gris-clair); color: var(--gris-fonce); }
.btn-secondaire:hover { background: #E0E0E0; }
.btn-succes { background: var(--couleur-succes); color: var(--blanc); }

/* ---- STATUTS ---- */
.statut {
  display:     flex;
  align-items: center;
  gap:         var(--espace-sm);
  font-size:   var(--taille-sm);
  color:       var(--gris-moyen);
  margin-top:  var(--espace-sm);
}
.statut-point { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.statut-point.en-ligne   { background: var(--couleur-succes); }
.statut-point.hors-ligne { background: var(--couleur-erreur); }
.statut-point.attente    { background: var(--couleur-attente); }

.badge {
  display:     inline-flex;
  align-items: center;
  gap:         var(--espace-xs);
  padding:     var(--espace-xs) var(--espace-sm);
  border-radius: 20px;
  font-size:   var(--taille-xs);
  font-weight: 600;
}
.badge-succes  { background: #D4EFDF; color: #1A7A40; }
.badge-erreur  { background: #FADBD8; color: #A93226; }
.badge-attente { background: #FDEBD0; color: #A04000; }
.badge-info    { background: #D6EAF8; color: #1A5276; }

/* ---- BANNIÈRE MAJ ---- */
.banniere-maj {
  display:     none;
  background:  var(--couleur-secondaire);
  color:       var(--blanc);
  padding:     var(--espace-sm) var(--espace-md);
  text-align:  center;
  font-size:   var(--taille-sm);
  font-weight: 600;
  cursor:      pointer;
}
.banniere-maj.visible { display: block; }

/* ---- SÉLECTEUR LANGUE ---- */
.selecteur-langue {
  display:         flex;
  justify-content: flex-end;
  gap:             var(--espace-sm);
  padding:         var(--espace-sm) var(--espace-md);
}
.langue-btn {
  background:    none;
  border:        1.5px solid transparent;
  border-radius: var(--rayon-sm);
  padding:       2px 8px;
  font-size:     var(--taille-xs);
  font-weight:   700;
  cursor:        pointer;
  color:         var(--gris-moyen);
  transition:    all var(--transition);
}
.langue-btn.actif,
.langue-btn:hover { border-color: var(--couleur-principale); color: var(--couleur-principale); }

/* ---- LOADER ---- */
.loader {
  width: 36px; height: 36px;
  border: 3px solid var(--gris-clair);
  border-top-color: var(--couleur-principale);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin: 0 auto;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- FICHE ITEM (historique) ---- */
.fiche-item {
  padding:       var(--espace-sm) 0;
  border-bottom: 1px solid var(--gris-clair);
  display:       flex;
  justify-content: space-between;
  align-items:   flex-start;
  gap:           var(--espace-sm);
}
.fiche-item:last-child { border-bottom: none; }
.fiche-item-chantier { font-weight: 600; font-size: var(--taille-sm); }
.fiche-item-detail   { font-size: var(--taille-xs); color: var(--gris-moyen); margin-top: 2px; }
.fiche-item-heures   { font-weight: 700; color: var(--couleur-principale); }
.fiche-verrouillee   { opacity: 0.5; font-size: var(--taille-xs); }

.btn-modifier {
  background: none;
  border:     1px solid var(--gris-moyen);
  border-radius: var(--rayon-sm);
  padding:    2px 8px;
  font-size:  var(--taille-xs);
  cursor:     pointer;
  color:      var(--gris-moyen);
}
.btn-modifier:hover { border-color: var(--couleur-principale); color: var(--couleur-principale); }

/* ---- RESPONSIVE ---- */
@media (max-width: 480px) {
  .conteneur { padding: var(--espace-md) var(--espace-sm); }
  .carte     { padding: var(--espace-md); }
}