/* ---- variables.css ---- */
/* =========================================================
   VPS Production — Variables globales
   Sources : _source/specs/specs-globales.txt + relevés maquettes
   ========================================================= */

@font-face {
  font-family: "Montserrat";
  src: url("../assets/fonts/montserrat-var-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
/* Italique (descriptions de projet) : téléchargée seulement si du texte en italique est affiché */
@font-face {
  font-family: "Montserrat";
  src: url("../assets/fonts/montserrat-var-latin-italic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ---------- Couleurs ---------- */
  --c-black: #000000;
  --c-white: #ffffff;
  --c-orange: #f6a12d;              /* relevé maquettes (SVG logo : #f5a12e) */
  --c-text: #333333;                /* rgb(51,51,51) — accroche, titres */
  --c-menu: #cacaca;                /* rgb(202,202,202) — texte menu */
  --c-grey-border: #a8a8a8;         /* rgb(168,168,168) — filtre inactif */
  --c-filter-on: #111111;           /* rgb(17,17,17) — filtre actif */
  --c-form-label: #858788;          /* rgb(133,135,136) */
  --c-form-text: #eaeaea;           /* rgb(234,234,234) */
  --c-footer: #323537;              /* fond footer */
  --c-footer-band: #282a2c;         /* bande sombre bas de footer */
  --c-copyright: rgba(255, 255, 255, 0.149);
  --c-header-line: rgba(202, 202, 202, 0.2);   /* filet 1px sous le header : #cacaca 20 % */
  --c-header-scrolled: rgba(0, 0, 0, 0.95);
  --c-overlay-menu: rgba(0, 0, 0, 0.95);

  /* ---------- Typo ---------- */
  --font: "Montserrat", Arial, Helvetica, sans-serif;
  --fs-menu: 17px;                  /* .texte_menu (20px sur la maquette, réduit à la demande) */
  --fs-menu-burger: 28px;           /* 18.667px × 1.51 */
  --fs-lang: 15px;                  /* 12.5px × 1.2 */
  --fs-copyright: 20px;

  /* ---------- Header ---------- */
  --header-h: 120px;
  --header-pad-l: 91px;             /* bord gauche du logo (desktop) */
  --header-pad-r: 71px;             /* bord droit de l'icône LinkedIn (desktop) */
  --logo-w: 188px;                  /* H ≈ 76px */
  --logo-top: 21px;
  --menu-gap: 57px;                 /* écart moyen entre items */
  --menu-underline-h: 4px;
  --menu-underline-overflow: 4px;   /* débord du soulignement de chaque côté du texte */
  --lang-w: 68px;
  --lang-h: 33px;
  --linkedin-size: 55px;
  --burger-w: 30px;
  --burger-line: 3px;
  --burger-gap: 8px;                /* espace entre 2 traits (pas de 11px) */
  --burger-safe: 100px;             /* marge de protection menu (chaque côté) */

  /* ---------- Hero ---------- */
  --fs-hero: max(40px, calc(17.14px + 2.976vw));   /* 60px à L 1440, 40px à L 768 */
  --hero-title-y: 41.9%;            /* centre du bloc titre / hauteur du hero */
  --hero-cta-y: 69.4%;              /* centre du bouton */
  --hero-cta-w: 330px;
  --hero-cta-h: 70px;
  --hero-cta-border: 3px;
  --fs-hero-cta: 24px;
  --ls-hero-cta: 0.12em;
  --c-hero-veil: rgba(0, 0, 0, 0.4);      /* voile noir sur la vidéo */
  --c-cta-bg-hover: rgba(255, 255, 255, 0.5);
  --hero-mouse-w: 26px;             /* H ≈ 48px */
  --hero-mouse-bottom: 35px;

  /* ---------- Accroche ---------- */
  --fs-intro: max(24px, calc(17.14px + 0.893vw));  /* 30px à L 1440 (17.28 × 1.748), 24px à L 768 */
  --lh-intro: 1.333;
  --intro-pad-top: 8.82vw;          /* 127px à L 1440 */
  --intro-pad-bottom: 7.85vw;       /* 113px à L 1440 */
  --intro-text-w: 64.5%;            /* ≈ L 930 à L 1440 */
  --intro-pad-x: 0px;

  /* ---------- Projets ---------- */
  --c-section-grey: #f4f4f4;        /* fond d'en-tête de section */
  --c-grid-filler: var(--c-section-grey);   /* case grise de fin de grille (accueil) : même gris que l'en-tête de section (#e8e8e8 et #eeeeee essayés, retenu : #f4f4f4) */
  --fs-section-title: 35px;         /* .texte_titre_section */
  --projects-title-mb: 45px;
  --projects-head-pb: 18px;
  --projects-head-px: 20px;
  --fs-filter: 13.2px;              /* 12px × 1.1 */
  --filter-pad-x: 22px;
  --t-filter: 0.45s;
  --fs-card: 25px;                  /* texte de survol */
  --c-card-overlay: rgba(0, 0, 0, 0.95);
  --card-zoom: 1.04;
  --t-card-zoom: 1s;
  --t-card-overlay: 0.6s;
  --t-card-text: 0.6s;
  --t-flip: 0.8s;                   /* recomposition de la grille */
  --t-flip-fade: 0.5s;
  --t-rise: 1.1s;                   /* apparition des vignettes */
  --reveal-rise: 50px;
  --reveal-stagger: 0.15s;

  /* ---------- Clients ---------- */
  --clients-pad-top: 67px;
  --clients-pad-bottom: 78px;
  --clients-pad-x: 23px;
  --title-underline-gap: 22px;
  --clients-grid-mt: 35px;
  --clients-row-h: 160px;
  --clients-logo-scale: 0.5;        /* logos fournis en 2x */

  /* ---------- Fiche projet ---------- */
  --c-player-stage: #141414;       /* fond de la zone 16:9 du lecteur (visible autour d'une vidéo 9:16, d'une image…) */
  --player-max-w: 1280px;           /* au-delà : player centré, bandes noires (HD 1280×720) */
  --t-media-fade: 0.6s;
  --back-size: 50px;               /* zone cliquable (invisible) du bouton retour */
  --back-arrow: 30px;              /* flèche seule, sans fond (01/10) */
  --back-left: 30px;
  --back-bottom: 30px;
  --thumbs-pad-top: 40px;
  --thumbs-pad-bottom: 50px;        /* 60px sous la vignette, dont 10px de barre */
  --thumb-size: 200px;
  --thumb-gap: 20px;
  --thumb-row-gap: 30px;
  --thumb-bar-h: 10px;
  --thumb-zoom: 1.08;
  --player-min-h-portrait: 200px;   /* fenêtre en portrait : hauteur mini du lecteur aux proportions du média */
  --t-player-resize: 0.45s;         /* changement de proportions du lecteur d'un média à l'autre (portrait) */
  --player-min-h: 320px;            /* hauteur mini du lecteur quand il s'adapte à la fenêtre */
  --desc-pad-top: 80px;
  --desc-pad-bottom: 200px;
  --desc-pad-x: 40px;               /* marge mini du texte ; sinon aligné sur les bords du lecteur (project.css) */
  --fs-desc-title: 42px;            /* proposition : titre plus gros que la description */
  --desc-title-mb: 36px;
  --fs-desc: 24px;
  --lh-desc: 1.25;

  /* ---------- Formulaire de contact ---------- */
  --t-contact: 0.8s;
  --c-contact-backdrop: rgba(0, 0, 0, 0.5);
  --c-contact-panel: rgba(49, 52, 54, 0.97);   /* #313436 */
  --c-form-border: #6d6f70;
  --c-form-focus: #a8aaab;
  --c-form-success: #1fb892;        /* message d'envoi réussi */
  --fs-form: 20px;
  --contact-top: min(200px, 22.3vh);   /* 200px sur un écran de H 900 ; réduit sur les écrans bas */
  --contact-pad-top: min(90px, 10vh);
  --contact-pad-x: 30px;
  --contact-form-w: 775px;
  --contact-field-h: 56px;
  --contact-field-gap: 24px;
  --contact-message-h: 200px;
  --contact-close-top: 40px;
  --contact-close-right: 40px;

  /* ---------- Apparitions ---------- */
  --t-reveal: 1.2s;

  /* ---------- Bandes d'habillage ---------- */
  --band-h: 20px;
  --band-offset: 3.472%;            /* 50px / 1440 */
  --band-w: 50%;                    /* 720px / 1440 */

  /* ---------- Footer ---------- */
  --footer-h: 150px;

  /* ---------- Animations ---------- */
  --t-fast: 0.25s;
  --t-med: 0.3s;
  --t-slow: 0.5s;
  --ease: ease-in-out;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);   /* départ immédiat, arrivée amortie (survols) */
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);  /* déplacements (recomposition, menus) */
  --t-hover: 0.45s;                 /* survols courts (menu, langue, boutons) */

  /* ---------- Couches ---------- */
  --z-header: 100;
  --z-overlay-menu: 110;
  --z-burger: 120;
  --z-modal: 200;
}

/* ---------- Points de rupture (référence, non utilisables en var CSS) ----------
   Smartphone : max-width 767px   (maquettes mobiles L 390)
   Tablette   : 768px → 1023px
   Desktop    : ≥ 1024px          (maquettes desktop L 1440)
   Menu burger : calculé en JS (header.js) — le menu horizontal + 100px de
   chaque côté doit tenir entre le logo et le bloc langue/LinkedIn.
-------------------------------------------------------------------------------- */

@media (max-width: 767px) {
  :root {
    --header-pad-l: 31px;
    --header-pad-r: 30px;
    --logo-w: 123px;                /* H ≈ 50px */
    --logo-top: 36px;
    --fs-hero: clamp(28px, 8.97vw, 44px);   /* 35px à L 390 */
    --hero-title-y: 41.1%;
    --hero-cta-y: 72.3%;
    --hero-cta-w: 264px;
    --hero-cta-h: 56px;
    --hero-cta-border: 2px;
    --fs-hero-cta: 18.5px;
    --hero-mouse-w: 22px;           /* H ≈ 41px */
    --hero-mouse-bottom: 38px;
    --fs-intro: clamp(20px, 6.41vw, 26px);  /* 25px à L 390 (14.4 × 1.748) */
    --lh-intro: 1.4;
    --intro-pad-top: 18.7vw;        /* 73px à L 390 */
    --intro-pad-bottom: 23.6vw;     /* 92px à L 390 */
    --intro-text-w: 100%;
    --intro-pad-x: 20px;
    --projects-title-mb: 37px;
    --projects-head-pb: 43px;
    --projects-head-px: 10px;
    --fs-card: 18px;
    --clients-pad-top: 55px;
    --clients-pad-bottom: 44px;
    --clients-pad-x: 21px;
    --title-underline-gap: 20px;
    --clients-grid-mt: 34px;
    --clients-row-h: 82px;
    --clients-logo-scale: 0.33;
    --back-size: 44px;
    --back-left: 20px;
    --back-bottom: 20px;
    --thumbs-pad-top: 20px;
    --thumbs-pad-bottom: 30px;
    --thumb-size: 100px;
    --thumb-gap: 10px;
    --thumb-row-gap: 30px;
    --desc-pad-top: 40px;
    --desc-pad-bottom: 100px;
    --desc-pad-x: 35px;
    --fs-desc-title: 28px;
    --desc-title-mb: 24px;
    --fs-desc: 18px;
    --lh-desc: 1.2;
    --contact-top: min(150px, 19vh);
    --contact-pad-x: 35px;
    --contact-pad-top: min(55px, 7vh);
    --contact-close-top: 16px;
    --contact-close-right: 20px;
    --band-offset: 7.692%;          /* 30px / 390 */
    --band-w: 51.282%;              /* 200px / 390 */
  }
}

/* Fiche projet, écrans peu hauts (≥ 768 de large) : vignettes plus petites pour que la
   1re rangée tienne sous le lecteur sans scroller (voir project.css) */
@media (min-width: 768px) and (max-height: 1000px) {
  :root {
    --thumbs-pad-top: 25px;
    --thumb-size: 150px;
  }
}
@media (min-width: 768px) and (max-height: 760px) {
  :root {
    --thumbs-pad-top: 20px;
    --thumb-size: 120px;
    --thumb-gap: 15px;
  }
}

/* ---- base.css ---- */
/* =========================================================
   Base : reset léger + typo + utilitaires
   ========================================================= */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font);
  font-weight: 400;
  color: var(--c-text);
  background: var(--c-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

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

a { color: inherit; text-decoration: none; }

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

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

/* Les ancres ne passent pas sous le header sticky */
[id] { scroll-margin-top: var(--header-h); }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Bandes d'habillage (réutilisables) ---------- */
.band {
  position: absolute;
  height: var(--band-h);
  width: var(--band-w);
  pointer-events: none;
}
.band--left  { left: var(--band-offset); }
.band--right { right: var(--band-offset); }
.band--orange { background: var(--c-orange); }
.band--dark   { background: var(--c-footer-band); }

/* ---------- Pages ---------- */
.page-project main { padding-top: var(--header-h); }

/* ---------- Images WebP : <picture> sans effet sur la mise en page ---------- */
picture { display: contents; }

/* ---------- Page introuvable (404) ---------- */
/* Page 404 : le pied de page reste en bas de l'écran même si le contenu est court */
.page-error { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; }
.page-error main { flex: 1 0 auto; }
.error-page__link { text-decoration: underline; }
.error-page__link:hover { color: var(--c-orange); }

/* ---- header.css ---- */
/* =========================================================
   Header — DesktopMenu / MobileMenu (burger) / sélecteur de langue
   ========================================================= */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--header-h);
  z-index: var(--z-header);
  transition: background-color 0.6s var(--ease-out);
}

