/* ==========================================================================
   Pages projets — complément de main.css (chargé après lui).
   Aucune nouvelle couleur ni police : uniquement les variables de main.css.
   Composants réutilisés tels quels depuis l'accueil : .btn, .eyebrow,
   .tools__title (titres de section), .tools__list/.tool (listes),
   .stats/.stat (chiffres), .project__meta/.state (métadonnées), .mock (cadres),
   .project__num (grand numéro), .contact, .site-header, .site-footer, curseur.
   ========================================================================== */
.page-projet {
  --mesure: 64ch;          /* largeur de ligne des textes longs */
  --rayon: 14px;           /* rayon des médias (celui des .mock de l'accueil) */
  --espace-blocs: clamp(4.5rem, 13vh, 9rem);
  --bord: #23252D;         /* teintes de bordure déjà utilisées par .mock */
}

/* ---------- En-tête du projet ---------- */
.p-hero {
  position: relative; display: grid; gap: 1.5rem;
  padding: calc(var(--header-h) + 1.5rem) var(--gutter) clamp(2.5rem, 7vh, 4.5rem);
}
.p-hero__haut { display: flex; justify-content: space-between; align-items: center; color: var(--grey); }
.p-retour { display: inline-flex; gap: .5rem; padding: .6rem 0; transition: color 300ms; }
.p-retour:hover, .p-retour:focus-visible { color: var(--accent); }
.p-hero__num.project__num {
  position: absolute; z-index: -1; right: calc(var(--gutter) - .04em); top: calc(var(--header-h) + 2.5rem);
  font-size: clamp(7rem, 30vw, 24rem); grid-column: auto;
}
.p-hero__titre {
  margin-top: clamp(2.5rem, 12vh, 8rem);
  font-size: clamp(2.6rem, 8.4vw, 10rem); font-weight: 900; font-stretch: 78%; line-height: .88; letter-spacing: -.035em;
  max-width: 15ch; text-wrap: balance; mix-blend-mode: difference;
}
.p-hero__titre .line__inner { display: block; }
.p-hero__accroche {
  font-size: clamp(1.25rem, 2.2vw, 2.1rem); font-weight: 500; font-stretch: 92%; line-height: 1.2; letter-spacing: -.01em;
  color: var(--paper-dim); max-width: 34ch; text-wrap: pretty;
}
.p-hero__meta { align-self: end; }
.p-hero__meta dd { min-height: 1.5rem; }

@media (min-width: 960px) {
  .p-hero { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(1.5rem, 3vw, 3rem); row-gap: 2rem; }
  .p-hero > * { grid-column: 1 / -1; }
  .p-hero__accroche { grid-column: 1 / 7; }
  .p-hero__meta { grid-column: 7 / 13; }
}

/* ---------- Couverture (pleine largeur, parallaxe légère) ---------- */
.p-couverture { margin: 0; position: relative; }
.p-couverture__cadre { overflow: hidden; max-height: 86vh; width: 100%; }
.p-couverture__cadre picture, .p-couverture__cadre img, .p-couverture__video { display: block; width: 100%; height: 100%; object-fit: cover; }
.p-couverture .media-vide { border-radius: 0; border-inline: 0; max-height: 86vh; }
.p-couverture .video { border-radius: 0; border-inline: 0; }
.p-couverture__pause {
  position: absolute; right: var(--gutter); bottom: 1rem; min-height: 40px; padding: .5rem .9rem; border-radius: 999px;
  border: 1px solid rgba(237, 236, 230, .35); background: rgba(7, 7, 10, .6); color: var(--paper); cursor: pointer;
}
.p-couverture__pause:hover { border-color: var(--accent); color: var(--accent); }

