/* =====================================================================
   PROJETS — index et études de cas
   Feuille dédiée, chargée uniquement par les cinq pages Projets.
   styles.css n'est pas touché : il porte le socle déjà validé.
   Tokens, fontes et primitives viennent de tokens.css et styles.css.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1 · STATUT PUBLIC
   Un statut n'est pas une décoration : c'est un contrat de lecture.
   Il doit rester lisible, jamais discret au point d'être manqué.
   --------------------------------------------------------------------- */
.pstatus{
  /* inline-block et non inline-flex : un statut long doit pouvoir passer à la
     ligne. Tronqué, il ne remplit plus son rôle de contrat de lecture. */
  display:inline-block;
  font-family:var(--font-mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
  padding:7px 12px;border:1px solid currentColor;border-radius:2px;
  line-height:1.45;max-inline-size:100%;text-wrap:balance;
}
/* Tous les statuts sont posés sur des surfaces sombres : couverture d'étude de
   cas ou bas de carte, tous deux voilés en Ink. Aucune surcharge sur
   [data-mode="paper"] du body : ce sélecteur l'emporterait et rendrait le
   badge en encre sombre sur fond sombre, donc illisible. La surface locale
   commande, pas le mode de la page. */
.pstatus--vision{color:#8B85FF}
.pstatus--client{color:#C9A227}
/* Le statut du démonstrateur est une mention de vérité, pas une note de bas de
   page : fond plein et texte à pleine opacité, pour qu'il se lise d'emblée. */
.pstatus--demo{
  color:var(--ls-paper);border-color:rgba(242,238,227,.6);
  background:rgba(16,16,20,.62);font-weight:500;
}

.ptransparence{
  font-family:var(--font-mono);font-size:.66rem;line-height:1.7;
  color:rgba(242,238,227,.6);max-inline-size:64ch;margin-block-start:14px;
}
[data-mode="paper"] .ptransparence{color:rgba(16,16,20,.6)}

/* ---------------------------------------------------------------------
   1bis · PREMIER ÉCRAN DE /PROJETS
   L'introduction doit laisser voir le début de la première rangée dans un
   viewport de 1440 × 900. On resserre l'entête et la section qui suit, sans
   supprimer la respiration : le titre garde son échelle, seuls les blancs
   verticaux sont réduits. Portée strictement limitée à cette page.
   --------------------------------------------------------------------- */
@media(min-width:900px){
  .hero--projets .hero__in{padding-block:clamp(104px,13vh,132px) clamp(18px,2.4vh,28px)}
  .hero--projets h1{margin-block-end:10px}
  .hero--projets .hero__lead{max-inline-size:56ch}
  /* la grille remonte : la première rangée entre dans le premier écran */
  .hero--projets + .section{padding-block:clamp(30px,3.4vw,44px) clamp(60px,9vw,110px)}
  .hero--projets + .section .pgrid{margin-block-start:0}
}

/* ---------------------------------------------------------------------
   2 · INDEX DES PROJETS — couvertures reconstruites en HTML
   Les couvertures composées du pack source ne sont jamais publiées :
   l'image est le fond, la typographie est du vrai texte.
   --------------------------------------------------------------------- */
.pgrid{display:grid;grid-template-columns:1fr;gap:26px;margin-block-start:44px}
@media(min-width:860px){.pgrid{grid-template-columns:1fr 1fr;gap:32px}}

.pcard{
  position:relative;display:block;text-decoration:none;color:inherit;
  border:1px solid rgba(242,238,227,.14);border-radius:3px;overflow:hidden;
  background:var(--ls-ink);isolation:isolate;
}
/* Cadrage : la source servie sous 720px est le recadrage PORTRAIT. Un média en
   4:3 l'écrasait et le bloc de titre en recouvrait 87 % : l'image cessait
   d'exister au viewport le plus fréquent. Le média suit donc l'orientation de
   la source, et le texte retrouve un tiers bas. */
.pcard__media{position:relative;aspect-ratio:4/5;overflow:hidden;background:#000}
@media(min-width:721px){.pcard__media{aspect-ratio:4/3}}
.pcard__media img{inline-size:100%;block-size:100%;object-fit:cover;display:block;
  transition:transform .7s var(--ease,cubic-bezier(.22,.61,.36,1))}
/* Même idiome de survol que les cartes de l'accueil : l'image respire, la carte
   ne bouge pas. Transition explicite plutôt que `all`. */
.pcard:hover .pcard__media img,
.pcard:focus-visible .pcard__media img{transform:scale(1.035)}
@media (prefers-reduced-motion:reduce){
  .pcard__media img{transition:none}
  .pcard:hover .pcard__media img,.pcard:focus-visible .pcard__media img{transform:none}
}
.pcard__veil{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(16,16,20,.16) 0%,rgba(16,16,20,.44) 46%,rgba(16,16,20,.92) 100%);
}
.pcard__in{position:absolute;inset-inline:0;inset-block-end:0;z-index:2;padding:26px 24px 24px}
.pcard__secteur{
  font-family:var(--font-mono);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(242,238,227,.62);margin:0 0 10px;
}
.pcard__nom{
  font-family:var(--font-display);font-weight:700;line-height:1.02;
  font-size:clamp(1.6rem,3.4vw,2.3rem);color:var(--ls-paper);margin:0 0 8px;letter-spacing:-.01em;
}
/* L'idée centrale est ce qui vend le projet, pas son nom. Elle passait à
   0,98rem sous un nom à 2,3rem : l'écart la reléguait au rang de sous-titre. */
.pcard__idee{
  font-family:var(--font-display);font-size:clamp(1.06rem,1.5vw,1.22rem);
  line-height:1.32;color:var(--ls-paper);margin:0 0 18px;max-inline-size:30ch;
  text-wrap:balance;
}
/* Le statut occupe sa propre ligne : il n'entre jamais en concurrence de
   largeur avec le lien, et ne peut donc pas être rogné par la carte. */
.pcard__bas{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.pcard__cta{
  font-family:var(--font-ui);font-weight:700;font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ls-paper);display:inline-flex;align-items:center;gap:8px;
}
.pcard__cta::after{content:"";inline-size:18px;block-size:1px;background:var(--ls-majorelle-soft);transition:inline-size .3s ease}
.pcard:hover .pcard__cta::after,.pcard:focus-visible .pcard__cta::after{inline-size:34px}
.pcard:focus-visible{outline:2px solid var(--ls-majorelle-soft);outline-offset:3px}
@media (prefers-reduced-motion:reduce){.pcard__cta::after{transition:none}}

/* ---------------------------------------------------------------------
   3 · COUVERTURE D'UNE ÉTUDE DE CAS
   --------------------------------------------------------------------- */
.pcover{position:relative;min-block-size:78svh;display:flex;align-items:flex-end;overflow:hidden;isolation:isolate}
.pcover__media{position:absolute;inset:0;z-index:0}
.pcover__media img{inline-size:100%;block-size:100%;object-fit:cover;display:block}
.pcover__veil{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(16,16,20,.42) 0%,rgba(16,16,20,.20) 34%,rgba(16,16,20,.74) 74%,rgba(16,16,20,.95) 100%);
}
.pcover__in{position:relative;z-index:2;inline-size:100%;padding-block:0 clamp(38px,7vw,74px)}
.pcover__secteur{
  font-family:var(--font-mono);font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(242,238,227,.66);margin:0 0 16px;
}
.pcover h1{
  font-family:var(--font-display);font-weight:700;line-height:1.0;letter-spacing:-.015em;
  /* Plafond volontairement modéré et largeur bornée : à 5rem, un titre long
     occupait 95 % du conteneur et débordait dès qu'une fonte de substitution
     rendait plus large. Un titre de couverture doit tenir en toutes
     circonstances, pas seulement avec la fonte idéale chargée. */
  font-size:clamp(2.2rem,5.2vw,4rem);color:var(--ls-paper);margin:0 0 18px;
  max-inline-size:15ch;text-wrap:balance;
}
.pcover__plateforme{
  font-family:var(--font-display);font-weight:700;font-style:italic;
  font-size:clamp(1.15rem,2.4vw,1.6rem);color:var(--ls-majorelle-soft);margin:0 0 22px;max-inline-size:26ch;line-height:1.2;
}
.pcover__marque{margin-block-end:22px}
.pcover__marque img{block-size:auto;inline-size:auto;max-block-size:56px;max-inline-size:70%;display:block}

/* ---------------------------------------------------------------------
   4 · SÉQUENCES NARRATIVES
   Une séquence n'est pas une vignette de galerie : une image, une idée,
   une phrase qui la relie à la suivante.
   --------------------------------------------------------------------- */
.pbeat{padding-block:clamp(56px,9vw,104px)}
.pbeat__num{
  font-family:var(--font-mono);font-size:.64rem;letter-spacing:.2em;color:var(--ls-majorelle-soft);
  margin:0 0 14px;
}
[data-mode="paper"] .pbeat__num{color:var(--ls-majorelle)}
.pbeat h2{
  font-family:var(--font-display);font-weight:700;line-height:1.04;letter-spacing:-.01em;
  font-size:clamp(1.7rem,4vw,2.9rem);margin:0 0 18px;max-inline-size:20ch;
}
.pbeat p{font-size:1.02rem;line-height:1.62;max-inline-size:60ch;margin:0 0 16px}
.pbeat__fig{margin:30px 0 0}
.pbeat__fig img{inline-size:100%;block-size:auto;display:block;border-radius:2px}
/* Les légendes portent les mentions de vérité : « scène fictionnelle »,
   « maquette », « compositions et non photographies ». À 10,5px elles étaient
   sous le seuil de confort en mobile. Une mention de vérité illisible ne
   remplit pas son office. */
.pbeat__cap{
  font-family:var(--font-mono);font-size:.72rem;line-height:1.65;margin-block-start:12px;
  color:rgba(242,238,227,.68);
}
[data-mode="paper"] .pbeat__cap{color:rgba(16,16,20,.66)}

@media(min-width:900px){
  .pbeat--duo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(32px,4vw,64px);align-items:center}
  .pbeat--duo .pbeat__fig{margin-block-start:0}
  .pbeat--duo.pbeat--flip .pbeat__txt{order:2}
}

/* bandeau pleine largeur pour les moments forts */
.pfull{position:relative;overflow:hidden}
.pfull img{inline-size:100%;block-size:auto;display:block}
.pfull__cap{
  font-family:var(--font-mono);font-size:.66rem;color:rgba(242,238,227,.58);
  padding-block:12px;
}

/* ---------------------------------------------------------------------
   5 · SECTION « TRAVAIL CLIENT » — mosaïque des maquettes réelles
   --------------------------------------------------------------------- */
.pwork{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-block-start:28px}
@media(min-width:760px){.pwork{grid-template-columns:repeat(3,1fr);gap:16px}}
.pwork figure{margin:0}
.pwork img{inline-size:100%;block-size:auto;display:block;border-radius:2px}
.pwork--lead{grid-template-columns:1fr;margin-block-start:28px}
.pwork--lead img{border-radius:2px}
.pmaquette{
  display:inline-block;font-family:var(--font-mono);font-size:.56rem;letter-spacing:.14em;
  text-transform:uppercase;padding:3px 8px;border:1px solid rgba(201,162,39,.5);color:#C9A227;
  border-radius:2px;margin-block-start:10px;
}

/* ---------------------------------------------------------------------
   6 · CLÔTURE COMMERCIALE
   --------------------------------------------------------------------- */
.pend{padding-block:clamp(64px,10vw,120px)}
.pend h2{
  font-family:var(--font-display);font-weight:700;line-height:1.06;letter-spacing:-.012em;
  font-size:clamp(1.8rem,4.4vw,3rem);margin:0 0 30px;max-inline-size:24ch;
}
/* Le bouton de clôture portait la même taille que celui de la barre de
   navigation : sous un titre de 48px, il se lisait comme un lien secondaire.
   C'est la dernière action de la page, elle doit peser. */
.pend .btns{gap:14px;flex-wrap:wrap}
.pend .btn{font-size:.86rem;padding:17px 30px}
@media(max-width:520px){
  .pend .btn{inline-size:100%;justify-content:center}
}
.pend__alt{font-family:var(--font-mono);font-size:.72rem;color:rgba(242,238,227,.6);margin-block-start:18px}
[data-mode="paper"] .pend__alt{color:rgba(16,16,20,.6)}

/* ---------------------------------------------------------------------
   7 · NOTE DE PRÉVISUALISATION
   Utilisée tant qu'une autorisation de publication reste à confirmer.
   --------------------------------------------------------------------- */
.ppreview{
  border:1px solid rgba(139,133,255,.42);border-radius:3px;padding:16px 18px;
  font-family:var(--font-mono);font-size:.68rem;line-height:1.7;color:rgba(242,238,227,.78);
  margin-block-start:26px;max-inline-size:70ch;
}
[data-mode="paper"] .ppreview{color:rgba(16,16,20,.75);border-color:rgba(37,37,255,.3)}