/*
 * potes.css — La charte POTEs! sur le web.
 *
 * Les valeurs viennent de `mobile/src/core/design/tokens.ts` et de
 * `theme.tsx`, mot pour mot. Ce n'est pas une marque web séparée : c'est la
 * même, servie par un autre moyen.
 *
 * ## Sombre, toujours
 *
 * Le web de POTEs! ne suit pas la préférence du navigateur. Ces pages
 * annoncent une application dont le sombre EST la signature : les servir en
 * clair à la moitié des visiteurs ferait douter qu'il s'agisse du même produit.
 * Les pages de texte gardent donc le même fond, avec une colonne étroite et un
 * contraste renforcé — c'est la lisibilité qui change, pas l'identité.
 *
 * ## Aucune police à télécharger
 *
 * Celle du système, comme dans l'application. La page s'affiche instantanément,
 * y compris sur un réseau de festival — et c'est le seul endroit où POTEs! sera
 * lu dans ces conditions.
 */

:root {
  /* Mesurées sur brand/source/ — voir docs/BRANDING.md. */
  --canvas: #0b0e12;
  --surface: #15161c;
  --surface-haute: #1d1e26;
  --surface-interactive: #252533;
  --violet: #6343b3;
  --violet-clair: #a291e1;
  --encre: #e4e7e8;
  --encre-douce: #9a9ba1;
  --encre-discrete: #7d7e82;
  --encre-muette: #6a6b73;
  --trait: rgba(255, 255, 255, 0.08);
  --trait-actif: rgba(162, 145, 225, 0.34);
  --halo: rgba(162, 145, 225, 0.14);

  /* Échelle de 4 points, comme l'application. */
  --xs: 4px;
  --sm: 8px;
  --md: 12px;
  --lg: 16px;
  --xl: 24px;
  --xxl: 32px;
  --xxxl: 48px;

  --rayon-sm: 10px;
  --rayon: 20px;
  --rayon-lg: 28px;
  --pilule: 999px;

  --colonne: 1120px;
  --colonne-texte: 680px;
}

* {
  box-sizing: border-box;
}

html {
  /* Une ancre `#fonctionnalites` ne doit pas se coller sous l'en-tête. */
  scroll-padding-top: 96px;
}

body {
  margin: 0;
  background: var(--canvas);
  color: var(--encre);
  font-family:
    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  font-size: 16px;
  line-height: 1.5;
}

img {
  max-width: 100%;
  height: auto;
}

/*
 * `hidden` doit gagner. Toujours.
 *
 * La feuille du navigateur pose `[hidden] { display: none }` avec une
 * spécificité de (0,1,0) — que n'importe quelle règle de classe écrase. Le
 * bouton « Installer POTEs! » de la page d'invitation s'affichait donc malgré
 * son attribut `hidden`, et proposait une installation qui n'existe pas encore.
 *
 * `!important` est justifié ici et nulle part ailleurs : un élément marqué
 * caché n'a aucune raison légitime d'être visible.
 */
[hidden] {
  display: none !important;
}

a {
  color: var(--violet-clair);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Une navigation au clavier doit se VOIR. */
:focus-visible {
  outline: 2px solid var(--violet-clair);
  outline-offset: 3px;
  border-radius: var(--xs);
}

/* ------------------------------------------------------------------ *
 * En-tête
 * ------------------------------------------------------------------ */

.entete {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: var(--xl);
  max-width: var(--colonne);
  margin: 0 auto;
  padding: var(--lg) var(--xl);
  /* Un fond translucide : le contenu qui passe dessous se devine, sans
     jamais rendre les liens illisibles. */
  background: rgba(11, 14, 18, 0.82);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--trait);
}

@supports not (backdrop-filter: blur(1px)) {
  .entete {
    background: var(--canvas);
  }
}

.marque {
  display: flex;
  flex: 0 0 auto;
}

.marque img {
  display: block;
  width: 132px;
}

