/* ===========================================================
   Shiba404 — styles de la landing page
   CSS personnalisé ajouté par-dessus Tailwind (CDN).
   =========================================================== */

/* Couleurs de la charte graphique, réutilisables partout dans le fichier */
:root {
  --bg:           #0a0c12;   /* fond : noir bleuté neutre */
  --bg-soft:      #10131a;   /* fond légèrement plus clair (bandeaux) */
  --brand-cyan:   #06b6d4;   /* bleu vif historique (dégradés du logo) */
  --brand-blue:   #3b82f6;   /* bleu vif historique */
  --brand-deep:   #1d4ed8;
  --accent-green: #22c55e;   /* vert du badge "accès anticipé" */
  --muted-label:  #8a97b0;   /* bleu-gris désaturé : sur-titres de sections */
  --accent-blue:  #38bdf8;   /* bleu d'accent : bordures et libellés des cartes */
  --btn-blue:     #0078FF;   /* bleu uni des boutons principaux */
  --card-bg:      #141b26;   /* fond des cartes : un peu plus clair que la page */
  --card-bg-hover:#18202c;   /* fond des cartes au survol */
}

/* Défilement fluide lors des clics sur les liens du menu */
html { scroll-behavior: smooth; }

/* Empêche les titres de sections de se retrouver cachés derrière
   le bandeau de navigation fixe lors d'un clic sur un lien du menu */
section[id] { scroll-margin-top: 96px; }

/* Police neutre (Inter) et couleur de fond de toute la page */
body {
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  background: var(--bg);
}

/* Le slogan principal conserve la police Roboto Mono d'origine */
section#top h1 {
  font-family: 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* Le badge "accès anticipé" garde lui aussi sa police d'origine */
section#top .inline-flex {
  font-family: 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* ---------- Nom de marque (texte en dégradé) ---------- */
.brand-text {
  font-weight: 700;
  letter-spacing: -0.02em;
  background: linear-gradient(90deg, var(--brand-cyan) 0%, var(--brand-blue) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

/* Texte en dégradé reprenant les couleurs du logo (cyan à gauche, bleu à
   droite) pour les mots mis en avant des titres */
.gradient-text {
  background: linear-gradient(90deg, #00FFFF 0%, #0078FF 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

/* ---------- Boutons ---------- */
/* Bouton principal (fond bleu uni, sans dégradé) */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  border-radius: 9999px;
  color: white;
  background: var(--btn-blue);
  box-shadow: 0 8px 24px -8px rgba(0, 120, 255, 0.55), inset 0 1px 0 rgba(255,255,255,0.18);
  transition: transform .15s ease, box-shadow .2s ease, filter .2s ease;
}
/* Effet de survol du bouton principal */
.btn-primary:hover {
  filter: brightness(1.08);
  box-shadow: 0 12px 32px -8px rgba(59, 130, 246, 0.7), inset 0 1px 0 rgba(255,255,255,0.22);
  transform: translateY(-1px);
}

/* Bouton secondaire (fond transparent avec bordure) */
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  border-radius: 9999px;
  color: white;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.14);
  transition: background .2s ease, border-color .2s ease;
}
/* Effet de survol du bouton secondaire */
.btn-secondary:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.25);
}

/* ---------- Sélecteur de langue FR/EN ---------- */
/* Conteneur : icône globe suivie des boutons FR / EN */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
/* Icône globe blanche devant les langues */
.lang-globe {
  width: 17px;
  height: 17px;
  color: #ffffff;
  flex-shrink: 0;
}
/* Bouton de langue individuel (FR ou EN) */
.lang-btn {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgb(148 163 184);
  cursor: pointer;
  transition: color .2s ease;
}
/* Effet de survol d'un bouton de langue */
.lang-btn:hover { color: white; }
/* Langue actuellement affichée : en blanc et soulignée */
.lang-btn.active {
  color: white;
  text-decoration: underline;
  text-underline-offset: 4px;
}
/* Barre oblique qui sépare FR et EN */
.lang-sep {
  font-size: 0.8rem;
  color: rgb(100 116 139);
}

/* ---------- Point vert animé (badge "accès anticipé") ---------- */
.live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-green);
  box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
  animation: live-pulse 1.6s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
/* Animation de pulsation du point vert */
@keyframes live-pulse {
  0%   { box-shadow: 0 0 0 0   rgba(34, 197, 94, 0.7); }
  70%  { box-shadow: 0 0 0 9px rgba(34, 197, 94, 0); }
  100% { box-shadow: 0 0 0 0   rgba(34, 197, 94, 0); }
}

