/* ════════════════════════════════════════════════════════════════
   PAGES PROJET
   Couverture, récit épinglé (un temps = une image), citation,
   arbitrage, galerie en lightbox, projet suivant, repère de lecture.
   Le nombre de temps est libre : --n sur <body>, --i sur chaque temps.
   ════════════════════════════════════════════════════════════════ */

/* le repère de lecture vit hors de .story : la portée doit couvrir les deux */
:root{timeline-scope:--storyTL}

/* ───────── COUVERTURE ───────── */
.cover{min-height:100svh;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(2rem,5vw,4.5rem);align-items:center;padding-top:6rem;padding-bottom:3rem}
/* la couverture porte le même nom de transition que l'aperçu de l'accueil :
   l'image cliquée glisse et s'agrandit jusqu'ici */
/* chaque cadre prend la forme de son image (--ar, --arn posés par le générateur) : rien n'est rogné */
.cover__media{justify-self:end;width:min(100%,460px,calc(72svh * var(--arn,.8)));aspect-ratio:var(--ar,4/5);border-radius:var(--radius-lg);overflow:hidden;background:var(--surface);view-transition-name:project-cover}
.cover__media img{width:100%;height:100%;object-fit:cover;display:block}
@media(max-width:820px){
  .cover{grid-template-columns:1fr;min-height:0;padding-top:6.5rem}
  .cover__media{justify-self:start;width:min(100%,calc(62svh * var(--arn,1.33)))}
}
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    /* en quittant la couverture, l'image s'enfonce doucement dans son cadre */
    .cover__media img{animation:coverOut linear both;animation-timeline:view();animation-range:exit 0% exit 100%;animation-duration:auto}
    @keyframes coverOut{to{transform:scale(1.1) translateY(5%)}}
  }
}
/* les points sont dessinés avant chaque élément, dans l'espace qui le précède.
   Le bloc déborde de 1,8 rem à gauche et cette bande est découpée (clip-path) :
   le point d'un élément qui ouvre une ligne y tombe et disparaît */
.cover__meta{display:flex;flex-wrap:wrap;row-gap:.6rem;margin:0 0 1.4rem -1.8rem;clip-path:inset(-.5rem 0 -.5rem 1.8rem)}
.cover__meta span{position:relative;margin-left:1.8rem}
.cover__meta span::before{content:"·";position:absolute;left:-1.15rem}
.cover h1{font-size:clamp(3.2rem,9.5vw,8.8rem);line-height:.9;margin-bottom:1.2rem;view-transition-name:project-title}
.cover__lead{font-family:var(--font-serif);font-size:clamp(1.25rem,2.5vw,2rem);line-height:1.25;max-width:24ch;color:var(--muted)}
.cover__facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,9rem),1fr));gap:1.2rem 2rem;margin-top:clamp(2rem,5vw,3.5rem);padding-top:1.6rem;border-top:1px solid var(--line)}
.cover__facts span{display:block;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--soft);margin-bottom:.3rem}

/* ───────── RÉCIT ─────────
   Structure unique pour les deux modes : chaque temps porte SON image.
   • mode liste (mobile / pas de support) : les temps s'empilent
   • mode épinglé (desktop + scroll-driven) : superposés en grid, fondu enchaîné */
.story{position:relative}
.story__stick{padding-top:3rem;padding-bottom:3rem}
.beat{display:grid;gap:clamp(1.2rem,4vw,4rem);align-items:center;margin-bottom:3.5rem}
.beat__media{border-radius:var(--radius-lg);overflow:hidden;background:var(--surface);aspect-ratio:var(--ar,4/3);
  width:min(100%,calc(66svh * var(--arn,1.33)))}
.beat__media img{width:100%;height:100%;object-fit:cover;display:block}
.beat__k{display:block;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--accent-text);margin-bottom:.8rem}
.beat h2{font-family:var(--font-serif);font-weight:400;font-size:clamp(1.5rem,3.1vw,2.3rem);line-height:1.12;margin-bottom:.8rem;letter-spacing:-.02em}
.beat p{color:var(--muted);max-width:46ch}

