@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

/* ==========================================================================
   Thème daisyUI "betadark"
   ========================================================================== */
[data-theme="betadark"] {
  color-scheme: dark;

  --color-base-100: oklch(15% 0.025 255);
  --color-base-200: oklch(19% 0.03 258);
  --color-base-300: oklch(24% 0.035 260);
  --color-base-content: oklch(95% 0.008 250);

  --color-primary: oklch(78% 0.13 200);
  --color-primary-content: oklch(15% 0.03 250);
  --color-secondary: oklch(62% 0.2 295);
  --color-secondary-content: oklch(97% 0.01 295);
  --color-accent: oklch(72% 0.17 320);
  --color-accent-content: oklch(15% 0.03 320);
  --color-neutral: oklch(22% 0.03 258);
  --color-neutral-content: oklch(92% 0.01 250);
  --color-info: oklch(78% 0.13 210);
  --color-info-content: oklch(15% 0.03 250);
  --color-success: oklch(74% 0.15 160);
  --color-success-content: oklch(15% 0.03 160);
  --color-warning: oklch(82% 0.15 80);
  --color-warning-content: oklch(18% 0.03 80);
  --color-error: oklch(66% 0.2 22);
  --color-error-content: oklch(97% 0.01 22);

  --radius-selector: 0.6rem;
  --radius-field: 0.7rem;
  --radius-box: 1.25rem;
  --size-selector: 0.25rem;
  --size-field: 0.25rem;
  --border: 1px;
  --depth: 0;
  --noise: 0;

  /* Jetons propres à la maquette */
  --cyan: oklch(80% 0.14 200);
  --violet: oklch(66% 0.2 295);
  --rose: oklch(72% 0.18 340);
  --trait: oklch(100% 0 0 / 0.07);
  --trait-fort: oklch(100% 0 0 / 0.13);
  --fond: oklch(11% 0.02 258);
}

/* ==========================================================================
   Base
   ========================================================================== */
body {
  font-family: 'Inter', system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--fond);
  overflow-x: hidden;
}
::selection { background: oklch(80% 0.14 200 / 0.3); }

.mono { font-family: 'JetBrains Mono', ui-monospace, monospace; }

/* Décor de fond : aurores lentes + quadrillage + grain */
.decor { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }

.aurore {
  position: absolute;
  border-radius: 9999px;
  filter: blur(130px);
  opacity: 0.32;
  will-change: transform;
}
.aurore-1 {
  width: 52rem; height: 52rem; top: -22rem; left: -16rem;
  background: radial-gradient(circle, var(--cyan), transparent 62%);
  animation: derive-1 26s ease-in-out infinite alternate;
}
.aurore-2 {
  width: 46rem; height: 46rem; top: 24rem; right: -18rem;
  background: radial-gradient(circle, var(--violet), transparent 62%);
  animation: derive-2 32s ease-in-out infinite alternate;
}
.aurore-3 {
  width: 38rem; height: 38rem; bottom: -14rem; left: 30%;
  background: radial-gradient(circle, var(--rose), transparent 65%);
  opacity: 0.18;
  animation: derive-1 38s ease-in-out infinite alternate-reverse;
}
@keyframes derive-1 {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(6rem, 4rem, 0) scale(1.12); }
}
@keyframes derive-2 {
  from { transform: translate3d(0, 0, 0) scale(1.05); }
  to   { transform: translate3d(-7rem, -5rem, 0) scale(0.95); }
}