/* ---------- Effets d'arrière-plan de la section d'accueil ---------- */
/* Deux halos lumineux flous placés derrière le titre */
.hero-orbs::before,
.hero-orbs::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.5;
}
/* Halo bleu-gris désaturé en haut à gauche */
.hero-orbs::before {
  width: 520px;
  height: 520px;
  background: radial-gradient(circle, rgba(70, 90, 130, 0.30), transparent 70%);
  top: -180px;
  left: -120px;
}
/* Halo bleu-gris désaturé à droite */
.hero-orbs::after {
  width: 460px;
  height: 460px;
  background: radial-gradient(circle, rgba(70, 90, 130, 0.22), transparent 70%);
  top: 80px;
  right: -120px;
}

/* ---------- Panneau du graphe d'entités (colonne droite de l'accueil) ---------- */
/* Cadre du panneau qui contient le graphe de co-occurrence */
.hero-graph-panel {
  position: relative;
  border-radius: 18px;
  padding: 16px 16px 8px;
  background: linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.012));
  border: 1px solid rgba(255,255,255,0.09);
  box-shadow: 0 30px 80px -40px rgba(0, 0, 0, 0.7);
}
/* Ligne d'en-tête : voyant "analyse en cours" à gauche, mention démo à droite */
.hero-graph-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
/* Voyant "analyse en temps réel" avec point vert clignotant */
.hero-graph-live {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #94a3b8;
}
/* Étiquette discrète "données fictives — démo" */
.hero-graph-tag {
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #64748b;
  padding: 3px 9px;
  border-radius: 9999px;
  border: 1px solid rgba(255,255,255,0.1);
}
/* Titre du graphe sous l'en-tête */
.hero-graph-title {
  margin-top: 10px;
  font-size: 0.9rem;
  font-weight: 600;
  color: #e2e8f0;
}
/* Zone de dessin du graphe : hauteur adaptative selon la largeur d'écran,
   agrandie pour occuper pleinement la colonne droite sur grand écran */
.hero-graph {
  width: 100%;
  height: clamp(360px, 34vw, 560px);
  margin-top: 4px;
}

/* Grille discrète en arrière-plan, estompée sur les bords */
.hero-grid {
  background-image:
    linear-gradient(rgba(255,255,255,0.6) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.6) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, black 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, black 30%, transparent 75%);
}

/* ---------- Styles de titres de sections ---------- */
/* Petit sur-titre en majuscules au-dessus de chaque section */
.section-eyebrow {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--muted-label);
  margin-bottom: 1rem;
}
/* Titre principal de chaque section */
.section-title {
  font-size: clamp(1.875rem, 3.5vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: white;
}
/* Paragraphe d'introduction sous le titre de section */
.section-subtitle {
  margin-top: 1.25rem;
  color: rgb(148 163 184);
  font-size: 1.125rem;
  line-height: 1.6;
}

/* ---------- Section Métiers : filtres et cartes de cas d'usage ---------- */
/* Pastille de filtre cliquable (un domaine métier par pastille) */
.job-filter {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  border-radius: 9999px;
  font-size: 0.85rem;
  font-weight: 500;
  color: rgb(148 163 184);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.12);
  cursor: pointer;
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}
/* Effet de survol d'une pastille */
.job-filter:hover {
  color: white;
  border-color: rgba(255, 255, 255, 0.3);
}
/* Pastille du domaine actuellement affiché */
.job-filter.active {
  color: white;
  border-color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.07);
}

/* Pastille carrée contenant l'icône de chaque carte métier */
.job-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(148,163,184,0.16), rgba(148,163,184,0.06));
  border: 1px solid rgba(255,255,255,0.12);
  color: #cbd5e1;
  margin-bottom: 16px;
}
.job-icon svg { width: 20px; height: 20px; }

/* Fondu doux de la grille lors d'un changement de filtre */
#jobs-grid {
  transition: opacity .25s ease;
}
#jobs-grid.is-fading {
  opacity: 0;
}

/* ---------- Encart de doctrine (section La plateforme) ---------- */
/* Encadré sobre à bordure fine : périmètre strictement textuel de l'outil */
.pipeline-note {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  padding: 20px 24px;
  background: rgba(255, 255, 255, 0.02);
}

/* ---------- Carte des logos partenaires institutionnels ---------- */
.trust-card {
  background: rgba(255, 255, 255, 0.96);
  border-radius: 16px;
  padding: 14px 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px -6px rgba(0, 0, 0, 0.35);
  transition: transform .25s ease;
}
/* Légère élévation de la carte au survol */
.trust-card:hover { transform: translateY(-2px); }