@media(min-width:821px){
  @supports (animation-timeline: view()){
    @media (prefers-reduced-motion: no-preference){
      .story{height:calc(100svh + var(--n) * 65svh);view-timeline-name:--storyTL}
      .story__stick{position:sticky;top:0;height:100svh;display:grid;align-items:center;padding:0;overflow:hidden}
      .beats{display:grid}
      .beat{
        grid-area:1/1;grid-template-columns:1.05fr 1fr;margin:0;
        opacity:0;
        animation:beatFade linear both;
        animation-timeline:--storyTL;animation-duration:auto;
      }
      /* l'image garde ses proportions, centrée dans sa colonne */
      .beat__media{justify-self:center;width:min(100%,calc(72svh * var(--arn,.8)))}
      /* un léger zoom arrière accompagne la scène, sans rien rogner */
      .beat__media img{animation:parallax linear both;animation-timeline:--storyTL;
        animation-duration:auto;animation-range:contain 0% contain 100%}
      @keyframes parallax{from{transform:scale(1.05)}to{transform:none}}
      @keyframes beatFade{
        0%{opacity:0;transform:translateY(14px)}
        14%,86%{opacity:1;transform:none}
        100%{opacity:0;transform:translateY(-14px)}
      }
      /* chaque temps occupe sa part de la scène, avec un léger fondu enchaîné.
         --n (nombre de temps) est posé sur <body>, --i (rang) sur chaque temps */
      .beat{animation-range:contain calc(var(--i) * 100% / var(--n) - 3%) contain calc((var(--i) + 1) * 100% / var(--n) + 3%)}
      /* le premier temps est déjà là quand la scène arrive, le dernier reste jusqu'à ce qu'elle parte :
         jamais d'écran vide à l'entrée ni à la sortie du récit */
      .beat:first-child{animation-name:beatFirst}
      .beat:last-child{animation-name:beatLast}
      @keyframes beatFirst{0%,86%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-14px)}}
      @keyframes beatLast{0%{opacity:0;transform:translateY(14px)}14%,100%{opacity:1;transform:none}}
      body .repere{display:flex;opacity:0;
        animation:repVie linear both;animation-timeline:--storyTL;
        animation-duration:auto;animation-range:contain 0% contain 100%}
      @keyframes repVie{0%{opacity:0}3%,96%{opacity:1}100%{opacity:0}}
      .repere__barre i{animation:repBarre linear both;animation-timeline:--storyTL;animation-duration:auto;animation-range:contain 0% contain 100%}
      @keyframes repBarre{from{transform:scaleX(0)}to{transform:scaleX(1)}}
      .repere__lib{animation:repNom linear both;animation-timeline:--storyTL;animation-duration:auto}
      .repere__num b{animation:repNom linear both;animation-timeline:--storyTL;animation-duration:auto}
      @keyframes repNom{0%,100%{opacity:0}6%,94%{opacity:1}}
      /* les libellés du repère, eux, ne se chevauchent pas : ils se liraient l'un sur l'autre */
      .repere__lib,.repere__num b{animation-range:contain calc(var(--i) * 100% / var(--n)) contain calc((var(--i) + 1) * 100% / var(--n))}

    }
  }
}

/* ───────── GALERIE ───────── */
.gal{padding-top:clamp(3rem,8vh,6rem);padding-bottom:clamp(3rem,8vh,6rem)}
.gal__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:clamp(.8rem,2vw,1.4rem);margin-top:1.6rem;align-items:start}
.gal__grid figure{border-radius:var(--radius-lg);overflow:hidden;background:var(--surface)}
.zoom{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in;font:inherit}
.zoom:focus-visible{outline:2px solid var(--accent-text);outline-offset:3px}

/* ─── Lightbox : Popover API (Baseline 2026), aucun JavaScript ───
   le navigateur gère seul la fermeture au clic extérieur, la touche Échap,
   le retour du focus sur le déclencheur et les relations ARIA. */
