/* =====================================================================
   Aurnélie Lelo — Portfolio v2
   Structure : nom géant + projets en avant + page projet (esprit Isaac León)
   Direction artistique : crème chaud + encre + accent vif par projet,
   grosse grotesque contemporaine, gros contraste (esprit Salt Productions)
   Signature : authentique · vivant · contemporain
   ===================================================================== */

:root{
  /* Couleurs de base — modifiables ici */
  --cream:   #fdfaf1;   /* fond crème chaud */
  --cream-2: #f4eedd;   /* crème plus profond */
  --ink:     #141210;   /* encre presque noire */
  --ink-2:   #3a352c;   /* encre douce */
  --muted:   #837a66;   /* texte secondaire */
  --line:    #e2dac6;   /* filets */
  --accent:  #f0431e;   /* accent vif par défaut (surchargé par projet) */
  --dark:    #171310;   /* fond des sections sombres */
  --orange:  #e4531b;   /* orange « Afrodyssée » */
  --stage:   color-mix(in srgb, #e4531b 15%, #f4eedd);   /* fond commun des visuels de projet */

  --sans: "Archivo", system-ui, -apple-system, sans-serif;
  --exp:  "Archivo Expanded", "Archivo", sans-serif;

  --gutter: clamp(18px, 4.5vw, 80px);
  --maxw: 1680px;
  --ease: cubic-bezier(.16,1,.3,1);
  --ease2: cubic-bezier(.76,0,.24,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body{
  margin:0; background:var(--cream); color:var(--ink);
  font-family:var(--sans); font-size:clamp(15px,1.02vw,17px); line-height:1.55;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden;
}
body.lock{ overflow:hidden; }
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; border:0; background:none; }
::selection{ background:var(--accent); color:var(--cream); }

.grain{ position:fixed; inset:0; z-index:9990; pointer-events:none; opacity:.045; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* --------------------------------------------------- INTRO */
.intro{ position:fixed; inset:0; z-index:9999; background:var(--cream);
  display:flex; align-items:center; justify-content:center; flex-direction:column;
  transition:transform 1s var(--ease2); }
.intro.done{ transform:translateY(-101%); }
.intro__inner{ text-align:center; line-height:.86; }
.intro__word{ display:block; font-family:var(--exp); font-weight:800; text-transform:uppercase;
  font-size:clamp(48px,12vw,190px); letter-spacing:-.03em; color:var(--ink);
  transform:translateY(115%); opacity:0; }
.intro.go .intro__word{ animation:introUp .9s var(--ease) forwards; }
.intro.go .intro__word--2{ animation-delay:.12s; color:var(--accent); }
@keyframes introUp{ to{ transform:none; opacity:1; } }
.intro__count{ position:absolute; bottom:clamp(18px,4vw,44px); right:var(--gutter);
  font-family:var(--exp); font-weight:700; font-size:clamp(30px,7vw,90px); color:var(--accent); line-height:1; }

/* --------------------------------------------------- CURSOR */
.cursor{ position:fixed; top:0; left:0; z-index:9980; pointer-events:none;
  width:82px; height:82px; margin:-41px 0 0 -41px; border-radius:50%;
  background:var(--ink); color:#fff; border:2px solid #fff; display:grid; place-items:center;
  opacity:0; transition:opacity .3s var(--ease); will-change:transform,opacity;
  font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.cursor span{ transform:scale(.4); transition:transform .3s var(--ease); }
.cursor.show{ opacity:1; } .cursor.show span{ transform:scale(1); }
@media (hover:none){ .cursor{ display:none; } }

/* --------------------------------------------------- TOP BAR */
.top{ position:fixed; top:0; left:0; right:0; z-index:900;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:16px var(--gutter); }
.top::before{ content:""; position:absolute; inset:0; background:linear-gradient(var(--cream),transparent);
  opacity:0; transition:opacity .4s; z-index:-1; }
.top.solid::before{ opacity:.9; }
.burger{ display:inline-flex; align-items:center; gap:11px; color:var(--ink); }
.burger__ico{ display:flex; flex-direction:column; justify-content:center; gap:5px; width:27px; height:16px; }
.burger__ico span{ display:block; width:100%; height:2.4px; background:currentColor; border-radius:2px;
  transition:transform .4s var(--ease), opacity .3s; }
.burger em{ font-style:normal; font-size:13px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; }
.menu-open .burger__ico span:nth-child(1){ transform:translateY(7.4px) rotate(45deg); }
.menu-open .burger__ico span:nth-child(2){ opacity:0; }
.menu-open .burger__ico span:nth-child(3){ transform:translateY(-7.4px) rotate(-45deg); }
.menu-open .burger{ color:var(--cream); position:relative; z-index:860; }
.menu-open .top__cta{ opacity:0; pointer-events:none; }
.menu-open .top__brand{ opacity:0 !important; }

.top__brand{ font-family:var(--exp); font-weight:700; text-transform:uppercase; letter-spacing:.01em;
  font-size:clamp(14px,1.3vw,17px); position:absolute; left:50%; transform:translateX(-50%);
  opacity:0; transition:opacity .4s; pointer-events:none; }
.top.solid .top__brand{ opacity:1; pointer-events:auto; }
.top__cta{ font-size:13px; font-weight:700; letter-spacing:.02em; text-transform:uppercase;
  display:inline-flex; align-items:center; gap:7px; border:1.6px solid var(--ink); border-radius:100px; padding:9px 16px;
  transition:background .3s, color .3s, gap .3s var(--ease); }
.top__cta i{ font-style:normal; }
.top__cta:hover{ background:var(--accent); border-color:var(--accent); color:var(--cream); gap:11px; }

/* --------------------------------------------------- MENU OVERLAY */
.menu{ position:fixed; inset:0; z-index:850; background:var(--ink); color:var(--cream);
  display:flex; flex-direction:column; justify-content:center; padding:0 var(--gutter);
  clip-path:inset(0 0 100% 0); transition:clip-path .7s var(--ease2); visibility:hidden; }
.menu.open{ clip-path:inset(0 0 0 0); visibility:visible; }
.menu ul{ list-style:none; margin:0; padding:0; }
.menu li{ overflow:hidden; }
.menu li a{ display:flex; align-items:baseline; gap:min(4vw,40px);
  font-family:var(--exp); font-weight:700; text-transform:uppercase; letter-spacing:-.02em;
  font-size:clamp(40px,10vw,120px); line-height:1.02; padding:4px 0;
  transform:translateY(110%); transition:transform .7s var(--ease), color .3s; }
.menu.open li a{ transform:none; }
.menu.open li:nth-child(2) a{ transition-delay:.06s; }
.menu.open li:nth-child(3) a{ transition-delay:.12s; }
.menu.open li:nth-child(4) a{ transition-delay:.18s; }
.menu li a span{ font-family:var(--sans); font-size:.22em; font-weight:600; color:var(--accent); }
.menu li a:hover{ color:var(--accent); }
.menu__foot{ display:flex; flex-wrap:wrap; gap:14px 30px; margin-top:clamp(30px,6vh,60px);
  font-size:13px; letter-spacing:.04em; text-transform:uppercase; color:rgba(253,250,241,.65); }
.menu__foot a{ border-bottom:1px solid rgba(253,250,241,.3); padding-bottom:2px; }
.menu__foot a:hover{ color:var(--accent); border-color:var(--accent); }

/* --------------------------------------------------- INFO LINE */
.infoline{ border-bottom:1.4px solid var(--ink); overflow:hidden; padding:11px 0; margin-top:64px; }
.infoline__track{ display:flex; width:max-content; white-space:nowrap; animation:marq 40s linear infinite; }
.infoline__track span{ font-size:12.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; display:inline-flex; align-items:center; }
.infoline__track span::after{ content:"✦"; color:var(--accent); margin:0 28px; }
@keyframes marq{ to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce){ .infoline__track{ animation:none; } }

/* --------------------------------------------------- HERO (nom géant) */
.hero{ padding:clamp(24px,5vh,60px) var(--gutter) clamp(30px,6vh,70px); max-width:var(--maxw); margin:0 auto; }
.hero__name{ font-family:var(--exp); font-weight:800; text-transform:uppercase;
  font-size:clamp(58px,17.5vw,300px); line-height:.82; letter-spacing:-.045em; margin:0; }
.hero__name .reveal-line{ display:block; overflow:hidden; padding-block:.06em; margin-block:-.06em; }
.hero__name .reveal-line > *{ display:inline-block; transform:translateY(112%); }
.hero__name .reveal-line.in > *{ transform:none; transition:transform 1s var(--ease); }
.hero__reg{ font-size:.24em; vertical-align:.9em; color:var(--accent); -webkit-text-stroke:0; }
.hero__bottom{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:24px; margin-top:clamp(26px,4vh,48px); }
.hero__line{ font-size:clamp(16px,1.5vw,21px); max-width:46ch; margin:0; color:var(--ink-2); font-weight:450; }
.hero__scroll{ display:inline-flex; align-items:center; gap:11px; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); white-space:nowrap; }
.scrollcue{ width:14px; height:30px; overflow:visible; display:block; }
.scrollcue__base{ stroke:var(--muted); opacity:.55; }
.scrollcue__glow{ stroke:var(--accent); stroke-dasharray:7 36; stroke-dashoffset:36; animation:cueflow 2.1s linear infinite; }
@keyframes cueflow{ to{ stroke-dashoffset:-7; } }
@media (prefers-reduced-motion: reduce){ .scrollcue__glow{ animation:none; stroke-dashoffset:0; stroke-dasharray:none; } }

/* --------------------------------------------------- shared tags (marqueurs de chapitre) */
.tag{ font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--ink);
  display:inline-flex; align-items:center; gap:11px; margin:0 0 30px;
  border-bottom:2px solid var(--ink); padding-bottom:9px; }
.tag__i{ color:var(--accent); font-family:var(--exp); }
.tag--light{ color:var(--cream); border-bottom-color:rgba(253,250,241,.45); }

/* --------------------------------------------------- WORK (projets empilés) */
.work{ padding:clamp(50px,9vh,110px) var(--gutter) clamp(40px,7vh,90px); max-width:var(--maxw); margin:0 auto; }
.work__head{ display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:clamp(56px,9vh,120px); }
.work__head .tag{ margin:0; }
.work__count{ font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--ink); margin:0;
  border-bottom:2px solid var(--ink); padding-bottom:9px; }
.work__count span{ color:var(--accent); }
.work__list{ display:flex; flex-direction:column; gap:clamp(56px,10vh,130px); }

.pj{ cursor:pointer; opacity:0; transform:translateY(40px); transition:opacity .9s var(--ease), transform 1s var(--ease); }
.pj.in{ opacity:1; transform:none; }

.pj__head{ display:flex; justify-content:space-between; align-items:flex-end; gap:20px;
  border-bottom:1.6px solid var(--ink); padding-bottom:14px; margin-bottom:clamp(16px,2vw,26px); }
.pj__headL{ display:flex; align-items:baseline; gap:14px; }
.pj__idx{ font-family:var(--exp); font-weight:700; font-size:14px; color:var(--ink); }
.pj__t{ font-family:var(--exp); font-weight:700; text-transform:uppercase; letter-spacing:-.02em;
  font-size:clamp(26px,4.6vw,62px); line-height:.96; margin:0; transition:color .3s; }
.pj:hover .pj__t{ color:var(--orange); }
.pj__headR{ text-align:right; flex-shrink:0; }
.pj__meta{ font-size:12.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); margin:0 0 9px; white-space:nowrap; }
.pj__meta b{ color:var(--ink); font-weight:600; }
.pj__tags{ display:flex; flex-wrap:wrap; gap:7px; justify-content:flex-end; }
.pj__tags span{ font-size:10.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--muted);
  border:1px solid var(--line); border-radius:100px; padding:4px 10px; }

