/* ============================================================
   Elicla — Styles globaux
   Reset + éléments de base + composants récurrents.
   Les tokens vivent dans tokens.css (chargé avant ce fichier).
   ============================================================ */

/* --- Reset --- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  scroll-behavior: smooth;
}

body {
  background: var(--bg);
  color: var(--text-body);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection {
  background: var(--violet);
  color: var(--white);
}

a {
  color: inherit;
  text-decoration: none;
}
img {
  max-width: 100%;
  display: block;
}
ul {
  list-style: none;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- Shell / conteneur --- */
.shell {
  max-width: var(--shell-max);
  margin: 0 auto;
}

/* --- Accessibilité : texte réservé aux lecteurs d'écran --- */
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.skip-link:focus {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 1000;
  width: auto;
  height: auto;
  clip: auto;
  background: var(--ink);
  color: var(--white);
  padding: 10px 16px;
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
}

/* ============================================================
   COMPOSANTS RÉCURRENTS
   ============================================================ */

/* --- Eyebrow (label majuscule + règle hairline) --- */
.eyebrow {
  font-size: var(--text-overline);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--accent);
  display: flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before {
  content: "";
  display: block;
  width: 24px;
  height: 1px;
  background: currentColor;
}
.eyebrow--muted {
  color: var(--text-muted);
}
.eyebrow--inverse {
  color: var(--white);
}

/* --- Boutons pill --- */
.btn {
  display: inline-block;
  border-radius: var(--radius-pill);
  /* Gabarit commun à toutes les variantes : seules les couleurs changent.
     La bordure transparente garde la même hauteur que .btn--outline. */
  padding: 14px 28px;
  font-size: var(--text-btn);
  font-weight: var(--fw-semibold);
  line-height: 1;
  letter-spacing: var(--tracking-snug);
  border: 1px solid transparent;
  transition:
    opacity var(--transition-fast),
    background var(--transition-fast);
  cursor: pointer;
}
.btn--accent {
  background: var(--accent);
  color: var(--text-on-accent);
}
.btn--accent:hover {
  opacity: 0.85;
}
.btn--accent:active {
  background: var(--accent-hover);
  opacity: 1;
}
.btn--lg {
  padding: 17px 34px;
  font-size: var(--text-btn-lg);
}
.btn--outline {
  border-color: var(--ink);
  color: var(--ink);
  background: transparent;
}
.btn--outline:hover {
  background: var(--ink);
  color: var(--white);
}
/* Bouton blanc — sur fond violet (CTA final) */
.btn--white {
  background: var(--white);
  color: var(--accent);
}
.btn--white:hover {
  opacity: 0.88;
}

/* --- Lien texte discret --- */
.textlink {
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  opacity: 0.5;
  transition: opacity var(--transition-fast);
}
.textlink:hover {
  opacity: 1;
}

/* --- Lien de section (règle sous le texte) --- */
.section-link {
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  color: var(--ink);
  opacity: 0.4;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  white-space: nowrap;
  transition: opacity var(--transition-fast);
}
.section-link:hover {
  opacity: 1;
}

/* ============================================================
   NAVIGATION
   ============================================================ */
/* Le sticky est porté par le <header>, pas par la nav : un élément collé
   ne peut se déplacer que dans les limites de son parent, et .site-header
   fait exactement la hauteur de la nav. Posé sur la nav, il n'avait donc
   aucune course — l'en-tête défilait hors de l'écran, laissant un vide
   au-dessus de la barre de filtres, elle aussi collée à 64px. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
}
.nav {
  background: var(--bg);
  border-bottom: var(--hairline);
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--pad-x);
}
.nav-logo {
  font-size: 20px;
  font-weight: var(--fw-bold);
  letter-spacing: -0.05em;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
}
/* Logo image (WebP) : hauteur fixe, largeur auto pour garder le ratio. */
.nav-logo-img {
  height: 28px;
  width: auto;
}
.nav-links {
  display: flex;
  gap: 40px;
  align-items: center;
}
.nav-links a {
  font-size: 15px;
  font-weight: var(--fw-medium);
  color: var(--ink);
  opacity: 0.4;
  transition: opacity var(--transition-fast);
  letter-spacing: var(--tracking-snug);
}
.nav-links a:hover,
.nav-links .current-menu-item a {
  opacity: 1;
}
/* La page courante porte l'accent, comme la langue active : le menu
   signale où l'on est, en plus de l'opacité pleine.
   current-menu-ancestor couvre les pages filles, current_page_parent
   l'archive des projets vue depuis une fiche. L'opacité est reprise ici
   pour ces deux cas : la règle ci-dessus ne vise que current-menu-item,
   et l'accent serait sinon délavé à 0.4 sur une fiche projet. */
.nav-links .current-menu-item > a,
.nav-links .current-menu-ancestor > a,
.nav-links .current_page_parent > a {
  color: var(--accent);
  opacity: 1;
}

/* --- Sélecteur de langue --- */
/* Deux codes courts séparés d'un point médian. La langue active est un
   <span> (on y est déjà, rien à cliquer) : elle porte donc ses propres
   couleurs, sans hériter de .nav-links a. */
.nav-langs {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-snug);
}
.nav-langs::before {
  /* Filet vertical : sépare la langue du reste du menu sans ajouter de
     marge, qui se refermerait mal en colonne sur mobile. */
  content: "";
  width: 1px;
  height: 14px;
  margin-right: 4px;
  background: var(--ink);
  opacity: 0.15;
}
/* Les deux codes doivent peser pareil : la langue active est un <span>
   et hérite de .nav-langs, l'autre un <a> qui hériterait du 15px de
   .nav-links a, plus spécifique. La taille est donc posée sur les deux,
   par un sélecteur qui l'emporte sur celui du menu. */
.nav-lang,
.nav-links a.nav-lang {
  font-size: 13px;
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-snug);
  color: var(--ink);
  text-transform: uppercase;
}
/* La langue courante porte l'accent : elle signale où l'on est, comme
   la page courante dans le menu. Elle n'appelle pas le clic. */
.nav-langs .nav-lang.is-current {
  color: var(--accent);
  opacity: 1;
  cursor: default;
}
/* Même jeu d'opacité que les liens du menu : discret au repos, plein
   contraste au survol. Sélecteur redondant pour l'emporter sur
   .nav-links a, qui pose déjà une opacité. */
.nav-links a.nav-lang {
  opacity: 0.4;
}
.nav-links a.nav-lang:hover,
.nav-links a.nav-lang:focus-visible {
  opacity: 1;
}

/* --- Toggle mobile (caché en desktop) --- */
/* Bouton hamburger : trois barres qui se replient en croix à
   l'ouverture. Les barres sont des éléments (pas un caractère) pour
   pouvoir être animées. */
.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  width: 32px;
  height: 32px;
  position: relative;
  flex-shrink: 0;
}
.nav-toggle-bars,
.nav-toggle-bars::before,
.nav-toggle-bars::after {
  position: absolute;
  left: 50%;
  width: 26px;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition:
    transform var(--transition-med),
    opacity var(--transition-fast);
}
/* Barre du milieu : centrée, elle disparaît à l'ouverture. */
.nav-toggle-bars {
  top: 50%;
  transform: translate(-50%, -50%);
}
.nav-toggle-bars::before,
.nav-toggle-bars::after {
  content: "";
  top: 0;
}
.nav-toggle-bars::before {
  transform: translate(-50%, -8px);
}
.nav-toggle-bars::after {
  transform: translate(-50%, 8px);
}
/* Focus clavier : l'anneau reste (il sert à la navigation) mais prend
   l'accent du thème plutôt que l'orange par défaut du navigateur. */
.nav-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
/* État ouvert : la barre centrale s'efface, les deux autres se
   rejoignent au centre et pivotent pour former la croix. */
.nav-toggle[aria-expanded="true"] .nav-toggle-bars {
  background: transparent;
  transform: translate(-50%, -50%);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::before {
  transform: translate(-50%, 0) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::after {
  transform: translate(-50%, 0) rotate(-45deg);
}

/* ============================================================
   SECTIONS
   ============================================================ */
.section {
  padding: var(--section-y) var(--pad-x);
}
.section--warm {
  background: var(--surface-warm);
}
.section--dark {
  background: var(--surface-dark);
  color: var(--white);
}
.section--bordered {
  border-bottom: var(--hairline);
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 48px;
}
.section-title {
  font-size: var(--display-sm);
  font-weight: var(--fw-black);
  line-height: 1.05;
  letter-spacing: var(--tracking-display);
  margin-top: 16px;
}
/* Mot ou groupe de mots mis en italique violet léger — l'accent
   typographique de la marque, présent dans tous les titres de section.

   ÉDITER UN TITRE : c'est ce <em> (et les <br> de césure) qui obligent à
   découper la phrase en plusieurs esc_html_e() dans les templates. Par
   exemple, dans template-parts/sections/pourquoi.php :

     <?php esc_html_e( 'Agile, direct,' ); ?><br>
     <em><?php esc_html_e( 'sans compromis.' ); ?></em>

   rend « Agile, direct, » en noir, puis « sans compromis. » en italique
   violet sur une nouvelle ligne. Chaque fragment est une chaîne à part
   pour rester traduisible sans y mêler de balises.
   Pour changer le texte, éditez le contenu des quotes. Pour déplacer
   l'accent, déplacez les balises <em>. Pour changer la césure, déplacez
   les <br> — ils sont voulus : les titres sont calés sur le mockup. */
.section-title em {
  font-style: italic;
  font-weight: var(--fw-light);
  color: var(--accent);
}

.section--dark .eyebrow {
  color: var(--gold);
}
.section--dark .section-title {
  color: var(--white);
}
.section--dark .section-link {
  color: var(--warm-deep);
}
.section--dark .section-link:hover {
  color: var(--white);
  opacity: 1;
}

/* ============================================================
   HOMEPAGE — HERO (2 colonnes : texte / visuel — mockup v5)
   ============================================================ */
.hero {
  padding: var(--space-7) var(--pad-x) var(--space-8);
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--space-8);
  align-items: center;
}
.hero-overline {
  margin-bottom: 28px;
}
.hero-headline {
  font-size: clamp(48px, 6vw, 84px);
  font-weight: var(--fw-black);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  max-width: 900px;
  margin-bottom: 48px;
}
.hero-headline em {
  font-style: italic;
  font-weight: var(--fw-light);
  color: var(--accent);
}
.hero-bottom {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-6);
}
.hero-sub {
  font-size: var(--text-lg);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
  max-width: 460px;
}
.hero-actions {
  display: flex;
  gap: 14px;
  align-items: center;
}

