/*
 * Charte rétrofuturisme, transposable telle quelle d'un projet à l'autre.
 * Ce qui est propre au relevé de temps vit dans app.css.
 * Aucune requête vers un tiers : polices rapatriées dans public/polices/.
 */

@font-face {
  font-family: 'Anton';
  src: url('../polices/anton_regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Oswald';
  src: url('../polices/oswald_variable.woff2') format('woff2');
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../polices/inter_variable.woff2') format('woff2');
  font-weight: 400 600;
  font-display: swap;
}

:root {
  /* Palette de la charte : interface, texte, bordures */
  --retro-teal:   #127676;
  --retro-orange: #E4632E;
  --retro-jaune:  #E3A535;
  --retro-ink:    #0D1617;
  --retro-paper:  #F2EFE6;

  /* États sémantiques */
  --retro-success:  var(--retro-teal);
  --retro-error:    var(--retro-orange);
  --retro-warning:  var(--retro-jaune);
  --retro-disabled: rgba(13, 22, 23, 0.4);

  /*
   * Palette des séries de graphiques. Pas les couleurs d'interface ci-dessus :
   * ce sont leurs pas validés par le validateur de la skill dataviz, qui exige
   * un chroma plancher et un contraste de 3:1 que le teal de la charte ne tient
   * pas. Mesure du 2026-09-02, all-pairs, les deux modes, aucun échec :
   *   node scripts/validate_palette.js "#009090,#DD6739,#8B5F00,#7A5CD0" \
   *        --mode light --surface "#F2EFE6" --pairs all   → code 0
   *   node scripts/validate_palette.js "#009090,#DD6739,#8B5F00,#7A5CD0" \
   *        --mode dark  --surface "#0D1617" --pairs all   → code 0
   *
   * QUATRE, et pas cinq. La quatrième a été ajoutée le 2026-09-02 pour les
   * camemberts de la répartition par tâche. La cinquième a été cherchée et n'a
   * pas été trouvée : toutes les teintes essayées tombent sous le plancher de
   * séparation en vision déficiente une fois posées à côté du teal et de
   * l'orange (le meilleur essai, un prune #B03A72, rend ΔE 5,6 en deutan pour
   * un plancher à 8), ou sous le chroma plancher, ou sous 3:1 de contraste. Un
   * cinquième slot ne s'invente donc pas. Le repli des plus petites parts en
   * « Autres » a été levé à l'étape 8 bis, le 2026-09-02 : toutes les tâches
   * ont leur part, les quatre teintes cyclent, et chaque tour ajoute une trame
   * au remplissage, aplat, puis hachures, puis pointillé.
   */
  --serie-1: #009090;
  --serie-2: #DD6739;
  --serie-3: #8B5F00;
  --serie-4: #7A5CD0;

  /* Surfaces de référence du validateur, à repasser si la palette bouge */
  --surface-claire: var(--retro-paper);
  --surface-sombre: var(--retro-ink);

  /* Espacements */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 40px;

  /* Rayons, asymétrie Art nouveau obligatoire sur toute carte */
  --radius-card:     24px 8px 24px 8px;  /* N1 principale, diagonale forte */
  --radius-card-alt:  8px 24px 8px 24px; /* N2 secondaire, diagonale miroir */
  --radius-card-sm:  12px 4px 12px 4px;  /* N3 tertiaire, diagonale douce */
  --radius-pill: 50px;
  --radius-sm: 8px;

  /* Ombres */
  --ombre-carte: 0 8px 24px rgba(18, 118, 118, 0.2);
  --ombre-modale: 0 24px 64px rgba(13, 22, 23, 0.5);
  --ombre-flottante: 0 4px 16px rgba(13, 22, 23, 0.25);

  /* Échelle typographique */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-md: 1rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5rem;
  --text-2xl: 2rem;
  --text-3xl: 3rem;

  /* Points de bascule */
  --bp-sm: 640px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
}

/* ---------- Socle ---------- */

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

body {
  margin: 0;
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--retro-ink);
  background-color: var(--retro-ink);
}

/*
 * Le fond Art nouveau est porté par un calque fixe plutôt que par
 * `background-attachment: fixed` sur le body : Safari iOS ignore cette
 * propriété, et cette application se lit d'abord au téléphone.
 */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image: url('../images/fond_art_nouveau.jpg');
  background-size: cover;
  background-position: center;
}