.lightbox{
  /* inset:0 + margin:auto = centrage parfait quelle que soit la taille de l'image */
  position:fixed;inset:0;margin:auto;
  width:-moz-fit-content;width:fit-content;height:-moz-fit-content;height:fit-content;
  border:0;padding:0;background:none;overflow:visible;
  opacity:0;transform:scale(.94);
  transition:opacity .4s ease,transform .5s var(--ease),
             display .5s allow-discrete,overlay .5s allow-discrete;
}
.lightbox:popover-open{opacity:1;transform:scale(1)}
@starting-style{ .lightbox:popover-open{opacity:0;transform:scale(.94)} }
.lightbox img{
  display:block;width:auto;height:auto;
  max-width:92vw;max-height:86svh;
  border-radius:var(--radius);
  box-shadow:0 30px 80px rgb(0 0 0 / .28);
}
.lightbox::backdrop{
  background:color-mix(in srgb, var(--bg) 72%, transparent);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  transition:background-color .5s ease,display .5s allow-discrete,overlay .5s allow-discrete;
}
@starting-style{ .lightbox:popover-open::backdrop{background:transparent} }
.lightbox__close{
  position:fixed;top:1.3rem;right:1.3rem;z-index:1;
  background:none;border:1px solid var(--line);border-radius:999px;
  width:36px;height:36px;display:grid;place-items:center;cursor:pointer;
  color:var(--text);font-size:1.1rem;line-height:1;
  transition:border-color .3s var(--ease),color .3s var(--ease);background:var(--bg)
}
.lightbox__close:hover{border-color:var(--accent-text);color:var(--accent-text)}
/* passer d'une image à l'autre sans refermer */
.lightbox__nav{
  position:fixed;top:50%;translate:0 -50%;z-index:1;
  width:44px;height:44px;display:grid;place-items:center;cursor:pointer;
  border:1px solid var(--line);border-radius:999px;background:var(--bg);color:var(--text);
  font-size:1.5rem;line-height:1;padding:0 0 .15rem;
  transition:border-color .3s var(--ease),color .3s var(--ease)
}
.lightbox__nav--prec{left:1.3rem}
.lightbox__nav--suiv{right:1.3rem}
.lightbox__nav:hover,.lightbox__nav:focus-visible{border-color:var(--accent-text);color:var(--accent-text)}
.lightbox__compte{position:fixed;left:50%;bottom:1.1rem;translate:-50% 0;
  font-size:.72rem;letter-spacing:.16em;color:var(--muted);
  background:var(--bg);border-radius:999px;padding:.3rem .8rem}
@media(max-width:600px){.lightbox__nav{top:auto;bottom:.8rem;translate:none}}
@media (prefers-reduced-motion: reduce){
  .lightbox,.lightbox::backdrop{transition:none}
}
.gal__grid figure{aspect-ratio:var(--ar,4/5)}
.gal__grid img{width:100%;height:100%;display:block;object-fit:cover;transition:transform 1.1s var(--ease)}
.gal__grid figure:hover img{transform:scale(1.04)}

/* ───────── SUITE ─────────
   Le cas suivant arrive déjà à ses couleurs, avec sa couverture :
   au clic, l'image et le nom glissent jusqu'à la page suivante (projet.js). */
.next{padding-top:clamp(1rem,4vh,2.5rem);padding-bottom:3rem}
.suite{
  display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:stretch;
  min-height:clamp(340px,62svh,560px);overflow:hidden;
  border-radius:var(--radius-lg);text-decoration:none;
  background:var(--s-bg);color:var(--s-texte);
  /* un liseré, pour que la carte NŒUD ne se fonde pas dans un fond sombre */
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--s-texte) 14%,transparent);
}
.suite__txt{display:flex;flex-direction:column;justify-content:space-between;gap:2rem;padding:clamp(1.6rem,4vw,3.4rem)}
.suite__k{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--s-doux)}
.suite__nom{font-size:clamp(2.8rem,8vw,6.6rem);line-height:.92;letter-spacing:-.02em;margin-top:auto}
.suite__accroche{font-family:var(--font-serif);font-size:clamp(1.1rem,1.9vw,1.5rem);line-height:1.25;max-width:28ch;color:var(--s-doux)}
.suite__go{display:inline-flex;align-items:center;gap:.6rem;align-self:flex-start;
  font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
  border:1px solid currentColor;border-radius:999px;padding:.7rem 1.2rem}