.liens {
  display: flex;
  gap: var(--xl);
  flex: 1 1 auto;
  font-size: 15px;
}

.liens a {
  color: var(--encre-douce);
}

.liens a:hover {
  color: var(--encre);
}

.langues {
  display: flex;
  gap: var(--sm);
  flex: 0 0 auto;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.langues a {
  color: var(--encre-discrete);
  padding: var(--xs) var(--sm);
  border-radius: var(--rayon-sm);
}

.langues a:hover {
  color: var(--encre);
  text-decoration: none;
}

/* La langue courante se distingue par la COULEUR et le fond, jamais par la
   seule couleur : un daltonien doit la voir aussi. */
.langues a[aria-current='true'] {
  color: var(--encre);
  background: var(--surface-interactive);
}

/* ------------------------------------------------------------------ *
 * Structure
 * ------------------------------------------------------------------ */

main {
  max-width: var(--colonne);
  margin: 0 auto;
  padding: 0 var(--xl) var(--xxxl);
}

.section {
  margin-top: var(--xxxl);
}

.section > h2 {
  font-size: 26px;
  line-height: 1.2;
  margin: 0 0 var(--sm);
}

.section-corps {
  color: var(--encre-douce);
  max-width: 56ch;
  margin: 0 0 var(--xl);
}

/* ------------------------------------------------------------------ *
 * Hero
 * ------------------------------------------------------------------ */

.hero {
  padding: var(--xxxl) 0;
  text-align: center;
  /* Un halo violet très bas. Il doit se DEVINER, jamais se voir : c'est ce
     qui distingue le fond de POTEs! d'un noir plat. */
  background-image: radial-gradient(90% 70% at 50% 0%, rgba(99, 67, 179, 0.26), transparent 72%);
  background-repeat: no-repeat;
}

.badge {
  display: inline-block;
  margin: 0 0 var(--lg);
  padding: var(--xs) var(--md);
  border: 1px solid var(--trait-actif);
  border-radius: var(--pilule);
  background: rgba(99, 67, 179, 0.18);
  color: var(--violet-clair);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.hero h1 {
  font-size: clamp(34px, 7vw, 60px);
  line-height: 1.08;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 auto var(--lg);
  max-width: 15ch;
}

.accent {
  color: var(--violet-clair);
}

.hero-corps {
  color: var(--encre-douce);
  font-size: 17px;
  max-width: 52ch;
  margin: 0 auto var(--xl);
}

.note,
.indisponible {
  color: var(--encre-muette);
  font-size: 13px;
  max-width: 48ch;
  margin: var(--lg) auto 0;
}

.indisponible {
  padding: var(--md) var(--lg);
  border: 1px dashed var(--trait-actif);
  border-radius: var(--rayon-sm);
  color: var(--encre-douce);
}

/* ------------------------------------------------------------------ *
 * Boutons
 * ------------------------------------------------------------------ */

.boutons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--md);
  justify-content: center;
  margin-top: var(--xl);
}

.bouton {
  display: inline-block;
  padding: 14px var(--xl);
  border: 0;
  border-radius: var(--pilule);
  background: var(--violet);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  text-align: center;
  /* Cible tactile minimale : la même que dans l'application. */
  min-height: 44px;
}

.bouton:hover {
  text-decoration: none;
  filter: brightness(1.1);
}

.bouton--secondaire {
  background: var(--surface-haute);
  color: var(--encre);
  border: 1px solid var(--trait);
}

/* ------------------------------------------------------------------ *
 * Cartes de fonctionnalité
 *
 * La même logique que dans l'application : surface sombre, glyphe violet,
 * titre blanc, description en retrait.
 * ------------------------------------------------------------------ */

.grille-fonctions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--lg);
  margin-top: var(--xl);
}