.quadrillage {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(oklch(80% 0.14 200 / 0.05) 1px, transparent 1px),
    linear-gradient(90deg, oklch(80% 0.14 200 / 0.05) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(ellipse 100% 65% at 50% 0%, #000 30%, transparent 95%);
}

.grain {
  position: absolute;
  inset: 0;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ==========================================================================
   Structure
   ========================================================================== */
.shell {
  width: 100%;
  max-width: 90rem;
  margin-inline: auto;
  padding-inline: 1.5rem;
}
@media (min-width: 1024px) { .shell { padding-inline: 3rem; } }

.section { padding-block: 6rem; }
@media (max-width: 640px) { .section { padding-block: 4rem; } }

.filet { border-top: 1px solid var(--trait); }

/* Titre de section : surtitre + intitulé + chapô */
.surtitre {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  color: var(--cyan);
  text-transform: uppercase;
}
.surtitre::before {
  content: "";
  width: 2rem;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--cyan));
}

.titre-section {
  margin-top: 1rem;
  font-size: clamp(1.9rem, 3vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -0.02em;
}
.chapo {
  margin-top: 0.9rem;
  max-width: 46rem;
  color: color-mix(in oklab, var(--color-base-content) 65%, transparent);
}

.degrade-texte {
  background: linear-gradient(100deg, var(--cyan), oklch(72% 0.15 245), var(--violet));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ==========================================================================
   Composants
   ========================================================================== */
.verre {
  border-radius: 1.5rem;
  border: 1px solid var(--trait);
  background: color-mix(in oklab, var(--color-base-200) 55%, transparent);
  backdrop-filter: blur(14px);
}

.carte-degrade {
  border-radius: 1.6rem;
  padding: 1px;
  background: linear-gradient(140deg,
    oklch(80% 0.14 200 / 0.55),
    oklch(66% 0.2 295 / 0.3) 45%,
    oklch(72% 0.18 340 / 0.45));
}
.carte-interne {
  border-radius: calc(1.6rem - 1px);
  background: color-mix(in oklab, var(--color-base-200) 92%, transparent);
  backdrop-filter: blur(18px);
}

.bouton-degrade {
  border: 0;
  color: oklch(16% 0.03 255);
  font-weight: 600;
  background: linear-gradient(100deg, var(--cyan), var(--violet));
  transition: filter .2s, transform .2s, box-shadow .2s;
}
.bouton-degrade:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
  box-shadow: 0 10px 30px -12px oklch(80% 0.14 200 / 0.6);
}

.puce-tech {
  display: inline-flex;
  align-items: center;
  border-radius: 0.5rem;
  border: 1px solid var(--trait);
  background: color-mix(in oklab, var(--color-base-300) 55%, transparent);
  padding: 0.15rem 0.6rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  color: color-mix(in oklab, var(--color-base-content) 72%, transparent);
}

.etiquette {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border-radius: 0.5rem;
  border: 1px solid currentColor;
  padding: 0.1rem 0.55rem;
  font-size: 0.7rem;
  font-weight: 500;
  line-height: 1.5;
}
.et-projet { color: oklch(72% 0.15 300); background: oklch(72% 0.15 300 / 0.1); }
.et-perso  { color: oklch(82% 0.14 80);  background: oklch(82% 0.14 80 / 0.1); }
.et-offre  { color: oklch(82% 0.12 200); background: oklch(82% 0.12 200 / 0.1); }
.et-profil { color: oklch(78% 0.14 160); background: oklch(78% 0.14 160 / 0.1); }
.et-urgent { color: oklch(72% 0.18 20);  background: oklch(72% 0.18 20 / 0.1); }

.champ-label {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: color-mix(in oklab, var(--color-base-content) 55%, transparent);
}

/* ---- Compteurs du hero ---- */
.compteur {
  border-radius: 1rem;
  border: 1px solid var(--trait);
  background: color-mix(in oklab, var(--color-base-200) 45%, transparent);
  padding: 1rem 1.15rem;
  transition: border-color .25s, transform .25s;
}
.compteur:hover { border-color: var(--trait-fort); transform: translateY(-2px); }
.compteur-valeur {
  font-size: 1.9rem;
  font-weight: 800;
  line-height: 1;
  color: var(--cyan);
  font-variant-numeric: tabular-nums;
}
.compteur-label {
  margin-top: 0.35rem;
  font-size: 0.78rem;
  color: color-mix(in oklab, var(--color-base-content) 55%, transparent);
}

/* ---- Cartes "voie d'entrée" ---- */
.voie {
  position: relative;
  overflow: hidden;
  border-radius: 1.5rem;
  border: 1px solid var(--trait);
  background: color-mix(in oklab, var(--color-base-200) 55%, transparent);
  backdrop-filter: blur(14px);
  padding: 2rem;
  text-align: left;
  transition: border-color .3s, transform .3s, box-shadow .3s;
}
.voie::after {
  content: "";
  position: absolute;
  inset: -40% 55% 40% -40%;
  background: radial-gradient(circle, oklch(80% 0.14 200 / 0.14), transparent 70%);
  opacity: 0;
  transition: opacity .4s;
}
.voie:hover {
  border-color: oklch(80% 0.14 200 / 0.45);
  transform: translateY(-4px);
  box-shadow: 0 24px 60px -30px oklch(80% 0.14 200 / 0.6);
}
.voie:hover::after { opacity: 1; }
.voie > * { position: relative; z-index: 1; }

.voie-icone {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 0.9rem;
  border: 1px solid var(--trait-fort);
  background: linear-gradient(135deg, oklch(80% 0.14 200 / 0.18), oklch(66% 0.2 295 / 0.18));
  color: var(--cyan);
}
.voie-fleche { transition: transform .3s; }
.voie:hover .voie-fleche { transform: translateX(4px); }

/* ---- Zone de dépôt ---- */
.dropzone {
  position: relative;
  overflow: hidden;
  border: 1.5px dashed oklch(80% 0.14 200 / 0.3);
  border-radius: 1.1rem;
  background: oklch(80% 0.14 200 / 0.035);
  text-align: center;
  transition: border-color .25s, background .25s, transform .25s;
}
.dropzone:hover,
.dropzone-actif {
  border-color: oklch(80% 0.14 200 / 0.7);
  background: oklch(80% 0.14 200 / 0.08);
}
.dropzone-actif { transform: scale(1.015); }
.dropzone::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--cyan), transparent);
  opacity: 0;
}
.dropzone-actif::before { opacity: 1; animation: balayage 1.2s linear infinite; }
@keyframes balayage {
  from { transform: translateY(0); }
  to   { transform: translateY(11rem); }
}

