/* Landing page de Motamot. Couleurs de l'app (Sources/Motamot/DesignSystem.swift) : nuit en haut, puis panneaux crème
   et nuit qui se chevauchent. Titres en Instrument Serif (OFL, hébergée ici), texte en police système. L'anneau est
   celui de l'app (anneau.js). Mouvements lents, courbe exponentielle douce. */

@font-face {
  font-family: "Instrument Serif"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/assets/instrument-serif.woff2?v=60c06664b5) format("woff2");
}
@font-face {
  font-family: "Instrument Serif"; font-style: italic; font-weight: 400; font-display: swap;
  src: url(/assets/instrument-serif-italique.woff2?v=6ee678c33f) format("woff2");
}

:root {
  color-scheme: dark;
  --creme: #f2ede6;
  --creme-doux: rgba(242, 237, 230, .68);
  --creme-pale: rgba(242, 237, 230, .44);
  --encre: #141517;
  --encre-doux: rgba(20, 21, 23, .66);
  --encre-pale: rgba(20, 21, 23, .44);
  --fond-haut: #1c2e30;
  --fond-milieu: #12171a;
  --fond-bas: #0a0b0d;
  --nuit-panneau: #0e1416;
  --sauge: #8fccb8;
  --sauge-fonce: #2d6b5b;
  --sarcelle: #70b8c9;
  --or: #ccba8a;
  --rose: #c98585;
  --carte: rgba(255, 255, 255, .045);
  --bord: rgba(255, 255, 255, .08);
  --bord-fort: rgba(255, 255, 255, .14);
  --doux: cubic-bezier(.16, 1, .3, 1);
  --serif: "Instrument Serif", ui-serif, "New York", Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; background: var(--fond-bas); }
body {
  margin: 0; overflow-x: hidden; color: var(--creme); font: 17px/1.6 var(--sans); -webkit-font-smoothing: antialiased;
  background: var(--fond-milieu) linear-gradient(180deg, var(--fond-haut) 0, var(--fond-milieu) 720px, var(--fond-bas) 1400px) no-repeat;
}
/* L'aurore déborde des côtés : sur iPhone, le body seul ne suffit pas et la page s'élargissait (437 px au lieu de 390).
   « clip » coupe sans créer de zone de défilement, le récit reste collant. */
main { overflow-x: clip; }
::selection { background: rgba(143, 204, 184, .32); }
a { color: var(--sauge); text-underline-offset: 3px; }
h1, h2 { font-family: var(--serif); font-weight: 400; letter-spacing: -.012em; margin: 0; text-wrap: balance; }
h1 em, h2 em { font-style: italic; color: var(--creme-doux); }
h2 { font-size: clamp(44px, 6.4vw, 96px); line-height: .98; }
h3 { font-size: 17px; font-weight: 600; margin: 0 0 8px; letter-spacing: -.005em; }
p { margin: 0; }
.surtitre { color: var(--sauge); font-size: 12px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; margin-bottom: 22px; }
.visuellement-cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[data-i="1"] { --i: 1; } [data-i="2"] { --i: 2; } [data-i="3"] { --i: 3; }

.grain {
  position: fixed; inset: -50%; z-index: 100; pointer-events: none; opacity: .05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* --- Barre du haut : transparente sur la scène, voilée dès qu'on descend --- */
.barre {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between;
  padding: 18px max(24px, calc((100vw - 1160px) / 2 + 24px)); transition: background .6s var(--doux), border-color .6s var(--doux), padding .6s var(--doux);
  border-bottom: 1px solid transparent;
}
.barre.voilee { background: rgba(12, 17, 19, .72); -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4); border-bottom-color: var(--bord); padding-top: 12px; padding-bottom: 12px; }
.barre.sur-creme { background: rgba(242, 237, 230, .82); border-bottom-color: rgba(20, 21, 23, .08); }
.barre.sur-creme .marque { color: var(--encre); }
.barre.sur-creme .barre-liens a { color: var(--encre-doux); }
.barre.sur-creme .barre-liens a:hover { color: var(--encre); }
.barre.sur-creme .barre-liens .barre-cta { background: var(--encre); color: var(--creme); }
.marque { display: inline-flex; align-items: center; gap: 10px; color: var(--creme); text-decoration: none; font: 400 25px/1 var(--serif); letter-spacing: -.01em; }
.marque-anneau { width: 26px; height: 26px; display: block; }
.barre-liens { display: flex; align-items: center; gap: 26px; }
.barre-liens a { color: var(--creme-doux); text-decoration: none; font-size: 15px; transition: color .4s var(--doux); }
.barre-liens a:hover { color: var(--creme); }
.barre-liens .barre-cta { color: var(--encre); background: var(--creme); padding: 9px 18px; border-radius: 999px; font-weight: 600; }
.barre-liens .barre-cta:hover { color: var(--encre); background: #fff; }
/* Langue de la page : FR · EN · ES, la langue affichée en blanc. */
.langues { display: inline-flex; align-items: center; gap: 2px; }
.barre-liens .langues a { font-size: 13px; font-weight: 500; letter-spacing: .08em; padding: 6px 7px; border-radius: 8px; color: var(--creme-doux); }
.barre-liens .langues a[aria-current="page"] { color: var(--creme); font-weight: 650; }
.barre.sur-creme .barre-liens .langues a[aria-current="page"] { color: var(--encre); }

/* --- Boutons et appels à l'action --- */
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 0 30px; border: 0; border-radius: 999px;
  background: var(--creme); color: var(--encre); font: 600 17px/1 var(--sans); text-decoration: none; cursor: pointer;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .2) inset, 0 12px 40px rgba(143, 204, 184, .18), 0 6px 18px rgba(0, 0, 0, .3);
  transition: transform .5s var(--doux), box-shadow .5s var(--doux), background .4s var(--doux);
}
.bouton:hover { transform: translateY(-2px); }
.bouton:active { transform: scale(.98); }
.bouton:disabled { opacity: .55; cursor: default; transform: none; }
.bouton svg { width: 18px; height: 18px; }
.cta { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 36px; }
.cta-secondaire { color: var(--creme-pale); font-size: 14px; }
.cta-secondaire a { color: var(--creme-doux); }
.cta-note { color: var(--creme-pale); font-size: 14px; line-height: 1.5; text-align: center; max-width: 540px; margin: 16px auto 0; }

