/* Kaleyo — pages de présentation des réalisations (realisations/<projet>/).
   Mise en page commune ; chaque projet apporte ses couleurs (thème ci-dessous) et sa typographie de titre
   (--title-font, posée sur <body> par outils/realisations/generer.py). */

.projet--jumilhac { --p-bg: #e5ddcf; --p-ink: #1c2a20; --p-muted: rgba(28, 42, 32, .76); --p-line: rgba(28, 42, 32, .16); --p-accent: #55683f; --p-media: #d9d0bf; }
.projet--aba { --p-bg: #364336; --p-ink: #ffffff; --p-muted: rgba(255, 255, 255, .74); --p-line: rgba(255, 255, 255, .17); --p-accent: #cfdac6; --p-media: #2a352a; }
.projet--maison { --p-bg: #0d1828; --p-ink: #f1ece3; --p-muted: rgba(241, 236, 227, .74); --p-line: rgba(241, 236, 227, .16); --p-accent: #c9a96b; --p-media: #111f33; }
.projet--sac { --p-bg: #e7e7e7; --p-ink: #0c0c0c; --p-muted: rgba(12, 12, 12, .72); --p-line: rgba(12, 12, 12, .14); --p-accent: #7a2a33; --p-media: #dedede; }


/* ---------- Le billet (haut de page) ---------- */
.p-hero {
  display: grid; gap: clamp(2.5rem, 5vw, 4rem); align-items: center;
  margin: clamp(5.5rem, 10vw, 7rem) var(--pad) 0; padding: clamp(1.75rem, 4vw, 3.5rem);
  border-radius: 2rem; background: var(--p-bg); color: var(--p-ink);
}
.p-hero__text { display: grid; align-content: start; gap: 1.4rem; }
.p-back { justify-self: start; font-size: .9375rem; color: var(--p-muted); transition: color .3s; }
.p-back:hover { color: var(--p-ink); }
.p-back span { display: inline-block; transition: transform .5s var(--ease); }
.p-back:hover span { transform: translateX(-.25em); }
.p-route { display: flex; align-items: center; gap: .9rem; margin-top: .5rem; font-size: .75rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--p-muted); }
.p-route__path { position: relative; flex: 1; max-width: 12rem; height: 1px; background: repeating-linear-gradient(90deg, var(--p-line) 0 5px, transparent 5px 10px); }
.p-route__path svg { position: absolute; left: 50%; top: 50%; width: 1rem; translate: -50% -50%; rotate: 90deg; fill: var(--p-accent); }
.p-title { font-family: var(--title-font), var(--serif); font-weight: 500; font-size: clamp(2.8rem, 6.5vw, 6rem); line-height: .95; letter-spacing: -.02em; }
.projet--maison .p-title { font-weight: 400; letter-spacing: -.035em; font-size: clamp(2.6rem, 5.8vw, 5.4rem); }
.projet--aba .p-title { font-stretch: 125%; font-weight: 800; text-transform: uppercase; letter-spacing: -.015em; line-height: .92; font-size: clamp(1.75rem, 3.2vw, 3rem); } /* « ARCHITECTURE » doit tenir sur une ligne */
.projet--sac .p-title { text-transform: uppercase; letter-spacing: .02em; font-size: clamp(2.4rem, 5.4vw, 5rem); }
.p-lede { max-width: 36rem; font-size: clamp(1.1875rem, 1.45vw, 1.35rem); line-height: 1.55; color: var(--p-muted); text-wrap: pretty; }
.p-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.75rem; margin: .3rem 0 0; padding-top: 1.2rem; border-top: 1px solid var(--p-line); }
.p-facts dt { margin-bottom: .25rem; font-size: .6875rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--p-muted); }
.p-facts dd { margin: 0; font-size: 1.0625rem; line-height: 1.35; }
.p-visit { justify-self: start; margin-top: .4rem; background: var(--p-ink); color: var(--p-bg); }
.p-hero__media { display: grid; place-items: center; padding: clamp(.75rem, 2vw, 2rem); border-radius: 1.4rem; background: var(--p-media); }
.p-hero__media .browser { box-shadow: 0 2rem 3.5rem -1.5rem rgba(4, 24, 28, .5), 0 0 0 1px rgba(4, 24, 28, .06); }

/* ---------- Le parti pris ---------- */
.p-story { display: grid; gap: 1.5rem; padding: clamp(5rem, 11vw, 9rem) var(--pad) clamp(3rem, 6vw, 5rem); }
.p-story h2 { max-width: 14em; }
.p-story__text { display: grid; gap: 1.25rem; max-width: 40rem; }
.p-story__text p { font-size: clamp(1.1875rem, 1.55vw, 1.45rem); line-height: 1.6; color: var(--muted); text-wrap: pretty; }
.p-story__text strong { font-weight: 500; color: var(--ink); }

/* ---------- Les captures ---------- */
.p-gallery { display: grid; gap: clamp(2rem, 5vw, 3.5rem) clamp(1rem, 2.5vw, 2rem); padding: 0 var(--pad); }
.p-shot { display: grid; gap: .9rem; margin: 0; }
.p-shot__frame { display: block; overflow: hidden; border-radius: 1.1rem; background: var(--sand); box-shadow: 0 1.5rem 3rem -1.75rem rgba(4, 24, 28, .45), 0 0 0 1px rgba(4, 24, 28, .06); }
.p-shot__frame img { width: 100%; height: auto; transform-origin: 50% 50%; }
.p-shot figcaption { display: flex; gap: .9rem; align-items: baseline; font-size: 1.0625rem; color: var(--muted); }
.p-shot figcaption span { font-size: .8125rem; font-weight: 500; letter-spacing: .08em; font-variant-numeric: tabular-nums; color: var(--ink); }

/* ---------- Ce que le site sait faire ---------- */
.p-features { display: grid; gap: 1.5rem; padding: clamp(6rem, 12vw, 10rem) var(--pad) clamp(3rem, 6vw, 5rem); }
.p-features__list { display: grid; gap: .9rem; margin: 1.5rem 0 0; padding: 0; list-style: none; }
.p-feature {
  display: grid; align-content: start; gap: .6rem; padding: 1.6rem 1.6rem 1.8rem;
  border: 1px solid var(--line); border-radius: 1.5rem; background: rgba(255, 255, 255, .42);
  transition: background-color .5s var(--ease), color .5s, border-color .5s, transform .6s var(--ease);
}
.p-feature:hover { background: var(--p-bg); color: var(--p-ink); border-color: transparent; transform: translateY(-.25rem); }
.p-feature__num { font-size: .8125rem; font-weight: 500; letter-spacing: .08em; font-variant-numeric: tabular-nums; color: var(--p-accent); }
.projet--maison .p-feature__num { color: #a8843f; }
.projet--maison .p-feature:hover .p-feature__num { color: var(--p-accent); }
.p-feature h3 { margin-top: 1.4rem; font-size: clamp(1.3rem, 1.9vw, 1.6rem); font-weight: 400; letter-spacing: -.025em; line-height: 1.15; }
.p-feature p { font-size: 1.125rem; line-height: 1.55; color: var(--muted); text-wrap: pretty; transition: color .5s; }
.p-feature:hover p { color: var(--p-muted); }

/* ---------- Sur téléphone ---------- */
.p-mobile {
  display: grid; gap: clamp(3rem, 6vw, 4rem); align-items: center; overflow: hidden;
  margin: clamp(3rem, 8vw, 6rem) var(--pad) 0; padding: clamp(2.5rem, 6vw, 5rem) clamp(1.5rem, 5vw, 4.5rem);
  border-radius: 2rem; background: var(--p-bg); color: var(--p-ink);
}
.p-mobile__text { display: grid; gap: 1.25rem; }
.p-mobile .eyebrow, .p-mobile .lede { color: var(--p-muted); }
.p-phones { display: flex; justify-content: center; align-items: flex-start; gap: clamp(.75rem, 2vw, 1.75rem); padding-bottom: 2.5rem; }
/* iPhone 17 (lavande), dessiné en CSS aux proportions du vrai (71,5 × 149,6 mm) : contour en aluminium, bord noir,
   Dynamic Island, boutons, barre d'état. Toutes les mesures en cqw (centièmes de la largeur du téléphone) : le
   dessin reste juste à toutes les tailles. La barre d'état prend la couleur du haut de la capture (page.js). */
.p-phone {
  container-type: inline-size; position: relative; flex: 0 1 13rem; aspect-ratio: 71.5 / 149.6; border-radius: 17cqw;
  background: linear-gradient(140deg, #e9e2f6 0%, #b9add8 18%, #ddd4f0 40%, #a497c7 64%, #d3c9ea 84%, #b0a3d1 100%);
  box-shadow: inset 0 0 0 .3cqw rgba(255, 255, 255, .6), inset 0 0 0 .65cqw rgba(96, 80, 140, .25), 0 2.2rem 3rem -1.6rem rgba(38, 28, 60, .5);
}
.p-phone::before { content: ""; position: absolute; inset: 1.9cqw; border-radius: 15.1cqw; background: #060607; }
.p-phone::after { /* l'ombre portée au sol */
  content: ""; position: absolute; left: 10cqw; right: 10cqw; bottom: -10cqw; height: 6cqw; z-index: -1;
  background: radial-gradient(closest-side, rgba(30, 22, 48, .38), transparent); filter: blur(1.5cqw);
}
.p-phone__screen {
  position: absolute; inset: 3.7cqw; display: flex; flex-direction: column; overflow: hidden; border-radius: 13.3cqw;
  background: var(--bar, #fff);
}
.p-phone__status {
  flex: none; display: flex; align-items: center; justify-content: space-between; height: 12.3cqw; padding: 0 7cqw 0 10cqw;
  font: 600 3.9cqw/1 -apple-system, 'SF Pro Text', system-ui, sans-serif; letter-spacing: -.01em;
  color: var(--bar-ink, #000); background: var(--bar, #fff);
}
.p-phone__status svg { width: 15.5cqw; height: auto; fill: currentColor; }
.p-phone__screen img { flex: 1; min-height: 0; width: 100%; height: auto; object-fit: cover; object-position: top; }
.p-phone__island { position: absolute; top: 2.5cqw; left: 50%; width: 28.7cqw; height: 8.4cqw; margin-left: -14.35cqw; border-radius: 99rem; background: #000; }
.p-phone__btn { position: absolute; width: 1.5cqw; border-radius: .7cqw; background: linear-gradient(90deg, #9286b8, #cfc5e8); }
.p-phone__btn--action, .p-phone__btn--up, .p-phone__btn--down { left: -1.1cqw; }
.p-phone__btn--power, .p-phone__btn--camera { right: -1.1cqw; background: linear-gradient(270deg, #9286b8, #cfc5e8); }
.p-phone__btn--action { top: 44cqw; height: 13cqw; }
.p-phone__btn--up { top: 64cqw; height: 20cqw; }
.p-phone__btn--down { top: 89cqw; height: 20cqw; }
.p-phone__btn--power { top: 70cqw; height: 31cqw; }
.p-phone__btn--camera { top: 132cqw; height: 17cqw; right: -.6cqw; width: 1cqw; }
.p-phone:nth-child(2) { margin-top: 3rem; }

/* ---------- L'identité ---------- */
.p-identity { display: grid; gap: 1.5rem; padding: clamp(6rem, 12vw, 10rem) var(--pad) clamp(3rem, 6vw, 5rem); }
.p-identity__grid { display: grid; gap: .9rem; margin-top: 1.5rem; }
.p-palette, .p-type { padding: clamp(1.5rem, 3vw, 2.25rem); border: 1px solid var(--line); border-radius: 1.5rem; background: rgba(255, 255, 255, .42); }
.p-identity__label { margin-bottom: 1.5rem; font-size: .75rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.p-palette ul { display: grid; grid-template-columns: repeat(5, 1fr); gap: .6rem; margin: 0; padding: 0; list-style: none; }
.p-palette li { display: grid; gap: .3rem; font-size: .9375rem; }
.p-swatch { display: block; aspect-ratio: 3 / 4; margin-bottom: .45rem; border-radius: .9rem; background: var(--c); box-shadow: inset 0 0 0 1px rgba(4, 24, 28, .08); transition: transform .6s var(--ease); }
.p-palette li:hover .p-swatch { transform: translateY(-.3rem); }
.p-palette strong { font-weight: 500; }
.p-palette code { font: 500 .6875rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .04em; color: var(--muted); }
.p-type { display: grid; align-content: start; }
.p-type__specimen { font-family: var(--title-font), var(--serif); font-size: clamp(3.5rem, 8vw, 7rem); line-height: 1; letter-spacing: -.02em; overflow-wrap: anywhere; }
.projet--aba .p-type__specimen { font-stretch: 125%; font-weight: 800; text-transform: uppercase; letter-spacing: -.015em; }
.projet--sac .p-type__specimen { letter-spacing: .04em; }
.p-type ul { display: grid; gap: .1rem; margin: 1.75rem 0 0; padding: 0; list-style: none; }
.p-type li { display: grid; grid-template-columns: 3.25rem 1fr auto; align-items: baseline; gap: 1rem; padding: .85rem 0; border-top: 1px solid var(--line); }
.p-type li span { font-size: 1.75rem; line-height: 1; }
.p-type li strong { font-weight: 500; }
.p-type li em { font-style: normal; font-size: 1rem; color: var(--muted); }

/* ---------- Essayer, puis la destination suivante ---------- */
.p-try { display: grid; justify-items: center; gap: 1.5rem; padding: clamp(5rem, 11vw, 9rem) var(--pad); text-align: center; }
.p-try .lede { max-width: 30rem; }
.p-next {
  display: grid; gap: 2rem; align-items: center; overflow: hidden;
  margin: 0 var(--pad) clamp(4rem, 8vw, 6rem); padding: clamp(1.75rem, 4vw, 3rem);
  border-radius: 2rem; background: var(--p-bg); color: var(--p-ink);
}
.p-next__text { display: grid; gap: .9rem; }
.p-next__label { font-size: .8125rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--p-muted); }
.p-next__label span { display: inline-block; transition: transform .6s var(--ease); }
.p-next:hover .p-next__label span { transform: translateX(.4em); }
.p-next__title { font-family: var(--title-font), var(--serif); font-weight: 500; font-size: clamp(2.4rem, 5.5vw, 5rem); line-height: .95; letter-spacing: -.02em; }
.p-next.projet--maison .p-next__title { font-weight: 400; letter-spacing: -.035em; }
.p-next.projet--aba .p-next__title { font-stretch: 125%; font-weight: 800; text-transform: uppercase; letter-spacing: -.015em; line-height: .92; font-size: clamp(1.5rem, 3.6vw, 3.2rem); }
.p-next.projet--sac .p-next__title { text-transform: uppercase; letter-spacing: .02em; }
.p-next__meta { font-size: 1.0625rem; color: var(--p-muted); }
.p-next__media { display: block; overflow: hidden; border-radius: 1.1rem; box-shadow: 0 1.5rem 3rem -1.5rem rgba(4, 24, 28, .5); }
.p-next__media img { width: 100%; height: auto; transition: transform 1.2s var(--ease); }
.p-next:hover .p-next__media img { transform: scale(1.04); }

@media (min-width: 700px) {
  .p-features__list { grid-template-columns: repeat(2, 1fr); }
  .p-gallery { grid-template-columns: 1fr 1fr; }
  .p-shot--wide { grid-column: 1 / -1; }
  .p-gallery .p-shot:nth-child(2n + 3) { margin-top: clamp(2rem, 6vw, 5rem); } /* en quinconce */
}
@media (min-width: 1000px) {
  .p-hero { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .p-story { grid-template-columns: 5fr 7fr; align-items: start; column-gap: clamp(2rem, 6vw, 7rem); }
  .p-story .eyebrow { grid-column: 1 / -1; }
  .p-story__text { padding-top: .6rem; }
  .p-features__list { grid-template-columns: repeat(3, 1fr); }
  .p-mobile { grid-template-columns: 4fr 6fr; }
  .p-identity__grid { grid-template-columns: 7fr 5fr; }
  .p-next { grid-template-columns: 5fr 7fr; }
}
@media (max-width: 699px) {
  .p-hero { border-radius: 1.5rem; }
  .p-facts { grid-template-columns: 1fr; }
  .p-palette ul { grid-template-columns: repeat(3, 1fr); row-gap: 1.2rem; }
  .p-phone { flex-basis: 9rem; }
  .p-phone:nth-child(2) { margin-top: 1.75rem; }
  .p-phone:nth-child(3) { display: none; }
}