/* style.css - Styles de base */
/* ========== POLICES PERSONNALISÉES ========== */

/* On importe les styles thématique des theme.css */
:root {
  --app-bg: linear-gradient(160deg, #0b252f 0%, #0e303d 100%);
  --primary-gradient: linear-gradient(160deg, #0b252f 0%, #0e303d 100%);
  --secundary-gradient: linear-gradient(160deg, #0e303d 0%, #014055 100%);
  --primary-text: #0b252f;
}

/* =========================================== */

@font-face {
  font-family: 'Amperzand Sekhamet';
  src: url('./assets/fonts/AmperzandSekhamet_ACCENTS.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap; /* Améliore le chargement */
}

@font-face {
  font-family: 'Poiret One';
  src: url('./assets/fonts/PoiretOne-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* ========== APPLICATION DES POLICES ========== */
body {
  font-family: 'Poiret One', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
  /* ... reste inchangé ... */
}

/* Titres avec la police Amperzand */
.app-header h1,
#challenge-title,
.calendar-section h3,
.notifications-settings h3,
.troubleshooting h3 {
  font-family: 'Amperzand Sekhamet', serif;
  font-weight: normal;
  letter-spacing: 0.5px; /* Optionnel pour meilleure lisibilité */
}

/* ========= BOUTON PAUSE ========= */

.pause-progression-wrap {
  margin-top: 14px;
  display: flex;
  justify-content: center;
}

.pause-progression-btn {
  border: 1px solid rgba(11, 37, 47, 0.18);
  background: rgba(11, 37, 47, 0.06);
  color: #0b252f;
  padding: 10px 14px;
  border-radius: 999px;
  font-size: 0.92rem;
  cursor: pointer;
  transition: transform 0.2s, background 0.2s, color 0.2s;
}

.pause-progression-btn:hover {
  transform: translateY(-1px);
  background: rgba(11, 37, 47, 0.10);
}

.pause-progression-btn.is-paused {
  background: rgba(239, 68, 68, 0.10);
  border-color: rgba(239, 68, 68, 0.25);
  color: #b91c1c;
}


/*================================ BOUTONS TECHNIQUES ================================*/

/* Boutons et texte technique gardent une police sans-serif */
.validate-btn, .secondary-btn, .warning-btn, .backup-btn, .danger-btn,
.time-selector select, .small-note {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
}

/* Bouton ON/OFF amélioré */
.backup-btn.toggle-on,
.backup-btn.toggle-off {
  /* Force l'apparence même sur Firefox */
  background-image: none !important;
  -moz-appearance: none !important;
}

.backup-btn.toggle-on {
  background-color: #10b981 !important;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  color: white;
  border: 2px solid #10b981;
}

.backup-btn.toggle-off {
  background-color: #dc2626 !important;
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%) !important;
  color: white;
  border: 2px solid #dc2626;
}

.backup-btn.toggle-on:hover {
  background: linear-gradient(135deg, #0da271 0%, #047852 100%);
}

.backup-btn.toggle-off:hover {
  background: linear-gradient(135deg, #c52222 0%, #9c1b1b 100%);
}


/*================ FIN DE LA DÉCLARATION DES BOUTONS TECH  ================================*/

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

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
  background: var(--app-bg);
  min-height: 100vh;
  padding: 20px;
  color: #333;
}

.app-container {
  max-width: 800px;
  margin: 0 auto;
  background: white;
  border-radius: 20px;
  padding: 25px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}

/* ========== HEADER AVEC IMAGE ========== */

.app-header {
  text-align: center;
  margin-bottom: 30px;
  padding-bottom: 20px;
  border-bottom: 2px solid #f0f0f0;
}

.app-header h1 {
  color: #0b252f;
  font-size: 2.2rem;
  margin-bottom: 8px;
  line-height: 1.2;
}

/* ========== PROGRESSION ========== */

.day-progress {
  background: rgba(11, 37, 47, 0.1); /* Version légère du bleu */
  color: #0b252f;
  padding: 8px 15px;
  border-radius: 50px;
  display: inline-block;
  font-weight: bold;
  font-size: 0.95rem;
}

.challenge-container {
  background: #f9f9ff;
  padding: 25px;
  border-radius: 15px;
  margin-bottom: 30px;
  border: 1px solid #e0e7ff;
}

#challenge-title {
  color: #0b252f;
  margin-bottom: 15px;
  font-size: 1.5rem;
}

#challenge-description {
  line-height: 1.6;
  margin-bottom: 25px;
  white-space: pre-line;
}


/* =========== CHANGEMENT DE COULEURS DU BOUTON DE VALIDATION ========== */

.validate-btn {
  background: linear-gradient(160deg, #10b981 0%, #059669 100%);
  color: white;
  border: none;
  padding: 15px 30px;
  border-radius: 20px 2px 20px 2px / 20px 2px 20px 2px;;
  font-size: 1.1rem;
  font-weight: bold;
  cursor: pointer;
  width: 100%;
  transition: transform 0.2s, box-shadow 0.2s;
}

.validate-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(16, 185, 129, 0.3);
}

.validate-btn.completed {
  background: #d1fae5;
  color: #065f46;
  cursor: default;
  border: none;
  -moz-border-radius: 20px 2px 20px 2px / 20px 2px 20px 2px;
  -webkit-border-radius: 20px 2px 20px 2px / 20px 2px 20px 2px;
  -webkit-border-top-left-radius: 30px 30px;
  -webkit-border-top-right-radius: 5px 5px;
  -webkit-border-bottom-right-radius: 30px 30px;
  -webkit-border-bottom-left-radius: 5px 5px;
  border-radius: 20px 2px 20px 2px / 20px 2px 20px 2px;
}

.validate-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}


/* ===== Bouton "Marquer" : états ===== */
#mark-done-btn.mark-future {
  opacity: 0.6;
  filter: grayscale(1);
  cursor: not-allowed;
}

#mark-done-btn.mark-rattraper {
  background: #d14b4b !important;
  color: #fff !important;
}

#mark-done-btn.mark-madeup {
  background: #ffd03c !important;
  color: #1a1a1a !important;
}