/* Accueil : transparent en haut de page, noir 95 % dès le scroll */
.site-header--transparent { background-color: transparent; }
.site-header--transparent.is-scrolled { background-color: var(--c-header-scrolled); }

/* Filet 1px sous le header (maquettes accueil) */
.site-header--transparent::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: var(--header-h);
  height: 1px;
  background: var(--c-header-line);
  pointer-events: none;
}

/* Fiche projet : noir opaque dès le départ */
.site-header--solid { background-color: var(--c-black); }

.header__inner {
  position: relative;
  height: 100%;
  display: flex;
  align-items: flex-start;
  padding: 0 var(--header-pad-r) 0 var(--header-pad-l);
}

/* ---------- Logo ---------- */
.header__logo {
  flex: none;
  display: block;
  width: var(--logo-w);
  margin-top: var(--logo-top);
}
.header__logo img { width: 100%; height: auto; }

/* Espaceurs : reproduisent la position du menu de la maquette (231 / 157) */
.header__spacer { flex: 1 1 0; min-width: 0; }
.header__spacer--left  { flex-grow: 231; }
.header__spacer--right { flex-grow: 157; }

/* ---------- Menu desktop ---------- */
.nav-desktop {
  flex: none;
  display: flex;
  gap: calc(var(--menu-gap) - 2 * var(--menu-underline-overflow));
  white-space: nowrap;
}
.nav-desktop__link {
  position: relative;
  display: block;
  height: var(--header-h);
  padding: 56px var(--menu-underline-overflow) 0;
  font-size: var(--fs-menu);
  line-height: 1.2;
  color: var(--c-menu);
  text-transform: uppercase;
}
.nav-desktop__link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: var(--menu-underline-h);
  background: var(--c-orange);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--t-hover) var(--ease-out);
}
/* Survol : apparition du centre vers les côtés ; actif : reste affiché */
.nav-desktop__link:hover::after,
.nav-desktop__link:focus-visible::after,
.nav-desktop__link.is-active::after { transform: scaleX(1); }