.suite__go span{transition:transform .5s var(--ease)}
.suite__media{position:relative;overflow:hidden;background:color-mix(in srgb,var(--s-texte) 8%,var(--s-bg))}
.suite__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.suite:hover .suite__media img{transform:scale(1.05)}
.suite__media[data-entier] img{object-fit:contain;padding:clamp(1rem,3vw,2rem)}
.suite__media[data-entier]{background:color-mix(in srgb,var(--s-texte) 6%,var(--s-bg))}
.suite:hover .suite__go span{transform:translateX(5px)}
.suite:focus-visible{outline:2px solid var(--accent-text);outline-offset:4px}
@media(max-width:820px){
  .suite{grid-template-columns:1fr;min-height:0}
  .suite__media{order:-1;aspect-ratio:4/3}
  .suite__txt{gap:1.2rem}
}
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    /* la carte s'ouvre en arrivant, comme une porte qu'on pousse */
    html:not([data-resume]) .suite{animation:suiteOuvre linear both;animation-timeline:view();
      animation-range:entry 10% cover 45%;animation-duration:auto}
    @keyframes suiteOuvre{from{clip-path:inset(0 7% round 48px);transform:translateY(40px)}to{clip-path:inset(0 0 round var(--radius-lg));transform:none}}
    html:not([data-resume]) .suite__media img{animation:suiteImg linear both;animation-timeline:view();
      animation-range:entry 0% cover 60%;animation-duration:auto}
    @keyframes suiteImg{from{scale:1.18}to{scale:1}}
  }
}

/* ── l'arbitrage : le passage que les recruteurs cherchent ── */
.arb{padding-top:clamp(3rem,8vh,5.5rem);padding-bottom:clamp(3rem,8vh,5.5rem)}
.arb__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(1.4rem,4vw,3.5rem);align-items:start;margin-top:1.6rem}
.arb h2{font-family:var(--font-serif);font-weight:400;font-size:clamp(1.7rem,3.6vw,2.7rem);line-height:1.1;letter-spacing:-.02em;margin-top:.8rem;max-width:22ch}
.arb__col{border-top:2px solid var(--line);padding-top:1.2rem}
.arb__k{display:block;font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--soft);margin-bottom:.8rem}
.arb__col:last-child .arb__k{color:var(--accent-text)}
.arb__col p{color:var(--muted);max-width:48ch}
@media(max-width:820px){.arb__grid{grid-template-columns:1fr;gap:1.8rem}}

/* Repère de lecture : indique où l'on en est dans le récit.
   Les libellés sont empilés ; chacun s'affiche sur sa propre plage de scroll. */
.repere{
  position:fixed;left:var(--gutter);bottom:1.5rem;z-index:55;
  display:none;align-items:center;gap:.75rem;
  background:color-mix(in srgb, var(--bg) 86%, transparent);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:1px solid var(--line);border-radius:999px;
  padding:.45rem .95rem .45rem .6rem;
}
.repere__num{position:relative;display:inline-block;width:1.5em;height:1.15em;overflow:hidden;vertical-align:-.12em}
.repere__num b{position:absolute;inset:0;opacity:0;color:var(--accent-text);font-weight:400;text-align:right}
.repere__compte{
  font-family:var(--font-serif);font-size:.95rem;color:var(--soft);
  min-width:3.1rem;text-align:center
}
.repere__compte b{color:var(--accent-text);font-weight:400}
.repere__nom{position:relative;height:1.05rem;min-width:11rem;overflow:hidden}
.repere__saut{
  position:absolute;inset:0;display:flex;align-items:center;gap:3px;
  opacity:0;transition:opacity .25s ease;
  background:var(--bg)
}
.repere:hover .repere__saut,.repere:focus-within .repere__saut{opacity:1}
.repere:hover .repere__lib,.repere:focus-within .repere__lib{opacity:0!important}
.repere__saut button{
  flex:1;min-width:26px;height:22px;padding:0;cursor:pointer;
  background:none;border:1px solid var(--line);border-radius:5px;
  font:inherit;font-size:.62rem;color:var(--soft);
  transition:border-color .2s var(--ease),color .2s var(--ease)
}
.repere__saut button:hover,.repere__saut button:focus-visible{border-color:var(--accent-text);color:var(--accent-text)}
.repere__lib{
  position:absolute;inset:0;opacity:0;
  font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--text);
  white-space:nowrap;line-height:1.05rem
}
.repere__barre{width:44px;height:2px;background:var(--line);border-radius:2px;overflow:hidden}
.repere__barre i{display:block;height:100%;width:100%;background:var(--accent-text);transform-origin:0 50%;transform:scaleX(0)}
@media(max-width:880px){.repere{display:none!important}}

