/*
Theme Name: Gil Portfolio
Theme URI: https://portfoliogil.com
Author: Gil Randolphe Lontsi
Description: Theme sur mesure du portfolio de Gil Randolphe Lontsi, charge de marketing digital. Direction Ardoise Signal, mise en page entierement en flexbox.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 7.1
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: gil-portfolio
*/

/* =========================================================================
   1. Jetons de conception. Chaque couleur, police, taille et espacement
      est defini ici une seule fois puis reference avec var().
   ========================================================================= */

:root {
  /* Couleurs */
  --color-bg: #f4f6fa;
  --color-surface: #ffffff;
  --color-ink: #101522;
  --color-muted: #495063;
  --color-line: #dbe0ea;
  --color-accent: #0066fd;
  --color-accent-deep: #0047b8;
  --color-accent-soft: #e7f0ff;
  --color-on-accent: #ffffff;
  --color-on-dark: #ffffff;
  --color-on-dark-soft: #aab3c8;
  --color-on-dark-line: #2a3145;
  --color-shadow: rgba(16, 21, 34, 0.07);
  --color-shadow-lift: rgba(16, 21, 34, 0.14);
  --color-shadow-header: rgba(16, 21, 34, 0.24);
  --color-focus: #0066fd;

  /* Familles de polices */
  --font-heading: "Schibsted Grotesk", "Segoe UI", "Helvetica Neue", sans-serif;
  --font-body: "Instrument Sans", "Segoe UI", "Helvetica Neue", sans-serif;

  /* Tailles de police */
  --size-display: clamp(1.75rem, 1.05rem + 1.9vw, 2.25rem);
  --size-h2: clamp(1.875rem, 1.3rem + 2.3vw, 2.75rem);
  --size-h3: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --size-h4: 1.0625rem;
  --size-lead: clamp(1.0625rem, 1rem + 0.35vw, 1.1875rem);
  --size-body: 1.0625rem;
  --size-small: 0.9375rem;
  --size-label: 0.8125rem;
  --size-stat: clamp(2.75rem, 1.9rem + 3.2vw, 4rem);
  --size-quote: clamp(1.0625rem, 1rem + 0.3vw, 1.125rem);
  --size-mark: 1.5rem;

  /* Graisses */
  --weight-body: 400;
  --weight-medium: 500;
  --weight-strong: 600;
  --weight-heading: 700;

  /* Rythme typographique */
  --leading-display: 1.03;
  --leading-heading: 1.14;
  --leading-body: 1.65;
  --leading-tight: 1.35;
  --tracking-display: -0.028em;
  --tracking-heading: -0.018em;
  --tracking-label: 0.08em;

  /* Espacements */
  --space-3xs: 4px;
  --space-2xs: 8px;
  --space-xs: 12px;
  --space-sm: 20px;
  --space-md: 28px;
  --space-lg: 36px;
  --space-xl: 64px;
  --space-2xl: 96px;
  --space-section: clamp(64px, 7.5vw, 104px);
  --space-gutter: clamp(20px, 4vw, 40px);

  /* Rayons */
  --radius-none: 0;
  --radius-media: 10px;
  --radius-card: 20px;
  --radius-pill: 999px;

  /* Mesures */
  --width-page: 1180px;
  --width-narrow: 760px;
  --width-text: 62ch;
  --width-hairline: 1px;
  --size-avatar: 52px;
  --size-toollogo: 32px;
  --size-toolchip: 60px;
  --size-portrait: clamp(150px, 15vw, 230px);
  --size-logomark: 132px;
  --size-touch: 44px;
  --offset-column: 56px;

  /* Mouvement */
  --duration: 220ms;
  --duration-slow: 620ms;
  --easing: cubic-bezier(0.22, 0.61, 0.36, 1);
  --easing-float: ease-in-out;
  --marquee-duration: 40s;
  --lift: -5px;
  --reveal-shift: 28px;
  --reveal-scale: 0.985;

  /* Flottement des pastilles d'outils */
  --float-lift: 10px;
  --float-lift-portrait: 16px;
  --float-duration-1: 5.5s;
  --float-duration-2: 7s;
  --float-duration-3: 6.2s;
  --float-duration-4: 8s;
  --float-duration-portrait: 11s;
  --delay-1: 0s;
  --delay-2: 0.7s;
  --delay-3: 1.4s;
  --delay-4: 2.1s;
  --delay-5: 2.8s;
  --stagger: 90ms;
}

