/* ============================================================
   app.css - Cotoon Publisher
   Design mobile-first, tons naturels / artisanal
   ============================================================ */

/* ---- Variables ---- */
:root {
  --ecru:        #faf8f5;
  --ecru-moyen:  #f0ebe3;
  --ecru-bord:   #e0d8cc;
  --beige:       #c4a882;
  --beige-clair: #d9c9b4;
  --miel:        #b8924a;
  --brun:        #8b7355;
  --brun-fonce:  #3d2b1f;
  --brun-texte:  #5a4232;
  --vert:        #6b8c6b;
  --rouge:       #a94442;
  --blanc:       #ffffff;

  --rayon:       12px;
  --rayon-grand: 20px;
  --ombre:       0 2px 16px rgba(61, 43, 31, 0.10);
  --ombre-legere: 0 1px 6px rgba(61, 43, 31, 0.07);

  --font: -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --transition: 0.22s ease;
}

/* ---- Reset de base ---- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

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

body {
  font-family: var(--font);
  background-color: var(--ecru);
  color: var(--brun-texte);
  min-height: 100dvh;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* ---- Utilitaires ---- */
.cache { display: none !important; }
.actif { display: flex !important; }

/* ---- Ecrans (SPA) ---- */
.ecran {
  display: none;
  flex-direction: column;
  min-height: 100dvh;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  padding: 0 0 env(safe-area-inset-bottom, 16px);
}

/* ============================================================
   CONNEXION
   ============================================================ */
#ecran-connexion {
  align-items: center;
  justify-content: center;
  padding: 24px 20px;
}

.connexion-wrap {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}

/* Logo */
.logo {
  text-align: center;
}

.logo-img {
  display: block;
  width: 100%;
  max-width: 220px;
  height: auto;
  margin: 0 auto;
}

.logo-slogan {
  margin-top: 14px;
  font-size: 14px;
  font-style: italic;
  color: var(--brun);
  letter-spacing: 0.03em;
}

/* Carte generique */
.carte {
  width: 100%;
  background: var(--blanc);
  border-radius: var(--rayon-grand);
  padding: 28px 24px;
  box-shadow: var(--ombre);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.mention {
  font-size: 12px;
  color: var(--beige);
  letter-spacing: 0.08em;
  text-align: center;
}

/* ============================================================
   EN-TETE FORMULAIRE
   ============================================================ */
.entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 20px 12px;
  position: sticky;
  top: 0;
  background: var(--ecru);
  z-index: 10;
  border-bottom: 1px solid var(--ecru-bord);
}

.entete-titre {
  font-size: 20px;
  font-weight: 500;
  color: var(--brun-fonce);
  letter-spacing: 0.02em;
}

.btn-discret {
  background: none;
  border: none;
  color: var(--beige);
  font-size: 22px;
  cursor: pointer;
  padding: 6px;
  border-radius: 8px;
  transition: color var(--transition), background var(--transition);
}

.btn-discret:hover,
.btn-discret:active {
  color: var(--brun);
  background: var(--ecru-moyen);
}

/* ============================================================
   FORMULAIRE
   ============================================================ */
.formulaire {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px 16px 32px;
}

.section-carte {
  background: var(--blanc);
  border-radius: var(--rayon-grand);
  padding: 20px 18px;
  box-shadow: var(--ombre-legere);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.section-titre {
  font-size: 15px;
  font-weight: 600;
  color: var(--brun-fonce);
  letter-spacing: 0.03em;
  display: flex;
  align-items: center;
  gap: 8px;
}

.badge-requis {
  font-size: 11px;
  font-weight: 400;
  color: var(--brun);
  background: var(--ecru-moyen);
  border-radius: 20px;
  padding: 2px 8px;
}

/* Champs */
.champ-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--brun);
  display: block;
  margin-bottom: -6px;
}

.champ-aide {
  font-weight: 400;
  color: var(--beige);
  font-size: 11px;
}

.champ-input {
  width: 100%;
  padding: 13px 14px;
  border: 1.5px solid var(--ecru-bord);
  border-radius: var(--rayon);
  font-size: 16px; /* 16px pour eviter le zoom iOS */
  font-family: var(--font);
  color: var(--brun-fonce);
  background: var(--ecru);
  transition: border-color var(--transition), box-shadow var(--transition);
  appearance: none;
  -webkit-appearance: none;
}

.champ-input:focus {
  outline: none;
  border-color: var(--brun);
  box-shadow: 0 0 0 3px rgba(139, 115, 85, 0.15);
  background: var(--blanc);
}

.champ-input::placeholder {
  color: var(--beige-clair);
}

.champ-input.invalide {
  border-color: var(--rouge);
}

/* Select */
.champ-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238b7355' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
  cursor: pointer;
}

/* Groupe de champs cote a cote */
.champ-groupe {
  display: flex;
  gap: 12px;
}