/* ---------- Bloc droit : langue + LinkedIn ---------- */
.header__right {
  flex: none;
  display: flex;
  align-items: flex-start;
  gap: 33px;
}
.header__right .lang { margin-top: 50px; }
.header__right .linkedin { margin-top: 38px; }

.linkedin { display: block; width: var(--linkedin-size); height: var(--linkedin-size); }
.linkedin img { width: 100%; height: 100%; }

/* ---------- Sélecteur de langue (comportement repris de movida-prod.com) ---------- */
.lang { position: relative; }
.lang__btn {
  display: flex;
  align-items: center;
  gap: 6px;
  width: var(--lang-w);
  height: var(--lang-h);
  padding-left: 17.5px;
  border: 1.5px solid var(--c-white);
  border-radius: calc(var(--lang-h) / 2);
  font-size: var(--fs-lang);
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--c-white);
  transition: background-color var(--t-hover) var(--ease-out), color var(--t-hover) var(--ease-out), border-color var(--t-hover) var(--ease-out);
}
.lang__btn:hover,
.lang.is-open .lang__btn { background-color: #666666; }
.lang__arrow {
  width: 0; height: 0;
  border-left: 5.5px solid transparent;
  border-right: 5.5px solid transparent;
  border-top: 7px solid currentColor;
  margin-top: 1px;
}
.lang__menu {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  opacity: 0;
  pointer-events: none;
  transform: translateY(0);
  transition: opacity var(--t-hover) var(--ease-out), transform var(--t-hover) var(--ease-out);
}
.lang.is-open .lang__menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(10px);
}
.lang__option {
  display: block;
  width: 100%;
  font-size: var(--fs-lang);
  line-height: 1.6;
  text-align: center;
  text-transform: uppercase;
  color: #999999;
  transition: color var(--t-hover) var(--ease-out);
}
.lang__option:hover { color: var(--c-white); }