/* =========================================================================
   2. Bases
   ========================================================================= */

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--space-xl);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background-color: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--size-body);
  font-weight: var(--weight-body);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: var(--weight-heading);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
}

p,
figure,
blockquote,
figcaption {
  margin: 0;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

a {
  color: var(--color-accent);
  text-decoration-thickness: var(--width-hairline);
  text-underline-offset: var(--space-3xs);
}

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

img,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

button {
  font: inherit;
  color: inherit;
  cursor: pointer;
}

:focus-visible {
  outline: var(--space-3xs) solid var(--color-focus);
  outline-offset: var(--space-3xs);
}

.visually-hidden {
  width: var(--width-hairline);
  height: var(--width-hairline);
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.page-shell {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: var(--width-page);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-gutter);
  padding-right: var(--space-gutter);
}

.section {
  display: flex;
  flex-direction: column;
  padding-top: var(--space-section);
  padding-bottom: var(--space-section);
}

.section-tint {
  background-color: var(--color-accent-soft);
}

.section-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  max-width: var(--width-narrow);
  margin-bottom: var(--space-xl);
}

.section-title {
  font-size: var(--size-h2);
}

.section-intro {
  max-width: var(--width-text);
  color: var(--color-muted);
  font-size: var(--size-lead);
}

.label-eyebrow {
  color: var(--color-accent);
  font-family: var(--font-heading);
  font-size: var(--size-label);
  font-weight: var(--weight-strong);
  letter-spacing: var(--tracking-label);
  line-height: var(--leading-tight);
  text-transform: uppercase;
}

.title-line {
  display: block;
}

.title-accent {
  color: var(--color-accent);
}

/* =========================================================================
   3. Boutons
   ========================================================================= */

.button-primary,
.button-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  min-height: var(--size-touch);
  padding: var(--space-xs) var(--space-md);
  border: var(--width-hairline) solid transparent;
  border-radius: var(--radius-pill);
  font-family: var(--font-heading);
  font-size: var(--size-small);
  font-weight: var(--weight-strong);
  line-height: var(--leading-tight);
  text-align: center;
  text-decoration: none;
  transition: background-color var(--duration) var(--easing),
    color var(--duration) var(--easing),
    border-color var(--duration) var(--easing);
}

.button-primary {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-on-accent);
}

.button-primary:hover {
  background-color: var(--color-accent-deep);
  border-color: var(--color-accent-deep);
  color: var(--color-on-accent);
}

.button-secondary {
  background-color: var(--color-surface);
  border-color: var(--color-line);
  color: var(--color-ink);
}

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

.button-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  min-width: var(--size-touch);
  min-height: var(--size-touch);
  padding: var(--space-xs) var(--space-sm);
  background-color: var(--color-surface);
  border: var(--width-hairline) solid var(--color-line);
  border-radius: var(--radius-pill);
  color: var(--color-ink);
  font-family: var(--font-heading);
  font-size: var(--size-small);
  font-weight: var(--weight-strong);
  text-decoration: none;
  transition: border-color var(--duration) var(--easing),
    color var(--duration) var(--easing);
}

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

.button-primary svg,
.button-secondary svg,
.button-icon svg {
  flex: 0 0 auto;
  width: var(--size-h4);
  height: var(--size-h4);
  fill: currentColor;
}

/* =========================================================================
   4. En-tete
   ========================================================================= */

.site-header {
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  z-index: 10;
  background-color: var(--color-ink);
  border-bottom: var(--width-hairline) solid var(--color-on-dark-line);
  transition: box-shadow var(--duration) var(--easing);
}

.site-header.is-scrolled {
  box-shadow: 0 var(--space-3xs) var(--space-sm) var(--color-shadow-header);
}

.header-inner {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding-top: var(--space-xs);
  padding-bottom: var(--space-xs);
  transition: padding var(--duration) var(--easing);
}

.is-scrolled .header-inner {
  padding-top: var(--space-2xs);
  padding-bottom: var(--space-2xs);
}

.brand {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  color: var(--color-on-dark);
  text-decoration: none;
}

.brand-name {
  font-family: var(--font-heading);
  font-size: var(--size-h4);
  font-weight: var(--weight-heading);
  letter-spacing: var(--tracking-heading);
  line-height: var(--leading-tight);
}

