:root {
  --fond: #08080a;
  --surface-1: #101014;
  --surface-2: #17171d;
  --surface-3: #22222a;
  --fond-rgb: 8, 8, 10;
  --surface-1-rgb: 16, 16, 20;
  --surface-2-rgb: 23, 23, 29;
  --second: #b0acbc;
  --discret: #a09aaa;
  --premium-paper: #eae4da;
  --premium-ink: #232027;
  --premium-muted: #5c565f;
  --premium-line: #c9c2bc;
  --premium-light: #f6f2eb;
  --section: clamp(72px, 8vw, 120px);
  --large: 1440px;
  --marge: clamp(20px, 4.5vw, 80px);
  --t-h1: clamp(48px, 7.4vw, 108px);
}
.premium-nav-contact { display: inline-flex; align-items: center; min-height: 42px; padding: 8px 17px; border-radius: 99px; background: var(--texte); color: var(--fond); text-decoration: none; font-size: var(--t-petit); font-weight: 600; white-space: nowrap; }
.premium-nav-contact:hover { background: var(--accent-texte); }
.barre .pilule-portail { border: 0; padding-inline: 8px; font-size: 12px; color: var(--second); }
.barre-nav { gap: clamp(16px, 2vw, 30px); }
.barre-nav a:last-child { display: none; }
.bouton { border-radius: 99px; }
.bouton.primaire { box-shadow: none; background: var(--texte); color: var(--fond); border-color: var(--texte); font-weight: 550; }
.bouton.primaire:hover { background: var(--accent-texte); border-color: var(--accent-texte); }
.premium-hero { min-height: 660px; height: min(860px, 96svh); }
.premium-hero .scene { inset: 0 0 0 56%; }
.premium-hero .p { width: min(37vw, 540px); top: 49%; }
.premium-hero .mot { font-size: clamp(15px, 2.1vw, 30px); }
.premium-hero-copy { position: relative; z-index: 6; padding: max(185px, 24vh) 0 90px; margin-inline: auto; width: min(100% - 2 * var(--marge), var(--large)); pointer-events: none; }
.premium-hero-copy > * { max-width: 65%; }
.premium-hero-copy h1 { font-size: clamp(54px, 6.5vw, 100px); line-height: 1.02; letter-spacing: -.06em; font-weight: 450; margin: 28px 0; }
.premium-hero-copy .etiquette-section { font-size: 10px; letter-spacing: .16em; }
.premium-lead { font-size: clamp(17px, 1.5vw, 21px); color: var(--second); line-height: 1.55; }
.premium-hero-copy .actions { pointer-events: auto; margin-top: 32px; gap: 22px; }
.premium-text-link { text-decoration: none; font-size: 14px; padding-block: 12px; }
.premium-text-link:hover { color: var(--accent-texte); }
.premium-micro { color: var(--discret); font-size: 12px; margin-top: 22px; }
html.entree:not(.ouvert) .premium-hero-copy { opacity: 0; visibility: hidden; }
.premium-hero-copy { transition: opacity .8s ease; }
.premium-proof { border-block: 1px solid var(--filet-fort); background: var(--noir); }
.premium-proof .conteneur { display: flex; gap: 32px; justify-content: space-between; align-items: center; min-height: 90px; font-size: 12px; }
.premium-proof span { color: var(--second); }
.premium-proof a { text-decoration: none; font-size: 17px; letter-spacing: -.02em; }
.premium-section-head { display: grid; grid-template-columns: 1fr 1.6fr; align-items: start; gap: 32px; margin-bottom: 66px; }
.premium-section-head h2 { font-size: clamp(33px, 4.1vw, 59px); font-weight: 500; line-height: 1.08; letter-spacing: -.04em; }
.premium-section-head .etiquette-section { padding-top: 10px; }
.premium-work .vedettes { gap: 86px; }
.premium-project { display: block; padding: 0; border: 0; background: none; margin-bottom: 72px; }
.premium-project-top { min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-bottom: 16px; border-bottom: 1px solid var(--filet-fort); }
.premium-project-top .lien-fleche { font-size: 13px; min-height: 32px; }
.premium-project .vedette-titre { font-size: clamp(54px, 8.6vw, 132px); font-weight: 450; letter-spacing: -.055em; line-height: 1.05; margin: 24px 0 35px; }
.premium-project .vedette-media { background: var(--surface-1); border: 0; border-radius: 3px; padding: 0; overflow: hidden; }
.premium-katty .vedette-media { background: var(--surface-1); }
.premium-capture { width: 100%; height: auto; object-fit: contain; }
.premium-katty .fenetre { max-width: 100%; box-shadow: 0 28px 70px rgba(var(--noir-rgb), .18); }
.premium-project-bottom { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; margin-top: 28px; }
.premium-project-bottom h4 { font-size: clamp(23px, 2.4vw, 34px); line-height: 1.2; font-weight: 450; letter-spacing: -.025em; }
.premium-project-bottom p { font-size: 16px; color: var(--second); }
.premium-tags { font-size: 12px !important; color: var(--discret); margin-top: 16px; }
.premium-project .mention { margin-top: 24px; font-size: 12px; }
.premium-phones { display: flex; gap: clamp(16px, 4vw, 55px); align-items: center; justify-content: center; padding: 35px 0; }
.premium-phones .telephone { width: min(25%, 240px); flex: 0 1 240px; transform: none; }
.premium-phones .telephone:nth-child(2) { margin-top: 80px; }
.premium-phones .telephone-ecran { aspect-ratio: 600 / 1304; }
.premium-phones img { width: 100%; height: 100%; object-fit: contain; }
.premium-services { border-top: 1px solid var(--filet-fort); }
.premium-service { display: grid; grid-template-columns: 40px 1.1fr 1fr 32px; gap: 32px; padding: 40px 0; align-items: start; border-bottom: 1px solid var(--filet-fort); text-decoration: none; transition: padding .2s ease; }
.premium-service h3 { font-weight: 450; font-size: clamp(22px, 2.3vw, 32px); line-height: 1.2; letter-spacing: -.025em; }
.premium-service p { font-size: 16px; color: var(--second); }
.premium-service:hover h3, .premium-service:hover .premium-arrow { color: var(--accent-texte); }
.premium-arrow { font-size: 28px; line-height: 1; }
.premium-partner { background: var(--surface-1); color: var(--texte); border-block: 1px solid var(--filet-fort); }
.premium-partner .ton, .premium-partner .etiquette-section, .premium-partner .premium-prose { color: var(--second); }
.premium-split { display: grid; grid-template-columns: 1.1fr 1fr; gap: 100px; }
.premium-split h2 { font-size: clamp(34px, 4vw, 56px); line-height: 1.09; font-weight: 450; letter-spacing: -.035em; margin-top: 28px; }
.premium-prose { font-size: 18px; line-height: 1.7; }
.premium-prose p + p { margin-top: 22px; }
.premium-prose ul { padding-left: 20px; margin: 25px 0 35px; }
.premium-prose li { margin: 12px 0; }
.premium-partner .lien-fleche { color: var(--texte); }
.premium-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; }
.premium-steps article { border-top: 1px solid var(--filet-fort); padding-top: 25px; }
.premium-steps h3 { margin: 25px 0 14px; font-size: 28px; font-weight: 450; }
.premium-steps p { font-size: 16px; color: var(--second); }
.premium-cta { border-top: 1px solid var(--filet-fort); background: var(--noir); }
.premium-cta h2 { font-size: clamp(40px, 6vw, 84px); line-height: 1.04; letter-spacing: -.045em; font-weight: 450; margin: 30px 0; }
.premium-cta p:not(.etiquette-section) { max-width: 550px; color: var(--second); }
.premium-cta .actions > a:not(.bouton) { font-size: 14px; }
.premium-case-media .fenetre { max-width: 100%; }
.premium-case-media > .mention { margin-top: 20px; }
.premium-case-media .premium-phones { background: var(--surface-1); border: 1px solid var(--filet-fort); border-radius: 20px; padding: 50px 30px; }
.premium-case-row { display: grid; grid-template-columns: 1fr 2fr; gap: 60px; padding-block: 50px; border-top: 1px solid var(--filet-fort); }
.premium-case-row h2 { font-size: 32px; font-weight: 450; margin-bottom: 24px; }
.premium-case-row p:not(.etiquette) { color: var(--second); max-width: 700px; }
.premium-back { display: block; width: fit-content; color: var(--second); font-size: 13px; text-decoration: none; margin-bottom: 40px; }
.page-tete { padding-bottom: 70px; }
.page-tete .premium-tags { margin-top: 30px; }
.cadrage textarea { display: block; width: 100%; resize: vertical; min-height: 100px; padding: 15px; background: var(--surface-1); border: 1px solid var(--trait-champ); border-radius: var(--rayon-s); }
.cadrage-coord > .champ { margin-bottom: 24px; }
.cadrage .cadrage-note { max-width: 620px; }
@media (max-width: 1100px) {
  .premium-hero-copy > * { max-width: 64%; }
  .premium-hero-copy .actions { flex-direction: column; align-items: start; gap: 7px; }
  .premium-split { gap: 50px; }
  .barre-nav { gap: 17px; }
  .premium-nav-contact { padding-inline: 13px; }
}
@media (max-width: 700px) {
  .premium-hero { height: auto; min-height: 0; padding-bottom: 74px; }
  .premium-hero .scene { position: relative; inset: auto; height: 290px; margin-top: 58px; }
  .premium-hero .p { width: 245px; top: 52%; }
  .premium-hero-copy { padding: 0 0 30px; width: calc(100% - 2 * var(--marge)); }
  .premium-hero-copy > * { max-width: 100%; }
  .premium-hero-copy h1 { font-size: clamp(38px, 10vw, 66px); margin: 20px 0; }
  .premium-hero-copy .actions { flex-direction: row; align-items: center; gap: 15px; }
  .premium-hero-copy .bouton { font-size: 13px; padding-inline: 18px; }
  .premium-lead { font-size: 17px; }
  .premium-micro { font-size: 11px; }
  .premium-hero .devise { font-size: 11px; }
  .premium-proof .conteneur { display: grid; grid-template-columns: 1fr 1fr; padding-block: 24px; gap: 18px; }
  .premium-proof .conteneur > span { grid-column: 1 / -1; }
  .premium-proof .conteneur > span:last-child { display: none; }
  .premium-section-head, .premium-split, .premium-project-bottom, .premium-case-row { grid-template-columns: 1fr; gap: 25px; }
  .premium-section-head { margin-bottom: 40px; }
  .premium-project-top .lien-fleche { font-size: 12px; }
  .premium-project .vedette-media { padding: 0; border-radius: 2px; }
  .premium-project .vedette-titre { font-size: 58px; margin-block: 24px; }
  .premium-project { margin-bottom: 42px; }
  .premium-project-bottom { gap: 18px; }
  .premium-project-bottom p { font-size: 15px; }
  .premium-phones { gap: 10px; padding: 18px 0; }
  .premium-phones .telephone { width: 29%; flex-basis: 29%; padding: 3px; border-radius: 14px; }
  .premium-phones .telephone-ecran { border-radius: 10px; }
  .premium-phones .telephone:nth-child(2) { margin-top: 34px; }
  .premium-case-media .premium-phones { padding: 25px 12px; }
  .premium-service { grid-template-columns: 25px 1fr 20px; gap: 16px; padding-block: 30px; }
  .premium-service p { grid-column: 2 / 3; grid-row: 2; font-size: 15px; }
  .premium-service .premium-arrow { grid-column: 3; grid-row: 1; }
  .premium-steps { grid-template-columns: 1fr; gap: 28px; }
  .premium-steps h3 { margin-top: 15px; }
  .premium-split h2 { margin-top: 20px; }
  .premium-prose { font-size: 17px; }
  .barre-actions { gap: 7px; }
  .barre .pilule-portail { font-size: 10px; padding-inline: 4px; }
  .premium-nav-contact { font-size: 11px; padding-inline: 10px; min-height: 36px; }
  .barre-langue { font-size: 10px; }
  .barre .marque-mot { display: none; }
  .bouton-menu { padding-inline: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .premium-hero-copy, .premium-service { transition: none; }
}

.premium-project .vedette-titre a { display: flex; justify-content: space-between; align-items: center; text-decoration: none; color: inherit; gap: 20px; }
.premium-project .vedette-titre a span[aria-hidden="true"] { font-size: .5em; font-weight: 300; }
.premium-project .vedette-titre a:hover span[aria-hidden="true"] { color: var(--accent-texte); }
.premium-hero-copy .ton { color: var(--second); }
.premium-proof a { display: inline-flex; align-items: center; gap: 15px; }
.premium-hero .devise { left: var(--marge); transform: none; bottom: 35px; font-size: 10px; letter-spacing: .14em; }
.premium-hero .fleche { right: var(--marge); left: auto; bottom: 32px; }
.project-film { position: relative; width: 100%; }
.project-film video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; background: var(--noir); }
.film-caption { display: flex; justify-content: space-between; gap: 15px; align-items: center; min-height: 48px; padding: 10px 16px; background: var(--surface-1); color: var(--second); font-size: 12px; }
.film-caption button { border: 0; padding: 5px 0 5px 15px; color: var(--texte); cursor: pointer; background: none; font: inherit; white-space: nowrap; }
.film-caption button:hover { color: var(--accent-texte); }
.case-editorial .page-tete { padding-top: 150px; padding-bottom: 55px; }
.case-editorial .page-tete h1 { font-size: clamp(66px, 12vw, 180px); line-height: 1; letter-spacing: -.065em; font-weight: 450; margin-block: 28px; }
.case-editorial .page-tete .chapeau { font-size: clamp(23px, 3vw, 42px); line-height: 1.2; color: var(--second); letter-spacing: -.025em; max-width: 950px; }
.case-editorial .premium-case-media .premium-capture { border-radius: 3px; }
.case-editorial .premium-case-row { padding-block: 42px; }
.case-editorial .premium-case-row h2 { font-size: clamp(28px, 3.8vw, 54px); letter-spacing: -.035em; }
.case-editorial .premium-case-row p:not(.etiquette) { font-size: 19px; line-height: 1.65; }
.case-editorial .fenetre { border-radius: 3px; border-color: var(--filet-fort); box-shadow: none; }
.case-editorial .premium-phones { padding: 50px 30px; background: var(--surface-1); gap: 25px; }
.case-editorial .premium-phones .telephone { flex-basis: 22%; }
.case-editorial .premium-phones .telephone:nth-child(2) { margin-top: 0; }
.service-real { width: 100%; margin: 0; align-self: center; }
.service-real figcaption { color: var(--discret); font-size: 12px; padding-top: 15px; }
.svc .svc-grille { gap: 50px; }
.premium-work .premium-project:last-child { margin-bottom: 42px; }
.pied { background: var(--noir); }
@media (max-width: 700px) {
  .premium-project .vedette-titre { font-size: clamp(48px, 12vw, 80px); }
  .premium-project-top { align-items: start; gap: 12px; }
  .premium-project-top .etiquette { max-width: 55%; font-size: 10px; }
  .premium-project-top .lien-fleche { font-size: 11px; }
  .film-caption { font-size: 10px; padding-inline: 10px; min-height: 42px; }
  .case-editorial .page-tete { padding-top: 115px; padding-bottom: 35px; }
  .case-editorial .page-tete h1 { font-size: clamp(51px, 12vw, 84px); }
  .case-editorial .premium-case-row p:not(.etiquette) { font-size: 17px; }
  .case-editorial .premium-phones { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding: 20px; }
  .case-editorial .premium-phones .telephone { width: 100%; }
  .premium-hero .devise { bottom: 20px; }
  .premium-hero .fleche { bottom: 16px; }
}