.pj__media{ position:relative; width:fit-content; max-width:100%; margin:0 auto; }
.pj__media img{ display:block; max-width:100%; max-height:86vh; width:auto; height:auto; object-fit:contain;
  border-radius:4px; transform:scale(1); transition:transform 1s var(--ease);
  box-shadow:0 22px 55px -32px rgba(20,18,16,.4); }
.pj:hover .pj__media img{ transform:scale(1.015); }
.pj__go{ position:absolute; right:16px; bottom:16px; z-index:2; width:56px; height:56px; border-radius:50%;
  background:var(--ink); color:var(--cream); display:grid; place-items:center; font-size:21px;
  transform:scale(0) rotate(-30deg); transition:transform .5s var(--ease), background .3s; }
.pj:hover .pj__go{ transform:none; background:var(--orange); }

/* --------------------------------------------------- ABOUT */
.about{ padding:clamp(50px,9vh,110px) var(--gutter); max-width:var(--maxw); margin:0 auto; }
.about__statement{ margin:0 0 clamp(40px,7vh,80px); }
.about__statement h2{ font-family:var(--exp); font-weight:700; text-transform:uppercase; letter-spacing:-.02em;
  font-size:clamp(30px,5.4vw,84px); line-height:.98; margin:0; max-width:16ch; }
