/* =========================================================================
   Roya Heiran — Portfolio
   style.css

   Sommaire
   01. Tokens (couleurs, typo, espacements)
   02. Reset & base
   03. Typographie
   04. Utilitaires & animations d'apparition
   05. Navigation
   06. Hero
   07. Sections generiques
   08. A propos
   09. Projets (grille + filtres)
   10. Services
   11. Methode
   12. Temoignages
   13. Parcours (tableau)
   14. Journal
   15. FAQ
   16. Appel a l'action
   17. Contact
   18. Pied de page
   19. Page projet
   20. Lightbox
   21. Page 404
   22. Responsive
   ========================================================================= */

/* -------------------------------------------------------------------------
   01. TOKENS
   ------------------------------------------------------------------------- */
:root {
  /* ---- Palette : lilas & prune ----------------------------------------
     Trois couleurs seulement. L'accent n'apparait qu'en petite quantite,
     et jamais en texte sur le fond clair : le rapport de contraste y est
     de 1,1 pour 1, il serait illisible. Sur la prune il monte a 14,9.  */
  --pale:         #EEE8F1;   /* fond clair  */
  --pale-dim:     #E5DCEA;   /* cadres vides, images en attente */
  --deep:         #2B1733;   /* prune, texte et sections foncees */
  --accent:       #EBFF47;   /* jaune acide */
  --accent-ink:   #2B1733;   /* ce qui s'ecrit sur l'accent */

  --deep-soft:    rgba(43, 23, 51, .20);
  --deep-mid:     rgba(43, 23, 51, .50);
  --deep-faint:   rgba(43, 23, 51, .08);
  --pale-soft:    rgba(238, 232, 241, .45);
  --pale-mid:     rgba(238, 232, 241, .70);
  --pale-faint:   rgba(238, 232, 241, .12);

  /* Anciens noms conserves comme alias : tout le reste de la feuille les
     utilise encore, et les renommer partout n'apporterait rien. */
  --cream:        var(--pale);
  --cream-dim:    var(--pale-dim);
  --blue:         var(--deep);
  --blue-soft:    var(--deep-soft);
  --blue-mid:     var(--deep-mid);
  --blue-faint:   var(--deep-faint);
  --cream-soft:   var(--pale-soft);
  --cream-mid:    var(--pale-mid);
  --cream-faint:  var(--pale-faint);

  --white:        #FFFFFF;
  --ink:          #232323;

  /* Roles */
  --bg:           var(--cream);
  --fg:           var(--blue);
  --fg-soft:      var(--blue-soft);
  --fg-mid:       var(--blue-mid);
  --rule:         var(--blue-soft);

  /* Typographie */
  --font-display: "Bebas Neue", "Haettenschweiler", "Arial Narrow", sans-serif;
  --font-tight:   "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Echelle typographique fluide */
  --t-micro:  clamp(.63rem, .55rem + .25vw, .75rem);
  --t-small:  clamp(.75rem, .70rem + .25vw, .875rem);
  --t-body:   clamp(.95rem, .88rem + .32vw, 1.125rem);
  --t-lead:   clamp(1.05rem, .95rem + .50vw, 1.375rem);
  --t-stmt:   clamp(1.55rem, .90rem + 3.00vw, 3.60rem);
  --t-huge:   clamp(3.00rem, 1.00rem + 9.00vw, 10.00rem);

  /* Espacement */
  --gutter:     clamp(1.15rem, .60rem + 2.4vw, 3.25rem);
  --section-y:  clamp(4.5rem, 2.5rem + 8vw, 11rem);
  --gap:        clamp(1rem, .5rem + 1.6vw, 2rem);

  /* Divers */
  --nav-h: 68px;
  --ease:  cubic-bezier(.22, 1, .36, 1);
  --dur:   .7s;
  --radius: 2px;
}

/* -------------------------------------------------------------------------
   02. RESET & BASE
   ------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 1rem);
  /* Aucun overflow ici, volontairement. Toute valeur autre que « visible »
     sur html ou body fait de l'element le referent des enfants collants :
     la barre se collait alors au body, qui ne defile pas, donc elle
     partait avec la page et disparaissait sous la barre d'adresse de
     Safari. Le debordement lateral est evite a la source, la seule zone
     qui defile horizontalement etant la galerie .works. */
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: 1.55;
  font-feature-settings: "kern" 1, "liga" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
table { border-collapse: collapse; width: 100%; }

::selection { background: var(--accent); color: var(--accent-ink); }

/* --- Regle unique de l'accent -------------------------------------------
   Sur la prune, le jaune peut etre du texte : 14,9 pour 1.
   Sur le lilas, il ne peut etre qu'un aplat, avec la prune ecrite dessus :
   en texte il tomberait a 1,1 pour 1, donc illisible.
   Tout ce qui suit respecte cette regle sans exception.                  */
.is-dark {
  --hl-color: var(--accent);
}

/* Surlignage au feutre : le trait sous le lien devient un aplat jaune et
   le texte passe en prune. Fonctionne sur les deux fonds. */
.surligne {
  background-image: linear-gradient(var(--accent), var(--accent));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% .08em;
  transition: background-size .38s var(--ease), color .38s var(--ease);
  padding-inline: .12em;
  margin-inline: -.12em;
}
.surligne:hover { background-size: 100% 100%; color: var(--accent-ink); }

:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

/* Lien d'evitement pour l'accessibilite */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--blue); color: var(--cream);
  padding: .75rem 1.25rem; font-size: var(--t-small);
}
.skip-link:focus { left: 0; }

/* -------------------------------------------------------------------------
   03. TYPOGRAPHIE
   ------------------------------------------------------------------------- */
.display {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  line-height: .82;
  letter-spacing: .005em;
}

/* Grand titre "phrase" en Inter Tight, comme les headers du systeme */
.statement {
  font-family: var(--font-tight);
  font-weight: 500;
  font-size: var(--t-stmt);
  line-height: 1.02;
  letter-spacing: -.025em;
  text-transform: uppercase;
  text-wrap: balance;
  max-width: 22ch;
}
.statement--wide { max-width: 30ch; }
.statement .hl { color: var(--fg-soft); }
.is-dark .statement .hl { color: var(--accent); }

/* Etiquette de section : "↳ A PROPOS" */
.label {
  font-family: var(--font-tight);
  font-size: var(--t-small);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--fg-mid);
  display: inline-flex;
  align-items: center;
  gap: .5em;
}
.label::before { content: "\21B3"; font-size: 1.1em; line-height: 1; }
.is-dark .label { color: var(--accent); }