/* ---------- Bouton burger (animation reprise de movida-prod.com) ---------- */
.burger {
  display: none;
  position: absolute;
  top: 47px;
  right: var(--header-pad-r);
  width: var(--burger-w);
  height: calc(var(--burger-line) * 3 + var(--burger-gap) * 2);
  z-index: 2;
}
.burger::before { /* zone de clic élargie */
  content: "";
  position: absolute;
  inset: -15px;
}
.burger span {
  position: absolute;
  left: 0;
  display: block;
  width: 100%;
  height: var(--burger-line);
  background: var(--c-white);
  border-radius: 9px;
  opacity: 1;
  transform: rotate(0deg);
  transition: all 0.4s var(--ease-inout);
}
.burger span:nth-child(1) { top: 0; }
.burger span:nth-child(2),
.burger span:nth-child(3) { top: calc(var(--burger-line) + var(--burger-gap)); }
.burger span:nth-child(3) { top: calc((var(--burger-line) + var(--burger-gap)) * 2); }

/* État ouvert : croix centrée au même emplacement (L ≈ H ≈ 28px comme la maquette) */
.burger.is-open span:nth-child(1) { top: calc(var(--burger-line) + var(--burger-gap)); width: 0; left: 50%; }
.burger.is-open span:nth-child(2),
.burger.is-open span:nth-child(3) { top: calc(var(--burger-line) + var(--burger-gap)); width: 40px; left: -5px; }
.burger.is-open span:nth-child(2) { transform: rotate(45deg); }
.burger.is-open span:nth-child(3) { transform: rotate(-45deg); }

/* ---------- Menu mobile plein écran ---------- */
.nav-mobile {
  position: fixed;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 194px 0 40px;
  background: var(--c-overlay-menu);
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s var(--ease-out), visibility 0s linear 0.6s;
}
.nav-mobile.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.6s var(--ease-out), visibility 0s linear 0s;
}
.nav-mobile__list { display: flex; flex-direction: column; align-items: center; gap: 40px; }
.nav-mobile__link {
  display: block;
  font-size: var(--fs-menu-burger);
  line-height: 40px;
  color: var(--c-white);
  text-transform: uppercase;
  white-space: nowrap;
  transition: color var(--t-hover) var(--ease-out);
}
.nav-mobile__link:hover,
.nav-mobile__link:focus-visible { color: var(--c-orange); }
.nav-mobile .linkedin { margin-top: 95px; flex: none; }
.nav-mobile .lang { margin-top: 95px; flex: none; }

/* ---------- Mode burger (classe posée par header.js) ---------- */
.is-burger .nav-desktop,
.is-burger .header__right {
  position: absolute;
  visibility: hidden;
  pointer-events: none;
}
.is-burger .burger { display: block; }

/* ---- footer.css ---- */
/* =========================================================
   Footer
   ========================================================= */
.footer-wrap {
  position: relative;
  padding-top: var(--band-h);          /* place de la bande orange au-dessus */
}
.footer-wrap > .band--orange { top: 0; }

.site-footer {
  position: relative;
  height: var(--footer-h);
  background: var(--c-footer);
  text-align: center;
}
.site-footer > .band--dark { bottom: 0; }

.copyright {
  margin: 0;
  padding-top: 52px;
  font-size: var(--fs-copyright);
  line-height: 1.2;
  color: var(--c-copyright);
}

/* ---- reveal.css ---- */
/* =========================================================
   Apparitions au scroll (réutilisable) : [data-reveal="fade"]
   Classe .js posée sur <html> par js/core/reveal.js : sans JS, tout reste visible.
   ========================================================= */
.js [data-reveal="fade"] {
  opacity: 0;
  transition: opacity var(--t-reveal) var(--ease-out);
}
.js [data-reveal="fade"].is-revealed { opacity: 1; }

/* Fondu + montée depuis le bas (vignettes projets, logos clients) */
.js [data-reveal="rise"] {
  opacity: 0;
  transform: translateY(var(--reveal-rise));
  transition: opacity var(--t-rise) var(--ease-out), transform var(--t-rise) var(--ease-out);
}
.js [data-reveal="rise"].is-revealed { opacity: 1; transform: none; }

/* ---- contact.css ---- */
/* =========================================================
   Formulaire de contact (popup) — ContactForm
   ========================================================= */
.contact {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  visibility: hidden;
  transition: visibility 0s linear var(--t-contact);
}
.contact.is-open { visibility: visible; transition: none; }

/* Voile sur la page (header compris) */
.contact__backdrop {
  position: absolute;
  inset: 0;
  background: var(--c-contact-backdrop);
  opacity: 0;
  transition: opacity var(--t-contact) var(--ease-out);
}
.contact.is-open .contact__backdrop { opacity: 1; }

/* Panneau : 100 % de la largeur, arrive depuis le bas */
.contact__panel {
  position: absolute;
  left: 0; right: 0;
  top: var(--contact-top);
  bottom: 0;
  overflow-y: auto;
  padding: var(--contact-pad-top) var(--contact-pad-x) 60px;
  background: var(--c-contact-panel);
  transform: translateY(100%);
  transition: transform var(--t-contact) var(--ease-out);
}
.contact.is-open .contact__panel { transform: translateY(0); }

/* Croix de fermeture (même dessin que le burger ouvert) */
.contact__close {
  position: absolute;
  top: var(--contact-close-top);
  right: var(--contact-close-right);
  width: 28px;
  height: 28px;
}
.contact__close::before { content: ""; position: absolute; inset: -12px; }
.contact__close span {
  position: absolute;
  left: -6px;
  top: 12.5px;
  width: 40px;
  height: 3px;
  border-radius: 9px;
  background: var(--c-form-text);
  transition: background-color var(--t-hover) var(--ease-out);
}
.contact__close span:first-child { transform: rotate(45deg); }
.contact__close span:last-child { transform: rotate(-45deg); }
.contact__close:hover span { background: var(--c-white); }

/* ---------- Formulaire ---------- */
.contact__form {
  max-width: var(--contact-form-w);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--contact-field-gap);
}
.contact__status {
  margin: 0;
  font-size: var(--fs-form);
  line-height: 1.3;
}
.contact__status:empty { display: none; }
.contact__status.is-error { color: var(--c-orange); }
.contact__status.is-success { color: var(--c-form-success); }

