/* ============================================================
   DIAD — Portfolio 2026
   Design: Dark luxury, gold accent, bold typography, parallax
   ============================================================ */

:root {
  /* Type scale */
  --text-xs:   clamp(0.75rem,  0.7rem  + 0.25vw, 0.875rem);
  --text-sm:   clamp(0.875rem, 0.8rem  + 0.35vw, 1rem);
  --text-base: clamp(1rem,     0.95rem + 0.25vw, 1.125rem);
  --text-lg:   clamp(1.125rem, 1rem    + 0.75vw, 1.5rem);
  --text-xl:   clamp(1.5rem,   1.2rem  + 1.25vw, 2.25rem);
  --text-2xl:  clamp(2rem,     1.2rem  + 2.5vw,  3.5rem);
  --text-3xl:  clamp(2.5rem,   1rem    + 4vw,    5rem);
  --text-hero: clamp(3rem,     0.5rem  + 7vw,    8rem);

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

    /* Palette - Vintage American Retro (Dark) */
    --color-bg:            #1a1918;
    --color-surface:       #262423;
    --color-surface-2:     #33312f;
    --color-surface-3:     #403d3a;
    --color-border:        rgba(223,160,93,0.15);
    --color-border-accent: rgba(223,160,93,0.35);
    --color-text:          #e8e4d9;
    --color-text-muted:    #a19c93;
    --color-text-faint:    #6e6b65;
    --color-accent:        #dfa05d;
    --color-accent-bright: #f5b775;
    --color-accent-dim:    #b88248;
    --color-accent-glow:   rgba(223,160,93,0.15);

  /* Fonts */
  --font-display: 'Georama', sans-serif;
  --font-body:    'Glacial Indifference', sans-serif;


  /* Easing */
  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:      cubic-bezier(0.4, 0, 1, 1);
  --ease-in-out:  cubic-bezier(0.4, 0, 0.2, 1);
  --transition:   180ms cubic-bezier(0.16, 1, 0.3, 1);

  /* Radius */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 32px;

  /* Mise à jour en JS (js/modules/banner.js) selon la hauteur réelle de la
     bannière custom une fois affichée — 0 par défaut (bannière masquée),
     pour ne rien décaler tant qu'elle n'est pas active. */
  --banner-height: 0px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.5);
  --shadow-lg: 0 12px 40px rgba(0,0,0,0.6);
  --shadow-gold: 0 0 40px rgba(246,209,0,0.2);

  /* Layout */
  --content-narrow: 640px;
  --content-default: 960px;
  --content-wide: 1200px;
}

/* ---- GLOBAL ---- */
body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-base);
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition), opacity var(--transition);
}

/* ---- NOISE TEXTURE OVERLAY ---- */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 9999;
  opacity: 0.35;
}

/* ---- BANNIÈRE CUSTOM (texte défilant, piloté depuis /hk-admin) ---- */
.site-banner {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 110; /* au-dessus de la nav (100), sous le chat Blob (9999) */
  overflow: hidden;
  background: var(--color-accent);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  padding-block: var(--space-2);
}

.site-banner__track {
  display: inline-flex;
  width: max-content;
  animation: site-banner-scroll var(--banner-speed, 26s) linear infinite;
}

.site-banner__text {
  padding-inline: var(--space-8);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 800;
  font-stretch: 130%;
  text-transform: uppercase;
  color: var(--color-bg);
  white-space: nowrap;
}

/* Mode statique (choisi depuis /hk-admin) : texte fixe et centré, sans défilement */
.site-banner--static {
  display: flex;
  justify-content: center;
}
.site-banner--static .site-banner__track {
  animation: none;
}
.site-banner--static .site-banner__text {
  white-space: normal;
  text-align: center;
}

/* Message unique : part hors écran à droite (100vw), sort hors écran à
   gauche (-100%) — quels que soient la largeur d'écran et la longueur du texte. */
@keyframes site-banner-scroll {
  from { transform: translateX(100vw); }
  to   { transform: translateX(-100%); }
}

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

/* ---- NAVIGATION (pilule flottante "vitre", inspirée ManyChat) ---- */
.nav {
  position: fixed;
  top: var(--banner-height);
  /* left/transform fixes (jamais animés) : seule la largeur varie, pour une
     boîte centrée sans tremblement. */
  left: 50%;
  transform: translateX(-50%);
  z-index: 120; /* au-dessus du panneau mobile (115), sous le Blob (9999) */
  width: 100%;
  padding: var(--space-4) var(--space-6);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  font-family: var(--font-display);
  background: rgba(17, 17, 19, 0.55);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid transparent;
  border-radius: 0;
  box-shadow: none;
  /* --transition (180ms) est pensée pour de simples fondus de couleur — bien
     trop courte pour un changement de forme (largeur, position, coins). On
     utilise une durée dédiée, plus longue, pour que la morph reste fluide. */
  --nav-shape-transition: 550ms var(--ease-out);
  transition: background var(--nav-shape-transition), backdrop-filter var(--nav-shape-transition),
              box-shadow var(--nav-shape-transition), border-color var(--nav-shape-transition),
              border-radius var(--nav-shape-transition), padding var(--nav-shape-transition),
              top var(--nav-shape-transition), width var(--nav-shape-transition);
}

.nav--scrolled {
  top: calc(var(--banner-height) + var(--space-3));
  width: min(calc(100% - var(--space-8)), 1180px);
  padding-block: var(--space-2);
  background: linear-gradient(to right, rgba(22, 22, 22, 0.55), rgba(49, 43, 3, 0.55));
  border-width: 1px;
  border-color: var(--color-accent);
  border-radius: var(--radius-md);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}

.nav__logo {
  display: flex;
  align-items: center;
  gap: 0;
  color: var(--color-text);
  text-decoration: none;
  transition: opacity 0.2s ease;
}

#nav .nav__logo {
  margin-left: var(--space-1);
  justify-self: start;
}

.nav__logo:hover {
  opacity: 0.8;
}

.nav__logo-img {
  height: 28px;
  width: auto;
  display: block;
  mix-blend-mode: screen;  /* supprime le fond blanc sur fond sombre */
  filter: brightness(1.05);
}

.nav__logo-vid-source {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
}

.nav__logo-vid {
  height: 48px;
  width: auto;
  display: block;
  pointer-events: none;
}

.nav__logo svg {
  flex-shrink: 0;
}

.nav__logo span em {
  color: var(--color-accent);
  font-style: normal;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  list-style: none;
}

.nav__links a {
  font-size: var(--text-base);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  position: relative;
  transition: color var(--transition);
}

.nav__links a::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 1.5px;
  background: var(--color-accent);
  transition: width var(--transition);
}

.nav__links a:hover,
.nav__links a.active {
  color: var(--color-accent);
}

.nav__links a:hover::after,
.nav__links a.active::after {
  width: 100%;
}

.nav__actions {
  grid-column: 3; /* fixe la colonne même quand .nav__links (colonne 2) est display:none */
  display: flex;
  align-items: center;
  gap: var(--space-4);
  justify-self: end;
}

.nav__cta {
  position: relative;
  overflow: hidden;
  font-size: var(--text-base);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: var(--space-2) var(--space-5);
  border: 2.5px solid var(--color-accent);
  color: var(--color-accent);
  border-radius: var(--radius-sm);
  /* background-color n'a de délai qu'à l'entrée du survol (voir :hover
     ci-dessous) : sans lui, il passait au jaune instantanément au survol,
     rendant le balayage invisible (jaune sur jaune dès la première frame).
     Au départ du survol, le retour doit être instantané, sinon le fond
     reste jaune pendant que le ::before s'est déjà vidé. */
  transition: color var(--transition), box-shadow var(--transition), background-color 0s linear 0s;
}

/* Remplissage jaune qui part de la gauche au survol, comme une jauge qui se
   remplit — rapide, pas un simple fondu. */
.nav__cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.25s ease-out;
}

.nav__cta-label {
  position: relative;
  z-index: 1;
}

.nav__cta:hover::before {
  transform: scaleX(1);
}

.nav__cta:hover {
  color: var(--color-bg);
  /* Le remplissage visuel vient du ::before animé juste au-dessus (balayage) ;
     ce background-color ne change rien à l'écran (recouvert par le ::before)
     mais donne au curseur adaptatif (js/main.js) une vraie couleur de fond à
     lire — sans ça, il ne "voit" qu'un fond transparent sur ce bouton. Le
     délai (0.25s) n'est appliqué qu'ici, à l'entrée du survol, pour ne pas
     retarder aussi la sortie (cf. transition de base sur .nav__cta). */
  background-color: var(--color-accent);
  transition: color var(--transition), box-shadow var(--transition), background-color 0s linear 0.25s;
  box-shadow: var(--shadow-gold);
}

/* Bouton de langue : indépendant de la nav, fixe en haut à droite de l'écran.
   En haut de page, la nav est pleine largeur et son bouton "Demander un
   devis" s'étend jusque-là — le bouton de langue est donc plus bas par
   défaut, et ne remonte à sa position d'origine qu'une fois la nav repassée
   en pilule flottante (classe ajoutée en JS, voir main.js). */
.lang-switch {
  position: fixed;
  /* + var(--space-3) : la nav est devenue plus haute depuis le passage à la
     police Georama (texte plus grand/plus gras dans .nav__links/.nav__cta),
     décalage ajouté pour garder le même espace de respiration qu'avant sous
     la nav pleine largeur. */
  top: calc(var(--space-20) + var(--space-3) + var(--banner-height)); /* suit la nav */
  right: var(--space-5);
  z-index: 200;
  transition: top var(--nav-shape-transition, 550ms var(--ease-out));
}

.lang-switch--scrolled {
  top: calc(var(--space-5) + var(--space-3) + var(--banner-height));
}

/* Entre l'apparition du hamburger (900px, .nav__cta disparaît) et environ
   1330px, la nav (même repassée en pilule) reste assez large pour que son
   bouton "Demander un devis" chevauche le bouton de langue, positionné en
   fixed indépendamment. Le bouton de langue redescend donc dans cette plage
   aussi, même une fois scrollé. */
@media (max-width: 1330px) {
  .lang-switch--scrolled {
    top: calc(var(--space-20) + var(--space-3) + var(--banner-height));
  }
}

.lang-switch__btn {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: rgba(17, 17, 19, 0.75);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  cursor: pointer;
  transition: border-color var(--transition);
}

.lang-switch__btn:hover,
.lang-switch__btn[aria-expanded="true"] {
  border-color: var(--color-accent);
}

.lang-switch__flag {
  width: 24px;
  height: 18px;
  object-fit: cover;
  border-radius: 3px;
  display: block;
  box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}

.lang-switch__chevron {
  color: var(--color-text-faint);
  transition: transform var(--transition);
}

.lang-switch__btn[aria-expanded="true"] .lang-switch__chevron {
  transform: rotate(180deg);
}

.lang-switch__panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.lang-switch__panel.is-open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: all;
}

.lang-switch__option {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2);
  border: none;
  border-radius: var(--radius-md);
  background: none;
  cursor: pointer;
  transition: background var(--transition), transform var(--transition);
}

.lang-switch__option:hover {
  background: rgba(246, 209, 0, 0.08);
  transform: scale(1.05);
}

.lang-switch__option.is-active {
  background: rgba(246, 209, 0, 0.12);
}

.lang-switch__option .lang-switch__flag {
  width: 32px;
  height: 24px;
}

/* Hamburger */
.nav__hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
  padding: var(--space-2);
  z-index: 101; /* reste au-dessus du panneau pour se transformer en croix */
}

.nav__hamburger span {
  display: block;
  width: 24px;
  height: 1.5px;
  background: var(--color-text);
  transition: transform var(--transition), opacity var(--transition);
}