.brand-role {
  color: var(--color-on-dark-soft);
  font-size: var(--size-label);
  line-height: var(--leading-tight);
}

.brand-logo {
  width: auto;
  max-height: var(--space-xl);
}

.nav-desktop {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-sm);
}

.nav-link {
  color: var(--color-on-dark-soft);
  font-size: var(--size-small);
  font-weight: var(--weight-medium);
  text-decoration: none;
  transition: color var(--duration) var(--easing);
}

.nav-link:hover {
  color: var(--color-on-dark);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
}

.nav-toggle {
  display: none;
  align-items: center;
  gap: var(--space-2xs);
  min-height: var(--size-touch);
  padding: var(--space-2xs) var(--space-sm);
  background-color: var(--color-on-dark-line);
  border: var(--width-hairline) solid var(--color-on-dark-line);
  border-radius: var(--radius-pill);
  color: var(--color-on-dark);
  font-family: var(--font-heading);
  font-size: var(--size-small);
  font-weight: var(--weight-strong);
}

.nav-toggle-bars {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  width: var(--size-h4);
}

.nav-bar {
  display: block;
  width: 100%;
  height: calc(var(--width-hairline) * 2);
  background-color: var(--color-on-dark);
  border-radius: var(--radius-pill);
}

.nav-panel {
  display: none;
  flex-direction: column;
  gap: var(--space-sm);
  padding-top: var(--space-sm);
  padding-bottom: var(--space-md);
  border-top: var(--width-hairline) solid var(--color-on-dark-line);
}

.nav-panel-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.nav-panel .nav-link {
  font-size: var(--size-body);
}

/* =========================================================================
   5. Heros
   ========================================================================= */

.hero {
  padding-top: var(--space-xl);
  padding-bottom: var(--space-xl);
}

.hero-columns {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-xl);
}

.hero-content {
  display: flex;
  flex: 1.5 1 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-md);
}

.hero-visual {
  display: flex;
  flex: 1 1 0;
  align-items: center;
  justify-content: center;
}

.hero-status {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: var(--space-3xs) var(--space-xs) var(--space-3xs) var(--space-2xs);
  background-color: var(--color-surface);
  border: var(--width-hairline) solid var(--color-line);
  border-radius: var(--radius-pill);
  color: var(--color-muted);
  font-size: var(--size-label);
}

.status-dot {
  display: block;
  width: var(--space-2xs);
  height: var(--space-2xs);
  background-color: var(--color-accent);
  border-radius: var(--radius-pill);
}

.hero-title {
  font-size: var(--size-display);
  letter-spacing: var(--tracking-display);
  line-height: var(--leading-display);
}

.hero-text {
  max-width: var(--width-text);
  color: var(--color-muted);
  font-size: var(--size-lead);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs);
}

.hero-note {
  color: var(--color-muted);
  font-size: var(--size-label);
}

/* =========================================================================
   6. Bandeau de chiffres
   ========================================================================= */

.stat-band {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-lg);
  padding-top: var(--space-xl);
  padding-bottom: var(--space-xl);
  border-top: var(--width-hairline) solid var(--color-line);
  border-bottom: var(--width-hairline) solid var(--color-line);
}

.stat-item {
  display: flex;
  flex: 1 1 var(--size-logomark);
  flex-direction: column;
  gap: var(--space-3xs);
}

.stat-value {
  color: var(--color-accent);
  font-family: var(--font-heading);
  font-size: var(--size-stat);
  font-weight: var(--weight-heading);
  letter-spacing: var(--tracking-display);
  line-height: var(--leading-display);
}

.stat-label {
  color: var(--color-muted);
  font-size: var(--size-small);
  line-height: var(--leading-tight);
}

/* =========================================================================
   7. Competences
   ========================================================================= */

.skill-list {
  display: flex;
  flex-direction: column;
  border-top: var(--width-hairline) solid var(--color-line);
}

.skill-row {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: var(--space-lg);
  padding-top: var(--space-md);
  padding-bottom: var(--space-md);
  border-bottom: var(--width-hairline) solid var(--color-line);
  transition: background-color var(--duration) var(--easing);
}

.skill-row:hover {
  background-color: var(--color-accent-soft);
}

.skill-name {
  flex: 0 0 auto;
  width: calc(var(--size-logomark) * 2);
  font-size: var(--size-h3);
}