/* ---- Étapes d'analyse ---- */
.etape {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  color: color-mix(in oklab, var(--color-base-content) 38%, transparent);
  transition: color .35s;
}
.etape .puce {
  display: grid;
  place-items: center;
  width: 1.35rem;
  height: 1.35rem;
  flex: none;
  border-radius: 9999px;
  border: 1px solid var(--trait-fort);
  font-size: 0.6rem;
  transition: color .35s, border-color .35s, background .35s;
}
.etape-ok { color: var(--color-base-content); }
.etape-ok .puce {
  color: oklch(16% 0.03 255);
  border-color: transparent;
  background: linear-gradient(135deg, var(--cyan), var(--violet));
}

.avatar-tuile {
  display: grid;
  place-items: center;
  border-radius: 0.85rem;
  border: 1px solid var(--trait-fort);
  background: linear-gradient(135deg, oklch(80% 0.14 200 / 0.25), oklch(66% 0.2 295 / 0.25));
  color: oklch(90% 0.08 200);
  font-weight: 700;
}

/* ---- Illustration : CV scanné ---- */
.scanner {
  position: relative;
  border-radius: 1.25rem;
  border: 1px solid var(--trait);
  background: linear-gradient(180deg,
    color-mix(in oklab, var(--color-base-200) 70%, transparent),
    color-mix(in oklab, var(--color-base-100) 70%, transparent));
  padding: 1.5rem;
  overflow: hidden;
}
.scanner-ligne {
  height: 0.5rem;
  border-radius: 9999px;
  background: color-mix(in oklab, var(--color-base-300) 90%, transparent);
  margin-bottom: 0.7rem;
}
.scanner-faisceau {
  position: absolute;
  left: 0; right: 0;
  height: 40%;
  background: linear-gradient(180deg, transparent, oklch(80% 0.14 200 / 0.16), transparent);
  border-bottom: 1px solid oklch(80% 0.14 200 / 0.5);
  animation: scan 3.4s ease-in-out infinite;
}
@keyframes scan {
  0%, 100% { top: -40%; }
  50%      { top: 100%; }
}

/* ---- Étapes "comment ça marche" ---- */
.jalon {
  position: relative;
  border-radius: 1.25rem;
  border: 1px solid var(--trait);
  background: color-mix(in oklab, var(--color-base-200) 45%, transparent);
  padding: 1.75rem;
  transition: border-color .3s, transform .3s;
}
.jalon:hover { border-color: var(--trait-fort); transform: translateY(-3px); }
.jalon-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.75rem;
  color: var(--cyan);
  letter-spacing: 0.2em;
}

/* ---- Fil d'annonces ---- */
.annonce {
  display: grid;
  gap: 1rem;
  padding: 1.4rem 1.6rem;
  border-left: 2px solid transparent;
  transition: background .25s, border-color .25s;
}
.annonce:hover {
  background: color-mix(in oklab, var(--color-base-300) 28%, transparent);
  border-left-color: var(--cyan);
}
@media (min-width: 1024px) {
  .annonce { grid-template-columns: minmax(0, 1fr) 13rem; gap: 2.5rem; }
}

.filtre {
  border-radius: 9999px;
  border: 1px solid var(--trait);
  background: color-mix(in oklab, var(--color-base-200) 50%, transparent);
  padding: 0.35rem 0.9rem;
  font-size: 0.78rem;
  color: color-mix(in oklab, var(--color-base-content) 62%, transparent);
  transition: color .2s, border-color .2s, background .2s;
}
.filtre:hover { color: var(--color-base-content); border-color: var(--trait-fort); }
.filtre-actif {
  color: oklch(16% 0.03 255);
  border-color: transparent;
  background: linear-gradient(100deg, var(--cyan), var(--violet));
  font-weight: 600;
}