.nav__hamburger[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}
.nav__hamburger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.nav__hamburger[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

/* Le menu hamburger prend le relais un peu avant le seuil mobile général
   (768px, voir plus bas) : entre les deux largeurs, les liens de nav et le
   bouton CTA n'ont plus assez de place dans la pilule et se chevauchent
   (le texte du bouton passe même à la ligne). */
@media (max-width: 900px) {
  .nav__links, .nav__cta {
    display: none;
  }

  .nav__hamburger {
    display: flex;
  }
}

/* Mobile nav : panneau qui descend du haut */
.nav__mobile {
  /* `visibility` plutôt que `display:none` : une transition ne peut pas
     partir de display:none. Passe à "hidden" en fin de fermeture (delay),
     "visible" immédiatement à l'ouverture. */
  position: fixed;
  inset: 0;
  z-index: 115; /* au-dessus de la bannière (110) */
  background: rgba(6, 6, 7, 0.55);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s var(--ease-out), visibility 0s linear 0.3s;
}

.nav__mobile.open {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
  transition: opacity 0.3s var(--ease-out), visibility 0s linear 0s;
}

.nav__mobile-panel {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding: calc(92px + var(--banner-height)) var(--space-6) var(--space-6);
  background: rgba(10, 10, 11, 0.98);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--color-border);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
  transform: translateY(-100%); /* glissement depuis hors-écran */
  opacity: 0;
  transition: transform 0.28s var(--ease-out), opacity 0.2s ease;
}

.nav__mobile.open .nav__mobile-panel {
  transform: translateY(0);
  opacity: 1;
}

/* Bouton "Me contacter" : action principale, en haut du panneau */
.nav__mobile-contact {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-4);
  background: var(--color-accent);
  color: var(--color-bg);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-base);
  text-transform: uppercase;
  border-radius: var(--radius-lg);
  transition: transform var(--transition), box-shadow var(--transition);
}

.nav__mobile-contact:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-gold);
}

/* Liste des pages : boutons compacts, pleine largeur */
.nav__mobile-links {
  display: flex;
  flex-direction: column;
}

.nav__mobile-links a {
  padding: var(--space-3) var(--space-1);
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-text);
  border-bottom: 1px solid var(--color-border);
  transition: color var(--transition);
}

.nav__mobile-links a:first-child {
  border-top: 1px solid var(--color-border);
}

.nav__mobile-links a:hover {
  color: var(--color-accent);
}

.nav__mobile-links-cta {
  color: var(--color-accent) !important;
}

/* Sélecteur de langue : au pied du panneau */
.nav__mobile-lang {
  display: flex;
  gap: var(--space-3);
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border);
}

.nav__mobile-lang-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
  transition: border-color var(--transition), color var(--transition);
}

.nav__mobile-lang-flag {
  width: 18px;
  height: 13px;
  object-fit: cover;
  border-radius: 2px;
  display: block;
}

.nav__mobile-lang-btn.is-active {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

/* Sur mobile, la langue se choisit dans le menu : on masque la pastille
   flottante. Même seuil que le passage au hamburger (voir plus haut,
   900px) : sinon entre 768 et 900px, la langue serait à la fois dans le
   menu hamburger et dans la pastille flottante, en double. */
@media (max-width: 900px) {
  .lang-switch {
    display: none;
  }
}

/* ---- SECTIONS ---- */
.section {
  padding-block: clamp(var(--space-16), 8vw, var(--space-32));
}

.container {
  width: 100%;
  max-width: var(--content-wide);
  margin-inline: auto;
  padding-inline: clamp(var(--space-6), 4vw, var(--space-16));
}

.container--narrow {
  max-width: var(--content-default);
}

/* ---- HERO ---- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.hero__photo {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 30%;
  z-index: 0;
}

.hero__photo-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(100deg, rgba(10,10,11,0.94) 0%, rgba(10,10,11,0.75) 38%, rgba(10,10,11,0.35) 68%, rgba(10,10,11,0.15) 100%),
    linear-gradient(to bottom, rgba(10,10,11,0.15) 0%, transparent 30%, transparent 70%, var(--color-bg) 100%);
}

.hero__bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 60% at 60% 40%, rgba(246,209,0,0.08) 0%, transparent 60%),
              radial-gradient(ellipse 50% 50% at 10% 80%, rgba(246,209,0,0.05) 0%, transparent 50%);
}

.hero__grid-lines {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse 70% 70% at 60% 50%, black 0%, transparent 80%);
}

.hero__content {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 2fr 1fr; /* texte 66% / photo 33% — espace maximal pour les mots longs */
  gap: var(--space-8);
  align-items: center;
  width: 100%;
  max-width: var(--content-wide);
  margin-inline: auto;
  padding-inline: clamp(var(--space-6), 4vw, var(--space-16));
  padding-top: calc(112px + var(--banner-height));
}

.hero__content--photo {
  grid-template-columns: 1fr;
}

.hero__text {
  /* Ancre la colonne texte pour que le flipper ne déplace rien */
  align-self: center;
}

.hero__badge {
  display: inline-block;
  background: var(--color-accent);
  color: var(--color-bg);
  font-weight: 700;
  font-size: var(--text-sm);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-4);
}

.hero__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 0.8rem + 3vw, 3.5rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 0.95;
  text-transform: uppercase;
  color: var(--color-text);
  margin-bottom: var(--space-3);
  display: block;         /* simple block — "Je fais" + espace réservé pour le flipper */
  position: relative;     /* ancre le flipper en position:absolute */
  padding-bottom: 1.55em; /* réserve l'espace du flipper, désormais plus grand que le titre */
  width: 100%;
  /* Le h1 fait toute la largeur de la colonne (nécessaire pour centrer le
     flipper à 50% en mobile, voir plus bas) mais le texte réel ("Je fais",
     le mot qui défile) est bien plus étroit — sans ça, survoler l'espace
     vide à droite du texte déclenchait quand même le curseur "zone de
     texte" (repère en I), le h1 comptant pour toute sa boîte, pas
     seulement là où du texte est visible. Coupé ici, réactivé juste sur les
     deux enfants qui portent le vrai texte. */
  pointer-events: none;
}

.hero__title-start,
.hero__flipper {
  pointer-events: auto;
}

.hero__title em {
  font-style: normal;
  color: var(--color-accent);
  display: block;
}

.hero__subtitle {
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  max-width: 52ch;
  margin-bottom: var(--space-10);
  line-height: 1.5;
}

.hero__actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.btn-primary {
  position: relative;
  /* `position: relative` seul ne crée pas de contexte d'empilement : sans
     z-index explicite ici, le ::before (z-index -1) passait sous le fond
     jaune du bouton lui-même au lieu de rester juste sous son texte, ce qui
     rendait le remplissage invisible. */
  z-index: 0;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-8);
  background: var(--color-accent);
  color: var(--color-bg);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-sm);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: var(--radius-sm);
  transition: box-shadow var(--transition);
}

/* Remplissage blanc qui part de la gauche au survol, comme une jauge qui se
   remplit — même effet que .nav__cta, sans le soulèvement au survol. Un
   z-index négatif suffit à garder ce pseudo-élément sous le texte du bouton,
   sans avoir à envelopper le contenu dans un span dédié. */
.btn-primary::before {
  content: '';
  position: absolute;
  inset: 0;
  background: #ffffff;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.25s ease-out;
  z-index: -1;
}

.btn-primary:hover::before {
  transform: scaleX(1);
}

.btn-primary:hover {
  box-shadow: var(--shadow-gold);
}

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-8);
  border: 2.5px solid var(--color-border);
  color: var(--color-text-muted);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-sm);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: var(--radius-sm);
  transition: border-color var(--transition), color var(--transition);
}

.btn-ghost:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

/* ---- MINDSET QUOTE ---- */
.mindset {
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  padding-block: clamp(var(--space-12), 6vw, var(--space-24));
}

.mindset__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--space-12);
  align-items: start;
}

.mindset__label {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  margin-bottom: var(--space-4);
}

.mindset__quote {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: 500;
  line-height: 1.45;
  color: var(--color-text);
}

.mindset__quote em {
  color: var(--color-accent);
  font-style: normal;
}

.mindset__divider {
  align-self: center;
  width: 1px;
  height: 120px;
  background: linear-gradient(to bottom, transparent, var(--color-border-accent), transparent);
}

.mindset__author {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-top: var(--space-4);
}

/* Who am I */
.who {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: var(--color-text);
}

.who span {
  color: var(--color-accent);
}

/* ---- STATS ---- */
/* Bannière pleine largeur (sort du conteneur centré), fond jaune plein et
   chiffres noirs — inspiré de la maquette fournie, à la place des anciennes
   cartes sombres avec liserés jaunes. */
.stats {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  background: var(--color-accent);
  padding-block: clamp(var(--space-12), 6vw, var(--space-20));
}

.stats__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
}

.stats__item {
  text-align: center;
  opacity: 1; /* repli si le navigateur ne supporte pas les animations liées au scroll */
}

/* Glissement directement piloté par la position de scroll (scrubbing), pas
   une transition à durée fixe : la position suit le curseur de scroll au
   pixel près, dans les deux sens. On utilise "cover" (toute la traversée de
   l'écran par l'élément, ~hauteur du viewport) plutôt que "entry" (seulement
   la hauteur du chiffre lui-même, à peine 100px — beaucoup trop court, d'où
   l'effet quasi instantané). cover 50% correspond à peu près au moment où
   l'élément croise le centre de l'écran : les 3 plages sont donc centrées
   autour de cette valeur (au lieu de se terminer dès le début du scroll),
   chacune légèrement décalée pour que les chiffres tombent l'un après
   l'autre pile autour de ce point, tout en restant scrubbés. */
@supports (animation-timeline: scroll()) {
  .stats__item {
    opacity: 0;
    animation: stats-item-kf linear both;
    animation-timeline: view();
  }

  .stats__item:nth-child(1) { animation-range: cover 35% cover 50%; }
  .stats__item:nth-child(2) { animation-range: cover 45% cover 60%; }
  .stats__item:nth-child(3) { animation-range: cover 55% cover 70%; }
}

@keyframes stats-item-kf {
  from { opacity: 0; transform: translateY(-90px); }
  to   { opacity: 1; transform: translateY(0); }
}

.stats__number {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 700;
  color: var(--color-bg);
  letter-spacing: -0.04em;
  line-height: 1;
  margin-bottom: var(--space-2);
}

.stats__label {
  font-size: var(--text-sm);
  color: var(--color-bg);
  opacity: 0.75;
  line-height: 1.4;
}

/* ---- MMI SECTION ---- */
.mmi {
  padding-block: clamp(var(--space-16), 8vw, var(--space-32));
}

.mmi__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: center;
}

/* Même style que .hero__badge (page d'accueil) : rectangle jaune, coins
   légèrement arrondis, texte gris très foncé — pour que tous les petits
   textes au-dessus des titres se ressemblent d'une page à l'autre. */
.section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--color-accent);
  color: var(--color-bg);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-5);
}

/* No decorative line before eyebrows */
.section-eyebrow::before {
  display: none;
}

.section-title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 800;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--color-text);
  margin-bottom: var(--space-6);
  line-height: 1.05;
}

.section-title em {
  font-style: normal;
  color: var(--color-accent);
}

.section-body {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  line-height: 1.7;
  max-width: 58ch;
}

.mmi__card {
  background: var(--color-surface);
  border: 1.5px solid var(--color-accent);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  position: relative;
  overflow: hidden;
}

.mmi__card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(246,209,0,0.06) 0%, transparent 60%);
  pointer-events: none;
}

.mmi__card-title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 800;
  text-transform: uppercase;
  color: var(--color-text);
  margin-bottom: var(--space-3);
}

.mmi__card-body {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  line-height: 1.65;
  font-style: italic;
}

