/* Styles de base : uniquement les variables de /theme.css, jamais de couleur ni de police en dur.
   Transparence : color-mix(in srgb, var(--x) 28%, transparent). */
:root {
  --taille-texte: 18px;
  --taille-petit: 17px;
  --rayon-carte: 20px;
  --rayon-bouton: 999px;
  --espace: 16px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: var(--police-texte);
  font-size: var(--taille-texte);
  line-height: 1.55;
}

h1, h2, h3 { font-family: var(--police-titres); color: var(--texte); }
small, .petit { font-size: var(--taille-petit); color: var(--texte-doux); }
a { color: var(--texte-accent); }

/* ---------------------------------------------------------------- Accueil */
.accueil { max-width: 1280px; margin: 0 auto; padding: 32px var(--espace) 56px; }
.bonjour { font-size: clamp(2.4rem, 5vw, 3.2rem); font-weight: 600; line-height: 1.05; margin: 0; }
.bonjour em { font-style: italic; color: var(--texte-accent); }
.mira { display: flex; align-items: center; gap: 16px; margin: 14px 0 0; font-size: 1.1rem; color: var(--texte-doux); }
.repere { flex: none; width: 36px; height: 36px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--carte-claire) 0%,
    color-mix(in srgb, var(--accent) 55%, var(--carte-claire)) 40%, var(--accent) 100%);
  animation: respire 3.2s ease-in-out infinite; }
.repere.en-pause { animation-play-state: paused; }
@keyframes respire {
  0%, 100% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 16%, transparent); }
  50% { box-shadow: 0 0 0 12px color-mix(in srgb, var(--accent) 4%, transparent); }
}
.jour { margin: 22px 0 0; font-size: var(--taille-petit); letter-spacing: .08em; text-transform: uppercase;
  font-weight: 600; color: var(--alerte); }
.message { margin: 14px 0 0; padding: 12px 16px; border-radius: 14px; font-weight: 600; color: var(--alerte);
  background: var(--carte-claire); border: 2px solid var(--alerte); }
.message[hidden] { display: none; }

/* Au plus 5 cartes par ligne ; s'il y en a moins, elles se partagent la ligne (520 px au plus chacune,
   alignées à gauche, jamais une carte étirée sur tout l'écran). */
.cartes { --ecart: 16px; --n: 5; display: grid; gap: var(--ecart); margin-top: 14px;
  max-width: calc(var(--n) * 520px + (var(--n) - 1) * var(--ecart));
  grid-template-columns: repeat(auto-fit, minmax(calc((100% - 4 * var(--ecart)) / 5), 1fr)); }
@media (max-width: 1100px) { .cartes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .cartes { grid-template-columns: 1fr; } }

.carte { background: var(--carte-claire); border-radius: var(--rayon-carte); padding: 20px;
  border: 1px solid color-mix(in srgb, var(--texte) 10%, transparent);
  transition: transform .3s, box-shadow .3s;
  animation: entre .6s ease backwards; animation-delay: calc(var(--rang, 0) * 80ms); }
.carte:hover { transform: translateY(-8px);
  box-shadow: 0 22px 44px color-mix(in srgb, var(--alerte) 28%, transparent), 0 0 0 2px var(--accent); }
