/* =====================================================================================================================
   YC Creations — fenêtre projet (Accueil et Portfolio) : lecteur de visuels, textes du projet, projet précédent / suivant
   ===================================================================================================================== */
/* ===== FENÊTRE PROJET (reprise de la page Portfolio, v473) : .po-modal et ses lecteurs de slides .po-screen ===== */
.po-m-shell{padding-left:var(--gutter) !important; padding-right:var(--gutter) !important;}
.po-m-bar, .po-m-panels, .po-m-nav{max-width:none !important; margin-left:0 !important; margin-right:0 !important;}
html.po-lock, html.po-lock body{overflow:hidden;}
.po-tags{display:flex; flex-wrap:wrap; gap:8px;}
.po-tags span{font-size:12px; letter-spacing:0.04em; padding:5px 11px; border-radius:999px; color:rgba(255,255,255,0.7); border:1px solid rgba(255,255,255,0.12); background:rgba(255,255,255,0.03);}
.po-screen{position:relative;}
.po-scr-frame{position:relative; padding:12px; border-radius:var(--rayon-m); background:linear-gradient(160deg, rgba(255,255,255,0.09), rgba(255,255,255,0.02)); border:1px solid rgba(255,255,255,0.10);
    box-shadow:0 50px 100px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.08);}
.po-scr-frame::before{content:''; position:absolute; left:10%; right:10%; bottom:-60px; height:120px; z-index:-1; border-radius:50%; background:radial-gradient(closest-side, rgba(110,193,228,0.28), transparent); filter:blur(20px);}
.po-scr-stage{position:relative; aspect-ratio:16/9; border-radius:var(--rayon-s); overflow:hidden; background:#0b1015; cursor:grab; touch-action:pan-y;}
.po-scr-stage:active{cursor:grabbing;}
.po-s{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; opacity:0; user-select:none; -webkit-user-drag:none; backface-visibility:hidden;}
.po-s.is-on{opacity:1;}
.po-scr-glare{position:absolute; inset:12px; border-radius:var(--rayon-s); pointer-events:none; background:linear-gradient(115deg, rgba(255,255,255,0.10) 0%, transparent 28%, transparent 70%, rgba(255,255,255,0.04));}
.po-scr-bar{display:flex; align-items:center; gap:16px; margin-top:22px; padding:0 4px;}
.po-scr-btn{flex-shrink:0; width:46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.14); cursor:pointer;
    transition:background .4s ease, border-color .4s ease, color .4s ease, transform .5s cubic-bezier(.22,1,.36,1); aspect-ratio:1;}