.hero-media {
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-img);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--on-dark-faint);
  font-size: var(--text-overline);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Fond sombre réservé au placeholder : l'encre du texte « Visuel — à
   remplacer » est claire. Quand l'image est là, elle couvre toute la
   boîte et ce fond ne faisait que déborder d'un liseré aux angles
   arrondis. :has() cible la boîte restée vide. */
.hero-media:not(:has(img)) {
  background: #1c1c1c;
}

/* ============================================================
   HOMEPAGE — SERVICES (grille hairline)
   ============================================================ */
.services-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: var(--hairline);
  border-radius: var(--radius-img);
  overflow: hidden;
}
/* Carte-lien vers l'ancre du service sur la page Services.
   color: inherit annule le style de lien : la carte garde l'encre du
   thème, seul le fond réagit au survol. */
.service-card {
  padding: 36px 28px;
  border-right: var(--hairline);
  display: flex;
  flex-direction: column;
  gap: 14px;
  color: inherit;
  transition: background var(--transition-fast);
}
.service-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
.service-card:last-child {
  border-right: none;
}
.service-card:hover {
  background: var(--violet-soft);
}
.service-num {
  font-size: var(--text-overline);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.1em;
  color: var(--accent);
}
.service-name {
  font-size: var(--text-xl);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  flex: 1;
}
.service-desc {
  font-size: var(--text-base);
  color: var(--text-secondary);
  line-height: 1.6;
}
.service-arrow {
  font-size: 20px;
  color: var(--accent);
}

/* ============================================================
   HOMEPAGE — STATEMENT
   ============================================================ */
.statement {
  padding: var(--section-y) var(--pad-x);
}
.statement-inner {
  max-width: var(--content-max);
}
.statement-label {
  margin-bottom: 28px;
}
.statement-text {
  font-size: clamp(22px, 2.2vw, 32px);
  font-weight: var(--fw-bold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
}
.statement-text em {
  font-style: italic;
  font-weight: var(--fw-light);
  color: var(--accent);
}

/* Variante centrée (page À propos) : le bloc est plus large et l'eyebrow
   perd sa règle hairline, qui décentrerait le label. */
.statement--center {
  padding: var(--section-y-lg) var(--pad-x);
  text-align: center;
}
.statement--center .statement-inner {
  max-width: 780px;
  margin: 0 auto;
}
.statement--center .statement-text {
  font-size: clamp(26px, 3vw, 40px);
  line-height: 1.25;
}
.eyebrow--center {
  justify-content: center;
}
.eyebrow--center::before {
  display: none;
}

/* ============================================================
   HOMEPAGE — PORTFOLIO (fond ink, carrousel — mockup v5)
   ============================================================ */
.portfolio-nav {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 18px;
}
.slider-controls {
  display: flex;
  gap: var(--space-2);
}
.slider-arrow {
  width: 46px;
  height: 46px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-inverse-strong);
  background: transparent;
  color: var(--white);
  font-size: var(--text-lg);
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  transition:
    background var(--transition-fast),
    border-color var(--transition-fast),
    opacity var(--transition-fast);
}
.slider-arrow:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.55);
}
.slider-arrow:disabled {
  opacity: 0.28;
  cursor: default;
  background: transparent;
  border-color: var(--border-inverse-strong);
}
/* Variante sur fond clair (collaborateurs, page À propos) : les styles
   ci-dessus sont dessinés pour le fond ink du portfolio. */
.slider-arrow--light {
  width: 40px;
  height: 40px;
  border-color: var(--border-color);
  color: var(--text-body);
  font-size: var(--text-base);
}
.slider-arrow--light:hover:not(:disabled) {
  background: var(--navy-soft);
  border-color: var(--border-strong);
}
.slider-arrow--light:disabled {
  border-color: var(--border-color);
}

/* Fond révélé au survol d'une carte : l'image du projet survolé remplace
   le noir plein, très atténuée pour que le texte blanc reste lisible.
   Une couche dédiée plutôt qu'un background sur la section : elle peut
   ainsi se fondre d'une image à l'autre sans toucher au fond ink. */
.portfolio-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
/* Section accordée sur le gold, comme son eyebrow : l'italique du titre
   et les tags des cartes suivent, au lieu du violet par défaut. Portée
   limitée à cette section — le manifeste (À propos) garde le violet. */
.portfolio-section .section-title em {
  color: var(--gold);
}
.portfolio-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-size: cover;
  background-position: center;
  opacity: 0;
  /* Fondu long et sans à-coup : sur une surface pleine largeur, les 0.25s
     de --transition-med donnent une apparition sèche. Sortie plus lente
     que l'entrée pour que le fond s'efface sans qu'on le remarque.
     Le léger zoom accompagne le fondu au lieu de le figer. */
  transition:
    opacity 0.9s cubic-bezier(0.4, 0, 0.2, 1),
    transform 1.2s cubic-bezier(0.4, 0, 0.2, 1);
  /* Le flou évite qu'un détail net de l'image accroche l'œil et
     concurrence le texte au premier plan. */
  filter: blur(6px) saturate(1.2);
  transform: scale(1.12);
  pointer-events: none;
}
/* Couche active : celle qui porte l'image du projet survolé. Le JS
   bascule la classe d'une couche à l'autre, l'ancienne s'efface pendant
   que la nouvelle apparaît — d'où le fondu croisé. */
.portfolio-bg.is-active {
  opacity: 0.4;
  /* Reste au-dessus de 1 : masque les bords adoucis par le flou. */
  transform: scale(1.06);
  transition:
    opacity 0.55s cubic-bezier(0.4, 0, 0.2, 1),
    transform 1.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}
/* Le contenu reste au-dessus de la couche de fond. */
.portfolio-section > .section-header,
.portfolio-section > .portfolio-slider {
  position: relative;
}

.portfolio-slider {
  display: flex;
  gap: var(--space-4);
  margin-top: 48px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  cursor: grab;
  padding-bottom: 4px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.portfolio-slider::-webkit-scrollbar {
  display: none;
}
.portfolio-slider.is-dragging {
  cursor: grabbing;
  scroll-behavior: auto;
  scroll-snap-type: none;
}
.portfolio-slider .project-card {
  flex: 0 0 400px;
  scroll-snap-align: start;
}
.portfolio-slider.is-dragging .project-card {
  pointer-events: none;
}
/* La carte est un lien vers la fiche projet : on neutralise les styles
   de lien hérités, le libellé du client servant déjà d'accroche. */
.project-card {
  text-decoration: none;
  color: inherit;
  display: block;
}
.project-card:hover .project-img img {
  transform: scale(1.03);
}

.project-img {
  background: var(--white);
  aspect-ratio: 16 / 10;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.1);
  font-size: var(--text-overline);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: var(--space-4);
  border-radius: var(--radius-img);
  overflow: hidden;
}
.project-type {
  font-size: 10px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--violet-on-dark);
  margin-bottom: 6px;
}
/* .project-name est défini avec la grille Réalisations (fond clair) :
   sur la carte du carrousel, seuls la couleur et l'échelle changent. */
.project-card .project-name {
  font-size: var(--text-lg);
  color: var(--white);
}
/* La flèche suit le titre en blanc, comme les autres affordances sur
   fond sombre (.section--dark .section-link, .slider-arrow) : le violet
   plein de la grille se perd sur l'ink à cette finesse de glyphe. */
.project-card .project-name .arrow {
  color: var(--white);
}
.portfolio-section .project-type {
  color: var(--gold);
}

/* ============================================================
   HOMEPAGE — BANDE CLIENTS (marquee)
   ============================================================ */
.clients {
  padding: 0 var(--pad-x);
  height: 104px;
  display: flex;
  align-items: center;
  gap: 48px;
  overflow: hidden;
}
.clients-label {
  font-size: 10px;
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}
.clients-sep {
  width: 1px;
  height: 16px;
  background: var(--border-color);
  flex-shrink: 0;
}
/* Fenêtre de la piste : elle prend la place restante et confine le
   défilement, pour qu'un logo n'empiète jamais sur le label. */
.clients-viewport {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}
/* Le fondu ne concerne que la bande qui défile : il adoucit l'entrée et la
   sortie des logos. Sur une bande statique il ne masquerait rien d'autre
   que le premier et le dernier logo, qui n'ont aucune raison d'être pâles. */
.clients-viewport:has(.is-scrolling) {
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 24px,
    #000 calc(100% - 24px),
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 24px,
    #000 calc(100% - 24px),
    transparent 100%
  );
}
.clients-track {
  display: flex;
  align-items: center;
  min-width: max-content;
}
/* Le défilement n'est activé que si les logos débordent — classe posée par
   le JS, qui duplique aussi la séquence pour que la boucle soit invisible.
   Sans JS, ou avec peu de logos, la bande reste statique et lisible. */
.clients-track.is-scrolling {
  animation: elicla-marquee 62s linear infinite;
}
/* Pas de pause au survol (le mockup en avait une) : les logos ne sont
   pas cliquables, et la bande s'arrêtait dès qu'elle passait sous une
   souris immobile pendant le scroll — ou restait figée après un tap. */
@media (prefers-reduced-motion: reduce) {
  .clients-track.is-scrolling {
    animation: none;
  }
}
/* L'écart est porté par les logos, pas par un `gap` : la piste est ainsi
   exactement deux fois la séquence, et -50% boucle sans saut. */