.carte-fonction {
  padding: var(--xl);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  background: linear-gradient(160deg, #1a1b23, #141519);
  /* Le liseré clair sur l'arête haute : ce qui fait qu'une carte a une arête
     plutôt qu'un bord. */
  box-shadow: inset 0 1px 0 var(--halo);
}

.carte-fonction h3 {
  font-size: 18px;
  margin: var(--md) 0 var(--sm);
}

.carte-fonction p {
  color: var(--encre-douce);
  font-size: 15px;
  margin: 0;
}

.glyphe {
  width: 26px;
  height: 26px;
  color: var(--violet-clair);
  display: block;
}

/* ------------------------------------------------------------------ *
 * Étapes
 * ------------------------------------------------------------------ */

.etapes {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--lg);
  margin: var(--xl) 0 0;
  padding: 0;
  counter-reset: etape;
}

.etapes li {
  padding: var(--lg) 0 0;
  border-top: 1px solid var(--trait);
}

.rang {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--pilule);
  background: rgba(99, 67, 179, 0.22);
  color: var(--violet-clair);
  font-size: 13px;
  font-weight: 700;
}

.etapes h3 {
  font-size: 17px;
  margin: var(--md) 0 var(--xs);
}

.etapes p {
  color: var(--encre-douce);
  font-size: 15px;
  margin: 0;
}

/* ------------------------------------------------------------------ *
 * Aperçu d'invitation
 * ------------------------------------------------------------------ */

/*
 * L'aperçu d'invitation compose ses propres dégradés — c'est-à-dire un SECOND
 * traitement d'image, qui divergerait du premier. Il porte donc `.visuel`
 * (voir `signature.css`, généré depuis le thème de l'application) et ne garde
 * ici que sa forme.
 */
.apercu-invitation {
  padding: var(--xxl);
  border: 1px solid var(--trait-actif);
  border-radius: var(--rayon-lg);
  box-shadow: inset 0 1px 0 var(--halo);
  text-align: center;
  /* Sans photo, le fond de marque : c'est le cas d'aujourd'hui, et il tient
     debout tout seul. */
  background-image: linear-gradient(160deg, #231f35, #141519);
}

.apercu-qui {
  color: var(--encre-douce);
  font-size: 15px;
  margin: 0 0 var(--xs);
}

.apercu-plan {
  font-size: clamp(24px, 4vw, 34px);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 var(--lg);
}

.apercu-note {
  color: var(--encre-muette);
  font-size: 13px;
  margin: 0;
}

/* ------------------------------------------------------------------ *
 * Grandes cartes
 * ------------------------------------------------------------------ */

.deux-colonnes,
.grille-deux {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--lg);
}

.grille-deux {
  margin-top: var(--xl);
}

.carte-large {
  padding: var(--xl);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  background: linear-gradient(160deg, #1a1b23, #141519);
  box-shadow: inset 0 1px 0 var(--halo);
}

.carte-large h2 {
  font-size: 20px;
  margin: 0 0 var(--sm);
}

.carte-large p {
  color: var(--encre-douce);
  font-size: 15px;
  margin: 0 0 var(--lg);
}

.points {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--xl);
  color: var(--encre-douce);
  font-size: 15px;
}

.points li {
  padding: var(--sm) 0;
  border-top: 1px solid var(--trait);
}

/* ------------------------------------------------------------------ *
 * Pages de texte
 * ------------------------------------------------------------------ */

body.texte main {
  max-width: var(--colonne-texte);
  padding-top: var(--xxl);
}