#mark-done-btn.mark-done {
  background: #4caf50 !important;
  color: #fff !important;
}


/* ================================================ */



.calendar-section {
  margin-bottom: 30px;
}

.calendar-section h3 {
  margin-bottom: 15px;
  color: #0b252f;
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 8px;
  max-height: 150px;
  overflow-y: auto;
  padding: 15px;
  background: rgba(11, 37, 47, 0.03); /* Harmonisé */
  border-radius: 12px;
  margin: 0 auto;
}

.calendar-day {
  width: 100%;
  max-width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  aspect-ratio: 1 / 1;
  justify-content: center;
  border-radius: 10px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s;
  border: 2px solid transparent;
  margin: 0 auto;
}

.calendar-day.completed {
  background: #10b981;
  color: white;
}

.calendar-day.current {
  background: #f59e0b;
  color: white;
  border-color: #d97706;
}

.calendar-day.missed {
  background: #ef4444;
  color: white;
}

.calendar-day.upcoming {
  background: rgba(11, 37, 47, 0.08);
  color: #0b252f;
}

.calendar-day:hover {
  transform: scale(1.1);
}

/* Boutons et couleurs pour les jours validés après coup */

.calendar-day.madeup {
  background: linear-gradient(135deg, #f3b900 0%, #f3b900 100%);
  color: white;
  border: 2px solid #fac827;
}

.calendar-day.madeup:hover {
  background: #f3b900;
  transform: translateY(-2px);
}

/* Bouton rattrapé */
button.madeup {
  background: #fac827 !important;
}
/*----------------------------------------------*/


/* ========== Encadré "Mes Notes" =========== */
.notes-box{
  margin-top: 16px;
  padding: 14px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,0.12);
  background: rgba(255,255,255,0.6);
}

