/* Ce que toutes les pages du site partagent : la barre du haut (menu, jour / nuit, App Store),
   le menu du téléphone, le pied de page, et les pages qui présentent une partie de l'app. */

/* ── la barre du haut ── */
.barre { gap: 18px; transition: background-color .3s ease, box-shadow .3s ease, padding .3s ease }
.barre.plein { background: rgba(26, 18, 22, .82); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 10px 30px -18px rgba(0, 0, 0, .5);
  padding-top: max(10px, env(safe-area-inset-top, 0px)); padding-bottom: 10px }
.barre .logo { color: #fff; align-items: center }
.barre .logo img { width: 38px; height: 38px; border-radius: 22.5%; box-shadow: 0 4px 12px -4px rgba(0, 0, 0, .35) }
.barre .store { background: #fff; color: var(--encre) }
.barre .droite { display: flex; align-items: center; gap: 10px }
.menu { display: flex; align-items: center; gap: 2px; margin: 0 auto; padding: 4px; border-radius: 99px; background: rgba(255, 255, 255, .12); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16) }
.menu a { color: #fff; text-decoration: none; font-weight: 800; font-size: 14px; padding: 8px 13px; border-radius: 99px; white-space: nowrap; transition: background-color .2s }
.menu a:hover { background: rgba(255, 255, 255, .14) }
.menu a[aria-current="page"] { background: #fff; color: var(--encre) }

/* le bouton jour / nuit : un petit interrupteur, soleil d'un côté, croissant de l'autre */
.mode { pointer-events: auto; position: relative; width: 66px; height: 36px; border: 0; padding: 0; border-radius: 99px; cursor: pointer; background: rgba(255, 255, 255, .18);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .3); flex: none }
.mode::before { content: ""; position: absolute; top: 4px; left: 4px; width: 28px; height: 28px; border-radius: 50%; background: #fff; transition: transform .45s cubic-bezier(.34, 1.56, .64, 1) }
[data-mode="nuit"] .mode::before { transform: translateX(30px) }
.mode i, .mode b { position: absolute; top: 50%; width: 14px; height: 14px; margin-top: -7px; border-radius: 50% }
.mode i { left: 11px; background: #F2C14E; box-shadow: 0 0 0 3px rgba(242, 193, 78, .25) }
.mode b { right: 11px; background: #8C93C8; -webkit-mask: radial-gradient(circle at 70% 32%, transparent 40%, #000 42%); mask: radial-gradient(circle at 70% 32%, transparent 40%, #000 42%) }
[data-mode="nuit"] .mode b { background: #3A4478 } [data-mode="nuit"] .mode i { background: rgba(255, 255, 255, .55); box-shadow: none }

/* le menu du téléphone : trois traits, puis un grand tiroir brun */
.burger { display: none; pointer-events: auto; width: 42px; height: 42px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .18); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .3); cursor: pointer; position: relative; flex: none }
.burger i { position: absolute; left: 12px; right: 12px; height: 2.5px; border-radius: 2px; background: #fff; transition: transform .3s, opacity .2s }
.burger i:nth-child(1) { top: 14px } .burger i:nth-child(2) { top: 20px } .burger i:nth-child(3) { top: 26px }
.tiroir-ouvert .burger i:nth-child(1) { transform: translateY(6px) rotate(45deg) }
.tiroir-ouvert .burger i:nth-child(2) { opacity: 0 }
.tiroir-ouvert .burger i:nth-child(3) { transform: translateY(-6px) rotate(-45deg) }
.tiroir { position: fixed; inset: 0; z-index: 29; background: #2A1A14; color: #FBF6EF; display: grid; align-content: start; gap: 6px;
  padding: calc(max(14px, env(safe-area-inset-top, 0px)) + 72px) 20px max(24px, env(safe-area-inset-bottom, 0px));
  opacity: 0; visibility: hidden; transform: translateY(-12px); transition: opacity .25s ease, transform .3s ease, visibility 0s .3s; overflow-y: auto }
.tiroir-ouvert .tiroir { opacity: 1; visibility: visible; transform: none; transition: opacity .25s ease, transform .3s ease }
.tiroir a.lien { display: flex; align-items: center; gap: 14px; color: inherit; text-decoration: none; font-family: var(--titre); font-weight: 900; font-size: 26px; letter-spacing: -.02em; padding: 10px 4px; border-bottom: 1px solid rgba(255, 255, 255, .08) }
.tiroir a.lien img { width: 44px; height: 44px; border-radius: 12px }
.tiroir a.lien[aria-current="page"] { color: var(--sable) }
.tiroir .store { margin-top: 18px; justify-self: start; background: #fff; color: var(--encre) }
@media (max-width: 1080px) { .menu a { padding: 8px 9px; font-size: 13px } }
@media (max-width: 960px) {
  .menu { display: none } .burger { display: block }
  .barre .droite .store { display: none }
}
@media (max-width: 420px) {
  .barre .logo b { display: none } .barre .droite { gap: 8px }
  .mode { width: 58px; height: 32px } .mode::before { width: 24px; height: 24px } [data-mode="nuit"] .mode::before { transform: translateX(26px) }
  .mode i { left: 9px } .mode b { right: 9px }
}

/* ── le pied de page ── */
.pied { background: #2A1A14; color: #E9DCCF; padding: 44px max(20px, env(safe-area-inset-right, 0px)) max(22px, env(safe-area-inset-bottom, 0px)) max(20px, env(safe-area-inset-left, 0px)) }
.pied .cols { max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 28px 40px }
.pied .marque { display: grid; gap: 14px; justify-items: start }
.pied .marque .logo { color: #fff; align-items: center } .pied .marque .logo img { width: 44px; height: 44px; border-radius: 22.5% }
.pied .marque p { margin: 0; font-weight: 600; color: #CDB9A8; max-width: 300px; line-height: 1.45 }
.pied .store { background: #fff; color: var(--encre) }
.pied h3 { font-family: var(--texte); font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--sable); margin: 0 0 12px }
.pied ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px }
.pied a { color: #FBF6EF; text-decoration: none; font-weight: 700 }
.pied ul a:hover { color: var(--sable) }
.pied .bas { max-width: 1120px; margin: 36px auto 0; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .1); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; font-size: 13px; color: #A8968A }
.pied .bas a { color: #CDB9A8; font-weight: 600; text-decoration: underline; text-underline-offset: 2px }
@media (max-width: 700px) {
  .pied { padding-top: 32px }
  .pied .cols { grid-template-columns: 1fr 1fr; gap: 26px 20px } .pied .marque { grid-column: 1 / -1 }
  .pied .bas { margin-top: 26px }
}

/* ── les pages d'une partie de l'app ── */
.page { --fond: #FBF6EF; --carte: #fff; --encre-p: #2A1A14; --doux: #6E5A50; --filet: rgba(42, 26, 20, .08); --pastille: #F6E6B8;
  background: var(--fond); color: var(--encre-p); overflow-x: hidden; transition: background-color .8s ease, color .8s ease }
.page[data-mode="nuit"] { --fond: #12172C; --carte: #1C2340; --encre-p: #F3EDE4; --doux: #B9BED6; --filet: rgba(255, 255, 255, .08); --pastille: #2A3256 }
.page main { display: block }

/* le haut : le ciel et les dunes du site, le titre, une capture, et Nuqta debout à côté */
.ciel-haut { position: relative; min-height: min(760px, 92vh); min-height: min(760px, 92svh); overflow: hidden; color: #FBF6EF;
  background: linear-gradient(#123E6E 0%, #2563A0 34%, #5F9FCF 56%, #A9D4E8 72%, #D6ECEF 82%) }
.ciel-haut::before { content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity 1s ease; background: linear-gradient(#0E1430 0%, #1B2650 38%, #33437A 60%, #56609A 74%) }
[data-mode="nuit"] .ciel-haut::before { opacity: 1 }
.ciel-haut .etoiles { position: absolute; inset: 0 0 40%; opacity: 0; transition: opacity 1s }
[data-mode="nuit"] .ciel-haut .etoiles { opacity: 1 }
.ciel-haut .etoiles i { position: absolute; width: 4px; height: 4px; border-radius: 1px; background: #F4E9CB; transform: rotate(45deg); animation: scintille 3s ease-in-out infinite alternate }
@keyframes scintille { from { opacity: .2 } to { opacity: .95 } }
.ciel-haut .astre { position: absolute; right: 9%; top: 15%; width: min(8vw, 96px); aspect-ratio: 1 }
.astre .jour, .astre .lune { position: absolute; inset: 0; transition: opacity .8s ease, transform .9s cubic-bezier(.2, .8, .2, 1) }
.astre .jour { border-radius: 50%; background: radial-gradient(circle at 36% 32%, #FFF1BE 0%, #F7D66E 48%, #EDB54C 100%); box-shadow: 0 0 0 calc(min(8vw, 96px) * .14) rgba(255, 226, 140, .22), 0 0 60px 10px rgba(255, 226, 140, .25) }
[data-mode="nuit"] .astre .jour { opacity: 0; transform: translateY(60%) scale(.8) }
.astre .lune { opacity: 0; transform: translateY(-40%) rotate(-38deg) scale(.7); filter: drop-shadow(0 0 14px rgba(255, 244, 214, .6)) }
[data-mode="nuit"] .astre .lune { opacity: 1; transform: rotate(-18deg) }
.astre .lune u { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 28% 50%, #FFFDF4 0%, #F7EDD2 45%, #E6D3A6 100%);
  -webkit-mask: radial-gradient(circle at 68% 36%, transparent 39%, #000 40.5%); mask: radial-gradient(circle at 68% 36%, transparent 39%, #000 40.5%) }
.ciel-haut .dunes { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 46%; display: block }
.dunes path { transition: fill 1s ease }
.dunes .d1 { fill: #E9A46C } .dunes .d2 { fill: #C9603D } .dunes .d3 { fill: #F2D16B } .dunes .d4 { fill: var(--fond) }
[data-mode="nuit"] .dunes .d1 { fill: #B24A2D } [data-mode="nuit"] .dunes .d2 { fill: #D98056 } [data-mode="nuit"] .dunes .d3 { fill: #EFC86D }
.ciel-haut .dedans { position: relative; z-index: 2; max-width: 1120px; margin: 0 auto; min-height: inherit; display: grid; grid-template-columns: 1.1fr .9fr; align-items: end; gap: 24px;
  padding: 110px 20px 96px }
.ciel-haut .titre { display: grid; gap: 16px; justify-items: start; align-self: center; padding-bottom: 8vh }
.ciel-haut .titre > small { font-weight: 800; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--sable) }
.ciel-haut h1 { font-size: clamp(34px, 4.6vw, 64px); font-weight: 900; letter-spacing: -.03em; line-height: 1 }
.ciel-haut h1 em { font-style: normal; color: var(--sable) }
.ciel-haut .titre p { margin: 0; max-width: 520px; font-size: clamp(16px, 1.35vw, 19px); line-height: 1.45; font-weight: 600; color: #DCE8F3 }
[data-mode="nuit"] .ciel-haut .titre p { color: #C9D0EA }
.ciel-haut .actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px }
.ciel-haut .store { background: #fff; color: var(--encre) }
.bouton-doux { display: inline-flex; align-items: center; gap: 8px; border-radius: 99px; padding: 12px 18px; font-weight: 800; font-size: 14px; text-decoration: none; color: #fff;
  background: rgba(255, 255, 255, .14); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .45); transition: background-color .2s, transform .2s }
.bouton-doux:hover { background: rgba(255, 255, 255, .24); transform: translateY(-2px) }
.bouton-doux::after { content: ""; width: 7px; height: 7px; border-top: 2.5px solid currentColor; border-right: 2.5px solid currentColor; transform: rotate(45deg); margin-left: 2px }
.ciel-haut .vitrine { position: relative; justify-self: center; align-self: end; display: flex; align-items: flex-end; justify-content: center }
.ciel-haut .vitrine .iphone { width: min(220px, 17vw, 27vh); transform: rotate(3deg); filter: drop-shadow(0 26px 22px rgba(10, 20, 40, .45)) }
.ciel-haut canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none }

/* les blocs de la page */
.bloc { max-width: 1120px; margin: 0 auto; padding: 72px 20px }
.bloc > h2, .bloc > header h2 { font-size: clamp(26px, 3vw, 40px); font-weight: 900; letter-spacing: -.02em; line-height: 1.05 }
.bloc > header { display: grid; gap: 10px; margin-bottom: 30px; max-width: 680px }
.bloc > header p { margin: 0; color: var(--doux); font-weight: 600; font-size: 17px; line-height: 1.45 }
.bloc > header small { font-weight: 800; font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--terracotta) }
[data-mode="nuit"] .bloc > header small { color: var(--sable) }
.cartes { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px }
.carte { background: var(--carte); border-radius: 26px; padding: 22px; display: grid; gap: 10px; align-content: start; box-shadow: 0 1px 0 var(--filet), 0 18px 34px -26px rgba(42, 26, 20, .35); transition: background-color .8s }
.carte img { width: 76px; height: 76px; border-radius: 20px }
.carte h3 { font-size: 19px; font-weight: 900; letter-spacing: -.01em; line-height: 1.15 }
.carte p { margin: 0; color: var(--doux); font-weight: 600; line-height: 1.45; font-size: 15px }
.carte .chiffre { font-family: var(--titre); font-weight: 900; font-size: 34px; letter-spacing: -.03em; color: var(--terracotta); line-height: 1 }
[data-mode="nuit"] .carte .chiffre { color: var(--sable) }

/* une capture et ses étapes, en alternance */
.rangee { display: grid; grid-template-columns: auto 1fr; gap: 48px; align-items: center; padding: 26px 0 }
.rangee:nth-of-type(even) { grid-template-columns: 1fr auto } .rangee:nth-of-type(even) .iphone { order: 2 }
.rangee .iphone { width: min(250px, 60vw); transform: rotate(-2.5deg) } .rangee:nth-of-type(even) .iphone { transform: rotate(2.5deg) }
.rangee .texte { display: grid; gap: 12px; max-width: 520px }
.rangee h3 { font-size: clamp(22px, 2.4vw, 30px); font-weight: 900; letter-spacing: -.02em; line-height: 1.1 }
.rangee p { margin: 0; color: var(--doux); font-weight: 600; font-size: 16.5px; line-height: 1.5 }
.points { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 10px }
.points li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; font-weight: 700; line-height: 1.4 }
.points li::before { content: ""; width: 11px; height: 11px; margin: 5px 0 0 4px; border-radius: 2.5px; transform: rotate(45deg); background: var(--terracotta) }
[data-mode="nuit"] .points li::before { background: var(--sable) }

/* gratuit / Premium */
.offre { display: grid; grid-template-columns: 1fr 1fr; gap: 16px }
.offre > div { border-radius: 28px; padding: 26px; display: grid; gap: 12px; align-content: start }
.offre .gratuit { background: var(--pastille); transition: background-color .8s }
.offre .premium { background: var(--terracotta); color: #FBF6EF }
.offre h3 { font-size: 22px; font-weight: 900 }
.offre .premium .points li::before { background: var(--sable) }
.offre .prix { font-family: var(--titre); font-weight: 900; font-size: 30px; letter-spacing: -.02em }
.offre .prix small { font-family: var(--texte); font-size: 15px; font-weight: 700; opacity: .85 }

/* la fin de page : commencer, ou passer à la partie suivante */
.suite { max-width: 1120px; margin: 0 auto 72px; padding: 0 20px }
.suite > div { border-radius: 32px; padding: 34px; background: #2563A0; color: #FBF6EF; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; transition: background-color .8s }
[data-mode="nuit"] .suite > div { background: #1B2650 }
.suite h2 { font-size: clamp(24px, 2.8vw, 36px); font-weight: 900; letter-spacing: -.02em; line-height: 1.05 }
.suite .actions { display: flex; flex-wrap: wrap; gap: 10px }
.suite .store { background: #fff; color: var(--encre) }

/* les morceaux apparaissent en « pop » quand on arrive dessus */
.apparait { opacity: 0; transform: translateY(22px) scale(.97); transition: opacity .5s ease-out, transform .7s cubic-bezier(.34, 1.56, .64, 1) }
.apparait.vu { opacity: 1; transform: none }
.ciel-haut .apparait { transition-delay: var(--d, 0s) }

@media (max-width: 860px) {
  .ciel-haut { min-height: 0 }
  .ciel-haut .dedans { grid-template-columns: 1fr; padding: 96px 16px 0; gap: 18px; text-align: center }
  .ciel-haut .titre { justify-items: center; padding-top: 0 }
  .ciel-haut .actions { justify-content: center }
  .ciel-haut .vitrine { height: auto; padding-bottom: 54px }
  .ciel-haut .vitrine .iphone { width: min(170px, 40vw) }
  /* la place de Nuqta, debout à gauche de la vitrine */
  .ciel-haut .vitrine { padding-left: clamp(84px, 28vw, 130px) }
  .ciel-haut .astre { right: 6%; top: 82px; width: 54px }
  .ciel-haut .dunes { height: 34% }
  .bloc { padding: 52px 16px }
  .rangee, .rangee:nth-of-type(even) { grid-template-columns: 1fr; gap: 22px; justify-items: center; text-align: left }
  .rangee:nth-of-type(even) .iphone { order: 0 }
  .offre { grid-template-columns: 1fr }
  .suite { padding: 0 16px; margin-bottom: 52px } .suite > div { padding: 26px }
}
@media (prefers-reduced-motion: reduce) { .apparait { opacity: 1; transform: none } }
.offre.trois { grid-template-columns: repeat(3, 1fr) }
.offre .pack { background: #2563A0; color: #FBF6EF; transition: background-color .8s }
[data-mode="nuit"] .offre .pack { background: #1B2650 }
.offre .pack .points li::before { background: var(--sable) }
@media (max-width: 960px) { .offre.trois { grid-template-columns: 1fr } }

/* ── un décor propre à chaque page ── */
.ciel-haut .decor { position: absolute; inset: 0; pointer-events: none; transition: filter .8s ease }
[data-mode="nuit"] .ciel-haut:not(.desert) .decor { filter: brightness(.78) saturate(.92) }
.ciel-haut:not(.desert)::before { display: none }
[data-mode="nuit"] .ciel-haut:not(.desert) { filter: none }
.vitrine { --pied: 0px }

/* Lire : de grandes lettres plantées dans les dunes, comme des monuments */
.desert .lettres { position: absolute; inset: 0; pointer-events: none }
.desert .lettres span { position: absolute; bottom: 21%; opacity: .92; font-family: var(--kufi); font-weight: 700; font-size: var(--t); line-height: 1; color: #FFF3DD;
  transform: rotate(var(--r)); text-shadow: 6px 8px 0 rgba(150, 60, 30, .25); transition: color 1s }
[data-mode="nuit"] .desert .lettres span { color: #F1E3C7; text-shadow: 6px 8px 0 rgba(10, 16, 40, .35) }

/* Comprendre : une table de jeu pétrole, les cartes en éventail derrière l'iPhone, la jauge du Coran */
.table { background: radial-gradient(130% 90% at 50% 110%, #3A8F89 0%, #2F7D78 42%, #1F5C58 78%, #174A46 100%) }
[data-mode="nuit"] .table { background: radial-gradient(130% 90% at 50% 110%, #24605C 0%, #1D5450 42%, #133B38 78%, #0E2D2B 100%) }
.table .plateau { position: absolute; left: 0; right: 0; bottom: 0; height: 110px; background: #174A46; box-shadow: inset 0 3px 0 rgba(255, 255, 255, .08), 0 -24px 40px -20px rgba(0, 0, 0, .3) }
.table .jauge { position: absolute; right: 7%; top: 17%; width: min(150px, 13vw); aspect-ratio: 1; border-radius: 50%; display: grid; place-content: center; text-align: center; gap: 2px;
  background: radial-gradient(closest-side, #1F5C58 74%, transparent 75% 100%), conic-gradient(#F2D16B 0 40%, rgba(255, 255, 255, .14) 40% 100%) }
.table .jauge b { font-family: var(--titre); font-size: clamp(20px, 2.2vw, 30px); font-weight: 900; color: #F2D16B; line-height: 1 }
.table .jauge span { font-size: 11px; font-weight: 700; color: #CFE5E0; line-height: 1.2 }
.table .vitrine { padding-bottom: 0 }
.table .dedans { padding-bottom: 100px }
.eventail { position: absolute; left: 50%; bottom: 14%; width: 0; height: 0 }
.eventail i { position: absolute; left: 0; bottom: 0; width: min(118px, 10vw); aspect-ratio: 5 / 7; margin-left: calc(min(118px, 10vw) / -2); border-radius: 14px; background: var(--c); color: var(--t);
  display: grid; place-items: center; font-style: normal; font-size: clamp(22px, 2.4vw, 34px); box-shadow: 0 14px 26px -14px rgba(0, 0, 0, .5);
  transform: translateX(var(--x)) rotate(var(--r)); transform-origin: 50% 120% }
.table .vitrine .iphone { position: relative; z-index: 1; transform: rotate(0deg) }

/* Grammaire : une étagère dans une pièce terracotta, les cinq livres debout, l'iPhone appuyé contre eux */
.etagere { background: linear-gradient(#C9603D 0%, #B5452B 60%, #9E3A23 100%) }
.etagere .decor { background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .025) 0 2px, transparent 2px 120px) }
.etagere .planche { position: absolute; left: 0; right: 0; bottom: 96px; height: 26px; background: #6E3A22; box-shadow: inset 0 4px 0 #8A4B2C, 0 22px 30px -10px rgba(60, 20, 10, .45) }
.etagere .planche::after { content: ""; position: absolute; left: 0; right: 0; top: 26px; height: 200px; background: linear-gradient(rgba(60, 20, 10, .25), transparent) }
.etagere .dedans { padding-bottom: 122px }
.etagere .vitrine { gap: 0; align-items: flex-end }
.livres { display: flex; align-items: flex-end; gap: 4px; height: min(300px, 26vw, 34vh); margin-right: 12px }
.livres i { width: min(44px, 3.8vw); height: var(--h); border-radius: 6px 6px 2px 2px; background: var(--c); color: var(--t, #FBF6EF); font-style: normal; font-weight: 900; font-size: 12px; letter-spacing: .04em;
  writing-mode: vertical-rl; transform: rotate(180deg); display: grid; place-items: center; box-shadow: inset -5px 0 0 rgba(0, 0, 0, .12), inset 0 8px 0 rgba(255, 255, 255, .1) }
.etagere .vitrine .iphone { width: min(160px, 13vw, 21vh); transform: rotate(7deg); transform-origin: 0 100% }

/* Par cœur : l'aube, une tablette terracotta avec trois versets, et l'iPhone posé devant */
.aube { background: linear-gradient(#3B2A55 0%, #6E4363 30%, #C66A6A 56%, #EE9E73 74%, #F6C08A 88%) }
[data-mode="nuit"] .aube { background: linear-gradient(#1A1638 0%, #352850 34%, #6A3E5E 60%, #A85E5E 80%, #C9845F 92%) }
.aube .etoiles { opacity: .7 !important; inset: 0 0 55% }
.aube .levant { position: absolute; left: 50%; bottom: 104px; width: min(560px, 60vw); aspect-ratio: 1; transform: translate(-50%, 50%); border-radius: 50%;
  background: radial-gradient(circle, #FFE7B0 0 38%, rgba(255, 231, 176, .35) 48%, transparent 70%) }
.aube .sable { position: absolute; left: 0; right: 0; bottom: 0; height: 104px; background: #E7A86F; box-shadow: inset 0 4px 0 #F1BE86 }
.aube .dedans { padding-bottom: 96px }
.lawh { position: relative; width: min(270px, 22vw); aspect-ratio: 27 / 34; border-radius: 26px 26px 18px 18px; background: #B5452B; padding: 16px; box-shadow: 0 30px 40px -24px rgba(60, 20, 30, .6), inset 0 -6px 0 rgba(0, 0, 0, .15) }
.lawh::before { content: ""; position: absolute; left: 50%; top: -26px; width: 34%; height: 40px; transform: translateX(-50%); border-radius: 20px 20px 0 0; background: #B5452B }
.lawh::after { content: ""; position: absolute; left: 50%; top: -14px; width: 12%; height: 12px; transform: translateX(-50%); border-radius: 8px; background: #6E2A1A }
.lawh .ar { height: 100%; border-radius: 14px; background: #F6E3C4; display: grid; align-content: center; gap: 6%; padding: 10% 8%; text-align: center; color: #2A1A14;
  font-size: clamp(15px, 1.7vw, 24px); line-height: 1.5; box-shadow: inset 0 0 0 2px rgba(110, 42, 26, .15) }
.aube .vitrine .iphone.petit { width: min(120px, 10vw, 17vh); margin-left: -34px; transform: rotate(6deg); position: relative; z-index: 1 }

/* En famille : le salon brun, les profils en haut, l'affiche du défi du soir derrière l'iPhone */
.salon { background: radial-gradient(90% 70% at 62% 0%, rgba(242, 209, 107, .2), transparent 62%), linear-gradient(#2A1A14, #3A2820) }
.salon .profils { position: absolute; right: 7%; top: 16%; display: flex; gap: 12px }
.salon .profils i { width: min(54px, 5vw); aspect-ratio: 1; border-radius: 50%; background: var(--c); color: var(--t, #FBF6EF); display: grid; place-items: center; font-style: normal;
  font-family: var(--titre); font-weight: 900; font-size: clamp(14px, 1.6vw, 20px); box-shadow: 0 0 0 3px #2A1A14, 0 0 0 5px rgba(255, 255, 255, .14) }
.salon .profils i.joue { box-shadow: 0 0 0 3px #2A1A14, 0 0 0 6px #F2D16B }
.salon .tapis { position: absolute; left: 50%; bottom: -8%; width: 120%; height: 30%; transform: translateX(-50%); border-radius: 50%; background: #7A5540; box-shadow: inset 0 10px 0 rgba(255, 255, 255, .06), 0 0 0 18px rgba(122, 85, 64, .35) }
.salon .dedans { padding-bottom: 80px }
.affiche { width: min(190px, 15vw); aspect-ratio: 2 / 3; margin-right: -14px; margin-bottom: 0; border-radius: 18px; background: linear-gradient(160deg, #C9603D, #8E3520); color: #FBF6EF;
  display: grid; align-content: end; gap: 4px; padding: 18px; transform: rotate(-6deg); transform-origin: 100% 100%; box-shadow: 0 24px 40px -20px rgba(0, 0, 0, .6) }
.affiche small { font-weight: 800; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #F2D16B }
.affiche b { font-family: var(--titre); font-size: clamp(28px, 3vw, 42px); font-weight: 900; letter-spacing: -.03em; line-height: 1 }
.affiche span { font-weight: 800; font-size: 14px }
.salon .vitrine .iphone { position: relative; z-index: 1; transform: rotate(3deg) }

/* Prix : un fond sable clair, des billets de cinéma en tas */
.billets { background: linear-gradient(#F6E6B8 0%, #F4DC94 60%, #F2D16B 100%); color: #2A1A14 }
[data-mode="nuit"] .billets { background: linear-gradient(#3A2E1E 0%, #4A3A22 60%, #5A4626 100%); color: #FBF6EF }
.billets .los { position: absolute; width: 90px; height: 90px; border-radius: 18px; background: rgba(181, 69, 43, .08); transform: rotate(45deg) scale(var(--s, 1)) }
.billets .sol-clair { position: absolute; left: 0; right: 0; bottom: 0; height: 100px; background: #E9C48F; box-shadow: inset 0 3px 0 #F1D3A6 }
[data-mode="nuit"] .billets .sol-clair { background: #6A5232; box-shadow: inset 0 3px 0 #7A6040 }
.billets .dedans { padding-bottom: 92px }
.tas { position: relative; width: min(300px, 26vw); height: min(330px, 30vw, 42vh) }
.billet { position: absolute; left: 0; right: 0; height: 36%; border-radius: 16px; padding: 14px 20px; display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto 1fr; align-items: end; column-gap: 12px;
  transform: rotate(var(--r)); box-shadow: 0 16px 26px -16px rgba(60, 30, 10, .5);
  -webkit-mask: radial-gradient(circle 12px at 0 50%, transparent 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 12px at 100% 50%, transparent 98%, #000) right / 51% 100% no-repeat;
  mask: radial-gradient(circle 12px at 0 50%, transparent 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 12px at 100% 50%, transparent 98%, #000) right / 51% 100% no-repeat }
.billet small { grid-column: 1 / -1; font-weight: 800; font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; opacity: .8; align-self: start }
.billet b { font-family: var(--titre); font-weight: 900; font-size: clamp(24px, 2.4vw, 34px); letter-spacing: -.02em; line-height: 1 }
.billet span { font-weight: 700; font-size: 13px; opacity: .85; padding-bottom: 3px }
.billet.b1 { bottom: 0; background: #FBF6EF; color: #2A1A14 }
.billet.b2 { bottom: 31%; background: #B5452B; color: #FBF6EF }
.billet.b3 { bottom: 62%; background: #2F7D78; color: #FBF6EF }
.haut-clair .billets .titre p { color: #5B4636 } .haut-clair .billets h1 em, .haut-clair .billets .titre > small { color: #B5452B }
[data-mode="nuit"].haut-clair .billets .titre p { color: #E2D3BF } [data-mode="nuit"].haut-clair .billets h1 em, [data-mode="nuit"].haut-clair .billets .titre > small { color: #F2D16B }
.haut-clair .billets .bouton-doux { color: #2A1A14; background: rgba(42, 26, 20, .06); box-shadow: inset 0 0 0 1.5px rgba(42, 26, 20, .35) }
[data-mode="nuit"].haut-clair .billets .bouton-doux { color: #fff; background: rgba(255, 255, 255, .12); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .45) }
/* sur le sable clair, la barre passe en brun tant qu'elle n'a pas de fond */
.haut-clair:not([data-mode="nuit"]) .barre:not(.plein) .logo, .haut-clair:not([data-mode="nuit"]) .barre:not(.plein) .menu a:not([aria-current]) { color: #2A1A14 }
.haut-clair:not([data-mode="nuit"]) .barre:not(.plein) .menu, .haut-clair:not([data-mode="nuit"]) .barre:not(.plein) .mode, .haut-clair:not([data-mode="nuit"]) .barre:not(.plein) .burger { background: rgba(42, 26, 20, .08); box-shadow: inset 0 0 0 1px rgba(42, 26, 20, .18) }
.haut-clair:not([data-mode="nuit"]) .barre:not(.plein) .menu a[aria-current] { background: #2A1A14; color: #fff }
.haut-clair:not([data-mode="nuit"]) .barre:not(.plein) .burger i { background: #2A1A14 }

@media (max-width: 860px) {
  .desert .lettres span { bottom: 17%; font-size: calc(var(--t) * .7) }
  .table .jauge { width: 92px; right: 5%; top: 84px } .table .jauge span { font-size: 9.5px }
  .table .dedans, .etagere .dedans, .aube .dedans, .billets .dedans { padding-bottom: 0 }
  .table .vitrine, .etagere .vitrine, .aube .vitrine, .salon .vitrine, .billets .vitrine { padding-bottom: 54px }
  .table .plateau { height: 74px } .eventail { bottom: 54px } .eventail i { width: 70px; margin-left: -35px; font-size: 20px; border-radius: 10px }
  .etagere .planche { bottom: 28px } .livres { height: 180px } .livres i { width: 24px; font-size: 9px } .etagere .vitrine .iphone { width: min(100px, 26vw) }
  .etagere .vitrine { padding-left: clamp(80px, 22vw, 100px) }
  .aube .sable { height: 66px } .lawh { width: min(200px, 52vw) } .aube .vitrine .iphone.petit { width: 84px; margin-left: -28px }
  .salon .profils { top: 84px; right: 5%; gap: 8px } .salon .profils i { width: 34px; font-size: 13px }
  .affiche { width: min(130px, 34vw); margin-right: -30px; padding: 12px } .affiche b { font-size: 26px }
  .billets .sol-clair { height: 66px } .tas { width: min(230px, 58vw); height: 240px }
}

/* ── la page Contact : une question par écran ── */
.contact-haut { min-height: 0 }
.contact-haut .dedans { grid-template-columns: 1fr; padding: 120px 20px 150px; min-height: 0 }
.contact-haut .titre { padding-bottom: 0 }
.contact-haut .dunes { height: 52% }
.formulaire { max-width: 620px; padding-top: 18px }
.formulaire form { display: grid; gap: 14px }
.formulaire fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 12px; min-width: 0; animation: monte .45s cubic-bezier(.34, 1.56, .64, 1) both }
.formulaire fieldset[hidden], .formulaire [hidden] { display: none !important }
@keyframes monte { from { opacity: 0; transform: translateY(14px) scale(.98) } to { opacity: 1; transform: none } }
.formulaire legend { padding: 0; font-family: var(--titre); font-weight: 900; font-size: clamp(22px, 2.6vw, 30px); letter-spacing: -.02em; line-height: 1.1; margin-bottom: 4px; float: left; width: 100% }
.formulaire legend + * { clear: both }
.marches { display: flex; justify-content: center; gap: 12px; padding: 4px 0 10px }
.marches i { width: 13px; height: 13px; border-radius: 3px; transform: rotate(45deg); background: var(--filet); box-shadow: inset 0 0 0 1.5px var(--filet); transition: background-color .3s, transform .3s }
.marches i.fait { background: var(--terracotta); box-shadow: none }
.marches i.ici { background: var(--sable); box-shadow: none; transform: rotate(45deg) scale(1.3) }
.sortes { display: grid; gap: 10px }
.sorte { display: grid; grid-template-columns: 50px 1fr; align-items: center; gap: 14px; border: 0; text-align: left; background: var(--carte); color: var(--encre-p); border-radius: 22px; padding: 14px 16px; cursor: pointer;
  font-family: var(--texte); box-shadow: inset 0 0 0 1.5px var(--filet), 0 14px 28px -24px rgba(42, 26, 20, .4); transition: transform .2s, box-shadow .2s, background-color .8s }
.sorte:hover { transform: translateY(-2px) }
.sorte b { display: block; font-family: var(--titre); font-size: 16px; font-weight: 700 }
.sorte small { display: block; font-size: 14px; font-weight: 600; color: var(--doux); margin-top: 3px }
.sorte .pic { width: 50px; height: 50px; border-radius: 15px; display: grid; place-items: center }
.sorte .pic i { width: 19px; height: 19px; border-radius: 4px; background: #fff; transform: rotate(45deg) }
.sorte.bug .pic { background: var(--terracotta) } .sorte.idee .pic { background: var(--petrole) } .sorte.erreur .pic { background: var(--abricot) }
.retour { justify-self: start; border: 0; background: var(--filet); color: var(--doux); border-radius: 99px; padding: 8px 14px 8px 12px; font: 800 13.5px var(--texte); cursor: pointer; display: inline-flex; align-items: center; gap: 6px }
.retour::before { content: ""; width: 6px; height: 6px; border-left: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor; transform: rotate(45deg) }
.parties { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px }
.partie { border: 0; background: var(--carte); color: var(--encre-p); border-radius: 18px; padding: 14px 12px; font: 800 14.5px var(--texte); cursor: pointer; box-shadow: inset 0 0 0 1.5px var(--filet);
  text-align: left; display: flex; align-items: center; gap: 10px; min-height: 56px; transition: transform .15s, background-color .8s }
.partie:hover { transform: translateY(-2px) }
.partie i { flex: none; width: 12px; height: 12px; border-radius: 3px; transform: rotate(45deg); background: var(--teinte, var(--terracotta)) }
.formulaire label { display: grid; gap: 7px; font-weight: 800; font-size: 14.5px }
.formulaire label em { font-style: normal; font-weight: 600; color: var(--doux); font-size: 13px }
.cache-visuel { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%) }
.champ { width: 100%; border: 0; border-radius: 18px; background: var(--carte); color: var(--encre-p); padding: 14px 16px; font: 600 16px var(--texte); box-shadow: inset 0 0 0 1.5px var(--filet); resize: vertical; outline: none; transition: background-color .8s }
.champ:focus { box-shadow: inset 0 0 0 2px var(--terracotta) }
[data-mode="nuit"] .champ:focus { box-shadow: inset 0 0 0 2px var(--sable) }
.champ::placeholder { color: var(--doux); opacity: .7 }
textarea.champ { min-height: 150px; line-height: 1.45 }
.formulaire .capture { display: flex; align-items: center; gap: 10px; border: 1.5px dashed var(--doux); border-radius: 18px; padding: 13px 16px; color: var(--doux); cursor: pointer; position: relative }
.formulaire .capture input { position: absolute; inset: 0; opacity: 0; cursor: pointer }
.formulaire .capture .plus { width: 28px; height: 28px; border-radius: 9px; background: var(--filet); display: grid; place-items: center; font-size: 19px; color: var(--terracotta) }
.formulaire .capture.ok { border-style: solid; border-color: var(--petrole); color: var(--petrole) }
.formulaire .capture.ok .plus { background: var(--petrole); color: #fff }
.formulaire .capture:focus-within { outline: 3px solid var(--sable); outline-offset: 3px }
.envoyer { border: 0; border-radius: 99px; padding: 16px; font: 800 16px var(--texte); background: var(--terracotta); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px; transition: transform .15s, opacity .2s }
.envoyer:active { transform: scale(.98) }
.envoyer:disabled { opacity: .4; cursor: default }
.envoyer .los { width: 12px; height: 12px; border-radius: 3px; background: var(--sable); transform: rotate(45deg) }
.envoyer.envoi .los { animation: tourne .8s linear infinite }
@keyframes tourne { to { transform: rotate(405deg) } }
.erreur-envoi { margin: 0; font-weight: 700; color: var(--terracotta) }
[data-mode="nuit"] .erreur-envoi { color: var(--sable) }
.piege { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0 }
.merci { display: grid; justify-items: center; text-align: center; gap: 12px; padding: 20px 0 10px; animation: monte .45s cubic-bezier(.34, 1.56, .64, 1) both }
.merci .point { position: relative; width: 84px; height: 84px; margin: 10px 0 4px }
.merci .point i { position: absolute; inset: 14px; border-radius: 12px; background: var(--terracotta); transform: rotate(45deg); animation: tombe .7s cubic-bezier(.34, 1.56, .64, 1) both }
.merci .point u { position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px; border-radius: 2px; background: var(--sable); transform: rotate(45deg); animation: eclat .8s .35s ease-out both }
@keyframes tombe { from { transform: translateY(-70px) rotate(45deg) scale(.4); opacity: 0 } to { transform: rotate(45deg) } }
@keyframes eclat { from { opacity: 1; transform: rotate(45deg) } to { opacity: 0; transform: translate(var(--x), var(--y)) rotate(45deg) } }
.merci h2 { font-size: clamp(26px, 3vw, 36px); font-weight: 900 }
.merci p { margin: 0; color: var(--doux); font-weight: 600; font-size: 17px }
.merci .num { font-family: var(--titre); font-weight: 700; font-size: 14px; background: var(--pastille); border-radius: 99px; padding: 7px 14px }
.lien-doux { border: 0; background: none; color: var(--terracotta); font: 800 15px var(--texte); cursor: pointer; padding: 8px }
[data-mode="nuit"] .lien-doux { color: var(--sable) }
@media (max-width: 860px) {
  .contact-haut .dedans { padding: 100px 16px 120px; text-align: left }
  .contact-haut .titre { justify-items: start }
  .formulaire { padding-top: 8px }
  .parties { grid-template-columns: 1fr 1fr }
}
@media (max-width: 360px) { .etagere .vitrine .iphone { display: none } }
@media (prefers-reduced-motion: reduce) { .formulaire fieldset, .merci, .merci .point i, .merci .point u { animation: none } }