.lead { font-size: var(--t-lead); line-height: 1.45; max-width: 62ch; }
.prose p + p { margin-top: 1.1em; }
.prose { max-width: 68ch; text-align: justify; hyphens: auto; }

.mono-meta {
  font-family: var(--font-tight);
  font-size: var(--t-small);
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* -------------------------------------------------------------------------
   04. UTILITAIRES & APPARITION AU DEFILEMENT
   ------------------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: 1680px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y); position: relative; }
.section + .section { padding-top: 0; }
.section--flush + .section { padding-top: var(--section-y); }

.is-dark { background: var(--blue); color: var(--cream); }
.is-dark { --bg: var(--blue); --fg: var(--cream); --fg-soft: var(--cream-soft); --fg-mid: var(--cream-mid); --rule: var(--cream-faint); }

.rule { height: 1px; background: var(--rule); border: 0; margin: 0; }

.section-head {
  display: grid;
  gap: clamp(1.25rem, .5rem + 2vw, 2.5rem);
  margin-bottom: clamp(2rem, 1rem + 3vw, 4rem);
}

.cluster { display: flex; flex-wrap: wrap; gap: var(--gap); align-items: center; }
.spread  { display: flex; flex-wrap: wrap; gap: var(--gap); justify-content: space-between; align-items: flex-end; }

/* Bouton / lien fleche */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  font-family: var(--font-tight);
  font-size: var(--t-small);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: .85em 1.6em;
  border: 1px solid currentColor;
  border-radius: 100px;
  transition: background .35s var(--ease), color .35s var(--ease);
}
/* La fleche etait le caractere U+2197. iOS lui donne par defaut sa forme
   emoji : un carre bleu avec une fleche blanche, en plein milieu d'un
   bouton. Le selecteur de variante textuelle n'est pas suivi partout, et
   la forme dependrait de toute facon de la police du systeme. On la
   dessine donc nous-memes, en masque, pour qu'elle prenne la couleur du
   bouton et reste identique sur tous les appareils. */
.btn::after {
  content: "";
  width: .62em;
  height: .62em;
  flex: none;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.6 9.4 9.4 2.6M4.3 2.6h5.1v5.1' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.6 9.4 9.4 2.6M4.3 2.6h5.1v5.1' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
  transition: transform .35s var(--ease);
}
.btn:hover { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.is-dark .btn:hover { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn:hover::after { transform: translate(2px, -2px); }
/* L'attribut « hidden » vaut display:none dans la feuille du navigateur,
   une regle si faible que le moindre display declare la bat. Le bouton du
   CV restait donc visible alors que le script l'avait masque. */
[hidden] { display: none !important; }

.link-u {
  font-family: var(--font-tight);
  font-size: var(--t-small);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .04em;
  position: relative;
  padding-bottom: 2px;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size .4s var(--ease);
}
.link-u:hover { background-size: 0% 1px; background-position: 100% 100%; }

/* Apparition */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  transition-delay: var(--d, 0ms);
}
.reveal.in { opacity: 1; transform: none; }

/* Apparition mot a mot */
.words .w {
  display: inline-block;
  opacity: 0;
  transform: translateY(.5em);
  transition: opacity .55s var(--ease), transform .55s var(--ease);
}
.words.in .w { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .words .w { opacity: 1 !important; transform: none !important; transition: none !important; }
  .marquee__track, .ring { animation: none !important; }
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* -------------------------------------------------------------------------
   05. NAVIGATION
   ------------------------------------------------------------------------- */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  mix-blend-mode: normal;
  transition: background .35s var(--ease), color .35s var(--ease);
}
.nav__inner {
  width: 100%;
  max-width: 1680px;
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--gap);
}
.nav__group { display: flex; gap: clamp(1rem, .4rem + 2vw, 3rem); align-items: center; }
.nav__group--right { justify-self: end; }
.nav__brand {
  font-family: var(--font-tight);
  font-size: var(--t-small);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .06em;
  white-space: nowrap;
}
.nav__link {
  font-family: var(--font-tight);
  font-size: var(--t-small);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .05em;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  transition: opacity .3s var(--ease);
}
.nav__link {
  background-image: linear-gradient(var(--accent), var(--accent));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 100%;
  transition: background-size .34s var(--ease), color .34s var(--ease);
  padding-inline: .18em;
}
.nav__link:hover { background-size: 100% 100%; color: var(--accent-ink); text-decoration-color: transparent; }
.nav__link[aria-current="page"] { text-decoration-thickness: 2px; }

.lang {
  display: inline-flex;
  align-items: center;
  border: 1px solid currentColor;
  border-radius: 100px;
  overflow: hidden;
  font-family: var(--font-tight);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: .08em;
}
.lang__opt {
  padding: .42em .85em;
  transition: background .35s var(--ease), color .35s var(--ease);
  opacity: .5;
}
.lang__opt[aria-pressed="true"] { background: var(--accent); opacity: 1; }
.lang__opt[aria-pressed="true"] span { color: var(--accent-ink); mix-blend-mode: normal; }
.nav.on-dark .lang__opt[aria-pressed="true"] span { color: var(--blue); }

/* Etat "sur fond bleu" */
.nav.on-dark { color: var(--cream); }
.nav.scrolled { background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(10px); }
.nav.on-dark.scrolled { background: color-mix(in srgb, var(--blue) 88%, transparent); }

/* Menu mobile (masque sur grand ecran) */
.nav__toggle { display: none; }
.nav__panel  { display: none; }
.nav__toggle-line { display: block; width: 22px; height: 1.5px; background: currentColor; margin: 5px 0; transition: transform .35s var(--ease), opacity .35s var(--ease); }

/* -------------------------------------------------------------------------
   06. HERO
   ------------------------------------------------------------------------- */
.hero {
  min-height: 100svh;
  padding-top: calc(var(--nav-h) + clamp(1rem, 3vh, 3rem));
  padding-bottom: clamp(.5rem, 2vh, 2rem);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}

.hero__portrait {
  position: relative;
  /* La hauteur suit celle de l'ecran : sur un portable, le portrait se
     reduit pour que le nom geant reste dans le premier ecran. */
  height: clamp(170px, 29svh, 315px);
  width: auto;
  aspect-ratio: 3 / 4;
  margin-inline: auto;
}
.hero__portrait img,
.hero__portrait .ph {
  width: 100%; height: 100%; object-fit: cover;
}
.hero__portrait::before,
.hero__portrait::after {
  content: "";
  position: absolute;
  width: 100%; height: 100%;
  left: 0; top: 0;
  pointer-events: none;
}
.hero__marks { position: absolute; inset: -22px; pointer-events: none; }
.hero__marks span {
  position: absolute;
  font-size: 1.05rem;
  line-height: 1;
  opacity: .85;
}
.hero__marks span:nth-child(1) { left: 0;  top: 0; }
.hero__marks span:nth-child(2) { right: 0; top: 0; }
.hero__marks span:nth-child(3) { left: 0;  bottom: 0; }
.hero__marks span:nth-child(4) { right: 0; bottom: 0; }

