/* Mood Tent — palette « Brume » (icône et écran de lancement de l'app) */

@font-face {
  font-family: "MT Display";
  src: url("fonts/archivo-display.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --paper: #F4F7F9;
  --floor: #DFE6EB;
  --mist: #AEBDC7;
  --ink: #17242F;
  --ink-2: #55626D;
  --rule: rgba(23, 36, 47, .14);
  --shadow: rgba(23, 36, 47, .13);
  --signal: #46647A;
  --glow: 0;
  --gutter: 20px;
  --text: 17px;
  --label: 11.5px;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "Segoe UI", Roboto, system-ui, sans-serif;
  --display: "MT Display", "SF Pro Display", "Arial Narrow", Impact, sans-serif;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #0F1820;
    --floor: #16222C;
    --mist: #22313C;
    --ink: #E8EEF2;
    --ink-2: #9AA7B1;
    --rule: rgba(232, 238, 242, .14);
    --shadow: rgba(0, 0, 0, .55);
    --signal: #9DB7CA;
    --glow: 1;
  }
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 var(--text)/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Langues : sans JavaScript, les deux versions s'affichent l'une sous l'autre */
html[data-lang="en"] .l-fr,
html[data-lang="fr"] .l-en { display: none !important; }

a { color: inherit; }

p { margin: 0 0 14px; color: var(--ink-2); }
p.lead, strong { color: var(--ink); font-weight: 600; }
ul { margin: 0 0 14px; padding-left: 20px; color: var(--ink-2); }
li { margin: 6px 0; }
li strong { font-weight: 600; }

/* Liens de texte : la seule couleur du site (« touche ici ») */
.prose a, a.signal {
  color: var(--signal);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.prose a:hover, a.signal:hover { text-decoration-thickness: 2px; }

/* Étiquettes : petites capitales espacées, seule taille sous le texte courant */
.label {
  font: 600 var(--label)/1.2 var(--sans);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink);
}
.label.dim { color: var(--ink-2); }

:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; border-radius: 2px; }

.wrap {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding-left: max(var(--gutter), env(safe-area-inset-left));
  padding-right: max(var(--gutter), env(safe-area-inset-right));
}
.col { max-width: 660px; }

/* ---------- Barre du haut ---------- */

.bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: max(18px, env(safe-area-inset-top));
  padding-bottom: 18px;
}
.bar nav.left { justify-content: flex-start; }
.bar nav { display: flex; align-items: center; gap: 4px 18px; flex-wrap: wrap; justify-content: flex-end; }
.bar a { text-decoration: none; }
.bar a:hover { text-decoration: underline; text-underline-offset: 3px; }
.bar a[aria-current="page"] { color: var(--ink); }
.bar nav a { color: var(--ink-2); }
.bar .home { color: var(--ink); white-space: nowrap; }
.bar nav a, .langs { white-space: nowrap; }
@media (max-width: 420px) { .bar nav { gap: 4px 14px; } }
.langs { display: inline-flex; gap: 6px; }
.langs a { color: var(--ink-2); }
html[data-lang="en"] .langs a[data-set-lang="en"],
html[data-lang="fr"] .langs a[data-set-lang="fr"] { color: var(--ink); text-decoration: none; cursor: default; }
html:not([data-lang]) .langs { display: none; }

/* ---------- Affiche (accueil) : trois plans ---------- */

.hero { position: relative; overflow: clip; }

.stage { container-type: inline-size; position: relative; }

.poster {
  margin: 0;
  font-family: var(--display);
  font-weight: 900;
  letter-spacing: -.01em;
  line-height: .86;
  color: var(--mist);
  text-transform: uppercase;
  white-space: nowrap;
  user-select: none;
}
.poster span { display: block; }

/* Deux lignes (MOOD / TENT) : le mot le plus long tient la largeur */
.hero .poster { font-size: calc(100cqi / 2.53); padding-top: 4px; }

.ground {
  --s: 74cqi;                 /* largeur du rendu = 74 % du mot le plus long */
  --h: calc(var(--s) * .6246);/* hauteur du rendu (1268 × 792) */
  position: relative;
  margin-top: calc(-13.98cqi);/* l'appareil recouvre le tiers bas de TENT */
}
.ground::before {               /* le sol, sous les appuis de l'appareil */
  content: "";
  position: absolute;
  left: -50vw; right: -50vw;
  top: calc(var(--h) * .66);
  bottom: 0;
  background: var(--floor);
  z-index: 0;
}

