/* PROJECTS
   Styles des deux gabarits de réalisations : l'index /projects et les pages
   /projects/<slug>. Fichier séparé de style.css parce que la page d'accueil
   n'a rien à faire de ces règles, et qu'elle est la page critique au chargement.
   Les variables de couleur, les polices, la barre de navigation, le pied de
   page et les deux faces du cube (.skills__cube-face) viennent de style.css,
   chargé avant celui-ci.
*/

/*
|--------------------------------------------------------------------------
| Communs aux deux gabarits
|--------------------------------------------------------------------------
*/

.work,
.project-page {
   background-color: var(--baby-powder);
   color: var(--charcoal);
   /* Les carrés et cubes de décor débordent volontairement du cadre : sans
      ça, ils élargiraient la page et ouvriraient un défilement horizontal. */
   overflow-x: hidden;
   overflow-x: clip;
}

.work__inner,
.pj__inner {
   max-width: 1180px;
   margin: 0 auto;
   padding-left: 60px;
   padding-right: 60px;
}

/* Intitulé de section. */
.pj-h2 {
   font-family: "Staatliches Regular", serif;
   font-size: clamp(30px, 3.6vw, 46px);
   line-height: 1.1;
   letter-spacing: -0.3px;
   margin-bottom: 28px;
}

.pj-h2 em {
   font-style: normal;
   color: var(--paradise-pink);
}

/* Méta en monospace : même registre que .about__eyebrow sur l'accueil. Pile
   système, donc aucun fichier de police en plus. */
.pj-meta dt,
.pj-kicker,
.pj-card__label,
.work-row__meta {
   font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
   font-size: 12px;
   letter-spacing: 1.6px;
   text-transform: uppercase;
}

/* Verre. Le fond translucide n'a de sens que posé sur une couleur : les
   sections qui portent des cartes de verre ont donc toutes un dégradé ou un
   carré derrière. Le liseré blanc en haut donne l'épaisseur du verre, l'ombre
   longue le décolle du fond. */