.hero__lede {
  margin: clamp(1.1rem, 2.6vh, 2.5rem) auto 0;
  max-width: 46ch;
  text-align: center;
  font-family: var(--font-tight);
  font-weight: 600;
  font-size: clamp(.95rem, .70rem + .85vw, 1.45rem);
  line-height: 1.22;
  letter-spacing: -.015em;
  text-transform: uppercase;
  text-wrap: balance;
}
.hero__lede .hl { color: var(--fg-soft); }

.hero__meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
  align-items: end;
  margin-top: clamp(1.5rem, 4vh, 3rem);
}
.hero__meta-block { display: grid; gap: .3rem; }
.hero__meta-block--r { text-align: right; justify-items: end; }
.hero__meta-block--r .label::before { content: none; }
.hero__meta-block--r .label::after { content: "\21B5"; font-size: 1.1em; }
.hero__meta a { font-family: var(--font-tight); font-size: var(--t-small); }
.hero__meta a:hover { opacity: .6; }
.hero__tagline {
  font-family: var(--font-tight);
  font-weight: 500;
  font-size: clamp(.95rem, .8rem + .5vw, 1.25rem);
  line-height: 1.15;
  letter-spacing: -.02em;
  max-width: 14ch;
}

/* Nom geant */
.hero__name {
  margin-top: clamp(.5rem, 2vh, 1.5rem);
  width: 100%;
  /* pas d'overflow:hidden ici : il coupait le haut des capitales.
     Le debordement horizontal est deja bloque par body{overflow-x:hidden}. */
}
.fit-text {
  font-family: var(--font-display);
  text-transform: uppercase;
  white-space: nowrap;
  display: block;
  /* Bebas Neue a des metriques hautes : il faut une line-height >= 1
     pour que les capitales et les accents ne soient jamais rognes. */
  line-height: 1;
  font-size: 17vw;              /* remplace par JS pour un calage exact */
  letter-spacing: -.005em;
  margin: 0;
  transform-origin: left bottom;
}

/* -------------------------------------------------------------------------
   07. SECTIONS GENERIQUES : bandeau defilant
   ------------------------------------------------------------------------- */
.marquee {
  overflow: hidden;
  background: var(--accent);
  color: var(--accent-ink);
  padding-block: .5em;
  user-select: none;
}
.marquee__track {
  display: flex;
  gap: 0;
  width: max-content;
  animation: marquee 38s linear infinite;
}
.marquee__track span {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 1rem + 2.6vw, 3.4rem);
  line-height: 1;
  text-transform: uppercase;
  padding-inline: .4em;
  white-space: nowrap;
}
.marquee__track span::after { content: "\00B7"; margin-left: .8em; opacity: .4; }
@keyframes marquee { to { transform: translateX(-50%); } }
.marquee:hover .marquee__track { animation-play-state: paused; }

/* -------------------------------------------------------------------------
   08. A PROPOS
   ------------------------------------------------------------------------- */
.about { padding-block: var(--section-y); }
.about__top {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(1.5rem, 1rem + 3vw, 4.5rem);
  align-items: center;
  margin-bottom: clamp(2rem, 1rem + 3vw, 4rem);
}
.ring {
  width: clamp(130px, 14vw, 200px);
  aspect-ratio: 1;
  animation: spin 26s linear infinite;
}
.ring text { font-family: var(--font-tight); font-size: 5.4px; font-weight: 500; letter-spacing: .09em; fill: currentColor; text-transform: uppercase; }
@keyframes spin { to { transform: rotate(360deg); } }

.about__grid {
  display: grid;
  grid-template-columns: 1fr minmax(0, 1.15fr);
  gap: clamp(1.5rem, 1rem + 3vw, 5rem);
  align-items: start;
}
.about__facts { display: grid; gap: .85rem; align-content: start; }
.about__facts li {
  font-family: var(--font-tight);
  font-size: var(--t-body);
  padding-bottom: .85rem;
  border-bottom: 1px solid var(--rule);
}
.about__facts li::before { content: "\00AC"; margin-right: .55em; opacity: .55; }
.about__actions { margin-top: clamp(1.5rem, 1rem + 2vw, 2.5rem); }

/* -------------------------------------------------------------------------
   09. PROJETS
   ------------------------------------------------------------------------- */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: clamp(1.75rem, 1rem + 2vw, 3rem);
}
.filters button {
  font-family: var(--font-tight);
  font-size: var(--t-small);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: .55em 1.15em;
  border: 1px solid var(--rule);
  border-radius: 100px;
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.filters button:hover { border-color: currentColor; }
.filters button[aria-pressed="true"] {
  background: var(--accent); color: var(--accent-ink); border-color: var(--accent);
}

.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(1.5rem, 1rem + 2.5vw, 3.5rem) var(--gap);
}

.card { grid-column: span 6; display: block; }
.card:nth-child(6n + 1),
.card:nth-child(6n + 4) { grid-column: span 7; }
.card:nth-child(6n + 2),
.card:nth-child(6n + 5) { grid-column: span 5; }
.card:nth-child(6n + 3) { grid-column: span 5; margin-top: clamp(0rem, 4vw, 5rem); }
.card:nth-child(6n + 6) { grid-column: span 7; }

/* --- Mosaique (masonry) -------------------------------------------------
   Les cartes gardent le format naturel de leur image et se calent les unes
   sous les autres sans laisser de trou. La hauteur de chaque carte est
   convertie en nombre de rangees par app.js, une fois les images chargees. */
.grid--mosaique {
  grid-template-columns: repeat(auto-fill, minmax(clamp(220px, 24vw, 340px), 1fr));
  grid-auto-rows: 8px;
  align-items: start;
  gap: 0 var(--gap);
}
.grid--mosaique .card,
.grid--mosaique .card:nth-child(n) {
  grid-column: auto;
  margin-top: 0;
}
/* l'image reprend ses proportions reelles */
.grid--mosaique .card__media { aspect-ratio: auto; }
.grid--mosaique .card__media img { height: auto; object-fit: contain; }
.grid--mosaique .card__foot { border-bottom: 0; padding-bottom: 0; }