.rot{ color:var(--accent); display:inline-block; }
.rot::before{ content:attr(data-w); }
.about__grid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(30px,5vw,80px); align-items:start; }
.about__portrait{ border-radius:8px; overflow:hidden; background:var(--cream-2); aspect-ratio:4/5; position:sticky; top:90px; }
.about__portrait img{ width:100%; height:100%; object-fit:cover; object-position:center 22%; }
.about__text p{ font-size:clamp(15px,1.15vw,18px); color:var(--ink-2); margin:0 0 18px; max-width:56ch; }
/* bouton « Mon CV » (ouvre le PDF, téléchargeable depuis le lecteur) */
.about__cv{ display:inline-flex; align-items:center; gap:10px; margin-top:6px; padding:12px 22px;
  border:1.4px solid var(--ink); border-radius:100px; font-family:var(--exp); font-weight:600;
  font-size:13px; letter-spacing:.04em; text-transform:uppercase; color:var(--ink);
  transition:background .3s var(--ease), color .3s var(--ease), border-color .3s; }
.about__cv svg{ width:17px; height:17px; }
.about__cv:hover{ background:var(--ink); color:var(--cream); border-color:var(--ink); }
.about__services{ margin-top:40px; border-top:1.4px solid var(--ink); }
.svc{ display:grid; grid-template-columns:auto 1fr; gap:16px; padding:18px 0; border-bottom:1px solid var(--line); align-items:start; }
.svc__n{ width:11px; height:11px; border-radius:50%; background:var(--orange); margin-top:7px; flex-shrink:0; }
.svc h3{ font-family:var(--exp); font-weight:700; text-transform:uppercase; font-size:15px; letter-spacing:.01em; margin:0 0 5px; }
.svc p{ margin:0; color:var(--muted); font-size:14px; }

