/* ============================================================
   sections/about-terminal/style.css — "console système"
   ============================================================ */

.about-terminal {
  background:    var(--about-terminal-bg, var(--bg-color));
  color:         var(--about-terminal-text, var(--text-color));
  padding:       var(--about-terminal-padding, 6rem 0);
  border-top:    var(--about-terminal-border-t, none);
  border-right:  var(--about-terminal-border-r, none);
  border-bottom: var(--about-terminal-border-b, none);
  border-left:   var(--about-terminal-border-l, none);
  border-radius: var(--about-terminal-radius, 0);
  box-shadow:    var(--about-terminal-shadow, none);
  overflow: hidden;
}

.at-frame {
  width: 100%;
  /* Vraie fenêtre façon macOS : corps clair, barre de titre sombre */
  background: var(--about-terminal-frame-bg, var(--bg-color-2));
  /* border-top:    var(--about-terminal-frame-border-t, 1px solid rgba(0, 0, 0, 0.08));
  border-bottom: var(--about-terminal-frame-border-b, 1px solid rgba(0, 0, 0, 0.08)); */
  overflow: hidden;
}

/* ── Barre de titre (fenêtre) ─────────────────────────────── */
.at-titlebar {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background: var(--about-terminal-titlebar-bg, var(--surface-color));
}

.at-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  flex-shrink: 0;
}
.at-dot--cyan    { background: var(--primary-color); }
.at-dot--magenta { background: var(--secondary-color); }

.at-path {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-color);
  opacity: 0.6;
  margin-left: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.at-status {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--primary-color);
  letter-spacing: 0.06em;
  white-space: nowrap;
  text-transform: uppercase;
}
.at-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--primary-color);
  box-shadow: 0 0 8px var(--primary-color);
  animation: pulse 2s ease-in-out infinite;
}

/* ── Corps ────────────────────────────────────────────────── */
.at-body {
  max-width: 1320px;
  margin: 0 auto;
  padding: 12px 12px 2rem 12px;
}

/* ── Haut de section : texte (largeur inchangée, 720px) + carte profil
   qui vient occuper l'espace resté vide à droite ────────────────── */
.at-top-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 2rem;
}

.at-top-text {
  flex: 1 1 720px;
  width: 100%;
  max-width: 720px;
  min-width: 0;
}

.at-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--about-terminal-eyebrow-color, var(--bg-color));
  opacity: 0.7;
  margin-bottom: 0.9rem;
}

/* Même traitement que le titre de /about : dégradé cyan → magenta via
   le .section-title partagé (background-clip:text), simplement aligné
   à gauche pour s'intégrer au reste du contenu de la console. */
.about-terminal .section-title {
  font-size: var(--about-terminal-title-size, 2.5rem);
  text-align: left;
  width: auto;
  display: inline-block;
  color: var(--about-terminal-title-color, transparent);
}
.about-terminal .section-title::after {
  left: 0;
  right: auto;
  margin: 0;
  transform-origin: left;
}

/* ── Entrées (bio) ────────────────────────────────────────── */
.at-entry {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.75rem;
  max-width: 720px;
}

.at-prompt {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 1.1rem;
  line-height: 1.75;
  flex-shrink: 0;
}
.at-prompt--cyan    { color: var(--primary-color); }
.at-prompt--magenta { color: var(--secondary-color); }

.at-entry-content { min-width: 0; }

.at-entry-label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--about-terminal-label-color, var(--bg-color));
  opacity: 0.75;
  margin-bottom: 0.5rem;
}

.at-text {
  font-family: var(--font-main);
  font-size: 1rem;
  line-height: 1.75;
  color: var(--about-terminal-text-color, var(--bg-color));
}
.at-text p { margin: 0; }

/* ── Indicateurs de confiance ─────────────────────────────── */
/* En ligne, à plat (plus de pastilles skew, trop proches visuellement
   d'un bouton) : icône + libellé par indicateur, sans fond ni bordure
   autour du groupe. */
.at-metrics {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.2rem;
}

.at-metric {
  display: flex;
  min-width: 0;
  transition: opacity 0.2s ease;
}

.at-metric-inner {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  gap: 0.7rem;
  font-family: var(--font-mono);
  font-size: 0.95rem;
  color: var(--about-terminal-text-color, var(--bg-color));
}

.at-metric-label {
  overflow-wrap: anywhere;
}

/* Icône dans un repère carré skewé (coin fin + fond léger) plutôt
   qu'un glyphe nu ou une pastille : lisible comme indicateur, pas
   comme action cliquable. Le glyphe est contre-skewé pour rester
   droit à l'intérieur. */