.contact__field {
  display: block;
  width: 100%;
  height: var(--contact-field-h);
  padding: 0 20px;
  border: 1px solid var(--c-form-border);
  border-radius: 0;
  background: transparent;
  font: inherit;
  font-size: var(--fs-form);
  line-height: 1.2;
  color: var(--c-form-text);
  outline: none;
  transition: border-color var(--t-hover) var(--ease-out);
  -webkit-appearance: none;
  appearance: none;
}
.contact__field::placeholder { color: var(--c-form-label); opacity: 1; }
.contact__field:focus { border-color: var(--c-form-focus); }
.contact__field[aria-invalid="true"] { border-color: var(--c-orange); }
textarea.contact__field {
  height: var(--contact-message-h);
  padding-top: 16px;
  padding-bottom: 16px;
  resize: vertical;
}

.contact__submit {
  align-self: center;
  width: 210px;
  height: 70px;
  margin-top: 6px;               /* 30px sous le message (gap 24 + 6) */
  border: 3px solid var(--c-form-label);
  border-radius: 35px;
  font-size: 24px;
  line-height: 1;
  text-transform: uppercase;
  color: var(--c-form-label);
  transition: background-color var(--t-hover) var(--ease-out);
}
.contact__submit:hover,
.contact__submit:focus-visible { background-color: var(--c-cta-bg-hover); }
.contact__submit[disabled] { cursor: wait; }

/* Piège anti-robots (champ « website ») : hors écran, jamais vu ni atteint au clavier par un visiteur */
.contact__hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* ---- legal.css ---- */
/* =========================================================
   Mentions légales (popup) — même présentation que le formulaire de contact
   ========================================================= */
.legal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  visibility: hidden;
  transition: visibility 0s linear var(--t-contact);
}
.legal.is-open { visibility: visible; transition: none; }

.legal__backdrop {
  position: absolute;
  inset: 0;
  background: var(--c-contact-backdrop);
  opacity: 0;
  transition: opacity var(--t-contact) var(--ease-out);
}
.legal.is-open .legal__backdrop { opacity: 1; }

.legal__panel {
  position: absolute;
  left: 0; right: 0;
  top: var(--contact-top);
  bottom: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--contact-pad-top) var(--contact-pad-x) 60px;
  background: var(--c-contact-panel);
  outline: none;
  transform: translateY(100%);
  transition: transform var(--t-contact) var(--ease-out);
}
.legal.is-open .legal__panel { transform: translateY(0); }

/* Sans JavaScript : ouverture par l'ancre #mentions-legales */
html:not(.js) .legal:target { visibility: visible; }
html:not(.js) .legal:target .legal__backdrop { opacity: 1; }
html:not(.js) .legal:target .legal__panel { transform: none; }

/* Croix de fermeture (identique à celle du formulaire) */
.legal__close {
  position: absolute;
  top: var(--contact-close-top);
  right: var(--contact-close-right);
  width: 28px;
  height: 28px;
}
.legal__close::before { content: ""; position: absolute; inset: -12px; }
.legal__close span {
  position: absolute;
  left: -6px;
  top: 12.5px;
  width: 40px;
  height: 3px;
  border-radius: 9px;
  background: var(--c-form-text);
  transition: background-color var(--t-hover) var(--ease-out);
}
.legal__close span:first-child { transform: rotate(45deg); }
.legal__close span:last-child { transform: rotate(-45deg); }
.legal__close:hover span { background: var(--c-white); }

/* ---------- Texte ---------- */
.legal__content {
  max-width: var(--contact-form-w);
  margin: 0 auto;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--c-form-text);
}
.legal__title {
  margin: 0 0 28px;
  font-size: 28px;
  line-height: 1.2;
  font-weight: 500;
  text-transform: uppercase;
  color: var(--c-white);
}
.legal__heading {
  margin: 32px 0 8px;
  font-size: 18px;
  line-height: 1.3;
  font-weight: 500;
  color: var(--c-orange);
}
.legal__content p { margin: 0 0 12px; }
.legal__content ul { margin: 0 0 12px; padding-left: 1.3em; list-style: disc; }
.legal__content b { font-weight: 500; }
.legal__content i { font-style: italic; }
.legal__content a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  overflow-wrap: anywhere;
  transition: color var(--t-hover) var(--ease-out);
}
.legal__content a:hover { color: var(--c-orange); }

@media (max-width: 767px) {
  .copyright .legal-link { display: inline-block; margin: 0 0 8px; }
  .copyright__sep { display: none; }
  .copyright .legal-link + .copyright__sep + span { display: block; }
  .legal__content { font-size: 15px; }
  .legal__title { font-size: 22px; padding-right: 40px; }
}

/* ---------- Lien du pied de page ---------- */
.legal-link {
  color: inherit;
  text-decoration: underline;          /* toujours souligné : on comprend que c'est un lien */
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: color var(--t-hover) var(--ease-out);
}
.legal-link:hover,
.legal-link:focus-visible { color: var(--c-form-text); }
.copyright__sep { margin: 0 .7em; }

/* ---- hero.css ---- */
/* =========================================================
   Hero — vidéo de fond plein écran + titre + bouton contact + souris
   ========================================================= */
.hero {
  position: relative;
  height: 100vh;
  height: 100svh;               /* mobiles : hauteur visible réelle */
  min-height: 480px;
  overflow: hidden;
  background: var(--c-black);
  color: var(--c-white);
}

/* ---------- Vidéo de fond (cover) ---------- */
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
}

/* Voile noir sur la vidéo */
.hero__veil {
  position: absolute;
  inset: 0;
  background: var(--c-hero-veil);
  pointer-events: none;
}

/* ---------- Titre ---------- */
.hero__title {
  position: absolute;
  left: 0; right: 0;
  top: var(--hero-title-y);
  transform: translateY(-50%);
  margin: 0;
  padding: 0 20px;
  font-size: var(--fs-hero);
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
}
.hero__line { display: block; }
.hero__word { display: inline; }
.hero__word--hl { color: var(--c-orange); }
@media (max-width: 767px) {
  .hero__word { display: block; }   /* un mot par ligne (maquette mobile) */
}