.skill-text {
  flex: 1 1 auto;
  max-width: var(--width-text);
  color: var(--color-muted);
}

.skill-tools {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  width: var(--size-logomark);
}

.tag-pill {
  display: inline-flex;
  align-items: center;
  padding: var(--space-3xs) var(--space-xs);
  background-color: var(--color-accent-soft);
  border-radius: var(--radius-pill);
  color: var(--color-accent);
  font-size: var(--size-label);
  font-weight: var(--weight-medium);
  line-height: var(--leading-tight);
  white-space: nowrap;
}

.card-work .tag-pill,
.project-hero .tag-pill {
  background-color: var(--color-accent-soft);
}

/* =========================================================================
   8. Realisations
   ========================================================================= */

.work-columns {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: var(--space-lg);
}

.work-column {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: var(--space-lg);
}

.work-column-offset {
  margin-top: var(--offset-column);
}

.card-work {
  display: flex;
  flex-direction: column;
  background-color: var(--color-surface);
  border: var(--width-hairline) solid var(--color-line);
  border-radius: var(--radius-card);
  box-shadow: 0 var(--space-3xs) var(--space-sm) var(--color-shadow);
  overflow: hidden;
  transition: transform var(--duration) var(--easing),
    box-shadow var(--duration) var(--easing);
}

.card-work:hover {
  transform: translateY(var(--lift));
  box-shadow: 0 var(--space-xs) var(--space-lg) var(--color-shadow-lift);
}

.card-media {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-sm);
}

.card-media img {
  width: 100%;
  border-radius: var(--radius-media);
  object-fit: cover;
}

/* Fond blanc, sans fusion : marche autant pour les logos a fond blanc
   que pour ceux qui ont du blanc a l'interieur du dessin. */
.card-media-logo {
  padding: var(--space-xl) var(--space-sm);
  background-color: var(--color-surface);
  border-bottom: var(--width-hairline) solid var(--color-line);
}

.card-media-logo img {
  width: auto;
  max-height: var(--size-logomark);
  border-radius: var(--radius-none);
  object-fit: contain;
}

.card-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-xs);
  padding: var(--space-2xs) var(--space-md) var(--space-md);
}

.card-title {
  font-size: var(--size-h3);
}

.card-title a {
  color: var(--color-ink);
  text-decoration: none;
}

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

.card-client {
  color: var(--color-muted);
  font-size: var(--size-small);
  font-weight: var(--weight-medium);
}

.card-text {
  color: var(--color-muted);
}

.card-result {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: var(--space-2xs);
  width: 100%;
  padding-top: var(--space-xs);
  border-top: var(--width-hairline) solid var(--color-line);
  color: var(--color-ink);
  font-size: var(--size-small);
  font-weight: var(--weight-medium);
}

.result-dot {
  display: block;
  flex: 0 0 auto;
  width: var(--space-2xs);
  height: var(--space-2xs);
  background-color: var(--color-accent);
  border-radius: var(--radius-pill);
}

.card-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  margin-top: var(--space-2xs);
  color: var(--color-accent);
  font-family: var(--font-heading);
  font-size: var(--size-small);
  font-weight: var(--weight-strong);
  text-decoration: none;
}

.card-link:hover {
  text-decoration: underline;
}

.card-link svg {
  width: var(--size-small);
  height: var(--size-small);
  fill: currentColor;
}

/* =========================================================================
   9. Bandeau de logos defilant
   ========================================================================= */

/* Fond blanc : les logos fournis ont un fond blanc, il disparait ainsi completement. */
.marquee-section {
  padding-top: var(--space-xl);
  padding-bottom: var(--space-xl);
  background-color: var(--color-surface);
  border-top: var(--width-hairline) solid var(--color-line);
  border-bottom: var(--width-hairline) solid var(--color-line);
}

.marquee-title {
  margin-bottom: var(--space-lg);
  color: var(--color-ink);
  font-family: var(--font-heading);
  font-size: var(--size-h2);
  font-weight: var(--weight-heading);
  letter-spacing: var(--tracking-heading);
  line-height: var(--leading-heading);
  text-align: center;
}

.marquee {
  display: flex;
  width: 100%;
  overflow: hidden;
}

.marquee-track {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  width: max-content;
  animation: marquee-scroll var(--marquee-duration) linear infinite;
}