/* --------------------------------------------------- REVIEWS (carrousel) */
.reviews{ background:var(--ink); color:var(--cream); padding:clamp(84px,15vh,190px) var(--gutter); overflow:hidden; }
.reviews .tag{ max-width:860px; margin-left:auto; margin-right:auto; margin-bottom:clamp(48px,8vh,90px); }

.carousel{ max-width:860px; margin:0 auto; }
.carousel__viewport{ position:relative; }
.carousel__stage{ position:relative; overflow:hidden; padding:20px; transition:height .55s var(--ease); }

.carousel__stage .rev{ position:absolute; top:0; left:50%; width:min(100%,510px); margin:0;
  border:1.4px solid rgba(253,250,241,.22); border-radius:16px; padding:clamp(26px,2.6vw,36px) clamp(24px,2.6vw,34px);
  display:flex; flex-direction:column; gap:20px; background:var(--ink);
  transform:translateX(-50%) scale(.8); opacity:0; z-index:1; pointer-events:none;
  transition:transform .7s var(--ease), opacity .7s var(--ease), border-color .4s; }
.carousel__stage .rev.is-active{ transform:translateX(-50%) scale(1); opacity:1; z-index:3; pointer-events:auto; }
.carousel__stage .rev.is-active:hover{ border-color:rgba(253,250,241,.4); }
.carousel__stage .rev.is-next{ transform:translateX(calc(-50% + 84%)) scale(.86); opacity:.13; z-index:2; }
.carousel__stage .rev.is-prev{ transform:translateX(calc(-50% - 84%)) scale(.86); opacity:.13; z-index:2; }