.at-metric-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.7em;
  height: 1.7em;
  flex-shrink: 0;
  transform: skew(-15deg);
  background: var(--about-terminal-metric-bg, rgba(var(--primary-rgb), 0.05));
  border-top:    var(--about-terminal-metric-border-t, 1px solid rgba(var(--primary-rgb), 0.3));
  border-right:  var(--about-terminal-metric-border-r, 1px solid rgba(var(--primary-rgb), 0.3));
  border-bottom: var(--about-terminal-metric-border-b, 1px solid rgba(var(--primary-rgb), 0.3));
  border-left:   var(--about-terminal-metric-border-l, 1px solid rgba(var(--primary-rgb), 0.3));
}

/* Icônes en dégradé cyan → magenta, comme .skill-item i sur /about */
.at-metric-icon i {
  display: inline-block;
  transform: skew(15deg);
  font-size: 0.85rem;
  background: linear-gradient(135deg,
    var(--about-terminal-metric-icon-color, var(--primary-color)),
    var(--about-terminal-metric-icon-color, var(--secondary-color))
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.at-metric-icon img {
  width: 0.95em;
  height: 0.95em;
  object-fit: contain;
  transform: skew(15deg);
}

.at-metric:hover .at-metric-icon {
  border-color: rgba(var(--primary-rgb), 0.6);
  background: rgba(var(--primary-rgb), 0.1);
}

/* ── Séparateur ───────────────────────────────────────────── */
.at-divider {
  height: 1px;
  width: 100%;
  background: linear-gradient(90deg, var(--secondary-color), var(--primary-color) 40%, transparent);
  opacity: 0.7;
  margin-bottom: 2rem;
}

/* ── Compétences ──────────────────────────────────────────── */
.at-skills-label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--about-terminal-skills-title-color, var(--bg-color));
  opacity: 0.7;
  margin-bottom: 1.4rem;
}

.at-skills-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--about-terminal-grid-gap, 1rem);
}

.at-skill-group,
.at-profile-card {
  /* Carte claire simple posée sur le fond gris clair (bg-color-2) du
     corps de la console : coins arrondis, bordure fine, ombre légère.
     .at-skill-group y ajoute sa mini barre de titre ; .at-profile-card
     (image) reste nu, sans fenêtre. */
  border-radius: 4px;
  background:    var(--about-terminal-skillcard-bg, var(--header-color));
  border-top:    var(--about-terminal-skillcard-border-t, 1px solid rgba(0, 0, 0, 0.08));
  border-right:  var(--about-terminal-skillcard-border-r, 1px solid rgba(0, 0, 0, 0.08));
  border-bottom: var(--about-terminal-skillcard-border-b, 1px solid rgba(0, 0, 0, 0.08));
  border-left:   var(--about-terminal-skillcard-border-l, 1px solid rgba(0, 0, 0, 0.08));
  /* box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06); */
  overflow: hidden;
}

.at-skill-group {
  transition: transform 0.25s ease;
}

/* ── Bloc profil : juste l'image (logo), agrandie pour occuper l'espace
   resté vide à droite du texte (720px capé) — pas de fenêtre, une carte
   simple. Les indicateurs de confiance sont en ligne sous l'image. ── */
.at-profile-stack {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  flex: 1 1 320px;
  min-width: 0;
  max-width: 360px;
  margin: 0 auto;
}

.at-profile-float {
  width: 100%;
  animation: float 6s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .at-profile-float { animation: none; }
}

/* Pas de cadre : ni bordure ni fond blanc derrière le logo — juste
   l'image, coins arrondis + ombre légère hérités de .at-profile-card. */
.at-profile-card--image {
  background: none;
  border: none;
}

/* Légère inclinaison figée — sélecteurs .fade-in / .fade-in.visible
   ajoutés pour la même raison que .at-skill-group:last-child plus bas :
   le fondu au scroll pose aussi un transform (translateY) sur cette
   même carte et écraserait sinon l'inclinaison une fois visible. */
.at-profile-card--image,
.at-profile-card--image.fade-in,
.at-profile-card--image.fade-in.visible {
  transform: rotate(-1deg);
}

/* Logo rectangulaire : contraint par largeur seulement, hauteur libre
   (pas de max-height ni object-fit qui laisserait un vide au-dessus/
   en dessous dans une boîte trop carrée). */
.at-card-image {
  display: block;
  width: 100%;
  height: auto;
}

/* Indicateurs de confiance : simplement en ligne sous l'image. */
/* .at-metrics--inline {
  margin-top: 1.25rem;
} */

/* Légère rotation sur la dernière carte de catégorie seulement.
   Sélecteurs .fade-in / .fade-in.visible ajoutés pour que le fondu au
   scroll (script.js) — qui pose aussi un transform (translateY) sur
   cette même carte — n'écrase pas l'inclinaison une fois visible. */
.at-skill-group:last-child,
.at-skill-group:last-child.fade-in,
.at-skill-group:last-child.fade-in.visible {
  transform: rotate(-2.5deg);
}