/* ---------- Bouton « Nous contacter » ---------- */
.hero__cta {
  position: absolute;
  left: 50%;
  top: var(--hero-cta-y);
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--hero-cta-w);
  height: var(--hero-cta-h);
  border: var(--hero-cta-border) solid var(--c-white);
  border-radius: calc(var(--hero-cta-h) / 2);
  background-color: transparent;
  font-size: var(--fs-hero-cta);
  letter-spacing: var(--ls-hero-cta);
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--c-white);
  transition: background-color var(--t-hover) var(--ease-out), border-color var(--t-hover) var(--ease-out), color var(--t-hover) var(--ease-out);
}
/* Survol : fond orange, texte blanc */
.hero__cta:hover,
.hero__cta:focus-visible {
  background-color: var(--c-orange);
  border-color: var(--c-orange);
  color: var(--c-white);
}

/* ---------- Souris (animation CSS d'après _source/assets/mouse-scroll.json) ---------- */
.hero__mouse {
  position: absolute;
  left: 50%;
  bottom: var(--hero-mouse-bottom);
  transform: translateX(-50%);
  display: block;
  width: var(--hero-mouse-w);
  cursor: pointer;
}
.hero__mouse::before { /* zone de clic élargie */
  content: "";
  position: absolute;
  inset: -12px -20px;
}
.hero__mouse svg { width: 100%; height: auto; overflow: visible; }

/* Durée : 60 images à 20 i/s = 3 s, en boucle */
.mouse__all  { animation: mouse-all 3s linear infinite; }
.mouse__body {
  stroke-dasharray: 100 200;
  animation: mouse-draw 3s linear infinite, mouse-body-fade 3s linear infinite;
}
.mouse__dot-move { animation: mouse-dot-move 3s linear infinite; }
.mouse__dot {
  transform-box: fill-box;
  transform-origin: center;
  animation: mouse-dot-scale 3s linear infinite, mouse-dot-fade 3s linear infinite;
}

@keyframes mouse-all {          /* i10 → 29 : +30 ; → 48 : +14 ; → fin : retour */
  0%, 16.67% { transform: translateY(0); animation-timing-function: cubic-bezier(1, .23, .8, 1); }
  48.33%     { transform: translateY(30px); animation-timing-function: cubic-bezier(.9, 0, .83, .83); }
  80%        { transform: translateY(14px); }
  100%       { transform: translateY(0); }
}
@keyframes mouse-draw {         /* tracé du contour : 0 → complet (i0-28), tenu (i36), effacé (i54) */
  0%     { stroke-dasharray: 0 200; animation-timing-function: cubic-bezier(.575, .745, .227, 1); }
  46.67% { stroke-dasharray: 100 200; }
  60%    { stroke-dasharray: 100 200; animation-timing-function: cubic-bezier(.467, 0, .705, .641); }
  90%, 100% { stroke-dasharray: 0 200; }
}
@keyframes mouse-body-fade {
  0%     { opacity: 0; }
  31.67% { opacity: 1; }
  63.33% { opacity: 1; }
  95%, 100% { opacity: 0; }
}
@keyframes mouse-dot-move {     /* molette : descend de -76.75 à 12.25 (i7 → i37) */
  0%, 11.67% { transform: translateY(-76.75px); animation-timing-function: cubic-bezier(.616, 0, .386, 1); }
  61.67%, 100% { transform: translateY(12.25px); }
}
@keyframes mouse-dot-scale {
  0%     { transform: scale(0); }
  16.67% { transform: scale(1); }
  56.67% { transform: scale(1); }
  71.67%, 100% { transform: scale(0); }
}
@keyframes mouse-dot-fade {
  0%     { opacity: 0; }
  16.67% { opacity: 1; }
  50%    { opacity: 1; }
  66.67%, 100% { opacity: 0; }
}

/* ---- intro.css ---- */
/* =========================================================
   Accroche (section intro)
   ========================================================= */
.intro {
  position: relative;
  padding: var(--intro-pad-top) var(--intro-pad-x) var(--intro-pad-bottom);
  background: var(--c-white);
}
.intro > .band--orange { top: 0; }

.intro__text {
  width: var(--intro-text-w);
  margin: 0 auto;
  font-size: var(--fs-intro);
  font-weight: 300;
  line-height: var(--lh-intro);
  text-align: center;
  text-wrap: pretty; /* évite un mot seul en dernière ligne */
  color: var(--c-text);
}
.intro__text b { font-weight: 600; }

/* ---- projects.css ---- */
/* =========================================================
   Section Projets — ProjectFilters / ProjectGrid / ProjectCard
   ========================================================= */
.projects { background: var(--c-white); }

.projects__head {
  padding: 43px var(--projects-head-px) var(--projects-head-pb);
  background: var(--c-section-grey);
  text-align: center;
}
.section-title {
  margin: 0;
  font-size: var(--fs-section-title);
  font-weight: 700;
  line-height: 0.741;
  text-transform: uppercase;
  color: var(--c-text);
}
.projects__head .section-title { margin-bottom: var(--projects-title-mb); }

/* ---------- Filtres ---------- */
.filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 5px;
}
.filter {
  min-width: 80px;
  height: 38px;
  padding: 0 var(--filter-pad-x);
  border: 1px solid var(--c-grey-border);
  border-radius: 19px;
  background-color: transparent;
  font-size: var(--fs-filter);
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--c-text);
  transition: background-color var(--t-filter) var(--ease-out), border-color var(--t-filter) var(--ease-out), color var(--t-filter) var(--ease-out);
}
.filter:not(.is-active):hover {
  border-color: transparent;
  background-color: var(--c-white);
}
.filter.is-active {
  border-color: var(--c-filter-on);
  background-color: var(--c-filter-on);
  color: var(--c-white);
}