.marquee-group {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--space-2xl);
  padding-left: var(--space-xl);
  padding-right: var(--space-xl);
}

.marquee-item {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
}

/* Les logos fournis ont un fond blanc : multiply le fait disparaitre sur le fond clair. */
.logo-mark {
  width: auto;
  max-width: var(--size-logomark);
  max-height: var(--space-xl);
  object-fit: contain;
  mix-blend-mode: multiply;
}

@keyframes marquee-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* =========================================================================
   10. Recommandations
   ========================================================================= */

.quote-columns {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: var(--space-lg);
}

.quote-column {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: var(--space-lg);
}

.card-quote {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-md);
  background-color: var(--color-surface);
  border: var(--width-hairline) solid var(--color-line);
  border-radius: var(--radius-card);
  box-shadow: 0 var(--space-3xs) var(--space-sm) var(--color-shadow);
}

.quote-text {
  color: var(--color-ink);
  font-size: var(--size-quote);
}

.quote-person {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-xs);
  padding-top: var(--space-sm);
  border-top: var(--width-hairline) solid var(--color-line);
}

.quote-avatar {
  flex: 0 0 auto;
  width: var(--size-avatar);
  height: var(--size-avatar);
  border-radius: var(--radius-pill);
  object-fit: cover;
}

.quote-identity {
  display: flex;
  flex-direction: column;
}

.quote-name {
  font-family: var(--font-heading);
  font-size: var(--size-h4);
  font-weight: var(--weight-strong);
  line-height: var(--leading-tight);
}

.quote-role {
  color: var(--color-muted);
  font-size: var(--size-label);
  line-height: var(--leading-tight);
}

.quote-source {
  align-self: flex-start;
  color: var(--color-accent);
  font-size: var(--size-label);
  font-weight: var(--weight-medium);
}

/* =========================================================================
   11. Portrait entoure des outils
   ========================================================================= */

.orbit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
}

.orbit-row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
}

.orbit-middle {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
}

.orbit-column {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.orbit-portrait {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: var(--size-portrait);
  height: var(--size-portrait);
  background-color: var(--color-accent-soft);
  border: var(--width-hairline) solid var(--color-line);
  border-radius: var(--radius-pill);
  overflow: hidden;
}

.orbit-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

/* Le portrait respire lentement, les pastilles flottent autour. */
@keyframes portrait-float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(calc(var(--float-lift-portrait) * -1));
  }
}

@keyframes chip-float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(calc(var(--float-lift) * -1));
  }
}

.has-js .orbit-portrait {
  animation: portrait-float var(--float-duration-portrait) var(--easing-float) infinite;
}

.tool-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: var(--size-toolchip);
  height: var(--size-toolchip);
  padding: var(--space-xs);
  background-color: var(--color-surface);
  border: var(--width-hairline) solid var(--color-line);
  border-radius: var(--radius-media);
  box-shadow: 0 var(--space-2xs) var(--space-sm) var(--color-shadow);
  transition: border-color var(--duration) var(--easing),
    box-shadow var(--duration) var(--easing);
}

.tool-chip:hover {
  border-color: var(--color-accent);
  box-shadow: 0 var(--space-xs) var(--space-md) var(--color-shadow-lift);
}

.has-js .tool-chip {
  animation: chip-float var(--float-duration-1) var(--easing-float) infinite;
}

.has-js .orbit-row .tool-chip:nth-child(2),
.has-js .orbit-column .tool-chip:nth-child(2) {
  animation-duration: var(--float-duration-2);
  animation-delay: var(--delay-2);
}

.has-js .orbit-row .tool-chip:nth-child(3),
.has-js .orbit-column .tool-chip:nth-child(3) {
  animation-duration: var(--float-duration-3);
  animation-delay: var(--delay-4);
}

.has-js .orbit-row .tool-chip:nth-child(4) {
  animation-duration: var(--float-duration-4);
  animation-delay: var(--delay-3);
}

.has-js .orbit-row .tool-chip:nth-child(5) {
  animation-duration: var(--float-duration-2);
  animation-delay: var(--delay-5);
}

.has-js .orbit-row:last-of-type .tool-chip:nth-child(1) {
  animation-duration: var(--float-duration-4);
  animation-delay: var(--delay-3);
}