.rev__q{ font-family:var(--sans); font-weight:450; font-size:clamp(15px,1.1vw,18px); line-height:1.55; margin:0; color:rgba(253,250,241,.94); }
.rev__q::before{ content:"“"; color:var(--orange); font-family:var(--exp); font-weight:700; font-size:1.5em; line-height:0; margin-right:2px; vertical-align:-.35em; }
.rev__a{ display:flex; align-items:center; gap:13px; }
.rev__logo{ width:52px; height:52px; border-radius:50%; overflow:hidden; flex-shrink:0; border:1px solid rgba(253,250,241,.28); background:#000; }
.rev__logo img{ width:100%; height:100%; object-fit:cover; object-position:center; display:block; }
.rev__a b{ font-size:13.5px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; line-height:1.2; }

.carousel__arrow{ position:absolute; top:50%; transform:translateY(-50%); z-index:5;
  width:46px; height:46px; border-radius:50%; border:1px solid rgba(253,250,241,.22);
  color:rgba(253,250,241,.65); background:rgba(20,18,16,.35); display:grid; place-items:center;
  transition:color .3s, border-color .3s, transform .35s var(--ease); }
.carousel__arrow svg{ width:20px; height:20px; }
.carousel__arrow:hover{ color:var(--cream); border-color:var(--orange); }
.carousel__arrow--prev{ left:-4px; } .carousel__arrow--next{ right:-4px; }
.carousel__arrow--prev:hover{ transform:translateY(-50%) translateX(-3px); }
.carousel__arrow--next:hover{ transform:translateY(-50%) translateX(3px); }

.carousel__dots{ display:flex; justify-content:center; gap:11px; margin-top:clamp(26px,4vh,44px); }
.carousel__dots .dot{ width:10px; height:10px; padding:0; border:0; appearance:none; -webkit-appearance:none;
  border-radius:50%; background:rgba(253,250,241,.3); box-sizing:border-box;
  transition:transform .4s var(--ease), background .3s; }
.carousel__dots .dot:hover{ background:rgba(253,250,241,.55); }
.carousel__dots .dot.is-active{ background:var(--orange); transform:scale(1.5); }

/* --------------------------------------------------- bulle « Voir » (survol couvertures) */
.cursor{ position:fixed; top:0; left:0; z-index:9985; pointer-events:none;
  width:66px; height:66px; margin:-6px 0 0 -33px; border-radius:50%;
  background:var(--orange); color:var(--cream); display:grid; place-items:center;
  font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  opacity:0; transition:opacity .3s var(--ease); will-change:transform; }
.cursor span{ transform:scale(.5); transition:transform .3s var(--ease); }
.cursor.show{ opacity:1; } .cursor.show span{ transform:scale(1); }
@media (hover:none){ .cursor{ display:none; } }

/* --------------------------------------------------- CONTACT */
.contact{ background:var(--accent); color:var(--cream); padding:clamp(60px,11vh,150px) var(--gutter); }
.contact .tag{ color:rgba(253,250,241,.7); } .contact .tag__i{ color:var(--cream); }
.contact__lead{ font-family:var(--sans); font-weight:450; font-size:clamp(16px,1.5vw,21px); line-height:1.5;
  color:rgba(253,250,241,.82); max-width:40ch; margin:8px 0 clamp(14px,2vh,22px); }
.contact__title{ font-family:var(--exp); font-weight:800; text-transform:uppercase; letter-spacing:-.03em;
  font-size:clamp(46px,10vw,168px); line-height:1.02; margin:0 0 clamp(34px,6vh,60px); }
.contact__mail{ display:inline-block; font-family:var(--exp); font-weight:600; font-size:clamp(20px,3vw,44px);
  padding-bottom:8px; border-bottom:3px solid rgba(253,250,241,.4); transition:border-color .3s, opacity .3s; word-break:break-word; }
.contact__mail:hover{ border-color:var(--cream); opacity:.85; }
.contact__row{ display:flex; flex-wrap:wrap; gap:16px 34px; margin-top:44px; font-size:14px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; }
.contact__row a{ position:relative; }
.contact__row a::after{ content:""; position:absolute; left:0; bottom:-4px; width:100%; height:1.6px; background:var(--cream); transform:scaleX(0); transform-origin:left; transition:transform .4s var(--ease); }
.contact__row a:hover::after{ transform:scaleX(1); }
.contact__row span{ margin-left:auto; opacity:.7; }

/* --------------------------------------------------- FOOTER */
.footer{ background:var(--dark); color:var(--cream); padding:30px var(--gutter); }
.footer__row{ display:flex; flex-wrap:wrap; gap:12px 26px; justify-content:space-between; align-items:center; font-size:12.5px; letter-spacing:.03em; color:rgba(253,250,241,.6); text-transform:uppercase; }
.footer__row p{ margin:0; }
.footer__top{ color:var(--cream); font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; }
.footer__top:hover{ color:var(--accent); }

/* --------------------------------------------------- OVERLAY / PAGE PROJET */
.overlay{ position:fixed; inset:0; z-index:1000; background:var(--cream); visibility:hidden; opacity:0;
  transition:opacity .45s var(--ease), visibility .45s; }
.overlay.open{ visibility:visible; opacity:1; }
.overlay__scroll{ position:absolute; inset:0; overflow-y:auto; overflow-x:hidden; }
.overlay__close{ position:fixed; top:16px; right:var(--gutter); z-index:1010; width:52px; height:52px; border-radius:50%;
  background:var(--ink); display:grid; place-items:center; transition:transform .4s var(--ease), background .3s; }
.overlay__close span{ position:absolute; width:19px; height:2.2px; background:var(--cream); }
.overlay__close span:nth-child(1){ transform:rotate(45deg); } .overlay__close span:nth-child(2){ transform:rotate(-45deg); }
.overlay__close:hover{ background:var(--accent); transform:rotate(90deg); }

.pd__hero{ padding:clamp(80px,12vh,140px) var(--gutter) clamp(24px,4vh,44px); max-width:var(--maxw); margin:0 auto; }
.pd__back{ display:inline-flex; align-items:center; gap:9px; font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:28px; }
.pd__back:hover{ color:var(--accent); }
.pd__title{ font-family:var(--exp); font-weight:800; text-transform:uppercase; letter-spacing:-.035em;
  font-size:clamp(44px,10vw,168px); line-height:.86; margin:0; }
.pd__bar{ display:flex; flex-wrap:wrap; gap:16px 26px; align-items:center; margin-top:22px; border-top:1.4px solid var(--ink); padding-top:16px; }
.pd__bar .k{ font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); display:block; margin-bottom:4px; }
.pd__bar .v{ font-family:var(--exp); font-weight:600; font-size:15px; }
.pd__bar .accentdot{ width:12px; height:12px; border-radius:50%; background:var(--accent); display:inline-block; }
.pd__grid{ max-width:var(--maxw); margin:8px auto 0; padding:0 var(--gutter); display:grid; grid-template-columns:1fr 1.35fr; gap:clamp(28px,5vw,70px); align-items:start; }
.pd__tags{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:22px; }
.pd__tags span{ font-size:11px; letter-spacing:.05em; text-transform:uppercase; border:1px solid var(--line); border-radius:100px; padding:6px 12px; color:var(--muted); }
.pd__link{ display:inline-flex; align-items:center; gap:9px; font-weight:700; font-size:13px; letter-spacing:.06em; text-transform:uppercase; border-bottom:2.4px solid var(--accent); padding-bottom:6px; }
.pd__side{ position:sticky; top:88px; }
.pd__desc p{ font-size:clamp(15px,1.2vw,19px); color:var(--ink-2); margin:0 0 18px; line-height:1.55; }
.pd__subhead{ font-family:"Archivo Expanded",Archivo,sans-serif; font-weight:700; font-size:clamp(18px,1.6vw,24px); color:var(--ink); letter-spacing:-.01em; line-height:1.15; margin:34px 0 14px; }
.pd__lead{ padding:clamp(34px,6vh,80px) var(--gutter) 0; max-width:var(--maxw); margin:0 auto; }
.pd__lead .pd__shot{ margin:0; }
.pd__videos{ display:flex; flex-wrap:wrap; justify-content:center; gap:clamp(16px,2.5vw,32px);
  padding:clamp(34px,6vh,80px) var(--gutter) 0; max-width:var(--maxw); margin:0 auto; }