@keyframes elicla-marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
.client-logo {
  width: 96px;
  height: 56px;
  margin-right: var(--space-8);
  background: var(--border-color);
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  opacity: 0.5;
}
/* Bande statique : la marge du dernier logo n'a plus d'écart à porter et
   fausserait la mesure de débordement. Quand ça défile, elle est conservée
   — c'est elle qui espace la fin d'une passe du début de la suivante. */
.clients-track:not(.is-scrolling) .client-logo:last-child {
  margin-right: 0;
}
/* Un logo réel remplace le placeholder : plus de fond gris ni de voile,
   c'est l'image qui porte le rendu.
   Largeur libre plutôt que 96px imposés : à hauteur égale, chaque logo
   occupe la largeur que sa forme demande. Un paysage n'est plus comprimé,
   un portrait ne traîne plus de blanc — l'écart optique reste régulier.
   Le plafond évite qu'un panorama extrême n'occupe la piste à lui seul. */
.client-logo:has(img) {
  width: auto;
  max-width: 160px;
  background: none;
  border-radius: 0;
  opacity: 0.7;
}
/* `contain` cadre le logo sans le déformer ni le rogner, quelle que soit
   la dimension du fichier envoyé : la hauteur reste celle de la boîte, et
   `width: auto` laisse le ratio fixer la largeur (sauf plafond atteint,
   où `contain` reprend la main et recentre). */
.client-logo img {
  display: block;
  width: auto;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
}

/* ============================================================
   HOMEPAGE — POURQUOI ELICLA (lignes 2 colonnes — mockup v5)
   ============================================================ */
.why-list {
  margin-top: 48px;
}
.why-row {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 48px;
  padding: 36px 0;
  border-top: var(--hairline);
  align-items: start;
}
.why-row:last-child {
  border-bottom: var(--hairline);
}
.why-label {
  font-size: var(--text-lg);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ink);
  line-height: 1.4;
  padding-top: 3px;
}
.why-text {
  font-size: var(--text-lg);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
}

/* ============================================================
   HOMEPAGE — STATS (grille hairline)
   ============================================================ */
.stats {
  padding: 0 var(--pad-x);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-bottom: var(--hairline);
}
.stat-item {
  padding: var(--space-7) 0 var(--space-7) 40px;
  border-right: var(--hairline);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.stat-item:first-child {
  padding-left: 0;
}
.stat-item:last-child {
  border-right: none;
}
.stat-number {
  font-size: var(--space-7);
  font-weight: var(--fw-black);
  letter-spacing: -0.05em;
  line-height: 1;
  color: var(--ink);
}
.stat-number sup {
  font-size: var(--text-2xl);
  color: var(--accent);
  vertical-align: super;
  letter-spacing: var(--tracking-normal);
}
.stat-label {
  font-size: var(--text-sm);
  color: var(--text-muted);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-snug);
}

/* ============================================================
   HOMEPAGE — CTA FINAL (bloc violet arrondi — mockup v5)
   ============================================================ */
.cta-block {
  padding: var(--section-y) var(--pad-x);
}
.cta-inner {
  background: var(--accent);
  border-radius: var(--radius-cta);
  padding: 72px 80px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 48px;
}
.cta-headline {
  font-size: var(--display-md);
  font-weight: var(--fw-black);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  color: var(--white);
}
.cta-headline em {
  font-style: italic;
  font-weight: var(--fw-light);
  color: var(--on-dark-muted);
}
.cta-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-5);
  flex-shrink: 0;
}
.cta-sub {
  font-size: var(--text-base);
  color: var(--on-dark-muted);
  text-align: right;
  line-height: 1.6;
  max-width: 260px;
}

/* ============================================================
   PAGE SERVICES — HERO (2 colonnes alignées en bas)
   ============================================================ */
.svc-hero {
  padding: var(--space-9) var(--pad-x) var(--space-8);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
  align-items: end;
}
.svc-hero-overline {
  margin-bottom: var(--space-6);
}
.svc-hero-headline {
  font-size: var(--display-lg);
  font-weight: var(--fw-black);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
}
.svc-hero-headline em {
  font-style: italic;
  font-weight: var(--fw-light);
  color: var(--accent);
}
.svc-hero-right {
  padding-bottom: 6px;
}
.svc-hero-intro {
  font-size: 17px;
  color: var(--text-secondary);
  line-height: 1.65;
  max-width: 440px;
  margin-bottom: 28px;
}

/* ============================================================
   PAGE SERVICES — BANDE DE TRANSITION
   ============================================================ */
.svc-transition {
  padding: var(--space-7) var(--pad-x);
}
.svc-transition-text {
  font-size: clamp(18px, 2vw, 24px);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight);
  line-height: 1.35;
  max-width: var(--content-max);
}

/* ============================================================
   PAGE SERVICES — BLOCS DÉTAILLÉS (alternés visuel / texte)
   ============================================================ */
.svc-block {
  padding: var(--section-y-lg) var(--pad-x);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
  align-items: center;
  /* Cible d'ancre depuis la homepage : la marge évite que le haut du
     bloc se retrouve sous la nav (fixe sur mobile, 64px). */
  scroll-margin-top: 80px;
}
/* Un bloc sur deux inverse l'ordre : le visuel passe à droite. L'ordre
   du DOM reste visuel-puis-texte, ce que le mobile réutilise tel quel. */
.svc-block--reverse .svc-visual {
  order: 2;
}
.svc-block--reverse .svc-content {
  order: 1;
}

.svc-visual {
  aspect-ratio: 4 / 3;
  background: var(--surface-warm);
  border: var(--hairline);
  border-radius: var(--radius-img);
  position: relative;
  overflow: hidden;
}
/* Visuel réel (page d'options) : l'image occupe tout le cadre, à la
   place du placeholder numéroté. */
.svc-visual--image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Le numéro est en blanc sur le fond warm : présent mais discret,
   il sert de texture, pas d'information (le bloc est aria-hidden). */
.svc-visual-num {
  display: block;
  font-size: clamp(120px, 16vw, 220px);
  font-weight: var(--fw-black);
  letter-spacing: -0.05em;
  line-height: 0.8;
  color: var(--white);
  padding: var(--space-6) 40px;
}
.svc-visual-tag {
  position: absolute;
  bottom: var(--space-5);
  left: 40px;
  font-size: var(--text-overline);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.svc-num {
  font-size: var(--text-xs);
  font-weight: var(--fw-medium);
  font-family: var(--font-mono);
  color: var(--accent);
  margin-bottom: 20px;
}
.svc-accroche {
  font-size: clamp(26px, 2.6vw, 36px);
  font-weight: var(--fw-black);
  letter-spacing: var(--tracking-tight);
  line-height: 1.05;
  margin-bottom: var(--space-5);
}
.svc-text {
  font-size: var(--text-base);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
  margin-bottom: 18px;
  max-width: 520px;
}
.svc-livrables-label {
  font-size: var(--text-overline);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
  margin: var(--space-6) 0 var(--space-4);
}
.svc-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: 28px;
}
.tag {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  border: var(--hairline);
  background: var(--bg);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--ink);
  letter-spacing: var(--tracking-snug);
}
.svc-ideal {
  font-size: 14px;
  color: var(--ink);
  line-height: 1.6;
  padding-top: 20px;
  border-top: var(--hairline);
  max-width: 520px;
}
.svc-ideal strong {
  display: block;
  font-size: var(--text-overline);
  font-weight: var(--fw-bold);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 6px;
}

/* ============================================================
   PAGE SERVICES — EN-TÊTE 2 COLONNES (méthode, engagement)
   ============================================================ */
.svc-split-header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
  align-items: end;
  margin-bottom: var(--space-8);
}
.svc-split-intro {
  font-size: var(--text-base);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
}

/* ============================================================
   PAGE SERVICES — MÉTHODE (liste numérotée hairline)
   ============================================================ */
.svc-steps {
  border: var(--hairline);
  border-radius: var(--radius-img);
  overflow: hidden;
}
.svc-step {
  display: grid;
  grid-template-columns: 80px 1fr;
  border-bottom: var(--hairline);
  transition: background var(--transition-fast);
}
.svc-step:last-child {
  border-bottom: none;
}
.svc-step:hover {
  background: var(--violet-soft);
}
.svc-step-num {
  font-size: var(--text-xs);
  font-weight: var(--fw-medium);
  font-family: var(--font-mono);
  color: var(--accent);
  padding: var(--space-6) var(--space-5);
  border-right: var(--hairline);
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.svc-step-content {
  padding: var(--space-6) 40px;
}
.svc-step-title {
  font-size: var(--text-lg);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight);
  margin-bottom: 10px;
}
.svc-step-desc {
  font-size: 15px;
  color: var(--text-secondary);
  line-height: 1.65;
}

/* ============================================================
   PAGE SERVICES — COLLECTIF (statement warm 2 colonnes)
   ============================================================ */
.svc-collectif {
  padding: var(--section-y-lg) var(--pad-x);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
  align-items: center;
}
.svc-collectif-title {
  font-size: clamp(30px, 3.4vw, 48px);
  font-weight: var(--fw-black);
  letter-spacing: var(--tracking-tight);
  line-height: 1.02;
}
.svc-collectif-title em {
  font-style: italic;
  font-weight: var(--fw-light);
  color: var(--accent);
}
.svc-collectif-text {
  font-size: 17px;
  color: var(--text-secondary);
  line-height: 1.75;
  max-width: 480px;
  margin-bottom: var(--space-5);
}

/* ============================================================
   PAGE SERVICES — ENGAGEMENT (3 promesses hairline)
   ============================================================ */
.svc-promesses {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: var(--hairline);
  border-radius: var(--radius-img);
  overflow: hidden;
}
.svc-promesse {
  padding: 40px;
  border-right: var(--hairline);
}
.svc-promesse:last-child {
  border-right: none;
}
.svc-promesse-num {
  font-size: var(--text-xs);
  font-weight: var(--fw-medium);
  font-family: var(--font-mono);
  color: var(--accent);
  margin-bottom: var(--space-5);
}
.svc-promesse-title {
  font-size: var(--text-lg);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight);
  margin-bottom: var(--space-3);
}
.svc-promesse-desc {
  font-size: 15px;
  color: var(--text-secondary);
  line-height: 1.65;
}