/* --- Scène d'arrivée --- */
.scene { position: relative; isolation: isolate; max-width: 1240px; margin: 0 auto; padding: 104px 24px 150px; text-align: center; }
.scene-tete { position: relative; z-index: 2; }
.scene h1 { font-size: clamp(56px, min(8.4vw, 14vh), 132px); line-height: .94; }
.scene h1 .ligne { white-space: nowrap; }
.accent { font-style: italic; background: linear-gradient(100deg, var(--sauge) 10%, var(--sarcelle) 55%, var(--or) 110%); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: .04em; }
.sous-titre { color: var(--creme-doux); font-size: clamp(18px, 1.6vw, 22px); line-height: 1.5; max-width: 640px; margin: 22px auto 0; }
.sous-titre b { color: var(--creme); font-weight: 600; }

/* Titre : chaque mot monte à son tour. Les mots sont déjà enveloppés dans la page : l'animation part dès le premier affichage,
   sans attendre landing.js (sur téléphone, le titre s'affichait, disparaissait puis revenait). */
.mot-titre { display: inline-block; opacity: 0; transform: translateY(.42em); filter: blur(10px); animation: entree 1.3s var(--doux) forwards; animation-delay: calc(var(--i, 0) * 95ms + 150ms); }
.entree { opacity: 0; transform: translateY(16px); filter: blur(8px); animation: entree 1.3s var(--doux) forwards; animation-delay: calc(var(--i, 0) * 140ms + 300ms); }
@keyframes entree { to { opacity: 1; transform: none; filter: none; } }

.aurore { position: absolute; inset: -140px -12vw 0; z-index: -1; pointer-events: none; overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent); mask-image: linear-gradient(180deg, #000 60%, transparent); }
.aurore span { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .5; animation: derive 40s ease-in-out infinite alternate; }
.aurore span:nth-child(1) { width: 640px; height: 640px; left: 30%; top: 260px; background: radial-gradient(circle, rgba(112, 184, 201, .5), transparent 65%); }
.aurore span:nth-child(2) { width: 520px; height: 520px; left: 58%; top: 380px; background: radial-gradient(circle, rgba(143, 204, 184, .42), transparent 65%); animation-delay: -13s; }
.aurore span:nth-child(3) { width: 460px; height: 460px; left: 4%; top: 40px; background: radial-gradient(circle, rgba(204, 186, 138, .18), transparent 65%); animation-delay: -26s; }
@keyframes derive { from { transform: translate3d(-6%, 0, 0) scale(1); } to { transform: translate3d(6%, 4%, 0) scale(1.08); } }

/* Plateau : les mots arrivent par la gauche, l'anneau les aspire, la phrase propre s'écrit à droite. */
.plateau {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 290px minmax(0, 1fr); align-items: center; gap: 48px;
  margin-top: 18px; min-height: 300px;
}
.flux { position: absolute; inset: -40px -24px; pointer-events: none; z-index: 1; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 100%); mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 100%); }
.mot-vol {
  position: absolute; left: 0; top: 0; white-space: nowrap; font: italic 400 clamp(20px, 2vw, 27px)/1 var(--serif); color: var(--creme-doux);
  will-change: transform, opacity, filter; pointer-events: none;
}
.mot-vol.tic { color: var(--rose); text-decoration: line-through; text-decoration-color: rgba(201, 133, 133, .85); text-decoration-thickness: 1.5px; }
.plateau-anneau { grid-column: 2; position: relative; z-index: 2; width: 290px; height: 290px; justify-self: center; }
.anneau-halo { position: absolute; inset: -18%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(143, 204, 184, .16) 0%, rgba(112, 184, 201, .07) 40%, transparent 68%);
  transition: opacity 1s var(--doux), transform 1.2s var(--doux); opacity: .7; }