.has-js .orbit-row:last-of-type .tool-chip:nth-child(2) {
  animation-duration: var(--float-duration-1);
  animation-delay: var(--delay-5);
}

.has-js .orbit-row:last-of-type .tool-chip:nth-child(3) {
  animation-duration: var(--float-duration-2);
  animation-delay: var(--delay-1);
}

.has-js .orbit-column:last-of-type .tool-chip:nth-child(1) {
  animation-duration: var(--float-duration-3);
  animation-delay: var(--delay-5);
}

.has-js .orbit-column:last-of-type .tool-chip:nth-child(2) {
  animation-duration: var(--float-duration-4);
  animation-delay: var(--delay-1);
}

/* Les logos larges (Canva, Looker Studio) prennent la largeur de la pastille,
   les logos carres restent cales sur la hauteur. */
.tool-logo {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: var(--size-toollogo);
  object-fit: contain;
}


/* =========================================================================
   12. Parcours
   ========================================================================= */

.path-columns {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: var(--space-2xl);
}

.path-column {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: var(--space-md);
}

.path-title {
  font-size: var(--size-h3);
}

.timeline {
  display: flex;
  flex-direction: column;
}

.timeline-item {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: var(--space-sm);
  padding-top: var(--space-sm);
  padding-bottom: var(--space-sm);
  border-top: var(--width-hairline) solid var(--color-line);
}

.timeline-marker {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: var(--space-xs);
  padding-top: var(--space-2xs);
}

.timeline-dot {
  display: block;
  width: var(--space-2xs);
  height: var(--space-2xs);
  background-color: var(--color-accent);
  border-radius: var(--radius-pill);
}

.timeline-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--space-3xs);
}

.timeline-period {
  color: var(--color-accent);
  font-size: var(--size-label);
  font-weight: var(--weight-medium);
  line-height: var(--leading-tight);
}

.timeline-role {
  font-size: var(--size-h4);
  font-weight: var(--weight-strong);
  line-height: var(--leading-tight);
}

.timeline-place {
  color: var(--color-muted);
  font-size: var(--size-small);
  line-height: var(--leading-tight);
}

/* =========================================================================
   13. FAQ
   ========================================================================= */

.faq-layout {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: var(--space-2xl);
}

.faq-side {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: var(--space-sm);
  width: calc(var(--size-logomark) * 2.4);
}

.faq-list {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  border-top: var(--width-hairline) solid var(--color-line);
}

.faq-item {
  border-bottom: var(--width-hairline) solid var(--color-line);
}

.faq-question {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding-top: var(--space-sm);
  padding-bottom: var(--space-sm);
  font-family: var(--font-heading);
  font-size: var(--size-h4);
  font-weight: var(--weight-strong);
  line-height: var(--leading-tight);
  list-style: none;
  cursor: pointer;
}

.faq-question::-webkit-details-marker {
  display: none;
}

.faq-mark {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: var(--space-md);
  height: var(--space-md);
  background-color: var(--color-accent-soft);
  border-radius: var(--radius-pill);
  color: var(--color-accent);
  font-size: var(--size-mark);
  line-height: var(--leading-display);
  transition: transform var(--duration) var(--easing);
}

.faq-item[open] .faq-mark {
  transform: rotate(45deg);
}

.faq-answer {
  max-width: var(--width-text);
  padding-bottom: var(--space-md);
  color: var(--color-muted);
}

/* =========================================================================
   14. Contact et pied de page
   ========================================================================= */

.contact-panel {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xl);
  padding: var(--space-xl);
  background-color: var(--color-surface);
  border: var(--width-hairline) solid var(--color-line);
  border-radius: var(--radius-card);
}

.contact-intro {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--space-xs);
  max-width: var(--width-text);
}

.contact-list {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: var(--space-sm);
}

.contact-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
}

.contact-label {
  color: var(--color-muted);
  font-size: var(--size-label);
  letter-spacing: var(--tracking-label);
  line-height: var(--leading-tight);
  text-transform: uppercase;
}

.contact-value {
  color: var(--color-ink);
  font-family: var(--font-heading);
  font-size: var(--size-h3);
  font-weight: var(--weight-heading);
  letter-spacing: var(--tracking-heading);
  line-height: var(--leading-tight);
  text-decoration: none;
}

.contact-value:hover {
  color: var(--color-accent);
}

.site-footer {
  display: flex;
  flex-direction: column;
  background-color: var(--color-ink);
  color: var(--color-surface);
}