.studio-showcase { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 65px; }
.studio-showcase a { display: block; text-decoration: none; }
.studio-showcase img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; border-radius: 3px; }
.studio-showcase span { display: flex; justify-content: space-between; padding-top: 18px; font-size: 16px; }
.studio-showcase a:hover { color: var(--accent-texte); }
@media (max-width: 700px) { .studio-showcase { grid-template-columns: 1fr; gap: 35px; margin-top: 40px; } }

.page-tete::before, .page-tete::after { display: none; }
@media (max-width: 700px) { .barre-langue { display: none; } .barre-actions { gap: 10px; } }

[data-revele="leger"].entre { animation: texte-present .65s var(--doux) backwards; }
@keyframes texte-present { from { opacity: 0; translate: 0 12px; } to { opacity: 1; translate: 0 0; } }
.survol-texte { background-image: linear-gradient(currentColor, currentColor); background-position: left bottom; background-size: 0% 1px; background-repeat: no-repeat; padding-bottom: 3px; transition: background-size .28s var(--doux); box-decoration-break: clone; -webkit-box-decoration-break: clone; }
@media (hover: hover) and (pointer: fine) {
  :where(a, button, summary):hover .survol-texte { background-size: 100% 1px; }
}
:where(a, button, summary):focus-visible .survol-texte { background-size: 100% 1px; }
@media (prefers-reduced-motion: reduce) {
  [data-revele="leger"].entre { animation: none; }
  .survol-texte { transition: none; }
}