@keyframes entre { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.carte-titre { font-size: var(--taille-petit); color: var(--texte-doux); }
.carte-valeur { font-size: 2.4rem; font-weight: 700; line-height: 1.2; margin-top: 4px; color: var(--texte); }
.carte-valeur.urgent { color: var(--alerte); }
.carte-detail { font-size: var(--taille-petit); color: var(--texte-doux); margin-top: 4px; }
.carte-detail.indispo { margin-top: 10px; font-weight: 600; }
.carte-lignes { list-style: none; margin: 12px 0 0; padding: 0; font-size: var(--taille-petit); }
.carte-lignes li { padding: 6px 0; border-top: 1px solid color-mix(in srgb, var(--texte) 10%, transparent); }
.carte-lignes .plus { color: var(--texte-doux); }

.notes-liste { list-style: none; margin: 8px 0 0; padding: 0; }
.note { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-top: 8px; }
.note-texte { display: flex; align-items: flex-start; gap: 10px; flex: 1; min-width: 0; cursor: pointer;
  font-size: var(--taille-petit); overflow-wrap: anywhere; }
.note-texte input { flex: none; width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--accent); cursor: pointer; }
.note.faite .note-texte span { color: var(--texte-doux); text-decoration: line-through; }
.note-vide { font-size: var(--taille-petit); color: var(--texte-doux); }
.note-supprimer { flex: none; width: 32px; height: 32px; border: 0; border-radius: 50%; cursor: pointer;
  font: inherit; font-size: 1.2rem; line-height: 1; background: transparent; color: var(--texte-doux); }
.note-supprimer:hover { background: color-mix(in srgb, var(--alerte) 12%, transparent); color: var(--alerte); }
.notes-ajout { margin-top: 12px; }
.lien { border: 0; padding: 4px 0; background: none; cursor: pointer; font: inherit; font-size: var(--taille-petit);
  font-weight: 600; color: var(--texte-accent); }
.lien:hover { text-decoration: underline; }
.notes-champ { width: 100%; font: inherit; font-size: var(--taille-petit); padding: 10px 12px; border-radius: 12px;
  color: var(--texte); background: var(--carte-claire); border: 2px solid var(--texte-doux); }
.notes-rangee { display: flex; gap: 8px; align-items: stretch; flex-wrap: wrap; }
.notes-rangee .notes-champ { flex: 1 1 120px; width: auto; min-width: 0; }
.bouton-ajouter { flex: none; font: inherit; font-size: var(--taille-petit); font-weight: 600; cursor: pointer;
  padding: 10px 18px; border: 0; border-radius: var(--rayon-bouton);
  background: var(--accent); color: var(--texte-sur-accent); }
.bouton-ajouter:disabled { opacity: .7; cursor: wait; }

/* ---------------------------------------------------------------- Ma journée dans l'ordre */
.journee-action { margin-top: 24px; }
.journee-action[hidden] { display: none; }
.bouton-journee { padding: 14px 28px; font-size: var(--taille-texte); }
.journee-voile { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center;
  padding: var(--espace); background: color-mix(in srgb, var(--texte) 38%, transparent);
  animation: voile-entre .25s ease; }
.journee-panneau { width: min(640px, 100%); max-height: calc(100vh - 2 * var(--espace)); overflow-y: auto;
  padding: 28px; border-radius: var(--rayon-carte); background: var(--carte-claire); color: var(--texte);
  border: 1px solid color-mix(in srgb, var(--texte) 10%, transparent);
  box-shadow: 0 24px 60px color-mix(in srgb, var(--texte) 22%, transparent);
  animation: panneau-entre .3s ease; }
.journee-panneau:focus { outline: none; }
.journee-titre { margin: 0 0 4px; font-size: 2rem; font-weight: 600; line-height: 1.15; }
.journee-section { margin-top: 22px; }
.journee-section h3 { margin: 0 0 6px; font-size: 1.3rem; font-weight: 600; }
.journee-liste { list-style: none; margin: 0; padding: 0; }
.journee-liste li { display: flex; gap: 14px; padding: 8px 0; font-size: var(--taille-texte); overflow-wrap: anywhere;
  border-top: 1px solid color-mix(in srgb, var(--texte) 10%, transparent); }