.notes-head{
  display:flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.notes-status{
  opacity: 0.75;
  font-size: 0.85rem;
}

.notes-textarea{
  width: 100%;
  box-sizing: border-box;
  resize: vertical;
  padding: 12px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,0.18);
  background: rgba(255,255,255,0.9);
  font: inherit;
  line-height: 1.35;
}

.notes-actions{
  margin-top: 10px;
  display:flex;
  justify-content: flex-end;
}

.notes-clear-btn{
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,0.18);
  background: rgba(255,255,255,0.9);
  cursor: pointer;
}

.notes-clear-btn:hover{
  filter: brightness(0.98);
}

/*========== Fin de l'encadré "Mes Notes" ===========*/


.notifications-settings {
  background: #f0f9ff;
  padding: 20px;
  border-radius: 15px;
  margin-bottom: 30px;
}

.notifications-settings h3 {
  color: #0b252f;
  margin-bottom: 15px;
}


.time-selector {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 20px;
}

.time-selector label {
  font-weight: bold;
  color: #374151;
}

.time-selector select {
  padding: 10px 15px;
  border-radius: 10px;
  border: 2px solid #d1d5db;
  background: white;
  font-size: 1rem;
}

.secondary-btn {
  background: var(--primary-gradient);
  color: white;
  border: none;
  padding: 12px 25px;
  border-radius: 50px;
  font-weight: bold;
  cursor: pointer;
  width: 100%;
  transition: background 0.2s;
}

.secondary-btn:hover {
  background: linear-gradient(160deg, #0a2029 0%, #0c2b36 100%);
}


/* ========== FOOTER AVEC IMAGE ========== */

.app-footer {
  text-align: center;
  padding-top: 20px;
  border-top: 2px solid #f0f0f0;
  /* Nécessaire pour contenir le bouton d'installation */
  position: relative;
}

.footer-content {
  display: flex;
  align-items: center;     /* Alignement VERTICAL */
  gap: 15px;
  justify-content: center; /* Alignement HORIZONTAL */
  flex-wrap: wrap; /* Sur mobile, passe en dessous */
  text-align: center;
  /* Force l'alignement précis */
  min-height: 100px; /* Garantit une hauteur minimale */
}
  
.footer-logo {
  /* Force l'alignement vertical */
  align-self: center; /* Surcharge l'alignement du parent si besoin */
  margin: 0; /* Supprime toute marge parasite */
  /* Ajustez la taille selon vos besoins */
  height: auto;
  width: auto;
}


.systeme-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: var(--primary-gradient);
  color: white;
  text-decoration: none;
  padding: 15px 30px;
  margin : 5px;
  
  border: none;
  -moz-border-radius: 20px 2px 20px 2px / 20px 2px 20px 2px;
  -webkit-border-radius: 20px 2px 20px 2px / 20px 2px 20px 2px;
  -webkit-border-top-left-radius: 30px 30px;
  -webkit-border-top-right-radius: 5px 5px;
  -webkit-border-bottom-right-radius: 30px 30px;
  -webkit-border-bottom-left-radius: 5px 5px;
  border-radius: 20px 2px 20px 2px / 20px 2px 20px 2px;
  
  font-weight: bold;
  transition: transform 0.2s, box-shadow 0.2s;
  min-height: 50px; /* Même hauteur que le logo */
}

.systeme-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(139, 92, 246, 0.4);
}

.separator {margin:20px,auto,20px,auto;opacity:0.5;width:40%;}

/* ========== RESPONSIVE ========== */

@media (max-width: 600px) {
  .app-container {
    padding: 15px;
  }
  .separator {margin:20px,auto, 20px,auto;opacity:0.5;width:80%;}
}

  
/*========== CALENDAR RESPONSIVE ==========*/
  
  .calendar-grid {
    grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
  }
  
  .calendar-day {
    width: 40px;
    height: 40px;
    font-size: 0.9rem;
  }


/* STYLE EN DOUBLON DANS APP.JS : du bouton d'installation sur l'écran d'accueil*/