/* ---- SECTION DIVIDER ---- */
.divider-line {
  height: 1px;
  background: linear-gradient(to right, transparent, var(--color-border-accent) 30%, var(--color-border-accent) 70%, transparent);
  margin-block: var(--space-2);
}

/* ---- ABOUT PAGE ---- */
.page-hero {
  padding-top: calc(112px + var(--banner-height) + clamp(var(--space-8), 4vw, var(--space-16)));
  padding-bottom: clamp(var(--space-12), 6vw, var(--space-20));
  background: radial-gradient(ellipse 60% 50% at 50% 0%, rgba(246,209,0,0.07) 0%, transparent 60%);
  text-align: center;
  border-bottom: 1px solid var(--color-border);
}

.page-hero__title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 800;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--color-text);
  margin-bottom: var(--space-6);
}

.page-hero__title em {
  color: var(--color-accent);
  font-style: normal;
}

.page-hero__subtitle {
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  max-width: 60ch;
  margin-inline: auto;
  line-height: 1.6;
}

.diamonds {
  display: flex;
  gap: var(--space-2);
  justify-content: center;
  margin-block: var(--space-6);
}

.diamonds span {
  width: 8px;
  height: 8px;
  background: var(--color-accent);
  transform: rotate(45deg);
}

/* About text content */
.about-intro {
  padding-block: clamp(var(--space-16), 6vw, var(--space-24));
}

.about-intro__grid {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: var(--space-16);
  align-items: start;
}

/* Sans ça, la carte avatar (aspect-ratio 1/1 + min-height 380px en mobile)
   force sa colonne de grille à s'élargir au-delà de l'écran : les items de
   grid ont un min-width:auto implicite qui les empêche sinon de rétrécir
   sous la taille intrinsèque de leur contenu. */
.about-intro__grid > * {
  min-width: 0;
}

.about-section {
  margin-bottom: var(--space-10);
}

.about-section-title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 800;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.about-section-title::before {
  content: '';
  display: block;
  width: 20px;
  height: 2px;
  background: var(--color-accent);
  flex-shrink: 0;
}

/* Timeline */
.timeline {
  padding-block: clamp(var(--space-12), 6vw, var(--space-24));
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.timeline__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
}

.timeline__col-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text);
  margin-bottom: var(--space-10);
  text-transform: uppercase;
}

.timeline__items {
  position: relative;
  padding-left: var(--space-8);
  /* Mise à jour en JS (voir about.js) au fil du scroll : distance en px que
     la "lumière" a parcourue depuis le haut de la frise. */
  --timeline-progress: 0px;
}

.timeline__items::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 1px;
  /* Au-dessus du point atteint par le scroll : accent (déjà "parcouru").
     En dessous : couleur neutre (pas encore atteint). Bande de transition
     douce de ~40px pour un effet "lumière" plutôt qu'un cut net. */
  background: linear-gradient(
    to bottom,
    var(--color-accent) 0,
    var(--color-accent) max(0px, calc(var(--timeline-progress) - 20px)),
    var(--color-border) calc(var(--timeline-progress) + 20px),
    var(--color-border) 100%
  );
}

.timeline__item {
  position: relative;
  margin-bottom: var(--space-8);
}

.timeline__item::before {
  content: '';
  position: absolute;
  left: calc(-1 * var(--space-8));
  top: 8px;
  width: 8px;
  height: 8px;
  background: var(--color-border);
  border-radius: 50%;
  transform: translateX(-3.5px);
  transition: background 0.4s ease, box-shadow 0.4s ease;
}

/* Basculé en JS quand la lumière du scroll atteint ce point de la frise */
.timeline__item.is-lit::before {
  background: var(--color-accent);
  box-shadow: 0 0 10px 2px rgba(246, 209, 0, 0.55);
}

.timeline__year {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-accent);
  letter-spacing: 0.04em;
  margin-bottom: var(--space-2);
}

.timeline__card {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-left: 2px solid var(--color-accent);
  border-radius: var(--radius-md);
  padding: var(--space-5) var(--space-6);
}

.timeline__degree {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-base);
  color: var(--color-text);
  margin-bottom: var(--space-2);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.timeline__spec {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  font-style: italic;
}

/* Skills — GRID 2 COLONNES */
.skills__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4) var(--space-6);
}

@media (max-width: 700px) {
  .skills__list {
    grid-template-columns: 1fr;
  }
}

/* Skill item : icône + texte + pourcentage + barre */
.skill-item {
  display: grid;
  grid-template-columns: 20px 1fr auto;
  gap: 6px;
  align-items: center;
  position: relative; /* nécessaire pour le tooltip (desktop) */
  /* Apparition en cascade au scroll (voir IntersectionObserver dans about.js) */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}

.skill-item.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Pourcentage toujours visible (le tooltip ::after n'apparaît qu'au survol,
   donc jamais sur tactile) */
.skill-item__pct {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-faint);
  flex-shrink: 0;
}

/* Icônes */
.skill-item__icon {
  width: 20px;
  height: 20px;
  object-fit: contain;
  opacity: 0.9;
}

/* Nom du skill */
.skill-item__name {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
}

/* Barre */
.skill-item__bar-wrap {
  width: 160px;
  height: 3px;
  background: var(--color-surface-3);
  border-radius: 99px;
  overflow: hidden;
  grid-column: 1 / -1;
}

.skill-item__bar {
  height: 100%;
  background: linear-gradient(to right, var(--color-accent-dim), var(--color-accent));
  border-radius: 99px;
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 1s var(--ease-out);
}

.skill-item__bar.animated {
  transform: scaleX(1);
}

/* Tooltip */
.skill-item::after {
  content: attr(data-tooltip);
  position: absolute;
  top: -35px;
  left: 50%;
  transform: translateX(-50%) translateY(-5px);
  background: var(--color-surface-3);
  color: var(--color-text);
  padding: 6px 10px;
  font-size: var(--text-xs);
  border-radius: 6px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}

.skill-item:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(-10px);
}


/* Icônes */
.skill-item__icon {
  width: 20px;
  height: 20px;
  object-fit: contain;
  opacity: 0.9;
}

/* Nom du skill */
.skill-item__name {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
}

/* Barre */
.skill-item__bar-wrap {
  width: 160px;
  height: 3px;
  background: var(--color-surface-3);
  border-radius: 99px;
  overflow: hidden;

  /* Barre sur toute la largeur du skill */
  grid-column: 1 / -1;
}

.skill-item__bar {
  height: 100%;
  background: linear-gradient(to right, var(--color-accent-dim), var(--color-accent));
  border-radius: 99px;
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 1s var(--ease-out);
}

.skill-item__bar.animated {
  transform: scaleX(1);
}


/* Competences catégories */
.competences-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-8);
}

.comp-card {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-5) var(--space-6);
}

.comp-card__title {
  font-weight: 700;
  font-size: var(--text-sm);
  color: var(--color-text);
  margin-bottom: var(--space-2);
}

.comp-card__desc {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: 1.5;
}

/* ---- FILTRES DE CONTEXTE (Tous / Personnel / Université / Professionnel) ---- */
.projects-context-tabs {
  display: flex;
  justify-content: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-top: var(--space-8);
}

.projects-context-tab {
  display: inline-block;
  padding: var(--space-3) var(--space-6);
  border: 1.5px solid var(--color-accent);
  border-radius: var(--radius-full);
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-accent);
  background: none;
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}

.projects-context-tab:hover {
  background: rgba(246, 209, 0, 0.08);
}

.projects-context-tab.active {
  background: var(--color-accent);
  color: var(--color-bg);
}

/* ---- RECHERCHE + FILTRE PAR CATÉGORIE ---- */
.projects-search-row {
  display: flex;
  justify-content: center;
  gap: var(--space-3);
  max-width: 640px;
  margin: var(--space-6) auto 0;
}

.projects-search {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
}

.projects-search__icon {
  position: absolute;
  left: var(--space-4);
  color: var(--color-text-faint);
  pointer-events: none;
}

.projects-search__input {
  width: 100%;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4) var(--space-3) calc(var(--space-4) * 2 + 16px);
  font-size: var(--text-sm);
  color: var(--color-text);
  text-align: left;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.projects-search__input::placeholder {
  color: var(--color-text-faint);
}

.projects-search__input:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(246, 209, 0, 0.1);
}

.projects-filter {
  position: relative;
  flex-shrink: 0;
}

.projects-filter__btn {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: border-color var(--transition), color var(--transition), background var(--transition);
}

.projects-filter__btn:hover,
.projects-filter__btn[aria-expanded="true"] {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.projects-filter__btn.has-active {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-bg);
}

.projects-filter__popover {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 30;
  width: 220px;
  max-width: calc(100vw - 2 * var(--space-4));
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: var(--space-4);
  text-align: left;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.projects-filter__popover.is-open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: all;
}

.projects-filter__title {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  margin-bottom: var(--space-3);
}

.projects-filter__option {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}

.projects-filter__option:hover {
  background: rgba(246, 209, 0, 0.06);
  color: var(--color-text);
}

.projects-filter__option input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--color-border);
  border-radius: 5px;
  background: var(--color-surface-3);
  flex-shrink: 0;
  cursor: pointer;
  position: relative;
  transition: background var(--transition), border-color var(--transition);
}

.projects-filter__option input[type="checkbox"]:hover {
  border-color: var(--color-border-accent);
}

.projects-filter__option input[type="checkbox"]:checked {
  background: var(--color-accent);
  border-color: var(--color-accent);
}

.projects-filter__option input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 1px;
  width: 5px;
  height: 9px;
  border: solid var(--color-bg);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.projects-filter__option input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.projects-empty {
  text-align: center;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  padding-block: var(--space-16);
  max-width: none;
  margin-inline: auto;
}

.projects-empty__img {
  display: block;
  max-width: 200px;
  width: 100%;
  height: auto;
  margin: 0 auto var(--space-6);
}

@media (max-width: 480px) {
  .projects-search-row {
    flex-wrap: wrap;
  }
}

/* Projects grid */
.projects-grid-section {
  padding-block: clamp(var(--space-12), 6vw, var(--space-24));
}

.projects-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}

.project-card {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: pointer;
  aspect-ratio: 1 / 1;
  background: var(--color-surface-2);
  transition: transform var(--transition), box-shadow var(--transition);
}

.project-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 0 1px var(--color-border-accent);
}



.project-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.3) 50%, transparent 100%);
  opacity: 0.7;
  transition: opacity var(--transition);
}

.project-card:hover .project-card__overlay {
  opacity: 1;
}

.project-card__content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--space-6);
  transform: translateY(8px);
  transition: transform 0.3s var(--ease-out);
}

.project-card:hover .project-card__content {
  transform: translateY(0);
}

/* Étiquette de carte (au plus une à la fois : "vedette" prioritaire sur le
   type stage/alternance/prestation — voir cardBadge() dans js/views/projects.js
   et home.js) : un lavis de couleur concentré vers le bas de la carte,
   qui se dissout vers le haut, avec le nom de l'étiquette ancré tout en bas. */
.project-card__label-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.project-card__label-glow--featured     { background: linear-gradient(to top, rgba(246, 209, 0, 0.65) 0%, rgba(246, 209, 0, 0.22) 32%, transparent 62%); }
.project-card__label-glow--stage        { background: linear-gradient(to top, rgba(167, 139, 250, 0.65) 0%, rgba(167, 139, 250, 0.22) 32%, transparent 62%); }
.project-card__label-glow--alternance   { background: linear-gradient(to top, rgba(91, 157, 250, 0.65) 0%, rgba(91, 157, 250, 0.22) 32%, transparent 62%); }
.project-card__label-glow--prestation   { background: linear-gradient(to top, rgba(74, 222, 128, 0.65) 0%, rgba(74, 222, 128, 0.22) 32%, transparent 62%); }