.pd__video{ width:100%; max-width:380px; max-height:74vh; border-radius:10px; background:#000; display:block;
  box-shadow:0 22px 55px -32px rgba(20,18,16,.5); }

.pd__gallery{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(14px,2vw,26px); align-items:start;
  padding:clamp(34px,6vh,80px) var(--gutter) 0; max-width:var(--maxw); margin:0 auto; }
.pd__shot{ margin:0; border-radius:6px; overflow:hidden; background:var(--cream-2); cursor:pointer; position:relative; }
.pd__shot img{ width:100%; display:block; transition:transform .8s var(--ease); }
.pd__shot:hover img{ transform:scale(1.04); }
.pd__shot::after{ content:"⤢"; position:absolute; top:12px; right:14px; width:34px; height:34px; border-radius:50%;
  background:rgba(20,18,16,.55); color:var(--cream); display:grid; place-items:center; font-size:15px; opacity:0; transform:scale(.7); transition:.4s var(--ease); }
.pd__shot:hover::after{ opacity:1; transform:none; }
/* vidéo intégrée dans la galerie (à sa position) */
.pd__shot--video{ background:transparent; overflow:visible; cursor:pointer; display:flex; justify-content:center; align-items:flex-start; }
.pd__shot--video::after{ display:none; }
.pd__shot--video video{ width:auto; max-width:100%; max-height:80vh; display:block; border-radius:8px; background:#000;
  box-shadow:0 20px 55px -32px rgba(20,18,16,.5); pointer-events:none; }