/* ============================================================
   PAGE À PROPOS — HERO (typographique, 2 colonnes)
   ============================================================ */
.apr-hero {
  padding: var(--space-9) var(--pad-x) var(--space-8);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
  align-items: end;
}
.apr-hero-overline {
  margin-bottom: 28px;
}
.apr-hero-headline {
  font-size: clamp(48px, 6vw, 84px);
  font-weight: var(--fw-black);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
}
.apr-hero-headline em {
  font-style: italic;
  font-weight: var(--fw-light);
  color: var(--accent);
}
/* Coupure réservée à l'anglais : « We create / what makes / you different. »
   en trois lignes fixes. Sans ce <br>, la ligne déborde de la colonne et se
   replie où le navigateur veut, donc à un point qui bouge avec la largeur.
   En français « On crée ce qui fait » tient sur une ligne : le <br> y est
   neutralisé. Le sélecteur porte sur :lang() plutôt que sur une classe de
   body, pour suivre toute langue ajoutée par la suite. */
.apr-hero-break {
  display: none;
}
:lang(en) .apr-hero-break {
  display: inline;
}
.apr-hero-intro {
  font-size: var(--text-lg);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
}

/* ============================================================
   PAGE À PROPOS — MANIFESTE (fond ink)
   ============================================================ */
.apr-manifeste-headline {
  font-size: clamp(24px, 2.8vw, 42px);
  font-weight: var(--fw-black);
  line-height: 1.1;
  letter-spacing: var(--tracking-tight);
  color: var(--white);
  margin-bottom: var(--space-6);
}
.apr-manifeste-headline em {
  font-style: italic;
  font-weight: var(--fw-light);
  color: var(--violet-on-dark);
}
.apr-manifeste-sub {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--on-dark-muted);
  /*max-width: 560px;*/
}

/* ============================================================
   PAGE À PROPOS — APPROCHE (5 lignes 2 colonnes hairline)
   ============================================================ */
/* En-tête où l'intro de droite est alignée à droite, contre le titre. */
.apr-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--space-8);
  margin-bottom: 56px;
}
.apr-header-intro {
  font-size: var(--text-lg);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
  max-width: 560px;
  text-align: right;
}

.apr-approche {
  margin-top: 56px;
}
.apr-row {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 48px;
  padding: 36px 0;
  border-top: var(--hairline);
  align-items: start;
}
.apr-row:last-child {
  border-bottom: var(--hairline);
}
.apr-row-label {
  display: flex;
  gap: var(--space-4);
  align-items: baseline;
}
.apr-row-num {
  font-size: var(--text-overline);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.1em;
  color: var(--accent);
  flex-shrink: 0;
  padding-top: 3px;
}
.apr-row-title {
  font-size: var(--text-lg);
  font-weight: var(--fw-bold);
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1.3;
}
.apr-row-desc {
  font-size: var(--text-lg);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
}

/* ============================================================
   PAGE À PROPOS — ÉQUIPE (portrait + bio)
   ============================================================ */
/* Cible d'ancre (#equipe) depuis la page Services : la marge évite que
   le haut de la section se retrouve sous la nav collante. */
.apr-equipe-section {
  scroll-margin-top: 80px;
}
.apr-equipe {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: var(--space-8);
  align-items: start;
  margin-bottom: var(--space-8);
}
.apr-portrait {
  aspect-ratio: 3 / 4;
  background: var(--border-color);
  border-radius: var(--radius-img);
  position: relative;
  overflow: hidden;
}
.apr-portrait-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.apr-portrait-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-overline);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}
/* Dégradé sombre pour que le nom reste lisible sur n'importe quelle photo. */
.apr-portrait-label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px var(--space-5);
  background: linear-gradient(to top, rgba(14, 14, 14, 0.65), transparent);
}
.apr-portrait-name {
  display: block;
  font-size: var(--text-base);
  font-weight: var(--fw-bold);
  letter-spacing: -0.02em;
  color: var(--white);
}
.apr-portrait-role {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.65);
}

.apr-equipe-intro {
  font-size: var(--text-xl);
  font-weight: var(--fw-bold);
  letter-spacing: -0.02em;
  line-height: 1.3;
  margin-bottom: var(--space-5);
}
.apr-equipe-text {
  font-size: var(--text-lg);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
  margin-bottom: 20px;
}
.apr-equipe-text:last-child {
  margin-bottom: 0;
}

/* ============================================================
   PAGE À PROPOS — COLLABORATEURS
   ============================================================ */
.apr-collab {
  padding-top: 48px;
  border-top: var(--hairline);
}
/* Le libellé et les flèches partagent une ligne : les flèches n'existent
   qu'en mode carrousel, le libellé reste seul le reste du temps. */
.apr-collab-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: 28px;
  /* Le libellé porte un trait décoratif qui ne se comprime pas : sans
     retour à la ligne, les flèches sortiraient du cadre sur écran étroit. */
  flex-wrap: wrap;
}
.apr-collab-label {
  margin-bottom: 0;
}
/* Les flèches gardent leur taille : c'est l'en-tête qui passe en colonne
   quand la ligne devient trop étroite (voir la media query 560px). */
.apr-collab-header .slider-controls {
  flex-shrink: 0;
}
/* La grille n'affiche que les collaborateurs publiés : les colonnes
   suivent leur nombre, plafonné à 4. Sans cela, deux collaborateurs
   s'étireraient sur une rangée de 4 en laissant deux trous. */
.apr-collab-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: var(--hairline);
  border-radius: var(--radius-img);
  overflow: hidden;
  background: var(--bg);
}
.apr-collab-grid[data-count="1"] {
  grid-template-columns: 1fr;
}
.apr-collab-grid[data-count="2"] {
  grid-template-columns: repeat(2, 1fr);
}
.apr-collab-grid[data-count="3"] {
  grid-template-columns: repeat(3, 1fr);
}
/* Au-delà de 4 collaborateurs : piste défilante, même mécanique que le
   carrousel des réalisations (flèches + drag, assets/js/main.js).
   display:flex remplace la grille — les colonnes calculées plus haut ne
   s'appliquent plus, chaque carte prend une largeur fixe. */
.apr-collab-grid--slider {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  cursor: grab;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.apr-collab-grid--slider::-webkit-scrollbar {
  display: none;
}
.apr-collab-grid--slider.is-dragging {
  cursor: grabbing;
  scroll-behavior: auto;
  scroll-snap-type: none;
}
.apr-collab-grid--slider .apr-collab-card {
  flex: 0 0 clamp(200px, 25%, 280px);
  scroll-snap-align: start;
}
/* Le lien reste cliquable, mais pas pendant un glissement. */
.apr-collab-grid--slider.is-dragging .apr-collab-card {
  pointer-events: none;
}
/* Même raison que .avis-card : la carte porte un .screen-reader-text
   qui déborderait la piste défilante. */
.apr-collab-card {
  position: relative;
  padding: 28px var(--space-5);
  border-right: var(--hairline);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.apr-collab-card:last-child {
  border-right: none;
}
.apr-collab-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--border-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: var(--fw-bold);
  color: var(--text-muted);
  letter-spacing: -0.02em;
  flex-shrink: 0;
}
/* Photo du collaborateur : occupe le même rond que l'avatar neutre, pour
   qu'une grille mixte (avec et sans photo) reste alignée. */
.apr-collab-avatar--photo {
  object-fit: cover;
}
.apr-collab-name {
  display: block;
  font-size: var(--text-base);
  font-weight: var(--fw-bold);
  letter-spacing: -0.02em;
  margin-bottom: 3px;
}
.apr-collab-role {
  display: block;
  font-size: 15px;
  color: var(--text-muted);
}
/* Lien vers le site du collaborateur : discret au repos, il prend
   l'accent au survol comme les autres liens du thème. */
.apr-collab-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  color: var(--text-muted);
  text-decoration: none;
  transition: color var(--transition-fast);
}
.apr-collab-link:hover,
.apr-collab-link:focus-visible {
  color: var(--text-body);
}
.apr-collab-link-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: var(--hairline);
  border-radius: 50%;
  font-size: 13px;
  line-height: 1;
  transition:
    border-color var(--transition-fast),
    transform var(--transition-fast);
}
.apr-collab-link:hover .apr-collab-link-icon,
.apr-collab-link:focus-visible .apr-collab-link-icon {
  border-color: currentColor;
  transform: translate(1px, -1px);
}

/* ============================================================
   PAGE À PROPOS — AVIS CLIENTS
   ============================================================ */
/* La note globale et les flèches partagent la colonne de droite du
   header. align-items:flex-end de .section-header les cale sur la ligne
   de base du titre. */
.avis-header-aside {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  flex-shrink: 0;
}
.avis-score {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.avis-score-note {
  font-size: var(--text-2xl);
  font-weight: var(--fw-black);
  letter-spacing: var(--tracking-tight);
  line-height: 1;
}
.avis-score-total {
  font-size: var(--text-sm);
  color: var(--text-muted);
  text-decoration: none;
  transition: color var(--transition-fast);
}
a.avis-score-total:hover,
a.avis-score-total:focus-visible {
  color: var(--text-body);
}

/* Étoiles : violettes et pleines jusqu'à la note, atténuées au-delà.
   Toujours décoratives — le texte équivalent est porté par le PHP. */
.avis-stars {
  display: inline-flex;
  gap: 2px;
  color: var(--accent);
  font-size: var(--text-sm);
  line-height: 1;
}
.avis-star--empty {
  color: var(--border-color);
}

/* Même mécanique que la grille des collaborateurs : les colonnes suivent
   le nombre de cartes, plafonné à 3. Sans cela, deux avis s'étireraient
   sur une rangée de 3 en laissant un trou. */
.avis-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: var(--hairline);
  border-radius: var(--radius-img);
  overflow: hidden;
  background: var(--bg);
}
.avis-grid[data-count="1"] {
  grid-template-columns: 1fr;
}
.avis-grid[data-count="2"] {
  grid-template-columns: repeat(2, 1fr);
}
/* Au-delà de 3 avis : piste défilante, même mécanique que le carrousel
   des collaborateurs (flèches + drag, assets/js/main.js). display:flex
   remplace la grille — chaque carte prend alors une largeur fixe. */