.journee-liste li:first-child { border-top: 0; }
.journee-quand { flex: none; min-width: 7.5em; font-weight: 600; color: var(--texte-doux); }
.journee-retard { color: var(--alerte); }
.journee-vide { margin: 0; font-size: var(--taille-texte); color: var(--texte-doux); }
.journee-vide.indispo { font-weight: 600; }
.journee-fermer { margin-top: 26px; }
@keyframes voile-entre { from { opacity: 0; } to { opacity: 1; } }
@keyframes panneau-entre { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (max-width: 480px) { .journee-quand { min-width: 5.5em; } .journee-panneau { padding: 20px; } }

a:focus-visible, button:focus-visible, input:focus-visible { outline: 3px solid var(--texte-accent); outline-offset: 2px; }

/* ---------------------------------------------------------------- Équipe d'agents */
.equipe-bloc { margin-top: 30px; }
.equipe-bloc[hidden] { display: none; }
.sec { font-size: 2rem; font-weight: 600; margin: 0; }
.sec em { font-style: italic; color: var(--texte-accent); }

/* Beaucoup d'air au-dessus et au-dessous : les grandes courbes des flux y passent */
.equipe { position: relative; padding: 170px 0; }
.flux { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; overflow: visible; }
.flux .reseau { filter: url(#lueur); }
.flux path { fill: none; stroke: var(--flux); stroke-width: 1.4; stroke-dasharray: 2 8; stroke-linecap: round;
  opacity: .6; animation: flux-avance 2.2s linear infinite; }
.flux circle { fill: color-mix(in srgb, var(--flux) 60%, var(--carte-claire)); filter: url(#lueur-forte); }
@keyframes flux-avance { to { stroke-dashoffset: -20; } }
.equipe.en-pause .flux path { animation-play-state: paused; }
.equipe.fixe .flux path { animation: none; }

/* Les cartes : 300 px, centrées ; plus l'écart est grand entre deux cartes, plus les courbes respirent */
.agents { --ecart-agents: 70px; position: relative; z-index: 1; display: flex; justify-content: center;
  gap: var(--ecart-agents); }
.agents.n2 { --ecart-agents: clamp(60px, 22vw, 320px); }
.agents.n1 { --ecart-agents: 0; }
.agent { flex: 1 1 0; max-width: 320px; min-width: 0; display: block; text-decoration: none;
  background: var(--carte-foncee); color: var(--texte-sur-fonce); border-radius: var(--rayon-carte);
  padding: 20px; border: 1.5px solid transparent; transition: transform .3s, box-shadow .3s, border-color .3s; }
.agents.n1 .agent { max-width: 420px; padding: 28px; }
a.agent { cursor: pointer; }
.agent:hover, a.agent:focus-visible { transform: translateY(-9px); border-color: var(--accent);
  box-shadow: 0 24px 46px color-mix(in srgb, var(--accent) 60%, transparent),
              0 0 28px color-mix(in srgb, var(--accent) 45%, transparent); }
a.agent:focus-visible { outline-offset: 3px; }  /* la couleur du contour vient de la règle générale (visible sur le fond de la page) */
.portrait { display: block; width: 76px; height: 76px; border-radius: 50%; overflow: hidden;
  background: var(--accent); color: var(--texte-sur-accent); text-align: center; line-height: 76px;
  font-family: var(--police-titres); font-size: 2rem; font-weight: 600;
  animation: flotte 4s ease-in-out infinite; animation-delay: calc(var(--rang, 0) * .6s); }
.agents.n1 .portrait { width: 120px; height: 120px; line-height: 120px; font-size: 3rem; }
.portrait img { display: block; width: 100%; height: 100%; object-fit: cover; }
.equipe.en-pause .portrait { animation-play-state: paused; }
.equipe.fixe .portrait { animation: none; }
@keyframes flotte { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.agent-nom { display: block; margin-top: 12px; font-size: 1.25rem; font-weight: 700; color: var(--texte-sur-fonce); }
.agent-role { display: block; font-size: var(--taille-petit); color: var(--texte-sur-fonce); }

@media (max-width: 700px) {
  .equipe { padding: 60px 0; }
  .agents { flex-direction: column; align-items: center; gap: 28px; }
  .agents.n1, .agents.n2 { --ecart-agents: 28px; }
  .agent { width: 100%; flex: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}