/* ---------- Grille ---------- */
.grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  margin: 0;
  padding: 0;
  list-style: none;
  transition: height var(--t-flip) var(--ease-inout);
}
.grid__item { position: relative; }
.grid__item.is-hidden { display: none; }
/* Recomposition (FLIP) */
.grid__item.is-leaving {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  transition: opacity var(--t-flip-fade) var(--ease-out), transform var(--t-flip-fade) var(--ease-out);
  opacity: 0;
  transform: scale(0.95);
}
.grid__item.is-entering { opacity: 0; transform: scale(0.95); }

/* Case grise de fin de grille : quand la dernière ligne n'a qu'une vignette (nombre impair de projets
   affichés, 2 colonnes), un carré 16:9 gris (--c-grid-filler = gris de l'en-tête de section) comble la case vide.
   Classe is-odd posée par js/components/projects.js (selon les filtres) ; masquée en 1 colonne. */
.grid__filler { display: none; transition: opacity var(--t-flip-fade) var(--ease-out); }
.grid.is-odd .grid__filler { display: block; }
.grid.filler-out .grid__filler { opacity: 0; transition: none; }   /* pendant la recomposition */
.grid__filler-box { aspect-ratio: 16 / 9; background: var(--c-grid-filler); }

/* ---------- Vignette ---------- */
.card {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--c-black);
  color: var(--c-white);
}
.card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  transform: scale(1);
  will-change: transform;
  backface-visibility: hidden;
  transition: transform var(--t-card-zoom) var(--ease-out);
}
.card__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 10%;
  background: var(--c-card-overlay);
  opacity: 0;
  transition: opacity var(--t-card-overlay) var(--ease-out);
}
.card__text {
  margin: 0;
  font-size: var(--fs-card);
  font-weight: 400;
  line-height: 1.2;
  text-align: center;
  opacity: 0;
  transition: opacity var(--t-card-text) var(--ease-out);
}

/* Survol : zoom et voile démarrent ensemble, puis le texte (+0,1 s) ; arrivée amortie */
.card:hover .card__img,
.card:focus-visible .card__img,
.card.is-touched .card__img { transform: scale(var(--card-zoom)); }
.card:hover .card__overlay,
.card:focus-visible .card__overlay,
.card.is-touched .card__overlay { opacity: 1; }
.card:hover .card__text,
.card:focus-visible .card__text,
.card.is-touched .card__text { opacity: 1; transition-delay: 0.12s; }


@media (max-width: 767px) {
  .grid { grid-template-columns: 1fr; }
  .grid.is-odd .grid__filler { display: none; }
}

/* ---- clients.css ---- */
/* =========================================================
   Section Clients
   ========================================================= */
.clients {
  padding: var(--clients-pad-top) var(--clients-pad-x) var(--clients-pad-bottom);
  background: var(--c-white);
  text-align: center;
}

/* Titre souligné (réutilisable) */
.section-title--underline::after {
  content: "";
  display: block;
  width: 100px;
  height: 3px;
  margin: var(--title-underline-gap) auto 0;
  background: var(--c-text);
}

.clients__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: var(--clients-row-h);
  margin-top: var(--clients-grid-mt);
}
.clients__item {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
}
.clients__item img {
  width: calc(var(--w) * var(--clients-logo-scale));
  max-width: 100%;
  height: auto;
}

@media (max-width: 1023px) {
  .clients__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 767px) {
  .clients__grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---- project.css ---- */
/* =========================================================
   Fiche projet — MediaPlayer / MediaThumbnails / ProjectDescription
   ========================================================= */

/* ---------- Player : 16:9, L 1280 max, bandes noires au-delà ; la zone 16:9 est matérialisée
   par un fond #141414 (--c-player-stage), visible autour des médias d'un autre format (ex. vidéo 9:16) ---------- */
.player { background: var(--c-black); }
.player__stage {
  position: relative;
  max-width: var(--player-w);
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--c-player-stage);
}
.player__layer {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity var(--t-media-fade) var(--ease-out);
}
.player__layer.is-shown { opacity: 1; }
.player__layer img,
.player__layer iframe {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  border: 0;
  object-fit: contain;
}

/* Largeur du lecteur (--player-w), partagée avec la description pour aligner ses marges.
   Par défaut : --player-max-w (plafond ; le lecteur ne dépasse jamais la largeur de l'écran).
   ≥ 768 de large, s'il y a des vignettes : lecteur à la hauteur de la fenêtre —
   en-tête + lecteur + 1re rangée de vignettes tiennent dans la fenêtre ;
   la largeur suit en 16:9, plafonnée à --player-max-w, plancher --player-min-h */
.project { --player-w: var(--player-max-w); --thumbs-reserve: 0px; }
/* hauteur réservée à la 1re rangée de vignettes (+ 15 px de respiration sous la barre orange) */
.project:has(.thumbs:not([hidden])) {
  --thumbs-reserve: calc(var(--thumbs-pad-top) + var(--thumb-size) + var(--thumb-bar-h) + 15px);
}
@media (min-width: 768px) {
  .project:has(.thumbs:not([hidden])) {
    --player-w: min(var(--player-max-w), max(var(--player-min-h), 100vh - var(--header-h) - var(--thumbs-reserve)) * 16 / 9);
  }
  @supports (height: 100svh) {
    .project:has(.thumbs:not([hidden])) {
      --player-w: min(var(--player-max-w), max(var(--player-min-h), 100svh - var(--header-h) - var(--thumbs-reserve)) * 16 / 9);
    }
  }
}

/* Fenêtre en portrait (smartphone, tablette tenue verticalement, fenêtre étroite et haute) — 07/10 :
   le cadre du lecteur prend les proportions du média affiché (--media-ratio = L/H, posé par
   project-page.js d'après data-ratio ; 16:9 par défaut) au lieu de la zone 16:9 ;
   hauteur limitée à : fenêtre − en-tête − 1re rangée de vignettes (règle « 1re ligne toujours visible »),
   plancher --player-min-h-portrait. En paysage (ordinateur, tablette à l'horizontale) : zone 16:9 inchangée.
   Le texte et les vignettes gardent la largeur --player-w (zone 16:9). */