.footer-inner {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-lg);
  padding-top: var(--space-xl);
  padding-bottom: var(--space-lg);
}

.footer-brand {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  max-width: var(--width-text);
}

.footer-name {
  font-family: var(--font-heading);
  font-size: var(--size-h3);
  font-weight: var(--weight-heading);
  letter-spacing: var(--tracking-heading);
  line-height: var(--leading-tight);
}

.footer-text {
  color: var(--color-on-dark-soft);
  font-size: var(--size-small);
}

.footer-nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.footer-heading {
  font-family: var(--font-heading);
  font-size: var(--size-label);
  font-weight: var(--weight-strong);
  letter-spacing: var(--tracking-label);
  line-height: var(--leading-tight);
  text-transform: uppercase;
}

.footer-link {
  color: var(--color-on-dark-soft);
  font-size: var(--size-small);
  text-decoration: none;
}

.footer-link:hover {
  color: var(--color-on-dark);
}

.footer-legal {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs);
  padding-top: var(--space-sm);
  padding-bottom: var(--space-sm);
  border-top: var(--width-hairline) solid var(--color-on-dark-line);
  color: var(--color-on-dark-soft);
  font-size: var(--size-label);
}

/* =========================================================================
   15. Page projet
   ========================================================================= */

.project-hero {
  gap: var(--space-sm);
  align-items: flex-start;
  padding-top: var(--space-xl);
  padding-bottom: var(--space-lg);
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  color: var(--color-muted);
  font-size: var(--size-small);
  text-decoration: none;
}

.back-link:hover {
  color: var(--color-accent);
}

.back-link svg {
  width: var(--size-small);
  height: var(--size-small);
  fill: currentColor;
}

.project-title {
  max-width: var(--width-narrow);
  font-size: var(--size-h2);
}

.project-client {
  color: var(--color-accent);
  font-family: var(--font-heading);
  font-size: var(--size-h3);
  font-weight: var(--weight-strong);
}

.project-summary {
  max-width: var(--width-text);
  color: var(--color-muted);
  font-size: var(--size-lead);
}

.project-figure {
  display: flex;
  width: 100%;
  margin-top: var(--space-lg);
  margin-bottom: var(--space-lg);
}

.project-figure img {
  width: 100%;
  border-radius: var(--radius-card);
  object-fit: cover;
}

.project-figure-logo {
  align-items: center;
  justify-content: center;
  padding: var(--space-2xl) var(--space-sm);
  background-color: var(--color-surface);
  border: var(--width-hairline) solid var(--color-line);
  border-radius: var(--radius-card);
}

.project-figure-logo img {
  width: auto;
  max-height: var(--size-logomark);
  border-radius: var(--radius-none);
  object-fit: contain;
}

.project-meta {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--space-lg);
  padding-top: var(--space-md);
  padding-bottom: var(--space-md);
  border-top: var(--width-hairline) solid var(--color-line);
  border-bottom: var(--width-hairline) solid var(--color-line);
}

.meta-item {
  display: flex;
  flex: 1 1 var(--size-logomark);
  flex-direction: column;
  gap: var(--space-3xs);
}

.meta-label {
  color: var(--color-muted);
  font-size: var(--size-label);
  letter-spacing: var(--tracking-label);
  line-height: var(--leading-tight);
  text-transform: uppercase;
}

.meta-value {
  font-family: var(--font-heading);
  font-size: var(--size-h4);
  font-weight: var(--weight-strong);
  line-height: var(--leading-tight);
}

.project-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  max-width: var(--width-narrow);
  padding-top: var(--space-xl);
  padding-bottom: var(--space-xl);
}

.project-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.project-block h2 {
  font-size: var(--size-h3);
}

.project-block p {
  max-width: var(--width-text);
  color: var(--color-muted);
}

.project-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  padding-top: var(--space-2xs);
}

.project-nav {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding-top: var(--space-lg);
  padding-bottom: var(--space-2xl);
  border-top: var(--width-hairline) solid var(--color-line);
}

/* =========================================================================
   16. Pages simples
   ========================================================================= */

.simple-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  max-width: var(--width-narrow);
  padding-top: var(--space-xl);
  padding-bottom: var(--space-2xl);
}

.simple-body h1,
.simple-body h2 {
  margin-top: var(--space-md);
}

