.qg-section {
  --table: #d3d8df; --nuit-doux: var(--texte-nuit-doux); --nuit-eteint: #8d97ad;
  overflow-x: clip;
}

.qg-plan text { font-family: "Arial Narrow", "Helvetica Neue", Arial, sans-serif; font-stretch: condensed; }
.qg-m { opacity: 0; transition: opacity 600ms ease-out; }
.qg-m-trace { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1400ms var(--sortie), opacity 300ms; }
.qg-scene[data-g="2"] .qg-m-ech, .qg-scene[data-g="3"] .qg-m-ech-reste { opacity: 1; }
.qg-scene[data-g="3"] .qg-m-met, .qg-scene[data-g="4"] .qg-m-met { opacity: 1; }
.qg-scene[data-g="3"] .qg-m-trace, .qg-scene[data-g="4"] .qg-m-trace { stroke-dashoffset: 0; }
.qg-scene[data-g="3"] .qg-m-dal { transition-delay: 500ms; }
.qg-scene[data-g="3"] .qg-m-lin { transition-delay: 900ms; }
.qg-scene[data-g="3"] .qg-m-sel { opacity: 1; transition-delay: 1500ms; }
.qg-scene[data-g="4"] .qg-m-leg { opacity: 1; }

.qg-rp { container-type: inline-size; background: #fff; aspect-ratio: 1 / 1.414; color: var(--nuit); font-family: "Montserrat", "Segoe UI", sans-serif; overflow: hidden; }
.qg-rp__in { padding: 7cqw 7cqw 5cqw; display: flex; flex-direction: column; height: 100%; }
.qg-rp__tete { display: flex; align-items: center; gap: 2.4cqw; padding-bottom: 3cqw; border-bottom: 0.35cqw solid var(--nuit); }
.qg-rp__logo { width: 7.5cqw; height: 7.5cqw; border-radius: 1.6cqw; background: var(--nuit); display: grid; place-items: center; }
.qg-rp__logo svg { width: 55%; height: 55%; }
.qg-rp__soc { font-size: 2.4cqw; line-height: 1.3; color: var(--texte-doux); }
.qg-rp__soc b { display: block; color: var(--nuit); font-size: 2.9cqw; }
.qg-rp__titre { font-weight: 800; font-size: 5.2cqw; letter-spacing: -0.02em; margin-top: 4.5cqw; line-height: 1.1; }
.qg-rp__sous { font-size: 2.4cqw; color: var(--texte-doux); margin-top: 1cqw; }
.qg-rp__lot { margin-top: 4cqw; font-size: 2.5cqw; font-weight: 700; background: var(--brume); padding: 1.2cqw 2cqw; border-radius: 1cqw; }
.qg-rp__ligne { display: grid; grid-template-columns: 3.2cqw 1fr auto; gap: 0 2cqw; align-items: start; padding: 2.6cqw 0; border-bottom: 0.2cqw solid var(--filet); font-size: 2.45cqw; }
.qg-rp__sym { width: 3.2cqw; height: 3.2cqw; margin-top: 0.3cqw; }
.qg-rp__nom { font-weight: 700; color: var(--c); filter: brightness(0.78); }
.qg-rp__calc { grid-column: 2; color: var(--texte-doux); font-variant-numeric: tabular-nums; margin-top: 0.6cqw; line-height: 1.45; }
.qg-rp__q { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.qg-rp__pied { margin-top: auto; display: flex; justify-content: space-between; font-size: 2.1cqw; color: var(--texte-doux); padding-top: 2cqw; }

.qg-app { position: absolute; inset: 0; display: grid; grid-template-rows: 3.6cqw 3.2cqw 7.2cqw minmax(0, 1fr) 3.1cqw; color: #f2f4f8; font-size: 1.15cqw; }
.qg-app__titre { display: flex; align-items: center; gap: 0.8cqw; padding: 0 1.4cqw; }
.qg-app__titre svg { width: 1.9cqw; height: 1.9cqw; }
.qg-app__titre b { font-weight: 700; font-size: 1.35cqw; }
.qg-app__titre .qg-app__doc { margin-inline: auto; font-size: 1.3cqw; font-weight: 600; }
.qg-app__onglets { display: flex; gap: 2.2cqw; padding: 0 1.4cqw; align-items: center; color: #c9d0dd; }
.qg-app__onglets span { position: relative; padding: 0.4cqw 0; }
.qg-app__onglets span.qg-on { color: #fff; font-weight: 600; }
.qg-app__onglets span.qg-on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -0.2cqw; height: 0.25cqw; background: var(--jaune); border-radius: 1px; }
.qg-app__ruban { display: flex; gap: 0.7cqw; padding: 0.5cqw 1cqw; }
.qg-grp { display: flex; flex-direction: column; background: rgb(255 255 255 / 0.06); border-radius: 0.6cqw; padding: 0.3cqw 0.4cqw 0.25cqw; }
.qg-grp--droite { margin-left: auto; }
.qg-grp__btns { display: flex; gap: 0.2cqw; flex: 1; }
.qg-grp__nom { text-align: center; font-size: 0.95cqw; color: #aab3c4; }
.qg-btn { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.3cqw; min-width: 4.6cqw; padding: 0 0.5cqw; border-radius: 0.4cqw; font-size: 1.05cqw; color: #f2f4f8; transition: background 300ms, box-shadow 300ms; }
.qg-btn svg { width: 2cqw; height: 2cqw; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.qg-btn::after { content: ""; position: absolute; left: 22%; right: 22%; bottom: 0.1cqw; height: 0.25cqw; border-radius: 1px; background: var(--jaune); transform: scaleX(0); transition: transform 300ms var(--sortie); }
.qg-b-ech { box-shadow: inset 0 0 0 0.15cqw #e08a00; }
.qg-b-exp { margin-left: auto; }
.qg-app__corps { display: grid; grid-template-columns: minmax(0, 1fr) 22cqw; gap: 0.6cqw; padding: 0 0.6cqw 0.6cqw; min-height: 0; }
.qg-pan { background: #fff; color: var(--nuit); border-radius: 0.6cqw; overflow: hidden; display: flex; flex-direction: column; min-height: 0; }
.qg-pan__t { background: var(--nuit); color: #f2f4f8; font-weight: 600; font-size: 1.15cqw; padding: 0.4cqw 1.2cqw 0.8cqw; }
.qg-pan__liste { padding: 0.6cqw 0; font-size: 1.05cqw; }
.qg-pan__ligne { display: flex; align-items: center; gap: 0.7cqw; padding: 0.55cqw 1.4cqw; position: relative; }
.qg-pan__ligne.qg-choisie { background: #ffefad; }
.qg-pan__ligne.qg-choisie::before { content: ""; position: absolute; left: 0.3cqw; top: 20%; bottom: 20%; width: 0.25cqw; background: var(--nuit); border-radius: 1px; }
.qg-pan__q { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 600; }
.qg-pan__ligne--type { opacity: 0; transform: translateX(-0.8cqw); transition: opacity 400ms, transform 400ms var(--sortie); }
.qg-pan__vide { padding: 1cqw; color: #5b6475; font-size: 1cqw; line-height: 1.45; transition: opacity 300ms; }
.qg-pan__groupe { font-weight: 700; }
.qg-pan__ligne .qg-sw { width: 1.4cqw; height: 1.4cqw; flex: none; }
.qg-app__statut { display: flex; align-items: center; gap: 1.6cqw; padding: 0 1.2cqw; font-size: 1cqw; color: #c9d0dd; }
.qg-app__statut .qg-k { background: rgb(255 255 255 / 0.1); border-radius: 0.3cqw; padding: 0.3cqw 0.8cqw; color: #fff; }
.qg-app__statut .qg-droite { margin-left: auto; display: flex; gap: 1.6cqw; }
.qg-st-ech b { font-weight: 600; color: #fff; }
.qg-st-ech .qg-avant { color: #ffb648; }
.qg-st-ech .qg-apres { display: none; }

.qg-recit { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: var(--e5); margin-top: var(--e5); }
.qg-gestes { padding-bottom: 30vh; }
.qg-geste { min-height: 78vh; display: flex; flex-direction: column; justify-content: center; }
.qg-couche { display: inline-flex; align-items: center; gap: var(--e2); font-size: var(--t-petit); font-weight: 600; color: var(--nuit-eteint); margin-bottom: var(--e3); transition: color 300ms; }
.qg-couche i { width: 14px; height: 14px; border-radius: 3px; border: 2px solid currentColor; }
.qg-geste h3 { font-size: clamp(1.9rem, 1.3rem + 1.6vw, 2.6rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.04; color: var(--nuit-eteint); transition: color 300ms; }
.qg-geste p { margin-top: var(--e3); color: var(--nuit-eteint); max-width: 34ch; transition: color 300ms; }
.qg-geste.qg-actif .qg-couche { color: var(--jaune); }
.qg-geste.qg-actif h3 { color: #fff; }
.qg-geste.qg-actif p { color: var(--nuit-doux); }
.qg-visuel { position: sticky; top: calc(var(--entete) + var(--e4)); align-self: start; }
.qg-scene { position: relative; width: min(100%, calc((100vh - var(--entete) - 2 * var(--e4) - 76px) * 1.6)); margin-left: auto; aspect-ratio: 16 / 10; border-radius: 14px; overflow: hidden; background: var(--nuit); container-type: inline-size; font-family: "Segoe UI", "Montserrat", system-ui, sans-serif;
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.16), 0 50px 100px -30px rgb(0 0 0 / 0.7); }
.qg-scene[data-g="1"] .qg-b-pdf::after, .qg-scene[data-g="3"] .qg-b-surf::after, .qg-scene[data-g="2"] .qg-b-ech::after { transform: scaleX(1); }
.qg-scene[data-g="2"] .qg-b-ech, .qg-scene[data-g="3"] .qg-b-ech, .qg-scene[data-g="4"] .qg-b-ech { box-shadow: inset 0 0 0 0.15cqw #4cc283; }
.qg-scene[data-g="4"] .qg-b-exp { background: var(--bleu); transition-delay: 900ms; }
.qg-scene .qg-o-rap::after { opacity: 0; }
.qg-scene[data-g="4"] .qg-o-acc { color: #c9d0dd; font-weight: 400; }
.qg-scene[data-g="4"] .qg-o-acc::after { opacity: 0; }
.qg-scene .qg-o-acc::after, .qg-scene .qg-o-rap::after { transition: opacity 300ms 900ms; }
.qg-scene[data-g="4"] .qg-o-rap { color: #fff; font-weight: 600; }
.qg-scene[data-g="4"] .qg-o-rap::after { content: ""; position: absolute; left: 0; right: 0; bottom: -0.2cqw; height: 0.25cqw; background: var(--jaune); opacity: 1; }
.qg-scene[data-g="2"] .qg-st-ech .qg-avant, .qg-scene[data-g="3"] .qg-st-ech .qg-avant, .qg-scene[data-g="4"] .qg-st-ech .qg-avant { display: none; }
.qg-scene[data-g="2"] .qg-st-ech .qg-apres, .qg-scene[data-g="3"] .qg-st-ech .qg-apres, .qg-scene[data-g="4"] .qg-st-ech .qg-apres { display: inline; }
.qg-scene[data-g="3"] .qg-pan__ligne--type, .qg-scene[data-g="4"] .qg-pan__ligne--type { opacity: 1; transform: none; }
.qg-scene[data-g="3"] .qg-pan__ligne--type:nth-child(3) { transition-delay: 300ms; }
.qg-scene[data-g="3"] .qg-pan__ligne--type:nth-child(4) { transition-delay: 600ms; }
.qg-scene[data-g="3"] .qg-pan__ligne--type:nth-child(5) { transition-delay: 900ms; }
.qg-scene[data-g="3"] .qg-pan__vide, .qg-scene[data-g="4"] .qg-pan__vide { display: none; }
.qg-table { position: relative; background: var(--table); border-radius: 0.6cqw; overflow: hidden; perspective: 140cqw; perspective-origin: 50% 20%; }
.qg-pile { position: absolute; left: 50%; top: 50%; width: 60%; aspect-ratio: 2300 / 1626; transform-style: preserve-3d; transform: translate(-50%, -46%) rotateX(56deg) rotateZ(-32deg); transition: transform 1300ms var(--sortie); }
.qg-c { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform 1200ms var(--sortie), opacity 600ms, background 600ms, box-shadow 600ms; }
.qg-c svg { width: 100%; height: 100%; max-width: none; }
.qg-c0 { background: #fff; box-shadow: 0 0 0 0.1cqw rgb(23 32 51 / 0.25), 0 3cqw 4cqw -2cqw rgb(23 32 51 / 0.45); }
.qg-c1, .qg-c2 { background: rgb(255 255 255 / 0.42); box-shadow: inset 0 0 0 0.15cqw rgb(23 32 51 / 0.38), 0 2cqw 3cqw -2cqw rgb(23 32 51 / 0.25); opacity: 0; transform: translateZ(40cqw); }
.qg-etiq { position: absolute; left: 0; top: -2%; transform: translateY(-100%); font: 700 1.5cqw/1.2 "Montserrat", sans-serif; color: var(--nuit); white-space: nowrap; opacity: 0; transition: opacity 400ms; }
.qg-etiq b { display: inline-grid; place-items: center; width: 2.2cqw; height: 2.2cqw; margin-right: 0.6cqw; border-radius: 0.5cqw; background: var(--nuit); color: var(--jaune); font-size: 1.3cqw; }
.qg-scene[data-g="1"] .qg-c0 .qg-etiq, .qg-scene[data-g="2"] .qg-c0 .qg-etiq, .qg-scene[data-g="2"] .qg-c1 .qg-etiq, .qg-scene[data-g="3"] .qg-etiq { opacity: 1; }
.qg-scene[data-g="2"] .qg-c1, .qg-scene[data-g="3"] .qg-c1 { opacity: 1; transform: translateZ(9cqw); }
.qg-scene[data-g="3"] .qg-c2 { opacity: 1; transform: translateZ(18cqw); }
.qg-scene[data-g="4"] .qg-pile { transform: translate(-66%, -50%) rotateX(0deg) rotateZ(0deg) scale(1.02); }
.qg-scene[data-g="4"] .qg-c1, .qg-scene[data-g="4"] .qg-c2 { opacity: 1; transform: translateZ(0); background: transparent; box-shadow: none; }
.qg-rapport { position: absolute; right: 4%; top: 6%; width: 33%; opacity: 0; transform: translateY(30%) rotate(5deg); transition: transform 1000ms var(--sortie), opacity 500ms; box-shadow: 0 2.4cqw 4cqw -1.6cqw rgb(23 32 51 / 0.55); }
.qg-scene[data-g="4"] .qg-rapport { opacity: 1; transform: rotate(2deg); transition-delay: 800ms; }
.qg-curseur { position: absolute; left: 0; top: 0; width: 2.2cqw; height: 2.2cqw; z-index: 5; transition: transform 1000ms var(--sortie); filter: drop-shadow(0 0.2cqw 0.3cqw rgb(0 0 0 / 0.35)); }

.qg-pilote { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; align-items: center; gap: var(--e3); margin-top: var(--e3); width: min(100%, calc((100vh - var(--entete) - 2 * var(--e4) - 76px) * 1.6)); margin-left: auto; }
.qg-pilote__legende { color: var(--nuit-doux); font-size: 0.95rem; line-height: 1.35; min-width: 0; }
.qg-pilote__num { color: var(--jaune); font-weight: 700; margin-right: var(--e1); }
.qg-pilote__legende [data-pilote-titre] { color: #fff; font-weight: 700; }
.qg-pilote__texte { display: none; }
.qg-pilote__points { display: flex; }
.qg-pilote__points button { width: 28px; height: 44px; border: 0; background: transparent; cursor: pointer; position: relative; padding: 0; }
.qg-pilote__points button::before { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; border: 2px solid var(--nuit-eteint); }
.qg-pilote__points button[aria-current]::before { background: var(--jaune); border-color: var(--jaune); }
.qg-pilote__btn { font: 600 0.9rem/1 "Montserrat", "Segoe UI", sans-serif; color: #fff; background: transparent; border: 1.5px solid rgb(255 255 255 / 0.45); border-radius: 999px; min-height: 44px; padding: 0 var(--e3); cursor: pointer; white-space: nowrap; }
.qg-pilote__btn:hover { background: rgb(255 255 255 / 0.08); }
.qg-pilote__btn--doux { border-color: transparent; color: var(--nuit-doux); padding: 0 12px; }
.qg-pilote button:focus-visible { outline: 3px solid var(--jaune); outline-offset: 2px; }
.qg-deroule .qg-recit { grid-template-columns: minmax(0, 1fr); }
.qg-deroule .qg-gestes { display: none; }
.qg-deroule .qg-visuel { position: static; }
.qg-deroule .qg-scene, .qg-deroule .qg-pilote { width: min(100%, 1040px); margin-inline: auto; }
.qg-deroule .qg-pilote__texte { display: block; margin-top: var(--e1); }
@media (max-width: 860px) {
  .qg-deroule .qg-scene { width: min(100%, calc((100vh - var(--entete) - 210px) / 1.2)); width: min(100%, calc((100svh - var(--entete) - 210px) / 1.2)); margin-inline: auto; }
}

@media (max-width: 860px) {
  .qg-recit { grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: var(--e4); }
  .qg-visuel { order: -1; top: var(--entete); z-index: 3; background: var(--nuit); padding: var(--e2) 0 var(--e3); }
  .qg-gestes { padding-bottom: 20vh; }
  .qg-geste { min-height: 60vh; justify-content: flex-start; padding-top: var(--e5); }
  .qg-scene, .qg-pilote { width: 100%; }
  .qg-scene { aspect-ratio: 1 / 1.2; border-radius: 12px; }
  .qg-scene .qg-app { font-size: 3.3cqw; grid-template-rows: 9cqw 7cqw 14cqw minmax(0, 1fr) 7cqw; }
  .qg-scene .qg-app__titre svg { width: 5cqw; height: 5cqw; }
  .qg-scene .qg-app__titre b { font-size: 3.6cqw; }
  .qg-scene .qg-app__titre .qg-app__doc, .qg-scene .qg-app__onglets .qg-o-plans, .qg-scene .qg-app__onglets .qg-o-bib, .qg-scene .qg-app__onglets .qg-o-fic { display: none; }
  .qg-scene .qg-app__onglets { gap: 5cqw; }
  .qg-scene .qg-grp__nom, .qg-scene .qg-b-img, .qg-scene .qg-b-long, .qg-scene .qg-b-cpt { display: none; }
  .qg-scene .qg-btn { font-size: 3cqw; min-width: 13cqw; }
  .qg-scene .qg-btn svg { width: 5cqw; height: 5cqw; }
  .qg-scene .qg-app__corps { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; gap: 1.5cqw; padding: 0 1.5cqw 1.5cqw; }
  .qg-scene .qg-pan__t { display: none; }
  .qg-scene .qg-pan__liste { display: grid; grid-template-columns: 1fr 1fr; padding: 0.5cqw 0; font-size: 3cqw; }
  .qg-scene .qg-pan__groupe { display: none; }
  .qg-scene .qg-pan__vide { grid-column: 1 / -1; font-size: 3cqw; padding: 2cqw 3.6cqw; }
  .qg-scene .qg-pan__ligne { padding: 1.6cqw 3.6cqw; gap: 1.5cqw; }
  .qg-scene .qg-pan__ligne .qg-sw { width: 3.2cqw; height: 3.2cqw; }
  .qg-scene .qg-pan__ligne--type { transform: none; }
  .qg-scene .qg-pan { min-height: 18cqw; }
  .qg-scene .qg-app__statut { font-size: 3cqw; }
  .qg-scene .qg-app__statut .qg-droite span:not(.qg-st-ech), .qg-scene .qg-app__statut > span:first-child { display: none; }
  .qg-pile { width: 62%; }
  .qg-etiq { font-size: 3.2cqw; }
  .qg-etiq b { width: 4.4cqw; height: 4.4cqw; font-size: 2.8cqw; }
  .qg-scene[data-g="2"] .qg-c1, .qg-scene[data-g="3"] .qg-c1 { transform: translateZ(12cqw); }
  .qg-scene[data-g="3"] .qg-c2 { transform: translateZ(24cqw); }
  .qg-scene[data-g="4"] .qg-pile { transform: translate(-72%, -50%) scale(0.92); }
  .qg-rapport { width: 40%; top: 5%; right: 3%; }
  .qg-curseur { width: 5cqw; height: 5cqw; }
  .qg-pilote { grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--e1) var(--e2); margin-top: var(--e2); }
  .qg-pilote__legende { grid-column: 1 / -1; font-size: 0.9rem; }
  .qg-pilote__btn--doux { justify-self: end; }
}

.qg-recit { display: none; }
.js .qg-recit { display: grid; }
.js .qg-bd { display: none; }
@media (max-width: 860px) {
  .js .qg-recit { display: none; }
  .js .qg-bd { display: block; }
}
.qg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.qg-bd { margin: var(--e5) 0 0; }
.qg-bd__case { display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center; margin: 0 0 var(--e6); }
.qg-bd__case:last-child { margin-bottom: 0; }
.qg-bd__texte { -webkit-box-flex: 0; flex: 0 0 280px; margin-right: var(--e5); -webkit-box-ordinal-group: 0; order: -1; }
.qg-bd__image { -webkit-box-flex: 1; flex: 1 1 auto; min-width: 0; margin: 0; -webkit-filter: drop-shadow(0 24px 36px rgba(0, 0, 0, 0.45)); filter: drop-shadow(0 24px 36px rgba(0, 0, 0, 0.45)); }
.qg-bd__image svg { display: block; width: 100%; height: auto; }
.qg-bd__portrait { display: none !important; }
.qg-bd .qg-couche { color: var(--jaune); }
.qg-bd__texte h3 { color: #fff; font-size: 2.1rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; }
.qg-bd__texte p { margin-top: var(--e3); color: var(--nuit-doux); max-width: 34ch; }
@media (max-width: 700px) {
  .qg-bd { margin-top: var(--e4); }
  .qg-bd__case { display: block; margin-bottom: 48px; }
  .qg-bd__texte { margin: 20px 0 0; }
  .qg-bd__texte h3 { font-size: 1.75rem; }
  .qg-bd__paysage { display: none !important; }
  .qg-bd__portrait { display: block !important; }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .qg-bd__case { view-timeline: --qg-case block; }
    .qg-bd-neuve { animation: qg-pose linear both; animation-timeline: --qg-case; animation-range: entry 15% cover 45%; }
    @keyframes qg-pose { from { opacity: 0; transform: translateY(-70px); } to { opacity: 1; transform: none; } }
  }
}

@media (prefers-reduced-motion: reduce) {
  .qg-section *, .qg-section *::before, .qg-section *::after { transition-duration: 0ms !important; transition-delay: 0ms !important; animation: none !important; }
}