.po-scr-btn svg{width:18px; height:18px; flex-shrink:0;}
.po-scr-btn:hover{background:var(--BleuYC); border-color:var(--BleuYC); color:#0A0D10; transform:scale(1.08);}
.po-scr-btn:active{transform:scale(.94);}
.po-scr-segs{flex:1; display:flex; gap:8px;}
.po-seg{flex:1; height:18px; padding:0; border:0; background:none; cursor:pointer; display:flex; align-items:center;}
.po-seg i{position:relative; display:block; width:100%; height:3px; border-radius:3px; background:rgba(255,255,255,0.14); overflow:hidden; transition:height .3s ease;}
.po-seg:hover i{height:5px;}
.po-seg i::after{content:''; position:absolute; inset:0; background:linear-gradient(90deg, var(--BleuYC), #A9DAEF); transform:scaleX(0); transform-origin:left;}
.po-seg.is-done i::after{transform:scaleX(1);}
.po-seg.is-on i::after{animation:poSeg var(--dur, 4200ms) linear forwards; animation-play-state:paused;}
.po-screen.is-playing .po-seg.is-on i::after{animation-play-state:running;}
.po-scr-count{flex-shrink:0; min-width:64px; text-align:center; font-family:'Nohemi',sans-serif; font-size:14px; color:var(--muted); letter-spacing:0.06em;}
.po-scr-count b{color:#fff; font-weight:600;}
.po-modal{position:fixed; inset:0; z-index:200; visibility:hidden; pointer-events:none; transition:visibility 0s linear .8s;}
.po-modal.is-open{visibility:visible; pointer-events:auto; transition:none;}
.po-m-bg{position:absolute; inset:0; background:radial-gradient(90% 70% at 80% 0%, rgba(31,110,145,0.35), transparent 60%), rgba(8,11,14,0.975);
    opacity:0; transition:opacity .7s cubic-bezier(.4,0,.2,1);}
.po-modal.is-open .po-m-bg{opacity:1; transition:opacity .85s cubic-bezier(.4,0,.2,1);}
.po-m-shell{position:absolute; inset:0; overflow-y:auto; overscroll-behavior:contain; padding:26px 64px 40px; box-sizing:border-box; opacity:0; transition:opacity .3s ease;}
.po-modal.is-open .po-m-shell{opacity:1; transition:none;}
.po-m-bar{max-width:1320px; margin:0 auto 36px; display:flex; align-items:center; justify-content:space-between;}
.po-m-brand{display:flex; align-items:center; gap:16px; font-size:12px; letter-spacing:0.18em; text-transform:uppercase; color:var(--muted);}
.po-m-brand img{height:28px; width:auto; display:block;}
.po-m-close{position:relative; width:56px; height:56px; border-radius:50%; border:1px solid rgba(255,255,255,0.16); background:rgba(255,255,255,0.04); cursor:pointer; transition:background .4s ease, border-color .4s ease, transform .7s cubic-bezier(.22,1,.36,1); flex-shrink:0; aspect-ratio:1;}
.po-m-close span{position:absolute; left:50%; top:50%; width:20px; height:1.5px; margin:-0.75px 0 0 -10px; background:#fff; transform:rotate(45deg); transition:background .4s ease;}
.po-m-close span + span{transform:rotate(-45deg);}
.po-m-close:hover{background:var(--GoldYC); border-color:var(--GoldYC); transform:rotate(90deg);}
.po-m-close:hover span{background:#0A0D10;}
.po-m-panels{max-width:1320px; margin:0 auto;}
.po-m-p{display:none; grid-template-columns:minmax(0,1.35fr) minmax(0,0.9fr); gap:64px; align-items:start;}
.po-m-p.is-on{display:grid;}
.po-m-info{display:flex; flex-direction:column; align-items:flex-start; gap:16px; padding-top:6px;}
.po-m-head{display:flex; align-items:center; justify-content:space-between; width:100%; margin-bottom:6px;}
.po-m-logo{height:calc(30px * var(--lh, 1)); width:auto; max-width:170px; object-fit:contain; filter:brightness(0) invert(1);}
.po-m-n{font-family:'Nohemi',sans-serif; font-size:14px; color:var(--muted); letter-spacing:0.08em;}
.po-m-cat{font-size:12px; letter-spacing:0.16em; text-transform:uppercase; color:var(--BleuYC); font-weight:600;}
.po-m-name{margin:0; font-family:'Nohemi',sans-serif; font-weight:700; font-size:clamp(40px, 4.2vw, 64px); line-height:1; letter-spacing:-0.02em; color:#fff;}
.po-m-text{margin:0; font-size:16px; line-height:1.75; color:rgba(255,255,255,0.72);}
.po-m-sub{margin-top:8px; font-size:12px; letter-spacing:0.18em; text-transform:uppercase; color:var(--muted);}
.po-m-nav{flex-shrink:0; width:100%; max-width:1320px; margin:0 auto; padding-top:28px; border-top:1px solid rgba(255,255,255,0.08); display:flex; justify-content:space-between; gap:24px;}
.po-m-shell{display:flex; flex-direction:column; overflow:hidden;}
.po-m-bar{flex-shrink:0; width:100%;}
.po-m-panels{flex:1 1 auto; min-height:0; width:100%; overflow-y:auto; overscroll-behavior:contain; padding-bottom:40px; scrollbar-width:thin; scrollbar-color:rgba(255,255,255,0.16) transparent;}
.po-m-step{min-width:0;}
.po-m-step span{min-width:0;}
.po-m-step small, .po-m-step b{white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.po-m-step small .po-m-w{display:inline;}
.po-m-step{display:flex; align-items:center; gap:16px; padding:0; border:0; background:none; cursor:pointer; color:#fff; text-align:left;}
.po-m-step.is-next{text-align:right;}
.po-m-step span{display:flex; flex-direction:column; gap:4px;}
.po-m-step small{font-size:12px; letter-spacing:0.16em; text-transform:uppercase; color:var(--muted);}
.po-m-step b{font-family:'Nohemi',sans-serif; font-weight:300; font-size:24px; letter-spacing:-0.01em; transition:color .4s ease;}
.po-m-step i{width:54px; height:54px; border-radius:50%; display:flex; align-items:center; justify-content:center; border:1px solid rgba(255,255,255,0.16); transition:background .4s ease, border-color .4s ease, color .4s ease, transform .6s cubic-bezier(.22,1,.36,1); flex-shrink:0; aspect-ratio:1;}
.po-m-step i svg{width:20px; height:20px; flex-shrink:0;}
.po-m-step:hover b{color:var(--BleuYC);}
.po-m-step:hover i{background:var(--BleuYC); border-color:var(--BleuYC); color:#0A0D10; transform:translateX(-4px);}
.po-m-step.is-next:hover i{transform:translateX(4px);}
@media (max-width:1100px){
  .po-m-p{grid-template-columns:1fr; gap:32px;}
}
@media (max-width:760px){
  .po-scr-bar{gap:8px;}
  .po-scr-btn{width:40px; height:40px; flex-shrink:0; aspect-ratio:1;}
  .po-m-shell{padding:18px 20px 20px;}
  .po-m-bar{margin-bottom:24px;}
  .po-m-brand img{height:22px;}
  .po-m-panels{padding-bottom:24px;}
  .po-m-nav{padding-top:18px;}
  .po-m-step small .po-m-w{display:none;}
  .po-m-step b{font-size:20px;}
  .po-m-step i{width:44px; height:44px; flex-shrink:0; aspect-ratio:1;}
}
.po-m-shell{padding-left:var(--gutter) !important; padding-right:var(--gutter) !important;}
.po-m-bar, .po-m-panels, .po-m-nav{max-width:none !important; margin-left:0 !important; margin-right:0 !important;}
html.po-lock{scrollbar-gutter:stable;}
.po-ghost{position:fixed; left:0; top:0; z-index:260; pointer-events:none; overflow:hidden; transform-origin:0 0; will-change:transform; background:#0b1015;}
.po-gl{position:absolute; left:50%; top:50%; overflow:hidden; transform-origin:50% 50%; will-change:transform;}
.po-gl > img{display:block; width:100%; height:100%; object-fit:cover;}
.po-m-media{transition:opacity .4s ease;}
.po-modal.is-fly .po-m-media{opacity:0; transition:none;}
.po-modal.is-plain.is-enter .po-m-media{animation:poFade .5s ease .1s backwards;}
.po-modal.is-enter .po-m-info > *{animation:poRise 1.1s cubic-bezier(.16,1,.3,1) backwards; animation-delay:calc(var(--t0, .62s) + .1s + var(--q, 0) * 90ms);}
.po-modal.is-enter .po-m-bar, .po-modal.is-enter .po-m-nav{animation:poFade .6s ease backwards; animation-delay:calc(var(--t0, .62s) + 480ms);}
.po-m-info > :nth-child(2){--q:1;}
.po-m-info > :nth-child(3){--q:2;}
.po-m-info > :nth-child(4){--q:3;}
.po-m-info > :nth-child(5){--q:4;}
.po-m-info > :nth-child(6){--q:5;}
.po-m-info > :nth-child(7){--q:6;}
.po-m-panels{position:relative; overflow-x:hidden;}
.po-m-p.is-leave{display:grid; position:absolute; left:0; right:0; pointer-events:none;}
@media (prefers-reduced-motion: reduce){
  .po-modal.is-enter .po-m-info > *, .po-modal.is-enter .po-m-bar, .po-modal.is-enter .po-m-nav, .po-modal.is-plain.is-enter .po-m-media, .po-m-p.is-arrive .po-m-info > *{animation:none;}
  .po-m-bg, .po-modal.is-open .po-m-bg{transition:opacity .25s linear;}
  .po-m-shell{transition:opacity .25s linear;}
  .po-modal.is-open .po-m-shell{transition:opacity .25s linear;}
}
@keyframes poSeg{from{transform:scaleX(0);} to{transform:scaleX(1);}}
@keyframes poRise{from{opacity:0; transform:translate3d(0,22px,0); filter:blur(8px);}}
@keyframes poFade{from{opacity:0;}}
/*=====BLOCK=====*/
/* v522 — fenêtres projet : mention de confidentialité. Note NDA en bas de la colonne de texte, 7e ligne de .po-m-info
     (même cascade d'apparition, --q:6). Astérisques en Or YC.
     v523 — le libellé « Visuels d'illustration* » passe sous la barre à toutes les tailles, aligné sur le début des
     segments : la barre des images retrouve toute sa largeur. Note un peu plus petite (12 px). */
.po-scr-note{flex-shrink:0; font-family:'Plus Jakarta Sans',sans-serif; font-size:12px; line-height:1.2; letter-spacing:0.12em; text-transform:uppercase; color:var(--muted); white-space:nowrap;}
.po-ast{color:var(--GoldYC, #D9A94F); font-style:normal;}
.po-m-nda{margin:0; max-width:52ch; padding-top:16px; border-top:1px solid rgba(255,255,255,0.08); font-family:'Plus Jakarta Sans',sans-serif;
    font-size:12px; line-height:1.6; font-style:italic; color:var(--muted);}
.po-screen.is-modal .po-scr-bar{flex-wrap:wrap; row-gap:10px;}
.po-screen.is-modal .po-scr-note{order:9; flex:0 0 100%; box-sizing:border-box; padding-left:calc(46px + 16px); text-align:left;}
@media (max-width:760px){
  .po-screen.is-modal .po-scr-note{padding-left:calc(40px + 8px);}
}

/* =====================================================================================================================
   Ajout du site (demande de Yassine) — ordinateur et grands écrans (≥ 1 101 px) : la fenêtre projet tient dans l'écran,
   sans défilement. L'image prend plus de place, la mention de confidentialité (NDA) passe sous l'image (.is-d ; sur
   tablette et mobile, elle reste sous le texte : .is-m), et tout se resserre un peu sur les écrans peu hauts.
   ===================================================================================================================== */
.po-m-nda.is-d{display:none;}
@media (min-width:1101px){
  .po-m-nda.is-m{display:none;}
  .po-m-nda.is-d{display:block; max-width:none; margin-top:22px;}
  .po-m-panels{overflow:hidden; padding-bottom:0; display:flex; flex-direction:column; justify-content:center;}
  .po-m-p{grid-template-columns:minmax(0,1.5fr) minmax(0,0.9fr); align-items:start;}
  .po-m-info{padding-top:0;}   /* le texte commence à la hauteur du haut de l'image */
  /* l'image (16:9) ne dépasse jamais la hauteur de la zone du projet, légende et mention NDA déduites (≈ 200 px) */
  .po-m-panels{container-type:size;}
  .po-m-media .po-screen.is-modal{max-width:calc((100cqh - 200px) * 16 / 9);}
}
@media (min-width:1101px) and (max-height:860px){
  .po-m-shell{padding-top:18px; padding-bottom:22px;}
  .po-m-bar{margin-bottom:20px;}
  .po-m-info{gap:12px;}
  .po-m-name{font-size:clamp(36px, 3.4vw, 52px);}
  .po-m-text{font-size:15px; line-height:1.65;}
  .po-m-nav{padding-top:18px;}
  .po-m-step i{width:46px; height:46px;}
  .po-m-step b{font-size:21px;}
}

/* Ajout du site (demande de Yassine) : au passage d'un projet à l'autre, le texte entre lui aussi en douceur, élément
   par élément (montée, sortie de flou), pendant que le projet glisse en place. Plus long et plus ample qu'à l'origine. */
.po-m-p.is-arrive .po-m-info > *{animation:poRise 1.1s cubic-bezier(.16,1,.3,1) backwards; animation-delay:calc(.22s + var(--q, 0) * 80ms);}