.project-card__label-name {
  position: absolute;
  left: var(--space-6);
  right: var(--space-6);
  bottom: var(--space-3);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: white;
  text-shadow: 0 1px 4px rgba(0,0,0,0.6);
  z-index: 2;
}

/* Bordure + ruban d'étiquette : demandé uniquement pour les cartes de la
   grille Réalisations (projects.js) — les cartes "à la une" de l'accueil
   (home.js, classe .feat-card) gardent l'ancien style glow/texte simple,
   non concernées par cette maquette. Le lavis de fond (.project-card__label-glow)
   est masqué ici : avec la bordure + le ruban pleins, il faisait doublon et
   surchargeait la carte. */
.projects-grid .project-card {
  border: 8px solid #3f3f46;
}

/* Cartes avec étiquette : bordure en dégradé plutôt qu'en couleur unie. La
   bordure classique ci-dessus passe à largeur 0 (et pas juste transparente :
   une bordure transparente réserve quand même son épaisseur d'espace, ce qui
   repoussait l'anneau en dégradé vers l'intérieur de la carte au lieu de le
   laisser courir sur le vrai contour). L'anneau lui-même est un pseudo-élément
   plein cadre, masqué au centre pour ne garder que l'épaisseur du contour. */
.projects-grid .project-card--featured,
.projects-grid .project-card--stage,
.projects-grid .project-card--alternance,
.projects-grid .project-card--prestation {
  border-width: 0;
}

.projects-grid .project-card--featured::before,
.projects-grid .project-card--stage::before,
.projects-grid .project-card--alternance::before,
.projects-grid .project-card--prestation::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 8px;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 1;
}
.projects-grid .project-card--featured::before    { background: linear-gradient(to bottom, #fff4b3, #f6d100); }
.projects-grid .project-card--stage::before       { background: linear-gradient(to bottom, #e4d9fd, #a78bfa); }
.projects-grid .project-card--alternance::before  { background: linear-gradient(to bottom, #d3e6fe, #5b9dfa); }
.projects-grid .project-card--prestation::before  { background: linear-gradient(to bottom, #d1fadf, #4ade80); }

.projects-grid .project-card__label-glow { display: none; }

.projects-grid .project-card__label-name {
  left: 0;
  right: auto;
  bottom: 0;
  padding: 6px 30px 6px 20px;
  font-size: 15px;
  clip-path: polygon(0 0, 100% 0, calc(100% - 16px) 50%, 100% 100%, 0 100%);
  text-shadow: none;
  color: #0a0a0b;
}
.projects-grid .project-card--featured    .project-card__label-name { background: #f6d100; color: #0a0a0b; }
.projects-grid .project-card--stage       .project-card__label-name { background: #a78bfa; color: white; }
.projects-grid .project-card--alternance  .project-card__label-name { background: #5b9dfa; color: white; }
.projects-grid .project-card--prestation  .project-card__label-name { background: #4ade80; color: #0a0a0b; }

/* Domaine du projet (tag catégorie) : plaqué sur le bord droit, caché par
   défaut et révélé uniquement au survol — au lieu d'être affiché en
   permanence comme sur l'accueil (voir la règle de base .project-card__tag,
   non touchée, toujours utilisée par home.js). */
.projects-grid .project-card__tag {
  position: absolute;
  bottom: 16px;
  right: var(--space-4);
  transform: translateX(6px);
  margin-bottom: 0;
  padding: var(--space-1) var(--space-3);
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
  border-radius: var(--radius-full);
  opacity: 0;
  z-index: 2;
  pointer-events: none;
  transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}

.projects-grid .project-card:hover .project-card__tag {
  opacity: 1;
  transform: translateX(0);
}

/* Épingle des projets phares : coin haut-droit, toujours visible (pas
   seulement au survol) puisqu'elle signale un statut, pas une info annexe.
   Rond noir semi-transparent (pas la couleur accent, pour rester discrète
   sur n'importe quelle image de couverture) + icône punaise inclinée. */
.project-card__pin {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: white;
  box-shadow: 0 4px 14px rgba(0,0,0,0.35);
  z-index: 3;
}

.project-card__tag {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-1);
}

.project-card__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 800;
  text-transform: uppercase;
  color: white;
  letter-spacing: -0.01em;
  margin-bottom: var(--space-2);
}


.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.form-label {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.form-input,
.form-textarea {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-text);
  transition: border-color var(--transition), box-shadow var(--transition);
  outline: none;
  width: 100%;
  resize: vertical;
}

.form-input::placeholder,
.form-textarea::placeholder {
  color: var(--color-text-faint);
}

.form-input:focus,
.form-textarea:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(246,209,0,0.1);
}

.form-textarea {
  min-height: 140px;
}

.form-submit {
  width: 100%;
  padding: var(--space-4) var(--space-8);
  background: var(--color-accent);
  color: var(--color-bg);
  font-weight: 700;
  font-size: var(--text-sm);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: var(--radius-md);
  cursor: pointer;
  border: none;
  transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
  margin-top: var(--space-2);
}

.form-submit:hover {
  background: #ffffff;
  transform: translateY(-2px);
  box-shadow: var(--shadow-gold);
}

.form-submit:active {
  transform: translateY(0);
}

/* ======================================================
   PROJECT DETAIL PAGES
   ====================================================== */

/* ---- Back link ---- */
.proj-detail__back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-muted);
  text-decoration: none;
  margin-bottom: var(--space-8);
  transition: color var(--transition);
  letter-spacing: 0.02em;
}
.proj-detail__back:hover { color: var(--color-accent); }
.proj-detail__back svg { transition: transform var(--transition); }
.proj-detail__back:hover svg { transform: translateX(-3px); }

/* ---- Hero ---- */
.proj-detail__hero {
  padding-top: calc(112px + clamp(var(--space-12), 6vw, var(--space-20)));
  padding-bottom: 0;
}

.proj-detail__eyebrow {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-4);
}

.proj-detail__title {
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 5vw + 1rem, 5.5rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 0.95;
  text-transform: uppercase;
  color: var(--color-text);
  margin-bottom: var(--space-6);
}

.proj-detail__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-10);
}

.proj-detail__tag {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid var(--color-border-accent);
  color: var(--color-accent);
  background: rgba(246, 209, 0, 0.06);
}

/* Étiquettes "vedette" / type (stage/alternance/prestation) : tout en haut
   de la page projet, avant même l'eyebrow — sur la carte, une seule des deux
   s'affiche (vedette prioritaire), ici les deux apparaissent ensemble si le
   projet a bien les deux. Même forme de puce que .proj-detail__tag, mais
   colorée par étiquette pour rester cohérent avec la carte. */
.proj-detail__badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.proj-detail__badge {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid transparent;
}
.proj-detail__badge--featured   { border-color: var(--color-border-accent); color: var(--color-accent); background: rgba(246, 209, 0, 0.1); }
.proj-detail__badge--stage      { border-color: rgba(91, 157, 250, 0.5); color: #7db2fb; background: rgba(91, 157, 250, 0.1); }
.proj-detail__badge--alternance { border-color: rgba(167, 139, 250, 0.5); color: #bba6fc; background: rgba(167, 139, 250, 0.1); }
.proj-detail__badge--prestation { border-color: rgba(74, 222, 128, 0.5); color: #7de3a0; background: rgba(74, 222, 128, 0.1); }

/* ---- Intro grid ---- */
.proj-detail__intro {
  padding-block: clamp(var(--space-12), 5vw, var(--space-20));
  border-bottom: 1px solid var(--color-border);
}

.proj-detail__intro-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: clamp(var(--space-8), 4vw, var(--space-16));
  align-items: start;
}

.proj-detail__lead {
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  color: var(--color-text-muted);
  line-height: 1.7;
}

.proj-detail__meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.proj-detail__meta-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.proj-detail__meta-label {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.proj-detail__meta-value {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
}

/* ---- Main content ---- */
.proj-detail__content {
  padding-block: clamp(var(--space-12), 6vw, var(--space-24));
}

.proj-detail__section {
  margin-bottom: clamp(var(--space-14), 7vw, var(--space-24));
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-10);
}

.proj-detail__section:first-child {
  border-top: none;
  padding-top: 0;
}

.proj-detail__section-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 800;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--color-text);
  margin-bottom: var(--space-6);
}

.proj-detail__text p {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text-muted);
  line-height: 1.75;
  margin-bottom: var(--space-4);
}

/* ---- CTA section ---- */
.proj-detail__cta-section {
  padding-block: clamp(var(--space-16), 8vw, var(--space-24));
  border-top: 1px solid var(--color-border);
  background: var(--color-surface);
}

/* ---- Responsive ---- */
@media (max-width: 768px) {
  .proj-detail__intro-grid {
    grid-template-columns: 1fr;
  }
}

/* ---- FEATURED PROJECTS GRID / MOBILE CARROUSEL ---- */
.feat-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}

@media (max-width: 768px) {
  .feat-cards-grid {
    display: flex;
    gap: var(--space-4);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--space-4);
    padding-bottom: var(--space-4);
    margin-inline: calc(var(--space-4) * -1);
    padding-inline: var(--space-4);
    -webkit-overflow-scrolling: touch;
    /* pan-x seul empêchait aussi le scroll vertical de la page dès que le
       doigt touchait le carrousel (touch-action ne se limite pas à
       "autoriser l'horizontal", il désactive tout le reste, y compris le
       vertical). On autorise donc explicitement les deux axes : le
       swipe horizontal reste géré nativement par ce conteneur (ce qui
       évite qu'il soit interprété comme un geste de navigation retour),
       et le vertical peut toujours remonter vers le scroll de la page. */
    touch-action: pan-x pan-y;
    overscroll-behavior-x: contain;
  }
  .feat-cards-grid::-webkit-scrollbar {
    display: none;
  }
  .feat-cards-grid {
    scrollbar-width: none;
  }
  .feat-cards-grid .feat-card {
    flex: 0 0 78%;
    scroll-snap-align: center;
  }
}

/* ---- FEATURED CARDS CASCADE ANIMATION ---- */
.feat-card {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.feat-card.is-visible {
  opacity: 1;
  transform: translateY(0);
}


/* ---- FOOTER ---- */
.footer {
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  /* Le padding bas est volontairement large : le bouton musique et Blob sont
     tous deux en position fixed, bas de viewport — sans cette marge, ils
     recouvrent le copyright une fois scrollé tout en bas de la page. */
  padding-block: var(--space-12) var(--space-24);
}

.footer__inner {
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: var(--space-6);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-10);
  flex-wrap: wrap;
}

.footer__brand {
  max-width: 340px;
}

.footer__logo {
  display: inline-flex;
  margin-bottom: var(--space-4);
}

.footer__logo .nav__logo-img {
  height: 56px;
}

.footer__tagline {
  font-size: var(--text-sm);
  color: var(--color-text-faint);
  line-height: 1.6;
  margin-bottom: var(--space-5);
}

.footer__socials {
  display: flex;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

.footer__social {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Icônes monochromes (silhouettes noires sur PNG transparent) recolorées via
   mask-image plutôt qu'un filtre approximatif : mask ne garde que la forme
   (canal alpha) de l'image et laisse background-color imposer la couleur
   exacte, jaune au repos, blanc au survol. */
.footer__social-icon {
  display: block;
  width: 26px;
  height: 26px;
  
  /* On enlève la couleur jaune et on met un fond transparent */
  background-color: transparent;
  
  /* On affiche directement l'image de ton logo */
  background-image: var(--icon-url);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  
  /* On adapte la transition pour le survol */
  transition: opacity var(--transition), transform var(--transition);
  pointer-events: none;
}

.footer__social:hover .footer__social-icon {
  /* Comme on ne peut plus juste changer le fond en blanc, 
     on peut utiliser une petite transparence ou un effet pour marquer le survol */
  opacity: 0.7; 
  /* Optionnel : tu peux aussi ajouter un petit zoom au survol */
  /* transform: scale(1.1); */
}

.footer__totop {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  background: transparent;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-4);
  cursor: pointer;
  transition: color var(--transition), border-color var(--transition);
}

.footer__totop:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.footer__cols {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.footer__cols-row {
  display: flex;
  gap: var(--space-12);
}

/* Étire sur toute la largeur des deux colonnes ci-dessus (héritée du
   stretch par défaut de .footer__cols en colonne) — juste recentré, le
   bouton .btn-primary de base aligne son contenu à gauche par défaut. */
/* Contour jaune au repos, comme .nav__cta ("Demander un devis"), avec le
   même remplissage jaune au survol (le ::before hérité de .btn-primary
   fait déjà le balayage — on le recolore juste en jaune au lieu du blanc
   par défaut, et le texte passe en sombre pour rester lisible dessus). */
.footer__cta {
  justify-content: center;
  background: transparent;
  color: var(--color-accent);
  border: 1.5px solid var(--color-accent);
  font-size: var(--text-base);
  transition: color var(--transition);
}

.footer__cta::before {
  background: var(--color-accent);
}

.footer__cta:hover {
  color: var(--color-bg);
  /* Neutralise le box-shadow: var(--shadow-gold) hérité de .btn-primary:hover
     (une lueur jaune diffuse) — pas voulue sur ce bouton. */
  box-shadow: none;
}

.footer__col {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-3);
  text-align: right;
}

.footer__col-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-accent);
  margin-bottom: var(--space-1);
}