h1, h2, h3 {
  font-family: 'Anton', 'Oswald', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 400;
  margin: 0 0 var(--space-md);
}

h1 { font-size: clamp(1.75rem, 5vw, 3rem); }
h2 { font-size: clamp(1.25rem, 3.5vw, 2rem); }
h3 { font-size: var(--text-lg); }

a { color: var(--retro-teal); }

/* Zones tactiles, plancher de 44 pixels sur tout ce qui se touche */
button,
a.retro-btn-pill,
[role="button"],
input,
select { min-height: 44px; }

:focus-visible {
  outline: 3px solid var(--retro-jaune);
  outline-offset: 2px;
}

/* ---------- Cadre de page ---------- */

/*
 * Cadre opaque, le fond Art nouveau ne se voit plus qu'en marge : le motif
 * derrière une pile de cartes fatigue la lecture d'un écran qu'on ouvre
 * plusieurs fois par jour.
 */
.page-frame {
  background: var(--retro-ink);
  border: 3px solid var(--retro-orange);
  box-shadow: inset 0 0 0 2px var(--retro-teal);
  border-radius: var(--radius-card);
  min-height: calc(100vh - 32px);
  margin: 16px;
  position: relative;
  overflow: clip;
}

@media (min-width: 640px) {
  .page-frame { margin: 40px; min-height: calc(100vh - 80px); }
}

/*
 * Cadre ajusté à son contenu, pour une page qui ne porte qu'une carte : il ne
 * tire plus sur toute la hauteur, et le fond Art nouveau reprend la place
 * autour. Le centrage vertical revient à la page, seule à savoir si elle a
 * autre chose à montrer.
 */
.page-frame.ajuste {
  min-height: 0;
  max-width: 32rem;
  margin-inline: auto;
}

@media (min-width: 1280px) {
  .page-frame { margin: 120px; min-height: calc(100vh - 240px); }
}

/* ---------- Cartes ---------- */

