/* ============================================================
   PAGES PROJET — mise en page « planches » (préfixe .pj-)
   Ouverture noire plein écran (comme l'accueil), planches encadrées
   à composition asymétrique, pleins cadres photo, fin noire.
   Inter pour les titres et textes, IBM Plex Mono pour les légendes.
   S'utilise avec css/style.css (barre du haut, modale contact, .reveal).

   Thème du fond, au choix selon le projet (classe sur <body>) :
     pj pj--creme   crème (défaut)
     pj pj--blanc   blanc
     pj pj--ivoire  ivoire
     pj pj--noir    noir — pour les projets sombres
   ============================================================ */
.pj{
  --bg:#EFEBDF;
  --ink:#141414;
  --mute:#76726A;
  --line:rgba(20,20,20,.18);
  --hair:rgba(20,20,20,.07);
  --pad:clamp(16px,4vw,56px);
  --col:clamp(10px,1.6vw,24px);
  --gap:clamp(72px,9vw,140px);
  --mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
  margin:0;background:var(--bg);color:var(--ink);
  font-family:'Inter',-apple-system,Helvetica,Arial,sans-serif;
}
.pj--blanc{--bg:#FFFFFF;--mute:#7A7770;}
.pj--ivoire{--bg:#FAF8F1;--mute:#78746C;}
.pj--noir{--bg:#0B0B0B;--ink:#ECEAE4;--mute:#8C8981;--line:rgba(255,255,255,.16);--hair:rgba(255,255,255,.08);}
.pj *{box-sizing:border-box;}
.pj img{display:block;width:100%;height:auto;object-fit:initial;}
.pj figure{margin:0;}

/* révélation : simple fondu, très léger glissement */
.pj .reveal{transform:translateY(12px);transition-duration:1.4s;}

/* -------- typographie de base -------- */
.pj-label{font-size:10.5px;line-height:1.4;font-weight:500;letter-spacing:.09em;text-transform:uppercase;}
.pj-mono{font-family:var(--mono);font-size:11px;line-height:1.55;color:var(--mute);}
.pj-hand{margin:0;font-family:'La Belle Aurore',cursive;font-size:clamp(20px,1.8vw,26px);line-height:1;color:var(--mute);}

/* typo signature propre à chaque projet (classe sur <body>, en plus du thème) ;
   sans classe, La Belle Aurore. Corps réduits : une typo large prend bien plus de place qu'un script. */
.pj--sig-jaguar .pj-hand{font-family:'Archivo Expanded','Arial Black',sans-serif;font-style:italic;font-weight:800;font-size:clamp(12px,1.05vw,15px);line-height:1.15;letter-spacing:-.01em;}
.pj--sig-jaguar.pj--sym .sym-split .pj-hand{font-size:clamp(19px,1.85vw,27px);}
/* Encre & Peau : blackletter rouge encre (#B01C1C du fanzine, un peu éclairci pour rester lisible sur le noir) */
.pj--sig-encre .pj-hand{font-family:'Manufacturing Consent',serif;color:#C62828;font-size:clamp(21px,1.9vw,28px);line-height:1.1;}
.pj--sig-encre.pj--sym .sym-split .pj-hand{color:#C62828;font-size:clamp(32px,3.2vw,48px);line-height:.95;}
/* Solaris : sans large comme le wordmark, en SemiBold pour se détacher du texte, en bleu-vert lagon (#2E6E7E de la palette) */
.pj--sig-solaris .pj-hand{font-family:'Lexend Zetta',sans-serif;font-weight:600;color:#2E6E7E;font-size:clamp(11px,.95vw,14px);line-height:1.3;letter-spacing:-.02em;}
.pj--sig-solaris.pj--sym .sym-split .pj-hand{color:#2E6E7E;font-size:clamp(16px,1.5vw,22px);line-height:1.25;}
/* Beau Rivage : géométrique années 20, esprit Art déco Riviera du logo, en bleu du logo */
.pj--sig-beaurivage .pj-hand{font-family:'Josefin Sans',sans-serif;font-weight:700;color:#2268AE;font-size:clamp(14px,1.2vw,17px);line-height:1.2;letter-spacing:.01em;}
.pj--sig-beaurivage.pj--sym .sym-split .pj-hand,.pj--sig-beaurivage .sym-intro .pj-hand{color:#2268AE;font-size:clamp(22px,2.2vw,32px);line-height:1.1;}
/* Frigo 16 : linéale condensée massive comme le logo et les affiches, en jaune électrique */
.pj--sig-frigo .pj-hand{font-family:'Anton',Impact,sans-serif;font-weight:400;color:#F4C10F;font-size:clamp(15px,1.3vw,19px);line-height:1.1;letter-spacing:.01em;}
.pj--sig-frigo.pj--sym .sym-split .pj-hand{color:#F4C10F;font-size:clamp(28px,2.8vw,42px);line-height:1.05;}
/* Parfumerie Aubéry : serif de titrage du logo (Bellefair) ; or immortelle bruni (#7F5E1F) en petit pour rester lisible,
   or immortelle (#B88A35) en grand */
.pj--sig-aubery .pj-hand{font-family:'Bellefair',Georgia,serif;color:#7F5E1F;font-size:clamp(19px,1.7vw,24px);line-height:1.1;}
.pj--sig-aubery.pj--sym .sym-split .pj-hand,.pj--sig-aubery .sym-intro .pj-hand{color:#B88A35;font-size:clamp(34px,3.4vw,52px);line-height:1;}
/* Hraun : capitales très espacées du mot-symbole (Lexend Zetta ExtraLight), en vert lichen (#A6B4A0) sur le noir basalte */
.pj--sig-hraun .pj-hand{font-family:'Lexend Zetta',sans-serif;font-weight:200;text-transform:uppercase;letter-spacing:.16em;color:#A6B4A0;font-size:clamp(11px,.95vw,14px);line-height:1.3;}
.pj--sig-hraun.pj--sym .sym-split .pj-hand,.pj--sig-hraun .sym-intro .pj-hand{color:#A6B4A0;font-size:clamp(20px,2vw,30px);line-height:1.25;letter-spacing:.2em;}
/* Hôtel Rasperry Dolce : Didone de titrage (Bodoni Moda) en italique, en ocre (#7A5B0C), sur le Bianco calce de la charte (#F8F7F4) */
.pj--sig-rasperry{--bg:#F8F7F4;--ink:#0E1A22;--mute:#4C5963;}
.pj--sig-rasperry .pj-hand{font-family:'Bodoni Moda',Didot,serif;font-style:italic;font-weight:400;color:#7A5B0C;font-size:clamp(18px,1.6vw,23px);line-height:1.1;}
.pj--sig-rasperry.pj--sym .sym-split .pj-hand,.pj--sig-rasperry .sym-intro .pj-hand{color:#7A5B0C;font-size:clamp(34px,3.4vw,52px);line-height:1;}
/* Grain Bleu : grotesque condensée et grasse du logo (Bricolage Grotesque Bold, largeur 80 %), en cobalt (#2340D8),
   sur le Bleu pâle de la charte (#E4E9FF) — « Cobalt sur Bleu pâle », l'accent doux */
.pj--sig-grainbleu{--bg:#E4E9FF;--ink:#10131C;--mute:#566074;--line:rgba(16,19,28,.16);--hair:rgba(16,19,28,.08);}
.pj--sig-grainbleu .pj-hand{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-stretch:80%;color:#2340D8;font-size:clamp(17px,1.5vw,22px);line-height:1;letter-spacing:-.01em;}
.pj--sig-grainbleu.pj--sym .sym-split .pj-hand,.pj--sig-grainbleu .sym-intro .pj-hand{color:#2340D8;font-size:clamp(40px,4.2vw,64px);line-height:.92;letter-spacing:-.02em;}
/* Les Marées Noires : capitales du mot-symbole (Afacad Regular), en ivoire coquille (#F1EBDD) sur le noir abyssal mat de la charte (#171B1A),
   légendes en gris ostréicole (#A6A49B) */
.pj--sig-marees{--bg:#171B1A;--ink:#F1EBDD;--mute:#A6A49B;--line:rgba(241,235,221,.16);--hair:rgba(241,235,221,.09);}
.pj--sig-marees .pj-hand{font-family:'Afacad',sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:.02em;color:#F1EBDD;font-size:clamp(15px,1.3vw,19px);line-height:1.15;}
.pj--sig-marees.pj--sym .sym-split .pj-hand,.pj--sig-marees .sym-intro .pj-hand{color:#F1EBDD;font-size:clamp(30px,3vw,46px);line-height:1.02;letter-spacing:.01em;}
.pj-lede{margin:0;font-weight:300;font-size:clamp(21px,2.2vw,32px);line-height:1.3;letter-spacing:-.012em;}
.pj-text{margin:0;font-size:14px;line-height:1.65;max-width:36ch;}
.pj-text + .pj-hand{margin-top:22px;}
.pj-hand + .pj-text{margin-top:18px;}

/* ============ 00 — OUVERTURE (noir) ============ */
.pj-hero{position:relative;height:100svh;min-height:560px;overflow:hidden;background:#000;color:#fff;}
.pj-hero > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.pj-hero__tint{position:absolute;inset:0;background:rgba(0,0,0,.34);}
.pj-hero__in{
  position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:0 var(--pad);
}
.pj-hero__year{font-size:12px;letter-spacing:.08em;margin-bottom:14px;}
.pj-hero__title{margin:0 0 14px;font-weight:400;font-size:clamp(30px,4.6vw,64px);line-height:1.05;letter-spacing:.04em;text-transform:uppercase;}
.pj-hero__sub{font-size:clamp(11px,1vw,13px);letter-spacing:.14em;text-transform:uppercase;opacity:.9;}
.pj-hero__down{position:absolute;z-index:2;left:50%;bottom:28px;transform:translateX(-50%);text-align:center;color:#fff;}
.pj-tri{display:block;width:0;height:0;margin:8px auto 0;border-left:3px solid transparent;border-right:3px solid transparent;border-top:4px solid currentColor;}

/* ============ CONTENU ============ */
.pj-sheet{padding:0 var(--pad) var(--gap);}

/* ---- 01 — fiche ---- */
.pj-name{text-align:center;padding:clamp(64px,8vw,120px) 0 clamp(48px,6vw,90px);}
.pj-fiche{align-items:start;}
.pj-index{grid-column:1 / 4;margin:0;display:grid;grid-template-columns:auto 1fr;gap:6px 18px;}
.pj-index dt{font-family:var(--mono);font-size:11px;color:var(--mute);}
.pj-index dd{margin:0;font-size:12px;line-height:1.5;}
.pj-fiche .pj-lede{grid-column:5 / 12;}

/* ---- plein cadre : photo bord à bord, le moment d'immersion ---- */
.pj .pj-plate{margin:var(--gap) calc(-1 * var(--pad)) 0;}
.pj .pj-plate img{width:100%;height:clamp(340px,56vw,94vh);object-fit:cover;object-position:var(--focus,center);}
.pj-plate figcaption{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:10px var(--pad) 0;}
/* plein cadre montré en entier (mise à plat, objets jusqu'au bord) : format d'origine, limité à la hauteur de l'écran */
.pj .pj-plate--complet img{height:auto;width:auto;max-width:100%;max-height:94vh;margin:0 auto;}
/* plein cadre bord à bord sans recadrage (mockup composé jusqu'aux bords) : hauteur selon le format, à toutes les tailles d'écran */
.pj .pj-plate.pj-plate--format img{height:auto;}
/* plein cadre au format 16:9 strict, à toutes les tailles d'écran */
.pj .pj-plate.pj-plate--169 img{height:auto;aspect-ratio:16 / 9;}
/* plein cadre en diptyque : deux photos côte à côte, bord à bord */
.pj-plate__duo{display:grid;grid-template-columns:1fr 1fr;}

/* ---- planche : en-tête, composition, légendes (séparation à peine visible) ---- */
.pj-board{margin-top:var(--gap);}
.pj-board__head,.pj-board__foot{display:grid;grid-template-columns:1fr auto 1fr;align-items:baseline;gap:12px;}
.pj-board__head{padding-top:12px;border-top:1px solid var(--hair);}
.pj-board__foot{grid-template-columns:auto 1fr;padding-top:clamp(28px,3vw,44px);}
.pj-board__head .pj-label{text-align:center;}
.pj-board__head .pj-mono:last-child{text-align:right;}
.pj-board__body{padding-top:clamp(36px,5vw,72px);}
.pj-board__foot .pj-legend{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:4px 22px;}

/* grille 12 colonnes commune aux compositions */
.pj-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col);row-gap:clamp(28px,4vw,64px);}
.pj-cap{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-top:10px;}
.pj-cap--end{justify-content:flex-end;}
.pj-legend{list-style:none;margin:0;padding:0;}
.pj-grid .pj-txt{align-self:start;}

/* ---- 02 — univers ---- */
.pj-univ .u1{grid-column:1 / 7;grid-row:1 / 3;}
.pj-univ .pj-txt{grid-column:8 / 12;grid-row:1;}
.pj-univ .u2{grid-column:8 / 13;grid-row:2;align-self:end;}
.pj-univ .u3{grid-column:1 / 4;grid-row:3;}
.pj-univ .u4{grid-column:5 / 8;grid-row:3;margin-top:clamp(40px,6vw,96px);}
.pj-univ .u5{grid-column:9 / 13;grid-row:3;}

/* ---- 03 — atelier ---- */
.pj-atel .a1{grid-column:1 / 7;grid-row:1 / 3;}
.pj-atel .pj-txt{grid-column:8 / 12;grid-row:1;}
.pj-atel .a2{grid-column:8 / 13;grid-row:2;align-self:end;}
.pj-atel .a3{grid-column:3 / 6;grid-row:3;}
.pj-atel .a4{grid-column:8 / 11;grid-row:3;margin-top:clamp(40px,6vw,96px);}

/* ---- 04 — digital : le site défile dans une fenêtre de bureau (js/pages.js),
   calée à droite sur la grille (colonnes 2 à 12) ---- */
.pj-digi .pj-txt{grid-column:8 / 12;}
.pj .case-scroller{height:300vh;background:none;margin-top:clamp(12px,2vw,24px);}
.pj .case-scroller__sticky{--w:calc(100% - (100% - 11 * var(--col)) / 12 - var(--col));padding:clamp(24px,5vh,56px) 0;flex-direction:column;align-items:flex-end;gap:12px;}
.pj .case-scroller__frame{
  width:var(--w);height:min(78vh,820px);
  background:#fff;border:1px solid var(--line);border-radius:8px;
  box-shadow:0 50px 90px -60px rgba(30,24,10,.55);
}
.pj .case-scroller__bar{height:34px;background:#F4F2EE;border-bottom:1px solid #E6E3DD;}
.pj .case-scroller__bar > span:not(.case-scroller__hint){width:8px;height:8px;background:#D8D4CC;}
.pj .case-scroller__bar > .case-scroller__hint{width:auto;height:auto;border-radius:0;background:none;}
.pj .case-scroller__url{font-family:var(--mono);font-size:10.5px;letter-spacing:0;color:#9A958B;border-color:#E6E3DD;}
.pj .case-scroller__progress{height:1px;background:#E6E3DD;}
.pj .case-scroller__progress > span{background:#141414;}
.pj-scroller__cap{width:var(--w);display:flex;justify-content:space-between;gap:12px;}

/* ---- 05 — campagne (uniquement des mises en situation) ---- */
.pj-camp .c-a{grid-column:1 / 7;grid-row:1 / 3;}
.pj-camp .pj-txt{grid-column:8 / 12;grid-row:1;}
.pj-camp .c-b{grid-column:8 / 11;grid-row:2;align-self:end;}
.pj-camp .c-c{grid-column:1 / 6;grid-row:3;}
.pj-camp .c-d{grid-column:8 / 13;grid-row:3;margin-top:clamp(40px,6vw,96px);}
.pj-camp .c-e{grid-column:2 / 7;grid-row:4;}
.pj-camp .c-f{grid-column:9 / 13;grid-row:4;margin-top:clamp(60px,9vw,140px);}
/* packaging : deux images côte à côte, même format */
.pj-camp .c-pair{grid-column:1 / -1;grid-row:5;display:grid;grid-template-columns:1fr 1fr;column-gap:var(--col);}
.pj .pj-camp .c-pair img{aspect-ratio:4 / 3;object-fit:cover;}


/* ---- liseuse : feuilleter un document page à page (js/fanzine.js, classes .fz-*) ----
   Hauteur limitée à l'écran ; barre en pied comme les légendes des pleins cadres. */
.fz-book{width:min(100%,calc(78vh * 1679 / 1191));margin:0 auto;}
.fz-viewer{position:relative;background:#111;overflow:hidden;cursor:pointer;}
.fz-frame{position:relative;width:100%;aspect-ratio:1679 / 1191;overflow:hidden;}
.fz-track{display:flex;height:100%;transition:transform .62s cubic-bezier(.62,.02,.16,1);will-change:transform;}
.fz-slide{position:relative;flex:0 0 100%;height:100%;display:flex;align-items:center;justify-content:center;padding:clamp(10px,2.2vw,30px);}
.pj .fz-slide img{width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;box-shadow:0 14px 46px -14px rgba(0,0,0,.75);}
/* ombre de reliure (uniquement sur les doubles pages) */
.fz-spine{position:absolute;top:0;bottom:0;left:50%;width:16%;transform:translateX(-50%);pointer-events:none;z-index:3;opacity:0;transition:opacity .45s;background:radial-gradient(ellipse at center,rgba(0,0,0,.30),rgba(0,0,0,0) 72%);}
.fz-viewer.is-spread .fz-spine{opacity:1;}
.fz-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:5;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.35);background:rgba(10,10,10,.32);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);color:#fff;font-size:22px;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .25s,border-color .25s,opacity .25s;}
.fz-nav:hover{background:rgba(255,255,255,.16);border-color:#fff;}
.fz-prev{left:14px;}
.fz-next{right:14px;}
.fz-nav[disabled]{opacity:.22;cursor:default;pointer-events:none;}
.fz-bar{display:grid;grid-template-columns:1fr auto 1fr;align-items:baseline;gap:12px;padding-top:12px;}
.fz-bar .pj-hand{justify-self:end;}
.fz-cur{color:var(--ink);font-weight:400;}
.fz-dots{display:flex;gap:7px;align-self:center;}
.fz-dot{width:6px;height:6px;border-radius:50%;background:var(--line);border:none;cursor:pointer;padding:0;transition:background .25s,transform .25s;}
.fz-dot.is-on{background:var(--ink);transform:scale(1.3);}
@media (prefers-reduced-motion:reduce){.fz-track{transition:none;}}

/* ============ FIN : projet suivant (noir) puis pied de page (fond du projet) ============ */
/* pied de page léger : © / accueil / contact — prend la couleur du fond du projet (crème, blanc ou noir) */
.pj-foot{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;
  padding:26px var(--pad);background:var(--bg);color:var(--mute);
  font-size:10.5px;font-weight:500;letter-spacing:.09em;text-transform:uppercase;
}
.pj-foot a{color:var(--ink);transition:opacity .3s;}
.pj-foot a:hover{opacity:.6;}
.pj-foot a:last-child{justify-self:end;}

.pj-end{background:#000;color:#fff;}
.pj-next{display:block;position:relative;height:clamp(320px,31vw,460px);overflow:hidden;}
.pj .pj-next > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s ease;}
.pj-next:hover > img{transform:scale(1.04);}
.pj-next__tint{position:absolute;inset:0;background:rgba(0,0,0,.3);}
.pj-next__in{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;}
.pj-next__count{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:22px;opacity:.85;}
.pj-next__title{margin:0 0 8px;font-weight:400;font-size:clamp(22px,2.7vw,36px);letter-spacing:.04em;text-transform:uppercase;}
.pj-next__sub{font-size:clamp(13px,1.5vw,18px);letter-spacing:.06em;text-transform:uppercase;margin-bottom:22px;}
.pj-next__btn{display:flex;align-items:center;justify-content:center;width:98px;height:33px;border:1px solid rgba(255,255,255,.85);font-size:10px;letter-spacing:.14em;text-transform:uppercase;transition:background .3s,color .3s;}
.pj-next:hover .pj-next__btn{background:#fff;color:#000;}

/* ============ MOBILE ============ */
@media (max-width:768px){
  .pj{--gap:72px;}
  .pj-grid{grid-template-columns:repeat(6,minmax(0,1fr));row-gap:32px;}
  .pj-grid > *{grid-row:auto !important;margin-top:0 !important;}
  .pj-board__head .pj-mono:last-child{visibility:hidden;}
  .pj-board__foot{grid-template-columns:1fr;}
  .pj-board__foot .pj-legend{justify-content:flex-start;gap:2px 16px;}
  .pj-board__body{padding-top:28px;}

  .pj-index{grid-column:1 / -1;}
  .pj-fiche .pj-lede{grid-column:1 / -1;order:-1;}
  .pj-grid .pj-txt{grid-column:1 / -1 !important;order:-1;}

  /* une colonne, largeurs alternées pour garder le décalage */
  .pj-univ .u1,.pj-atel .a1,.pj-camp .c-a{grid-column:1 / 6;}
  .pj-univ .u2,.pj-atel .a2,.pj-camp .c-c{grid-column:1 / -1;}
  .pj-univ .u3,.pj-atel .a3,.pj-camp .c-b{grid-column:3 / 7;}
  .pj-univ .u4,.pj-atel .a4,.pj-camp .c-d{grid-column:1 / 5;}
  .pj-univ .u5,.pj-camp .c-e{grid-column:2 / 7;}
  .pj-camp .c-f{grid-column:1 / -1;}
  .pj-camp .c-pair{grid-template-columns:1fr;row-gap:24px;}

  .pj .pj-plate img{height:68vh;}
  /* plein cadre à montrer en entier sur mobile (objet large, ex. ordinateur) : format d'origine, pas de recadrage */
  .pj .pj-plate--entier img{height:auto;}
  .pj .case-scroller{height:240vh;}
  .pj .case-scroller__frame{height:70vh;}
  .pj .case-scroller__sticky{--w:100%;}
  .pj-foot{grid-template-columns:1fr auto;}
  .pj-foot span{grid-column:1 / -1;}
  .pj-foot a:nth-of-type(1){justify-self:start;}

  .fz-bar{grid-template-columns:1fr auto;}
  .fz-dots{display:none;}
  .fz-hint{display:none;}
}