/* ---------- Emplacements vides (média non fourni) ---------- */
.media-vide {
  position: relative; display: grid; place-items: center; align-content: center; gap: .75rem; width: 100%;
  border: 1px dashed #2E3038; border-radius: var(--rayon); color: var(--grey);
  background:
    radial-gradient(120% 90% at 85% 10%, color-mix(in oklab, var(--tint, #8E97AB) 22%, transparent) 0, transparent 60%),
    linear-gradient(160deg, #121318 0%, #0B0B0E 100%);
}
.media-vide__icone { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.2; }
.media-vide__libelle { font-size: .75rem; }
.a-rediger {
  display: inline-flex; align-items: center; padding: .3rem .7rem; border: 1px dashed #3A3D47; border-radius: 6px;
  color: var(--grey); font-size: .75rem; line-height: 1.4; vertical-align: middle;
}

/* ---------- Grille des blocs ---------- */
.p-blocs { display: grid; gap: var(--espace-blocs); padding: var(--espace-blocs) 0; }
.bloc { padding: 0 var(--gutter); min-width: 0; }
.bloc--pleine { padding-inline: 0; }
.bloc--pleine .bloc__entete, .bloc--pleine .legende { padding-inline: var(--gutter); }
.bloc__entete { display: grid; gap: 1rem; margin-bottom: clamp(1.5rem, 4vh, 2.5rem); align-content: start; }
.bloc__titre { max-width: 16ch; text-wrap: balance; }
.bloc__media { margin: 0; display: grid; gap: .9rem; }
.legende { color: var(--grey); max-width: var(--mesure); }
.p-cadre { overflow: hidden; border-radius: var(--rayon); }
.p-cadre picture, .p-cadre img { display: block; width: 100%; height: auto; }
.bloc--pleine .p-cadre, .bloc--pleine .media-vide, .bloc--pleine .video { border-radius: 0; border-inline: 0; }

@media (min-width: 960px) {
  .bloc--texte, .bloc--chiffres, .bloc--code, .bloc--liste, .bloc--liens, .bloc--note, .bloc--citation {
    display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(1.5rem, 3vw, 3rem);
  }
  .bloc--texte > .bloc__entete, .bloc--chiffres > .bloc__entete, .bloc--code > .bloc__entete,
  .bloc--liste > .bloc__entete, .bloc--liens > .bloc__entete {
    grid-column: 1 / 5; position: sticky; top: calc(var(--header-h) + 2rem); margin-bottom: 0;
  }
  .bloc > .bloc__corps { grid-column: 5 / 13; min-width: 0; }
  .bloc--note > .p-note { grid-column: 5 / 13; }
  .bloc--citation > * { grid-column: 3 / 13; }
}

/* ---------- texte ---------- */
.p-texte {
  display: grid; gap: 1.15em; max-width: var(--mesure);
  font-size: clamp(1.06rem, 1.15vw, 1.22rem); line-height: 1.68; color: var(--paper-dim); text-wrap: pretty;
}
.p-texte strong { color: var(--paper); font-weight: 700; }
.p-texte mark { background: none; color: var(--paper); box-shadow: inset 0 -.14em 0 var(--accent); }
.p-texte a { color: var(--paper); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: .2em; }
.p-texte a:hover { color: var(--accent); }
.p-texte--intro p:first-child {
  font-size: clamp(1.4rem, 2.3vw, 2.15rem); line-height: 1.22; font-weight: 500; font-stretch: 92%; letter-spacing: -.01em; color: var(--paper);
}

/* ---------- galerie ---------- */
.galerie { display: grid; gap: clamp(.75rem, 1.5vw, 1.25rem); grid-template-columns: minmax(0, 1fr); }
.galerie__item { margin: 0; display: grid; gap: .5rem; }
.galerie__lien { display: block; overflow: hidden; border-radius: 10px; }
.galerie__lien picture, .galerie__lien img, .galerie__item .media-vide { display: block; width: 100%; height: 100%; aspect-ratio: var(--ratio); object-fit: cover; }
.galerie__item .media-vide { border-radius: 10px; }
.galerie__lien img { transition: transform 700ms var(--ease-out); }
@media (hover: hover) { .galerie__lien:hover img { transform: scale(1.04); } }
@media (min-width: 640px) { .galerie--grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) { .galerie--grille.galerie--c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.galerie--defilement {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 1rem; overscroll-behavior-x: contain;
  scrollbar-width: thin; scrollbar-color: #2E3038 transparent;
}
.galerie--defilement > li { flex: 0 0 min(80vw, 560px); scroll-snap-align: start; }
.bloc--pleine .galerie--defilement { padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); }

/* ---------- lightbox ---------- */
.lightbox {
  width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: clamp(1rem, 3vw, 2.5rem);
  border: 0; background: rgba(7, 7, 10, .96); color: var(--paper);
}
.lightbox[open] { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 1rem; }
.lightbox::backdrop { background: rgba(7, 7, 10, .8); }
.lightbox__figure { margin: 0; min-height: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: .75rem; place-items: center; }
.lightbox__img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 8px; }
.lightbox__legende { color: var(--grey); }
.lightbox__barre { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .5rem 1.75rem; }
.lightbox__compte { margin-right: auto; color: var(--grey); }
.lightbox__barre button { background: none; border: 0; padding: .6rem 0; min-height: 44px; color: var(--paper); font: inherit; }
.has-cursor .lightbox, .has-cursor .lightbox button { cursor: pointer; }
.lightbox__barre button:hover { color: var(--accent); }

/* ---------- vidéo ---------- */
.video { position: relative; overflow: hidden; border-radius: var(--rayon); background: #0E0F13; border: 1px solid var(--bord); }
.video__el, .video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; }
.video__facade { position: absolute; inset: 0; display: grid; place-items: center; color: var(--paper); }
.video__facade img, .video__fond { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.video__fond {
  background:
    radial-gradient(120% 90% at 85% 10%, color-mix(in oklab, var(--tint, #8E97AB) 45%, transparent) 0, transparent 55%),
    linear-gradient(160deg, #15161B 0%, #0B0B0E 100%);
}
.video__bouton {
  position: relative; width: clamp(64px, 8vw, 92px); aspect-ratio: 1; border-radius: 50%; background: var(--accent);
  display: grid; place-items: center; transition: transform 500ms var(--ease-out);
}
.video__bouton svg { width: 34%; fill: var(--accent-ink); transform: translateX(6%); }
.video__libelle { position: absolute; left: 1rem; bottom: 1rem; padding: .3rem .6rem; border-radius: 999px; background: rgba(7, 7, 10, .7); }
.video__facade:hover .video__bouton, .video__facade:focus-visible .video__bouton { transform: scale(1.08); }
.video.media-vide { border-style: dashed; }

/* ---------- comparatif ---------- */
.comparatif { position: relative; display: grid; gap: .75rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .comparatif { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.comparatif__vue { position: relative; overflow: hidden; border-radius: 12px; aspect-ratio: var(--ratio); }
.comparatif__vue picture, .comparatif__vue img, .comparatif__vue .media-vide { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: auto; }
.comparatif__tag { position: absolute; top: .75rem; left: .75rem; padding: .3rem .6rem; border-radius: 999px; background: rgba(7, 7, 10, .72); color: var(--paper); }
.comparatif__curseur, .comparatif__poignee { display: none; }
.js .comparatif { display: block; aspect-ratio: var(--ratio); border-radius: var(--rayon); overflow: hidden; touch-action: pan-y; }
.js .comparatif__vue { position: absolute; inset: 0; border-radius: 0; aspect-ratio: auto; }
.js .comparatif__vue .media-vide { border-radius: 0; border: 0; }
.js .comparatif__vue--apres { clip-path: inset(0 0 0 var(--pos)); }
.js .comparatif__vue--apres .comparatif__tag { left: auto; right: .75rem; }
.js .comparatif__curseur {
  display: block; position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; z-index: 3; cursor: ew-resize;
}
.js .comparatif__poignee {
  display: block; position: absolute; z-index: 2; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px;
  background: var(--paper); pointer-events: none;
}
.comparatif__poignee span {
  position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 0 6px rgba(7, 7, 10, .35);
}
.comparatif__poignee span::before, .comparatif__poignee span::after {
  content: ""; position: absolute; top: 50%; width: 7px; height: 7px; margin-top: -4px;
  border: solid var(--accent-ink); border-width: 0 0 2px 2px;
}
.comparatif__poignee span::before { left: 11px; transform: rotate(45deg); }
.comparatif__poignee span::after { right: 11px; transform: rotate(-135deg); }
.comparatif__curseur:focus-visible + .comparatif__poignee span { outline: 2px solid var(--paper); outline-offset: 4px; }

/* ---------- chiffres (réutilise .stats) ---------- */
.p-stats { flex-wrap: wrap; gap: 2.5rem clamp(2rem, 5vw, 5rem); }
.p-stats .stat { max-width: 16rem; }

/* ---------- citation ---------- */
.bloc--citation { margin: 0; }
.citation { margin: 0; }
.citation p {
  font-size: clamp(1.9rem, 4.6vw, 4.8rem); font-weight: 800; font-stretch: 84%; line-height: 1.02; letter-spacing: -.025em;
  max-width: 22ch; text-wrap: balance;
}
.citation__source { color: var(--grey); margin-top: 1.5rem; }

/* ---------- code ---------- */
.code { margin: 0; border: 1px solid var(--bord); border-radius: var(--rayon); background: #0B0B0E; overflow: hidden; }
.code__barre { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .55rem .6rem .55rem 1rem; border-bottom: 1px solid #1B1C22; background: #121318; color: var(--grey); }
.code__copier {
  min-height: 34px; padding: .35rem .8rem; border-radius: 999px; border: 1px solid #2E3038; background: none; color: var(--paper); cursor: pointer;
  transition: border-color 300ms, color 300ms;
}
.code__copier:hover, .code__copier:focus-visible { border-color: var(--accent); color: var(--accent); }
.no-js .code__copier { display: none; }
.code__pre {
  margin: 0; padding: 1.25rem 1.25rem 1.5rem; overflow: auto; max-height: 36rem;
  font-family: var(--font-mono); font-size: .86rem; line-height: 1.7; color: var(--paper-dim); tab-size: 2;
  font-variant-ligatures: none; font-feature-settings: "calt" 0, "liga" 0;
}
.code__pre code { font: inherit; }
.code .legende { padding: .75rem 1rem; border-top: 1px solid #1B1C22; max-width: none; }
.tk-k, .tk-n, .tk-v { color: var(--paper); }
.tk-s { color: var(--accent); }
.tk-c { color: var(--grey); }

/* ---------- liste (réutilise .tools__list / .tool) ---------- */
.p-liste { max-width: 52rem; }
.p-liste .tool { grid-template-columns: auto minmax(0, 1fr); gap: 0 1.25rem; align-items: baseline; }
.p-liste--puces .tool { grid-template-columns: minmax(0, 1fr); }
.p-liste--etapes .tool::before { display: none; }
.p-liste__num { color: var(--grey); min-width: 2ch; transition: color 300ms; }
.p-liste--etapes .tool:hover .p-liste__num { color: var(--accent); }
.p-liste__corps { display: grid; gap: .4rem; transition: transform 450ms var(--ease-out); }
.p-liste--puces .tool:hover .p-liste__corps { transform: translateX(1.4rem); }
.p-liste__titre { font-size: clamp(1.15rem, 1.7vw, 1.6rem); font-weight: 700; font-stretch: 92%; line-height: 1.15; letter-spacing: -.01em; color: var(--paper); }
.p-liste__texte { color: var(--paper-dim); line-height: 1.6; font-size: clamp(1rem, 1.1vw, 1.12rem); max-width: 60ch; }

/* ---------- mockup (réutilise .mock) ---------- */
.projet .mock { --tint: inherit; } /* teinte du projet, et non celle des cadres de l'accueil */
.p-mockup { perspective: 1800px; }
.mock--ajuste { aspect-ratio: auto; transform-origin: 50% 100%; }
.mock--ajuste .mock__screen { position: relative; inset: auto; }
.mock--ajuste .mock__screen picture, .mock--ajuste .mock__screen img { display: block; width: 100%; height: auto; }
.mock--ajuste .media-vide { border: 0; border-radius: 0; }

/* ---------- liens ---------- */
.p-liens { gap: .75rem; }
.is-a-completer { opacity: .65; border-style: dashed; cursor: not-allowed; }
.is-a-completer .mono { font-size: .72rem; color: var(--grey); }

/* ---------- côte à côte ---------- */
.bloc--cote { display: grid; gap: clamp(2rem, 4vw, 4rem); }
.cote__media { margin: 0; display: grid; gap: .9rem; }
@media (min-width: 960px) {
  .bloc--cote { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(1.5rem, 3vw, 3rem); align-items: center; }
  .cote__texte { grid-column: 1 / 6; }
  .cote__media { grid-column: 7 / 13; }
  .bloc--inverse .cote__texte { grid-column: 8 / 13; order: 2; }
  .bloc--inverse .cote__media { grid-column: 1 / 7; order: 1; }
}

/* ---------- note ---------- */
.bloc--note { margin-top: calc(var(--espace-blocs) * -0.7); }
.p-note { display: flex; align-items: baseline; gap: .6rem; color: var(--grey); max-width: var(--mesure); }
.p-note .state { flex: none; transform: translateY(1px); }

/* ---------- Projets voisins ---------- */
.p-voisins { display: grid; border-top: 1px solid var(--line); }
.p-voisin { display: grid; gap: .9rem; padding: clamp(2.5rem, 7vh, 4.5rem) var(--gutter); border-bottom: 1px solid var(--line); overflow: clip; }
.p-voisin--suiv { justify-items: end; text-align: right; }
.p-voisin__sens { color: var(--grey); transition: color 300ms; }
.p-voisin__titre {
  font-size: clamp(2.4rem, 8.5vw, 9.5rem); font-weight: 900; font-stretch: 80%; line-height: .88; letter-spacing: -.04em;
  max-width: 14ch; text-wrap: balance; transition: color 300ms, transform 600ms var(--ease-out);
}
.p-voisin:focus-visible { outline-offset: -6px; }
@media (hover: hover) {
  .p-voisin:hover .p-voisin__titre { color: var(--accent); }
  .p-voisin--prec:hover .p-voisin__titre { transform: translateX(1.5vw); }
  .p-voisin--suiv:hover .p-voisin__titre { transform: translateX(-1.5vw); }
  .p-voisin:hover .p-voisin__sens { color: var(--paper); }
}
.p-tous { display: flex; justify-content: center; padding: clamp(2.5rem, 7vh, 4.5rem) var(--gutter) 0; }

/* ---------- Mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce) {
  .galerie__lien img, .p-voisin__titre, .p-liste__corps { transition: none; }
}

/* Titre masqué avant son apparition (JS) ; filet de sécurité si le script ne se lance pas. */
.js:not(.rm) .p-hero__titre .line__inner { transform: translateY(110%); animation: p-secours 0s 2.5s forwards; }
@keyframes p-secours { to { transform: none; } }

/* ==========================================================================
   Ajouts du portfolio (générateur scripts/build-projets.mjs)
   ========================================================================== */

/* ---------- Valeurs par défaut sans JavaScript ----------
   Le HTML ne porte aucun attribut style (CSP style-src 'self') : teinte et
   proportions sont posées par projet.js. Sans lui, ces valeurs s'appliquent. */
.projet { --tint: #8E97AB; }
.media-vide, .video, .p-couverture__cadre { aspect-ratio: 16 / 9; }
.galerie { --ratio: 4 / 3; }
.comparatif { --pos: 50%; --ratio: 16 / 10; }
.lightbox__figure img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 8px; }

/* ---------- Code dans le texte ---------- */
.p-texte code, .p-liste__texte code, .legende code, .p-choix__ecarte code {
  font-family: var(--font-mono); font-size: .86em; padding: .08em .35em; border-radius: 4px;
  background: #16171C; border: 1px solid #23252D; color: var(--paper); overflow-wrap: anywhere;
}

/* ---------- liste : plusieurs paragraphes par élément ---------- */
.p-liste__texte + .p-liste__texte { margin-top: .35rem; }

/* ---------- choix (réutilise .tools__list / .tool) ---------- */
.p-choix .tool { grid-template-columns: minmax(0, .85fr) minmax(0, 1.4fr); gap: .9rem 2.5rem; align-items: start; padding: 1.75rem 0; }
.p-choix__tete { display: grid; gap: .6rem; transition: transform 450ms var(--ease-out); }
.p-choix__ecarte { color: var(--grey); font-size: .78rem; }
.p-choix__ecarte s { text-decoration-color: var(--accent); text-decoration-thickness: 1px; }
.p-choix__texte { font-size: clamp(1rem, 1.05vw, 1.1rem); gap: .9em; }
@media (hover: hover) { .p-choix .tool:hover .p-choix__tete { transform: translateX(1.4rem); } }
@media (max-width: 760px) { .p-choix .tool { grid-template-columns: minmax(0, 1fr); } }

/* ---------- schéma (SVG en ligne, classes d-* des fichiers src/projets/<slug>/*.svg) ---------- */
.p-schema__cadre {
  overflow-x: auto; padding: clamp(1rem, 2.5vw, 2rem); border: 1px solid var(--bord); border-radius: var(--rayon);
  background:
    radial-gradient(120% 90% at 90% 0%, color-mix(in oklab, var(--tint) 14%, transparent) 0, transparent 60%),
    #0B0B0E;
  color: var(--paper-dim); scrollbar-width: thin; scrollbar-color: #2E3038 transparent;
}
.p-schema__cadre:focus-visible { outline-offset: 2px; }
.p-schema svg { display: block; width: 100%; min-width: 40rem; height: auto; }
.d-box        { fill: #121318; stroke: #3A3D47; stroke-width: 1.2; }
.d-box-accent { fill: color-mix(in oklab, var(--accent) 7%, #0B0B0E); stroke: var(--accent); stroke-width: 1.3; }
.d-zone       { fill: none; stroke: #3A3D47; stroke-dasharray: 8 3 2 3; }
.d-line       { stroke: #8C909A; fill: none; }
.d-line-accent { stroke: var(--accent); fill: none; }
.d-text       { fill: var(--paper); font-family: var(--font-display); font-weight: 600; font-stretch: 88%; font-size: 13px; }
.d-text-muted { fill: var(--grey); font-family: var(--font-mono); font-size: 9.5px; }
.p-schema marker path { fill: #8C909A; }
@media (min-width: 960px) {
  .bloc--schema { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(1.5rem, 3vw, 3rem); }
  .bloc--schema > .bloc__entete { grid-column: 1 / 5; position: sticky; top: calc(var(--header-h) + 2rem); margin-bottom: 0; }
  .bloc--schema > .p-schema { grid-column: 5 / 13; min-width: 0; }
  .bloc--choix { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(1.5rem, 3vw, 3rem); }
  .bloc--choix > .bloc__entete { grid-column: 1 / 5; position: sticky; top: calc(var(--header-h) + 2rem); margin-bottom: 0; }
}