/* ---------- Cartes des 3 publics cibles ---------- */
/* Style unifié des cartes : fond légèrement plus clair que la section
   et fine bordure dans le bleu d'accent à faible opacité */
.feature-card {
  position: relative;
  padding: 32px;
  border-radius: 12px;
  background: var(--card-bg);
  border: 1px solid rgba(56, 189, 248, 0.2);
  transition: border-color .18s ease, background-color .18s ease;
}
/* Survol : bordure plus marquée et fond à peine éclairci, sans déplacement */
.feature-card:hover {
  border-color: rgba(56, 189, 248, 0.5);
  background: var(--card-bg-hover);
}

/* Pastille carrée contenant l'icône de chaque carte (gris-ardoise neutre) */
.feature-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(148,163,184,0.16), rgba(148,163,184,0.06));
  border: 1px solid rgba(255,255,255,0.12);
  color: #cbd5e1;
  margin-bottom: 22px;
}
.feature-icon svg { width: 22px; height: 22px; }

/* ---------- Cartes des sections valeurs, métiers et plateforme ---------- */
/* Même style unifié que les cartes des 3 publics (fond éclairci,
   bordure bleue discrète, coins arrondis modérés) */
.value-card {
  padding: 28px;
  border-radius: 12px;
  background: var(--card-bg);
  border: 1px solid rgba(56, 189, 248, 0.2);
  transition: border-color .18s ease, background-color .18s ease;
}
/* Survol : bordure plus marquée et fond à peine éclairci, sans déplacement */
.value-card:hover {
  border-color: rgba(56, 189, 248, 0.5);
  background: var(--card-bg-hover);
}

/* Libellé court en haut de chaque carte : police à chasse fixe, majuscules,
   lettres espacées, bleu d'accent (seul usage autorisé de la chasse fixe) */
.card-eyebrow {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-blue);
  margin-bottom: 12px;
}

/* ---------- Lecteur vidéo (Vimeo) ---------- */
/* Cadre neutre autour du lecteur (sans halo bleu vif) */
.video-frame {
  position: relative;
  border-radius: 20px;
  padding: 10px;
  background: linear-gradient(135deg, rgba(148,163,184,0.16), rgba(148,163,184,0.07));
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.7);
}
/* Zone noire qui contient la vidéo, au format 16:9 sur PC */
.video-wrapper {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: #000;
  aspect-ratio: 16 / 9;
}
/* Téléphones : format vertical 9:16 pour la vidéo portrait */
@media (max-width: 639px) {
  .video-wrapper { aspect-ratio: 9 / 16; max-width: 360px; margin: 0 auto; }
}
/* Tablettes : format proche du carré (4:3) */
@media (min-width: 640px) and (max-width: 1023px) {
  .video-wrapper { aspect-ratio: 4 / 3; }
}
/* Le lecteur Vimeo remplit toute la zone */
.video-wrapper iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ---------- Bandeau d'appel à l'action final ---------- */
.cta-banner {
  position: relative;
  padding: 72px 32px;
  border-radius: 28px;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 20% 0%, rgba(90,110,150,0.20), transparent 55%),
    radial-gradient(ellipse at 80% 100%, rgba(90,110,150,0.14), transparent 55%),
    linear-gradient(180deg, #13161f, #0d0f15);
  border: 1px solid rgba(255,255,255,0.08);
}
/* Grille discrète en surimpression du bandeau */
.cta-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.7) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.7) 1px, transparent 1px);
  background-size: 48px 48px;
  opacity: 0.04;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, black 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, black 30%, transparent 80%);
  pointer-events: none;
}

/* Marges réduites du bandeau sur mobile */
@media (max-width: 640px) {
  .cta-banner { padding: 56px 22px; }
}

/* ---------- Section Équipe : cartes des membres ---------- */
/* Carte de membre : contenu centré (initiales, nom, rôle) */
.team-card { text-align: center; }
/* Pastille ronde avec les initiales du membre, dans le bleu d'accent */
.team-avatar {
  width: 64px;
  height: 64px;
  margin: 0 auto 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--accent-blue);
  background: rgba(56, 189, 248, 0.1);
  border: 1px solid rgba(56, 189, 248, 0.25);
}

/* ---------- Petite animation d'apparition de la section d'accueil ---------- */
@keyframes fade-up {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* Les éléments de la section d'accueil apparaissent en glissant vers le haut */
section#top h1,
section#top p,
section#top .inline-flex,
section#top .mt-10 {
  animation: fade-up 0.8s ease-out both;
}
section#top p          { animation-delay: 0.10s; }
section#top .mt-10     { animation-delay: 0.20s; }