.at-card-titlebar {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 10px;
  background: var(--about-terminal-titlebar-bg, var(--surface-color));
}
.at-card-titlebar .at-dot {
  width: 7px;
  height: 7px;
}

.at-card-body {
  padding: 1.1rem 1rem;
}

.at-skill-heading {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--about-terminal-text-color, var(--bg-color));
  text-transform: uppercase;
  border-bottom: 1px dashed rgba(0, 0, 0, 0.12);
  padding-bottom: 0.3rem;
  margin-bottom: 0.75rem;
}

.at-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.at-tag {
  background:    var(--about-terminal-tag-bg, rgba(0, 0, 0, 0.03));
  border-top:    var(--about-terminal-tag-border-t, 1px solid rgba(0, 0, 0, 0.12));
  border-right:  var(--about-terminal-tag-border-r, 1px solid rgba(0, 0, 0, 0.12));
  border-bottom: var(--about-terminal-tag-border-b, 1px solid rgba(0, 0, 0, 0.12));
  border-left:   var(--about-terminal-tag-border-l, 1px solid rgba(0, 0, 0, 0.12));
  padding: 0.01rem 0.42rem;
  transform: skew(-15deg);
  transition: border-color 0.2s ease;
  display: inline-block;
}

.at-tag-inner {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  transform: skew(15deg);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  color: var(--about-terminal-tag-color, var(--bg-color));
}

/* Icônes en dégradé cyan → magenta, comme .skill-item i sur /about */
.at-tag-inner i {
  font-size: 0.7rem;
  background: linear-gradient(135deg,
    var(--about-terminal-tag-icon-color, var(--primary-color)),
    var(--about-terminal-tag-icon-color, var(--secondary-color))
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  flex-shrink: 0;
}

.at-tag-inner img {
  width: 1em;
  height: 1em;
  object-fit: contain;
  flex-shrink: 0;
}

.at-tag:hover {
  border-color: rgba(var(--primary-rgb), 0.45);
}
/* Dégradé inversé au survol, comme .skill-item:hover i sur /about */
.at-tag:hover .at-tag-inner i {
  background: linear-gradient(135deg,
    var(--about-terminal-tag-icon-color, var(--secondary-color)),
    var(--about-terminal-tag-icon-color, var(--primary-color))
  );
  -webkit-background-clip: text;
  background-clip: text;
}

/* ── Barre lumineuse (pied) ───────────────────────────────── */
.at-glow-bar {
  height: 3px;
  width: 100%;
  background: linear-gradient(90deg, var(--primary-color), var(--secondary-color) 50%, transparent);
  opacity: 0.55;
}

/* ── Animation d'apparition au scroll ─────────────────────── */
.about-terminal .fade-in {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.about-terminal .fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .about-terminal .fade-in {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ============================================================
   Responsive — tablette
   ============================================================ */
@media (max-width: 1100px) {
  .at-top-grid { flex-direction: column; gap: .9rem;}
  .at-top-text {
    /* flex-basis: 720px hérité du desktop devient une hauteur (colonne) sans ce reset */
    flex-basis: auto;
    max-width: 720px;
  }
  .about-terminal .section-title { font-size: var(--about-terminal-title-size, 2rem); }

  /* Sous le texte : deux colonnes en row — logo à gauche, indicateurs
     à droite (qui gardent leur flex-wrap et repassent à la ligne tout
     seuls). Ce même agencement est conservé jusqu'au mobile. */
  .at-profile-stack {
    /* flex-basis: 320px hérité du desktop devient une hauteur (colonne) sans ce reset */
    flex-basis: auto;
    flex-direction: row;
    align-items: center;
    width: 100%;
    max-width: none;
    margin: 0;
    gap: 1.25rem;
  }
  .at-profile-float {
    width: 130px;
    flex-shrink: 0;
  }
  .at-metrics--inline {
    flex: 1 1 auto;
    min-width: 0;
    margin-top: 0;
  }
  .at-skills-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ============================================================
   Responsive — mobile
   ============================================================ */
@media (max-width: 576px) {
  .at-titlebar { padding: 0 14px; height: 40px; }
  .at-path { display: none; }
  .about-terminal .section-title { font-size: var(--about-terminal-title-size, 1.6rem); }
  .at-entry { flex-direction: column; gap: 0.4rem; }
  .at-prompt { display: none; }
  .at-profile-stack { gap: 0.9rem; }
  .at-profile-float { width: 84px; }
  .at-metrics { gap: 0.4rem 0.6rem; }
  .at-metric-inner { font-size: 0.8rem; gap: 0.45rem; }
  .at-metric-icon { width: 1.4em; height: 1.4em; }
  .at-skills-grid { grid-template-columns: 1fr 1fr; gap: 0.7rem; }
}