/* ══════════════════════════════════════════════════════════
   Atelier VS Design — feuille de style commune aux pages projets
   Partagée par toutes les pages de /projets/.
   index.html reste tout-en-un et n'utilise PAS ce fichier.
   ══════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
:root {
  --vert:#38453E; --or:#B5956A; --or-fonce:#8C7355; --beige:#F5F0E8;
  --texte:#2E3833; --texte-doux:rgba(46,56,51,0.72);
}
html { scroll-behavior:smooth; }
body {
  background:var(--beige); color:var(--texte);
  font-family:'Jost',sans-serif; font-weight:300;
  -webkit-font-smoothing:antialiased;
  cursor:none;
}
a { color:inherit; text-decoration:none; }
img { max-width:100%; display:block; }

/* ══════════════════════════════════════════════════════════
   CURSEUR PERSONNALISÉ — repris de l'accueil (point doré + label)
   ⚠️ `cursor:none` doit être posé sur TOUT élément interactif : sans ça
   le pointeur système du navigateur réapparaît par-dessus le point doré
   (les liens, boutons et champs ont leur propre curseur par défaut).
   ══════════════════════════════════════════════════════════ */
a, button, input, label,
.gallery img, .duo img, .compare, .cmp-range, .fv-player, #zoom {
  cursor:none;
}
#cursor-dot {
  position:fixed; width:7px; height:7px;
  background:var(--or); border-radius:50%;
  pointer-events:none; z-index:9999;
  transform:translate(-50%,-50%);
  transition:transform 0.15s ease, background 0.3s ease, opacity 0.3s ease;
}
#cursor-label {
  position:fixed; pointer-events:none; z-index:9999;
  font-family:'Jost',sans-serif; font-size:9px; font-weight:300;
  letter-spacing:0.26em; text-transform:uppercase; white-space:nowrap;
  opacity:0; transform:translateY(2px);
  transition:opacity 0.3s ease, transform 0.3s ease, color 0.3s ease;
}
/* Point blanc sur fond sombre (zoom plein écran) */
body.cursor-dark #cursor-dot { background:rgba(255,255,255,0.85); }
/* Survol d'un lien ou d'un bouton → point agrandi */
body.cursor-hover #cursor-dot { transform:translate(-50%,-50%) scale(1.8); background:var(--or); }
/* Contextes : galerie → « Voir », comparateur → « Glisser », vidéo → « Regarder » */
/* « Voir » en or foncé plutôt qu'en vert : plus clair et plus chaud sur le beige,
   accordé au point doré. ⚠️ NE PAS passer à l'or clair `#B5956A` — à 9 px sur
   beige le contraste tombe à 2,5:1 et le mot devient illisible. `#8C7355` = 3,9:1. */
body.cursor-voir #cursor-label      { opacity:1; color:var(--or-fonce); transform:translateY(0); }
body.cursor-glisser #cursor-label   { opacity:1; color:rgba(181,149,106,0.9); transform:translateY(0); }
body.cursor-regarder #cursor-label  { opacity:1; color:rgba(181,149,106,0.9); transform:translateY(0); }
body.cursor-dark.cursor-voir #cursor-label { color:rgba(245,240,232,0.75); }
/* Pas de curseur personnalisé sur tactile */
@media (hover:none) {
  #cursor-dot, #cursor-label { display:none; }
  body, a, button, input, label,
  .gallery img, .duo img, .compare, .cmp-range, .fv-player, #zoom { cursor:auto; }
}

/* ── En-tête ── */
.p-nav {
  display:flex; align-items:center; justify-content:space-between;
  padding:1.4rem 2.5rem; border-bottom:1px solid rgba(56,69,62,0.12);
  position:sticky; top:0; background:rgba(245,240,232,0.9);
  backdrop-filter:blur(10px); z-index:10;
}
.p-nav .logo img { height:34px; width:auto; }
.p-nav .back {
  font-size:11px; letter-spacing:0.22em; text-transform:uppercase;
  color:var(--vert); transition:color 0.25s ease;
}
.p-nav .back:hover { color:var(--or); }
@media (max-width:560px) {
  .p-nav { padding:1.1rem 1.25rem; }
  .p-nav .logo img { height:28px; }
  .p-nav .back { font-size:10px; letter-spacing:0.16em; }
}