.avis-grid--slider {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  cursor: grab;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.avis-grid--slider::-webkit-scrollbar {
  display: none;
}
.avis-grid--slider.is-dragging {
  cursor: grabbing;
  scroll-behavior: auto;
  scroll-snap-type: none;
}
.avis-grid--slider .avis-card {
  flex: 0 0 clamp(260px, 33%, 380px);
  scroll-snap-align: start;
}
/* position:relative fait de la carte le bloc conteneur de ses propres
   .screen-reader-text. Sans ça, ces spans en position:absolute se calent
   sur le bloc conteneur initial : en mode carrousel, ceux des cartes
   hors écran se posent à leur position statique (jusqu'à 2400px), hors
   d'atteinte de l'overflow de la piste, et la page entière devient
   scrollable vers la droite. */
.avis-card {
  position: relative;
  padding: var(--space-6) var(--space-5);
  border-right: var(--hairline);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.avis-card:last-child {
  border-right: none;
}
.avis-note {
  line-height: 1;
}
/* La citation pousse l'auteur en bas de carte : côte à côte, des avis de
   longueurs différentes aligneraient mal leurs signatures.

   Les avis viennent de Google et peuvent faire dix lignes : la plus longue
   citation imposerait sa hauteur à toute la rangée, laissant les cartes
   courtes à moitié vides. On plafonne à 9 lignes et on coupe proprement.
   Un avis qui dépasse ce cadre mérite d'être raccourci à la saisie. */
.avis-citation {
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--text-body);
  flex-grow: 1;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 9;
  overflow: hidden;
}
.avis-auteur {
  font-size: var(--text-sm);
  color: var(--text-muted);
}

/* ============================================================
   PAGE À PROPOS — GRILLE DES CLIENTS (sous les avis)
   ============================================================ */
/* Grille ouverte, sans filets ni cadre : les logos seuls, sur 5 colonnes
   pour qu'ils gardent une taille lisible. */
.clients-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-6) var(--space-5);
  margin-top: var(--space-8);
}
.clients-grid-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 96px;
}
/* Même rendu que la bande de l'accueil : logos gris, légèrement estompés. */
.clients-grid-item img {
  display: block;
  width: auto;
  height: auto;
  max-width: 80%;
  max-height: 72px;
  object-fit: contain;
  opacity: 0.7;
}
@media (max-width: 900px) {
  .clients-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 560px) {
  .clients-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-5) var(--space-4);
  }
  .clients-grid-item {
    height: 72px;
  }
  .clients-grid-item img {
    max-height: 56px;
  }
}

/* ============================================================
   PAGE CONTACT — HERO
   ============================================================ */
.ct-hero {
  padding: var(--space-9) var(--pad-x) var(--space-8);
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--space-8);
  align-items: end;
}
.ct-hero-overline {
  margin-bottom: 28px;
}
.ct-hero-headline {
  font-size: clamp(44px, 5vw, 76px);
  font-weight: var(--fw-black);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
}
.ct-hero-headline em {
  font-style: italic;
  font-weight: var(--fw-light);
  color: var(--accent);
}
.ct-hero-intro {
  font-size: var(--text-lg);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
  max-width: 460px;
  padding-bottom: 6px;
}

/* ============================================================
   PAGE CONTACT — LAYOUT 2 COLONNES
   ============================================================ */
.ct-main {
  padding: var(--section-y) var(--pad-x);
  border-bottom: var(--hairline);
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 40px;
  align-items: start;
}
.ct-col-label {
  font-size: var(--text-overline);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--space-4);
}
.ct-col-label--inverse {
  color: var(--on-dark-muted);
}
.ct-col-title {
  font-size: clamp(26px, 2.6vw, 34px);
  font-weight: var(--fw-black);
  letter-spacing: var(--tracking-tight);
  line-height: 1.05;
  margin-bottom: 36px;
}

/* ============================================================
   PAGE CONTACT — FORMULAIRE
   ============================================================ */
.ct-form-card {
  border: var(--hairline);
  border-radius: var(--radius-img);
  padding: 48px;
}
.ct-field {
  margin-bottom: 22px;
}
.ct-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.ct-form-card label {
  display: block;
  font-size: 12px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: var(--space-2);
}
.ct-opt {
  color: var(--text-muted);
  font-weight: var(--fw-medium);
  text-transform: none;
  letter-spacing: var(--tracking-normal);
}
.ct-form-card input,
.ct-form-card select,
.ct-form-card textarea {
  width: 100%;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  color: var(--ink);
  background: var(--bg);
  border: var(--hairline);
  border-radius: var(--radius-md);
  padding: 14px var(--space-4);
  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-fast);
}
.ct-form-card input::placeholder,
.ct-form-card textarea::placeholder {
  color: var(--text-muted);
}
.ct-form-card input:focus,
.ct-form-card select:focus,
.ct-form-card textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--violet-soft);
}
/* Chevron du select en data-URI : pas de requête, et --gray en dur car
   une variable CSS ne peut pas s'interpoler dans une url(). */
.ct-form-card select {
  appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2 4l4 4 4-4' stroke='%23999999' stroke-width='1.5' fill='none'/></svg>");
  background-repeat: no-repeat;
  background-position: right var(--space-4) center;
}
.ct-form-card textarea {
  resize: vertical;
  min-height: 140px;
  line-height: 1.6;
}
.ct-form-note {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-top: 18px;
}

/* Case de consentement. Le label du formulaire est en capitales espacées
   et les champs font 100% de large : deux règles à défaire ici, une phrase
   devant se lire normalement à côté d'une case de taille fixe. */
.ct-field--consent {
  margin-top: 26px;
}
.ct-form-card .ct-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: var(--fw-regular);
  letter-spacing: var(--tracking-normal);
  text-transform: none;
  line-height: 1.5;
  color: var(--text-secondary);
  cursor: pointer;
}
.ct-form-card .ct-consent input[type="checkbox"] {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  /* Aligne la case sur la première ligne de texte plutôt que sur le haut
     de la boîte, l'interligne décalant l'un par rapport à l'autre. */
  margin-top: 2px;
  accent-color: var(--accent);
  cursor: pointer;
}
.ct-form-card .ct-consent a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.btn--block {
  width: 100%;
  display: block;
  text-align: center;
}

/* Champ en erreur : bordure rouge + message sous le champ. */
.ct-form-card [aria-invalid="true"] {
  border-color: #c0392b;
}
.ct-error {
  display: block;
  margin-top: 6px;
  font-size: 14px;
  color: #c0392b;
}
.ct-alert {
  border-radius: var(--radius-md);
  padding: 14px var(--space-4);
  font-size: 15px;
  line-height: 1.5;
  margin-bottom: var(--space-5);
}
.ct-alert--success {
  background: var(--violet-soft);
  color: var(--accent-hover);
}
.ct-alert--error {
  background: rgba(192, 57, 43, 0.08);
  color: #c0392b;
}

/* Honeypot anti-spam : hors écran, jamais vu ni tabulé par un humain. */
.ct-hp {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

/* ============================================================
   PAGE CONTACT — COORDONNÉES (bloc violet)
   ============================================================ */
/* Colonne de droite. Le bloc de réservation d'appel qui la coiffait a été
   retiré : les coordonnées reprennent son fond violet et son arrondi. */
.ct-side {
  display: flex;
  flex-direction: column;
}

.ct-coord {
  background: var(--accent);
  color: var(--text-on-accent);
  border-radius: var(--radius-cta);
  padding: 40px;
}
.ct-coord-item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--border-inverse-strong);
}
.ct-coord-item:first-child {
  padding-top: 0;
}
.ct-coord-item:last-child {
  border-bottom: none;
}
.ct-coord-key {
  font-size: var(--text-overline);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--on-dark-muted);
  white-space: nowrap;
}
.ct-coord-val {
  font-size: var(--text-base);
  font-weight: var(--fw-medium);
  color: var(--text-on-accent);
  text-align: right;
}
/* Le survol violet d'avant se perdrait sur le fond : on souligne. */
a.ct-coord-val:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.ct-socials {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  margin-top: var(--space-5);
}
.ct-socials a {
  font-size: 15px;
  font-weight: var(--fw-medium);
  color: var(--text-on-accent);
  opacity: 0.6;
  transition: opacity var(--transition-fast);
}
.ct-socials a:hover {
  opacity: 1;
}

/* ============================================================
   PAGE CONTACT — BANDE RASSURANCE
   ============================================================ */
.ct-reassure {
  padding: var(--space-7) var(--pad-x);
}
.ct-reassure-text {
  font-size: clamp(20px, 2.2vw, 28px);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight);
  line-height: 1.35;
  max-width: 820px;
}
.ct-reassure-text em {
  font-style: italic;
  font-weight: var(--fw-light);
  color: var(--accent);
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  padding: 32px var(--pad-x);
  border-top: var(--hairline);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.footer-logo {
  font-size: 18px;
  font-weight: var(--fw-bold);
  letter-spacing: -0.05em;
  display: inline-flex;
  align-items: center;
}
/* Logo image (WebP) : hauteur fixe, largeur auto pour garder le ratio.
   Un cran sous l'en-tête (28px), le pied de page étant secondaire. */
.footer-logo-img {
  height: 24px;
  width: auto;
}
/* L'écart passe de 36 à 28px et la liste peut se replier : le menu du pied
   de page est libre côté admin, il peut donc contenir plus d'entrées que la
   nav sans pousser le copyright à la ligne. */
.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  /* wp_nav_menu() hérite du reset global (list-style: none) — rien à
     rétablir ici, contrairement au contenu éditorial. */
}
.footer-links a {
  font-size: 13px;
  color: var(--text-muted);
}
.footer-links a:hover {
  color: var(--ink);
}
/* Mentions légales et confidentialité : présentes sans concurrencer la nav. */
.footer-links-legal a {
  font-size: 12px;
  opacity: 0.75;
}
.footer-links-legal a:hover {
  opacity: 1;
}
.footer-copy {
  font-size: 12px;
  color: var(--text-muted);
}

/* ============================================================
   CONTENU ÉDITORIAL (page.php — mentions légales, confidentialité)
   Pages rédigées dans l'éditeur WordPress : le thème n'a pas la main
   sur le balisage, on style donc les éléments bruts.
   ============================================================ */
.entry-content > * + * {
  margin-top: var(--space-4);
}
.entry-content h2,
.entry-content h3 {
  color: var(--ink);
  line-height: var(--leading-snug);
}
/* Marge haute plus généreuse : c'est elle qui découpe le texte en
   sections lisibles. La règle ci-dessus ne suffirait pas à séparer un
   titre du paragraphe qui le précède. */
.entry-content > h2 + *,
.entry-content > h3 + * {
  margin-top: var(--space-3);
}
.entry-content > * + h2 {
  margin-top: var(--space-7);
}
.entry-content > * + h3 {
  margin-top: var(--space-5);
}
.entry-content h2 {
  font-size: 22px;
  font-weight: var(--fw-bold);
  letter-spacing: -0.02em;
}
.entry-content h3 {
  font-size: 16px;
  font-weight: var(--fw-semibold);
}
.entry-content strong {
  color: var(--ink);
  font-weight: var(--fw-semibold);
}
.entry-content a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
/* Le reset global supprime les puces (list-style: none) : on les rétablit
   ici, le contenu éditorial en ayant besoin pour rester lisible. */
.entry-content ul {
  list-style: disc;
  padding-left: 1.2em;
}
.entry-content ol {
  list-style: decimal;
  padding-left: 1.2em;
}
.entry-content li + li {
  margin-top: var(--space-2);
}
.entry-content li::marker {
  color: var(--text-muted);
}

/* ============================================================
   RÉALISATIONS — HERO (2 colonnes alignées en bas)
   ============================================================ */
.rea-hero {
  padding: var(--space-9) var(--pad-x) var(--space-8);
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--space-8);
  align-items: end;
}
.rea-hero-overline {
  margin-bottom: 28px;
}
.rea-hero-headline {
  font-size: clamp(44px, 5vw, 76px);
  font-weight: var(--fw-black);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
}
.rea-hero-headline em {
  font-style: italic;
  font-weight: var(--fw-light);
  color: var(--accent);
}
.rea-hero-intro {
  font-size: var(--text-lg);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
  max-width: 460px;
  padding-bottom: 6px;
}

/* ============================================================
   RÉALISATIONS — BARRE DE FILTRES
   Collante sous la nav (64px) pour rester accessible au scroll.
   ============================================================ */
.filter-bar {
  padding: 22px var(--pad-x);
  border-bottom: var(--hairline);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-4);
  position: sticky;
  top: 64px;
  z-index: 90;
  background: var(--bg);
}
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.filter-btn {
  display: inline-flex;
  align-items: center;
  padding: 9px 18px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-color);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--ink);
  background: var(--bg);
  letter-spacing: var(--tracking-snug);
  cursor: pointer;
  font-family: inherit;
  transition:
    background var(--transition-fast),
    color var(--transition-fast),
    border-color var(--transition-fast);
}
.filter-btn:hover {
  border-color: var(--ink);
}
.filter-btn.is-active {
  background: var(--accent);
  color: var(--text-on-accent);
  border-color: var(--accent);
}
.filter-count {
  font-size: var(--text-sm);
  color: var(--text-muted);
  letter-spacing: 0.02em;
}

/* ============================================================
   RÉALISATIONS — GRILLE DE PROJETS
   ============================================================ */
.work-grid {
  padding: 56px var(--pad-x) var(--space-9);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: var(--space-5);
  row-gap: 48px;
  border-bottom: var(--hairline);
}
.project {
  display: block;
  color: inherit;
}
.project.is-hidden {
  display: none;
}
/* .project-img est partagé avec le carrousel homepage (fond ink) :
   ici la vignette est en 4:3 et le label de type reprend l'accent
   plein, le violet-on-dark n'ayant de sens que sur fond sombre. */
.work-grid .project-img {
  aspect-ratio: 4 / 3;
  margin-bottom: 18px;
}
.work-grid .project-type {
  color: var(--accent);
  font-size: var(--text-overline);
  margin-bottom: var(--space-2);
}
.project-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--transition-med);
}
.project:hover .project-img img {
  transform: scale(1.03);
}
.project-name {
  font-size: var(--text-xl);
  font-weight: var(--fw-bold);
  letter-spacing: -0.02em;
  line-height: 1.2;
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}
/* La flèche n'apparaît qu'au survol — mais reste visible au clavier. */
.project-name .arrow {
  color: var(--accent);
  opacity: 0;
  transform: translateX(-4px);
  transition:
    opacity var(--transition-fast),
    transform var(--transition-fast);
  font-size: 0.95em;
}
.project:hover .project-name .arrow,
.project:focus-visible .project-name .arrow,
.project-card:hover .project-name .arrow,
.project-card:focus-visible .project-name .arrow {
  opacity: 1;
  transform: translateX(0);
}
.project-year {
  display: block;
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin-top: 6px;
}
.work-empty {
  padding: var(--space-8) var(--pad-x);
  font-size: var(--text-lg);
  color: var(--text-secondary);
  text-align: center;
}

/* ============================================================
   FICHE PROJET — HERO
   ============================================================ */
.p-hero {
  padding: var(--space-6) var(--pad-x) var(--space-8);
  border-bottom: var(--hairline);
}
.p-hero-top {
  margin-bottom: var(--space-7);
}
.backlink {
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--text-muted);
  transition: color var(--transition-fast);
}
.backlink:hover {
  color: var(--ink);
}
.p-cat {
  margin-top: var(--space-2);
  margin-bottom: 28px;
}
/* Titre et tagline reprennent exactement l'échelle du hero des
   réalisations (.rea-hero-headline / .rea-hero-intro) : passer de la
   grille à la fiche ne doit pas changer la taille du titre.

   Le titre n'est pas plafonné : il occupe toute la largeur de la
   section, jusqu'aux gouttières. Un titre rédigé suivi de son italique
   passait sur trois lignes dès 960px, alors que la section en offre
   1296. */
.p-title {
  font-size: clamp(44px, 5vw, 76px);
  font-weight: var(--fw-black);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
}
.p-title em {
  font-style: italic;
  font-weight: var(--fw-light);
  color: var(--accent);
}
.p-tagline {
  font-size: var(--text-lg);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
  max-width: 640px;
  margin-top: 28px;
}

/* ============================================================
   FICHE PROJET — MÉTA (carte hairline arrondie)
   ============================================================ */
.p-meta-wrap {
  padding: var(--space-7) var(--pad-x) 0;
}
.p-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  border: var(--hairline);
  border-radius: var(--radius-img);
  overflow: hidden;
}
.meta-item {
  padding: 28px var(--space-6);
  border-right: var(--hairline);
}
.meta-item:last-child {
  border-right: none;
}
.meta-label {
  font-size: var(--text-overline);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 10px;
}
.meta-value {
  font-size: var(--text-base);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-snug);
  line-height: 1.4;
}
.meta-value a {
  color: var(--accent);
}
.meta-value a:hover {
  text-decoration: underline;
}

/* ============================================================
   FICHE PROJET — MÉDIAS (cover + galerie)
   ============================================================ */
.p-media {
  padding: var(--space-7) var(--pad-x) 0;
}
.media-full {
  aspect-ratio: 16 / 9;
  background: var(--white);
  border-radius: var(--radius-img);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.14);
  font-size: var(--text-overline);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: var(--space-5);
}
.media-duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
  margin-bottom: var(--space-5);
}
.media-half {
  aspect-ratio: 4 / 3;
  background: var(--surface-warm);
  border-radius: var(--radius-img);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: var(--text-overline);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.media-full img,
.media-half img,
video.media-full {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.p-media--closing {
  padding-top: 0;
  padding-bottom: 88px;
  border-bottom: var(--hairline);
}
/* Ce bloc peut contenir plusieurs images : seule la dernière perd sa
   marge basse, sinon le padding du bloc fait déjà l'espace de fin. */
.p-media--closing .media-full:last-child {
  margin-bottom: 0;
}
/* Le padding-top à 0 ci-dessus vaut quand le bloc qui ferme suit un autre
   bloc média, dont la marge basse fait déjà l'espace. Juste après le corps,
   il n'y a que le filet de .p-body : l'image s'y collait. */
.p-body + .p-media {
  padding-top: var(--space-7);
}
/* Galerie en grille : le duo ferme la zone, même logique. */
.p-media--closing .media-duo:last-child {
  margin-bottom: 0;
}

/* Vidéos de projet — boucles courtes, muettes, décoratives.
   La <video> porte .media-full pour les coins arrondis et la largeur ;
   la hauteur, elle, suit le fichier (voir juste en dessous). La figure ne
   fait que porter la légende. */

/* Le cadre s'ajuste à la vidéo, au lieu d'imposer son 16:9.
   .media-full force aspect-ratio 16/9 pour les images ; sur une vidéo au
   format inhabituel (bannière 1074x256), ça laissait forcément des bandes
   — cover en coupait 58 %, contain les remplissait de noir. En laissant
   la vidéo imposer sa hauteur, il n'y a plus de bandes du tout, donc plus
   de couleur de fond à choisir.

   height:auto annule le height:100% hérité, et aspect-ratio:auto laisse
   le ratio natif du fichier décider. Une vidéo en 16:9 rend exactement
   comme avant. */
video.media-full {
  aspect-ratio: auto;
  height: auto;
  object-fit: fill;
  background: none;
}
.p-video {
  margin-bottom: var(--space-5);
}
.p-media--closing .p-video:last-child {
  margin-bottom: 0;
}
/* La marge de fin est portée par la figure, pas par la vidéo, sinon la
   légende s'en détacherait. */
.p-video video.media-full {
  margin-bottom: 0;
}
.p-video-legende {
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  color: var(--text-muted);
}

/* Les visuels sont des <button> (ouverture de la lightbox) : on annule
   le style natif, la mise en forme reste celle de .media-full/.media-half. */
button.media-full,
button.media-half {
  width: 100%;
  padding: 0;
  border: none;
  font: inherit;
  cursor: zoom-in;
  appearance: none;
}
button.media-full img,
button.media-half img {
  transition: transform var(--transition-med);
}
button.media-full:hover img,
button.media-half:hover img {
  transform: scale(1.02);
}

/* ============================================================
   LIGHTBOX (fiche projet)
   ============================================================ */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lightbox[hidden] {
  display: none;
}
/* Le body ne défile plus derrière la lightbox ouverte. */
body.has-lightbox {
  overflow: hidden;
}
.lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(14, 14, 14, 0.94);
  border: none;
  cursor: zoom-out;
}
.lightbox__stage {
  position: relative;
  z-index: 1;
  max-width: min(1200px, 92vw);
  max-height: 86vh;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Le navigateur ne doit pas voler le geste horizontal au swipe. */
  touch-action: pan-y;
}
.lightbox__img {
  max-width: 100%;
  max-height: 86vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--radius-md);
  user-select: none;
  -webkit-user-drag: none;
}
.lightbox__close,
.lightbox__nav {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.1);
  color: var(--white);
  border: 1px solid var(--border-inverse);
  border-radius: var(--radius-pill);
  cursor: pointer;
  font-family: inherit;
  transition:
    background var(--transition-fast),
    border-color var(--transition-fast);
}
.lightbox__close:hover,
.lightbox__nav:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: var(--white);
}
.lightbox__close:focus-visible,
.lightbox__nav:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 2px;
}
.lightbox__close {
  top: var(--space-5);
  right: var(--space-5);
  width: 44px;
  height: 44px;
  font-size: 26px;
  line-height: 1;
}
.lightbox__nav {
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  font-size: 20px;
}
.lightbox__nav--prev {
  left: var(--space-5);
}
.lightbox__nav--next {
  right: var(--space-5);
}
.lightbox__nav[hidden] {
  display: none;
}
.lightbox__counter {
  position: absolute;
  z-index: 2;
  bottom: var(--space-5);
  left: 50%;
  transform: translateX(-50%);
  font-size: var(--text-sm);
  font-family: var(--font-mono);
  color: var(--on-dark-muted);
  margin: 0;
}
.lightbox__counter[hidden] {
  display: none;
}

/* ============================================================
   FICHE PROJET — CORPS (2 colonnes)
   ============================================================ */
.p-body {
  padding: 88px var(--pad-x);
  border-bottom: var(--hairline);
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: var(--space-8);
}
.p-body-left h2 {
  font-size: clamp(26px, 2.6vw, 34px);
  font-weight: var(--fw-black);
  letter-spacing: var(--tracking-tight);
  line-height: 1.05;
}
.p-body-left h2 em {
  font-style: italic;
  font-weight: var(--fw-light);
  color: var(--accent);
}
/* Le corps vient d'un éditeur riche : on style tout ce qu'il peut
   produire, pas seulement les paragraphes, sinon une liste ou un
   sous-titre ressortirait avec les styles par défaut du navigateur. */
.p-body-right p,
.p-body-right ul,
.p-body-right ol {
  font-size: var(--text-lg);
  color: var(--text-secondary);
  line-height: 1.75;
  margin-bottom: var(--space-5);
}
.p-body-right > *:last-child {
  margin-bottom: 0;
}
.p-body-right strong,
.p-body-right b {
  color: var(--ink);
  font-weight: var(--fw-semibold);
}
.p-body-right em,
.p-body-right i {
  font-style: italic;
}
.p-body-right a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.p-body-right a:hover {
  text-decoration-thickness: 2px;
}
/* Le reset global retire les puces : on les rétablit ici, où une
   liste est du contenu rédigé et non un élément d'interface. */
.p-body-right ul,
.p-body-right ol {
  padding-left: 1.3em;
}
.p-body-right ul {
  list-style: disc;
}
.p-body-right ol {
  list-style: decimal;
}
.p-body-right li {
  margin-bottom: var(--space-2);
}
.p-body-right li:last-child {
  margin-bottom: 0;
}
/* Sous-titres possibles dans l'éditeur : on les cale sur l'encre du
   thème plutôt que sur le gris du corps de texte. */
.p-body-right h2,
.p-body-right h3,
.p-body-right h4 {
  color: var(--ink);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight);
  line-height: 1.2;
  margin-top: var(--space-6);
  margin-bottom: var(--space-3);
}
.p-body-right h2 {
  font-size: var(--text-xl);
}
.p-body-right h3 {
  font-size: var(--text-lg);
}
.p-body-right h4 {
  font-size: var(--text-base);
}
.p-body-right > h2:first-child,
.p-body-right > h3:first-child,
.p-body-right > h4:first-child {
  margin-top: 0;
}
.p-body-right blockquote {
  border-left: 2px solid var(--accent);
  padding-left: var(--space-4);
  margin-bottom: var(--space-5);
  font-style: italic;
  color: var(--text-secondary);
}

/* ============================================================
   FICHE PROJET — CITATION CLIENT (bande warm)
   ============================================================ */
.p-quote {
  padding: 88px var(--pad-x);
  border-bottom: var(--hairline);
  background: var(--surface-warm);
}
.p-quote blockquote {
  font-size: clamp(24px, 3vw, 40px);
  font-weight: var(--fw-black);
  letter-spacing: var(--tracking-tight);
  line-height: 1.15;
  max-width: 900px;
}
.p-quote blockquote em {
  font-style: italic;
  font-weight: var(--fw-light);
  color: var(--accent);
}
.p-quote cite {
  display: block;
  margin-top: var(--space-6);
  font-size: var(--text-sm);
  font-style: normal;
  color: var(--text-secondary);
  letter-spacing: var(--tracking-snug);
}

/* ============================================================
   FICHE PROJET — PROJET SUIVANT
   ============================================================ */
.p-next {
  padding: 72px var(--pad-x);
  border-bottom: var(--hairline);
}
.p-next a {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--space-7);
  align-items: center;
  color: inherit;
}
.p-next-label {
  font-size: var(--text-overline);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}
.p-next-title {
  font-size: clamp(28px, 3.4vw, 48px);
  font-weight: var(--fw-black);
  letter-spacing: var(--tracking-tight);
  line-height: 1;
  text-align: center;
}
.p-next-arrow {
  font-size: 29px;
  color: var(--accent);
  transition: transform var(--transition-fast);
}
.p-next a:hover .p-next-arrow {
  transform: translateX(6px);
}

/* ============================================================
   RESPONSIVE
   Ordre du plus large au plus étroit : les blocs se surchargent en
   cascade, un palier placé après un plus étroit annulerait ce dernier.
   ============================================================ */
