/* VAÏA Web Studio 3.6.3 — portfolio éditorial.
   Visuels : captures réelles uniquement. Aucune photographie générée.
   Styles limités à deux études de cas et aux blocs de présentation des projets. */

/* Les compositions comportent déjà un ordinateur et un téléphone : conserver le ratio 16:9. */
.hero--case.hero--portfolio .hero__cover {overflow:hidden; border-radius:clamp(14px, 2.2vw, 28px); border:1px solid var(--line-2); box-shadow:0 44px 105px -65px #000b,0 0 0 1px #fff1; background:transparent;}
.hero--case.hero--portfolio .hero__cover .viewport__bar {display:none;}
.hero--case.hero--portfolio .hero__cover .viewport__screen {aspect-ratio:16/9; overflow:hidden; background:transparent;}
.hero--case.hero--portfolio .hero__cover picture {display:block;width:100%;height:100%;}
.hero--case.hero--portfolio .hero__cover img {display:block;width:100%;height:100%;object-fit:contain;object-position:center;transform:none;}
.hero--case.hero--portfolio .hero__cover:hover img {transform:none;}
.hero--case.hero--portfolio .hero__cover--link:hover,.hero--case.hero--portfolio .hero__cover--link:focus-visible {transform:none; box-shadow:0 44px 105px -65px #000b,0 0 0 2px var(--accent);}

/* Identité spécifique à la marque montrée, sans altérer l'identité violette du studio. */
.vaia-case--vin {--case-accent:#a6d9ff;--case-rgb:47,132,206;--case-fg:#edf7ff;}
.vaia-case--laser {--case-accent:#e0bb76;--case-rgb:186,143,78;--case-fg:#fff5df;}
.vaia-case--vin .hero--portfolio {background:radial-gradient(ellipse 70% 50% at 85% 20%,#1f61986b,transparent 85%),linear-gradient(165deg,#071628 0%,#0a2947 54%,#040914 100%);}
.vaia-case--laser .hero--portfolio {background:radial-gradient(ellipse 62% 50% at 84% 13%,#b6924f38,transparent 80%),linear-gradient(160deg,#080808 0%,#1e1810 60%,#080608 100%);}
.vaia-case--vin .hero--portfolio,
.vaia-case--vin .section[data-hue]{--hue:47,132,206;--accent:#a6d9ff;--lav:#a6d9ff;--line:rgba(105,173,226,.18);--line-2:rgba(105,173,226,.29);--edge:rgba(105,173,226,.2);}
.vaia-case--laser .hero--portfolio,
.vaia-case--laser .section[data-hue]{--hue:186,143,78;--accent:#e0bb76;--lav:#e0bb76;--line:rgba(202,166,97,.16);--line-2:rgba(202,166,97,.30);--edge:rgba(202,166,97,.24);}
.vaia-case--vin .hero--portfolio .hero__title em,
.vaia-case--laser .hero--portfolio .hero__title em{background:none;-webkit-text-fill-color:var(--case-accent);color:var(--case-accent);}
.vaia-case--vin .hero--portfolio .hero__lead{color:#c9dbea;}
.vaia-case--laser .hero--portfolio .hero__lead{color:#d9cbb6;}
.vaia-case--vin .hero--portfolio .case-fiche,
.vaia-case--laser .hero--portfolio .case-fiche{border-color:rgba(var(--case-rgb),.29);background:rgba(0,0,0,.23);}
.vaia-case--vin .hero--portfolio .btn--ghost,
.vaia-case--laser .hero--portfolio .btn--ghost{border-color:rgba(var(--case-rgb),.40);}
.vaia-case--vin .hero--portfolio .btn--primary {background:linear-gradient(120deg,#e7f5ff,#b4deff);color:#071b2e;border-color:#bee6ff;}
.vaia-case--laser .hero--portfolio .btn--primary {background:linear-gradient(120deg,#f5dfb2,#caa367);color:#241606;border-color:#f2d69b;}
.vaia-case--vin .section[data-hue]{background-image:radial-gradient(55% 42% at 90% 50%,#217ab127,transparent),linear-gradient(180deg,#071121,#081525);}
.vaia-case--laser .section[data-hue]{background-image:radial-gradient(55% 45% at 85% 50%,#9d722720,transparent),linear-gradient(180deg,#0b0a09,#130e0a);}
.vaia-case--vin .section[data-hue] .section__title em,
.vaia-case--laser .section[data-hue] .section__title em{background:none;-webkit-text-fill-color:var(--case-accent);color:var(--case-accent);}
.vaia-case--vin .section[data-hue] .feature,
.vaia-case--vin .section[data-hue] .brief__card{background:linear-gradient(135deg,#2a699b18,#0b1a2caa);border-color:#7aadd324;}
.vaia-case--laser .section[data-hue] .feature,
.vaia-case--laser .section[data-hue] .brief__card{background:linear-gradient(135deg,#9b77201b,#16100aaa);border-color:#caab7030;}
.vaia-case--vin .section[data-hue] .btn--primary{background:#d7edff;color:#071c32;}
.vaia-case--laser .section[data-hue] .btn--primary{background:#dfbe84;color:#170f05;}

/* Listing : conserver la mise en page intacte, laisser les deux captures originales lisibles. */
.pcard--portfolio .viewport__screen,
.work__item--portfolio .work__shot .viewport__screen{aspect-ratio:16/9;background:#090b13;overflow:hidden;}
.pcard--portfolio .viewport__screen img,
.work__item--portfolio .work__shot img{height:100%;width:100%;object-fit:contain;object-position:center;transform:none;}
.pcard--portfolio .pcard__link:hover img,
.work__item--portfolio .work__media:hover img{transform:none;}
.pcard--portfolio .viewport{box-shadow:0 23px 58px -42px #000d;}
.pcard--portfolio .viewport__bar{background:#090b13;}
.work__item--portfolio .work__media{padding-right:0;padding-bottom:0;}
.work__item--portfolio.work__item--alt .work__media{padding-left:0;padding-bottom:0;}
.work__item--portfolio .work__shot{box-shadow:0 25px 75px -45px #000b;}

/* Aperçu des brouillons : totalement privé, non rendu pour les visiteurs. */
.vaia-draft-preview{padding-block:clamp(38px,6vw,82px);background:radial-gradient(60% 65% at 78% 25%,#32204a2b,transparent),#080612;}
.vaia-draft-preview__head{max-width:720px;margin-bottom:30px;}
.vaia-draft-preview__head p{margin-top:14px;color:var(--muted);}
.vaia-draft-preview__chip{display:inline-flex;margin-bottom:18px;padding:9px 13px;border:1px solid #ccb4ff50;border-radius:100px;font-size:.78rem;line-height:1.5;color:#e7d8ff;background:#8b57f21b;}
.vaia-draft-preview__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;}
.vaia-draft-preview__card{min-width:0;border-radius:24px;overflow:hidden;border:1px solid #ffffff26;background:#0e0b17;box-shadow:0 28px 56px -40px #000b;}
.vaia-draft-preview__card--vin{border-color:#80c1ef59;background:#07182d;}
.vaia-draft-preview__card--laser{border-color:#d6b27259;background:#12100c;}
.vaia-draft-preview__image{aspect-ratio:16/9;overflow:hidden;}
.vaia-draft-preview__image img{display:block;width:100%;height:100%;object-fit:contain;}
.vaia-draft-preview__copy{padding:24px 25px 28px;}
.vaia-draft-preview__status{font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:#cabbdd;}
.vaia-draft-preview__card--vin .vaia-draft-preview__status{color:#a7d9ff;}
.vaia-draft-preview__card--laser .vaia-draft-preview__status{color:#ebc887;}
.vaia-draft-preview__copy h3{margin-top:10px;font:500 clamp(1.4rem,2.5vw,2rem)/1.1 var(--f-display);}
.vaia-draft-preview__copy p{margin-top:12px;color:#d5cbdf;font-size:.9rem;line-height:1.65;}
.vaia-draft-preview__actions{display:flex;flex-wrap:wrap;gap:18px;margin-top:20px;}
.vaia-draft-preview__actions a{color:#f2e8ff;font-size:.86rem;text-decoration:underline;text-underline-offset:5px;}
.vaia-draft-preview__actions a:hover{color:#fff;}
@media (max-width:740px){
  .vaia-draft-preview__grid{grid-template-columns:1fr;}
  .vaia-draft-preview__copy{padding:21px;}
  .hero--case.hero--portfolio .hero__cover{border-radius:14px;}
  .hero--case.hero--portfolio .hero__cover .viewport__screen{aspect-ratio:16/9;}
}
@media (prefers-reduced-motion:reduce){
 .hero--case.hero--portfolio .hero__cover,
 .pcard--portfolio .viewport,
 .work__item--portfolio .work__shot{transition:none;}
}


/* VAÏA 3.6.4 — Finition des deux fiches, après examen des vidéos du 30/10.
   Tout est scindé à la classe du projet : aucune animation du studio n'est modifiée. */
:is(.vaia-case--vin, .vaia-case--laser) {
  --section: clamp(46px, 5.8vw, 78px);
}

/* Éviter le min-height 84svh et l'espace réservé aux visuels des autres pages.
   Les études de cas ont une grande couverture en dessous de leur texte. */
:is(.vaia-case--vin, .vaia-case--laser) .hero--case.hero--portfolio {
  display: block;
  min-height: 0;
  padding-block: clamp(30px, 3.8vw, 50px) clamp(36px, 4.6vw, 62px);
}
:is(.vaia-case--vin, .vaia-case--laser) .hero--portfolio .hero__cover {
  margin-top: clamp(24px, 3.3vw, 42px);
}
:is(.vaia-case--vin, .vaia-case--laser) .hero--portfolio .crumbs {
  margin-bottom: clamp(14px, 2.1vw, 24px);
}
:is(.vaia-case--vin, .vaia-case--laser) .section__head {
  margin-bottom: clamp(23px, 3vw, 38px);
}
:is(.vaia-case--vin, .vaia-case--laser) .section__intro {
  margin-top: 12px;
  line-height: 1.65;
}
:is(.vaia-case--vin, .vaia-case--laser) .brief__card {
  padding: clamp(20px, 2vw, 28px);
}
:is(.vaia-case--vin, .vaia-case--laser) .brief__card p:last-child {
  line-height: 1.58;
}
:is(.vaia-case--vin, .vaia-case--laser) .gallery__grid {
  gap: clamp(14px, 2vw, 25px);
}

/* Suppression du focus flou et des longues cascades mot à mot.
   Les titres et les captures doivent être nets, même en défilement rapide. */
.js :is(.vaia-case--vin, .vaia-case--laser) .t-split .w,
.js :is(.vaia-case--vin, .vaia-case--laser) .is-focus .w,
.js :is(.vaia-case--vin, .vaia-case--laser) .brief__card:not(.is-in) {
  opacity: 1;
  filter: none;
  transform: none;
  transition: none;
  transition-delay: 0ms;
}
.js :is(.vaia-case--vin, .vaia-case--laser) [data-reveal],
.js :is(.vaia-case--vin, .vaia-case--laser) [data-reveal]:not(.is-in) {
  opacity: 1;
  filter: none;
  transform: none;
  transition: none;
  transition-delay: 0ms;
}
:is(.vaia-case--vin, .vaia-case--laser) .focus-frame { display: none; }
:is(.vaia-case--vin, .vaia-case--laser) .t-split em .w,
:is(.vaia-case--vin, .vaia-case--laser) .is-focus em .w {
  background: none;
  color: var(--case-accent);
  -webkit-text-fill-color: currentColor;
}

/* Mobile : aucun grand espace vide au-dessus du hero, comparaison navigable
   au doigt, galerie téléphone compacte sans empiler trois longues captures. */
@media (max-width: 759px) {
  :is(.vaia-case--vin, .vaia-case--laser) {
    --section: clamp(34px, 8vw, 52px);
  }
  :is(.vaia-case--vin, .vaia-case--laser) .hero--case.hero--portfolio {
    min-height: 0;
    padding-top: 28px;
    padding-bottom: 34px;
  }
  :is(.vaia-case--vin, .vaia-case--laser) .hero--portfolio .hero__in {
    gap: 22px;
  }
  :is(.vaia-case--vin, .vaia-case--laser) .hero--portfolio .hero__title {
    font-size: clamp(2.05rem, 8vw, 3rem);
    overflow-wrap: break-word;
  }
  :is(.vaia-case--vin, .vaia-case--laser) .hero--portfolio .hero__cover {
    margin-top: 26px;
  }
  :is(.vaia-case--vin, .vaia-case--laser) .section__head {
    margin-bottom: 22px;
  }
  :is(.vaia-case--vin, .vaia-case--laser) .brief__grid {
    gap: 12px;
  }
  :is(.vaia-case--vin, .vaia-case--laser) .gallery--phones .gallery__grid {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    padding: 2px 1px 16px;
    -webkit-overflow-scrolling: touch;
  }
  :is(.vaia-case--vin, .vaia-case--laser) .gallery--phones .gallery__grid .phone {
    flex: 0 0 min(73vw, 265px);
    max-width: min(73vw, 265px);
    min-width: 0;
    scroll-snap-align: start;
  }
  :is(.vaia-case--vin, .vaia-case--laser) .gallery--phones .phone__screen {
    border-radius: 24px;
    padding: 6px;
  }
  :is(.vaia-case--vin, .vaia-case--laser) .gallery--phones .phone__screen img {
    border-radius: 18px;
  }
  :is(.vaia-case--vin, .vaia-case--laser) .gallery--grid .gallery__grid,
  :is(.vaia-case--vin, .vaia-case--laser) .proof__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  :is(.vaia-case--vin, .vaia-case--laser) *,
  :is(.vaia-case--vin, .vaia-case--laser) *::before,
  :is(.vaia-case--vin, .vaia-case--laser) *::after {
    scroll-behavior: auto;
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}


/* VAÏA 3.6.6 — Même fiche d'identité arrondie pour les DEUX études de cas.
   Une structure/espacement identiques ; seules les couleurs suivent la marque. */
.vaia-case--vin {
  --case-fiche-border: rgba(131, 199, 248, .28);
  --case-fiche-bg: linear-gradient(150deg, rgba(17, 55, 91, .78), rgba(8, 27, 49, .88));
  --case-fiche-row-border: rgba(155, 209, 249, .10);
  --case-fiche-row-bg: linear-gradient(105deg, rgba(36, 87, 132, .20), rgba(9, 30, 55, .43));
  --case-fiche-label: #a7cde7;
  --case-fiche-value: #f1f8ff;
}
.vaia-case--laser {
  --case-fiche-border: rgba(221, 184, 113, .32);
  --case-fiche-bg: linear-gradient(150deg, rgba(38, 30, 20, .83), rgba(12, 11, 10, .92));
  --case-fiche-row-border: rgba(221, 184, 113, .13);
  --case-fiche-row-bg: linear-gradient(105deg, rgba(94, 71, 35, .24), rgba(22, 18, 13, .48));
  --case-fiche-label: #dfbd85;
  --case-fiche-value: #fff6e6;
}
:is(.vaia-case--vin, .vaia-case--laser) .hero--portfolio .case-fiche {
  align-self: end;
  min-width: 0;
  margin: 0;
  padding: clamp(12px, 1.55vw, 18px);
  border: 1px solid var(--case-fiche-border);
  border-radius: clamp(19px, 2vw, 26px);
  background: var(--case-fiche-bg);
  box-shadow: 0 24px 56px -34px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(225, 245, 255, .06);
  overflow: hidden;
}
:is(.vaia-case--vin, .vaia-case--laser) .hero--portfolio .case-fiche dl {
  display: grid;
  gap: 8px;
  margin: 0;
  min-width: 0;
}
:is(.vaia-case--vin, .vaia-case--laser) .hero--portfolio .case-fiche dl > div {
  display: grid;
  grid-template-columns: minmax(85px, 118px) minmax(0, 1fr);
  align-items: start;
  gap: clamp(10px, 1.6vw, 20px);
  min-width: 0;
  padding: clamp(13px, 1.5vw, 18px) clamp(14px, 1.65vw, 20px);
  border: 1px solid var(--case-fiche-row-border);
  border-radius: 14px;
  background: var(--case-fiche-row-bg);
}
:is(.vaia-case--vin, .vaia-case--laser) .hero--portfolio .case-fiche dt {
  min-width: 0;
  padding-top: 3px;
  color: var(--case-fiche-label);
  font-size: .67rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .11em;
}
:is(.vaia-case--vin, .vaia-case--laser) .hero--portfolio .case-fiche dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--case-fiche-value);
  font-size: clamp(.91rem, 1.12vw, 1.04rem);
  font-weight: 500;
  line-height: 1.52;
  letter-spacing: -.014em;
}
@media (max-width: 579px) {
  :is(.vaia-case--vin, .vaia-case--laser) .hero--portfolio .case-fiche {
    width: 100%;
    padding: 10px;
    border-radius: 20px;
  }
  :is(.vaia-case--vin, .vaia-case--laser) .hero--portfolio .case-fiche dl > div {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
    padding: 13px 15px;
    border-radius: 12px;
  }
  :is(.vaia-case--vin, .vaia-case--laser) .hero--portfolio .case-fiche dt {
    padding-top: 0;
    font-size: .64rem;
  }
  :is(.vaia-case--vin, .vaia-case--laser) .hero--portfolio .case-fiche dd {
    font-size: .96rem;
  }
}