/* ── Conteneurs ── */
.wrap { max-width:760px; margin:0 auto; padding:0 1.5rem; }
.wide { max-width:1200px; margin:0 auto; padding:0 1.5rem; }
@media (min-width:768px) { .wrap, .wide { padding:0 2rem; } }
.media { width:100%; }

/* ── En-tête projet (réf. lightbox) ── */
.p-hero { padding:4.5rem 0 2.6rem; text-align:center; }
.eyebrow {
  font-size:11px; letter-spacing:0.3em; text-transform:uppercase;
  color:var(--or); margin-bottom:1.3rem;
}
h1 {
  font-family:'Cormorant Garamond',serif; font-weight:300;
  font-size:clamp(34px,5vw,58px); line-height:1.14; color:var(--vert);
}
.p-meta {
  font-family:'Jost',sans-serif; font-size:13px; font-weight:300;
  letter-spacing:0.16em; text-transform:uppercase;
  color:var(--texte-doux); margin-top:1.3rem;
}
.p-meta .sep { color:var(--or); margin:0 0.55rem; font-size:15px; position:relative; top:1px; }
@media (max-width:560px) {
  .p-hero { padding:3rem 0 2rem; }
  .p-meta { font-size:11px; letter-spacing:0.12em; line-height:2.1; }
  .p-meta .sep { margin:0 0.35rem; }
}
.divider { width:44px; height:1px; background:var(--or); margin:2.8rem auto 0; }

/* ── Le mandat (prose d'introduction) ── */
.mandat { padding:0 0 1rem; }
.mandat p {
  font-size:clamp(16px,2vw,18px); line-height:1.85;
  color:var(--texte-doux); margin-bottom:1.35rem;
}
.mandat p:last-child { margin-bottom:0; }
.mandat p.lead {
  font-family:'Cormorant Garamond',serif; font-weight:300;
  font-size:clamp(21px,2.8vw,27px); line-height:1.5;
  color:var(--vert); margin-bottom:1.8rem;
}

/* ── Chapitre (titre + texte + images) ── */
.chapitre { margin-top:clamp(4rem,7vw,7rem); }
.chapitre-tete { max-width:760px; margin:0 auto clamp(1.8rem,3vw,2.6rem); }
.chapitre h2 {
  font-family:'Cormorant Garamond',serif; font-weight:300; font-style:italic;
  font-size:clamp(27px,3.6vw,40px); line-height:1.2; color:var(--vert);
}
.chapitre h2 + p { margin-top:1.1rem; }
.chapitre-tete p {
  font-size:clamp(15px,1.9vw,17px); line-height:1.8; color:var(--texte-doux);
}

/* ── Étiquette de section ── */
.media-label {
  text-align:center; font-size:11px; letter-spacing:0.28em; text-transform:uppercase;
  color:var(--or); margin:3.4rem 0 1.3rem;
}

/* ── Vidéo FPV (click-to-play) ── */
.fv-player {
  position:relative; width:100%; aspect-ratio:16 / 9;
  border-radius:4px; overflow:hidden; cursor:none;
  border:1px solid rgba(181,149,106,0.35);
  box-shadow:0 24px 55px rgba(56,69,62,0.2);
}
.fv-poster { width:100%; height:100%; object-fit:cover;
  transition:transform 0.6s cubic-bezier(0.16,1,0.3,1), filter 0.4s ease; }
.fv-player:hover .fv-poster { transform:scale(1.02); filter:brightness(0.92); }
.fv-play { position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:none; border:none; cursor:none; }
.fv-play svg { width:80px; height:80px; filter:drop-shadow(0 4px 16px rgba(0,0,0,0.45));
  transition:transform 0.35s cubic-bezier(0.16,1,0.3,1); }
.fv-player:hover .fv-play svg { transform:scale(1.1); }
.fv-player iframe { position:absolute; inset:0; width:100%; height:100%; border:none; }