.install-btn { 
/*  display: none;
  width: calc(100% - 40px);
  max-width: 400px;
  margin: 20px auto 50px auto; /* marge de 20px en haut, 50px en bas et automatique sur les côtés pour centrage*/
/*  background: linear-gradient(160deg, #f29a0b 0%, #ed5d0e 100%);
  color: white;
  border: none;
  padding: 16px 24px;
  border-radius: 12px;
  font-weight: bold;
  font-size: 1.1rem;
  cursor: pointer;
  text-align: center;
  box-shadow: 0 4px 15px rgba(11, 37, 47, 0.03);
  transition: transform 0.2s, box-shadow 0.2s;*/ 
} 

.install-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(11, 37, 47, 0.03);
  background: linear-gradient(135deg, #f29a0b 0%, #ed5d0e 100%);
}

.install-btn:active {
  transform: translateY(0);
}


/*style de la section de dépannage*/

/* Section dépannage */
.troubleshooting {
  background: #fff7ed;
  border: 2px solid #fed7aa;
  border-radius: 12px;
  padding: 20px;
  margin: 50px 0;
}

.troubleshooting h3 {
  color: #ea580c;
  margin-top: 0;
  margin-bottom: 20px;
}

.trouble-item {
  margin-bottom: 25px;
}

.trouble-item:last-child {
  margin-bottom: 0;
}

.trouble-item p {
  margin-bottom: 10px;
  color: #431407;
}
/*-------------------------------------------*/
/* FORCER l'affichage des sections dépannage */
.trouble-item {
  display: block !important; /* Force l'affichage */
  opacity: 1 !important;
  visibility: visible !important;
}

/* Sauf la section Android sur iOS */
.trouble-item:has(#allow-notifications-btn) {
  /* La fonction JS gère l'affichage */
}
/*-------------------------------------------*/



.warning-btn {
  background: linear-gradient(160deg, #f97316 0%, #ea580c 100%);
  color: white;
  border: none;
  padding: 12px 24px;
  margin: 8px 0 30px 0px;
  border-radius: 8px;
  font-weight: bold;
  cursor: pointer;
  width: 100%;
  transition: transform 0.2s;
}

.warning-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(249, 115, 22, 0.3);
}

.small-note {
  font-size: 0.85rem;
  color: #9a3412;
  margin-top: 8px;
  font-style: italic;
}


/*Boutons de sauvegarde*/

/* Boutons sauvegarde côte à côte */
.backup-buttons {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}

.backup-btn {
  flex: 1;
  /* background: linear-gradient(160deg, #0ea5e9 0%, #0369a1 100%); */
  color: white;
  border: none;
  padding: 12px;

  margin: 8px 0 30px 0px;
  background: var(--secundary-gradient);
  border: none;
  -moz-border-radius: 20px 2px 20px 2px / 20px 2px 20px 2px;
  -webkit-border-radius: 20px 2px 20px 2px / 20px 2px 20px 2px;
  -webkit-border-top-left-radius: 30px 30px;
  -webkit-border-top-right-radius: 5px 5px;
  -webkit-border-bottom-right-radius: 30px 30px;
  -webkit-border-bottom-left-radius: 5px 5px;
  border-radius: 20px 2px 20px 2px / 20px 2px 20px 2px;
  
  font-weight: bold;
  cursor: pointer;
  transition: transform 0.2s;
}

.backup-btn:hover {
  transform: translateY(-2px);
}

/* Paragraphes de problèmes techniques : cache, backup, réinitialisation... */
backup-p {margin: 30px 0 2px 0px;}

/* Section avertissement */
.trouble-item.warning {
  background: #fee2e2;
  border: 2px solid #fecaca;
  border-radius: 8px;
  padding: 15px;
  margin-top: 20px;
}

.danger-btn {
  background: linear-gradient(160deg, #dc2626 0%, #991b1b 100%);
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: bold;
  cursor: pointer;
  width: 100%;
  margin-top: 10px;
  transition: transform 0.2s;
}

.danger-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(220, 38, 38, 0.3);
}