/* pastille « lecture » : la vidéo s'ouvre dans la visionneuse au clic */
.pd__play{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) scale(.92); width:64px; height:64px; border-radius:50%; z-index:2;
  background:rgba(20,18,16,.55); color:var(--cream); display:grid; place-items:center; pointer-events:none;
  transition:.4s var(--ease); backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px); }
.pd__play svg{ width:26px; height:26px; margin-left:3px; }
.pd__shot--video:hover .pd__play, .pd__shot--video:focus-visible .pd__play{ transform:translate(-50%,-50%) scale(1); background:var(--orange); }
/* vignette vidéo YouTube dans la galerie (remplit la colonne, comme une image) */
.pd__shot--yt{ cursor:pointer; }
.pd__shot--yt img{ width:100%; display:block; aspect-ratio:16/9; object-fit:cover; }
.pd__shot--yt::after{ display:none; }
.pd__shot--yt:hover .pd__play, .pd__shot--yt:focus-visible .pd__play{ transform:translate(-50%,-50%) scale(1); background:var(--orange); }

/* navigation projet précédent / suivant */
.pd__nav{ border-top:1.4px solid var(--ink); margin-top:clamp(40px,7vh,90px); display:flex; flex-direction:column; }
.pd__navitem{ display:flex; align-items:center; gap:18px; padding:clamp(24px,3.4vw,48px) var(--gutter); }
.pd__navitem--next{ justify-content:space-between; }
.pd__navitem--prev{ justify-content:flex-start; border-top:1.4px solid var(--ink); }
.pd__navitem .lbl{ font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); display:block; margin-bottom:9px; }
.pd__navitem .t{ font-family:var(--exp); font-weight:800; text-transform:uppercase; letter-spacing:-.03em; font-size:clamp(22px,3.6vw,52px); line-height:.96; transition:color .3s; }
.pd__navitem:hover .t{ color:var(--accent); }
.pd__navitem .arrow{ font-size:clamp(26px,4vw,48px); color:var(--accent); flex-shrink:0; line-height:1; }

/* lightbox — image agrandie + carrousel */
.lightbox{ position:fixed; inset:0; z-index:1100; display:grid; grid-template-columns:auto 1fr auto; align-items:center;
  gap:clamp(6px,2vw,22px); padding:clamp(14px,4vw,56px);
  background:rgba(18,15,12,.5); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  opacity:0; visibility:hidden; transition:opacity .4s var(--ease), visibility .4s; }
.lightbox.open{ opacity:1; visibility:visible; }
.lightbox__fig{ margin:0; display:grid; place-items:center; min-width:0; }
.lightbox__img, .lightbox__media{ max-width:100%; max-height:84vh; width:auto; height:auto; object-fit:contain; border-radius:6px;
  box-shadow:0 30px 80px -30px rgba(0,0,0,.65); transform:scale(.96); transition:transform .45s var(--ease); }