/* ══════════════════════════════════════════════════════════
   Comparateur « rendu 3D ↔ réalisé »
   Les deux images sont recadrées dans un même cadre 16/9 pour
   que les points de vue se superposent. N'utiliser QUE sur une
   paire prise sous le même angle.
   ══════════════════════════════════════════════════════════ */
.compare {
  --pos:50%;
  position:relative; width:100%; aspect-ratio:16 / 9;
  overflow:hidden; border-radius:3px; background:#d8d0c4;
  box-shadow:0 24px 55px rgba(56,69,62,0.18);
  touch-action:pan-y;
}
.compare img {
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  user-select:none; -webkit-user-drag:none; pointer-events:none;
}
/* Rattrapage de cadrage : le rendu et la photo n'ont jamais exactement le même
   champ. `--zoom-avant` zoome le rendu pour faire coïncider les deux points de vue.
   Réglage mesuré pour Manicouagan (superposition des deux images) : 1.25.
   ⚠️ Ça ne corrige QUE l'échelle. Si le photographe n'était pas exactement où était
   la caméra 3D, il reste de la PARALLAXE (les objets proches et lointains se
   décalent différemment) — aucun réglage 2D ne la rattrape. Le vrai correctif est
   de refaire le rendu depuis le point de vue de la photo, et de remettre 1 ici. */
.compare { --zoom-avant:1; }
.compare .cmp-avant { transform:scale(var(--zoom-avant)); transform-origin:center; }
.compare .cmp-apres { clip-path:inset(0 0 0 var(--pos)); }
.compare .cmp-barre {
  position:absolute; top:0; bottom:0; left:var(--pos);
  width:2px; background:var(--beige); transform:translateX(-1px);
  box-shadow:0 0 14px rgba(28,34,30,0.45); pointer-events:none;
}
.compare .cmp-poignee {
  position:absolute; top:50%; left:var(--pos);
  width:52px; height:52px; margin:-26px 0 0 -26px; border-radius:50%;
  background:rgba(56,69,62,0.62); border:1.5px solid var(--or);
  backdrop-filter:blur(3px);
  display:flex; align-items:center; justify-content:center; gap:5px;
  pointer-events:none; transition:transform 0.25s cubic-bezier(0.16,1,0.3,1);
}
.compare:hover .cmp-poignee { transform:scale(1.08); }
.compare .cmp-poignee svg { width:22px; height:22px; color:var(--or); }
.compare .cmp-etiq {
  position:absolute; bottom:1.1rem; z-index:2;
  font-family:'Jost',sans-serif; font-size:10px; font-weight:400;
  letter-spacing:0.2em; text-transform:uppercase;
  color:var(--beige); background:rgba(28,34,30,0.55);
  padding:0.45rem 0.9rem; border-radius:50px;
  backdrop-filter:blur(4px); pointer-events:none;
}
.compare .cmp-etiq-g { left:1.1rem; }
.compare .cmp-etiq-d { right:1.1rem; }
/* Curseur natif invisible posé par-dessus : il reste la commande ACCESSIBLE
   (clavier, lecteur d'écran) et la source de la valeur, mais il ne reçoit plus
   les clics ni les touchers — `projet.js` gère le geste lui-même.
   ⚠️ `pointer-events:none` est indispensable : sinon le navigateur applique aussi
   son propre comportement de <input range> au doigt et les deux se contredisent. */