/* Galerie d'une page projet, meme principe */
/* Trois colonnes sur grand ecran : chaque photographie reste assez grande
   pour se lire, et une serie de dix tient en deux ecrans de defilement.
   Deux colonnes sur tablette, une seule sur telephone.                  */
.pj__gallery.pj__gallery--mosaique {
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 8px;
  align-items: start;
  gap: 0 var(--gap);
}
@media (max-width: 1024px) {
  .pj__gallery.pj__gallery--mosaique { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .pj__gallery.pj__gallery--mosaique { grid-template-columns: 1fr; }
}
.pj__gallery.pj__gallery--mosaique .pj__shot,
.pj__gallery.pj__gallery--mosaique .pj__shot:nth-child(n) {
  grid-column: auto;
  aspect-ratio: auto;
}
.pj__gallery.pj__gallery--mosaique .pj__shot img { height: auto; object-fit: contain; }

.card__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--blue-faint);
}
.is-dark .card__media { background: var(--cream-faint); }
.card__media img, .card__media .ph {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.1s var(--ease), filter .6s var(--ease);
}
.card:hover .card__media img,
.card:hover .card__media .ph { transform: scale(1.045); }

.card__index {
  position: absolute;
  z-index: 3;
  top: .75rem; left: .85rem;
  font-family: var(--font-tight);
  font-size: var(--t-micro);
  letter-spacing: .1em;
  background: var(--accent);
  color: var(--accent-ink);
  padding: .3em .7em;
  border-radius: 100px;
}

/* --- Couvertures en monochrome, couleur au survol -----------------------
   La luminosite de la photo est conservee, seule la teinte est remplacee
   par la prune de la palette. C'est ce que fait mix-blend-mode: color.
   Le contraste est aussi legerement abaisse pour que la grille reste
   calme. Au survol, le voile disparait et l'image revient en couleur.
   Ne s'applique qu'aux couvertures : les images d'une page projet
   gardent leurs couleurs.                                               */
.mono { position: relative; }
.mono > img,
.mono > .ph {
  filter: grayscale(1) contrast(.88) brightness(1.06);
  transition: filter var(--dur) var(--ease), transform 1.1s var(--ease);
}
.mono::after {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  background: var(--deep);
  mix-blend-mode: color;
  opacity: .6;
  transition: opacity var(--dur) var(--ease);
  pointer-events: none;
}
.card:hover .mono > img,
.card:hover .mono > .ph,
.wcard:hover .mono > img { filter: none; }
.card:hover .mono::after,
.wcard:hover .mono::after { opacity: 0; }

/* Au clavier, le focus doit produire le meme effet que la souris */
.card:focus-visible .mono > img,
.wcard:focus-visible .mono > img { filter: none; }
.card:focus-visible .mono::after,
.wcard:focus-visible .mono::after { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .mono > img, .mono::after { transition: none; }
}

.card__foot {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--gap);
  margin-top: .9rem;
  padding-bottom: .9rem;
  border-bottom: 1px solid var(--rule);
}
.card__title {
  font-family: var(--font-tight);
  font-weight: 500;
  font-size: clamp(1.05rem, .85rem + .7vw, 1.6rem);
  letter-spacing: -.02em;
  text-transform: uppercase;
  line-height: 1.05;
}
.card__tagline { font-size: var(--t-small); color: var(--fg-mid); margin-top: .3rem; max-width: 44ch; }
.card__meta {
  font-family: var(--font-tight);
  font-size: var(--t-small);
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--fg-mid);
  white-space: nowrap;
  text-align: right;
}
.card:hover .card__title { opacity: .6; transition: opacity .3s var(--ease); }

.grid__empty { grid-column: 1 / -1; padding: 3rem 0; color: var(--fg-mid); }

/* --- Galerie horizontale de la page d'accueil ---------------------------- */
.works {
  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  cursor: grab;
  padding-block: clamp(1rem, .5rem + 2vw, 2.5rem);
}
.works::-webkit-scrollbar { display: none; }
.works.dragging { cursor: grabbing; scroll-snap-type: none; }
.works.dragging * { pointer-events: none; }

.works__track {
  display: flex;
  align-items: flex-start;
  gap: clamp(1.25rem, .5rem + 3vw, 4rem);
  width: max-content;
  padding-inline: var(--gutter);
}

.wcard {
  flex: none;
  scroll-snap-align: center;
  display: block;
}
/* Deux gabarits qui alternent : grand paysage, puis petit decale vers le bas */
.wcard--lg { --h: clamp(260px, 58vh, 620px); }
.wcard--sm { --h: clamp(180px, 40vh, 430px); margin-top: clamp(2.5rem, 14vh, 12rem); }

/* La carte prend les proportions de la photo. Toutes les cartes d'un meme
   gabarit partagent la hauteur, la largeur suit l'image. Aucun recadrage,
   contrairement au format fixe utilise auparavant.                      */
.wcard__media {
  position: relative;
  overflow: hidden;
  background: var(--blue-faint);
  height: var(--h);
}
.wcard__media img {
  height: 100%; width: auto; max-width: none; object-fit: contain;
  transition: transform 1.1s var(--ease), filter .6s var(--ease);
}
.wcard:hover .wcard__media img { transform: scale(1.04); }

.wcard__foot {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--gap);
  margin-top: .85rem;
}
.wcard__title {
  font-family: var(--font-tight);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: -.02em;
  font-size: clamp(.9rem, .78rem + .55vw, 1.35rem);
  line-height: 1.05;
  transition: opacity .3s var(--ease);
}
.wcard:hover .wcard__title { opacity: .55; }
.wcard__meta {
  font-family: var(--font-tight);
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--fg-mid);
  white-space: nowrap;
}

