/* Orbis : graphite, mandarine et matière 3D. Couche éditoriale de la vitrine ;
   les interfaces des applications gardent leur propre charte. */
.orbis-studio { --studio-peche: #FFAD70; --studio-encre: #23160F; }
.orbis-studio .display { font-weight: 550; letter-spacing: -.04em; line-height: 1.03; }
.orbis-studio .titre, .orbis-studio .pa-h { letter-spacing: -.045em; font-weight: 550; }
.orbis-studio .legende, .orbis-studio .pa-marque { color: #FFAD70; }
.orbis-studio .btn { border-radius: 10px; font-weight: 600; }
.orbis-studio .btn-1 { background: linear-gradient(135deg, #FF9D50, #FF7F2A); color: #251307;
  border-color: transparent; box-shadow: inset 0 1px rgba(255,255,255,.2); }
.orbis-studio .btn-1:hover { background: linear-gradient(135deg, #FFB478, #FF913F); }
.orbis-studio .btn-2 { background: rgba(255,255,255,.035); border-color: rgba(255,255,255,.22); }
.orbis-studio .btn-2:hover { background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.42); }
.orbis-studio .entete .menu a { font-weight: 500; }
/* Le 500 élargit les quatre liens de la barre : à 375 px la rangée débordait
   de 2 px, sans fondu (t-menu-tel, 22/09). Un pixel de rembourrage de moins
   par côté ; la hauteur de 44 px, elle, ne bouge pas. */
@media (max-width: 400px) { .orbis-studio .entete .menu a { padding-inline: 10px; } }
.orbis-studio .lien-fleche { color: #FFAD70; text-underline-offset: 6px; }
.orbis-studio .pied { padding-block: 28px; border-top-color: rgba(255,173,112,.18); }
.orbis-studio .pied > .wrap { display: grid; grid-template-columns: auto 1fr; gap: 22px 40px; align-items: end; }
.orbis-studio .pied nav { justify-content: flex-end; }

/* Des débuts de pages avec une vraie hiérarchie, sans rallonger l'accueil. */
.orbis-studio .pa-ouverture .pa-titre { font-size: clamp(44px, 5.5vw, 86px); }
.orbis-studio .pa-ouverture .dock { align-self: center; width: 100%; gap: 0;
  background: rgba(20,19,18,.78); border: 1px solid rgba(255,255,255,.1); border-radius: 20px;
  overflow: hidden; }
.orbis-studio .pa-ouverture .dock a { display: grid; grid-template-columns: 48px minmax(0,1fr) 18px;
  margin-left: 0; min-height: 112px; gap: 18px; padding: 24px;
  border: 0; border-radius: 0; background: transparent;
  transition: background-color .2s; }
.orbis-studio .pa-ouverture .dock a + a { border-top: 1px solid rgba(255,255,255,.09); }
.orbis-studio .pa-ouverture .dock a:hover { background: rgba(255,173,112,.07); }
.orbis-studio .pa-ouverture .dock a:focus-visible { outline: 2px solid #FFAD70; outline-offset: -3px; }
.orbis-studio .pa-ouverture .dock img { width: 48px; height: 48px; }
.orbis-studio .pa-ouverture .pa-som { gap: 6px; }
.orbis-studio .pa-ouverture .pa-som b { font-size: 20px; }
.orbis-studio .pa-ouverture .pa-som span { font-size: 14px; color: #BDB7B2; }
.orbis-studio .pa-ouverture .dock svg { width: 18px; height: 18px; color: #FFAD70; }
.orbis-studio main > .hero:not(.hero-duo) .display { font-size: clamp(42px, 5vw, 70px); max-width: 1050px; text-wrap: balance; }
.orbis-studio main > .hero:not(.hero-duo) .degrade { color: #FFAD70; }
.orbis-studio .acte { background: #19140F; border-top: 1px solid rgba(255,173,112,.15); }
.orbis-studio .acte .titre { font-size: clamp(38px, 4.8vw, 74px); }

/* LES FILMS DES APPLICATIONS (26/09) : un film par logiciel pour Everything
   et pour AssetBrowser, lus par `films-applications.js`. « Pas de zoom » (l'éditeur) :
   · le cadre a le rapport du FILM (`--fa-rapport`, posé par le script depuis
     le manifeste ; 16:9 avant lui) et l'image y est en `contain` — jamais
     `cover`, qui rognerait un film d'un autre rapport, donc le zoomerait ;
   · il tient la grille de la barre (1 280 px), et au téléphone la largeur
     de l'écran, entier, sans caméra ;
   · un filet, pas d'ombre ni de lueur (règle « pas IA »), un rayon sobre.
   ⚠️ LES PALIERS DE HAUTEUR : le cadre, ses chapitres et leur pied (la ligne
   « logiciel, version, moteur » et le crédit) doivent tenir ENSEMBLE sous
   l'en-tête, sinon on choisit un chapitre sans voir le film. Mesuré à 1 440 px
   sur les mires (26/09) : sous le cadre, 171 px (frise de chapitres à trois
   lignes de phrase, 18 px d'air, pied) ; avec 16 px d'air en haut et en bas,
   le cadre de 1 280 x 720 ne tient qu'à partir de 1 000 px de haut. En
   dessous, la largeur suit la hauteur de l'écran (réserve de 204 px),
   plafonnée à 1 216 px : ses bords restent sur la grille (1 280) ou à 32 px
   au moins à l'intérieur, jamais à côté (la règle du « presque aligné »,
   § LE LAUNCHER DE L'ACCUEIL dans orbis.css). À 1 440 x 900 : 1 102 x 620.
   ⚠️ Les chapitres sont ceux des présentations de l'accueil (`.ev-etapes`,
   `.chap-frise`, orbis.css) : une frise sous le film, un titre et une phrase
   par chapitre ; au téléphone, une colonne à barre verticale (`--chap-axe: y`,
   que `chapitres.js` relit). */
.fa-films { --fa-rapport: 1.7778; }
.fa-cadre {
  position: relative;
  width: 100%;
  aspect-ratio: var(--fa-rapport);
  overflow: hidden;
  border-radius: 12px;
  background: var(--cadre);
  box-shadow: var(--anneau);
}
.fa-cadre > video,
.fa-cadre > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
}
/* ⚠️ `svh`, jamais `dvh` (règle au-dessus de `body` dans orbis.css, 26/09) :
   sur Safari, `dvh` suit la barre d'adresse qui se replie au premier geste,
   et le film changerait de taille sous le doigt. */
@media (min-width: 1101px) and (max-height: 999px) {
  main > section > .wrap.grille-barre.fa-films {
    width: min(100% - 48px, 1216px, (100svh - var(--entete-h) - 204px) * var(--fa-rapport));
  }
}

/* sous les captures d'AssetBrowser, le même air que sous l'en-tête d'un
   chapitre (`.pa-tete`) : sans lui, le cadre collait à la note du bouton */
.pa-ab + .fa-films { margin-top: clamp(48px, 5.4vw, 84px); }

.ev-etapes.chap-frise.fa-chapitres { margin: 18px 0 0; column-gap: clamp(16px, 2vw, 28px); }
.fa-chapitres .chap { min-height: 44px; font-size: 15px; padding: 16px 8px 8px 0; }
.fa-chapitres .chap-t { display: block; font-weight: 500; letter-spacing: -0.01em; }
.fa-chapitres .chap-d { display: block; margin-top: 6px; font-size: 14px; line-height: 1.5; color: var(--encre-3); }
.fa-chapitres li.on .chap-d { color: var(--encre-2); }

.fa-pied {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 4px 24px;
  margin-top: 14px;
}
.fa-contexte, .fa-credit {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--encre-3);
  font-variant-numeric: tabular-nums;
}
.fa-credit a { color: inherit; text-underline-offset: 3px; }
.fa-contexte:empty, .fa-credit:empty { display: none; }
.fa-films > .fa-leg { margin-top: 10px; }

/* « Voir les exports » d'Everything, aligné sur le bord gauche des films
   (`.pa-export-details` porte déjà 24 px au-dessus d'elle) */
.fa-exports { margin-top: 8px; }

/* les trois gestes d'AssetBrowser, en rangée sous les films */
.fa-gestes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: clamp(28px, 3.5vw, 56px);
  align-items: start;
  margin-top: clamp(72px, 8vw, 128px);
}
.fa-gestes > .pa-h3 { grid-column: 1 / -1; margin: 0 0 22px; }
.fa-gestes > .pa-geste + .pa-geste { margin-top: 0; }

@media (max-width: 900px) {
  .fa-gestes { grid-template-columns: minmax(0, 1fr); }
  .fa-gestes > .pa-geste + .pa-geste { margin-top: 18px; }
}

/* AU TÉLÉPHONE : le film plein cadre (la largeur de l'écran, la gouttière de
   24 px de `.wrap` rendue), entier ; les chapitres en colonne. */
@media (max-width: 760px) {
  .fa-cadre { width: calc(100% + 48px); margin-inline: -24px; border-radius: 0; box-shadow: none; }
  .ev-etapes.chap-frise.fa-chapitres { --chap-axe: y; display: block; }
  /* ⚠️ `.ev-etapes .chap` pose `gap` (les deux sens) et `align-items:
     baseline` : sans `row-gap` ici, 12 px d'air s'ajoutaient entre le titre
     et sa phrase (vu à 390 px). Le numéro partage la ligne de base du titre,
     la phrase passe dessous. */
  .fa-chapitres .chap {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 14px;
    row-gap: 0;
    align-items: baseline;
    padding: 12px 12px 12px 20px;
    border-radius: 0 8px 8px 0;
  }
  .fa-chapitres .chap::before { grid-row: 1; grid-column: 1; margin: 0; }
  .fa-chapitres .chap-t { grid-row: 1; grid-column: 2; }
  .fa-chapitres .chap-d { grid-row: 2; grid-column: 2; margin-top: 4px; }
  .fa-chapitres .chap-barre { left: 0; right: auto; top: 6px; bottom: 6px; width: 2px; height: auto; }
  .fa-chapitres .chap-barre i { transform: scaleY(0); }
  .fa-pied { flex-direction: column; }
  /* le lien du crédit, 13 px de texte : sa zone de toucher monte à 44 px sans
     déplacer la ligne (un rembourrage sur un élément EN LIGNE) */
  .fa-credit a { padding-block: 14px; }
}
.pa-export-details { margin-top: 24px; }
.pa-export-details > summary { width: fit-content; list-style: none; cursor: pointer; }
.pa-export-details > summary::-webkit-details-marker { display: none; }
.pa-export-details[open] > summary svg { transform: rotate(180deg); }
.pa-export-contenu { margin-top: 24px; padding: clamp(20px, 3vw, 40px); background: #161514; border-radius: 16px; }
.pa-export-contenu > h3 { margin: 0 0 28px; font-size: 24px; font-weight: 550; }
.pa-export-assigne { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 32px; padding: 20px; background: #28C8400A; border: 1px solid #28C84038; border-radius: 10px; }
.pa-export-assigne > svg { width: 22px; height: 22px; flex: none; color: #28C840; }
.pa-export-assigne strong { font-size: 16px; font-weight: 550; }
.pa-export-assigne p { margin: 7px 0 0; font-size: 13px; line-height: 1.65; color: #BFB8B1; }
.pa-export-liste { margin: 0; padding: 0; list-style: none; }
.pa-export-liste li { display: flex; gap: 12px; justify-content: space-between; align-items: baseline; padding: 10px 0; border-bottom: 1px solid #FFFFFF0B; font-size: 13px; }
.pa-export-liste code { color: #ACA199; font-size: 12px; flex: none; }
.pa-export-groupes .pa-export-inclus { margin-top: 12px; }
.pa-export-groupes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
.pa-export-groupes section { padding: 0; }
.pa-export-groupes h4 { margin: 0 0 12px; font-size: 15px; font-weight: 550; color: #FFAD70; }
.pa-export-groupes p { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.pa-export-groupes p span { padding: 7px 10px; border: 1px solid #37322E; border-radius: 6px; font-size: 13px; }
.pa-export-note { margin: 28px 0 0; max-width: 78ch; font-size: 13px; color: #AFA7A1; line-height: 1.6; }
@media (max-width: 620px) {
  .pa-export-groupes { grid-template-columns: 1fr; gap: 24px; }
}

/* Tarifs : le produit précède le choix du forfait. */
.orbis-studio .prix-intro { padding: 56px 0 48px; text-align: left; }
.orbis-studio .nappe[data-affiche="tarifs"] { opacity: .7; }
.prix-intro > .wrap { display: block; }
.prix-intro .fil { margin-bottom: 28px; color: #D6C3B5; }
.prix-intro h1 { margin: 0; max-width: 1050px; font-size: clamp(44px, 4.9vw, 70px); }
.prix-intro h1 .degrade { color: #FFAD70; }
.prix-intro .sous-titre { max-width: 68ch; font-size: 17px; line-height: 1.65; color: #DCD2C9; }
.tarifs-suite { display: flex; flex-wrap: wrap; gap: 18px 36px; margin-top: 28px; }
/* ⚠️ l'icône et son texte sont DEUX blocs centrés l'un sur l'autre (24/09) :
   en grille, l'icône couvrait deux rangées et le nom restait sur la première,
   9,6 px plus haut que le centre de l'icône (`t-alignement`). */
.suite-app { display: flex; align-items: center; gap: 10px;
  color: #F4EEE8; text-decoration: none; border-radius: 6px; }
.suite-app img { width: 36px; height: 36px; flex: none; }
.suite-app .suite-txt { display: grid; gap: 1px; }
.suite-app b { font-size: 13px; font-weight: 550; }
.suite-app .suite-txt > span { font-size: 12px; color: #BCB2AA; }
.suite-app:hover b { color: #FFAD70; }
.suite-app:focus-visible { outline: 2px solid #FFAD70; outline-offset: 6px; }

/* LES CARTES DE PRIX EN DÉGRADÉS (24/09) : « travaille-moi cette partie avec
   des dégradés, je veux que ça fasse vraiment pro et que ça donne envie »
   (l'éditeur, capture des quatre cartes à l'appui).
   ⚠️ Des dégradés LINÉAIRES, une seule couleur (l'orange de la charte) et ses
   bruns : ni halo, ni lueur colorée, ni dégradé radial — la passe « pas IA »
   du 17/09 les a retirés, et `t-pas-ia` les refuse dans `orbis.css`.
   · chaque carte : une surface qui descend du brun chaud au neutre, et un
     BORD qui porte la lumière en haut et s'éteint en bas (deux fonds,
     `padding-box` puis `border-box`, sous un bord transparent) ;
   · la carte Pro : un orange qui descend du pêche clair à l'orange de la
     charte, l'encre sombre dessus ;
   · boutons, pastille et filets suivent le même geste.
   ⚠️ TOUS LES ARRÊTS SONT OPAQUES : `t-contraste` mesure le pire arrêt d'un
   `background-image` et abandonne l'élément sur un arrêt transparent — la
   carte Pro serait sortie de la mesure sans un mot. Pire cas mesuré à la main :
   l'encre #4C2C18 sur l'arrêt le plus sombre de la carte Pro (#FF9148), 5,6:1.
   ⚠️ Le pire arrêt compte AUSSI les fonds du bord (`border-box`) : un haut de
   bord en #6B4B34 mettait le gris des listes à 4,31:1 (11 textes, t-contraste),
   alors qu'aucun texte ne le touche. #604431 : 4,9:1. */
.orbis-studio .tarifs { gap: 16px; }
.orbis-studio .tarifs .pcard {
  padding: 28px 24px; border-radius: 18px;
  border: 1px solid transparent;
  background:
    linear-gradient(180deg, #221C18 0%, #181513 38%, #121110 100%) padding-box,
    linear-gradient(180deg, #604431 0%, #3A302A 26%, #26211E 100%) border-box;
  transition: transform .4s cubic-bezier(.2, .7, .2, 1), box-shadow .4s ease;
}
.orbis-studio .tarifs .pcard:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 48px -28px #000;
}
.orbis-studio .tarifs .plan-nom { font-size: 19px; font-weight: 600; }
.orbis-studio .tarifs .prix b { font-size: clamp(38px, 3.4vw, 52px); font-weight: 500; }
.orbis-studio .tarifs .plan-lead { font-size: 14px; color: #C6BFB9; }
.orbis-studio .tarifs .liste { gap: 13px; }
.orbis-studio .tarifs .liste li { color: #C6BFB9; }
.orbis-studio .tarifs .liste svg { stroke: #FFA468; }
.orbis-studio .tarifs .pcard hr {
  height: 1px; border: 0;
  background: linear-gradient(90deg, transparent 0%, #463A31 22%, #463A31 78%, transparent 100%);
}
.orbis-studio .tarifs .pcard .btn-2 {
  border: 1px solid transparent;
  background:
    linear-gradient(180deg, #2B2521 0%, #1C1917 100%) padding-box,
    linear-gradient(180deg, #5A4637 0%, #332B26 100%) border-box;
  color: #F6EFE9;
}
.orbis-studio .tarifs .pcard .btn-2:hover {
  background:
    linear-gradient(180deg, #3A302A 0%, #251F1C 100%) padding-box,
    linear-gradient(180deg, #8A6247 0%, #4A3C33 100%) border-box;
}
/* « Sur mesure » : la même surface, un cran plus froide — une offre à part,
   qui se discute au lieu de s'acheter */
.orbis-studio .tarifs .pcard:last-child {
  background:
    linear-gradient(180deg, #1D1B1A 0%, #151413 40%, #0F0F0E 100%) padding-box,
    linear-gradient(180deg, #4E4640 0%, #322D2A 26%, #221F1D 100%) border-box;
}

.orbis-studio .tarifs .pcard.vedette {
  border-color: transparent;
  background:
    linear-gradient(170deg, #FFD3AE 0%, #FFB783 30%, #FFA062 68%, #FF9148 100%) padding-box,
    linear-gradient(180deg, #FFE2C8 0%, #FFB27C 45%, #F2843F 100%) border-box;
  --encre: #23160F; --encre-2: #4C2C18; --encre-3: #5F3921; --trait: rgba(61,30,9,.23);
  --bleu-clair: #51280E; color: #23160F;
}
.orbis-studio .tarifs .pcard.vedette:hover { box-shadow: 0 26px 52px -30px #000; }
.orbis-studio .tarifs .vedette .plan-lead, .orbis-studio .tarifs .vedette .liste li { color: #4C2C18; }
.orbis-studio .tarifs .vedette .liste svg { stroke: #51280E; }
.orbis-studio .tarifs .vedette hr {
  background: linear-gradient(90deg, transparent 0%, rgba(90, 38, 10, .32) 22%, rgba(90, 38, 10, .32) 78%, transparent 100%);
}
.orbis-studio .tarifs .vedette .puce {
  font-size: 12px; padding: 4px 10px;
  background: linear-gradient(180deg, #3A2416 0%, #1E1109 100%);
  color: #FFDCC0;
}
.orbis-studio .tarifs .vedette .btn-1 {
  background: linear-gradient(180deg, #34200F 0%, #1A0D05 100%);
  color: #FFF0E4; box-shadow: none;
}
.orbis-studio .tarifs .vedette .btn-1:hover { background: linear-gradient(180deg, #4A2E18 0%, #26140A 100%); }
@media (prefers-reduced-motion: reduce) {
  .orbis-studio .tarifs .pcard { transition: none; }
  .orbis-studio .tarifs .pcard:hover { transform: none; }
}
.orbis-studio .compare th { padding-block: 23px; font-size: 15px; }
.orbis-studio .compare th:nth-child(3) { color: #FFAD70; }
.orbis-studio .compare tr.groupe td { background: #211A15; color: #FFBB88; padding-block: 18px; }
.orbis-studio .compare td { padding-block: 17px; }
.orbis-studio .compare tbody tr:not(.groupe):hover td { background: #1E1B18; }

@media (max-width: 620px) {
  .orbis-studio .pa-ouverture .pa-titre { font-size: clamp(30px, 8.4vw, 42px); max-width: none; text-wrap: pretty; }
  .orbis-studio .prix-intro { padding-block: 30px; }
  .prix-intro .fil { margin-bottom: 22px; }
  .prix-intro h1 { font-size: clamp(36px, 9.4vw, 48px); }
  .prix-intro .sous-titre { font-size: 16px; }
  .tarifs-suite { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .suite-app { flex-direction: column; align-items: flex-start; gap: 4px; }
  .suite-app img { width: 28px; height: 28px; margin-bottom: 3px; }
  .suite-app b { font-size: 12px; }
  .orbis-studio .tarifs .pcard { padding: 26px; }
  .orbis-studio .pied > .wrap { grid-template-columns: 1fr; }
  .orbis-studio .pied nav { justify-content: flex-start; }
}