.lightbox__media{ background:#000; }
.lightbox.open .lightbox__img, .lightbox.open .lightbox__media{ transform:scale(1); }
/* vidéo YouTube agrandie (ratio 16:9 contenu dans la visionneuse) */
.lightbox__yt{ width:100%; max-width:min(90vw, calc(84vh * 16 / 9)); aspect-ratio:16/9; max-height:84vh;
  border-radius:6px; overflow:hidden; box-shadow:0 30px 80px -30px rgba(0,0,0,.65);
  transform:scale(.96); transition:transform .45s var(--ease); background:#000; }
.lightbox.open .lightbox__yt{ transform:scale(1); }
.lightbox__yt iframe{ width:100%; height:100%; display:block; border:0; }
.lightbox__arrow{ position:relative; z-index:3; width:52px; height:52px; border-radius:50%; border:1px solid rgba(253,250,241,.3); color:var(--cream);
  background:rgba(20,18,16,.35); display:grid; place-items:center; transition:border-color .3s, background .3s; }
.lightbox__arrow svg{ width:22px; height:22px; }
.lightbox__arrow:hover{ border-color:var(--orange); background:rgba(20,18,16,.6); }
.lightbox__close{ position:fixed; top:18px; right:clamp(16px,4vw,40px); z-index:2; width:52px; height:52px; border-radius:50%;
  background:var(--ink); display:grid; place-items:center; transition:transform .4s var(--ease), background .3s; }
.lightbox__close span{ position:absolute; width:19px; height:2.2px; background:var(--cream); }
.lightbox__close span:nth-child(1){ transform:rotate(45deg); } .lightbox__close span:nth-child(2){ transform:rotate(-45deg); }
.lightbox__close:hover{ background:var(--orange); transform:rotate(90deg); }
.lightbox__count{ position:fixed; bottom:20px; left:0; right:0; text-align:center; color:rgba(253,250,241,.7); font-size:13px; letter-spacing:.1em; }

/* --------------------------------------------------- reveal utils */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .reveal,.pj,.hero__name .reveal-line > *{ opacity:1 !important; transform:none !important; }
  .intro{ display:none; }
}

/* --------------------------------------------------- responsive */
@media (max-width: 1080px){
  .about__grid{ grid-template-columns:1fr; }
  .about__portrait{ position:relative; top:0; max-width:440px; }
  .pd__grid{ grid-template-columns:1fr; }
  .pd__side{ position:relative; top:0; }
}
@media (max-width: 760px){
  .pj__head{ flex-direction:column; align-items:flex-start; gap:11px; }
  .pj__headR{ text-align:left; }
  .pj__meta{ white-space:normal; }
  .pj__tags{ justify-content:flex-start; }
  .top__cta{ display:none; }
  .pd__gallery{ grid-template-columns:1fr; }
  .lightbox{ gap:6px; padding:12px; }
  .lightbox__arrow{ width:42px; height:42px; }
  .carousel__arrow--prev{ left:-8px; } .carousel__arrow--next{ right:-8px; }
  .hero__bottom{ flex-direction:column; align-items:flex-start; }
  .contact__row span{ margin-left:0; width:100%; }
  .work__head{ flex-direction:column; align-items:flex-start; gap:14px; }
}

/* =====================================================================
   POLISH — audit « redesign » (élévation, sans changer l'identité)
   Typo sans orphelins · focus clavier · retour tactile au clic
   ===================================================================== */

/* 1. Équilibre des lignes : plus de mots seuls en fin de titre/paragraphe */
h1, h2, h3,
.pd__title, .pj__t, .contact__title, .about__statement h2, .pd__subhead{ text-wrap:balance; }
p, .about__text p, .pd__desc p, .hero__line, .contact__lead, .review__quote{ text-wrap:pretty; }

/* 2. Accessibilité clavier : anneau de focus cohérent, aux couleurs du site */
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:4px; }
a:focus-visible, button:focus-visible, .pj:focus-visible{ outline-offset:5px; }

/* 3. Retour tactile au clic (sensation physique) — on préserve les transitions existantes */
.top__cta{ transition:background .3s, color .3s, gap .3s var(--ease), transform .15s var(--ease); }
.about__cv{ transition:background .3s var(--ease), color .3s var(--ease), border-color .3s, transform .15s var(--ease); }
.footer__top{ transition:color .3s, transform .15s var(--ease); }
.top__cta:active, .about__cv:active, .footer__top:active{ transform:scale(.96); }
.carousel__arrow:active{ transform:translateY(-50%) scale(.92); }
.lightbox__arrow:active{ transform:scale(.92); }
@media (prefers-reduced-motion: reduce){
  .top__cta:active, .about__cv:active, .footer__top:active,
  .carousel__arrow:active, .lightbox__arrow:active{ transform:none; }
}