.works__hint {
  display: flex; align-items: center; gap: .5em;
  font-family: var(--font-tight);
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--fg-soft);
  margin-top: clamp(.75rem, 1.5vw, 1.5rem);
  padding-inline: var(--gutter);
}
/* Meme raison : U+2194 s'affiche aussi en emoji sur iOS. */
.works__hint::before {
  content: "";
  display: inline-block;
  width: 1.1em;
  height: 1.1em;
  vertical-align: -.18em;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 12'%3E%3Cpath d='M1.4 6h11.2M4 3.4 1.4 6 4 8.6M10 3.4 12.6 6 10 8.6' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 12'%3E%3Cpath d='M1.4 6h11.2M4 3.4 1.4 6 4 8.6M10 3.4 12.6 6 10 8.6' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* --- Sous-categories photo ---------------------------------------------- */
.subs {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin: -.4rem 0 clamp(1.75rem, 1rem + 2vw, 3rem);
}
.subs button {
  font-family: var(--font-tight);
  font-size: var(--t-micro);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .07em;
  padding: .5em 1em;
  border: 1px solid var(--rule);
  border-radius: 100px;
  color: var(--fg-mid);
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.subs button:hover { border-color: currentColor; color: var(--fg); }
.subs button[aria-pressed="true"] {
  background: var(--accent); color: var(--accent-ink); border-color: var(--accent);
}

/* -------------------------------------------------------------------------
   10. SERVICES  (une seule ligne d'intitules, comme la reference)
   ------------------------------------------------------------------------- */
.svc-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: clamp(.9rem, .3rem + 2.2vw, 3rem);
  padding-top: clamp(1.5rem, 1rem + 2vw, 3rem);
  border-top: 1px solid var(--rule);
}
.svc-row li {
  font-family: var(--font-tight);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: -.02em;
  font-size: clamp(.95rem, .78rem + .85vw, 1.6rem);
  line-height: 1;
  white-space: nowrap;
  transition: color .3s var(--ease), opacity .3s var(--ease);
}
.svc-row li {
  background-image: linear-gradient(var(--accent), var(--accent));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 100%;
  padding-inline: .12em;
  transition: background-size .38s var(--ease), color .38s var(--ease), opacity .3s var(--ease);
}
.svc-row:hover li { opacity: .4; }
.svc-row li:hover { opacity: 1; background-size: 100% 100%; color: var(--accent-ink); }

/* -------------------------------------------------------------------------
   11. METHODE  (media plein cadre + etapes superposees)
   ------------------------------------------------------------------------- */
.process__frame {
  position: relative;
  margin-top: clamp(1.5rem, 1rem + 2.5vw, 3.5rem);
  overflow: hidden;
  background: var(--blue);
  isolation: isolate;
}
.process__media,
.process__frame > img,
.process__frame > video {
  display: block;
  width: 100%;
  height: clamp(430px, 66svh, 760px);
  object-fit: cover;
}
/* Le media de fond passe en noir et blanc adouci : il sert de decor au
   texte, pas de sujet. Le contraste est abaisse pour que les trois
   etapes restent lisibles sans avoir a assombrir davantage le voile. */
.process__media,
.process__frame > img,
.process__frame > video {
  filter: grayscale(1) contrast(.78) brightness(1.04);
}

/* Voile pour garder le texte lisible quel que soit le media */
.process__frame::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg,
    rgba(43, 23, 51, .72) 0%,
    rgba(43, 23, 51, .55) 46%,
    rgba(43, 23, 51, .28) 100%);
  z-index: 1;
}
.process__steps {
  position: absolute; inset: 0; z-index: 2;
  display: grid;
  align-content: center;
  gap: clamp(1.4rem, .8rem + 2vw, 2.6rem);
  padding: clamp(1.5rem, 4vw, 4rem) var(--gutter);
  color: var(--cream);
  --rule: var(--cream-faint);
}
.step {
  display: grid;
  gap: .45rem;
  max-width: 344px;
  margin-left: clamp(0px, 30vw, 430px);
  padding-top: 1rem;
  border-top: 1px solid var(--cream-faint);
}
.step__num {
  color: var(--accent);
  font-family: var(--font-tight);
  font-weight: 500;
  font-size: var(--t-small);
  letter-spacing: .1em;
  color: var(--cream-soft);
}
.step__title {
  font-family: var(--font-tight);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: -.02em;
  font-size: clamp(1.05rem, .9rem + .7vw, 1.6rem);
  line-height: 1.05;
}
.step__text { color: var(--cream-mid); font-size: var(--t-small); }
.step__title .step__num { color: var(--accent); }

/* -------------------------------------------------------------------------
   12. TEMOIGNAGES
   ------------------------------------------------------------------------- */
.quotes { display: grid; gap: clamp(2rem, 1rem + 3vw, 4rem); }
.quote {
  display: grid;
  grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr);
  gap: var(--gap);
  align-items: end;
  padding-bottom: clamp(1.5rem, 1rem + 2vw, 3rem);
  border-bottom: 1px solid var(--rule);
}
.quote__text {
  font-family: var(--font-tight);
  font-weight: 500;
  font-size: clamp(1.05rem, .85rem + 1.1vw, 2rem);
  line-height: 1.18;
  letter-spacing: -.02em;
  text-transform: uppercase;
  text-wrap: pretty;
}
.quote__who { text-align: right; }
.quote__who strong { font-family: var(--font-tight); font-weight: 500; display: block; }
.quote__who span { font-size: var(--t-small); color: var(--fg-mid); }

/* -------------------------------------------------------------------------
   13. PARCOURS
   ------------------------------------------------------------------------- */
.xp { width: 100%; table-layout: fixed; }
.xp th:nth-child(1), .xp td:nth-child(1) { width: 26%; }
.xp th:nth-child(2), .xp td:nth-child(2) { width: 20%; }
.xp th:nth-child(3), .xp td:nth-child(3) { width: 12%; }
.xp th:nth-child(4), .xp td:nth-child(4) { width: 42%; padding-left: var(--gap); }
.xp th {
  text-align: left;
  font-family: var(--font-tight);
  font-size: var(--t-small);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--fg-mid);
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--rule);
}
.xp td {
  padding-block: clamp(1rem, .6rem + 1.4vw, 1.9rem);
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
  font-family: var(--font-tight);
  font-size: var(--t-small);
  text-transform: uppercase;
  letter-spacing: .02em;
}
.xp td:first-child { font-size: var(--t-body); font-weight: 500; padding-right: var(--gap); }
.xp td:last-child { color: var(--fg-mid); text-transform: none; letter-spacing: 0; font-family: var(--font-body); }
.xp tbody tr { transition: opacity .3s var(--ease); }
.xp tbody:hover tr { opacity: .45; }
.xp tbody:hover tr:hover { opacity: 1; }

/* -------------------------------------------------------------------------
   14. JOURNAL
   ------------------------------------------------------------------------- */
