/* ISOTROPE — « Le Rail » : portfolio plein cadre (rail.js). Noir, or, blanc chaud. */
#plan > .p-rail { padding: 0 !important; height: 100%; overflow: hidden; display: block; }
.p-rail { position: relative; }
.p-rail h1 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.rail { position: absolute; inset: 0 var(--gut) 0; display: flex; gap: 6px; padding: clamp(14px, 3vh, 28px) 0 clamp(16px, 3vh, 30px); }
.rail-top { position: absolute; z-index: 5; left: var(--gut); right: var(--gut); top: 6px; display: flex; justify-content: space-between; color: var(--muted-aa, #b5b0a6); pointer-events: none; }
.rail-top b { color: var(--gold); font-weight: 500; }

/* Un panneau */
.rp { position: relative; flex: 1 1 0; min-width: 0; overflow: hidden; background: #0a0b0c; border: 1px solid var(--line); transition: flex-grow .75s cubic-bezier(.16, 1, .3, 1), border-color .4s; --d: 9; }
.rp.is-active { flex-grow: 11; border-color: rgba(214, 178, 104, .5); }
.rp a { position: absolute; inset: 0; display: block; color: inherit; outline: none; }
.rp a:focus-visible { box-shadow: inset 0 0 0 2px var(--gold); }
.rp-media { position: absolute; inset: -4%; transform: translate3d(var(--px, 0px), var(--py, 0px), 0) scale(1.06); transition: transform .9s cubic-bezier(.16, 1, .3, 1); }
.rp.is-active .rp-media { transform: translate3d(var(--px, 0px), var(--py, 0px), 0) scale(1.0); }
.rp-media img, .rp-media iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; }
.rp-media img { filter: grayscale(.9) brightness(calc(.34 + (1 - min(var(--d), 4) / 4) * .12)) contrast(1.05); transition: filter .8s ease; }
.rp.is-active .rp-media img { filter: none; }
.rp-media iframe { opacity: 0; pointer-events: none; transition: opacity .5s; } .rp.is-live .rp-media iframe { opacity: 1; } .rp.is-live .rp-media img { opacity: 0; }
/* voile : dégradé pour la lisibilité + reflet doré qui suit le curseur */
.rp::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(8, 9, 10, .35) 0%, transparent 28%, transparent 48%, rgba(8, 9, 10, .88) 100%); }

/* Lame (inactive) : numéro en haut, titre vertical */
.rp-idx { position: absolute; z-index: 3; left: 0; right: 0; top: 14px; text-align: center; font: 500 11px var(--mono); letter-spacing: .12em; color: var(--gold); transition: opacity .3s; }
.rp-vt { position: absolute; z-index: 3; left: 50%; bottom: 20px; transform: translateX(-50%); writing-mode: vertical-rl; rotate: 180deg; white-space: nowrap; font: 600 clamp(15px, 2.1vh, 21px) var(--display); font-variation-settings: 'wdth' 76, 'wght' 620; text-transform: uppercase; letter-spacing: .04em; color: var(--ink); text-shadow: 0 2px 14px rgba(0, 0, 0, .8); transition: opacity .35s, color .3s; }
.rp:not(.is-active):hover .rp-vt { color: var(--gold); } /* survol d'une lame : simple surbrillance du titre, rien ne bouge */
.rp:not(.is-active) { cursor: pointer; } .rp.is-active { cursor: default; }
.rp.is-active .rp-vt { opacity: 0; } .rp.is-active .rp-idx { opacity: 0; }