.retro-card {
  background: var(--retro-paper);
  border: 3px solid var(--retro-teal);
  border-radius: var(--radius-card);
  box-shadow: inset 0 0 0 2px var(--retro-orange);
  padding: var(--space-lg);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.retro-card-secondary {
  background: var(--retro-paper);
  border: 3px solid var(--retro-teal);
  border-radius: var(--radius-card-alt);
  box-shadow: inset 0 0 0 2px var(--retro-orange);
  padding: var(--space-lg);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.retro-card-tertiary {
  background: var(--retro-paper);
  border: 2px solid var(--retro-teal);
  border-radius: var(--radius-card-sm);
  box-shadow: inset 0 0 0 1px var(--retro-orange);
  padding: var(--space-md);
}

@media (hover: hover) {
  .retro-card:hover,
  .retro-card-secondary:hover {
    transform: translateY(-2px);
    box-shadow: inset 0 0 0 2px var(--retro-orange), var(--ombre-carte);
  }
}

/* ---------- Boutons ---------- */

.retro-btn-pill {
  display: inline-flex;
  align-items: stretch;
  border-radius: var(--radius-pill);
  border: 3px solid var(--retro-teal);
  overflow: hidden;
  cursor: pointer;
  padding: 0;
  background: none;
  transition: filter 0.15s ease;
}
.retro-btn-pill:hover { filter: brightness(1.1); }
.retro-btn-pill:active { filter: brightness(0.95); }
/* `flex: 1` ne fait rien tant que le bouton tient dans son contenu ; il sert
   quand une grille l'étire, où le label remplit alors la pilule au lieu de
   laisser un vide derrière l'icône. */
.retro-btn-pill .label {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  background: var(--retro-jaune);
  color: var(--retro-ink);
  padding: 0.75rem 2rem;
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.retro-btn-pill .icon {
  background: var(--retro-orange);
  color: var(--retro-paper);
  width: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.retro-btn-ghost {
  border: 2px solid var(--retro-teal);
  color: var(--retro-teal);
  background: transparent;
  border-radius: var(--radius-pill);
  padding: 0.6rem 1.5rem;
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.retro-btn-ghost:hover { background: var(--retro-teal); color: var(--retro-paper); }

button:disabled,
.retro-btn-ghost:disabled {
  color: var(--retro-disabled);
  border-color: var(--retro-disabled);
  cursor: not-allowed;
  filter: none;
}

/* ---------- Formulaires ---------- */

.retro-input {
  background: var(--retro-paper);
  border: 2px solid var(--retro-teal);
  border-radius: var(--radius-sm);
  padding: 0.75rem 1rem;
  font-family: 'Inter', sans-serif;
  font-size: var(--text-md);
  color: var(--retro-ink);
  width: 100%;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.retro-input:focus {
  outline: none;
  border-color: var(--retro-jaune);
  box-shadow: 0 0 0 3px rgba(227, 165, 53, 0.3);
}
.retro-input.error { border-color: var(--retro-orange); }

.retro-label {
  font-family: 'Oswald', sans-serif;
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--retro-teal);
  margin-bottom: var(--space-xs);
  display: block;
}

/* ---------- Retours et états ---------- */

.feedback-success,
.feedback-error,
.feedback-warning {
  padding: 1rem;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.feedback-success { background: rgba(18, 118, 118, 0.1); border-left: 4px solid var(--retro-teal); }
.feedback-error   { background: rgba(228, 99, 46, 0.1);  border-left: 4px solid var(--retro-orange); }
.feedback-warning { background: rgba(227, 165, 53, 0.15); border-left: 4px solid var(--retro-jaune); }

.retro-skeleton {
  background: linear-gradient(90deg, var(--retro-paper) 25%, rgba(18, 118, 118, 0.1) 50%, var(--retro-paper) 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s infinite;
  border-radius: var(--radius-sm);
}
@keyframes skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ---------- Navigation ---------- */

.retro-nav {
  background: var(--retro-ink);
  border-bottom: 3px solid var(--retro-teal);
  padding: var(--space-sm) var(--space-md);
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
}
.retro-nav-link {
  color: var(--retro-paper);
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-decoration: none;
  padding: var(--space-sm);
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  border-bottom: 2px solid transparent;
  transition: border-color 0.2s, color 0.2s;
}
.retro-nav-link:hover,
.retro-nav-link.active {
  color: var(--retro-jaune);
  border-bottom-color: var(--retro-jaune);
}

@media (min-width: 640px) {
  .retro-nav { padding: var(--space-md) var(--space-xl); gap: var(--space-xl); }
}

/* ---------- Modale ---------- */

.retro-modal-overlay {
  background: rgba(13, 22, 23, 0.85);
  backdrop-filter: blur(4px);
}
.retro-modal {
  background: var(--retro-paper);
  border: 3px solid var(--retro-teal);
  border-radius: var(--radius-card);
  box-shadow: inset 0 0 0 1px var(--retro-orange), var(--ombre-modale);
  padding: var(--space-lg);
  max-width: 600px;
  width: 90%;
}

/* ---------- Séparateur ---------- */

.retro-separator {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin: var(--space-xl) 0;
  color: var(--retro-teal);
}
.retro-separator::before,
.retro-separator::after {
  content: '';
  flex: 1;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--retro-teal) 20%, var(--retro-teal) 80%, transparent);
}

/* ---------- Ornements de coin, carte principale seulement ---------- */

.corner-flourish {
  position: absolute;
  color: var(--retro-teal);
  opacity: 0.6;
  pointer-events: none;
  width: 36px;
  height: 36px;
}
.corner-flourish.top-left     { top: 8px; left: 8px; }
.corner-flourish.top-right    { top: 8px; right: 8px; transform: scaleX(-1); }
.corner-flourish.bottom-left  { bottom: 8px; left: 8px; transform: scaleY(-1); }
.corner-flourish.bottom-right { bottom: 8px; right: 8px; transform: scale(-1); }

@media (min-width: 640px) {
  .corner-flourish { width: 48px; height: 48px; }
}

/* ---------- Pied de page ---------- */

.retro-footer {
  background: var(--retro-ink);
  border-top: 3px solid var(--retro-teal);
  padding: var(--space-lg) var(--space-md);
  color: var(--retro-paper);
  text-align: center;
}
.retro-footer-ornament { color: var(--retro-teal); font-size: 1.5rem; margin: 0 0 var(--space-md); }
.retro-footer-credit {
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 var(--space-xs);
}
.retro-footer-licence {
  font-family: 'Inter', sans-serif;
  font-size: var(--text-sm);
  color: rgba(242, 239, 230, 0.6);
  margin: 0;
}
.retro-footer-link {
  color: var(--retro-jaune);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s;
}
.retro-footer-link:hover { border-bottom-color: var(--retro-jaune); }

/* ---------- Mouvement réduit ---------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}