.subject {
  position: relative;
  z-index: 1;
  width: var(--s);
  margin: 0 0 0 calc((100cqi - var(--s)) / 2 + 7cqi);
  aspect-ratio: 1268 / 792;
}
.subject img, .subject svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.subject .glow {
  position: absolute;
  left: 50%; top: 22%;
  width: 170%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(255, 244, 220, .55), rgba(255, 196, 107, .28) 30%, rgba(255, 138, 40, .12) 55%, rgba(255, 110, 20, 0) 75%);
  opacity: var(--glow);
  pointer-events: none;
}

.rowline {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 0 22px;
}
.rowline .rule { flex: 1; height: 1px; background: var(--rule); }

.toprow { display: flex; justify-content: space-between; gap: 16px; padding: 6px 0 10px; }

/* Une ligne (MOOD TENT) sur les écrans larges */
@container (min-width: 760px) {
  .hero .poster { font-size: calc(100cqi / 4.78); }
  .hero .poster span { display: inline; }
  .hero .poster span + span::before { content: " "; }
  .ground { --s: 38cqi; margin-top: calc(-7.39cqi); }
  .subject { margin-left: calc((100cqi - var(--s)) / 2); }
}

/* ---------- Contenu ---------- */

section { padding: 44px 0 8px; }
section > .label:first-child, .block > .label:first-child { display: block; margin-bottom: 16px; }

.intro p.lead { margin-bottom: 10px; }

.moods {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px 12px;
  list-style: none;
  padding: 0;
  margin: 0;
  max-width: 660px;
}
.moods li { margin: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.moods img { width: 56px; height: 56px; display: block; }
@media (min-width: 760px) {
  .moods { grid-template-columns: repeat(6, minmax(0, 1fr)); max-width: none; }
}

.points {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 40px;
  max-width: 980px;
}
.points > div { border-top: 1px solid var(--rule); padding: 16px 0 8px; }
.points .label { display: block; margin-bottom: 8px; }
.points p { margin: 0 0 8px; }
@media (min-width: 760px) { .points { grid-template-columns: 1fr 1fr; } }

/* ---------- Pages de texte (confidentialité, assistance, mentions) ---------- */

.page .stage { margin-bottom: 26px; max-width: 660px; }
.em-privacy { --em: 3.62; }
.em-vieprivee { --em: 4.40; }
.em-support { --em: 3.86; }
.em-assistance { --em: 5.17; }
.em-legal { --em: 3.08; }
.em-mentions { --em: 4.37; }
.em-404 { --em: 1.47; }
.sh-fill { fill: var(--shadow); }
.sh-stroke { stroke: var(--shadow); }
.label.keep { text-transform: none; letter-spacing: .06em; }
.page .poster { font-size: calc(100cqi / var(--em)); padding-top: 8px; }
.page .poster span { display: block; }
.page .date { display: block; margin-bottom: 22px; }

.prose h2 {
  font: 600 var(--label)/1.2 var(--sans);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 34px 0 10px;
  padding-top: 14px;
  border-top: 1px solid var(--rule);
}
.prose > :first-child h2, .prose h2:first-child { margin-top: 0; }
.prose dl { margin: 0 0 14px; color: var(--ink-2); }
.prose dt { color: var(--ink); font-weight: 600; margin-top: 10px; }
.prose dd { margin: 2px 0 0; }

.lang-sep { border-top: 1px solid var(--rule); margin-top: 48px; padding-top: 20px; }
html[data-lang] .lang-sep { border-top: 0; margin-top: 0; padding-top: 0; }

/* ---------- Pied de page ---------- */

footer {
  margin-top: 56px;
  padding-top: 18px;
  padding-bottom: max(28px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--rule);
}
footer nav { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-bottom: 10px; }
footer nav a { color: var(--ink-2); text-decoration: none; }
footer nav a:hover { text-decoration: underline; text-underline-offset: 3px; }
footer p { font-size: 13px; line-height: 1.5; margin: 0; }

/* ---------- Entrée, comme l'écran de lancement ---------- */

@media (prefers-reduced-motion: no-preference) {
  .hero .poster { animation: rise .9s cubic-bezier(.2, .7, .2, 1) both; }
  .hero .subject { animation: rise 1s .15s cubic-bezier(.2, .8, .2, 1) both; --rise: 36px; }
  .hero .toprow, .hero .rowline { animation: fade .6s .35s cubic-bezier(.4, 0, .2, 1) both; }
}
@keyframes rise { from { opacity: 0; transform: translateY(var(--rise, 10px)); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }