/* ============================================================
   DESIGN SYSTEM — gersendehurpy.fr
   Polices AUTO-HÉBERGÉES (aucun appel externe) :
   · Share Tech Mono — titre « GERSENDE HURPY »
   · Arvo 400/700 (+ italiques) — tout le reste du site
   ============================================================ */

/* ── Polices auto-hébergées (woff2, /assets/fonts) — zéro appel Google ── */
@font-face {
  font-family: 'Share Tech Mono';
  src: url('/assets/fonts/share-tech-mono.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Arvo';
  src: url('/assets/fonts/arvo-regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Arvo';
  src: url('/assets/fonts/arvo-bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Arvo';
  src: url('/assets/fonts/arvo-italic.woff2') format('woff2');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Arvo';
  src: url('/assets/fonts/arvo-bolditalic.woff2') format('woff2');
  font-weight: 700; font-style: italic; font-display: swap;
}

/* ── Variables ─────────────────────────────────────────────── */
:root {
  --color-bg:       #F4F4F2;
  --color-title:    #1A1A1A;
  --color-body:     #4A4A4A;
  --color-meta:     #8A8A8A;
  --color-border:   #E0E0DC;

  --font:           'Arvo', serif;             /* Tout le site (texte courant) */
  --font-ui:        'Arvo', serif;             /* (ex-Jost) onglets, machine à écrire → Arvo */
  --font-title:     'Share Tech Mono', monospace; /* Titre « GERSENDE HURPY » uniquement */
  --fs-scale:       0.8;                  /* Échelle des polices Arvo de contenu (re-réglable d'un seul chiffre) */
  --fw-light:       300;
  --fw-regular:     400;
  --fw-bold:        700;

  --max-w:          1600px;
  --mg-desk:        32px;
  --mg-mob:         20px;
  --gutter:         24px;

  --header-h:       168px;   /* hauteur réelle du header avec le titre Share Tech Mono ~50px (la barre de filtres s'y cale) */
  --header-h-mob:   80px;
}

/* ── Reset ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Garantir que l'attribut hidden fonctionne même si le CSS définit display: block/flex */
[hidden] { display: none !important; }

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family:      var(--font);
  font-weight:      var(--fw-regular);
  background-color: var(--color-bg);
  color:            var(--color-body);
  line-height:      1.6;
  min-height:       100vh;
  display:          flex;
  flex-direction:   column;
}

main { flex: 1; }

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

a {
  color:           var(--color-title);
  text-decoration: underline;
  cursor:          pointer;
  transition:      opacity 200ms ease;
}
a:hover { opacity: 0.6; }

button {
  cursor:     pointer;
  background: none;
  border:     none;
  font:       inherit;
  color:      inherit;
}

/* Focus visible accessible */
:focus-visible {
  outline:        2px solid var(--color-title);
  outline-offset: 3px;
}

/* ══════════════════════════════════════════════════════════════
   HEADER
   ══════════════════════════════════════════════════════════════ */

.site-header {
  position:   sticky;
  top:        0;
  z-index:    100;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
}

.header-inner {
  max-width:      var(--max-w);
  margin:         0 auto;
  padding:        48px var(--mg-desk) 16px;
  min-height:     var(--header-h);
  display:        flex;
  align-items:    flex-start;
  justify-content: space-between;
  gap:            24px;
}

/* Brand */
.header-brand {
  display:        flex;
  flex-direction: column;
  justify-content: flex-start;
  flex-shrink:    0;
}

.header-name {
  font-family:     var(--font-title);
  font-size:       clamp(30px, 4.4vw, 50px);   /* 50px sur desktop, réduit si la fenêtre est étroite */
  font-weight:     var(--fw-regular);          /* Share Tech Mono n'existe qu'en Regular */
  color:           var(--color-title);
  text-decoration: none;
  line-height:     1.2;
  text-transform:  uppercase;
  letter-spacing:  -0.07em;   /* « HURPY » + espace inter-mots (« GERSENDE » resserré via .hn-1) */
}
.header-name:hover { opacity: 0.7; }
.header-name .hn-1 { letter-spacing: -0.10em; }   /* « GERSENDE » un peu plus serré que « HURPY » */
.header-name .hn-nd { letter-spacing: -0.04em; }  /* écarte un peu le N du D dans « GERSENDE » */

.header-tagline {
  font-family:  var(--font-ui);
  font-size:    clamp(14px, 1.7vw, 22px);
  font-weight:  var(--fw-regular);
  color:        var(--color-body);
  margin-top:   6px;
  min-height:   1.5em;
  line-height:  1;
}

.typewriter-cursor {
  display:   inline-block;
  animation: blink 1s step-end infinite;
  color:     var(--color-body);
  font-weight: var(--fw-light);
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* Desktop nav */
.header-nav {
  display:          flex;
  align-items:      flex-start;
  flex:             1;
  justify-content:  flex-end;
  padding-top:      6px;
}

.nav-main {
  list-style: none;
  display:    flex;
  align-items: center;
  flex-wrap:  wrap;
  row-gap:    4px;
}

.nav-main li + li::before {
  content:     ' | ';
  color:       var(--color-meta);
  padding:     0 12px;
  font-weight: var(--fw-light);
  font-size:   13px;
}

.nav-main a,
.nav-main button {
  font-family:     var(--font-ui);
  font-size:       clamp(16px, 1.5vw, 21px);
  font-weight:     var(--fw-regular);
  color:           var(--color-title);
  text-decoration: none;
  background:      none;
  border:          none;
  padding:         0;
  transition:      opacity 200ms ease;
  cursor:          pointer;
  text-transform:  uppercase;
  letter-spacing:  0.07em;
}
.nav-main a:hover,
.nav-main button:hover { opacity: 0.6; }

.nav-main a.is-active,
.nav-main button.is-active { font-weight: var(--fw-bold); }

/* Hamburger (hidden on desktop) */
.hamburger-btn {
  display:        none;
  flex-direction: column;
  justify-content: center;
  gap:            6px;
  padding:        8px;
  flex-shrink:    0;
}
.hamburger-btn span {
  display:    block;
  width:      22px;
  height:     1.5px;
  background: var(--color-title);
  transition: transform 250ms ease, opacity 200ms ease;
}
.hamburger-btn[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7.5px) rotate(45deg);
}
.hamburger-btn[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.hamburger-btn[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7.5px) rotate(-45deg);
}

/* ══════════════════════════════════════════════════════════════
   MOBILE MENU OVERLAY
   ══════════════════════════════════════════════════════════════ */

.mobile-menu {
  position:       fixed;
  inset:          0;
  background:     var(--color-bg);
  z-index:        200;
  display:        flex;
  flex-direction: column;
  transform:      translateX(100%);
  transition:     transform 300ms ease;
  overflow-y:     auto;
}

.mobile-menu.is-open { transform: translateX(0); }

.mobile-menu-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         0 var(--mg-mob);
  min-height:      var(--header-h-mob);
  border-bottom:   1px solid var(--color-border);
  flex-shrink:     0;
}

.mobile-menu-name {
  font-family:     var(--font-title);
  font-size:       20px;
  font-weight:     var(--fw-regular);
  color:           var(--color-title);
  text-decoration: none;
}

.mobile-close-btn {
  font-size:  24px;
  line-height: 1;
  padding:    8px;
  color:      var(--color-title);
}

.mobile-nav-list {
  list-style: none;
  padding:    0 var(--mg-mob);
  flex:       1;
}

.mobile-nav-item { border-bottom: 1px solid var(--color-border); }

.mobile-nav-link {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  width:           100%;
  padding:         16px 0;
  font-size:       18px;
  font-weight:     var(--fw-regular);
  color:           var(--color-title);
  text-decoration: none;
  text-align:      left;
  background:      none;
  border:          none;
  font-family:     var(--font-ui);
  cursor:          pointer;
}

.mobile-nav-link.is-active { font-weight: var(--fw-bold); }

/* ══════════════════════════════════════════════════════════════
   FILTRES INLINE — PAGE D'ACCUEIL (barres scrollables + sticky)
   ══════════════════════════════════════════════════════════════ */

.filter-index {
  max-width:   var(--max-w);
  margin:      0 auto;
  padding:     0 var(--mg-desk);
  position:    sticky;
  top:         var(--header-h);
  z-index:     90;
  background:  var(--color-bg);
  transition:  transform 260ms ease;
}

@media (max-width: 767px) {
  .filter-index { top: var(--header-h-mob); padding: 0 var(--mg-mob); }
}

.fi-row {
  display:     flex;
  align-items: stretch;
  border-top:  1px solid var(--color-border);
}

.fi-row:last-child {
  border-bottom: 1px solid var(--color-border);
}

/* Wrapper relatif pour la barre + flèche */
.fi-track {
  position:  relative;
  flex:      1;
  overflow:  hidden;
  display:   flex;
}

.fi-scroll {
  display:                  flex;
  align-items:              stretch;
  overflow-x:               auto;
  scroll-behavior:          smooth;
  cursor:                   grab;
  -webkit-overflow-scrolling: touch;
  scrollbar-width:          thin;
  scrollbar-color:          var(--color-border) transparent;
  flex:                     1;
  user-select:              none;
}
.fi-scroll:active  { cursor: grabbing; }
.fi-scroll.is-dragging { cursor: grabbing; scroll-behavior: auto; }

.fi-scroll::-webkit-scrollbar          { height: 3px; }
.fi-scroll::-webkit-scrollbar-track    { background: transparent; }
.fi-scroll::-webkit-scrollbar-thumb    { background: var(--color-border); }

/* Flèche "plus à droite" */
.fi-arrow-right {
  position:        absolute;
  right:           0;
  top:             0;
  bottom:          0;
  width:           56px;
  display:         flex;
  align-items:     center;
  justify-content: flex-end;
  padding-right:   10px;
  background:      linear-gradient(to right, transparent, var(--color-bg) 60%);
  font-size:       18px;
  color:           var(--color-title);
  cursor:          pointer;
  border:          none;
  font-family:     var(--font);
  transition:      opacity 200ms ease;
  pointer-events:  auto;
  z-index:         2;
}
.fi-arrow-right.is-end {
  opacity:        0;
  pointer-events: none;
}

/* Flèche "plus à gauche" (apparaît dès qu'on a défilé vers la droite) */
.fi-arrow-left {
  position:        absolute;
  left:            0;
  top:             0;
  bottom:          0;
  width:           56px;
  display:         flex;
  align-items:     center;
  justify-content: flex-start;
  padding-left:    10px;
  background:      linear-gradient(to left, transparent, var(--color-bg) 60%);
  font-size:       18px;
  color:           var(--color-title);
  cursor:          pointer;
  border:          none;
  font-family:     var(--font);
  transition:      opacity 200ms ease;
  pointer-events:  auto;
  z-index:         2;
}
.fi-arrow-left.is-start {
  opacity:        0;
  pointer-events: none;
}

.fi-item {
  font-size:      13px;
  font-weight:    var(--fw-regular);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color:          var(--color-body);
  background:     none;
  border:         none;
  border-right:   1px solid var(--color-border);
  padding:        14px 20px;
  flex-shrink:    0;
  white-space:    nowrap;
  cursor:         pointer;
  font-family:    var(--font);
  display:        flex;
  align-items:    center;
  transition:     background 150ms ease, color 150ms ease;
}

.fi-item:hover {
  background: rgba(0,0,0,0.04);
}

.fi-item.is-active {
  background:  var(--color-title);
  color:       var(--color-bg);
  font-weight: var(--fw-bold);
}

/* Bouton « tous les clients » / « tous les projets » : texte noir sur fond gris clair,
   gris plus foncé au survol (distinct des tags). Toujours dans cet état, même actif. */
.fi-item-all,
.fi-item-all.is-active {
  background:      rgba(0,0,0,0.05);
  color:           var(--color-title);
  font-weight:     var(--fw-regular);
  min-width:       220px;          /* largeur identique pour « tous les clients » et « tous les projets » */
  justify-content: center;         /* texte centré dans la box élargie */
}
.fi-item-all:hover { background: rgba(0,0,0,0.12); color: var(--color-title); }

/* ══════════════════════════════════════════════════════════════
   GRILLE PROJETS — PAGE D'ACCUEIL
   ══════════════════════════════════════════════════════════════ */

.projects-grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows:        4px;
  column-gap:            40px;
  row-gap:               0;
  max-width:             var(--max-w);
  margin:                0 auto;
  padding:               var(--gutter) var(--mg-desk);
}

/* Carte projet */
.project-card {
  display:         block;
  align-self:      start;
  text-decoration: none;
  color:           inherit;
  cursor:          pointer;
  /* Scroll reveal : état initial */
  opacity:         0;
  transform:       translateY(14px);
  transition:      opacity 350ms ease, transform 350ms ease;
}
.project-card.is-visible {
  opacity:   1;
  transform: translateY(0);
}

.project-card-media {
  position:   relative;
  overflow:   hidden;
  background: var(--color-border);
  min-height: 120px;
}

.project-card-media img {
  width:         100%;
  height:        auto;
  display:       block;
  border-radius: 0;
}

/* Placeholder image (quand aucune image disponible) */
.project-card-placeholder {
  width:            100%;
  padding-bottom:   70%;
  background:       var(--color-border);
  position:         relative;
}
.project-card-placeholder-label {
  position:    absolute;
  inset:       0;
  display:     flex;
  align-items: center;
  justify-content: center;
  font-size:   calc(var(--fs-scale) * 11px);
  font-weight: var(--fw-light);
  color:       var(--color-meta);
  letter-spacing: 0.05em;
}

/* Overlay rouge au hover (desktop uniquement) */
.project-card-overlay {
  position:        absolute;
  inset:           0;
  background:      #511843;
  display:         flex;
  flex-direction:  column;
  align-items:     flex-start;
  justify-content: flex-start;
  padding:         12%;            /* marge égale tout autour du cadre de présentation */
  text-align:      left;
  opacity:         0;
  transition:      opacity 260ms ease;
  pointer-events:  none;
  color:           #7ee5ff;
}

@media (hover: hover) and (pointer: fine) {
  .project-card:hover .project-card-overlay { opacity: 1; }
}

@media (hover: none), (pointer: coarse) {
  .project-card-overlay { display: none; }
}

.pco-title {
  font-size:     35px;          /* taille fixe demandée (titre au survol) */
  font-weight:   var(--fw-bold);
  color:         #7ee5ff;
  line-height:   1.15;
}

.pco-client {
  font-size:   calc(var(--fs-scale) * clamp(20px, 2.25vw, 36px));
  font-weight: var(--fw-regular);
  color:       #7ee5ff;
  margin-top:  10px;
}

.pco-date {
  font-size:   calc(var(--fs-scale) * clamp(18px, 2vw, 32px));
  font-weight: var(--fw-regular);
  color:       #7ee5ff;
  margin-top:  4px;
}

.pco-tags {
  font-size:   calc(var(--fs-scale) * clamp(13px, 1.3vw, 21px));
  font-weight: var(--fw-regular);
  color:       #7ee5ff;
  margin-top:  12px;
}

/* Info sous image (mobile / tactile) */
.project-card-info {
  padding-top: 8px;
  opacity:     1;
}

/* Desktop : info sous image masquée, remplacée par l'overlay */
@media (hover: hover) and (pointer: fine) {
  .project-card-info { display: none; }
}

.project-card-title {
  font-size:   calc(var(--fs-scale) * 12px);
  font-weight: var(--fw-bold);
  color:       var(--color-title);
  line-height: 1.35;
  margin:      0;
}

.project-card-client {
  font-size:   calc(var(--fs-scale) * 12px);
  font-weight: var(--fw-regular);
  color:       var(--color-body);
  margin-top:  2px;
}

/* ══════════════════════════════════════════════════════════════
   PAGE PROJET — Layout 80/20
   ══════════════════════════════════════════════════════════════ */

.projet-layout {
  display:    grid;
  grid-template-columns: 2fr 1fr;
  gap:        0;
  max-width:  var(--max-w);
  margin:     0 auto;
  min-height: calc(100vh - var(--header-h) - var(--filter-h, 0px));
}

/* Colonne images */
.projet-col-images {
  padding: var(--gutter) var(--gutter) var(--gutter) var(--mg-desk);
  border-right: 1px solid var(--color-border);
}

.projet-image-wrap {
  margin-bottom: var(--gutter);
}
.projet-image-wrap img {
  display:       block;
  width:         100%;
  height:        auto;
  border-radius: 0;
}

.projet-video-wrap {
  margin-bottom: var(--gutter);
}
.video-wrapper {
  position:     relative;
  aspect-ratio: 16 / 9;
  overflow:     hidden;
}
.video-wrapper iframe {
  position: absolute;
  inset:    0;
  width:    100%;
  height:   100%;
  border:   0;
}

.projet-local-video {
  width:        100%;
  display:      block;
  max-height:   80vh;
  background:   #000;
}

/* ── Groupes d'images (2 / 3 colonnes sur une rangée) ─────────── */
.projet-group {
  display:        grid;
  gap:            var(--gutter);
  margin-bottom:  var(--gutter);
}
.projet-group--2 { grid-template-columns: repeat(2, 1fr); }
.projet-group--3 { grid-template-columns: repeat(3, 1fr); }
.projet-group-item img { width: 100%; height: auto; display: block; }
@media (max-width: 767px) {
  .projet-group--3 { grid-template-columns: repeat(2, 1fr); }
}

/* ── Comparateur avant / après (poignée glissante) ───────────── */
.ba-slider {
  position:     relative;
  overflow:     hidden;
  width:        100%;
  user-select:  none;
  touch-action: pan-y;
  cursor:       ew-resize;
}
.ba-img-after { display: block; width: 100%; height: auto; }
.ba-before {
  position:   absolute;
  inset:      0;
  clip-path:  inset(0 50% 0 0);   /* révèle la moitié gauche par défaut (mis à jour en JS) */
}
.ba-before img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ba-handle {
  position:  absolute;
  top:       0;
  bottom:    0;
  left:      50%;
  width:     2px;
  background: #fff;
  transform: translateX(-1px);
  pointer-events: none;
}
.ba-handle span {
  position:   absolute;
  top:        50%;
  left:       50%;
  width:      72px;          /* ×2 (avant : 36px) */
  height:     72px;
  transform:  translate(-50%, -50%);
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.2);
}
/* Flèches gauche / droite dans la poignée (rappel du curseur ↔) */
.ba-handle span::before,
.ba-handle span::after {
  content:      "";
  position:     absolute;
  top:          50%;
  width:        11px;
  height:       11px;
  border-top:   3px solid var(--color-title);
  border-right: 3px solid var(--color-title);
}
.ba-handle span::before {                          /* chevron gauche ‹ */
  left:      17px;
  transform: translateY(-50%) rotate(-135deg);
}
.ba-handle span::after {                           /* chevron droit › */
  right:     17px;
  transform: translateY(-50%) rotate(45deg);
}

.projet-text-wrap {
  margin-bottom: var(--gutter);
  font-size:     calc(var(--fs-scale) * 14px);
  line-height:   1.65;
  color:         var(--color-body);
  max-width:     640px;
}
.projet-text-wrap h2 { font-size: calc(var(--fs-scale) * 15px); font-weight: var(--fw-bold); margin-bottom: 8px; }
.projet-text-wrap h3 { font-size: calc(var(--fs-scale) * 14px); font-weight: var(--fw-bold); margin-bottom: 6px; }
.projet-text-wrap p  { margin-bottom: 12px; }
.projet-text-wrap p:last-child { margin-bottom: 0; }

.projet-placeholder-images {
  padding: 60px 0;
  text-align: center;
  color: var(--color-meta);
  font-size: calc(var(--fs-scale) * 13px);
  font-weight: var(--fw-light);
}

/* Colonne légende — sticky, flex-column : scrollable + nav épinglée en bas */
.projet-col-legende {
  position:        sticky;
  top:             calc(var(--header-h) + var(--filter-h, 0px));
  height:          calc(100vh - var(--header-h) - var(--filter-h, 0px));
  display:         flex;
  flex-direction:  column;
  overflow:        hidden;
}

/* Zone scrollable (contenu) — contrôlée par JS, pas de scrollbar visible */
.pl-scrollable {
  flex:               1;
  overflow-y:         auto;
  scrollbar-width:    none;
  overscroll-behavior: contain;
}
.pl-scrollable::-webkit-scrollbar { display: none; }

/* Sections et séparateurs — style cartel de musée */
.pl-section {
  padding: 42px 40px 42px 32px;
}

/* Premier bloc : haut du titre aligné avec le haut de la 1ʳᵉ image (même marge) */
.pl-scrollable > .pl-section:first-child {
  padding-top: var(--gutter);
}

.pl-separator {
  height: 0;
  margin: 0 40px 0 32px;
}
.pl-separator--solid {
  border-top: 1.5px solid var(--color-title);
}
.pl-separator--dashed {
  border-top: 1px solid var(--color-border);
  margin-top:    27px;   /* espace AVANT le filet (sous le texte précédent) — conservé */
  margin-bottom: 8px;    /* espace APRÈS le filet (texte collé au filet du dessus) */
}

/* Légendes par visuel */
.pl-caption-num {
  font-size:      calc(var(--fs-scale) * 12px);
  font-weight:    var(--fw-light);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color:          var(--color-meta);
  margin-bottom:  0;
}
.pl-caption-titre {
  font-size:   calc(var(--fs-scale) * 15px);
  font-weight: var(--fw-bold);
  color:       var(--color-title);
  line-height: 1.4;
  margin-top:  10px;
  white-space: pre-line;
}
.pl-caption-desc {
  font-size:   calc(var(--fs-scale) * 15px);
  font-weight: var(--fw-regular);
  color:       var(--color-body);
  line-height: 1.7;
  margin-top:  8px;
  white-space: pre-line;
}

.projet-titre {
  font-size:   30px;            /* taille fixe demandée (non soumise à --fs-scale) */
  font-weight: var(--fw-regular);
  color:       var(--color-title);
  line-height: 1.2;
}

.projet-client {
  font-size:    20px;
  font-weight:  var(--fw-regular);
  color:        var(--color-body);
}

.projet-type {
  font-size:    15px;
  font-weight:  var(--fw-regular);
  color:        var(--color-body);
}

.projet-date {
  font-size:    20px;
  font-weight:  var(--fw-regular);
  color:        var(--color-body);
}

.projet-separator {
  height:        1px;
  background:    var(--color-border);
  margin-bottom: 16px;
}

.projet-description {
  font-size:     12px;
  font-weight:   var(--fw-regular);
  color:         var(--color-body);
  line-height:   1.7;
  white-space:   pre-line;   /* respecte les retours à la ligne saisis dans l'app */
}

.projet-infos {
  font-size:    10px;
  font-weight:  var(--fw-light);
  color:        var(--color-meta);
  line-height:  1.65;
  white-space:  pre-line;
}

.projet-connexes-label {
  font-size:    calc(var(--fs-scale) * 13px);
  font-weight:  var(--fw-light);
  color:        var(--color-meta);
  margin-bottom: 10px;
}

.projet-connexes-links a {
  display:         block;
  font-size:       calc(var(--fs-scale) * 14px);
  font-weight:     var(--fw-regular);
  color:           var(--color-title);
  text-decoration: underline;
  margin-bottom:   6px;
}

/* Retour — épinglé en bas de la colonne (remplace l'ancienne nav précédent/suivant) */
.projet-back {
  flex-shrink:     0;
  display:         inline-flex;
  align-items:     center;
  gap:             6px;
  padding:         24px 40px 28px 32px;
  font-size:       calc(var(--fs-scale) * 20px);   /* +4pt rendu (test) */
  font-weight:     var(--fw-regular);
  color:           var(--color-title);
  text-decoration: none;
  border-top:      1.5px solid var(--color-title);
}
.projet-back:hover { opacity: 0.6; }

/* Séparateurs DANS une pl-section : pas de marge gauche/droite supplémentaire
   (la section fournit déjà le bon alignement via son padding) */
.pl-section .pl-separator {
  margin-left:  0;
  margin-right: 0;
}

/* ══════════════════════════════════════════════════════════════
   PAGE À PROPOS
   ══════════════════════════════════════════════════════════════ */

.apropos-layout {
  max-width: 720px;
  margin:    0 auto;
  padding:   40px var(--mg-desk);
}

.apropos-photo {
  width:         240px;
  max-width:     100%;
  border-radius: 0;
  margin-bottom: 32px;
}

.apropos-bio {
  font-size:     14px;
  line-height:   1.7;
  color:         var(--color-body);
  margin-bottom: 32px;
}
.apropos-bio p { margin-bottom: 12px; }
.apropos-bio p:last-child { margin-bottom: 0; }

.apropos-section-title {
  font-size:     12px;
  font-weight:   var(--fw-bold);
  color:         var(--color-title);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 12px;
  padding-top:   24px;
  border-top:    1px solid var(--color-border);
}

.apropos-competences {
  font-size:    13px;
  font-weight:  var(--fw-regular);
  color:        var(--color-body);
  margin-bottom: 32px;
  line-height:  1.6;
}

/* Timeline CV */
.timeline {
  position:      relative;
  padding-left:  24px;
  margin-bottom: 32px;
}

.timeline::before {
  content:    '';
  position:   absolute;
  left:       0;
  top:        6px;
  bottom:     6px;
  width:      1px;
  background: var(--color-border);
}

.timeline-item {
  position:      relative;
  padding-left:  16px;
  margin-bottom: 20px;
}

.timeline-item::before {
  content:      '';
  position:     absolute;
  left:         -24px;
  top:          6px;
  width:        7px;
  height:       7px;
  border-radius: 50%;
  background:   var(--color-title);
  border:       2px solid var(--color-bg);
  box-shadow:   0 0 0 1px var(--color-border);
}

.timeline-date {
  font-size:   12px;
  font-weight: var(--fw-light);
  color:       var(--color-meta);
  margin-bottom: 2px;
}

.timeline-lieu {
  font-size:   12px;
  font-weight: var(--fw-bold);
  color:       var(--color-title);
  margin-bottom: 2px;
}

.timeline-desc {
  font-size:  12px;
  font-weight: var(--fw-regular);
  color:      var(--color-body);
  line-height: 1.5;
}

.apropos-links {
  display:        flex;
  flex-direction: column;
  gap:            12px;
  margin-top:     32px;
  padding-top:    24px;
  border-top:     1px solid var(--color-border);
}

.apropos-linkedin {
  display:         flex;
  align-items:     center;
  gap:             8px;
  font-size:       13px;
  font-weight:     var(--fw-regular);
  color:           var(--color-title);
  text-decoration: underline;
}

.apropos-linkedin svg {
  flex-shrink: 0;
  width:       18px;
  height:      18px;
}

.apropos-perso-link {
  font-size:       calc(var(--fs-scale) * 14px);
  font-weight:     var(--fw-regular);
  color:           var(--color-meta);
  text-decoration: underline;
}

/* ══════════════════════════════════════════════════════════════
   PAGE AVIS (carrousel — un avis à la fois)
   ══════════════════════════════════════════════════════════════ */

.avis-layout {
  max-width: 760px;
  margin:    0 auto;
  padding:   40px var(--mg-desk);
}

.avis-title {
  font-size:     calc(var(--fs-scale) * clamp(20px, 2vw, 28px));
  font-weight:   var(--fw-bold);
  color:         var(--color-title);
  margin-bottom: 32px;
}

.avis-viewport { overflow: hidden; }

.avis-track {
  display:    flex;
  transition: transform 500ms ease;
}

.avis-slide {
  flex:       0 0 100%;
  min-width:  100%;
  background: #fff;
  padding:    36px 40px;
}

.avis-stars {
  font-size:      calc(var(--fs-scale) * 18px);
  letter-spacing: 3px;
  color:          var(--color-border);
  margin-bottom:  16px;
}
.avis-star.is-on { color: var(--color-title); }

.avis-texte {
  font-size:    20px;
  line-height:  1.65;
  color:        var(--color-body);
  font-style:   italic;
  white-space:  pre-line;
}

.avis-auteur {
  margin-top:  20px;
  font-size:   18px;
  font-weight: var(--fw-bold);
  color:       var(--color-title);
}
.avis-fonction { font-size: 16px; font-weight: var(--fw-regular); color: var(--color-meta); }

.avis-nav {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             16px;
  margin-top:      28px;
}
.avis-arrow {
  font-size:       30px;
  color:           var(--color-title);
  width:           48px;
  height:          48px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  border:          1.5px solid var(--color-title);
  border-radius:   50%;
  line-height:     1;
  transition:      background 200ms ease, color 200ms ease;
}
.avis-arrow:hover { background: var(--color-title); color: #fff; opacity: 1; }
.avis-dots { display: flex; gap: 8px; }
.avis-dots button {
  width:  8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-border);
  padding: 0;
  transition: background 200ms ease;
}
.avis-dots button.is-on { background: var(--color-title); }

.avis-empty {
  color:     var(--color-meta);
  font-size: calc(var(--fs-scale) * 15px);
}

/* ══════════════════════════════════════════════════════════════
   PAGE CONTACT
   ══════════════════════════════════════════════════════════════ */

.contact-layout {
  max-width: 560px;
  margin:    0 auto;
  padding:   40px var(--mg-desk);
}

.contact-title {
  font-size:     calc(var(--fs-scale) * clamp(20px, 2vw, 28px));
  font-weight:   var(--fw-bold);
  color:         var(--color-title);
  margin-bottom: 32px;
}

.contact-form {
  display:        flex;
  flex-direction: column;
  gap:            20px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap:     16px;
}

.form-field {
  display:        flex;
  flex-direction: column;
  gap:            6px;
}

.form-label {
  font-size:   calc(var(--fs-scale) * 13px);
  font-weight: var(--fw-regular);
  color:       var(--color-body);
}

.form-required {
  color:       var(--color-meta);
  font-weight: var(--fw-light);
  margin-left: 2px;
}

.form-input,
.form-textarea {
  font-family:  var(--font);
  font-size:    calc(var(--fs-scale) * 14px);
  font-weight:  var(--fw-regular);
  color:        var(--color-title);
  background:   var(--color-bg);
  border:       1px solid var(--color-border);
  padding:      10px 12px;
  border-radius: 0;
  outline:      none;
  transition:   border-color 200ms ease;
  width:        100%;
}

.form-input:focus,
.form-textarea:focus { border-color: var(--color-body); }

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

.form-honeypot { display: none; }

.form-error {
  font-size:  calc(var(--fs-scale) * 12px);
  color:      #C0392B;
  font-weight: var(--fw-light);
}

.form-submit {
  font-family:     var(--font);
  font-size:       calc(var(--fs-scale) * 14px);
  font-weight:     var(--fw-regular);
  color:           var(--color-bg);
  background:      var(--color-title);
  border:          none;
  padding:         12px 28px;
  cursor:          pointer;
  align-self:      flex-start;
  text-decoration: none;
  transition:      opacity 200ms ease;
}
.form-submit:hover { opacity: 0.75; }

.contact-success {
  font-size:   calc(var(--fs-scale) * 15px);
  color:       var(--color-body);
  line-height: 1.65;
  padding:     40px 0;
}

/* ══════════════════════════════════════════════════════════════
   PAGE MENTIONS LÉGALES
   ══════════════════════════════════════════════════════════════ */

.legal-layout {
  max-width: 640px;
  margin:    0 auto;
  padding:   40px var(--mg-desk);
}

.legal-title {
  font-size:     calc(var(--fs-scale) * clamp(18px, 2vw, 24px));
  font-weight:   var(--fw-bold);
  color:         var(--color-title);
  margin-bottom: 32px;
}

.legal-section {
  margin-bottom: 32px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--color-border);
}

.legal-section:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

.legal-section-title {
  font-size:     calc(var(--fs-scale) * 13px);
  font-weight:   var(--fw-bold);
  color:         var(--color-title);
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.legal-section p {
  font-size:    calc(var(--fs-scale) * 14px);
  font-weight:  var(--fw-regular);
  color:        var(--color-body);
  line-height:  1.65;
  margin-bottom: 6px;
}
.legal-section p:last-child { margin-bottom: 0; }

/* ══════════════════════════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════════════════════════ */

.site-footer {
  border-top:  1px solid var(--color-border);
  flex-shrink: 0;
}

.footer-inner {
  max-width:       var(--max-w);
  margin:          0 auto;
  padding:         16px var(--mg-desk);
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  flex-wrap:       wrap;
  gap:             8px;
  font-size:       calc(var(--fs-scale) * 12px);
  font-weight:     var(--fw-light);
  color:           var(--color-meta);
}

.footer-inner a {
  color:           var(--color-meta);
  text-decoration: underline;
}
.footer-inner a:hover { opacity: 0.6; }

.footer-center { display: flex; gap: 16px; }

/* ══════════════════════════════════════════════════════════════
   PAGE 404
   ══════════════════════════════════════════════════════════════ */

.page-404 {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  min-height:      calc(100vh - var(--header-h) - 60px);
  text-align:      center;
  padding:         40px var(--mg-desk);
}

.page-404-code {
  font-size:    calc(var(--fs-scale) * 80px);
  font-weight:  var(--fw-bold);
  color:        var(--color-border);
  line-height:  1;
  margin-bottom: 16px;
}

.page-404-msg {
  font-size:     calc(var(--fs-scale) * 16px);
  font-weight:   var(--fw-regular);
  color:         var(--color-body);
  margin-bottom: 24px;
}

.page-404-link {
  font-size:       calc(var(--fs-scale) * 14px);
  font-weight:     var(--fw-regular);
  color:           var(--color-title);
  text-decoration: underline;
}

/* ══════════════════════════════════════════════════════════════
   BREAKPOINTS
   ══════════════════════════════════════════════════════════════ */

/* Tablette */
@media (max-width: 1279px) {
  .projects-grid {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 32px;
  }

  .projet-layout {
    grid-template-columns: 65fr 35fr;
  }

  /* Sidebar projet tablette */
  .pl-section {
    padding: 32px 28px 32px 24px;
  }
  .pl-scrollable > .pl-section:first-child {
    padding-top: var(--gutter);
  }
  .projet-back {
    padding: 20px 28px 20px 24px;
  }
  .pl-separator {
    margin: 0 28px 0 24px;
  }
  .pl-section .pl-separator {
    margin-left: 0;
    margin-right: 0;
  }
  .pl-separator--dashed {
    margin-top: 20px;
    margin-bottom: 6px;
  }
}

/* Mobile */
@media (max-width: 767px) {

  /* Header */
  .header-inner {
    padding:     24px var(--mg-mob) 12px;
    min-height:  var(--header-h-mob);
    flex-wrap:   nowrap;
    align-items: flex-start;
  }
  /* Le clamp() gère les tailles jusqu'au mobile, on surcharge ici pour les cas extrêmes */
  .header-name    { font-size: 22px; letter-spacing: 0; }
  .header-name .hn-1 { letter-spacing: 0; }
  .header-name .hn-nd { letter-spacing: 0; }
  .header-tagline { font-size: 14px; margin-top: 4px; }
  .header-nav   { display: none; }
  .hamburger-btn { display: flex; }

  /* Grille */
  .projects-grid {
    grid-template-columns: 1fr;
    padding: var(--gutter) var(--mg-mob);
  }
  .project-card-info { opacity: 1; }

  /* Projet */
  .projet-layout {
    display:        block;
  }
  .projet-col-images {
    padding:      var(--gutter) var(--mg-mob);
    border-right: none;
    border-bottom: 1px solid var(--color-border);
  }
  .projet-col-legende {
    position:   static;
    height:     auto;
    display:    block;
    overflow:   visible;
  }
  .pl-scrollable {
    overflow-y: visible;
  }
  /* Retour : bouton flottant fixe en bas à gauche, toujours visible */
  .projet-back {
    position:   fixed;
    bottom:     16px;
    left:       16px;
    z-index:    60;
    padding:    10px 16px;
    background: var(--color-bg);
    border:     1px solid var(--color-title);
    box-shadow: 0 2px 10px rgba(0,0,0,0.12);
  }

  /* Pages internes */
  .apropos-layout,
  .contact-layout,
  .legal-layout {
    padding: 24px var(--mg-mob);
  }

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

  /* Timeline */
  .timeline { padding-left: 16px; }
  .timeline-item::before { left: -16px; }

  /* Footer */
  .footer-inner {
    padding:        12px var(--mg-mob);
    flex-direction: column;
    align-items:    flex-start;
    gap:            6px;
  }
  .footer-center { flex-direction: column; gap: 4px; }
}