.footer__col a {
  font-size: var(--text-sm);
  color: var(--color-text-faint);
  transition: color var(--transition);
}

.footer__col a:hover {
  color: var(--color-accent);
}

/* Fait maintenant partie de .footer__inner (même largeur/marges que le
   logo et les colonnes de liens au-dessus) et repasse à gauche : centré sur
   toute la largeur du footer, son bord gauche ne tombait pas au même endroit
   que celui du bloc logo au-dessus, ce qui créait un décalage visuel. */
.footer__bottom {
  flex-basis: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: var(--space-6);
}

.footer__copy {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  text-align: left;
}

/* Bouton discret vers le terminal caché (js/modules/cmd.js) : opacité faible
   au repos pour ne pas attirer l'oeil, révélé au survol/focus seulement. */
.footer__cmd-btn {
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  background: transparent;
  border: none;
  padding: var(--space-1) var(--space-2);
  cursor: pointer;
  opacity: 0.35;
  transition: opacity var(--transition), color var(--transition);
}

.footer__cmd-btn:hover,
.footer__cmd-btn:focus-visible {
  opacity: 1;
  color: var(--color-accent);
}

/* En dessous de 768px, les colonnes de droite (alignées à droite en desktop)
   passent à gauche : un texte aligné à droite sur toute la largeur de l'écran
   est difficile à lire. */
@media (max-width: 768px) {
  .footer__inner {
    flex-direction: column;
  }
  .footer__col {
    align-items: flex-start;
    text-align: left;
  }
}

/* ---- FLIP COUNTER ANIMATION ---- */
.hero__flipper {
  display: block;
  font-style: normal;
  color: var(--color-accent);
  /* Sorti du flux = ne peut jamais provoquer de layout shift */
  position: absolute;
  left: 0;
  /* Positionnement juste sous "Je fais" :
     line-height du titre = font-size × 0.95, avec les mêmes coefficients que
     .hero__title ci-dessus (clamp(2rem, 0.8rem + 3vw, 3.5rem)), × 0.95 */
  top: clamp(1.9rem, 0.76rem + 2.85vw, 3.325rem);
  white-space: nowrap;
  font-size: clamp(2.5rem, 1.2rem + 4.2vw, 4.8rem);
  line-height: 1.1;
}

#flip-word {
  display: inline-block;
  animation: none;
}

#flip-word.flip-out {
  animation: flipOut 0.18s cubic-bezier(0.4, 0, 1, 1) both;
}

#flip-word.flip-in {
  animation: flipIn 0.22s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes flipOut {
  0%   { transform: translateY(0) scaleY(1);   opacity: 1; }
  100% { transform: translateY(-60%) scaleY(0.6); opacity: 0; }
}

@keyframes flipIn {
  0%   { transform: translateY(60%) scaleY(0.6); opacity: 0; }
  100% { transform: translateY(0) scaleY(1);   opacity: 1; }
}

/* ---- SCROLL ANIMATIONS ---- */
.reveal {
  opacity: 1; /* fallback */
}

@supports (animation-timeline: scroll()) {
  .reveal {
    opacity: 0;
    animation: reveal-fade linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 60%;
  }
}

@keyframes reveal-fade {
  to { opacity: 1; }
}

/* ---- PARALLAX ---- */
.parallax-layer {
  will-change: transform;
}

/* ---- RESPONSIVE ---- */
@media (max-width: 768px) {
  .nav__links, .nav__cta {
    display: none;
  }

  .nav__hamburger {
    display: flex;
  }

  .hero__content {
    grid-template-columns: 1fr;
    text-align: center;
    padding-top: calc(92px + var(--banner-height));
  }

  .hero__subtitle {
    margin-inline: auto;
  }

  .hero__actions {
    justify-content: center;
  }

  /* Centrer le flipper (position:absolute) en mobile — désormais PLUS GRAND que le titre */
  .hero__flipper {
    left: 50%;
    transform: translateX(-50%);
    font-size: clamp(2.6rem, 10.5vw, 4rem);
    word-spacing: 0.08em;
    /* Repositionner juste SOUS le titre (désormais plus petit) : title × 0.95 + petit espace */
    top: calc(clamp(2.3rem, 8.5vw, 3.4rem) * 0.95 + 8px);
  }

  /* Titre "Je fais" plus petit que le flipper en mobile aussi, agrandi */
  .hero__title {
    font-size: clamp(2.3rem, 8.5vw, 3.4rem);
    /* padding-bottom = gap + hauteur du flipper (plus grand), en em relatif au titre */
    padding-bottom: 1.6em;
  }

  .mindset__inner {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .mindset__divider {
    display: none;
  }

  .stats__grid {
    grid-template-columns: 1fr;
  }

  .mmi__grid,
  .about-intro__grid,
  .timeline__grid {
    grid-template-columns: 1fr;
  }

  .projects-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Le ruban d'étiquette (nom + dégradé) passait sur deux lignes sur les
     cartes étroites en 2 colonnes — police et remplissage réduits, plus de
     retour à la ligne forcé. */
  .projects-grid .project-card__label-name {
    font-size: 11px;
    padding: 5px 22px 5px 14px;
    white-space: nowrap;
    clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 50%, 100% 100%, 0 100%);
  }

  .competences-grid {
    grid-template-columns: 1fr 1fr;
  }

  /* Même style que les cartes de formation (.timeline__card) : liseré jaune à gauche */
  .comp-card {
    border-left: 2px solid var(--color-accent);
  }

  .form-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  /* Reste en 2 colonnes même sur petit mobile : les cartes rétrécissent
     plutôt que de repasser en 1 colonne. */
  .projects-grid {
    gap: var(--space-3);
  }

  /* Bordure (unie ou en dégradé) proportionnellement trop épaisse sur des
     cartes aussi étroites — allégée pour cette taille d'écran. */
  .projects-grid .project-card {
    border-width: 5px;
  }
  /* Les cartes avec étiquette doivent garder border-width: 0 (voir plus haut
     pourquoi : une bordure réelle, même fine, réserve son épaisseur d'espace
     et repousse l'anneau en dégradé vers l'intérieur de la carte au lieu de
     le laisser courir sur le vrai contour) — sans ce ré-écrasement, la règle
     générale ci-dessus la réactivait par erreur sur mobile. */
  .projects-grid .project-card--featured,
  .projects-grid .project-card--stage,
  .projects-grid .project-card--alternance,
  .projects-grid .project-card--prestation {
    border-width: 0;
  }
  .projects-grid .project-card--featured::before,
  .projects-grid .project-card--stage::before,
  .projects-grid .project-card--alternance::before,
  .projects-grid .project-card--prestation::before {
    padding: 5px;
  }

  .project-card__content {
    padding: var(--space-4);
  }

  .project-card__title {
    font-size: var(--text-base);
  }

  .competences-grid {
    grid-template-columns: 1fr;
  }
}


/* ---- CAROUSEL ---- */
.carousel {
  position: relative;
  width: 100%;
}

.carousel__track-wrap {
  overflow: hidden;
  border-radius: 12px;
  background: var(--color-surface-2);
}

.carousel__track {
  display: flex;
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

.carousel__slide {
  min-width: 100%;
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
}

.carousel__slide img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Vidéo jouable directement sur la page projet — lecteur natif pour un
   fichier direct, iframe du lecteur Drive pour un lien de partage Google
   Drive (voir driveFileId() dans project-detail.js) — même forme dans les
   deux cas (coins arrondis, fond de secours pendant le chargement). */
.proj-detail__video {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  border: 0;
  background: var(--color-surface-2);
  display: block;
}

.carousel__btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  background: rgba(10, 10, 11, 0.75);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
  backdrop-filter: blur(6px);
}

.carousel__btn:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #0a0a0b;
}

.carousel__btn--prev { left: -20px; }
.carousel__btn--next { right: -20px; }

.carousel__dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
}

.carousel__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-border);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background 0.2s, transform 0.2s;
}

.carousel__dot.active {
  background: var(--color-accent);
  transform: scale(1.4);
}

@media (max-width: 640px) {
  .carousel__btn--prev { left: 6px; }
  .carousel__btn--next { right: 6px; }
}

/*Splash screen */

#splash {
    position: fixed;
    inset: 0;
    background: var(--color-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    transition: opacity 0.6s ease;
}

#splash.hide {
    opacity: 0;
}

/* Le Blob (#mascot-root, injecté par blob.js) reste invisible tant que le
   splash n'a pas atteint sa dernière étape (.zoom-out) — piloté en CSS pur
   pour être actif dès le premier paint, sans dépendre d'un script qui
   pourrait s'exécuter un instant trop tard (voir main.js). */
#splash:not(.zoom-out) ~ #mascot-root {
    visibility: hidden;
}

/* Étape finale : le fond n'attaque son fondu qu'une fois le zoom du logo
   terminé (délai = durée de l'animation splash-logo-zoom, 0.45s) — le site
   n'apparaît qu'après que le logo ait fini de grossir, pas pendant. */
#splash.zoom-out {
    transition: opacity 0.3s ease 0.45s;
    opacity: 0;
}

#splash-inner {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#splash-logo {
    position: relative;
    z-index: 1;
    width: 160px; /* ajuste selon ton logo */
    height: auto;
    animation: bounce-in 0.6s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

@keyframes bounce-in {
    0%   { transform: scale(0);    opacity: 0; }
    60%  { transform: scale(1.1);  opacity: 1; }
    80%  { transform: scale(0.95); }
    100% { transform: scale(1);    opacity: 1; }
}

/* Étape 3 : le logo s'agrandit d'un coup (déclenché par la classe .zoom-out) */
#splash.zoom-out #splash-logo {
    animation: splash-logo-zoom 0.45s cubic-bezier(0.5, 0, 0.75, 0) forwards;
}

@keyframes splash-logo-zoom {
    0%   { transform: scale(1); opacity: 1; }
    100% { transform: scale(3.4); opacity: 0; }
}

/* Étape 2 : anneau de chargement jaune qui tourne autour du logo */
#splash-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 220px;
    height: 220px;
    margin: -110px 0 0 -110px;
    border-radius: 50%;
    border: 3px solid rgba(246, 209, 0, 0.15);
    border-top-color: var(--color-accent);
    opacity: 0;
    pointer-events: none;
}