.pj-glass {
   position: relative;
   background: rgba(255, 255, 255, 0.46);
   -webkit-backdrop-filter: blur(20px) saturate(1.5);
   backdrop-filter: blur(20px) saturate(1.5);
   border: 1px solid rgba(255, 255, 255, 0.75);
   border-radius: 24px;
   box-shadow: 0 24px 60px rgba(47, 65, 87, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
   .pj-glass {
      background: rgba(255, 253, 249, 0.92);
   }
}

/* Boutons. Deux poids : rose plein pour l'action principale, contour pour la
   seconde. Le rayon de 50px est celui de tout ce qui se clique sur le site. */
.pj-btn {
   display: inline-flex;
   align-items: center;
   gap: 12px;
   padding: 16px 36px;
   border-radius: 50px;
   font-family: "Staatliches Regular", serif;
   font-size: 20px;
   letter-spacing: 2px;
   white-space: nowrap;
   transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease, color 0.3s ease;
}

.pj-btn span {
   transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.pj-btn:hover span {
   transform: translateX(6px);
}

.pj-btn:active {
   transform: translateY(1px);
}

.pj-btn:focus-visible {
   outline: 2px solid var(--paradise-pink);
   outline-offset: 4px;
}

.pj-btn--primary {
   background: var(--paradise-pink);
   color: #fff;
   box-shadow: 0 12px 32px rgba(233, 71, 103, 0.28);
}

.pj-btn--primary:hover {
   transform: translateY(-3px);
   box-shadow: 0 18px 44px rgba(233, 71, 103, 0.38);
}

.pj-btn--ghost {
   border: 2px solid var(--charcoal);
   color: var(--charcoal);
}

.pj-btn--ghost:hover {
   background: var(--charcoal);
   color: var(--baby-powder);
}

/* Décor de marque : le grand carré bleu pivoté et les cubes flous roses du
   hero de l'accueil. Posés en absolu, hors flux, sans interaction. */
.pj-square,
.pj-cube {
   position: absolute;
   pointer-events: none;
   will-change: transform;
}

.pj-square img,
.pj-cube img {
   display: block;
   width: 100%;
   height: auto;
}

/*
|--------------------------------------------------------------------------
| Index — hero
|--------------------------------------------------------------------------
| Texte à gauche, décor à droite. Rien ne sépare l'en-tête du corps : le
| dégradé s'éteint dans le fond de page sur le bas de la section, le carré
| bleu passe sous la première liste en se dissolvant, et les petits carrés de
| la palette franchissent la frontière au défilement.
*/

.work-hero {
   position: relative;
   z-index: 0;
   /* Un seul halo rose, elliptique, ancré à droite : il s'éteint de lui-même
      sur tous ses bords, dans le fond de page. Un dégradé linéaire recouvert
      d'un fondu vertical ramenait le rose à son maximum puis le rabattait au
      blanc : l'œil y lisait une ligne. */
   background:
      /* Rayon vertical réglé pour que le halo atteigne zéro avant le bas de
         la section : rien n'est tranché à la frontière. */
      radial-gradient(ellipse 78% 54% at 82% 42%,
         #f9d6dd 0%,
         rgba(249, 214, 221, 0.72) 28%,
         rgba(249, 214, 221, 0.32) 56%,
         rgba(249, 214, 221, 0) 100%),
      var(--baby-powder);
}

.work-hero__inner {
   position: relative;
   z-index: 1;
   /* 170px : les 70px de barre fixe, plus la respiration retenue sur /contact. */
   padding-top: 170px;
   padding-bottom: 120px;
}

/* Le décor déborde de la moitié d'un écran sous le hero : c'est lui qui fait
   la liaison avec la liste. Le rognage n'est que latéral, porté par <main>. */
.work-hero__decor {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: -55vh;
   z-index: 0;
   pointer-events: none;
}

/* Le carré bleu ancré à droite, à cheval sur la frontière : son bas se
   dissout par un masque, si bien qu'il s'efface sous les premières lignes
   au lieu d'être tranché. Assez pâle pour passer derrière le texte. */
.work-hero .pj-square {
   right: -14vw;
   top: 38%;
   width: clamp(440px, 52vw, 900px);
   opacity: 0.55;
   -webkit-mask-image: linear-gradient(to bottom, #000 30%, rgba(0, 0, 0, 0) 78%);
   mask-image: linear-gradient(to bottom, #000 30%, rgba(0, 0, 0, 0) 78%);
}

/* Les cubes flous restent dans la moitié droite : la colonne de texte ne
   les atteint jamais, quelle que soit la largeur de fenêtre. */
.work-hero__cube--1 {
   width: clamp(150px, 17vw, 250px);
   top: 14%;
   right: 12%;
}

.work-hero__cube--2 {
   width: clamp(70px, 8vw, 110px);
   top: 44%;
   right: 36%;
}

.work-hero__cube--3 {
   width: clamp(100px, 11vw, 165px);
   top: 50%;
   right: 2%;
}

.work-hero__title {
   font-family: "Staatliches Regular", serif;
   font-size: clamp(38px, 5.6vw, 78px);
   line-height: 1.06;
   letter-spacing: -0.5px;
   /* 30ch : la phrase tient sur deux lignes en desktop, trois au plus. */
   max-width: 30ch;
   margin-bottom: 36px;
}

.work-hero__title em {
   font-style: normal;
   color: var(--paradise-pink);
}

.work-hero__lead {
   font-family: "Comfortaa Regular", serif;
   font-size: 16px;
   line-height: 1.85;
   color: rgba(47, 65, 87, 0.72);
   max-width: 46ch;
}

/*
|--------------------------------------------------------------------------
| Carrés de la palette
|--------------------------------------------------------------------------
| Le marqueur des lignes (.work-row__mark), agrandi et semé dans les décors :
| les trois couleurs du site, une inclinaison propre à chacun. Placés en
| pourcentage du décor (--x, --y), ils peuvent dépasser 100 % pour tomber
| dans la section suivante. Le script les fait dériver au défilement à des
| vitesses différentes (data-speed) : c'est ce mouvement qui coud les
| sections entre elles.
*/

.work-chip {
   position: absolute;
   left: var(--x);
   top: var(--y);
   width: var(--s);
   height: var(--s);
   border-radius: calc(var(--s) / 5);
   transform: rotate(var(--tilt, 0deg));
   pointer-events: none;
   will-change: transform;
}

.work-chip--pink {
   background: var(--paradise-pink);
   opacity: 0.55;
}

.work-chip--cherry {
   background: var(--cherry-blossom-pink);
   opacity: 0.7;
}

.work-chip--charcoal {
   background: var(--charcoal);
   opacity: 0.22;
}

/*
|--------------------------------------------------------------------------
| Index — les deux familles
|--------------------------------------------------------------------------
| « Projets » d'un côté, « Lab » de l'autre. L'intertitre porte la distinction
| à lui seul : les deux listes sont identiques, et la numérotation repart à 01
| dans chacune.
*/

.work-group {
   position: relative;
   z-index: 1;
   padding-top: 48px;
}

.work-group + .work-group {
   padding-top: 28px;
}

.work-group__head {
   /* Aligné sur la première ligne de la liste qui suit, pas centré : le regard
      descend le long du même bord que les numéros de projet. */
   max-width: 46ch;
   margin-bottom: 28px;
}

.work-group__title {
   font-family: "Staatliches Regular", serif;
   font-size: clamp(30px, 3.6vw, 46px);
   line-height: 1.1;
   letter-spacing: -0.3px;
   margin-bottom: 16px;
}

.work-group__lead {
   font-family: "Comfortaa Regular", serif;
   font-size: 15px;
   line-height: 1.8;
   color: rgba(47, 65, 87, 0.72);
}

/*
|--------------------------------------------------------------------------
| Index — la liste
|--------------------------------------------------------------------------
| Une ligne par projet. Un seul filet, sous chaque ligne sauf la dernière.
*/

.work-list {
   border-top: 1px solid rgba(47, 65, 87, 0.16);
   padding-bottom: 20px;
}

.work-row {
   border-bottom: 1px solid rgba(47, 65, 87, 0.16);
}

.work-row__link {
   position: relative;
   display: grid;
   grid-template-columns: 34px minmax(0, 1fr) 250px 40px;
   align-items: center;
   gap: 24px;
   padding: 28px 0;
   color: inherit;
}

/* Marqueur de ligne : le petit carré pivoté du logo, rose pâle au repos et
   rose vif au survol. Il remplace le numéro, qui n'apportait rien. */
.work-row__mark {
   display: block;
   width: 12px;
   height: 12px;
   border-radius: 3px;
   background: var(--cherry-blossom-pink);
   transform: rotate(14deg);
   transition: background-color 0.25s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.work-row__link:hover .work-row__mark {
   background: var(--paradise-pink);
   transform: rotate(104deg);
}

/* Le filet rose se dessine de la gauche vers la droite au survol. */
.work-row__link::after {
   content: "";
   position: absolute;
   left: 0;
   bottom: -1px;
   height: 1px;
   width: 0;
   background: var(--paradise-pink);
   transition: width 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.work-row__link:hover::after,
.work-row__link:focus-visible::after {
   width: 100%;
}

.work-row__link:focus-visible {
   outline: 2px solid var(--paradise-pink);
   outline-offset: 4px;
}

.work-row__body {
   min-width: 0;
}

.work-row__title {
   font-family: "Staatliches Regular", serif;
   font-size: clamp(26px, 3vw, 40px);
   line-height: 1.08;
   margin-bottom: 8px;
   transition: color 0.25s ease;
}

.work-row__link:hover .work-row__title {
   color: var(--paradise-pink);
}

.work-row__summary {
   display: block;
   font-family: "Comfortaa Regular", serif;
   font-size: 13px;
   line-height: 1.65;
   color: rgba(47, 65, 87, 0.6);
   max-width: 52ch;
}

.work-row__meta {
   text-align: right;
   color: rgba(47, 65, 87, 0.45);
   line-height: 1.7;
}

.work-row__go {
   justify-self: end;
   font-size: 22px;
   color: rgba(47, 65, 87, 0.3);
   transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), color 0.25s ease;
}

.work-row__link:hover .work-row__go {
   transform: translateX(7px);
   color: var(--paradise-pink);
}

/*
|--------------------------------------------------------------------------
| Index — visuel suiveur
|--------------------------------------------------------------------------
*/

.work-cursor {
   position: fixed;
   border: 1px solid rgba(255, 255, 255, 0.7);
   top: 0;
   left: 0;
   z-index: 50;
   width: 340px;
   aspect-ratio: 1440 / 740;
   border-radius: 24px;
   overflow: hidden;
   pointer-events: none;
   opacity: 0;
   visibility: hidden;
   box-shadow: 0 24px 60px rgba(47, 65, 87, 0.22);
}

.work-cursor img {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
   opacity: 0;
}

/*
|--------------------------------------------------------------------------
| Page projet — hero
|--------------------------------------------------------------------------
| Texte à gauche, capture à droite dans un cadre de verre posé sur le carré
| bleu. Le conteneur est plus large que le reste de la page pour que la
| capture garde une taille lisible à côté du titre.
*/

.pj-hero {
   position: relative;
   z-index: 0;
   /* Un seul halo rose, elliptique, ancré sur la capture : il s'éteint de
      lui-même dans le fond de page avant le bas de la section. Un dégradé
      linéaire finissait plein rose sur la frontière avec la barre méta, et
      l'œil y lisait une ligne. */
   background:
      radial-gradient(ellipse 72% 58% at 78% 36%,
         #f7cbd4 0%,
         rgba(247, 203, 212, 0.7) 30%,
         rgba(247, 203, 212, 0.3) 60%,
         rgba(247, 203, 212, 0) 100%),
      var(--baby-powder);
   padding-bottom: 90px;
}

/* Le décor déborde sous le hero : le carré bleu passe sous la barre méta et
   se dissout avant le bandeau, au lieu d'être tranché au bas de la section.
   Le rognage n'est que latéral, porté par <main>. */
.pj-hero__decor {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: -40vh;
   z-index: 0;
   pointer-events: none;
}

.pj-hero .pj-square {
   right: -14vw;
   top: 34%;
   width: clamp(560px, 64vw, 1100px);
   -webkit-mask-image: linear-gradient(to bottom, #000 22%, rgba(0, 0, 0, 0) 58%);
   mask-image: linear-gradient(to bottom, #000 22%, rgba(0, 0, 0, 0) 58%);
}

.pj-hero__cube--1 {
   width: clamp(140px, 16vw, 260px);
   top: 15%;
   right: 40%;
}

.pj-hero__cube--2 {
   width: clamp(60px, 7vw, 110px);
   top: 62%;
   left: 42%;
}

.pj-hero__inner {
   position: relative;
   z-index: 1;
   max-width: 1320px;
   margin: 0 auto;
   padding: 160px 60px 0;
   display: grid;
   grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
   gap: 60px;
   align-items: end;
}

.pj-hero__text {
   padding-bottom: 40px;
}

.pj-back {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
   font-size: 12px;
   letter-spacing: 2px;
   text-transform: uppercase;
   color: rgba(47, 65, 87, 0.5);
   margin-bottom: 44px;
   transition: color 0.25s ease;
}

.pj-back span {
   transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.pj-back:hover {
   color: var(--paradise-pink);
}

.pj-back:hover span {
   transform: translateX(-6px);
}

.pj-kicker {
   color: var(--paradise-pink);
   margin-bottom: 18px;
}

.pj-title {
   font-family: "Staatliches Regular", serif;
   font-size: clamp(52px, 8vw, 128px);
   line-height: 0.94;
   letter-spacing: -1.5px;
   margin-bottom: 22px;
   overflow-wrap: anywhere;
}

.pj-tagline {
   font-family: "Comfortaa Regular", serif;
   font-size: clamp(16px, 1.5vw, 20px);
   line-height: 1.7;
   color: rgba(47, 65, 87, 0.78);
   max-width: 40ch;
   margin-bottom: 38px;
}

.pj-hero__actions {
   display: flex;
   flex-wrap: wrap;
   gap: 14px;
}

/* Visuel principal, dans son cadre de verre. */
.pj-cover {
   margin: 0;
   transform-origin: center bottom;
}

/* L'image remplit le cadre : il n'en reste que le liseré et l'ombre. Une
   marge blanche de douze pixels faisait une grosse bordure autour de chaque
   capture. */
.pj-cover__frame {
   padding: 0;
   border-radius: 24px;
   overflow: hidden;
}

.pj-cover__frame img {
   display: block;
   width: 100%;
   height: auto;
   border-radius: inherit;
}

/* Barre méta : à cheval sur le bas du hero. */
.pj-meta-wrap {
   position: relative;
   z-index: 2;
   margin-top: -46px;
}

.pj-meta {
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
   gap: 28px;
   padding: 28px 36px;
}

.pj-meta dt {
   color: rgba(47, 65, 87, 0.45);
   margin-bottom: 8px;
}

.pj-meta dd {
   font-family: "Comfortaa Regular", serif;
   font-size: 14px;
   line-height: 1.6;
   color: var(--charcoal);
}

.pj-meta dd a {
   color: var(--paradise-pink);
   border-bottom: 1px solid rgba(233, 71, 103, 0.35);
   transition: border-color 0.25s ease;
}

.pj-meta dd a:hover {
   border-color: var(--paradise-pink);
}

/*
|--------------------------------------------------------------------------
| Page projet — bandeau de points clés
|--------------------------------------------------------------------------
| Une bande charcoal qui défile sans fin. Les items sont écrits deux fois dans
| le balisage : la piste glisse d'exactement la moitié de sa largeur, et la
| seconde copie prend la place de la première sans raccord visible. L'écart
| est porté par une marge sur chaque item et non par un `gap`, sinon la
| moitié ne tomberait pas juste.
*/

.pj-marquee {
   /* Au-dessus du carré bleu du hero, qui déborde jusqu'ici en se dissolvant. */
   position: relative;
   z-index: 1;
   overflow: hidden;
   background: var(--charcoal);
   padding: 22px 0;
   margin-top: 80px;
}

.pj-marquee__track {
   display: flex;
   width: max-content;
   animation: pj-marquee 42s linear infinite;
}

.pj-marquee__track span {
   display: inline-flex;
   align-items: center;
   margin-right: 48px;
   font-family: "Staatliches Regular", serif;
   font-size: 26px;
   letter-spacing: 2px;
   color: var(--baby-powder);
   white-space: nowrap;
}

.pj-marquee__track span::after {
   content: "";
   display: block;
   width: 12px;
   height: 12px;
   margin-left: 48px;
   border-radius: 3px;
   background: var(--paradise-pink);
   transform: rotate(14deg);
}

@keyframes pj-marquee {
   to {
      transform: translateX(-50%);
   }
}

/*
|--------------------------------------------------------------------------
| Page projet — l'idée
|--------------------------------------------------------------------------
| Un seul paragraphe, en grand, révélé mot à mot au défilement.
*/

.pj-idea {
   position: relative;
   z-index: 1;
   padding: 140px 0 120px;
}

.pj-idea__text {
   font-family: "Comfortaa Regular", serif;
   font-size: clamp(21px, 2.5vw, 34px);
   line-height: 1.5;
   color: var(--charcoal);
   max-width: 1000px;
   margin-left: 12%;
}

.pj-word {
   display: inline-block;
}

/*
|--------------------------------------------------------------------------
| Page projet — points clés (bento)
|--------------------------------------------------------------------------
| Quatre colonnes sur deux rangs : la carte principale occupe 2×2, les quatre
| autres une cellule chacune. 4 + 4 = 8 cellules pour une grille de 8, sans
| trou. `dense` remplit ce qui resterait si une carte manquait.
*/

.pj-keys {
   position: relative;
   z-index: 0;
   padding: 120px 0 140px;
}

/* Deux halos, rose en haut à gauche et bleu en bas à droite, portés par un
   calque qui dépasse la section en haut et en bas. Chaque ellipse tient
   entièrement dans le calque et atteint zéro sur son propre bord : rien n'est
   tranché à l'entrée ni à la sortie de la section. */
.pj-keys::before {
   content: "";
   position: absolute;
   left: 0;
   right: 0;
   top: -220px;
   bottom: -220px;
   z-index: -1;
   pointer-events: none;
   background:
      radial-gradient(ellipse 62% 30% at 8% 30%,
         rgba(245, 172, 186, 0.55) 0%,
         rgba(245, 172, 186, 0.22) 45%,
         rgba(245, 172, 186, 0) 100%),
      radial-gradient(ellipse 54% 28% at 94% 72%,
         rgba(112, 163, 188, 0.38) 0%,
         rgba(112, 163, 188, 0.14) 45%,
         rgba(112, 163, 188, 0) 100%);
}

.pj-keys__inner {
   position: relative;
   z-index: 1;
}

/* Le cube à deux faces des compétences, dans le coin haut droit, tourne au
   fil du défilement de la section. */
.pj-keys__cube {
   position: absolute;
   top: 70px;
   right: 5%;
   width: clamp(150px, 15vw, 230px);
   aspect-ratio: 1;
   pointer-events: none;
   z-index: 0;
}

.pj-bento {
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
   grid-auto-rows: minmax(230px, auto);
   grid-auto-flow: dense;
   gap: 20px;
}

.pj-card {
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
   padding: 34px 32px;
   overflow: hidden;
   transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.6s ease;
}

.pj-card:hover {
   transform: translateY(-6px);
   box-shadow: 0 32px 70px rgba(47, 65, 87, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.pj-card__label {
   color: var(--paradise-pink);
   margin-bottom: 18px;
}

.pj-card__figure {
   font-family: "Staatliches Regular", serif;
   font-size: clamp(40px, 4.4vw, 64px);
   line-height: 1;
   color: var(--paradise-pink);
   margin-bottom: 12px;
}

.pj-card__figure--word {
   font-size: clamp(28px, 2.7vw, 40px);
   line-height: 1.05;
}

.pj-card__text {
   font-family: "Comfortaa Regular", serif;
   font-size: 14px;
   line-height: 1.75;
   color: rgba(47, 65, 87, 0.72);
}

/* Carte principale : le carré bleu devenu carte. */
.pj-card--lead {
   grid-column: span 2;
   grid-row: span 2;
   justify-content: space-between;
   background: linear-gradient(160deg, rgba(47, 65, 87, 0.97) 0%, rgba(47, 65, 87, 0.88) 100%);
   border-color: rgba(255, 255, 255, 0.18);
   color: var(--baby-powder);
}

/* Un halo rose dans l'angle haut droit, qui s'éteint avant les bords de la
   carte : un carré posé à cheval sur l'angle se faisait trancher par le
   rognage de la carte. */
.pj-card--lead::after {
   content: "";
   position: absolute;
   right: -120px;
   top: -120px;
   width: 380px;
   height: 380px;
   border-radius: 50%;
   background: radial-gradient(circle, rgba(245, 172, 186, 0.42) 0%, rgba(245, 172, 186, 0.14) 32%, rgba(245, 172, 186, 0) 55%);
   pointer-events: none;
}

.pj-card--lead .pj-card__label {
   color: var(--cherry-blossom-pink);
}

.pj-card__big {
   font-family: "Staatliches Regular", serif;
   font-size: clamp(30px, 3.2vw, 48px);
   line-height: 1.05;
   letter-spacing: -0.3px;
   margin-bottom: 20px;
}

.pj-card--lead .pj-card__text {
   color: rgba(255, 253, 249, 0.78);
   max-width: 46ch;
}

/*
|--------------------------------------------------------------------------
| Page projet — galerie empilée
|--------------------------------------------------------------------------
| Chaque capture est collée en haut de l'écran et se fait recouvrir par la
| suivante. Le script rétrécit et assombrit celle du dessous à mesure que la
| suivante arrive. La largeur est bornée par la hauteur d'écran pour qu'une
| carte entière tienne sous la barre de navigation.
*/

.pj-gallery {
   padding: 60px 0 100px;
}

.pj-gallery__stack {
   position: relative;
}

.pj-shot {
   position: sticky;
   top: 100px;
   width: min(100%, calc((100vh - 200px) * 1.9));
   margin: 0 auto 48px;
   transform-origin: center top;
}

.pj-shot:last-child {
   margin-bottom: 0;
}

.pj-shot__frame {
   padding: 0;
   border-radius: 24px;
   overflow: hidden;
   background: rgba(255, 255, 255, 0.6);
}

.pj-shot__frame img {
   display: block;
   width: 100%;
   height: auto;
   border-radius: inherit;
}

/*
|--------------------------------------------------------------------------
| Page projet — ce que vous y gagnez
|--------------------------------------------------------------------------
| Titre et chapô épinglés à gauche pendant que la liste défile à droite.
*/

.pj-gains {
   padding: 100px 0 140px;
}

.pj-gains__inner {
   display: grid;
   grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
   gap: 80px;
   align-items: start;
}

.pj-gains__lead {
   font-family: "Comfortaa Regular", serif;
   font-size: 16px;
   line-height: 1.85;
   color: rgba(47, 65, 87, 0.72);
   max-width: 40ch;
   margin-bottom: 34px;
}

.pj-gains__list {
   border-top: 1px solid rgba(47, 65, 87, 0.16);
}

/* Chaque bénéfice est marqué du petit carré rose pivoté, pas d'un numéro :
   la liste n'est pas un classement. */
.pj-gain {
   position: relative;
   padding: 36px 0 36px 44px;
   border-bottom: 1px solid rgba(47, 65, 87, 0.16);
}

.pj-gain::before {
   content: "";
   position: absolute;
   left: 2px;
   top: 46px;
   width: 12px;
   height: 12px;
   border-radius: 3px;
   background: var(--paradise-pink);
   transform: rotate(14deg);
}

.pj-gain h3 {
   font-family: "Staatliches Regular", serif;
   font-size: clamp(24px, 2.2vw, 32px);
   line-height: 1.1;
   margin-bottom: 10px;
}

.pj-gain p {
   font-family: "Comfortaa Regular", serif;
   font-size: 15px;
   line-height: 1.8;
   color: rgba(47, 65, 87, 0.7);
   max-width: 50ch;
}

.pj-link {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   padding: 14px 32px;
   border: 2px solid var(--charcoal);
   border-radius: 50px;
   font-family: "Staatliches Regular", serif;
   font-size: 17px;
   letter-spacing: 1.6px;
   white-space: nowrap;
   color: var(--charcoal);
   transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease;
}

.pj-link span {
   transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.pj-link:hover {
   background: var(--charcoal);
   color: var(--baby-powder);
}

.pj-link:hover span {
   transform: translateX(6px);
}

/*
|--------------------------------------------------------------------------
| Page projet — projet suivant
|--------------------------------------------------------------------------
*/

.pj-next {
   /* Au-dessus du carré bleu de l'appel à l'action, qui remonte sous ce bloc. */
   position: relative;
   z-index: 1;
}

.pj-next__link {
   display: grid;
   grid-template-columns: minmax(0, 1fr) 400px;
   align-items: center;
   gap: 60px;
   padding: 80px 0 120px;
   color: inherit;
}

.pj-next__body {
   min-width: 0;
}

.pj-next__label {
   display: block;
   font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
   font-size: 12px;
   letter-spacing: 2px;
   text-transform: uppercase;
   color: rgba(47, 65, 87, 0.4);
   margin-bottom: 18px;
}

.pj-next__title {
   display: block;
   font-family: "Staatliches Regular", serif;
   font-size: clamp(36px, 5.4vw, 72px);
   line-height: 1.02;
   letter-spacing: -0.5px;
   margin-bottom: 14px;
   transition: color 0.25s ease;
}

.pj-next__link:hover .pj-next__title {
   color: var(--paradise-pink);
}

.pj-next__summary {
   display: block;
   font-family: "Comfortaa Regular", serif;
   font-size: 14px;
   line-height: 1.7;
   color: rgba(47, 65, 87, 0.6);
   max-width: 44ch;
}

/* Le bouton qui dit que le bloc entier se clique : un titre et une vignette
   seuls se lisaient comme une simple mention. Plein, dans la couleur du
   bandeau ; la flèche part au survol de tout le bloc. */
.pj-next__go {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   margin-top: 28px;
   padding: 14px 30px;
   border-radius: 50px;
   font-family: "Staatliches Regular", serif;
   font-size: 17px;
   letter-spacing: 1.6px;
   white-space: nowrap;
   background: var(--charcoal);
   color: var(--baby-powder);
   box-shadow: 0 12px 30px rgba(47, 65, 87, 0.18);
   transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.pj-next__go span {
   transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.pj-next__link:hover .pj-next__go {
   background: var(--paradise-pink);
   transform: translateY(-2px);
   box-shadow: 0 16px 36px rgba(233, 71, 103, 0.3);
}

.pj-next__link:hover .pj-next__go span {
   transform: translateX(6px);
}

.pj-next__media {
   display: block;
   padding: 0;
   border-radius: 20px;
   background: rgba(255, 255, 255, 0.6);
   border: 1px solid rgba(255, 255, 255, 0.75);
   box-shadow: 0 24px 60px rgba(47, 65, 87, 0.12);
   overflow: hidden;
}

.pj-next__media img {
   display: block;
   width: 100%;
   height: auto;
   border-radius: inherit;
   transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.pj-next__link:hover .pj-next__media img {
   transform: scale(1.04);
}

.pj-next__link:focus-visible {
   outline: 2px solid var(--paradise-pink);
   outline-offset: 6px;
}

/*
|--------------------------------------------------------------------------
| Appel à l'action (page projet et index)
|--------------------------------------------------------------------------
| Posé à même le fond de page, sans bande de couleur : c'est le dernier bloc
| avant le pied de page, et celui-ci arrive en rideau charcoal à coins
| arrondis. Deux aplats sombres bout à bout auraient annulé l'effet — le
| rideau ne se serait pas détaché, et l'arrondi ne se serait pas vu. Restent
| le grand carré bleu en haut à gauche et le cube flou rose en bas à droite.
*/

.pj-cta {
   position: relative;
   overflow: hidden;
   padding: 150px 0 170px;
   background: var(--baby-powder);
   color: var(--charcoal);
}

/* Réduit à un angle, et non plus à une masse : sur le fond clair, le carré
   passe derrière un texte sombre et centré. Le bord droit s'arrête avant la
   colonne de texte (16ch centrés), sinon il la couperait en deux. */
.pj-cta .pj-square {
   left: -16vw;
   top: -26vw;
   width: clamp(420px, 46vw, 760px);
   opacity: 0.38;
}

.pj-cta .pj-cube {
   right: -4%;
   bottom: -18%;
   width: clamp(220px, 26vw, 420px);
   opacity: 0.55;
}

/* Sur les pages projet, le bloc ne rogne plus : le carré bleu remonte sous
   « projet suivant » et s'y dissout par un masque au lieu d'être tranché à la
   frontière, et le cube tient entier dans la section (il ne dépasse que sur
   le bord droit de l'écran). Le rognage reste latéral et en bas, par clip-path. */
.project-page .pj-cta {
   overflow: visible;
   z-index: 0;
   clip-path: inset(-100vh 0 0 0);
   background: transparent;
}

.project-page .pj-cta .pj-square {
   left: -22vw;
   top: -30vw;
   -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 30%, #000 70%);
   mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 30%, #000 70%);
}

.project-page .pj-cta .pj-cube {
   bottom: 4%;
}

/* Sur l'index, le bloc ne rogne plus vers le haut : le décor remonte sur la
   fin de la liste. Le rognage reste latéral et en bas, par clip-path, pour
   que le cube ne déborde pas sur le rideau du pied de page. */
.work .pj-cta,
.ab .pj-cta {
   overflow: visible;
   z-index: 0;
   clip-path: inset(-100vh 0 0 0);
   padding-top: 190px;
}

.work .pj-cta__decor {
   position: absolute;
   inset: 0;
   pointer-events: none;
}

/* Le carré bleu remonte de deux tiers sur la liste et se dissout vers le
   haut : il apparaît sous les dernières lignes avant que l'appel commence. */
.work .pj-cta .pj-square,
.ab .pj-cta .pj-square {
   top: -34vw;
   -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 18%, #000 60%);
   mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 18%, #000 60%);
}

.pj-cta__inner {
   position: relative;
   z-index: 1;
   text-align: center;
}

.pj-cta__title {
   font-family: "Staatliches Regular", serif;
   font-size: clamp(40px, 6vw, 84px);
   line-height: 1.02;
   letter-spacing: -0.5px;
   max-width: 16ch;
   margin: 0 auto 22px;
}

.pj-cta__title em {
   font-style: normal;
   color: var(--paradise-pink);
}

.pj-cta__text {
   font-family: "Comfortaa Regular", serif;
   font-size: 16px;
   line-height: 1.85;
   color: rgba(47, 65, 87, 0.72);
   max-width: 48ch;
   margin: 0 auto 40px;
}

/*
|--------------------------------------------------------------------------
| Repli — tablette
|--------------------------------------------------------------------------
*/

@media (max-width: 1024px) {

   .work__inner,
   .pj__inner {
      padding-left: 40px;
      padding-right: 40px;
   }

   .pj-hero__inner {
      padding-left: 40px;
      padding-right: 40px;
      gap: 40px;
   }

   .work-row__link {
      grid-template-columns: 30px minmax(0, 1fr) 200px 32px;
      gap: 18px;
   }

   .pj-meta {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 24px;
      padding: 26px 28px;
   }

   .pj-idea__text {
      margin-left: 0;
   }

   /* Deux colonnes : la carte principale prend une rangée entière, les quatre
      autres se rangent deux par deux. 2 + 4 = 6 cellules pour 3 rangées de 2. */
   .pj-bento {
      grid-template-columns: repeat(2, minmax(0, 1fr));
   }

   .pj-card--lead {
      grid-column: span 2;
      grid-row: span 1;
   }

   .pj-gains__inner {
      gap: 48px;
   }

   .pj-next__link {
      grid-template-columns: minmax(0, 1fr) 300px;
      gap: 40px;
   }
}

/*
|--------------------------------------------------------------------------
| Repli — sous 900px (seuil de la barre de navigation)
|--------------------------------------------------------------------------
| Le hero passe en colonne, la galerie cesse de coller, la colonne épinglée
| des bénéfices reprend sa place dans le flux (le script ne l'épingle plus).
*/

@media (max-width: 899.98px) {

   .pj-hero__inner {
      grid-template-columns: minmax(0, 1fr);
      gap: 40px;
      padding-top: 130px;
   }

   .pj-hero__text {
      padding-bottom: 0;
   }

   /* Sous la capture, pas sous les boutons : la colonne de texte est bien
      plus haute une fois le hero passé en colonne. */
   .pj-hero .pj-square {
      right: -40vw;
      top: 74%;
      width: 110vw;
   }

   .pj-hero__cube--2 {
      display: none;
   }

   .pj-shot {
      position: static;
      width: 100%;
   }

   .pj-gains__inner {
      grid-template-columns: minmax(0, 1fr);
   }

   .pj-gains__lead {
      max-width: 52ch;
   }
}

/*
|--------------------------------------------------------------------------
| Repli — mobile
|--------------------------------------------------------------------------
*/

@media (max-width: 767.98px) {

   .work__inner,
   .pj__inner {
      padding-left: 22px;
      padding-right: 22px;
   }

   .pj-hero__inner {
      padding-left: 22px;
      padding-right: 22px;
   }

   .work-hero__inner {
      padding-top: 130px;
      padding-bottom: 80px;
   }

   .work-hero__decor {
      bottom: -30vh;
   }

   .work .pj-cta {
      padding-top: 130px;
   }

   .work-hero__cube--1,
   .work-hero__cube--2,
   .work-hero__cube--3,
   .pj-hero__cube--1 {
      display: none;
   }

   .work-group {
      padding-top: 36px;
   }

   .work-group__head {
      margin-bottom: 22px;
   }

   .work-hero__title {
      max-width: none;
   }

   .work-row__link {
      grid-template-columns: 26px minmax(0, 1fr);
      gap: 12px;
      padding: 26px 0;
   }

   .work-row__meta {
      grid-column: 2;
      text-align: left;
      margin-top: 12px;
   }

   .work-row__go,
   .work-cursor {
      display: none;
   }

   .pj-hero {
      padding-bottom: 70px;
   }

   .pj-back {
      margin-bottom: 30px;
   }

   .pj-title {
      letter-spacing: -0.5px;
   }

   .pj-btn {
      padding: 14px 28px;
      font-size: 18px;
   }

   .pj-cover__frame {
      border-radius: 18px;
   }

   .pj-meta-wrap {
      margin-top: -36px;
   }

   .pj-meta {
      grid-template-columns: minmax(0, 1fr);
      gap: 20px;
      padding: 24px 22px;
   }

   .pj-marquee {
      margin-top: 60px;
      padding: 16px 0;
   }

   .pj-marquee__track span {
      font-size: 20px;
      margin-right: 32px;
   }

   .pj-marquee__track span::after {
      margin-left: 32px;
   }

   .pj-idea {
      padding: 80px 0 70px;
   }

   .pj-keys {
      padding: 70px 0 80px;
   }

   .pj-keys__cube {
      display: none;
   }

   .pj-bento {
      grid-template-columns: minmax(0, 1fr);
      grid-auto-rows: auto;
      gap: 14px;
   }

   .pj-card,
   .pj-card--lead {
      grid-column: span 1;
      grid-row: span 1;
      padding: 28px 24px;
   }

   .pj-gallery {
      padding: 30px 0 60px;
   }

   .pj-shot {
      margin-bottom: 24px;
   }

   .pj-shot__frame {
      border-radius: 18px;
   }

   .pj-gains {
      padding: 60px 0 80px;
   }

   .pj-gain {
      padding: 28px 0 28px 34px;
   }

   .pj-gain::before {
      top: 38px;
   }

   .pj-next__link {
      grid-template-columns: minmax(0, 1fr);
      gap: 30px;
      padding: 50px 0 80px;
   }

   .pj-cta {
      padding: 100px 0 110px;
   }

   .pj-cta .pj-square {
      left: -62vw;
      top: -52vw;
      width: 120vw;
      opacity: 0.3;
   }

   /* Même repli pour les pages projet, dont la règle est plus spécifique. */
   .project-page .pj-cta .pj-square {
      left: -62vw;
      top: -52vw;
   }
}

/*
|--------------------------------------------------------------------------
| Mouvement réduit
|--------------------------------------------------------------------------
| Le script coupe déjà ses propres animations ; ce bloc neutralise ce qui vit
| en CSS pur : le bandeau qui défile, les transitions et le survol des cartes.
*/

@media (prefers-reduced-motion: reduce) {

   .pj-marquee__track {
      animation: none;
   }

   .work-row__link::after,
   .work-row__mark,
   .work-row__title,
   .work-row__go,
   .pj-btn,
   .pj-btn span,
   .pj-back span,
   .pj-card,
   .pj-link,
   .pj-link span,
   .pj-next__title,
   .pj-next__go,
   .pj-next__go span,
   .pj-next__media img {
      transition: none;
   }

   .pj-next__link:hover .pj-next__go {
      transform: none;
   }

   .pj-card:hover,
   .pj-btn--primary:hover {
      transform: none;
   }

   .pj-next__link:hover .pj-next__media img {
      transform: none;
   }

   .work-cursor {
      display: none;
   }
}

/* Sous 768px, le carré bleu remonterait derrière le chapô : il est repoussé
   vers l'angle, plus pâle, et les grands carrés de la palette se font plus
   discrets. */
@media (max-width: 767.98px) {
   .work-hero .pj-square {
      right: -58vw;
      top: 58%;
      width: 130vw;
      opacity: 0.3;
   }

   /* Le hero est court : les carrés semés au-delà tombent sur les lignes.
      Plus petits et plus pâles, ils passent derrière le texte sans le gêner. */
   .work-chip {
      width: calc(var(--s) * 0.7);
      height: calc(var(--s) * 0.7);
   }

   .work-chip--pink {
      opacity: 0.32;
   }

   .work-chip--cherry {
      opacity: 0.42;
   }

   .work-chip--charcoal {
      opacity: 0.12;
   }
}

@media (prefers-reduced-motion: reduce) {
   .work-chip {
      will-change: auto;
   }
}