.posts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 var(--gap); }
.post {
  display: grid;
  gap: .55rem;
  padding-block: clamp(1.3rem, .8rem + 1.8vw, 2.4rem);
  border-top: 1px solid var(--rule);
  align-content: start;
}
.post__date { font-family: var(--font-tight); font-size: var(--t-micro); letter-spacing: .1em; color: var(--fg-soft); }
.post__title {
  font-family: var(--font-tight);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: -.02em;
  font-size: clamp(1rem, .85rem + .7vw, 1.5rem);
  line-height: 1.1;
  max-width: 26ch;
}
.post__excerpt { color: var(--fg-mid); font-size: var(--t-small); max-width: 48ch; }
.post__soon {
  font-family: var(--font-tight);
  font-size: var(--t-micro);
  letter-spacing: .1em;
  border-radius: 100px;
  padding: .25em .8em;
  justify-self: start;
  background: var(--accent);
  color: var(--accent-ink);
}

/* -------------------------------------------------------------------------
   15. FAQ
   ------------------------------------------------------------------------- */
.faq { border-top: 1px solid var(--rule); }
.faq__item { border-bottom: 1px solid var(--rule); }
.faq__q {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--gap);
  text-align: left;
  padding-block: clamp(1.1rem, .7rem + 1.4vw, 1.9rem);
  font-family: var(--font-tight);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: -.01em;
  font-size: clamp(1rem, .85rem + .65vw, 1.45rem);
  line-height: 1.15;
  transition: padding-inline .4s var(--ease);
}
.faq__q:hover { padding-inline: .6rem; }
.faq__sign { flex: none; width: 1em; height: 1em; position: relative; }
.faq__sign::before, .faq__sign::after {
  content: ""; position: absolute; inset: 50% 0 auto 0; height: 1px; background: currentColor;
  transition: transform .4s var(--ease), opacity .4s var(--ease);
}
.faq__sign::after { transform: rotate(90deg); }
.faq__item.open .faq__sign::after { transform: rotate(0); opacity: 0; }
.faq__item.open .faq__sign::before { background: var(--accent); height: 3px; }
.faq__item.open .faq__q { color: var(--fg); }
.faq__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .5s var(--ease);
}
.faq__item.open .faq__a { grid-template-rows: 1fr; }
.faq__a > div { overflow: hidden; }
.faq__a p { max-width: 70ch; color: var(--fg-mid); padding-bottom: clamp(1.1rem, .7rem + 1.4vw, 1.9rem); }

/* -------------------------------------------------------------------------
   16. APPEL A L'ACTION
   ------------------------------------------------------------------------- */
.cta { text-align: center; display: grid; gap: clamp(1.5rem, 1rem + 2vw, 2.75rem); justify-items: center; }
.cta__year { font-family: var(--font-display); font-size: clamp(3rem, 1rem + 8vw, 8rem); line-height: .8; color: var(--accent); }
.cta .statement { max-width: 20ch; text-align: center; }

/* L'appel a l'action n'est plus une petite pastille : un mot geant en
   jaune sur la prune, suivi d'une fleche a la meme echelle. */
.cta .btn {
  border: 0;
  padding: 0;
  gap: clamp(.6rem, 2vw, 2rem);
  color: var(--accent);
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 1rem + 7vw, 7rem);
  line-height: .85;
  letter-spacing: 0;
  text-transform: uppercase;
}
.cta .btn::after { font-size: .55em; transition: transform var(--dur) var(--ease); }
.cta .btn:hover { background: none; color: var(--accent); opacity: .65; }
.cta .btn:hover::after { transform: translate(10px, -10px); }

/* -------------------------------------------------------------------------
   17. CONTACT
   ------------------------------------------------------------------------- */
.contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 1rem + 4vw, 6rem);
  align-items: start;
  padding-top: clamp(1.5rem, 1rem + 2.5vw, 3.5rem);
  border-top: 1px solid var(--rule);
}
.contact__col h3 {
  font-family: var(--font-tight);
  font-size: var(--t-micro);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--fg-soft);
  margin-bottom: clamp(1rem, 2vw, 1.75rem);
}
.contact__list { display: grid; gap: .55rem; }
.contact__list a {
  font-family: var(--font-tight);
  font-weight: 500;
  font-size: clamp(1.05rem, .9rem + .7vw, 1.6rem);
  letter-spacing: -.02em;
  transition: opacity .3s var(--ease);
}
.contact__list a:hover { opacity: .55; }

/* Formulaire : intitule a gauche, champ a droite, filets fins */
.form { display: grid; gap: 0; }
.form__row {
  display: grid;
  grid-template-columns: minmax(80px, .28fr) 1fr;
  align-items: center;
  gap: var(--gap);
  padding-block: .85rem;
  border-bottom: 1px solid var(--rule);
}
.form label {
  font-family: var(--font-tight);
  font-size: var(--t-small);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--fg-mid);
}
.form input, .form textarea, .form select {
  font: inherit;
  font-family: var(--font-tight);
  font-size: var(--t-body);
  color: inherit;
  background: transparent;
  border: 0;
  padding: 0;
  border-radius: 0;
  width: 100%;
}
.form input::placeholder, .form textarea::placeholder { color: var(--fg-soft); }
.form input:focus, .form textarea:focus, .form select:focus { outline: none; }
.form__row:focus-within { border-bottom-color: currentColor; }
.form textarea { resize: vertical; min-height: 3em; line-height: 1.4; }
.form select { appearance: none; cursor: pointer; }
.form__foot {
  display: flex; flex-wrap: wrap; gap: var(--gap);
  align-items: center; justify-content: space-between;
  padding-top: clamp(1.25rem, 2.5vw, 2rem);
}
.form__note { font-size: var(--t-micro); color: var(--fg-soft); }
/* Champ piege a robots : invisible pour les humains */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* -------------------------------------------------------------------------
   18. PIED DE PAGE
   ------------------------------------------------------------------------- */
.footer { padding-block: clamp(3rem, 2rem + 4vw, 6rem) clamp(1.5rem, 1rem + 2vw, 2.5rem); }
.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.75rem, 1rem + 3vw, 4rem);
  padding-bottom: clamp(2rem, 1rem + 3vw, 4rem);
}
.footer__bio { max-width: 58ch; color: var(--fg-mid); font-size: var(--t-small); }
.footer__col h3 {
  font-family: var(--font-tight);
  font-size: var(--t-micro);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--fg-soft);
  margin-bottom: 1rem;
}
.footer__col li + li { margin-top: .5rem; }
.footer__col a { font-family: var(--font-tight); font-size: var(--t-small); text-transform: uppercase; letter-spacing: .03em; }
.footer__col a:hover { opacity: .6; }
.footer__bottom {
  display: flex; flex-wrap: wrap; gap: var(--gap); justify-content: space-between;
  padding-top: 1.5rem; border-top: 1px solid var(--rule);
  font-size: var(--t-micro); color: var(--fg-soft);
  font-family: var(--font-tight); letter-spacing: .04em; text-transform: uppercase;
}