@media (max-width: 1100px) {
  .work-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 900px) {
  :root {
    --gutter: var(--gutter-tight);
  }

  /* Nav fixe : toujours visible au scroll. Elle sort du flux, donc le
     header conserve sa hauteur pour ne pas masquer le haut de page.
     Le sticky du desktop n'a plus lieu d'être : la nav se positionne
     elle-même, et un parent collé au-dessus n'ajouterait rien. */
  .site-header {
    position: static;
    height: 64px;
  }
  .nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    /* Le z-index vit sur .site-header, sans effet ici puisqu'il repasse
       en static : la nav porte donc le sien, sans quoi le contenu de la
       page lui passerait dessus au défilement. */
    z-index: 100;
  }

  .nav-links {
    position: absolute;
    top: 64px;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    background: var(--bg);
    border-bottom: var(--hairline);
    padding: 24px var(--gutter-tight);
    box-shadow: var(--shadow-pop);
    /* Masqué par la hauteur plutôt que display:none, pour que
       l'ouverture puisse être animée. */
    display: flex;
    max-height: 0;
    overflow: hidden;
    padding-top: 0;
    padding-bottom: 0;
    border-bottom-color: transparent;
    transition:
      max-height var(--transition-med),
      padding var(--transition-med);
  }
  .nav-links.is-open {
    max-height: 70vh;
    overflow-y: auto;
    padding-top: 24px;
    padding-bottom: 24px;
    border-bottom-color: var(--border-color);
  }
  .nav-links a {
    padding: 14px 0;
    opacity: 1;
  }
  /* Le menu passe en colonne, mais les deux codes restent côte à côte :
     ils tiennent sur une ligne. Le filet devient horizontal, au-dessus,
     pour les détacher des liens de navigation. */
  .nav-langs {
    flex-wrap: wrap;
    padding: 14px 0;
    gap: 12px;
  }
  .nav-langs::before {
    flex-basis: 100%;
    width: auto;
    height: 1px;
    margin: 0 0 6px;
  }
  /* Les codes suivent la taille des liens du menu, qui grossissent en
     colonne. Posé sur les deux éléments : la règle desktop l'est aussi,
     et l'emporterait sinon sur une taille mise ici sur .nav-langs. */
  .nav-lang,
  .nav-links a.nav-lang {
    font-size: 15px;
  }
  /* L'opacité au repos est conservée : elle distingue la langue
     inactive de l'active, alors que les liens du menu passent tous à 1. */
  .nav-links a.nav-lang {
    opacity: 0.4;
    padding: 0;
  }
  .nav-toggle {
    display: block;
  }

  .section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }
  .footer {
    flex-direction: column;
    align-items: flex-start;
  }

  /* Hero : une colonne, le visuel passe au-dessus du texte. */
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .hero-media {
    aspect-ratio: 16 / 10;
    order: -1;
  }
  .hero-headline {
    margin-bottom: 32px;
  }

  /* CTA violet : passe en colonne, tout aligné à gauche. */
  .cta-inner {
    flex-direction: column;
    align-items: flex-start;
    padding: 48px 32px;
    gap: 32px;
  }
  .cta-right {
    align-items: flex-start;
  }
  .cta-sub {
    text-align: left;
    max-width: none;
  }

  .services-grid {
    grid-template-columns: 1fr;
  }
  .service-card {
    border-right: none;
    border-bottom: var(--hairline);
  }
  .service-card:last-child {
    border-bottom: none;
  }

  /* Statement : fond chaud pour couper la coulée blanche. Les sections
     s'allongeant beaucoup en mobile, hero → statement → services faisaient
     trois blancs d'affilée avant le portfolio sombre. Le contraste des
     bordures et du texte reste inchangé, --surface-warm servant déjà de
     fond clair ailleurs (cartes média, survol). */
  .statement {
    background: var(--surface-warm);
  }

  /* Portfolio : les cartes rétrécissent pour laisser deviner le suivant. */
  .portfolio-slider .project-card {
    flex-basis: 78vw;
  }
  /* Flèches retirées ici : au doigt on fait glisser la piste, et l'en-tête
     passant en colonne, elles se retrouvaient loin des cartes — séparées
     d'elles par le lien « Tous les projets », donc plus rien n'indiquait
     ce qu'elles pilotaient. La carte tronquée au bord suffit à signaler
     qu'il y a une suite. Portée au portfolio seul : les avis et les
     collaborateurs gardent les leurs. */
  .portfolio-section .slider-controls {
    display: none;
  }

  /* Pourquoi : label empilé au-dessus du texte. */
  .why-row {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  /* Stats : 2 colonnes plutôt que 4 (1 seule serait interminable).
     En 2×2, les bordures par cellule laissent des traits qui dépassent
     (hauteurs inégales). On repasse sur le motif « fond + gap » : les
     filets sont alors parfaitement contenus. */
  .stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    background: var(--border-color);
    border-top: var(--hairline);
    padding: 0;
  }
  .stat-item {
    background: var(--bg);
    border-right: none;
    padding: var(--space-6) var(--space-5);
  }
  .stat-item:first-child {
    padding-left: var(--space-5);
  }

  /* Bande clients : le label passe au-dessus de la piste. */
  .clients {
    height: auto;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
    padding-top: var(--space-5);
    padding-bottom: var(--space-5);
  }
  /* En colonne, le flex: 1 du viewport joue sur la hauteur et sa largeur
     retombe sur align-items: flex-start, donc sur celle de son contenu.
     Le JS comparait alors la piste à une fenêtre de même largeur : le
     débordement n'était jamais détecté et la bande ne défilait pas. */
  .clients-viewport {
    width: 100%;
    align-self: stretch;
  }
  .clients-sep {
    display: none;
  }

  /* --- Page Services --- */
  .svc-hero,
  .svc-block,
  .svc-split-header,
  .svc-collectif {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  /* En une colonne, le visuel repasse au-dessus du texte pour les 4 blocs :
     l'alternance n'a plus de sens et l'ordre du DOM suffit. */
  .svc-block--reverse .svc-visual,
  .svc-block--reverse .svc-content {
    order: 0;
  }
  .svc-hero-right {
    padding-bottom: 0;
  }
  .svc-visual-num {
    padding: var(--space-5) var(--space-5);
  }
  .svc-visual-tag {
    left: var(--space-5);
  }
  .svc-step {
    grid-template-columns: 56px 1fr;
  }
  .svc-step-num {
    padding: var(--space-5) var(--space-3);
  }
  .svc-step-content {
    padding: var(--space-5);
  }

  .svc-promesses {
    grid-template-columns: 1fr;
  }
  .svc-promesse {
    padding: var(--space-6) var(--space-5);
    border-right: none;
    border-bottom: var(--hairline);
  }
  .svc-promesse:last-child {
    border-bottom: none;
  }

  /* --- Page À propos --- */
  .apr-hero,
  .apr-equipe {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  /* L'intro de l'en-tête repasse à gauche, sous le titre. */
  .apr-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-5);
  }
  .apr-header-intro {
    text-align: left;
    max-width: none;
  }
  /* Approche : libellé empilé au-dessus du texte, comme why-row. */
  .apr-row {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  /* Le portrait est plafonné : en pleine largeur, un ratio 3/4 serait immense. */
  .apr-portrait {
    max-width: 320px;
  }

  /* Les sélecteurs data-count doivent être repris ici : plus spécifiques
     que .apr-collab-grid seul, ils gagneraient malgré la media query. */
  .apr-collab-grid,
  .apr-collab-grid[data-count="3"] {
    grid-template-columns: repeat(2, 1fr);
  }
  /* En 2×2, seule la carte de droite de chaque rangée perd son filet.
     Le carrousel est exclu : ses cartes forment une seule rangée. */
  .apr-collab-grid:not(.apr-collab-grid--slider)
    .apr-collab-card:nth-child(2n) {
    border-right: none;
  }
  .apr-collab-grid:not(.apr-collab-grid--slider)
    .apr-collab-card:nth-child(-n + 2) {
    border-bottom: var(--hairline);
  }

  /* Avis : 3 colonnes deviennent trop étroites pour une citation. Le
     sélecteur data-count est repris pour la spécificité. */
  .avis-grid,
  .avis-grid[data-count="3"] {
    grid-template-columns: repeat(2, 1fr);
  }
  .avis-grid:not(.avis-grid--slider) .avis-card:nth-child(2n) {
    border-right: none;
  }
  /* Toutes les cartes sauf la dernière rangée gagnent un filet en bas.
     Avec 3 avis, seules les deux premières forment une rangée pleine. */
  .avis-grid:not(.avis-grid--slider) .avis-card:nth-child(-n + 2) {
    border-bottom: var(--hairline);
  }

  /* --- Page Contact --- */
  .ct-hero {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .ct-hero-intro {
    padding-bottom: 0;
  }
  /* Une colonne : le formulaire d'abord, les coordonnées ensuite. */
  .ct-main {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
  .ct-form-card {
    padding: 32px var(--space-5);
  }
  .ct-coord {
    padding: var(--space-6) var(--space-5);
  }
  /* Les paires de champs s'empilent (le margin de .ct-field fait l'écart). */
  .ct-row {
    grid-template-columns: 1fr;
    gap: 0;
  }

  /* --- Réalisations --- */
  .rea-hero {
    grid-template-columns: 1fr;
    gap: var(--space-6);
    padding: 56px var(--pad-x) var(--space-7);
  }
  .rea-hero-intro {
    max-width: none;
  }
  /* La barre de filtres cesse d'être collante : sur mobile elle
     mangerait une part trop visible de la hauteur d'écran. */
  .filter-bar {
    position: static;
  }
  .work-grid {
    padding: var(--space-7) var(--pad-x) var(--space-8);
  }

  /* --- Fiche projet --- */
  .p-body {
    grid-template-columns: 1fr;
    gap: var(--space-7);
    padding: 56px var(--pad-x);
  }
  .media-duo {
    grid-template-columns: 1fr;
  }
  .p-quote {
    padding: 56px var(--pad-x);
  }
  .p-next {
    padding: 48px var(--pad-x);
  }
  .p-next a {
    grid-template-columns: 1fr;
    text-align: center;
    gap: var(--space-4);
    justify-items: center;
  }

  /* --- Lightbox --- */
  /* Les flèches passent en bas, côte à côte : sur les côtés elles
     mordraient sur l'image et gêneraient le swipe. */
  .lightbox__nav {
    top: auto;
    bottom: var(--space-5);
    transform: none;
    width: 46px;
    height: 46px;
  }
  .lightbox__nav--prev {
    left: calc(50% - 60px);
  }
  .lightbox__nav--next {
    right: calc(50% - 60px);
  }
  .lightbox__counter {
    bottom: calc(var(--space-5) + 58px);
  }
  .lightbox__stage {
    max-width: 94vw;
    max-height: 72vh;
  }
  .lightbox__img {
    max-height: 72vh;
  }
}

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

@media (max-width: 560px) {
  /* Hero : sur un iPhone 12 mini (327px utiles), le bouton et le lien
     tiennent tout juste côte à côte. Le padding du bouton est resserré et
     le lien devient insécable, sinon sa flèche part seule à la ligne. Si
     l'espace manque quand même, les deux passent l'un sous l'autre plutôt
     que de se comprimer. */
  .hero-actions {
    flex-wrap: wrap;
    gap: 16px 12px;
  }
  .hero-actions .btn {
    padding-left: 20px;
    padding-right: 20px;
  }
  .hero-actions .textlink {
    white-space: nowrap;
  }

  /* Le libellé et son trait décoratif ne se compriment pas : côte à côte,
     les flèches sortiraient du cadre. Elles passent donc en dessous. */
  .apr-collab-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
  }

  /* Une colonne quel que soit le nombre de collaborateurs — les
     sélecteurs data-count sont repris pour la spécificité. */
  .apr-collab-grid,
  .apr-collab-grid[data-count="2"],
  .apr-collab-grid[data-count="3"] {
    grid-template-columns: 1fr;
  }
  /* Cartes empilées : le filet passe en bas. Le carrousel est exclu — ses
     cartes restent côte à côte et gardent leur filet à droite. */
  .apr-collab-grid:not(.apr-collab-grid--slider) .apr-collab-card {
    border-right: none;
    border-bottom: var(--hairline);
  }
  .apr-collab-grid:not(.apr-collab-grid--slider) .apr-collab-card:last-child {
    border-bottom: none;
  }

  /* Avis : une colonne, filets en bas — mêmes raisons que la grille des
     collaborateurs juste au-dessus. */
  .avis-grid,
  .avis-grid[data-count="2"],
  .avis-grid[data-count="3"] {
    grid-template-columns: 1fr;
  }
  .avis-grid:not(.avis-grid--slider) .avis-card {
    border-right: none;
    border-bottom: var(--hairline);
  }
  .avis-grid:not(.avis-grid--slider) .avis-card:last-child {
    border-bottom: none;
  }

  /* Coordonnées : clé au-dessus de la valeur, sinon les longues valeurs
     (email, téléphone) se serrent contre leur libellé. */
  .ct-coord-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  .ct-coord-val {
    text-align: left;
  }
}