.plateau[data-etat=ecoute] .anneau-halo, .plateau.parle .anneau-halo { opacity: 1; transform: scale(1.08); }
.anneau-bouton { position: relative; display: block; width: 100%; height: 100%; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer;
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
.anneau-bouton canvas { display: block; width: 100%; height: 100%; }
.anneau-bouton:focus-visible { outline: 2px solid var(--creme); outline-offset: 6px; }
.plateau[data-etat=epuise] .anneau-bouton, .plateau[data-etat=pause] .anneau-bouton { cursor: default; opacity: .5; }

.carte {
  grid-column: 3; position: relative; z-index: 2; text-align: left; border-radius: 24px; overflow: hidden;
  background: linear-gradient(180deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .025)); border: 1px solid var(--bord-fort);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .08) inset, 0 40px 120px rgba(0, 0, 0, .45);
  -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
}
.carte-tete { padding: 12px; border-bottom: 1px solid var(--bord); }
.pastilles { display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: rgba(0, 0, 0, .25); width: fit-content; }
.pastilles button { min-height: 32px; padding: 0 15px; border-radius: 999px; border: 0; background: transparent; color: var(--creme-doux); font: 500 14px var(--sans); cursor: pointer; transition: background .5s var(--doux), color .5s var(--doux); }
.pastilles button[aria-checked=true] { background: rgba(255, 255, 255, .12); color: var(--creme); }
.carte-corps { padding: 18px 20px 20px; min-height: 210px; }
.carte-app { color: var(--creme-pale); font-size: 13px; margin-bottom: 12px; }
.sortie { font-size: 17px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; min-height: 54px; }
.plateau[data-contexte=notes] .sortie { font: 21px/1.45 var(--serif); }
.indice { color: var(--creme-pale); white-space: normal; }
.indice b { color: var(--creme-doux); font-weight: 500; }
.plateau[data-contexte=message] .texte { display: block; width: fit-content; max-width: 92%; margin-left: auto; padding: 10px 15px; border-radius: 20px 20px 6px 20px; background: linear-gradient(180deg, #24584b, #1d4a3f); color: var(--creme); }
.texte.sortante { transition: opacity .5s var(--doux), filter .5s var(--doux); opacity: 0; filter: blur(6px); }
.mot { display: inline; opacity: 0; filter: blur(8px); animation: apparait .8s var(--doux) forwards; }
@keyframes apparait { to { opacity: 1; filter: none; } }
.curseur-texte { display: inline-block; width: 2px; height: 1.05em; margin-left: 2px; vertical-align: -.15em; background: var(--sauge); animation: clignote 1s steps(1) infinite; }
@keyframes clignote { 50% { opacity: 0; } }
.brut { margin-top: 16px; color: var(--creme-pale); font-size: 14px; }
.brut summary { cursor: pointer; color: var(--creme-doux); width: fit-content; }
.brut p { margin-top: 8px; font-style: italic; white-space: pre-wrap; }

.scene-pied { position: relative; z-index: 2; margin-top: 6px; }
.consigne { font-size: 18px; color: var(--creme); min-height: 29px; }
.compteur { margin-top: 2px; font-size: 14px; color: var(--creme-pale); min-height: 22px; }
.scene .cta { margin-top: 28px; }
.mention { max-width: 640px; margin: 22px auto 0; color: var(--creme-pale); font-size: 12.5px; line-height: 1.5; }
.mention a { color: var(--creme-doux); }

/* --- Panneaux : crème et nuit qui remontent en se chevauchant --- */
.panneau { position: relative; isolation: isolate; margin-top: -56px; border-radius: 56px 56px 0 0; padding: 150px 24px 170px; }
.panneau .contenu { max-width: 1160px; margin: 0 auto; text-align: center; }
.creme { background: var(--creme); color: var(--encre); color-scheme: light; box-shadow: 0 -30px 80px rgba(0, 0, 0, .25); }
.creme .surtitre { color: var(--sauge-fonce); }
.creme h2 em { color: var(--encre-pale); }
.creme .cta-note { color: var(--encre-pale); }
.creme .cta-secondaire { color: var(--encre-doux); }
.creme .cta-secondaire a { color: var(--encre); }
.creme .bouton { background: var(--encre); color: var(--creme); box-shadow: 0 14px 40px rgba(20, 21, 23, .18); }
.creme a { color: var(--sauge-fonce); }
.nuit { background: var(--nuit-panneau); background-image: radial-gradient(120% 60% at 50% 0%, rgba(28, 46, 48, .9), transparent 70%); box-shadow: 0 -30px 80px rgba(0, 0, 0, .35); }

/* Apparitions au défilement (cachées seulement si le script tourne). */
@media (scripting: enabled) {
  [data-revele] { transition: opacity 1.2s var(--doux), transform 1.2s var(--doux), filter 1.2s var(--doux); transition-delay: calc(var(--i, 0) * 90ms); }
  [data-revele]:not(.visible) { opacity: 0; transform: translateY(30px); filter: blur(6px); }
}

/* --- La vitesse : la carte de la voix s'élargit pendant qu'on descend (--p, de 0 à 1) --- */
.duel { display: flex; gap: 18px; margin: 64px auto 56px; max-width: 1060px; text-align: left; }
.duel-carte { position: relative; min-width: 0; border-radius: 30px; padding: 30px 30px 34px; min-height: 290px; transition: flex-grow .2s linear; }
.duel-clavier { flex: calc(1 - var(--p, 0) * .42) 1 0; background: #e6dfd3; color: var(--encre); }
.duel-voix { flex: calc(1 + var(--p, 0) * .9) 1 0; background: radial-gradient(120% 90% at 85% 0%, #1f3a3a, #0e1416 70%); color: var(--creme); box-shadow: 0 30px 80px rgba(14, 20, 22, .3); }
.duel-tete { font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; opacity: .62; }
.duel-chiffre { margin-top: 10px; font-size: 15px; opacity: .72; }
.duel-chiffre b { display: block; font: 400 clamp(56px, 6.4vw, 92px)/.95 var(--serif); letter-spacing: -.02em; opacity: 1; }
.duel-voix .duel-chiffre b { color: var(--sauge); }
.duel-texte { margin-top: 26px; font: 400 clamp(19px, 1.9vw, 24px)/1.35 var(--serif); min-height: 4.1em; }
.duel-clavier .duel-texte { color: var(--encre-doux); }
.duel-anneau { position: absolute; top: 22px; right: 22px; width: 76px; height: 76px; }
.duel-texte .curseur { display: inline-block; width: 2px; height: 1em; margin-left: 2px; vertical-align: -.12em; background: var(--sauge-fonce); animation: clignote 1s steps(1) infinite; }
.duel-texte .fini { display: inline-block; margin-left: 10px; font: 600 11px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; padding: 6px 9px; border-radius: 7px; vertical-align: .3em; animation: entree .8s var(--doux) both; }
.duel-clavier .fini { background: var(--encre); color: var(--creme); }
.duel-voix .fini { background: var(--sauge); color: var(--encre); }

/* --- Comment ça marche : récit fixe pendant le défilement, centré (titre, écran, puis les 3 gestes en ligne) --- */
.recit { padding: 0; height: 300vh; }
.recit-collant { position: sticky; top: 0; height: 100vh; max-width: 1160px; margin: 0 auto; padding: 72px 24px 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.recit-collant .surtitre { margin-bottom: 18px; }
.recit-etapes { list-style: none; padding: 0; margin: 36px 0 0; display: flex; justify-content: center; gap: 14px 44px; }
.recit-etapes li { display: flex; align-items: center; gap: 14px; opacity: .32; transition: opacity .7s var(--doux); }
.recit-etapes li.active { opacity: 1; }
.recit-etapes h3 { font: 400 clamp(24px, 2.2vw, 30px)/1.1 var(--serif); margin: 0; letter-spacing: -.005em; white-space: nowrap; }
.numero { flex: none; display: inline-flex; width: 34px; height: 34px; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid rgba(143, 204, 184, .4); color: var(--sauge); font-size: 14px; font-weight: 600; }
.recit-etapes li.active .numero { background: var(--sauge); color: var(--encre); border-color: var(--sauge); }
.recit-barre { margin-top: 28px; height: 2px; width: 100%; max-width: 420px; background: var(--bord-fort); border-radius: 2px; overflow: hidden; }
.recit-barre span { display: block; height: 100%; width: calc(var(--progression, 0) * 100%); background: linear-gradient(90deg, var(--sauge), var(--sarcelle)); }
.recit-ecran { position: relative; aspect-ratio: 1; width: min(440px, 44vh); margin-top: 40px; border-radius: 40px;
  background: radial-gradient(110% 90% at 50% 0%, rgba(255, 255, 255, .08), rgba(255, 255, 255, .02)); border: 1px solid var(--bord-fort);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .08) inset, 0 50px 140px rgba(0, 0, 0, .5); overflow: hidden; }
.ecran-vue { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; transform: scale(.94); filter: blur(10px); transition: opacity .9s var(--doux), transform .9s var(--doux), filter .9s var(--doux); }
.ecran-vue.active { opacity: 1; transform: none; filter: none; }
.touche { display: grid; place-items: center; width: 128px; height: 120px; border-radius: 24px; font: 500 34px/1 var(--sans); color: var(--creme);
  background: linear-gradient(180deg, #2c3337, #1d2225); box-shadow: 0 10px 0 #0b0e10, 0 18px 40px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .12);
  animation: appui 2.6s var(--doux) infinite; }
@keyframes appui {
  0%, 15%, 100% { transform: translateY(0); box-shadow: 0 10px 0 #0b0e10, 0 18px 40px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .12); }
  24%, 72% { transform: translateY(8px); color: var(--sauge); box-shadow: 0 2px 0 #0b0e10, 0 0 60px rgba(143, 204, 184, .35), inset 0 1px 0 rgba(255, 255, 255, .12); }
}
.recit-anneau { width: 62%; height: 62%; }
.mini-app { width: 78%; border-radius: 18px; background: rgba(8, 10, 11, .6); border: 1px solid var(--bord); padding: 20px 22px; text-align: left; }
.mini-app-tete { color: var(--creme-pale); font-size: 13px; margin-bottom: 14px; }
.mini-app-texte { font-size: 19px; line-height: 1.5; min-height: 3em; }
.caret { display: inline-block; width: 2px; height: 1.05em; margin-left: 2px; vertical-align: -.15em; background: var(--sauge); animation: clignote 1s steps(1) infinite; }

/* --- Avantages --- */
.grille { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 64px; text-align: left; }
.carte-avantage { padding: 28px; border-radius: 28px; background: #faf7f2; border: 1px solid rgba(20, 21, 23, .07); box-shadow: 0 1px 0 #fff inset, 0 20px 50px rgba(20, 21, 23, .06); }
.carte-avantage.large { grid-column: span 2; }
.carte-avantage p { color: var(--encre-doux); font-size: 16px; }
.carte-avantage .avant { font-style: italic; color: var(--encre-pale); }
.carte-avantage .avant span { background: linear-gradient(rgba(201, 133, 133, .9), rgba(201, 133, 133, .9)) no-repeat 0 58% / 0 1.5px; transition: background-size 2.2s var(--doux) .6s; }
.carte-avantage.visible .avant span { background-size: 100% 1.5px; }
.carte-avantage .apres { margin-top: 14px; padding-left: 14px; border-left: 2px solid var(--sauge-fonce); color: var(--encre); font: 400 23px/1.32 var(--serif); }

/* --- La promesse : les mots s'allument au défilement --- */
.promesse { padding-top: 190px; padding-bottom: 210px; }
.promesse-phrase { font: 400 clamp(52px, 8vw, 124px)/.98 var(--serif); letter-spacing: -.02em; max-width: 1100px; margin: 0 auto; text-wrap: balance; }
.promesse-phrase em { font-style: italic; }
.mot-defile { opacity: .14; transition: opacity .5s var(--doux); }
.mot-defile.allume { opacity: 1; }
.promesse-phrase em .mot-defile.allume { opacity: .7; }

/* --- Prix et questions --- */
.formules { display: grid; grid-template-columns: repeat(2, minmax(0, 340px)); justify-content: center; gap: 20px; margin-top: 60px; }
.formule { position: relative; padding: 38px 28px 32px; border-radius: 30px; background: #faf7f2; border: 1px solid rgba(20, 21, 23, .08); }
.formule h3 { color: var(--encre-doux); font-weight: 500; }
.formule p { color: var(--encre-doux); font-size: 15px; }
.formule-forte { background: radial-gradient(120% 90% at 50% 0%, #1f3a3a, #0e1416 72%); border-color: transparent; box-shadow: 0 30px 90px rgba(14, 20, 22, .28); }
.formule-forte h3, .formule-forte p { color: var(--creme-doux); }
.montant { font: 400 68px/1 var(--serif) !important; color: var(--encre) !important; letter-spacing: -.02em; margin: 12px 0 12px !important; }
.formule-forte .montant { color: var(--creme) !important; }
.montant span { font: 16px var(--sans); color: var(--encre-pale); letter-spacing: 0; margin-left: 4px; }
.formule-forte .montant span { color: var(--creme-pale); }
.badge { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); padding: 5px 13px; border-radius: 999px; background: var(--sauge); color: var(--encre); font-size: 13px; font-weight: 600; white-space: nowrap; }
.badge:empty { display: none; }
.inclus { list-style: none; padding: 0; margin: 36px auto 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 28px; color: var(--encre-doux); font-size: 15px; }
.inclus li::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--sauge-fonce); margin-right: 10px; vertical-align: .2em; }
.faq { max-width: 800px; margin: 140px auto 0; text-align: left; }
.faq h2 { text-align: center; margin-bottom: 44px; }
.faq details { border-bottom: 1px solid rgba(20, 21, 23, .1); }
.faq details:first-child { border-top: 1px solid rgba(20, 21, 23, .1); }
.faq summary { list-style: none; cursor: pointer; padding: 22px 40px 22px 0; position: relative; font-size: 19px; color: var(--encre); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 6px; top: 17px; font: 300 28px/1 var(--sans); color: var(--encre-pale); transition: transform .5s var(--doux); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { color: var(--encre-doux); padding: 0 0 24px; font-size: 16px; max-width: 680px; }

/* --- Fin --- */
.fin { padding-top: 150px; padding-bottom: 0; }
.fin-anneau { width: 240px; height: 240px; margin: 0 auto 40px; }
.fin-anneau canvas { width: 100%; height: 100%; display: block; }
.pied { max-width: 1160px; margin: 150px auto 0; padding: 32px 0 0; border-top: 1px solid var(--bord); color: var(--creme-pale); font-size: 14px; overflow: hidden; text-align: left; }
.pied nav { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.pied a { color: var(--creme-pale); text-decoration: none; transition: color .4s var(--doux); }
.pied a:hover { color: var(--creme); }
.pied a[href="mailto:"] { display: none; }
.pied-note { margin-top: 16px; }
.pied-geant { margin: 40px 0 -0.22em; font: 400 clamp(96px, 21vw, 300px)/1 var(--serif); letter-spacing: -.03em; text-align: center; user-select: none;
  background: linear-gradient(180deg, rgba(242, 237, 230, .12), rgba(242, 237, 230, 0) 80%); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* --- Installation (/telecharger/mac) : le navigateur télécharge Motamot.dmg, puis l'icône glisse dans Applications.
   Tout est placé en cqw (centièmes de la largeur de la scène) : les proportions tiennent du téléphone au grand écran. --- */
.installe { min-height: 100vh; max-width: 1040px; margin: 0 auto; padding: 96px 24px 48px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.installe h1 { font-size: clamp(44px, 6.4vw, 88px); line-height: .98; }
.installe-scene {
  --duree: 9s; position: relative; container-type: inline-size; aspect-ratio: 16 / 10; margin-top: 36px; overflow: hidden;
  width: min(760px, 100%, max(440px, calc((100svh - 470px) * 1.6))); /* tout tient sur un écran, étapes comprises */
  border-radius: 32px; border: 1px solid var(--bord-fort); background: radial-gradient(120% 100% at 50% 0%, #24453f, #142422 72%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .08) inset, 0 50px 140px rgba(0, 0, 0, .45);
}
.installe-scene svg { display: block; }
.feu { position: absolute; width: 1.2cqw; height: 1.2cqw; border-radius: 50%; background: #ec6a5e; }
.feu:nth-of-type(2) { background: #f4bf4f; }
.feu:nth-of-type(3) { background: #61c554; }
.nav { position: absolute; left: 9cqw; top: 8cqw; width: 82cqw; height: 50cqw; border-radius: 2.4cqw; background: #f4f0ea; box-shadow: 0 3cqw 7cqw rgba(0, 0, 0, .35); }
.nav::after { content: ""; position: absolute; left: 0; right: 0; top: 7cqw; height: 1px; background: rgba(20, 21, 23, .08); }
.nav .feu { top: 2.9cqw; left: 2.4cqw; }
.nav .feu:nth-of-type(2) { left: 4.4cqw; }
.nav .feu:nth-of-type(3) { left: 6.4cqw; }
.nav-adresse { position: absolute; left: 12cqw; top: 1.9cqw; width: 40cqw; height: 3.2cqw; border-radius: 1cqw; background: rgba(20, 21, 23, .05); color: var(--encre-pale); font: 1.5cqw/3.2cqw var(--sans); }
.nav-icone { position: absolute; top: 1.7cqw; width: 3.6cqw; height: 3.6cqw; border-radius: .9cqw; display: grid; place-items: center; color: var(--encre-doux); }
.nav-icone svg { width: 2.4cqw; height: 2.4cqw; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.nav-dl { left: 61cqw; animation: nav-dl var(--duree) var(--doux) infinite both; }
.nav-partage { left: 66.5cqw; }
.nav-plus { left: 72cqw; }
.nav-ligne { position: absolute; left: 6cqw; top: 22cqw; width: 30cqw; height: 3.6cqw; border-radius: 1cqw; background: rgba(20, 21, 23, .05); }
.nav-ligne.courte { top: 28.5cqw; width: 20cqw; }
.nav-bulle { position: absolute; left: 50cqw; top: 7.8cqw; width: 27cqw; padding: 1.6cqw; display: flex; align-items: center; gap: 1.4cqw; border-radius: 1.6cqw; background: #fff;
  box-shadow: 0 1.4cqw 3.6cqw rgba(0, 0, 0, .16); color: var(--encre); font: 600 1.8cqw/1 var(--sans); animation: nav-bulle var(--duree) var(--doux) infinite both; }
.nav-bulle .disque { width: 4.2cqw; height: 4.2cqw; flex: none; }
.dmg { position: absolute; left: 24cqw; top: 22cqw; width: 50cqw; height: 32cqw; border-radius: 2cqw; overflow: hidden; background: #fbfaf7;
  box-shadow: 0 3cqw 8cqw rgba(0, 0, 0, .38); animation: dmg var(--duree) var(--doux) infinite both; }
.dmg-barre { position: relative; height: 5.4cqw; background: #ece8e2; border-bottom: 1px solid rgba(20, 21, 23, .08); display: grid; place-items: center; color: var(--encre); font: 600 1.6cqw/1 var(--sans); }
.dmg-barre .feu { top: 2.1cqw; left: 2cqw; }
.dmg-barre .feu:nth-of-type(2) { left: 4cqw; }
.dmg-barre .feu:nth-of-type(3) { left: 6cqw; }
.dmg-barre span { display: flex; align-items: center; gap: .8cqw; }
.dmg-barre img { width: 2.2cqw; height: 2.2cqw; }
.dmg-app, .fantome { position: absolute; width: 11cqw; height: 11cqw; }
.dmg-app { left: 9cqw; top: 11cqw; }
.dmg-dossier { position: absolute; left: 28cqw; top: 9cqw; width: 14cqw; padding: 1.2cqw 1.5cqw 1cqw; border-radius: 1.6cqw; color: var(--encre-doux); font: 500 1.5cqw/1 var(--sans);
  display: flex; flex-direction: column; align-items: center; gap: .8cqw; animation: dossier var(--duree) var(--doux) infinite both; }
.dmg-dossier svg { width: 11cqw; height: auto; }
.dmg-ok { position: absolute; top: .2cqw; right: .6cqw; width: 3.4cqw; height: 3.4cqw; border-radius: 50%; display: grid; place-items: center; background: var(--sauge-fonce);
  animation: dmg-ok var(--duree) var(--doux) infinite both; }
.dmg-ok svg { width: 2.2cqw; height: 2.2cqw; fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.fantome { left: 33cqw; top: 33cqw; filter: drop-shadow(0 1.2cqw 2cqw rgba(0, 0, 0, .3)); animation: fantome var(--duree) var(--doux) infinite both; }
/* La flèche de souris de la scène seulement : « .curseur » sert aussi au curseur de texte de la carte « Au clavier ». */
.installe-scene .curseur { position: absolute; left: 0; top: 0; width: 3.2cqw; height: 3.2cqw; margin: -.4cqw 0 0 -.67cqw; transform-origin: .67cqw .4cqw;
  fill: #141517; stroke: #fff; stroke-width: 1.6; stroke-linejoin: round; filter: drop-shadow(0 .3cqw .5cqw rgba(0, 0, 0, .35)); animation: curseur var(--duree) var(--doux) infinite both; }
@keyframes curseur {
  0% { transform: translate(54cqw, 47cqw); opacity: 0; }
  6% { transform: translate(54cqw, 47cqw); opacity: 1; }
  16% { transform: translate(71.8cqw, 11.8cqw); }
  18% { transform: translate(71.8cqw, 11.8cqw) scale(.84); }
  20%, 33% { transform: translate(71.8cqw, 11.8cqw) scale(1); }
  45% { transform: translate(39cqw, 39cqw) scale(1); }
  48% { transform: translate(39cqw, 39cqw) scale(.86); }
  65% { transform: translate(59cqw, 37.5cqw) scale(.86); }
  68%, 88% { transform: translate(59cqw, 37.5cqw) scale(1); opacity: 1; }
  95%, 100% { transform: translate(59cqw, 37.5cqw) scale(1); opacity: 0; }
}
@keyframes nav-dl { 0%, 17% { background: transparent; color: var(--encre-doux); } 19%, 90% { background: var(--sauge); color: var(--encre); } 97%, 100% { background: transparent; color: var(--encre-doux); } }
@keyframes nav-bulle { 0%, 20% { opacity: 0; transform: translateY(-1cqw) scale(.96); } 25%, 90% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
@keyframes dmg { 0%, 30% { opacity: 0; transform: translateY(5cqw) scale(.97); } 37%, 90% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
@keyframes fantome { 0%, 47% { opacity: 0; transform: none; } 49% { opacity: .9; transform: scale(1.05); } 65% { opacity: .9; transform: translate(20cqw, -1.5cqw) scale(1.05); } 71%, 100% { opacity: 0; transform: translate(20cqw, -1.5cqw) scale(.45); } }
@keyframes dossier { 0%, 63% { background: transparent; } 66%, 88% { background: rgba(143, 204, 184, .3); } 95%, 100% { background: transparent; } }
@keyframes dmg-ok { 0%, 69% { opacity: 0; transform: scale(.4); } 73%, 88% { opacity: 1; transform: none; } 95%, 100% { opacity: 0; transform: none; } }
.installe-etapes { list-style: none; padding: 0; margin: 36px 0 0; width: min(860px, 100%); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 40px; }
.installe-etapes li { display: flex; flex-direction: column; align-items: center; gap: 14px; font: 400 clamp(21px, 2vw, 26px)/1.2 var(--serif); text-wrap: balance; }
.installe-aide { margin-top: 32px; color: var(--creme-pale); font-size: 15px; }
.installe-aide a { color: var(--creme-doux); }
.installe-indispo { display: none; margin-top: 6px; color: var(--creme-pale); font-size: 13px; }
body[data-dispo=non] .installe-indispo { display: block; }
.installe-etapes small { display: block; margin-top: 6px; color: var(--creme-pale); font: 400 14px/1.3 var(--sans); }
.insecable { white-space: nowrap; }

/* --- Installation sur Windows (/telecharger/windows) : le navigateur télécharge Motamot-win-Setup.exe, l'installation
   passe (anneau), puis Ctrl + Windows maintenus : la pastille écoute au-dessus de la barre des tâches. --- */
.nav-win .nav-adresse { left: 3cqw; }
.nav-win .nav-dl { left: 60cqw; }
.win-boutons { position: absolute; right: 2.6cqw; top: 2.9cqw; width: 11cqw; color: var(--encre-doux); }
.win-boutons svg { width: 100%; height: auto; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; }
.nav-win .nav-bulle { left: 40cqw; width: 34cqw; animation-name: w-bulle; }
.nav-bulle span { display: flex; flex-direction: column; gap: .8cqw; min-width: 0; }
.nav-bulle small { color: #2c7a66; font: 500 1.5cqw/1 var(--sans); }
.setup { position: absolute; left: 31cqw; top: 15cqw; width: 38cqw; height: 26cqw; border-radius: 1.6cqw; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.6cqw;
  background: linear-gradient(180deg, #1c2e30, #12171a 45%, #0a0b0d); box-shadow: 0 3cqw 8cqw rgba(0, 0, 0, .45); animation: w-setup var(--duree) var(--doux) infinite both; }
.setup-anneau { width: 8.5cqw; height: 8.5cqw; color: var(--creme); }
.setup-nom { color: var(--creme); font: 400 3.6cqw/1 var(--serif); }
.setup-barre { position: absolute; left: 0; bottom: 0; height: .5cqw; width: 100%; background: var(--sauge); transform-origin: left; animation: w-barre var(--duree) linear infinite both; }
.win-taches { position: absolute; left: 0; right: 0; bottom: 0; height: 5.6cqw; background: rgba(28, 28, 28, .92); border-top: 1px solid rgba(255, 255, 255, .06); }
.win-pastille { position: absolute; left: 50%; bottom: 7.2cqw; width: 8.4cqw; height: 8.4cqw; margin-left: -4.2cqw; border-radius: 50%; display: grid; place-items: center;
  background: rgba(20, 20, 22, .82); box-shadow: 0 1cqw 3cqw rgba(0, 0, 0, .4); animation: w-pastille var(--duree) var(--doux) infinite both; }
.win-pastille-anneau { width: 6.2cqw; height: 6.2cqw; color: #fff; }
.win-touches { position: absolute; left: 50%; top: 33cqw; display: flex; gap: 1.4cqw; transform: translateX(-50%); animation: w-touches var(--duree) var(--doux) infinite both; }
.win-touches b { min-width: 7cqw; height: 6cqw; padding: 0 1.6cqw; display: grid; place-items: center; border-radius: 1cqw; background: #fff; border: 1px solid #d9d5ce;
  box-shadow: 0 .5cqw 0 #c6c1b9, 0 1.4cqw 2.6cqw rgba(0, 0, 0, .18); color: var(--encre); font: 600 2cqw/1 var(--sans); animation: w-appui var(--duree) var(--doux) infinite both; }
.win-touches svg { width: 2.4cqw; height: 2.4cqw; fill: currentColor; }
.installe-windows .curseur { animation-name: w-curseur; }
@keyframes w-curseur {
  0% { transform: translate(54cqw, 47cqw); opacity: 0; }
  6% { transform: translate(54cqw, 47cqw); opacity: 1; }
  16% { transform: translate(62.8cqw, 11.8cqw); }
  18% { transform: translate(62.8cqw, 11.8cqw) scale(.84); }
  20%, 27% { transform: translate(62.8cqw, 11.8cqw) scale(1); }
  33% { transform: translate(51cqw, 17.6cqw) scale(1); }
  35% { transform: translate(51cqw, 17.6cqw) scale(.84); }
  37% { transform: translate(51cqw, 17.6cqw) scale(1); opacity: 1; }
  42%, 100% { transform: translate(51cqw, 17.6cqw) scale(1); opacity: 0; }
}
@keyframes w-bulle { 0%, 20% { opacity: 0; transform: translateY(-1cqw) scale(.96); } 25%, 37% { opacity: 1; transform: none; } 41%, 100% { opacity: 0; transform: none; } }
@keyframes w-setup { 0%, 38% { opacity: 0; transform: translateY(3cqw) scale(.97); } 43%, 60% { opacity: 1; transform: none; } 65%, 100% { opacity: 0; transform: scale(.98); } }
@keyframes w-barre { 0%, 43% { transform: scaleX(0); } 59%, 100% { transform: scaleX(1); } }
@keyframes w-touches { 0%, 64% { opacity: 0; transform: translate(-50%, 2cqw); } 68%, 90% { opacity: 1; transform: translate(-50%, 0); } 96%, 100% { opacity: 0; transform: translate(-50%, 0); } }
@keyframes w-appui { 0%, 71% { transform: none; box-shadow: 0 .5cqw 0 #c6c1b9, 0 1.4cqw 2.6cqw rgba(0, 0, 0, .18); }
  73%, 88% { transform: translateY(.45cqw); box-shadow: 0 .05cqw 0 #c6c1b9, 0 .6cqw 1.2cqw rgba(0, 0, 0, .14); }
  90%, 100% { transform: none; box-shadow: 0 .5cqw 0 #c6c1b9, 0 1.4cqw 2.6cqw rgba(0, 0, 0, .18); } }
@keyframes w-pastille { 0%, 72% { opacity: 0; transform: translateY(1cqw) scale(.6); } 76%, 88% { opacity: 1; transform: none; } 93%, 100% { opacity: 0; transform: scale(.6); } }

/* --- Tablette : le plateau s'empile, les mots tombent d'en haut --- */
@media (max-width: 980px) {
  .plateau { display: flex; flex-direction: column; align-items: center; gap: 28px; margin-top: 28px; padding-top: 150px; }
  .flux { inset: 0 -16px auto; height: 410px; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 22%, #000 100%); mask-image: linear-gradient(180deg, transparent 0, #000 22%, #000 100%); }
  .plateau-anneau { width: 240px; height: 240px; }
  .carte { width: 100%; max-width: 560px; }
  .grille { grid-template-columns: repeat(2, 1fr); }
  .recit { height: auto; }
  .recit-collant { position: relative; height: auto; padding: 140px 24px 160px; }
  .recit-ecran { width: min(420px, 100%); }
}
/* --- Téléphone --- */
@media (max-width: 720px) {
  body { font-size: 16px; }
  .barre { padding: 14px 16px; }
  .barre-liens a:not(.barre-cta) { display: none; }
  .barre-liens .langues a { display: inline-block; padding: 6px 5px; }
  .barre-liens { gap: 14px; }
  .scene { padding: 104px 16px 120px; }
  .scene h1 { font-size: clamp(48px, 15vw, 72px); }
  .scene h1 .ligne { display: block; }
  .plateau { padding-top: 132px; }
  .plateau-anneau { width: 216px; height: 216px; }
  .carte-corps { min-height: 210px; }
  .panneau { padding: 110px 16px 130px; border-radius: 36px 36px 0 0; margin-top: -36px; }
  .duel { flex-direction: column; }
  .duel-clavier, .duel-voix { flex: none; }
  .grille, .formules { grid-template-columns: 1fr; }
  .carte-avantage.large { grid-column: span 1; }
  .bouton { width: 100%; max-width: 420px; }
  .recit-collant { padding: 110px 16px 130px; }
  .recit-etapes { flex-direction: column; align-items: center; }
  .promesse { padding-top: 130px; padding-bottom: 150px; }
  .faq { margin-top: 110px; }
  .pied { margin-top: 110px; }
  .installe { padding: 96px 16px 64px; }
  .installe-scene { margin-top: 36px; border-radius: 22px; }
  .installe-etapes { grid-template-columns: 1fr; gap: 22px; margin-top: 40px; }
}

/* --- Écrans tactiles : version allégée (retours 111 et 122). Safari iOS recalcule ces effets à chaque image, sur toute la
   page : grain en surimpression, lueurs floutées à 90 px, flous derrière la carte et la barre, flous sur le texte qui entre.
   Les mouvements restent (opacité, déplacement), seuls les flous partent. --- */
@media (hover: none) {
  .grain { display: none; }
  .aurore span { filter: none; animation: none; }
  .flux { -webkit-mask-image: none; mask-image: none; }
  .mot-vol { will-change: transform, opacity; }
  .carte { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .barre.voilee { background: rgba(12, 17, 19, .94); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .barre.sur-creme { background: rgba(242, 237, 230, .96); }
  .mot-titre, .entree, .mot, .texte.sortante, .ecran-vue, [data-revele]:not(.visible) { filter: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .entree, .mot-titre, [data-revele], .mot, .ecran-vue.active { opacity: 1 !important; transform: none !important; filter: none !important; }
  .mot-defile { opacity: 1; }
  .nav-bulle, .dmg, .dmg-ok { opacity: 1; transform: none; }
  .nav-dl { background: var(--sauge); color: var(--encre); }
  .dmg-dossier { background: rgba(143, 204, 184, .3); }
  .fantome { opacity: 0; }
  .installe-scene .curseur { transform: translate(59cqw, 37.5cqw); }
}