.compare .cmp-range {
  position:absolute; inset:0; width:100%; height:100%;
  margin:0; opacity:0; cursor:none; appearance:none; -webkit-appearance:none;
  background:none; pointer-events:none;
}
.compare .cmp-range::-webkit-slider-thumb { -webkit-appearance:none; width:60px; height:100%; }
.compare .cmp-range::-moz-range-thumb { width:60px; height:100%; border:none; background:none; }
.compare .cmp-range:focus-visible { outline:none; }
.compare:focus-within { outline:2px solid var(--or); outline-offset:3px; }
@media (max-width:560px) {
  .compare .cmp-poignee { width:44px; height:44px; margin:-22px 0 0 -22px; }
  .compare .cmp-etiq { font-size:9px; padding:0.35rem 0.7rem; bottom:0.7rem; }
  .compare .cmp-etiq-g { left:0.7rem; } .compare .cmp-etiq-d { right:0.7rem; }
}
.compare-note {
  text-align:center; font-size:11px; letter-spacing:0.12em;
  color:var(--texte-doux); margin-top:1.1rem; font-style:italic;
}
/* ⚠️ Le comparateur reste en 16/9 À TOUTES LES TAILLES. Deux variantes mobiles
   ont été essayées puis RETIRÉES le 2026-09-16 — ne pas les reproposer :
   - bord à bord (390 × 260 px) : Guillaume le trouvait moins beau quand
     l'image touche les bords de l'écran ;
   - cadre 3/2 (342 × 228 px) : le rendu est nativement en 16/9, donc en 3/2
     les DEUX images subissent un recadrage latéral et le moindre écart de
     cadrage entre elles devient visible — l'alignement paraissait moins bon.
   Le gain de hauteur ne vaut pas la perte d'alignement : c'est l'alignement
   qui fait tout l'intérêt du comparateur. */

/* ── Duo côte à côte (rendu / réalisé, avant / après) ──
   ⚠️ Les deux images ne sont JAMAIS recadrées : elles sont mises à la MÊME
   HAUTEUR et gardent leur largeur naturelle. C'est ce qui permet d'apparier
   un rendu en paysage avec une photo en portrait sans couper ni plafond ni
   plancher. NE PAS revenir à un `aspect-ratio` fixe + `object-fit:cover` :
   une image portrait y perd la moitié de sa hauteur. */
.duo {
  display:flex; align-items:flex-start;
  gap:clamp(10px,1.6vw,20px); margin-top:1.4rem;
}
/* Chaque figure prend une largeur proportionnelle au rapport largeur/hauteur de
   son image (`--ar`, à écrire en `style=` dans le HTML). Résultat : toutes les
   images de la rangée tombent automatiquement à la MÊME HAUTEUR, la rangée
   remplit toujours la largeur, et ça marche pour n'importe quelle combinaison
   (paysage+portrait, deux paysages, deux portraits). */
.duo figure {
  flex:var(--ar,1.5) 1 0; min-width:0;
  position:relative; margin:0; overflow:hidden;
  border-radius:3px; background:#d8d0c4;
}
.duo img { width:100%; height:auto; display:block; cursor:none; }
.duo .duo-etiq {
  position:absolute; top:0.8rem; left:0.8rem;
  font-size:10px; letter-spacing:0.2em; text-transform:uppercase;
  color:var(--beige); background:rgba(28,34,30,0.55);
  padding:0.4rem 0.8rem; border-radius:50px; backdrop-filter:blur(4px);
}
/* ⚠️ Sur mobile, le duo reste CÔTE À CÔTE. Il était empilé, et Guillaume l'a
   relevé : deux images l'une sous l'autre, on ne peut plus les comparer d'un
   coup d'œil — or comparer est toute la raison d'être du bloc. Elles sont plus
   petites, mais on tape dessus pour les ouvrir en plein écran, où elles se
   suivent dans la séquence : un balayage passe de l'une à l'autre en grand. */
@media (max-width:640px) {
  .duo { gap:8px; }
}

/* ── Galerie (une colonne, grandes images contenues) ── */
.gallery { margin-top:0.4rem; }
.gallery figure {
  margin:0 0 clamp(22px,3.2vw,44px); overflow:hidden;
  border-radius:3px;
}
.gallery figure:last-child { margin-bottom:0; }
.gallery img {
  width:100%; height:auto; display:block; cursor:none;
  /* ⚠️ Plafond de hauteur : sans lui, une photo PORTRAIT affichée sur 1136 px
     de large fait 1700 px de haut et ne tient pas dans l'écran. Avec le plafond,
     l'image rétrécit en gardant son rapport et reste visible en entier.
     C'est aussi le filet de sécurité pour toute future image très haute. */
  max-height:85vh;
  /* `dvh` = hauteur RÉELLEMENT visible. Indispensable dans les navigateurs
     intégrés (Facebook, Instagram) qui ajoutent leurs propres barres en haut
     et en bas : `vh` les ignore et l'image dépasse quand même. Le `vh` au-dessus
     reste le repli pour les navigateurs qui ne connaissent pas `dvh`. */
  max-height:85dvh;
  margin-inline:auto;
  transition:transform 0.7s cubic-bezier(0.16,1,0.3,1), filter 0.4s ease;
}
.gallery figure:hover img { transform:scale(1.02); filter:brightness(0.97); }
@media (max-width:768px) { .gallery figure { margin-bottom:16px; } }