/* ---- Apparition au défilement ---- */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s ease, transform .7s ease;
}
.reveal-vu { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .aurore, .scanner-faisceau, .dropzone-actif::before { animation: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---- Défilement des compétences sous le faisceau ---- */
.defile {
  position: relative;
  height: 15rem;
  overflow: hidden;
  mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
}
.defile-piste {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  animation: defiler 22s linear infinite;
}
.defile:hover .defile-piste { animation-play-state: paused; }
@keyframes defiler {
  from { transform: translateY(0); }
  to   { transform: translateY(-50%); }
}

.competence {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border-radius: 0.7rem;
  border: 1px solid var(--trait);
  background: color-mix(in oklab, var(--color-base-100) 55%, transparent);
  padding: 0.55rem 0.8rem;
}
.competence-nom {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  color: color-mix(in oklab, var(--color-base-content) 78%, transparent);
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.competence-jauge {
  height: 3px;
  width: 3.5rem;
  flex: none;
  border-radius: 9999px;
  background: color-mix(in oklab, var(--color-base-300) 90%, transparent);
  overflow: hidden;
}
.competence-jauge span {
  display: block;
  height: 100%;
  border-radius: 9999px;
  background: linear-gradient(90deg, var(--cyan), var(--violet));
}
.competence-etat {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  color: oklch(80% 0.12 200);
  flex: none;
}

@media (prefers-reduced-motion: reduce) {
  .defile-piste { animation: none; }
}

/* ---- Pastille de compétence avec sa jauge de maîtrise ---- */
.puce-skill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 0.5rem;
  border: 1px solid var(--trait);
  background: color-mix(in oklab, var(--color-base-300) 55%, transparent);
  padding: 0.2rem 0.6rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  color: color-mix(in oklab, var(--color-base-content) 78%, transparent);
}

/* Jauge : cinq segments arrondis, remplis jusqu'au niveau */
.jauge {
  display: inline-flex;
  gap: 2px;
}
.jauge i {
  width: 0.5rem;
  height: 3px;
  border-radius: 9999px;
  background: color-mix(in oklab, var(--color-base-content) 16%, transparent);
}
.jauge i.plein { background: linear-gradient(90deg, var(--cyan), var(--violet)); }

/* Version compacte, devant les lignes de contexte */
.jauge-mini i { width: 0.35rem; height: 3px; }

/* ---- Lignes de la fiche contact ---- */
.contact-ligne {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid var(--trait);
  padding: 0.6rem 0;
  font-size: 0.85rem;
}
.contact-ligne:last-child { border-bottom: 0; }
.contact-ligne dt {
  color: color-mix(in oklab, var(--color-base-content) 45%, transparent);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.contact-ligne dd { text-align: right; }
.contact-ligne a { color: oklch(82% 0.12 200); }
.contact-ligne a:hover { text-decoration: underline; }

/* ---- Boutons d'action des offres ---- */
.actions-offre {
  display: flex;
  gap: 0.4rem;
}

.action {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border-radius: 0.6rem;
  border: 1px solid transparent;
  padding: 0.3rem 0.65rem;
  font-size: 0.72rem;
  font-weight: 500;
  line-height: 1.1rem;
  color: color-mix(in oklab, var(--color-base-content) 60%, transparent);
  background: color-mix(in oklab, var(--color-base-300) 45%, transparent);
  transition: color .18s, background .18s, border-color .18s, transform .18s;
}
.action:hover {
  transform: translateY(-1px);
  border-color: currentColor;
}
.action:active { transform: translateY(0); }
.action:disabled { opacity: .5; pointer-events: none; }
.action svg { width: 0.85rem; height: 0.85rem; }

.action-pause:hover     { color: oklch(82% 0.15 80);  background: oklch(82% 0.15 80 / 0.12); }
.action-publish:hover   { color: oklch(78% 0.16 160); background: oklch(78% 0.16 160 / 0.12); }
.action-edit:hover      { color: var(--cyan);         background: oklch(80% 0.14 200 / 0.12); }
.action-duplicate:hover { color: oklch(72% 0.16 300); background: oklch(72% 0.16 300 / 0.12); }
.action-delete:hover    { color: oklch(70% 0.19 22);  background: oklch(70% 0.19 22 / 0.12); }

/* Le libellé disparaît sur petit écran : les icônes suffisent */
@media (max-width: 640px) {
  .action span { display: none; }
  .action { padding: 0.35rem 0.5rem; }
}

/* ---- Listes déroulantes natives ----
   Le popup d'un <select> hérite du fond de l'élément : avec bg-base-300/40 il
   devenait translucide. On remet un fond opaque, et on donne aux <option> le
   MÊME fond que le popup : dès qu'une option a une couleur propre, Chrome la
   peint en pastille arrondie et la liste part en confettis. */
select {
  background-color: var(--color-base-200);
}
select option,
select optgroup {
  background-color: var(--color-base-200);
  color: var(--color-base-content);
}
select option:checked {
  color: var(--cyan);
  font-weight: 600;
}