.bouton > .survol-texte { transform: none; transition: background-size .28s var(--doux); }
@media (prefers-reduced-motion: reduce) { .bouton > .survol-texte { transition: none; } }

.mqb-app { background: var(--surface-1); border-radius: 4px; padding: clamp(28px, 5vw, 72px); overflow: hidden; }
.mqb-app-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 25px; align-items: start; }
.mqb-app-intro h4 { font-size: clamp(30px, 4vw, 58px); line-height: 1.08; letter-spacing: -.04em; font-weight: 450; }
.mqb-phone-stage { display: flex; align-items: center; justify-content: center; gap: 0; padding: 45px 0 65px; }
.mqb-device { width: 34%; margin: 0 -1%; flex: 0 0 34%; }
.mqb-device img { display: block; width: 100%; height: clamp(240px, 39vw, 550px); object-fit: contain; }
.mqb-device figcaption { text-align: center; color: var(--second); font-size: 12px; margin-top: 16px; }
.mqb-device-collection { transform: translateY(28px) rotate(-6deg); }
.mqb-device-scan { position: relative; z-index: 1; }
.mqb-device-indicateurs { transform: translateY(28px) rotate(6deg); }
.mqb-phone-stage.entre .mqb-device-collection { animation: mqb-arrive-left 1.35s var(--doux) both; }
.mqb-phone-stage.entre .mqb-device-scan { animation: mqb-arrive-center 1.15s var(--doux) both; }
.mqb-phone-stage.entre .mqb-device-indicateurs { animation: mqb-arrive-right 1.35s var(--doux) .12s both; }
@keyframes mqb-arrive-left { from { opacity: 0; transform: translate(65px, 100px) rotate(5deg); } to { opacity: 1; transform: translateY(28px) rotate(-6deg); } }
@keyframes mqb-arrive-center { from { opacity: 0; transform: translateY(85px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes mqb-arrive-right { from { opacity: 0; transform: translate(-65px, 100px) rotate(-5deg); } to { opacity: 1; transform: translateY(28px) rotate(6deg); } }
.mqb-app-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; border-top: 1px solid var(--filet-fort); padding-top: 30px; }
.mqb-app-steps h4 { font-size: 21px; line-height: 1.25; font-weight: 500; margin: 14px 0 10px; }
.mqb-app-steps p { font-size: 15px; color: var(--second); }
.mqb-web-label { margin: 45px 0 20px; }
@media (max-width: 700px) {
 .mqb-app { padding: 25px 16px; }
 .mqb-app-intro { grid-template-columns: 1fr; gap: 15px; }
 .mqb-device { width: 38%; flex-basis: 38%; margin-inline: -3%; }
 .mqb-device img { height: clamp(175px, 56vw, 360px); }
 .mqb-device figcaption { font-size: 10px; }
 .mqb-phone-stage { padding: 30px 0 55px; }
 .mqb-app-steps { grid-template-columns: 1fr; gap: 25px; }
 .mqb-app-steps h4 { margin-top: 8px; }
}
@media (prefers-reduced-motion: reduce) {
 .mqb-phone-stage.entre .mqb-device { animation: none; }
}

@media (max-width: 900px), (pointer: coarse) {
  .barre-dedans { gap: 8px; }
  .barre-actions { gap: 6px; }
  .barre .marque { min-width: 44px; min-height: 44px; }
  .premium-nav-contact, .bouton-menu { min-height: 44px; }
  .film-caption { padding-block: 0; }
  .film-caption button { min-height: 44px; min-width: 64px; }
}