.champ-moitie {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Champ avec prefixe CHF */
.champ-prefixe-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.champ-prefixe {
  position: absolute;
  left: 14px;
  font-size: 14px;
  font-weight: 600;
  color: var(--brun);
  pointer-events: none;
  z-index: 1;
}

.champ-avec-prefixe {
  padding-left: 46px;
}

/* Textarea */
.champ-textarea {
  resize: vertical;
  min-height: 80px;
}

.compteur-caracteres {
  font-size: 11px;
  color: var(--beige);
  text-align: right;
  margin-top: -6px;
}

/* ============================================================
   ZONE PHOTOS
   ============================================================ */
.zone-photos {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.apercu-photos {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.apercu-photo {
  position: relative;
  width: calc(33.33% - 8px);
  aspect-ratio: 1;
  border-radius: 10px;
  overflow: hidden;
  background: var(--ecru-moyen);
  box-shadow: var(--ombre-legere);
}

.apercu-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.apercu-photo-supprimer {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(61, 43, 31, 0.75);
  color: var(--blanc);
  border: none;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.btn-photo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 16px;
  border: 2px dashed var(--beige-clair);
  border-radius: var(--rayon);
  background: var(--ecru-moyen);
  color: var(--brun);
  font-size: 15px;
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
}

.btn-photo:hover,
.btn-photo:active {
  border-color: var(--brun);
  background: var(--ecru-bord);
}

.btn-photo-icone {
  font-size: 26px;
  font-weight: 300;
  line-height: 1;
  color: var(--brun);
}

.btn-photo-texte {
  font-weight: 500;
}

/* ============================================================
   BOUTONS
   ============================================================ */
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 16px 24px;
  border: none;
  border-radius: var(--rayon);
  font-family: var(--font);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition), opacity var(--transition), transform var(--transition);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

.btn-principal {
  background: var(--brun);
  color: var(--blanc);
}

.btn-principal:hover {
  background: var(--brun-fonce);
}

.btn-principal:active {
  transform: scale(0.98);
}

.btn-principal:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.btn-secondaire {
  background: var(--ecru-moyen);
  color: var(--brun);
  border: 1.5px solid var(--ecru-bord);
}

.btn-secondaire:hover {
  background: var(--ecru-bord);
}

.btn-grand {
  padding: 18px 24px;
  font-size: 17px;
  border-radius: var(--rayon-grand);
}

.btn-texte { flex: 1; text-align: center; }
.btn-spinner { font-size: 18px; animation: tourner 1s linear infinite; }

@keyframes tourner {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ============================================================
   MESSAGES D'ERREUR
   ============================================================ */
.message-erreur {
  background: #fdf0f0;
  border: 1px solid #f0cccc;
  border-radius: var(--rayon);
  color: var(--rouge);
  font-size: 14px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ============================================================
   ECRAN PROGRESSION
   ============================================================ */
#ecran-progression {
  align-items: stretch;
}

.progression-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 48px 20px 32px;
  gap: 24px;
  flex: 1;
}

.logo-mini {
  font-size: 28px;
  color: var(--brun);
  opacity: 0.5;
}

.logo-icon-mini {
  display: block;
}

.progression-titre {
  font-size: 22px;
  font-weight: 400;
  color: var(--brun-fonce);
  text-align: center;
}

.progression-sous-titre {
  font-size: 13px;
  color: var(--beige);
  text-align: center;
  margin-top: -16px;
}

/* Etapes */
.etapes {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.etape {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: var(--rayon);
  background: var(--blanc);
  opacity: 0.45;
  transition: opacity var(--transition), background var(--transition);
}

.etape.en-cours {
  opacity: 1;
  background: var(--ecru-moyen);
  box-shadow: var(--ombre-legere);
}

.etape.termine {
  opacity: 0.85;
}

.etape.erreur {
  opacity: 1;
  background: #fdf0f0;
}

.etape-icone {
  font-size: 22px;
  width: 36px;
  text-align: center;
  flex-shrink: 0;
}

.etape-info {
  flex: 1;
}

.etape-nom {
  font-size: 14px;
  font-weight: 600;
  color: var(--brun-fonce);
}

.etape-desc {
  font-size: 12px;
  color: var(--beige);
  margin-top: 1px;
}

.etape-statut {
  font-size: 18px;
  flex-shrink: 0;
  width: 28px;
  text-align: center;
}

.etape.en-cours .etape-statut {
  animation: tourner 1.2s linear infinite;
}

.etape.termine .etape-statut::before {
  content: "✓";
  color: var(--vert);
  animation: none;
}

.etape.erreur .etape-statut::before {
  content: "✗";
  color: var(--rouge);
  animation: none;
}

/* ============================================================
   ECRAN CONFIRMATION
   ============================================================ */
#ecran-confirmation {
  align-items: stretch;
}

.confirmation-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 64px 24px 40px;
  gap: 20px;
  flex: 1;
}

.succes-icone {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--vert);
  color: var(--blanc);
  font-size: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(107, 140, 107, 0.35);
  animation: apparaitre 0.4s ease;
}

@keyframes apparaitre {
  from { transform: scale(0.5); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}

.confirmation-titre {
  font-size: 26px;
  font-weight: 300;
  color: var(--brun-fonce);
  letter-spacing: 0.04em;
}

.confirmation-sous-titre {
  font-size: 15px;
  color: var(--brun);
  text-align: center;
  margin-top: -10px;
}

.confirmation-carte {
  width: 100%;
  gap: 6px;
}

.confirmation-nom {
  font-size: 17px;
  font-weight: 600;
  color: var(--brun-fonce);
  text-align: center;
}

.confirmation-meta {
  font-size: 15px;
  color: var(--brun);
  text-align: center;
}

/* ============================================================
   RESPONSIVE - tablettes et plus grand
   ============================================================ */
@media (min-width: 480px) {
  .ecran {
    padding-top: 24px;
  }

  .formulaire {
    padding: 16px 20px 40px;
  }

  .apercu-photo {
    width: 100px;
  }
}

/* ============================================================
   Safe area pour iPhone avec notch
   ============================================================ */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .formulaire {
    padding-bottom: calc(32px + env(safe-area-inset-bottom));
  }
}