@media (orientation: portrait) {
  .project { --stage-h: max(var(--player-min-h-portrait), 100vh - var(--header-h) - var(--thumbs-reserve)); }
  @supports (height: 100svh) {
    .project { --stage-h: max(var(--player-min-h-portrait), 100svh - var(--header-h) - var(--thumbs-reserve)); }
  }
  .player__stage {
    aspect-ratio: var(--media-ratio, 16 / 9);
    max-width: min(var(--player-max-w), var(--stage-h) * var(--media-ratio, 1.7778));
  }
}
/* changement de proportions d'un média à l'autre : largeur et hauteur animées ensemble (project-page.js) */
.player__stage.is-resizing {
  transition: width var(--t-player-resize) var(--ease-inout), height var(--t-player-resize) var(--ease-inout);
}

/* ---------- Vignettes ---------- */
.thumbs {
  padding: var(--thumbs-pad-top) 20px var(--thumbs-pad-bottom);
  background: var(--c-section-grey);
}
.thumbs__list {
  display: grid;
  /* auto-fit : les colonnes vides disparaissent → le bloc des vignettes est centré,
     et une 2e ligne incomplète reste ferrée à gauche sous la 1re */
  grid-template-columns: repeat(auto-fit, var(--thumb-size));
  justify-content: center;
  column-gap: var(--thumb-gap);
  row-gap: var(--thumb-row-gap);
  /* autant de vignettes par ligne que la largeur du lecteur le permet (--player-w), sans la dépasser */
  max-width: var(--player-w);
  margin: 0 auto;
}
.thumb {
  position: relative;
  display: block;
  width: var(--thumb-size);
  padding-bottom: var(--thumb-bar-h);
}
.thumb__frame {
  display: block;
  width: var(--thumb-size);
  height: var(--thumb-size);
  overflow: hidden;
  background: var(--c-black);
}
.thumb__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  transition: transform var(--t-card-zoom) var(--ease-out);
}
.thumb:hover .thumb__frame img,
.thumb:focus-visible .thumb__frame img { transform: scale(var(--thumb-zoom)); }

/* Symbole « play » sur les vignettes vidéo (assets/img/bouton-play.svg) et « 3D » sur les modèles
   Sketchfab (assets/img/bouton-3d.svg, même charte : disque noir 40 %, tracé #F3F4F6) :
   L 50 × H 50 sur une vignette L 200 (25 %, proportionnel), centré, zoome avec la vignette */
.thumb__frame { position: relative; }
.thumb--video .thumb__frame::after,
.thumb--3d .thumb__frame::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 25%;
  height: 25%;
  background: url("../assets/img/bouton-play.svg") center / contain no-repeat;
  transform: translate(-50%, -50%) scale(1);
  transition: transform var(--t-card-zoom) var(--ease-out);
  pointer-events: none;
}
.thumb--3d .thumb__frame::after { background-image: url("../assets/img/bouton-3d.svg"); }
.thumb--video:hover .thumb__frame::after,
.thumb--video:focus-visible .thumb__frame::after,
.thumb--3d:hover .thumb__frame::after,
.thumb--3d:focus-visible .thumb__frame::after { transform: translate(-50%, -50%) scale(var(--thumb-zoom)); }

/* Indicateur orange : L 80 % centré, H 10 ; apparition du centre vers les côtés (comme le menu) */
.thumb::after {
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: 0;
  height: var(--thumb-bar-h);
  background: var(--c-orange);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--t-hover) var(--ease-out);
}
.thumb.is-active::after { transform: scaleX(1); }

/* ---------- Description ---------- */
.project-desc {
  /* Marges gauche/droite alignées sur les bords du lecteur (suivent son redimensionnement) ;
     --desc-pad-x = marge minimale quand le lecteur occupe toute la largeur */
  padding: var(--desc-pad-top) max(var(--desc-pad-x), (100% - var(--player-w)) / 2) var(--desc-pad-bottom);
  background: var(--c-white);
  color: var(--c-text);
}
.project-desc__title {
  margin: 0 0 var(--desc-title-mb);
  font-size: var(--fs-desc-title);
  font-weight: 700;
  line-height: 1.15;
}
.project-desc__body {
  font-size: var(--fs-desc);
  font-weight: 400;
  line-height: var(--lh-desc);
}
.project-desc__body p { margin: 0; }
.project-desc__body b,
.project-desc__body strong { font-weight: 600; }
.project-desc__body i,
.project-desc__body em { font-style: italic; }
/* Liste à puces : rond plein couleur du texte, retrait L 40 px, une ligne vide avant et après */
.project-desc__body ul {
  margin: calc(var(--fs-desc) * var(--lh-desc)) 0;
  padding-left: 40px;
  list-style: disc;
}
.project-desc__body li { margin: 0; }

/* ---------- Bouton de retour flottant (inspiré de hmxmedia.com, charte VPS) ----------
   Flèche seule (01/10) : pas de fond ; la zone cliquable reste un carré invisible de
   --back-size (50 / 44 px, comme l'ancien bouton). Le texte « Retour aux projets » ne sert
   plus qu'à l'aria-label. mix-blend-mode: difference → flèche blanche sur fond sombre,
   noire sur fond clair ; au survol : orange (sans inversion), sans déplacement (glissement retiré le 01/10). */
.back-btn {
  position: fixed;
  left: var(--back-left);
  bottom: var(--back-bottom);
  z-index: 90;                                   /* sous le header et le formulaire */
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--back-size);
  height: var(--back-size);
  background: transparent;
  color: var(--c-white);
  mix-blend-mode: difference;
  transition: color var(--t-hover) var(--ease-out);
}
.back-btn svg {
  width: var(--back-arrow);
  height: var(--back-arrow);
}
.back-btn svg path { stroke-width: 2; }
.back-btn:hover,
.back-btn:focus-visible {
  mix-blend-mode: normal;
  color: var(--c-orange);
}