.simple-body p,
.simple-body li {
  color: var(--color-muted);
}

.simple-body ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  padding-left: var(--space-sm);
  list-style: disc;
}

/* =========================================================================
   17. Reveal au defilement
   ========================================================================= */

/* Sans JavaScript la classe has-js est absente et tout reste visible. */
.has-js .reveal {
  opacity: 0;
  transform: translateY(var(--reveal-shift)) scale(var(--reveal-scale));
  transition: opacity var(--duration-slow) var(--easing),
    transform var(--duration-slow) var(--easing);
}

.has-js .reveal-in {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Cascade : les elements d'une meme serie entrent l'un apres l'autre. */
.has-js .stat-item:nth-child(2),
.has-js .skill-row:nth-child(2),
.has-js .work-column .card-work:nth-child(2),
.has-js .quote-column .card-quote:nth-child(2) {
  transition-delay: var(--stagger);
}

.has-js .stat-item:nth-child(3),
.has-js .skill-row:nth-child(3),
.has-js .work-column .card-work:nth-child(3),
.has-js .quote-column .card-quote:nth-child(3) {
  transition-delay: calc(var(--stagger) * 2);
}

.has-js .stat-item:nth-child(4),
.has-js .skill-row:nth-child(4),
.has-js .work-column .card-work:nth-child(4) {
  transition-delay: calc(var(--stagger) * 3);
}

.has-js .skill-row:nth-child(5) {
  transition-delay: calc(var(--stagger) * 4);
}

.has-js .skill-row:nth-child(6) {
  transition-delay: calc(var(--stagger) * 5);
}

.has-js .skill-row:nth-child(7) {
  transition-delay: calc(var(--stagger) * 6);
}

/* =========================================================================
   18. Tablette
   ========================================================================= */

@media (max-width: 1024px) {
  .nav-desktop {
    display: none;
  }

  .nav-toggle {
    display: flex;
  }

  .nav-panel:not([hidden]) {
    display: flex;
  }

  .header-cta {
    display: none;
  }

  .skill-row {
    flex-direction: column;
    gap: var(--space-2xs);
  }

  .skill-name {
    width: 100%;
  }

  .skill-tools {
    width: 100%;
  }

  .path-columns,
  .faq-layout {
    flex-direction: column;
    gap: var(--space-xl);
  }

  .faq-side {
    width: 100%;
  }

  .contact-panel {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-lg);
    padding: var(--space-lg);
  }

  .contact-list {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--space-lg);
  }

  .work-column-offset {
    margin-top: 0;
  }

  /* Le texte du heros passe au-dessus, le portrait dessous. */
  .hero-columns {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-lg);
  }
}

/* =========================================================================
   19. Mobile
   ========================================================================= */

@media (max-width: 640px) {
  /* Le heros mobile est resserre pour que les deux actions restent au-dessus de la ligne de flottaison. */
  .hero {
    padding-top: var(--space-lg);
    padding-bottom: var(--space-lg);
  }

  .hero-content {
    gap: var(--space-sm);
  }

  .brand-role {
    display: none;
  }

  .stat-band {
    gap: var(--space-md);
  }

  .stat-item {
    flex: 1 1 calc(50% - var(--space-md));
  }

  .work-columns,
  .quote-columns {
    flex-direction: column;
    gap: var(--space-md);
  }

  .orbit-middle,
  .orbit-row,
  .orbit-column {
    gap: var(--space-xs);
  }

  .contact-list {
    flex-direction: column;
    gap: var(--space-sm);
  }

  .footer-inner {
    flex-direction: column;
  }

  .project-meta {
    gap: var(--space-md);
  }

  .meta-item {
    flex: 1 1 calc(50% - var(--space-md));
  }

  .hero-actions .button-primary,
  .hero-actions .button-icon {
    flex: 1 1 100%;
  }
}

/* =========================================================================
   20. Mouvement reduit
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .marquee {
    overflow-x: auto;
  }

  .marquee-track {
    animation: none;
  }

  .card-work,
  .tool-chip,
  .has-js .reveal {
    transition: none;
    transition-delay: 0s;
  }

  .card-work:hover {
    transform: none;
  }

  .has-js .reveal {
    opacity: 1;
    transform: none;
  }

  .has-js .tool-chip,
  .has-js .orbit-portrait {
    animation: none;
  }
}