#splash.show-ring #splash-ring,
#splash.hide-ring #splash-ring {
    animation: splash-spin 1s linear infinite;
}

#splash.show-ring #splash-ring {
    opacity: 1;
}

#splash.hide-ring #splash-ring {
    opacity: 0;
    transition: opacity 0.3s ease;
}

@keyframes splash-spin {
    to { transform: rotate(360deg); }
}


/* ── Écran de chargement page projet : Blob au centre, un point orbite
   autour de lui (piloté en CSS) et ses yeux le suivent (piloté en JS dans
   project-detail.js, même logique que le suivi du curseur de blob.js) ── */
.proj-loading {
  min-height: 60vh;
  padding-top: calc(112px + var(--banner-height));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-6, 1.5rem);
}

.proj-loading__stage {
  position: relative;
  width: 140px;
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.proj-loading__ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 3px solid rgba(246, 209, 0, 0.15);
  border-top-color: var(--color-accent, #f6d100);
  animation: proj-loading-spin 2.4s linear infinite;
}

@keyframes proj-loading-spin {
  to { transform: rotate(360deg); }
}

.proj-loading__dot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  background: var(--color-accent, #f6d100);
  animation: proj-loading-orbit 2.4s linear infinite;
}

@keyframes proj-loading-orbit {
  from { transform: rotate(0deg) translateX(70px); }
  to   { transform: rotate(360deg) translateX(70px); }
}

.proj-loading__blob {
  position: relative;
  z-index: 1;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: #f5c842;
  box-shadow: 0 8px 28px rgba(0,0,0,.18);
  display: flex;
  align-items: center;
  justify-content: center;
}

.proj-loading__blob .eyes {
  display: flex;
  gap: 9px;
  align-items: center;
}

.proj-loading__blob .eye {
  width: 14px;
  height: 22px;
  background: #1a1814;
  border-radius: 6px;
  transition: transform 0.08s ease-out;
}

/* ---- BOUTON RACCOURCI ADMIN (visible seulement en session admin) ---- */
.admin-shortcut-btn {
  position: fixed;
  bottom: calc(1.5rem + 64px + 0.75rem);
  right: 1.5rem;
  z-index: 9997; /* sous le Blob (9999), au-dessus du reste */
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  transition: transform var(--transition), box-shadow var(--transition);
}
.admin-shortcut-btn__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.admin-shortcut-btn:hover {
  transform: scale(1.08);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.3);
}

@media (max-width: 768px) {
  .admin-shortcut-btn {
    bottom: calc(1rem + 52px + 0.6rem + env(safe-area-inset-bottom, 0px));
    right: 1rem;
    width: 42px;
    height: 42px;
  }
}

/* ============================================================
   MASCOTTE CHATBOT — HΣKΛ Portfolio
   À coller dans ton fichier CSS principal
   ============================================================ */

#mascot-root {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .75rem;
  /* .chat-window garde sa taille en layout (320×520px) même fermé — il est
     juste rendu invisible via opacity/scale. Sans ce pointer-events:none, ce
     conteneur devient une immense zone invisible qui intercepte les clics
     destinés aux éléments situés en dessous (ex : bouton musique). Seuls les
     enfants réellement visibles (bouton, bulle, fenêtre ouverte) le
     réactivent. */
  pointer-events: none;
}

/* .chat-window et .mascot-bubble gèrent déjà leur propre pointer-events ;
   ici on ne réactive que le bouton, seul élément toujours cliquable. */
#mascot-root .mascot-btn {
  pointer-events: auto;
}

/* Le menu mobile (panneau + sélecteur de langue) doit toujours rester cliquable :
   le Blob a un z-index plus haut que tout le reste du site, donc on le masque
   tant que le menu est ouvert plutôt que de risquer qu'il intercepte des clics. */
body.mobile-menu-open #mascot-root {
  display: none;
}

/* ── Bulle invite ─────────────────────────────────────────── */
.mascot-bubble {
  background: #fff;
  border: 1px solid #e0ddd8;
  border-radius: .75rem .75rem .25rem .75rem;
  padding: .4rem 1rem;
  font-size: .8rem;
  color: #555;
  box-shadow: 0 4px 12px rgba(0,0,0,.1);
  white-space: nowrap;
  pointer-events: none;
  opacity: 1;
  transform: translateY(0) scale(1);
  transition: opacity .3s ease, transform .3s cubic-bezier(.16,1,.3,1);
}
.mascot-bubble.hidden {
  opacity: 0;
  transform: translateY(6px) scale(.95);
}

/* ── Boule ────────────────────────────────────────────────── */
.mascot-btn {
  position: relative;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #f5c842;
  box-shadow: 0 8px 28px rgba(0,0,0,.18);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: none;
  transition: transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s ease;
  animation: mascot-idle 3s ease-in-out infinite;
}
.mascot-btn:hover {
  transform: scale(1.12);
  box-shadow: 0 16px 40px rgba(0,0,0,.22);
  animation: none;
}
.mascot-btn:active {
  transform: scale(.95);
  animation: none;
}

@keyframes mascot-idle {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

/* ── Sommeil du soir (21h-7h) ─────────────────────────────── */
/* Respiration plus lente/discrète que l'idle normal, yeux fermés fixes (pas
   de clignement — cf. .mascot-btn.is-sleeping .eye ci-dessous) et trois "Z"
   qui s'enchaînent au-dessus de la tête (cf. .mascot-zzz plus bas). */
.mascot-btn.is-sleeping {
  animation: mascot-sleep-breathe 4s ease-in-out infinite;
}
.mascot-btn.is-sleeping:hover {
  transform: none;
  box-shadow: 0 8px 28px rgba(0,0,0,.18);
}
@keyframes mascot-sleep-breathe {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}

/* Trois lettres distinctes (pas un seul pseudo-élément) pour pouvoir les
   décaler indépendamment dans le temps : chacune rejoue la même animation
   (apparaît petite, grossit en montant vers le haut-gauche, puis s'efface),
   avec un décalage d'1/3 de cycle — la suivante apparaît pendant que la
   précédente s'efface, comme sur la maquette fournie. */
.mascot-zzz {
  position: absolute;
  top: -6px;
  left: 4px;
  color: #fff;
  font-weight: 800;
  line-height: 1;
  opacity: 0;
  pointer-events: none;
  transform: translate(0, 0) scale(.4);
}
.mascot-zzz--1 { font-size: 20px; }
.mascot-zzz--2 { font-size: 15px; }
.mascot-zzz--3 { font-size: 11px; }

.mascot-btn.is-sleeping .mascot-zzz--1 { animation: mascot-zzz-cascade 3s ease-in-out infinite; animation-delay: 0s; }
.mascot-btn.is-sleeping .mascot-zzz--2 { animation: mascot-zzz-cascade 3s ease-in-out infinite; animation-delay: 1s; }
.mascot-btn.is-sleeping .mascot-zzz--3 { animation: mascot-zzz-cascade 3s ease-in-out infinite; animation-delay: 2s; }

@keyframes mascot-zzz-cascade {
  0%   { opacity: 0; transform: translate(0, 0) scale(.4); }
  15%  { opacity: 1; }
  55%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-16px, -26px) scale(1.15); }
}

/* ── Réveil surpris ───────────────────────────────────────── */
.mascot-btn.is-waking {
  animation: mascot-wake-shake .5s ease-out;
}
@keyframes mascot-wake-shake {
  0%   { transform: translateY(0) rotate(0); }
  20%  { transform: translateY(-10px) rotate(-6deg); }
  40%  { transform: translateY(2px) rotate(5deg); }
  60%  { transform: translateY(-4px) rotate(-3deg); }
  80%  { transform: translateY(1px) rotate(2deg); }
  100% { transform: translateY(0) rotate(0); }
}

/* ── Yeux ─────────────────────────────────────────────────── */
.mascot-btn .eyes {
  display: flex;
  gap: 9px;
  align-items: center;
}
.mascot-btn .eye {
  width: 10px;
  height: 16px;
  background: #1a1814;
  border-radius: 5px;
  animation: blink 4s ease-in-out infinite;
  transition: transform 0.08s ease-out; /* suivi curseur fluide */
}
.mascot-btn .eye:nth-child(2) {
  animation-delay: .06s;
}
@keyframes blink {
  0%,96%,100% { transform: scaleY(1); }
  98%          { transform: scaleY(.12); }
}
.mascot-btn.chat-open .eye {
  transform: translateY(-2px);
}

/* Yeux fermés en arc de sourire (façon 😌) plutôt qu'un simple trait plat,
   et une légère oscillation verticale façon ronflement. */
.mascot-btn.is-sleeping .eye {
  width: 14px;
  height: 7px;
  background: transparent;
  border: none;
  border-bottom: 3px solid #1a1814;
  border-radius: 0 0 50% 50%;
  transform: translateY(0);
  animation: mascot-snore-eyes 2s ease-in-out infinite;
  animation-delay: 0s; /* les deux yeux ronflent en rythme, sans le délai de
                          :nth-child(2) prévu pour le clignement */
}
@keyframes mascot-snore-eyes {
  0%, 100% { transform: translateY(0); }
  35%      { transform: translateY(-3px); }
  55%      { transform: translateY(-3px); }
  80%      { transform: translateY(0); }
}

.mascot-btn.is-waking .eye {
  animation: mascot-wake-eyes .5s ease-out;
  animation-delay: 0s; /* les deux yeux se réveillent en même temps, sans le
                          délai de :nth-child(2) prévu pour le clignement */
}
@keyframes mascot-wake-eyes {
  0%   { transform: scaleY(.12) scaleX(1); }
  45%  { transform: scaleY(1.6) scaleX(1.3); }
  100% { transform: scaleY(1) scaleX(1); }
}

/* ── Fenêtre chatbot ──────────────────────────────────────── */
.chat-window {
  width: 320px;
  background: #fff;
  border: 1px solid #e0ddd8;
  border-radius: 1rem;
  box-shadow: 0 12px 40px rgba(0,0,0,.15);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  max-height: 520px;
  transform-origin: bottom right;
  transform: scale(.85) translateY(12px);
  opacity: 0;
  pointer-events: none;
  transition: transform .35s cubic-bezier(.16,1,.3,1), opacity .25s ease;
}
.chat-window.open {
  transform: scale(1) translateY(0);
  opacity: 1;
  pointer-events: auto;
}

/* ── Header ───────────────────────────────────────────────── */
.chat-header {
  background: #1a1814;
  color: #f5c842;
  padding: .75rem 1rem;
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-shrink: 0;
}
.chat-header-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #f5c842;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.chat-header-avatar span {
  width: 5px;
  height: 8px;
  background: #1a1814;
  border-radius: 3px;
  display: inline-block;
  margin: 0 2px;
}
.chat-header-info { flex: 1; }
.chat-header-name {
  font-weight: 700;
  font-size: .875rem;
}
.chat-header-status {
  font-size: .75rem;
  opacity: .7;
}
.chat-close {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: #f5c842;
  cursor: pointer;
  opacity: .7;
  transition: opacity .18s ease, background .18s ease;
}
.chat-close:hover {
  opacity: 1;
  background: rgba(255,255,255,.1);
}

/* ── Zone messages ────────────────────────────────────────── */
.chat-messages {
  flex: 1;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: .75rem;
  overflow-y: auto;
  scroll-behavior: smooth;
  min-height: 0;
}
.chat-messages::-webkit-scrollbar { width: 4px; }
.chat-messages::-webkit-scrollbar-thumb {
  background: #e0ddd8;
  border-radius: 9999px;
}