/* --------------------------- */
/*------ Bannière réseau ------*/
/* --------------------------- */

.network-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  padding: 12px 20px;
  text-align: center;
  font-weight: bold;
  z-index: 9999;
  transition: all 0.3s ease;
}

.network-banner.offline {
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
  color: white;
}

.network-banner.online {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: white;
}



/* ---------------------------------- */
/*------ Alertes iOS et Firefox ------*/
/* ---------------------------------- */


.browser-warning {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: white;
  padding: 12px 15px;
  border-radius: 8px;
  margin-bottom: 15px;
  font-size: 0.9rem;
  line-height: 1.4;
}

/* Variante Firefox */
.browser-warning.firefox {
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
}

.warning-banner {
  text-align: center;
}

.warning-banner strong {
  display: block;
  margin-bottom: 5px;
  font-size: 1rem;
}

.warning-banner em {
  font-size: 0.85rem;
  opacity: 0.9;
}

/*FIN du Message : navigateur non compatible avec les notifications*/



/* ================= ERROR BANNER ================= */

.error-banner {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 10000;
  background: linear-gradient(135deg, #7f1d1d 0%, #991b1b 100%);
  color: white;
  border-radius: 14px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28);
  padding: 14px 14px 12px 14px;
}

.error-banner[hidden] {
  display: none;
}

.error-banner-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.error-banner-title {
  font-weight: 700;
  line-height: 1.25;
}

.error-banner-close {
  border: none;
  background: transparent;
  color: white;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0.9;
}

.error-banner-close:hover {
  opacity: 1;
}

.error-banner-text {
  font-size: 0.92rem;
  line-height: 1.4;
  margin-bottom: 10px;
}

.error-banner-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.error-banner-btn {
  border: none;
  border-radius: 999px;
  padding: 10px 14px;
  font-weight: 700;
  cursor: pointer;
}

.error-banner-btn.primary {
  background: white;
  color: #7f1d1d;
}

.error-banner-btn.secondary {
  background: rgba(255, 255, 255, 0.14);
  color: white;
}

.error-banner-btn:hover {
  transform: translateY(-1px);
}






/* ================= PROGRAM SELECTOR ================= */
/* =================  EVOLUTION only  ================= */

.program-selector-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 18px;
}

.program-chip {
  min-width: 0;
  padding: 12px 10px;
  border: 2px solid transparent;
  border-radius: 14px;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s, opacity 0.2s;
  text-align: center;
  background: rgba(11, 37, 47, 0.08);
  color: #0b252f;
  margin-bottom: 40px;
}

.program-chip:hover:not(:disabled) {
  transform: translateY(-2px);
}

.program-chip.is-inactive {
  background: rgba(11, 37, 47, 0.08);
  color: #0b252f;
  opacity: 0.9;
}

.program-chip.is-active {
  color: white;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
}

.program-chip.theme-envol.is-active {
  background: linear-gradient(160deg, #0b252f 0%, #0e303d 100%);
  border-color: #0b252f;
}


.program-chip.theme-origine.is-active {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  border-color: #b91c1c;
}

.program-chip.theme-enveloppe.is-active {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  border-color: #047857;
}

.program-chip.theme-emergence.is-active {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  border-color: #b45309;
}

.program-chip.theme-reset.is-active {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  border-color: #047857;
}

.program-chip-name {
  display: block;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.1;
  margin-bottom: 4px;
}

.program-chip-subtitle {
  display: block;
  font-size: 0.78rem;
  line-height: 1.2;
  opacity: 0.95;
}

@media (min-width: 900px) {
  .program-selector-grid {
    gap: 14px;
    margin-bottom: 22px;
  }

  .program-chip {
    padding: 14px 12px;
  }
}

/* ================ BACKUP WARNING NOTE =============== */
/* =================  EVOLUTION only  ================= */


.backup-warning-note {
  margin-top: -10px;
  margin-bottom: 18px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(217, 119, 6, 0.25);
  color: #9a3412;
  font-size: 0.85rem;
  line-height: 1.35;
  text-align: left;
}