/* ═════════ LA PEAU DE LA MARQUE ═════════
   Le temps d'une étude de cas, le site prend les couleurs du projet :
   accent et fonds seulement, la typo et la mise en page restent les miennes.
   Contraste vérifié (AA) pour chaque accent, en clair comme en sombre. */
html[data-marque="comea"]{--bg:#f4f0e6;--surface:#ebe5d6;--surface-2:#e3dccb;--accent:#7a5c22;--accent-text:#7a5c22;--on-accent:#f4f0e6}
html[data-marque="comea"][data-theme=dark]{--bg:#1b1a17;--surface:#24221e;--surface-2:#2c2a25;--accent:#b8964f;--accent-text:#d2b06a;--on-accent:#1b1a17}
html[data-marque="mjc-jarville"]{--bg:#f6efe4;--surface:#eee3d2;--surface-2:#e7dac5;--accent:#9a4018;--accent-text:#9a4018;--on-accent:#f6efe4}
html[data-marque="mjc-jarville"][data-theme=dark]{--bg:#1d1916;--surface:#27211c;--surface-2:#2f2822;--accent:#e8895a;--accent-text:#e8895a;--on-accent:#1d1916}
html[data-marque="noeud"]{--bg:#ecebe8;--surface:#e2e1dd;--surface-2:#d9d8d3;--accent:#4d4b45;--accent-text:#4d4b45;--on-accent:#ecebe8}
html[data-marque="noeud"][data-theme=dark]{--bg:#141414;--surface:#1c1c1c;--surface-2:#242424;--accent:#8f8b82;--accent-text:#b9b5ab;--on-accent:#141414}
html[data-marque="origin-labs"]{--bg:#f2f4f5;--surface:#e7ebed;--surface-2:#dde3e6;--accent:#1d4f91;--accent-text:#1d4f91;--on-accent:#f2f4f5}
html[data-marque="origin-labs"][data-theme=dark]{--bg:#16191c;--surface:#1e2226;--surface-2:#262b30;--accent:#86ade6;--accent-text:#86ade6;--on-accent:#16191c}

/* En venant de l'accueil, la nouvelle page se déploie en cercle depuis le projet cliqué */
html[data-vt="marque"]::view-transition-old(root),
html[data-vt="marque"]::view-transition-new(root){animation:none;mix-blend-mode:normal}
html[data-vt="marque"]::view-transition-old(root){z-index:1}
html[data-vt="marque"]::view-transition-new(root){z-index:2}

/* ═════════ LE BRIEF EN 10 SECONDES ═════════
   Pour qui n'a pas le temps du récit : trois lignes, toujours au même endroit. */
.brief{padding-top:clamp(1rem,3vh,2rem);padding-bottom:clamp(3rem,8vh,5rem)}
.brief__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.2rem,3vw,2.6rem);margin-top:1.1rem}
.brief__item{border-top:2px solid var(--line);padding-top:1.1rem}
.brief__k{display:flex;gap:.7rem;align-items:baseline;font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--soft);margin-bottom:.7rem}
.brief__k b{font-family:var(--font-serif);font-weight:400;font-size:1rem;letter-spacing:0;color:var(--accent-text)}
.brief__txt{font-family:var(--font-serif);font-size:clamp(1.15rem,1.7vw,1.4rem);line-height:1.3;color:var(--text)}
@media(max-width:820px){.brief__grid{grid-template-columns:1fr;gap:1.4rem}}
.arb .vers-methode{margin-top:2.2rem}