/* Carte (active) : grand titre, légende, bobines, ouverture */
.rp-card { position: absolute; z-index: 3; left: clamp(18px, 2.4vw, 40px); right: clamp(18px, 2.4vw, 40px); bottom: clamp(16px, 3vh, 34px); display: grid; gap: clamp(6px, 1.2vh, 10px); opacity: 0; transform: translateY(18px); transition: opacity .4s ease, transform .6s cubic-bezier(.16, 1, .3, 1); pointer-events: none; }
.rp.is-active .rp-card { opacity: 1; transform: none; transition-delay: .25s; }
.rp-kick { font: 500 11px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--gold); display: flex; gap: 14px; }
.rp-kick span:last-child { color: var(--muted-aa, #b5b0a6); }
.rp-title { font: 700 clamp(38px, 6.6vw, 112px)/.9 var(--display); font-variation-settings: 'wdth' 68, 'wght' 680; text-transform: uppercase; letter-spacing: -.005em; color: var(--ink); text-shadow: 0 4px 30px rgba(0, 0, 0, .55); }
.rp-sub { font: 400 clamp(15px, 2.1vh, 21px)/1.3 var(--sans); color: #d9d4ca; max-width: 40ch; }
.rp-open { display: inline-flex; width: max-content; align-items: center; gap: 12px; margin-top: 4px; padding: 11px 18px; font: 500 11.5px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #0b0c0d; background: linear-gradient(180deg, #f1d9a3, #c9a45c); border: 1px solid #a98441; }
.rp-open i { font-style: normal; }
.rp-strip { display: flex; gap: 5px; margin-top: 2px; }
.rp-strip i { width: clamp(22px, 2.6vw, 40px); aspect-ratio: 16/9; background-size: cover; background-position: center; border: 1px solid rgba(236, 232, 225, .3); opacity: .85; }

/* Dernier panneau : invitation */
.rp-cta { background: radial-gradient(120% 90% at 50% 100%, rgba(201, 164, 92, .22), #0a0b0c 70%); }
.rp-cta .rp-media, .rp-cta::before { display: none; }
.rp-cta .rp-vt { color: var(--gold); }
.rp-cta .rp-title { font-size: clamp(34px, 5.4vw, 92px); }
.rp-cta .rp-sub { color: var(--muted-aa, #b5b0a6); }

/* Entrée : les lames se déploient en cascade */
.is-fresh .rp { animation: rp-in .9s cubic-bezier(.16, 1, .3, 1) backwards; animation-delay: calc(var(--k, 0) * 55ms + 80ms); }
@keyframes rp-in { from { opacity: 0; transform: translateY(5%) scaleY(.94); } }

/* Mobile : lames horizontales empilées, la carte active occupe la hauteur */
@media (max-width: 900px) {
  .rail { flex-direction: column; gap: 4px; padding-top: 22px; }
  .rp.is-active { flex-grow: 9; }
  .rp-idx { top: 50%; left: 12px; right: auto; transform: translateY(-50%); text-align: left; }
  .rp-vt { writing-mode: horizontal-tb; rotate: 0deg; left: 46px; bottom: 50%; transform: translateY(50%); font-size: 15px; }
  .rp-title { font-size: clamp(32px, 11vw, 54px); } .rp-strip { display: none; }
  .rp-card { left: 16px; right: 16px; bottom: 14px; gap: 6px; } .rp-sub { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) { .rp, .rp-media, .rp-card { transition-duration: .01ms; } .is-fresh .rp { animation: none; } }

/* Pré-fiche complète (panneau actif) : pitch, fiche technique, directions, bobines */
.rp.is-active::before { background: linear-gradient(180deg, rgba(8, 9, 10, .25) 0%, rgba(8, 9, 10, .1) 22%, rgba(8, 9, 10, .72) 52%, rgba(8, 9, 10, .94) 100%); }
.rp-title { font-size: clamp(34px, 5.2vw, 88px); }
.rp-pitch { max-width: 62ch; font: 400 clamp(13px, 1.8vh, 17px)/1.5 var(--sans); color: #d6d2ca; text-wrap: pretty; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.rp-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0 18px; max-width: 760px; border-top: 1px solid rgba(236, 232, 225, .22); }
.rp-facts > span { display: grid; grid-template-columns: 9ch 1fr; gap: 10px; padding: 5px 0; border-bottom: 1px solid rgba(236, 232, 225, .14); align-items: baseline; }
.rp-facts i { font-style: normal; font-size: 9.5px; color: var(--muted-aa, #b5b0a6); } .rp-facts b { font: 500 clamp(12.5px, 1.6vh, 14.5px) var(--sans); color: var(--ink); }
.rp-chips { display: flex; flex-wrap: wrap; gap: 6px; } .rp-chips i { font: 500 10.5px var(--mono); font-style: normal; letter-spacing: .08em; text-transform: uppercase; padding: 3px 8px; color: var(--gold); border: 1px solid rgba(214, 178, 104, .5); background: rgba(214, 178, 104, .08); }
.rp-strip { align-items: center; } .rp-strip em { font-style: normal; font-size: 11px; color: var(--muted-aa, #b5b0a6); margin-left: 4px; }
@media (max-height: 820px) { .rp-pitch { -webkit-line-clamp: 3; } .rp-facts > span { padding: 3px 0; } .rp-title { font-size: clamp(30px, 4.4vw, 68px); } }
@media (max-width: 900px) { .rp-pitch { -webkit-line-clamp: 4; font-size: 13.5px; } .rp-facts { grid-template-columns: 1fr; } .rp-facts > span:nth-child(n+3) { display: none; } .rp-chips { display: none; } }

/* Interaction souris : reflet doré qui suit le curseur sur le panneau actif ; l'image remplit toute la case */
.rp-media { inset: -5%; } .rp-media img { object-position: center; }
.rp:not(.is-active) .rp-media img { filter: grayscale(.55) brightness(.5) contrast(1.05); } 

/* Contenu fixe et réactif à la largeur du panneau choisi (container queries) : mise en page stable, aucun effet lié à la souris */
.rp { container-type: inline-size; }
.rp .rp-media { transform: scale(1.02) !important; transition: none; }
@container (max-width: 560px) { .rp-title { font-size: clamp(30px, 9cqw, 50px); } .rp-pitch { -webkit-line-clamp: 4; font-size: 13.5px; } .rp-facts { grid-template-columns: 1fr; } .rp-facts > span:nth-child(n+3) { display: none; } .rp-strip { display: none; } }
@container (min-width: 561px) and (max-width: 760px) { .rp-title { font-size: clamp(34px, 8cqw, 64px); } .rp-facts { grid-template-columns: 1fr 1fr; } .rp-facts > span:nth-child(n+5) { display: none; } }
@container (min-width: 761px) { .rp-title { font-size: clamp(44px, 7.2cqw, 96px); } .rp-pitch { font-size: clamp(14px, 1.9cqw, 18px); max-width: 68ch; } }

.rp.is-active::before { background: linear-gradient(180deg, rgba(8, 9, 10, .35) 0%, rgba(8, 9, 10, .45) 30%, rgba(8, 9, 10, .86) 58%, rgba(8, 9, 10, .96) 100%); } /* lisibilité constante, même sur un visuel clair ou un logo */

.rp .rp-media { scale: var(--zoom, 1); }

/* Studio : centrage vertical (placé dans la dernière feuille de style : astra.css impose align-content: start) */
#plan > .p-studio { min-height: 100% !important; height: 100% !important; align-content: center !important; align-items: center !important; }

/* Studio : jamais de texte coupé en haut ou en bas — centré quand il tient, sinon la page défile */
#plan > .p-studio { overflow-x: hidden !important; overflow-y: auto !important; align-content: safe center !important; align-items: safe center !important; scrollbar-width: thin; scrollbar-color: rgba(214, 190, 140, .3) transparent; }
#plan > .p-studio .st-left, #plan > .p-studio .st-right { align-self: safe center !important; }

/* Studio, Avec, Contact : le reel de fond reste lisible mais passe au second plan — voile sombre + léger flou, pour un texte net */
html[data-group="studio"] #monitor, html[data-group="avec"] #monitor, html[data-group="contact"] #monitor { opacity: .42; filter: blur(7px) saturate(.8) brightness(.85); }
html[data-group="studio"] #monitor::after, html[data-group="avec"] #monitor::after, html[data-group="contact"] #monitor::after { background-color: rgba(7, 8, 9, .5); }
html[data-group="studio"] #monitor iframe, html[data-group="avec"] #monitor iframe, html[data-group="contact"] #monitor iframe { transform: translate(-50%, -50%) scale(1.4); } /* le flou ne laisse pas de bord clair */

/* Lecteur de la barre du haut : épuré, aligné à droite — icônes sans cadre, titre discret, filet fin */
.chrome .ctrls { justify-self: end; margin-left: auto; gap: 14px; }
.ctrls .bgp { width: clamp(230px, 21vw, 310px); margin-right: 0; column-gap: 10px; border-left-color: rgba(214, 190, 140, .18); }
.ctrls button.bgp-play[aria-pressed], .ctrls .bgp-play { border: 0 !important; background: transparent !important; color: #d9cba8; width: 26px; min-width: 26px; height: 26px; min-height: 26px; }
.ctrls button.bgp-play[aria-pressed]:hover, .ctrls .bgp-play:hover { background: transparent !important; color: #fff; }
.bgp-play svg { width: 26px; height: 26px; }
.bgp-t b { font-size: 10px; letter-spacing: .26em; color: #e6dec9; }
.bgp-t em { font-size: 7.5px; letter-spacing: .2em; color: #8f8466; }
.ctrls .bgp-nav button { color: #8f8466; } .ctrls .bgp-nav button:hover { color: #fff; }
.ctrls button.snd { border: 0 !important; background: transparent !important; color: #8f8466; }
.ctrls button.snd:hover, .ctrls button.snd[aria-pressed="true"] { color: #f0e6cc; background: transparent !important; }
.bgp-scrub::before { background: rgba(214, 190, 140, .22); }
.bgp-scrub::after { opacity: .3; }

/* Accueil mobile : le symbole en particules prend la zone vide au-dessus du titre au lieu de passer sur le texte */
@media (max-width: 700px) { .open-hero .open-mark { opacity: 1 !important; width: 40vw !important; right: auto !important; left: 50% !important; top: 19% !important; translate: -50% -50% !important; z-index: 0; } }

/* Mentions légales : même voile et flou que Studio / Avec / Contact */
html:has(.p-legal) #monitor { opacity: .42 !important; filter: blur(7px) saturate(.8) brightness(.85); }
html:has(.p-legal) #monitor::after { background-color: rgba(7, 8, 9, .5); }
html:has(.p-legal) #monitor iframe { transform: translate(-50%, -50%) scale(1.4); }
@media (max-height: 780px) { .legal-card { padding: 18px 28px; } .legal-card h1 { margin-bottom: 12px; } .legal-card dl > div { padding: 8px 0; } .legal-card dd { font-size: 13px; line-height: 1.5; } .legal-card .open-cta { margin-top: 10px; } .legal-k { margin-bottom: 4px; } }

/* ═════ Mobile (≤ 700 px) : le Rail devient une liste de cartes — une affiche, un titre, un appui ouvre le projet ═════ */
@media (max-width: 700px) {
  #plan > .p-rail { overflow-y: auto !important; overflow-x: hidden; }
  .rail { position: static; flex-direction: column; gap: 8px; padding: 34px var(--gut) 22px; }
  .rail-top { position: static; padding: 8px var(--gut) 0; }
  .rp, .rp.is-active { flex: none; height: 88px; border-color: var(--line); }
  .rp-card { display: none !important; }
  .rp-media { inset: 0; transform: none !important; }
  .rp-media img, .rp.is-active .rp-media img { filter: brightness(.62) contrast(1.05) !important; }
  .rp::before { background: linear-gradient(90deg, rgba(8, 9, 10, .82) 0%, rgba(8, 9, 10, .35) 55%, rgba(8, 9, 10, .1) 100%); }
  .rp-idx, .rp.is-active .rp-idx { opacity: 1; top: 50%; left: 14px; font-size: 11px; transform: translateY(-50%); }
  .rp-vt, .rp.is-active .rp-vt { opacity: 1; left: 48px; right: 40px; bottom: auto; top: 50%; transform: translateY(-50%); writing-mode: horizontal-tb; rotate: 0deg; font-size: 19px; white-space: normal; line-height: 1.1; }
  .rp::after { content: '→'; position: absolute; z-index: 3; right: 14px; top: 50%; transform: translateY(-50%); color: var(--gold); font-size: 18px; }
  .rp:not(.is-active):hover .rp-vt { color: inherit; }
  .rp a { min-height: 88px; }
}
/* Mobile : un seul bandeau de navigation (le menu du haut) ; la piste du bas, illisible en petit, disparaît */
@media (max-width: 700px) {
  :root { --ph: 0px; --hh: 100px; }
  .chrome { grid-template-rows: 54px 46px; }
  .piste { display: none; }
  .primary-nav a { min-height: 44px; font-size: 15px; }
}
@media (max-width: 700px) { .rail-top { display: none; } .rail { padding-top: 14px; } }

/* ═════ Petit écran : lisibilité ═════ */
@media (max-width: 700px) {
  /* le reel de fond en retrait (texte lisible), le bandeau de logos et la pastille « En cours » qui recouvraient le contenu disparaissent */
  html[data-group="ouverture"] #monitor { opacity: .24 !important; filter: saturate(.7) brightness(.8); }
  .ticker, .open-credit, .bg-credit { display: none !important; }
  .open-line-main, .open-title { text-shadow: 0 2px 18px rgba(0, 0, 0, .55); }
  /* le titre du reel en cours reste visible, seul, à côté du bouton son */
  .ctrls .bgp { display: block !important; width: auto; max-width: 58vw; height: auto; margin: 0 4px 0 0; padding: 0; border: 0; }
  .ctrls .bgp .bgp-play, .ctrls .bgp .bgp-nav, .ctrls .bgp .tc, .ctrls .bgp .bgp-scrub { display: none !important; }
  .ctrls .bgp .bgp-info { display: block; text-align: right; }
  .ctrls .bgp .bgp-t { gap: 2px; justify-items: end; }
  .ctrls .bgp .bgp-t b { font-size: 11px; letter-spacing: .16em; }
  .ctrls .bgp .bgp-t em { display: block; font-size: 8.5px; letter-spacing: .14em; }
}
/* Paysage sur téléphone : un seul bandeau fin (logo · menu · son), le contenu prend toute la hauteur */
@media (max-height: 480px) and (max-width: 950px) {
  :root { --hh: 46px; --ph: 0px; }
  .chrome { grid-template-columns: auto 1fr auto; grid-template-rows: 46px; gap: 0 10px; }
  .chrome .brand { grid-column: 1; grid-row: 1; } .brand-txt { display: none; }
  .primary-nav { grid-column: 2; grid-row: 1; border-top: 0; justify-content: center; gap: clamp(12px, 5vw, 36px); }
  .primary-nav a { min-height: 40px; font-size: 14px; }
  .chrome .ctrls { grid-column: 3; grid-row: 1; }
  .ctrls .bgp { max-width: 28vw; }
  .ctrls .bgp .bgp-t em { display: none; }
  .piste { display: none; }
  .brand-sym { width: 30px; height: 30px; }
  .ticker, .open-credit, .bg-credit { display: none !important; }
  .open-title { font-size: clamp(40px, 15vh, 84px); }
  .open-sub, .open-mark { display: none; }
  .open-line-main { font-size: clamp(18px, 6vh, 28px); }
}