body.texte h1 {
  font-size: clamp(28px, 5vw, 38px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 var(--lg);
}

.chapeau {
  color: var(--encre-douce);
  font-size: 17px;
  margin: 0 0 var(--xl);
}

.question {
  margin-top: var(--xxl);
}

.question h2 {
  font-size: 19px;
  margin: 0 0 var(--sm);
}

.question p,
.question li {
  /* Renforcé sur les pages de texte : on y lit longtemps. */
  color: #b6b8bd;
  margin: 0;
}

/* Ce qui n'est pas encore validé doit se VOIR, pas se deviner. */
.a-valider {
  border-left: 3px solid var(--violet-clair);
  padding: var(--md) var(--lg);
  margin: var(--xl) 0;
  background: var(--surface);
  border-radius: 0 var(--rayon-sm) var(--rayon-sm) 0;
  color: var(--encre-douce);
  font-size: 14px;
}

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

.pied {
  border-top: 1px solid var(--trait);
  margin-top: var(--xxxl);
}

.pied-colonnes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--xl);
  max-width: var(--colonne);
  margin: 0 auto;
  padding: var(--xxl) var(--xl);
}

.pied-logo {
  width: 108px;
  opacity: 0.9;
}

.pied h2 {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--encre-discrete);
  margin: 0 0 var(--md);
}

.pied ul {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 15px;
}

.pied li {
  margin-bottom: var(--sm);
}

.pied a {
  color: var(--encre-douce);
}

.pied a:hover {
  color: var(--encre);
}

.pied-bas {
  max-width: var(--colonne);
  margin: 0 auto;
  padding: 0 var(--xl) var(--xxl);
  color: var(--encre-muette);
  font-size: 13px;
}

/* ------------------------------------------------------------------ *
 * Page d'invitation — plein écran, sans en-tête
 * ------------------------------------------------------------------ */

body.invitation {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--xl);
  background-image: radial-gradient(120% 60% at 50% 0%, rgba(99, 67, 179, 0.24), transparent 70%);
  background-repeat: no-repeat;
}

/*
 * `width: 100%` en plus du plafond.
 *
 * Sans lui, cet élément d'un conteneur en ligne prenait 420 pixels quelle que
 * soit la largeur de l'écran : sur un téléphone de 390, la page débordait à
 * droite et les boutons sortaient du cadre. `min-width: 0` autorise le
 * rétrécissement, qu'un élément flexible refuse par défaut.
 */
body.invitation main {
  width: 100%;
  min-width: 0;
  max-width: 420px;
  padding: 0;
  text-align: center;
}

body.invitation .logo {
  width: 168px;
  margin-bottom: var(--xxl);
}

body.invitation h1 {
  font-size: 26px;
  line-height: 1.25;
  margin: 0 0 var(--sm);
}

body.invitation .carte {
  padding: var(--xl);
  margin: var(--xl) 0;
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  background: linear-gradient(160deg, #1a1b23, #141519);
  box-shadow: inset 0 1px 0 var(--halo);
}

body.invitation .bouton {
  display: block;
  width: 100%;
}

body.invitation .bouton--secondaire {
  margin-top: var(--md);
}

/* ------------------------------------------------------------------ *
 * Mouvement — discret, et jamais imposé
 * ------------------------------------------------------------------ */

@media (prefers-reduced-motion: no-preference) {
  main > * {
    animation: apparaitre 360ms ease-out both;
  }
}

@keyframes apparaitre {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ------------------------------------------------------------------ *
 * Petits écrans — la priorité
 * ------------------------------------------------------------------ */

@media (max-width: 720px) {
  .entete {
    flex-wrap: wrap;
    gap: var(--md);
    padding: var(--md) var(--lg);
  }

  /* Les liens de section passent à la ligne, en pleine largeur : sur un
     téléphone, un menu à quatre entrées serrées ne se touche pas. */
  .liens {
    order: 3;
    width: 100%;
    gap: var(--lg);
    overflow-x: auto;
    padding-bottom: var(--xs);
    font-size: 14px;
    /* La barre de défilement ne doit pas voler de la hauteur. */
    scrollbar-width: none;
  }

  .liens::-webkit-scrollbar {
    display: none;
  }

  .liens a {
    white-space: nowrap;
  }

  main {
    padding: 0 var(--lg) var(--xxl);
  }

  .hero {
    padding: var(--xxl) 0;
  }

  .boutons .bouton {
    width: 100%;
  }
}