/* -------------------------------------------------------------------------
   19. PAGE PROJET
   ------------------------------------------------------------------------- */
.page-head { padding-top: calc(var(--nav-h) + clamp(3rem, 6vw, 7rem)); padding-bottom: clamp(2rem, 1rem + 3vw, 4rem); }
.page-head .display--title {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 1rem + 8vw, 8.5rem);
  line-height: .82;
  margin-top: .4em;
}

.pj__hero { aspect-ratio: 16 / 9; overflow: hidden; background: var(--blue-faint); }
.pj__hero img, .pj__hero .ph { width: 100%; height: 100%; object-fit: cover; }

.pj__meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--gap);
  padding-block: clamp(1.75rem, 1rem + 2.5vw, 3rem);
  border-bottom: 1px solid var(--rule);
}
.pj__meta dt {
  font-family: var(--font-tight); font-size: var(--t-micro);
  text-transform: uppercase; letter-spacing: .1em; color: var(--fg-soft);
  margin-bottom: .45rem;
}
.pj__meta dd { margin: 0; font-family: var(--font-tight); font-size: var(--t-body); text-transform: uppercase; letter-spacing: -.01em; }

.pj__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
  gap: clamp(1.5rem, 1rem + 3vw, 5rem);
  padding-block: clamp(2.5rem, 1.5rem + 4vw, 6rem);
  align-items: start;
}

