/* lazybard.quest : la page d'attente, sa mise en page seulement.
   La marque (couleurs, polices, lettrage, la salle, les logos) : marque.css. */

body{font:400 1.0625rem/1.55 var(--ui);
  --lamp-at:22% 0%;--lamp-shape:ellipse 48% 54%;--glow-at:38% 30%;--glow-shape:ellipse 72% 62%;--lamp-height:1150px}

.page{position:relative;z-index:1;max-width:78rem;margin:0 auto;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}

/* Le haut : le nom dans le noir, puis ce qu'on raconte ; à droite, ce qui est montré. */
.hero{display:grid;gap:48px;align-items:center;padding-block:64px 56px}
.hero-text{min-width:0;max-width:36rem}
.name{margin-left:-.03em;font-size:clamp(4.25rem,10vw,8rem)}
.voice{margin:.4em 0 0;font:italic 500 clamp(1.375rem,2.1vw,1.75rem)/1.35 var(--story);color:var(--text-soft);text-wrap:balance}
.lead{margin:32px 0 0;font-size:clamp(1.125rem,1.5vw,1.3125rem);line-height:1.55;color:var(--text-soft)}
.lead + p{margin:16px 0 0}
.promise{margin:28px 0 0;font:italic 500 1.375rem/1.4 var(--story);color:var(--light);text-wrap:balance}
.actions{display:flex;flex-wrap:wrap;gap:12px 16px;margin-top:32px}
.btn{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:12px 22px;border-radius:var(--radius-control);
  font:600 1.0625rem/1.2 var(--ui);text-decoration:none}
.btn-main{background:linear-gradient(180deg,var(--action) 0%,var(--action-deep) 100%);color:var(--text-soft);
  border:1px solid var(--light-edge);box-shadow:inset 0 1px 0 rgba(var(--text-rgb),.22),0 6px 16px rgba(var(--shade-rgb),.5)}
.btn-main:hover{filter:brightness(1.1)}
.btn-wood{background:var(--surface);color:var(--text-soft);border:1px solid var(--light-deep);box-shadow:var(--shadow-wood-edge)}
.btn-wood:hover{border-color:var(--light)}
.btn .logo{width:24px;height:20px}

/* Ce qui est montré : la photo du plateau, dans une baguette de bois éclairée par le haut. */
.shown{margin:0;min-width:0;max-width:26rem}
.frame{padding:9px;background:linear-gradient(180deg,rgba(var(--light-rgb),.30) 0%,rgba(var(--light-rgb),.07) 14%,rgba(var(--ground-rgb),.42) 100%),var(--edge);
  box-shadow:inset 0 1px 0 rgba(var(--light-rgb),.85),0 0 0 1px rgba(var(--shade-rgb),.8),0 30px 60px rgba(var(--shade-rgb),.7),0 0 80px rgba(var(--light-rgb),.12)}
.frame img{display:block;width:100%;max-width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}
.shown figcaption{margin:16px 2px 0;font:italic 500 1.0625rem/1.45 var(--story);color:var(--text-muted)}

/* Le bas : ce qui vient, où nous suivre. */
.more{display:grid;gap:48px;padding-block:48px 64px;border-top:1px solid var(--edge)}
.more section{min-width:0}
.more h2{margin:0 0 16px;font:600 1.5rem/1.25 var(--story);color:var(--text-soft)}
.more p{margin:0;max-width:34em}
.more p + p{margin-top:16px}
.follow{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(9.5rem,1fr));gap:12px}
.follow a{display:grid;grid-template-columns:var(--logo-col) minmax(0,1fr);column-gap:var(--logo-gap);align-items:center;min-height:64px;padding:10px 14px;
  border-radius:var(--radius-control);background:var(--surface);border:1px solid var(--light-deep);box-shadow:var(--shadow-wood-edge);text-decoration:none}
.follow a:hover{border-color:var(--light)}
.follow .txt{grid-column:2;display:flex;flex-direction:column;gap:2px;min-width:0}
.follow .label{font:600 1.0625rem/1.25 var(--ui);color:var(--text-soft)}
.follow .sub{font:400 .9375rem/1.3 var(--ui);color:var(--text-muted);overflow-wrap:anywhere}
.all-links{display:inline-flex;align-items:center;min-height:44px;margin-top:12px;color:var(--text-soft);font-weight:600;
  text-decoration:underline;text-decoration-color:rgba(var(--light-rgb),.6);text-underline-offset:5px}
.all-links:hover{text-decoration-color:var(--light)}

.foot{padding-block:24px 48px;border-top:1px solid rgba(var(--edge-rgb),.45);color:var(--text-muted);font-size:.9375rem}
.foot p{margin:0;text-wrap:balance}

@media (min-width:60em){
  .page{padding-left:max(72px,env(safe-area-inset-left,0px));padding-right:max(72px,env(safe-area-inset-right,0px))}
  .hero{grid-template-columns:minmax(0,1fr) minmax(0,25rem);gap:72px;padding-block:96px 80px}
  .shown{justify-self:end}
  .more{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:72px;padding-block:56px 80px}
}

/* Ce qui est montré : l'appli sur ses deux écrans (images/appli.jpg), et sa mention posée dessus en texte (Morris, 10/11/2026).
   La mention se change dans index.html, sans refaire l'image ; l'image lui laisse la bande du haut, sous la lampe.
   Ses couleurs : le jaune de la promesse, l'orange au bord, la nuit pour le texte (marque.css).
   À plat, sans dégradé ni halo, avec un double filet gravé : elle ne se clique pas, elle ne doit pas ressembler au bouton principal. */
.frame{position:relative}
.soon{position:absolute;top:calc(9px + 2.4%);left:calc(9px + 4.4%);z-index:1;max-width:calc(100% - 18px - 8.8%);margin:0;
  padding:.3em .85em .36em;border-radius:2px;text-wrap:balance;
  font:italic 600 clamp(.9375rem,4.4vw,1.125rem)/1.15 var(--story);color:var(--on-action);background:var(--light);
  box-shadow:inset 0 0 0 1px var(--light-edge),inset 0 0 0 3px var(--light),inset 0 0 0 4px rgba(var(--ground-rgb),.4),
    0 2px 6px rgba(var(--shade-rgb),.55)}

/* Le lien « suivez-nous », dans le texte du haut : il mène à « Où nous suivre » (#suivre). Comme « Tous nos liens » :
   le texte garde sa couleur, le souligné dit où mène un lien (le cyan, marque.css). */
.hero-text p a{color:inherit;text-decoration:underline;text-decoration-color:rgba(var(--link-rgb),.75);text-underline-offset:5px}
.hero-text p a:hover{text-decoration-color:var(--link)}