/*
 * Habillage des pages de remerciement, aligne sur la landing.
 *
 * Les jetons sont COPIES de prototype/landing-01.html : la landing part par
 * deploy.py et n'expose aucune feuille de style reutilisable ici. Toute
 * evolution de la charte doit donc etre reportee dans les deux fichiers.
 *
 * Charge uniquement sur les pages portant le shortcode (voir welcome.php) :
 * les regles de reprise du theme ci-dessous sont globales et defigureraient
 * n'importe quelle autre page du site.
 */

/* ---------- reprise du theme Twenty Twenty-Five ---------- */
.wp-site-blocks > header,
.wp-site-blocks > footer { display: none !important; }
.wp-site-blocks { padding: 0 !important; }
/* Le theme affiche deja le titre de la page : sans cette regle, deux h1. */
.wp-block-post-title { display: none !important; }
.wp-block-post-content { margin: 0 !important; padding: 0 !important; max-width: none !important; }
.wp-block-post-content > * { max-width: none !important; }
main.wp-block-group { margin: 0 !important; padding: 0 !important; max-width: none !important; }
.has-global-padding { padding-left: 0 !important; padding-right: 0 !important; }
/* Le conteneur du theme porte son padding vertical en style INLINE
   (var(--wp--preset--spacing--60)). Sans !important sur haut ET bas, deux bandes
   creme encadrent la page, au-dessus de la barre et sous le pied. */
.wp-site-blocks .wp-block-group { padding-top: 0 !important; padding-bottom: 0 !important; }
/* Les conteneurs alignfull compensent le padding racine du theme par une largeur
   plus grande que leur parent. Ce padding etant annule ci-dessus, la compensation
   depasse la fenetre de 60px et la page defile lateralement sur mobile. */
.wp-site-blocks .alignfull,
.wp-block-post-content,
main.wp-block-group {
  width: 100% !important; max-width: 100% !important;
  margin-left: 0 !important; margin-right: 0 !important;
}
html { margin-top: 0 !important; }

/* ---------- jetons de marque ---------- */
:root {
  --night: #17171b;
  --cream: #f2ede2;
  --cream-text: #e8e0cd;
  --lime: #d9e650;
  --lime-deep: #c3d13a;
  --ink: #17171b;
  /* --muted-strong et non --muted : le gris de la landing ne fait que 3,73:1
     sur creme, insuffisant pour du petit texte. */
  --muted-strong: #66645b;
  --muted-dark: #a3a091;
}

/* Le theme ne l'impose pas a nos elements : sans cela, width 100% plus padding
   deborde le conteneur. */
.osu-welcome,
.osu-welcome *,
.osu-welcome *::before,
.osu-welcome *::after { box-sizing: border-box; }

body {
  background: var(--cream);
  color: var(--ink);
  font-family: 'Archivo', system-ui, sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* dvh d'abord : sur mobile, 100vh compte la barre d'adresse et deborde. */
.osu-welcome { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }

/* ---------- barre de marque ---------- */
.osu-welcome-nav { background: var(--night); }
.osu-welcome-nav-inner {
  max-width: 1160px; margin: 0 auto; padding: 16px 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.osu-welcome-logo {
  display: flex; align-items: center; gap: .1em; white-space: nowrap;
  color: var(--cream-text); font-weight: 900; font-size: 1.25rem; letter-spacing: .04em;
}
.osu-welcome-logo svg { width: 1.6em; height: 1.6em; }

/* Bascule de langue : reprend la pastille du selecteur de langue de la landing. */
.osu-welcome-swap { margin: 0; }
.osu-welcome-swap a {
  font-family: 'IBM Plex Mono', monospace; font-size: .75rem; letter-spacing: .08em;
  color: var(--muted-dark); text-decoration: none; white-space: nowrap;
  padding: .5em .9em; border-radius: 999px; border: 1px solid rgba(232, 224, 205, .25);
  transition: color .18s ease, border-color .18s ease;
}
.osu-welcome-swap a:hover { color: var(--lime); border-color: rgba(217, 230, 80, .5); }

/* ---------- corps ---------- */
/* Centre verticalement : la page est courte, et sans cela le contenu se colle en
   haut avec un grand vide au-dessus du pied. */
.osu-welcome-main {
  flex: 1; width: 100%; max-width: 780px; margin: 0 auto;
  padding: clamp(48px, 9vw, 96px) 24px;
  display: flex; flex-direction: column; justify-content: center;
}
.osu-welcome-eyebrow {
  font-family: 'IBM Plex Mono', monospace; font-size: .78rem; letter-spacing: .22em;
  text-transform: uppercase; color: var(--muted-strong);
  display: flex; align-items: center; gap: .6em; margin: 0 0 1.4rem;
}
.osu-welcome-eyebrow svg { width: .85em; height: .85em; flex: none; }
.osu-welcome h1 {
  font-size: clamp(2.2rem, 5vw, 3.4rem); font-weight: 900; line-height: .98;
  letter-spacing: -.02em; text-wrap: balance; margin: 0 0 1.2rem;
}
.osu-welcome-lead { font-size: 1.15rem; max-width: 56ch; margin: 0 0 1rem; }
.osu-welcome-body { color: var(--muted-strong); max-width: 56ch; margin: 0 0 2.2rem; }
.osu-welcome-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  font-family: 'Archivo', sans-serif; font-weight: 700; font-size: .95rem; letter-spacing: .01em;
  padding: 1em 1.9em; border-radius: 999px; text-decoration: none;
  background: var(--lime); color: var(--ink); border: 2px solid transparent;
  transition: transform .18s ease, background .18s ease;
}
.osu-welcome-cta:hover { background: var(--lime-deep); transform: translateY(-2px); }
.osu-welcome-cta:active { transform: none; }
.osu-welcome-note { margin: 1.8rem 0 0; font-size: .92rem; color: var(--muted-strong); max-width: 56ch; }

/* ---------- pied ---------- */
.osu-welcome-foot { background: var(--night); color: var(--muted-dark); }
.osu-welcome-foot-inner { max-width: 1160px; margin: 0 auto; padding: 26px 24px; font-size: .92rem; }
.osu-welcome-foot a { color: var(--lime); text-decoration: none; }
.osu-welcome-foot a:hover { text-decoration: underline; }

@media (max-width: 480px) {
  .osu-welcome-nav-inner { padding: 14px 18px; }
  .osu-welcome-logo { font-size: 1.05rem; }
  .osu-welcome-main { padding-left: 18px; padding-right: 18px; }
  .osu-welcome-cta { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .osu-welcome-cta { transition: none; }
  .osu-welcome-cta:hover { transform: none; }
}