/* ── Paire d'images dans la galerie (deux portraits côte à côte) ──
   Même mécanique `--ar` que le bloc `.duo` : la largeur de chaque figure est
   proportionnelle au rapport largeur/hauteur de son image, donc les deux
   tombent à la même hauteur sans recadrage. Sur mobile, elles se remettent
   l'une sous l'autre en pleine largeur. */
.gallery-paire {
  display:flex; align-items:flex-start;
  gap:clamp(10px,1.6vw,20px);
  margin:0 0 clamp(22px,3.2vw,44px);
}
.gallery-paire figure { flex:var(--ar,1.5) 1 0; min-width:0; margin-bottom:0; }
.gallery-paire:last-child { margin-bottom:0; }
@media (max-width:640px) {
  .gallery-paire { flex-direction:column; margin-bottom:16px; }
  .gallery-paire figure { flex:none; margin-bottom:16px; }
  .gallery-paire figure:last-child { margin-bottom:0; }
}

/* ── Témoignage ── */
.p-temoignage {
  margin:clamp(4.5rem,8vw,8rem) auto 0; max-width:760px;
  padding:clamp(2.5rem,5vw,3.5rem) 0; text-align:center;
  border-top:1px solid rgba(140,115,85,0.22);
  border-bottom:1px solid rgba(140,115,85,0.22);
}
.p-temoignage blockquote {
  font-family:'Cormorant Garamond',serif; font-weight:300; font-style:italic;
  font-size:clamp(20px,2.6vw,27px); line-height:1.55;
  color:rgba(56,69,62,0.88);
}
.p-temoignage blockquote::before {
  content:'\201C'; color:var(--or); font-size:42px;
  line-height:0.5; vertical-align:-0.4em; margin-right:0.15em;
}
.p-temoignage blockquote::after {
  content:'\201D'; color:var(--or); font-size:42px;
  line-height:0.5; vertical-align:-0.4em; margin-left:0.1em;
}
.p-temoignage .t-nom {
  margin-top:1.8rem; font-size:11px; letter-spacing:0.22em;
  text-transform:uppercase; color:var(--or-fonce);
}
.p-temoignage .t-role {
  margin-top:0.45rem; font-size:10px; letter-spacing:0.12em;
  color:rgba(56,69,62,0.5);
}

/* ── Crédits du projet ── */
.p-credits { margin:clamp(3.5rem,6vw,5.5rem) auto 0; max-width:760px; }
.p-credits h2 {
  text-align:center; font-size:11px; letter-spacing:0.28em;
  text-transform:uppercase; color:var(--or); font-weight:400;
  font-family:'Jost',sans-serif; margin-bottom:2rem;
}
.p-credits dl {
  display:grid; grid-template-columns:auto 1fr;
  gap:0.85rem 1.8rem; font-size:13.5px; line-height:1.65;
}
.p-credits dt {
  color:rgba(56,69,62,0.5); letter-spacing:0.05em;
  white-space:nowrap;
}
.p-credits dd { color:var(--texte-doux); }
@media (max-width:560px) {
  .p-credits dl { grid-template-columns:1fr; gap:0.2rem; }
  .p-credits dt { margin-top:0.85rem; font-size:10px;
    letter-spacing:0.16em; text-transform:uppercase; }
  .p-credits dt:first-child { margin-top:0; }
}