.pj__gallery { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gap); }
.pj__shot { grid-column: span 6; overflow: hidden; background: var(--blue-faint); cursor: zoom-in; }
.pj__shot:nth-child(3n + 1) { grid-column: span 12; aspect-ratio: 16 / 9; }
.pj__shot:nth-child(3n + 2),
.pj__shot:nth-child(3n + 3) { aspect-ratio: 4 / 5; }
.pj__shot img, .pj__shot .ph { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.pj__shot:hover img, .pj__shot:hover .ph { transform: scale(1.03); }

.pj__next {
  display: grid; gap: 1rem;
  padding-block: clamp(3rem, 2rem + 4vw, 6rem);
  border-top: 1px solid var(--rule);
  text-align: center; justify-items: center;
}
.pj__next .display--title { font-family: var(--font-display); font-size: clamp(2.2rem, 1rem + 6vw, 6rem); line-height: .85; transition: opacity .3s var(--ease); }
.pj__next a:hover .display--title { opacity: .55; }

/* -------------------------------------------------------------------------
   20. LIGHTBOX
   ------------------------------------------------------------------------- */
.lb {
  position: fixed; inset: 0; z-index: 200;
  background: color-mix(in srgb, var(--blue) 96%, black);
  display: grid; place-items: center;
  padding: clamp(1rem, 4vw, 4rem);
  opacity: 0; visibility: hidden;
  transition: opacity .4s var(--ease), visibility .4s;
}
.lb.open { opacity: 1; visibility: visible; }

/* Diaporama : un simple fondu. Le glissement et le changement d'echelle
   ont ete retires, ils rendaient le passage d'une image a l'autre agite. */
.lb__scene { position: relative; display: grid; place-items: center; width: 100%; height: 100%; }
.lb img {
  max-width: 100%; max-height: 86svh; object-fit: contain; width: auto;
  transition: opacity .42s cubic-bezier(.4, 0, .2, 1);
}
.lb img.sort--avant,
.lb img.sort--arriere,
.lb img.entre--avant,
.lb img.entre--arriere { opacity: 0; }

/* Vignettes de navigation sous l'image */
.lb__pistes {
  position: absolute; bottom: 3.2rem; left: 50%; transform: translateX(-50%);
  display: flex; gap: 6px; max-width: min(560px, 80vw); flex-wrap: wrap; justify-content: center;
}
.lb__piste {
  width: 26px; height: 3px; border: 0; padding: 0;
  background: var(--cream); opacity: .3;
  transition: opacity .3s var(--ease), background .3s var(--ease);
  cursor: pointer;
}
.lb__piste[aria-current="true"] { opacity: 1; background: var(--accent); }

/* Sur une page projet, les images de la galerie s'ouvrent au clic */
.pj__shot { cursor: zoom-in; }
.lb__close, .lb__prev, .lb__next {
  position: absolute; color: var(--cream);
  font-family: var(--font-tight); font-size: var(--t-small);
  text-transform: uppercase; letter-spacing: .08em;
  padding: .8rem 1.1rem;
}
.lb__close { top: 1rem; right: 1rem; color: var(--accent); }
.lb__prev { left: 1rem; top: 50%; transform: translateY(-50%); font-size: 1.6rem; }
.lb__next { right: 1rem; top: 50%; transform: translateY(-50%); font-size: 1.6rem; }
.lb__count { position: absolute; bottom: 1.2rem; left: 50%; transform: translateX(-50%); color: var(--cream-mid); font-family: var(--font-tight); font-size: var(--t-micro); letter-spacing: .1em; }

/* -------------------------------------------------------------------------
   21. PAGE 404
   ------------------------------------------------------------------------- */
.e404 { min-height: 100svh; display: grid; place-items: center; text-align: center; }
.e404 .display--title { font-family: var(--font-display); font-size: clamp(5rem, 2rem + 20vw, 18rem); line-height: .8; color: var(--accent); }

/* -------------------------------------------------------------------------
   22. RESPONSIVE
   ------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .about__grid { grid-template-columns: 1fr; }
  .quote { grid-template-columns: 1fr; align-items: start; }
  .quote__who { text-align: left; }
  .pj__body { grid-template-columns: 1fr; }
  .service { grid-template-columns: 1fr; }
  .service__num { order: -1; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__bio { grid-column: 1 / -1; }
}

@media (max-width: 860px) {
  :root { --nav-h: 60px; }

  /* Nav mobile */
  .nav__inner { grid-template-columns: 1fr auto; }
  /* Sur telephone il ne reste que la signature, la langue et le bouton
     menu. Les quatre liens vivent dans le panneau qui s'ouvre : les
     laisser aussi dans la barre poussait le bouton menu hors de l'ecran,
     23 px trop a droite sur un ecran de 375. */
  /* Safari iOS positionne les elements « fixed » par rapport a une zone
     dont le haut passe sous sa barre d'adresse : le sommet de la barre de
     navigation s'y trouvait masque, elle apparaissait coupee en deux.
     En « sticky » la barre reste dans le flux du document et ce decalage
     disparait. Le hero perd alors sa compensation, puisque la barre
     occupe desormais sa propre place. */
  .nav {
    position: sticky;
    inset: auto;
    /* --vv-haut vaut zero partout sauf sur Safari iOS, ou il reprend le
       decalage entre la zone visible et la zone de mise en page. Sans lui
       le haut de la barre se retrouve sous la barre d'adresse du
       navigateur quand celle-ci est repliee. Voir app.js, suivreZoneVisible. */
    top: var(--vv-haut, 0px);
  }
  .hero {
    padding-top: clamp(1rem, 3vh, 2.5rem);
    /* la barre occupe desormais sa propre hauteur au-dessus du hero */
    min-height: calc(100svh - var(--nav-h));
  }

  .nav__group--left { display: none; }
  .nav__group--right .nav__link { display: none; }
  .nav__brand { justify-self: start; }
  .nav__group--right { gap: .9rem; }
  .nav__toggle { display: block; padding: .35rem; }
  .nav__panel {
    position: fixed;
    inset: calc(var(--nav-h) + var(--vv-haut, 0px)) 0 auto 0;
    /* Le menu ouvert doit tenir dans la hauteur reellement visible, sinon
       ses derniers liens tombent hors de l'ecran. */
    max-height: calc(var(--vv-haut-utile, 100svh) - var(--nav-h));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: var(--bg); color: var(--fg);
    display: grid; gap: 1.1rem;
    padding: 2rem var(--gutter) 2.5rem;
    border-bottom: 1px solid var(--rule);
    /* Le panneau est un enfant de .nav, qui porte un z-index et forme donc
       un contexte d'empilement : le panneau se peint PAR-DESSUS la barre.
       Avec -110 % il ne sortait pas entierement de l'ecran. Sa hauteur
       etant de 258 px et son haut cale a 60 px, il en restait 34 px qui
       recouvraient la moitie haute de la barre, avec son fond opaque.
       C'est ce qui coupait la signature, la langue et le bouton menu.
       On le decale desormais de sa propre hauteur PLUS celle de la barre :
       son bord bas arrive exactement au sommet de l'ecran, jamais dessous.
       visibility acheve le travail : ferme, il ne peint plus rien. */
    transform: translateY(calc(-100% - var(--nav-h) - var(--vv-haut, 0px)));
    visibility: hidden;
    transition: transform .5s var(--ease), visibility 0s linear .5s;
    z-index: 99;
  }
  .nav.on-dark .nav__panel { background: var(--blue); color: var(--cream); }
  .nav__panel.open {
    transform: none;
    visibility: visible;
    transition: transform .5s var(--ease), visibility 0s;
  }
  .nav__panel a { font-family: var(--font-tight); font-weight: 500; text-transform: uppercase; font-size: 1.35rem; letter-spacing: -.02em; }
  .nav__toggle.open .nav__toggle-line:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  .nav__toggle.open .nav__toggle-line:nth-child(2) { opacity: 0; }
  .nav__toggle.open .nav__toggle-line:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

  .statement, .statement--wide { max-width: none; }
  .hero__meta { grid-template-columns: 1fr; gap: 1.5rem; }
  .hero__meta-block--r { text-align: left; justify-items: start; }
  .hero__meta-block--r .label::after { content: none; }
  .hero__meta-block--r .label::before { content: "\21B3"; }
  .about__top { grid-template-columns: 1fr; }
  .posts { grid-template-columns: 1fr; }
  .contact__grid { grid-template-columns: 1fr; }
  .form__row { grid-template-columns: 1fr; align-items: start; gap: .3rem; }

  /* Methode : le media passe en fond pleine hauteur, les etapes se suivent */
  .process__media,
  .process__frame > img,
  .process__frame > video { height: 100%; position: absolute; inset: 0; }
  .process__frame { display: grid; }
  .process__steps {
    position: relative; inset: auto;
    padding-block: clamp(2.5rem, 8vw, 4.5rem);
  }
  .process__frame::after {
    background: linear-gradient(180deg, rgba(43,23,51,.82) 0%, rgba(43,23,51,.62) 100%);
  }
  .step { margin-left: 0; max-width: none; }
  /* Sur deux colonnes, « Contexte » est la plus longue et se retrouve
     serree sur cinq lignes. Quand elle termine une rangee impaire, elle
     prend toute la largeur. */
  .pj__meta-large { grid-column: 1 / -1; }
  .card, .card:nth-child(n) { grid-column: 1 / -1; margin-top: 0; }
  /* La regle ci-dessous ne vise que l'ancienne grille en rangees. La
     mosaique gere ses propres colonnes plus haut et doit y echapper,
     sinon chaque image reprendrait toute la largeur. */
  .pj__gallery:not(.pj__gallery--mosaique) .pj__shot,
  .pj__gallery:not(.pj__gallery--mosaique) .pj__shot:nth-child(n) {
    grid-column: 1 / -1; aspect-ratio: 4 / 3;
  }
  .prose { text-align: left; }
  .xp thead { display: none; }
  /* Les largeurs de colonnes du grand ecran (26 / 20 / 12 / 42 %) restaient
     appliquees une fois la rangee passee en grille : chaque cellule gardait
     sa part etroite et le texte se brisait mot par mot dans le tiers gauche,
     le reste de la largeur vide. On les remet a plat, puis on redispose :
     l'employeur sur sa ligne, le poste a gauche et les annees a droite sur
     la meme ligne, la description en dessous sur toute la largeur.
     Le :nth-child(n) sert uniquement a egaler la specificite des regles
     ci-dessus, sans quoi elles l'emporteraient. */
  .xp tr {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: .3rem 1rem;
    padding-block: 1.3rem;
    border-bottom: 1px solid var(--rule);
  }
  .xp td, .xp td:nth-child(n) {
    width: auto;
    border: 0;
    padding: 0;
    grid-column: 1 / -1;
  }
  .xp td:nth-child(2) { grid-column: 1; }
  .xp td:nth-child(3) { grid-column: 2; text-align: right; white-space: nowrap; }
  .xp td:nth-child(4) { margin-top: .55rem; }
}

@media (max-width: 520px) {
  .hero__lede { font-size: 1rem; }
  .hero__portrait { width: 42vw; }
  .lb__prev, .lb__next { top: auto; bottom: 1rem; transform: none; }
  .lb__prev { left: 1.5rem; }
  .lb__next { right: 1.5rem; }
}

/* Impression */
@media print {
  .nav, .marquee, .lb, .cta { display: none !important; }
  body { background: #fff; color: #000; }
}