/* ── Bulles messages ──────────────────────────────────────── */
.chat-msg {
  max-width: 84%;
  padding: .5rem .75rem;
  border-radius: .75rem;
  font-size: .875rem;
  line-height: 1.55;
  word-break: break-word;
}
.chat-msg.bot {
  background: #f3f0eb;
  color: #28251d;
  align-self: flex-start;
  border-bottom-left-radius: .2rem;
}
.chat-msg.user {
  background: #1a1814;
  color: #f5c842;
  align-self: flex-end;
  border-bottom-right-radius: .2rem;
}

/* ── Typing indicator ─────────────────────────────────────── */
.chat-typing {
  display: flex;
  gap: 5px;
  align-items: center;
  padding: .5rem .75rem;
  background: #f3f0eb;
  border-radius: .75rem;
  border-bottom-left-radius: .2rem;
  align-self: flex-start;
}
.chat-typing span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #bab9b4;
  animation: typing-dot 1.2s ease-in-out infinite;
}
.chat-typing span:nth-child(2) { animation-delay: .2s; }
.chat-typing span:nth-child(3) { animation-delay: .4s; }
@keyframes typing-dot {
  0%,100% { opacity: .3; transform: translateY(0); }
  50%      { opacity: 1;  transform: translateY(-4px); }
}

/* ── Suggestions ──────────────────────────────────────────── */
.chat-suggestions {
  padding: .5rem 1rem;
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  border-top: 1px solid #e0ddd8;
  flex-shrink: 0;
}
.chat-sugg-btn {
  font-size: .75rem;
  padding: .25rem .75rem;
  border-radius: 9999px;
  background: #f3f0eb;
  border: 1px solid #e0ddd8;
  color: #7a7974;
  cursor: pointer;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.chat-sugg-btn:hover {
  background: #1a1814;
  color: #ffffff;
  border-color: #1a1814;
}

/* ── Input ────────────────────────────────────────────────── */
.chat-input-row {
  display: flex;
  gap: .5rem;
  align-items: center;
  padding: .75rem 1rem;
  border-top: 1px solid #e0ddd8;
  flex-shrink: 0;
}
.chat-input {
  flex: 1;
  background: #f3f0eb;
  border: 1px solid #e0ddd8;
  border-radius: 9999px;
  padding: .5rem 1rem;
  font-size: .875rem;
  color: #28251d;
  outline: none;
  font-family: inherit;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.chat-input:focus {
  border-color: #1a1814;
  box-shadow: 0 0 0 3px rgba(26,24,20,.1);
}
.chat-send-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #1a1814;
  color: #f5c842;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .18s ease, transform .15s ease;
}
.chat-send-btn:hover { background: #333; }
.chat-send-btn:active { transform: scale(.9); }



/* ---- BOUTON MUSIQUE ---- */
/* ---- TOAST "LECTURE EN COURS" ---- */
.music-toast {
  position: fixed;
  bottom: calc(2rem + 48px + var(--space-3));
  left: 2rem;
  z-index: 9998;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  max-width: 280px;
  background: var(--color-surface);
  border: 1.5px solid var(--color-border-accent);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transform: translateX(-140%);
  pointer-events: none;
  transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.music-toast.is-visible {
  opacity: 1;
  transform: translateX(0);
}

.music-toast__icon {
  flex-shrink: 0;
  color: var(--color-accent);
}

.music-toast__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.music-toast__label {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-faint);
}

.music-toast__title {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.music-btn {
  position: fixed;
  bottom: 2rem;
  left: 2rem;
  z-index: 9998;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1.5px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-muted);
  cursor: pointer;
  flex-shrink: 0;
  touch-action: manipulation;
  transition: border-color var(--transition), color var(--transition), background var(--transition), box-shadow var(--transition);
}

.music-btn:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
  background: rgba(246, 209, 0, 0.06);
  box-shadow: 0 0 20px rgba(246, 209, 0, 0.2);
}

/* Icônes play/pause */
.music-icon--pause,
.music-bars {
  display: none;
}

.music-btn.is-playing .music-icon--play {
  display: none;
}

.music-btn.is-playing .music-icon--pause {
  display: block;
}

.music-btn.is-playing {
  border-color: var(--color-accent);
  color: var(--color-accent);
  background: rgba(246, 209, 0, 0.06);
  box-shadow: 0 0 20px rgba(246, 209, 0, 0.2);
}

/* ---- BOUTON SKIP (morceau suivant) ---- */
.music-skip-btn {
  position: fixed;
  bottom: 2rem;
  left: calc(2rem + 48px + var(--space-3));
  z-index: 9998;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-top: 4px; /* recentre visuellement avec le bouton play (48px) */
  border-radius: 50%;
  border: 1.5px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-muted);
  cursor: pointer;
  flex-shrink: 0;
  touch-action: manipulation;
  opacity: 0;
  transform: scale(0.8) translateX(-8px);
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease, border-color var(--transition), color var(--transition), background var(--transition);
}

.music-skip-btn.is-visible {
  opacity: 1;
  transform: scale(1) translateX(0);
  pointer-events: all;
}

.music-skip-btn:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
  background: rgba(246, 209, 0, 0.06);
}

/* Sur mobile, la barre d'outils de Safari peut recouvrir le bas de l'écran et
   le bord gauche déclenche parfois le geste "retour" du navigateur : on
   remonte les boutons et on respecte la zone sûre de l'appareil. */
@media (max-width: 768px) {
  .music-btn {
    bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
    left: calc(1.25rem + env(safe-area-inset-left, 0px));
  }
  .music-skip-btn {
    bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
    left: calc(1.25rem + 48px + var(--space-3) + env(safe-area-inset-left, 0px));
  }
}

/* ---- SPECTRE AUDIO ---- */
.audio-spectrum {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 24px;
  z-index: 9997;
  display: flex;
  align-items: flex-end;
  /* space-between plutôt que center + gap fixe : avec des barres de largeur
     fixe, "center" les regroupait au milieu de l'écran au lieu de les
     répartir sur toute la largeur. */
  justify-content: space-between;
  padding-inline: 2rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
}

.audio-spectrum.is-playing {
  opacity: 1;
}

/* Hauteur pilotée en JS image par image (Web Audio API — AnalyserNode),
   d'après les vraies fréquences du morceau en cours, voir js/modules/music.js */
.spectrum-bar {
  width: 3px;
  height: 3px; /* hauteur par défaut = un trait, avant la première frame d'analyse */
  background: var(--color-accent);
  border-radius: 2px 2px 0 0;
  opacity: 0.85;
  transform-origin: bottom;
  transition: height 0.05s linear;
}

/* ── Barre quota visuelle ─────────────────────────────── */
.chat-quota-wrap {
  padding: 0.35rem 1rem 0.45rem;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.chat-quota-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-body);
  font-size: 0.7rem; /* légèrement sous --text-xs pour rester discret */
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-faint);
}

.chat-quota-label span:first-child {
  opacity: 0.9;
}

.chat-quota-label span:last-child {
  font-weight: 600;
  font-size: 0.72rem;
  color: var(--color-text-muted);
  transition: color 0.3s ease;
}

/* texte quand plus de quota */
.chat-quota-label span:last-child.is-empty {
  color: var(--color-accent-dim);
}

/* Track = partie vide, en gris */
.chat-quota-track {
  height: 3px;
  border-radius: 9999px;
  background: rgba(255,255,255,0.08); /* gris discret sur fond dark */
  overflow: hidden;
}

/* Fill = partie remplie, en jaune */
.chat-quota-fill {
  height: 100%;
  border-radius: 9999px;
  background: linear-gradient(90deg, var(--color-accent), var(--color-accent-bright));
  transition:
    width 0.4s cubic-bezier(0.16,1,0.3,1),
    background 0.4s ease;
}

/* Peu de quota : jaune plus chaud / orange */
.chat-quota-fill.low {
  background: linear-gradient(90deg, #f5a742, var(--color-accent));
}

/* Plus de quota : on laisse juste la track grise visible */
.chat-quota-fill.empty {
  background: transparent;
  width: 0% !important;
}

/* ── Wrapper messages (pour les boutons) ─────────────── */
.chat-msg-wrap {
  display: flex;
  flex-direction: column;
  gap: .4rem;
}

.chat-msg-wrap--user {
  align-items: flex-end;
}

.chat-msg-wrap--bot {
  align-items: flex-start;
}

/* ── Bouton "Voir les projets" ────────────────────────── */
.chat-project-btn {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .35rem .9rem;
  border-radius: 9999px;
  background: #1a1814;
  color: #f5c842;
  font-size: .78rem;
  font-weight: 600;
  text-decoration: none;
  border: 1.5px solid #f5c842;
  cursor: pointer;
  transition:
    background .18s ease,
    color .18s ease,
    transform .15s ease,
    box-shadow .18s ease;
}

.chat-project-btn:hover {
  background: #ffffff;
  color: #1a1814;
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(0,0,0,.25);
}

.chat-project-btn:active {
  transform: scale(.96);
  box-shadow: none;
}

/* ── Bouton "En savoir plus sur HΣKΛ" ─────────────── */
.chat-about-btn {
  background: transparent;
  color: #1a1814;
  border-color: #1a1814;
}

.chat-about-btn:hover {
  background: #1a1814;
  color: #ffffff;
}

/* ── Bouton "Contacter HΣKΛ" ──────────────────────── */
.chat-contact-btn {
  background: transparent;
  color: #1a1814;
  border-color: #1a1814;
}

.chat-contact-btn:hover {
  background: #1a1814;
  color: #ffffff;
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 768px) {
  #mascot-root {
    bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
    right: 1rem;
  }
  .mascot-btn {
    width: 52px;
    height: 52px;
  }
  .mascot-btn .eyes {
    gap: 7px;
  }
  .mascot-btn .eye {
    width: 8px;
    height: 13px;
  }
}

@media (max-width: 400px) {
  #mascot-root { bottom: 1rem; right: 1rem; }
  .chat-window { width: calc(100vw - 2rem); }
}

/* ============================================================
   PAGE RÉSERVER — stepper + prestation + profil + récapitulatif
   ============================================================ */

.reserve-step {
  display: none;
}

.reserve-step.is-active {
  display: block;
  animation: reserve-fade 0.4s var(--ease-out);
}

@keyframes reserve-fade {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* ---- Stepper de progression ---- */
.reserve-progress {
  margin-bottom: var(--space-12);
}

.reserve-progress__steps {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}

.reserve-progress__step {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.reserve-progress__badge {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: rotate(45deg);
  border-radius: 6px;
  background: var(--color-surface-3);
  color: var(--color-text-faint);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-sm);
  transition: background var(--transition), color var(--transition);
}

.reserve-progress__badge span {
  transform: rotate(-45deg);
}

.reserve-progress__label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-base);
  color: var(--color-text-faint);
  transition: color var(--transition);
}

.reserve-progress__step.is-done .reserve-progress__badge,
.reserve-progress__step.is-active .reserve-progress__badge {
  background: var(--color-accent);
  color: var(--color-bg);
}

.reserve-progress__step.is-done .reserve-progress__label,
.reserve-progress__step.is-active .reserve-progress__label {
  color: var(--color-text);
}

.reserve-progress__bar {
  height: 4px;
  border-radius: var(--radius-full);
  background: var(--color-surface-3);
  overflow: hidden;
}

.reserve-progress__bar-fill {
  height: 100%;
  width: 33.33%;
  background: var(--color-accent);
  border-radius: var(--radius-full);
  transition: width 0.4s var(--ease-out);
}

/* ---- Grille de prestations ---- */
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-10);
  margin-top: var(--space-20);
}

.service-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  cursor: pointer;
  background: var(--color-surface);
  border: 1.5px solid var(--color-border-accent);
  border-radius: var(--radius-lg);
  padding: var(--space-10) var(--space-6) var(--space-6);
  transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}