/* ── Bas de page ── */
.p-foot { text-align:center; padding:5rem 1.5rem 4.5rem; }
.p-foot .cta {
  display:inline-block; font-size:11px; letter-spacing:0.22em; text-transform:uppercase;
  color:var(--vert); border:1px solid rgba(56,69,62,0.35);
  padding:0.95rem 2.1rem; border-radius:50px; transition:all 0.25s ease;
}
.p-foot .cta:hover { background:var(--vert); color:var(--beige); border-color:var(--vert); }
.p-copy { margin-top:2.6rem; font-size:12px; letter-spacing:0.1em; color:var(--texte-doux); }

/* ── Zoom plein écran (réf. lightbox) ── */
#zoom {
  position:fixed; inset:0; z-index:100; display:none;
  /* Même raison que la galerie : dans les navigateurs intégrés (Facebook,
     Instagram), `inset:0` couvre le cadre de mise en page, pas la zone
     réellement visible. On borne explicitement la hauteur. */
  height:100vh; height:100dvh;
  flex-direction:column; align-items:center; justify-content:center;
  background:rgba(28,34,30,0.97); backdrop-filter:blur(6px);
  /* Le remplissage réserve la place du bouton « Fermer » en haut. */
  padding:4rem 1.5rem 1.2rem;
}
#zoom.open { display:flex; }
/* La photo occupe toute la place restante, la barre du bas garde la sienne :
   les flèches ne peuvent donc JAMAIS se retrouver par-dessus l'image.
   ⚠️ `min-height:0` est obligatoire, sinon un élément flex refuse de rétrécir
   sous sa taille intrinsèque et la photo déborde. */
.z-scene {
  flex:1 1 auto; min-height:0; width:100%;
  display:flex; align-items:center; justify-content:center;
}
#zoom img {
  max-width:100%; max-height:100%; object-fit:contain; border-radius:2px;
  /* ⚠️ `min-width/min-height:0` : sans ça, un élément flex refuse de rétrécir
     sous sa taille intrinsèque et une grande image déborde de l'écran. */
  min-width:0; min-height:0;
  user-select:none; -webkit-user-drag:none; transition:opacity 0.2s ease;
}
#zoom img.fading { opacity:0; }
/* Coupe la transition le temps de masquer l'ancienne image d'un coup :
   pas de fondu sortant, donc aucune attente avant de passer à la suivante. */
#zoom img.instant { transition:none; }
.z-close {
  position:fixed; top:1.4rem; right:1.8rem;
  font-family:'Jost',sans-serif; font-size:11px; letter-spacing:0.22em; text-transform:uppercase;
  color:rgba(245,240,232,0.5); cursor:none; background:none; border:none; padding:0;
  transition:color 0.2s ease; z-index:2;
}
.z-close:hover { color:rgba(245,240,232,0.9); }
/* ── Barre de navigation, sous la photo ──
   Les flèches encadrent le compteur. Elles étaient auparavant posées SUR la
   photo (`position:absolute` sur les côtés) : elles mordaient sur l'image et
   devenaient inutilisables sur mobile. Ici elles sont dans le flux, donc elles
   ne peuvent plus recouvrir quoi que ce soit, à n'importe quelle taille. */
.z-bar {
  flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
  gap:clamp(1rem,4vw,2.2rem); padding-top:1.1rem;
}
.z-arrow {
  background:none; border:none; color:rgba(245,240,232,0.45);
  display:flex; align-items:center; justify-content:center;
  cursor:none; padding:10px;
  transition:color 0.25s ease, transform 0.25s ease;
}
.z-arrow:hover { color:#F5F0E8; }
.z-arrow.prev:hover { transform:translateX(-4px); }
.z-arrow.next:hover { transform:translateX(4px); }
.z-arrow svg { width:30px; height:30px; }
.z-counter {
  font-family:'Jost',sans-serif; font-size:10px; letter-spacing:0.18em;
  color:rgba(245,240,232,0.4);
  min-width:4.5em; text-align:center;   /* évite que les flèches sautent */
}
@media (max-width:768px) {
  #zoom { padding:3.4rem 0.75rem 0.9rem; }
  .z-arrow { padding:14px; }             /* cible tactile plus généreuse */
  .z-arrow svg { width:26px; height:26px; }
}