.service-card:hover {
  border-color: var(--color-accent);
}

.service-card.is-selected {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-gold);
}

.service-card__icon {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 24px rgba(246,209,0,0.35);
}

.service-card__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 800;
  text-transform: uppercase;
  color: var(--color-text);
  margin-top: var(--space-6);
  margin-bottom: var(--space-2);
}

.service-card__desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.6;
  flex-grow: 1;
  margin-bottom: var(--space-8);
}

/* Même effet de survol que .nav__cta / .btn-primary : balayage blanc depuis
   la gauche via ::before (z-index:-1, pas besoin d'envelopper le texte dans
   un span), plus de soulèvement (translateY) au survol. */
.service-card__btn {
  position: relative;
  z-index: 0;
  overflow: hidden;
  width: 100%;
  background: var(--color-accent);
  color: var(--color-bg);
  border: none;
  border-radius: var(--radius-md);
  padding: var(--space-4);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-base);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  cursor: pointer;
  transition: box-shadow var(--transition);
  margin-top: auto;
}

.service-card__btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: #ffffff;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.25s ease-out;
  z-index: -1;
}

.service-card__btn:hover::before {
  transform: scaleX(1);
}

.service-card__btn:hover {
  box-shadow: var(--shadow-gold);
}

/* Vérification du statut en cours (voir js/views/reserver.js) : bouton
   désactivé le temps de la requête /api/services, sans présumer que la
   prestation est fermée. */
.service-card.is-checking .service-card__btn {
  cursor: wait;
  opacity: 0.7;
}

/* Prestation fermée depuis /hk-admin */
.service-card.is-unavailable {
  opacity: 0.5;
  filter: grayscale(0.4);
}

/* Aucun effet de survol sur une prestation indisponible : la bordure ne
   passe pas en jaune et le curseur ne prétend plus que la carte est
   cliquable (elle ne l'est pas, voir js/views/reserver.js). */
.service-card.is-unavailable {
  cursor: default;
}
.service-card.is-unavailable:hover {
  border-color: var(--color-border-accent);
}

.service-card.is-unavailable .service-card__btn {
  cursor: not-allowed;
  background: var(--color-surface-3);
  color: var(--color-text-faint);
}

/* Pas de balayage ni de halo doré sur un bouton désactivé. */
.service-card.is-unavailable .service-card__btn::before {
  display: none;
}

.service-card.is-unavailable .service-card__btn:hover {
  box-shadow: none;
}

/* ---- Navigation entre étapes (Retour / Continuer) ---- */
.reserve-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: var(--space-8);
}

.reserve-nav__back {
  background: none;
  border: none;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  transition: color var(--transition);
}

.reserve-nav__back:hover {
  color: var(--color-accent);
}

/* ---- Menu "tiroir" (drawer dropdown) — Qui êtes-vous ? ---- */
.drawer-select {
  position: relative;
}

.drawer-select__btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-text);
  cursor: pointer;
  text-align: left;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.drawer-select__btn[aria-expanded="true"] {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(246,209,0,0.1);
}

.drawer-select__value.is-placeholder {
  color: var(--color-text-faint);
}

.drawer-select__chevron {
  flex-shrink: 0;
  color: var(--color-text-faint);
  transition: transform var(--transition);
}

.drawer-select__btn[aria-expanded="true"] .drawer-select__chevron {
  transform: rotate(180deg);
}

.drawer-select__panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 20;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px);
  transition: max-height 0.3s var(--ease-out), opacity 0.2s ease, transform 0.3s var(--ease-out);
}

.drawer-select.is-open .drawer-select__panel {
  max-height: 260px;
  opacity: 1;
  pointer-events: all;
  transform: translateY(0);
}

.drawer-select__option {
  text-align: left;
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  background: none;
  border: none;
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}

.drawer-select__option:hover,
.drawer-select__option.is-active {
  background: rgba(246, 209, 0, 0.08);
  color: var(--color-accent);
}

/* ---- Récapitulatif ---- */
.recap-list {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  margin-top: var(--space-8);
}

.recap-list__row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-6);
  padding-block: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

.recap-list__row:last-child {
  border-bottom: none;
}

.recap-list__label {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  flex-shrink: 0;
}

.recap-list__value {
  font-size: var(--text-sm);
  color: var(--color-text);
  text-align: right;
}

/* ---- Confirmation finale ---- */
.reserve-confirm {
  text-align: center;
  padding-block: var(--space-16);
}

.reserve-confirm__icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(67, 200, 108, 0.1);
  border: 1.5px solid #43c86c;
  color: #43c86c;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-inline: auto;
  margin-bottom: var(--space-6);
}

@media (max-width: 600px) {
  .services-grid {
    grid-template-columns: 1fr;
  }

  .reserve-progress__steps {
    gap: var(--space-4);
  }

  .reserve-progress__label {
    font-size: var(--text-sm);
  }
}

/* ============================================================
   CARTE "À PROPOS" — avatar + réseaux + identité (style image 2)
   ============================================================ */

.about-card {
  position: relative;
  min-height: clamp(380px, 32vw, 480px);
  margin-top: -50px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.about-card__avatar {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center 55%;
  pointer-events: none;
  animation: avatar-float 5s ease-in-out infinite;
}

@keyframes avatar-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-16px); }
}

.about-card__footer {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-6);
}

.about-card__socials {
  display: flex;
  gap: var(--space-2);
  flex-shrink: 0;
}

.about-card__social {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background: var(--color-accent);
  color: var(--color-bg);
  transition: transform var(--transition), background var(--transition);
}

.about-card__social-icon {
  width: 28px;
  height: 28px;
  object-fit: contain;
  display: block;
  pointer-events: none;
}

.about-card__social:hover {
  transform: translateY(-2px);
  background: #ffffff;
}

/* Réseau pas encore actif (ex : Discord) : grisé, pas d'effet au survol,
   juste une infobulle expliquant pourquoi le lien ne mène nulle part. */
.about-card__social--disabled {
  position: relative;
  background: var(--color-surface-2, #1c1c1e);
  color: var(--color-text-faint);
  cursor: default;
  pointer-events: auto; /* le survol doit rester possible pour l'infobulle */
}
.about-card__social--disabled:hover {
  transform: none;
  background: var(--color-surface-2, #1c1c1e);
}
.about-card__social--disabled .about-card__social-icon {
  opacity: 0.4;
}
.about-card__social--disabled::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: #2a2a2d;
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
  padding: 0.45em 0.8em;
  border-radius: var(--radius-sm);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
  z-index: 5;
}
.about-card__social--disabled::before {
  content: '';
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: #2a2a2d;
  opacity: 0;
  transition: opacity 0.15s ease;
  z-index: 5;
}
.about-card__social--disabled:hover::after,
.about-card__social--disabled:hover::before {
  opacity: 1;
}
.about-card__social--disabled:hover::after {
  transform: translateX(-50%) translateY(0);
}

.about-card__identity {
  display: flex;
  align-items: stretch;
  gap: var(--space-4);
  text-align: right;
}

.about-card__bar {
  width: 4px;
  background: var(--color-accent);
  flex-shrink: 0;
}

.about-card__name {
  font-family: 'Red Hat Display', var(--font-display);
  font-weight: 700;
  font-size: var(--text-xl);
  color: var(--color-text);
  letter-spacing: 0.02em;
  line-height: 1;
}

.about-card__role {
  font-family: 'Red Hat Display', var(--font-body);
  font-style: italic;
  font-weight: 400;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-top: var(--space-1);
}

@media (max-width: 600px) {
  .about-card {
    aspect-ratio: 1 / 1;
    /* Sans ça, le min-height clamp (380px mini) de la règle de base force
       l'aspect-ratio à imposer aussi une largeur de 380px, qui déborde de
       la colonne mobile : la largeur doit rester pilotée par la grille. */
    min-height: 0;
    margin-top: 0;
  }

  .about-card__footer {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
  }

  .about-card__identity {
    text-align: left;
  }

  /* Avatar agrandi et remonté : dépasse légèrement le cadre de la carte pour
     effleurer la rangée de boutons sociaux (le footer garde z-index:1, donc
     les boutons restent toujours au premier plan par-dessus l'avatar).
     Uniquement en hauteur : un débordement horizontal (`left` négatif,
     `width` > 100%) poussait l'image au-delà du bord de l'écran sur les
     petits mobiles, ce qui élargissait toute la page (même bug que le
     popover de filtres sur /projects — un élément qui déborde du viewport
     agrandit le viewport lui-même, nav et Blob compris). */
  .about-card__avatar {
    width: 100%;
    height: 132%;
    top: -22%;
    left: 0;
    /* Sans ça, right/bottom hérités de inset:0 (règle de base) entrent en
       sur-contrainte avec width/height et le navigateur ignore la largeur. */
    right: auto;
    bottom: auto;
  }
}

/* ---- TERMINAL CACHÉ (js/modules/cmd.js) ----
   Prend TOUT l'écran, sans "fenêtre" ni fond flouté : ça doit se sentir
   comme une vraie page cachée du site (URL changée en /terminal), pas
   comme une modale qui flotte par-dessus. Tout le reste du body (nav,
   footer, bannière, curseur custom, mascotte Blob, bouton musique...) est
   masqué via body.cmd-active pendant que c'est ouvert. */
body.cmd-active > *:not(#siteCmd) {
  visibility: hidden;
}

.site-cmd {
  position: fixed;
  inset: 0;
  z-index: 100000;
  background: var(--color-bg);
  display: flex;
  justify-content: center;
  padding: var(--space-10) var(--space-6);
}

.site-cmd[hidden] {
  display: none;
}

/* Hauteur pleine et colonne flex : la sortie (flex:1) prend tout l'espace
   restant sous la bannière et défile toute seule dans sa boîte, la ligne de
   saisie reste ancrée en bas — au lieu de laisser toute la page grandir
   avec l'historique des commandes (l'input finissait par se retrouver
   coincé au milieu du texte accumulé). */
.site-cmd__inner {
  width: min(1100px, 94vw);
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
}

.site-cmd__banner {
  flex: none;
  color: var(--color-accent);
  /* Petit décalage façon "brique en relief" plutôt qu'un simple flou, dans
     l'esprit des bannières ASCII en blocs des CLI (Claude Code notamment). */
  text-shadow: 2px 2px 0 var(--color-accent-dim), 0 0 20px var(--color-accent-glow);
  font-size: clamp(8px, 2.4vw, 22px);
  line-height: 1.15;
  letter-spacing: 0;
  white-space: pre;
  overflow-x: auto;
  margin: 0;
}

.site-cmd__sub {
  flex: none;
  color: var(--color-text-faint);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  margin: 0;
}

.site-cmd__output {
  flex: 1 1 auto;
  /* Sans ça, un enfant flex ne peut jamais descendre sous la taille de son
     contenu (min-height:auto par défaut) : l'overflow ne se déclencherait
     jamais et c'est toute la colonne (donc la page) qui grandirait à la
     place, repoussant la ligne de saisie hors de vue. */
  min-height: 0;
  overflow-y: auto;
  font-size: var(--text-sm);
  color: var(--color-text);
  white-space: pre-wrap;
  word-break: break-word;
}

.site-cmd__line {
  line-height: 1.6;
}

.site-cmd__line--echo {
  color: var(--color-text-muted);
}

.site-cmd__line--error {
  color: #ff6b6b;
}

.site-cmd__line--muted {
  color: var(--color-text-faint);
}

.site-cmd__inputline {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-3);
}

.site-cmd__prompt {
  color: var(--color-accent);
  font-size: var(--text-sm);
  white-space: nowrap;
}

.site-cmd__input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--color-text);
  font-size: var(--text-sm);
  font-family: inherit;
}