/*
 * Page d'attente S'kolo (landing/teasing/). Ne porte que la mise en page : couleurs, polices et
 * espacements viennent de design-system/tokens.css et polices.css (aucune couleur en dur ici).
 * composants.css n'est pas chargé (70 Ko pour un mot-symbole et un bouton).
 *
 * Thème. <html data-refonte> adhère au thème sombre du système que tokens.css livre pour cet attribut
 * (--skolo-surface, --skolo-encre, --skolo-encre-attenuee-lisible, --skolo-bordure sous
 * prefers-color-scheme: dark). Restent ici deux alias --t-* pour ce que ce bloc ne porte pas : la couleur
 * des liens et celle du point, qui prennent les variantes --skolo-sombre-*. Réglage du système seulement :
 * aucun script (la CSP n'en admet pas), donc aucune bascule. Les deux alias et l'attribut vont ensemble.
 *
 * Mot-symbole. .mot / .mot__point reprennent la structure de .marque / .marque__point (Sora 700, point
 * teal à la place de l'apostrophe) à l'échelle d'un logo, sans charger composants.css. Écart documenté :
 * .marque__point vaut 5 px (0,25 em à 20 px) et vertical-align 0,31 em, réglage optique de la petite
 * taille ; à grande taille le point suit le dessin de favicon.svg (disque de 170 unités sur 1000, soit
 * 0,17 em), d'où 0,16 em ici avec un crénage serré.
 *
 * Contrastes mesurés (texte, seuil 4,5 ; graphique, seuil 3) :
 *   clair : encre #1A1E2B sur blanc 16,5 ; atténuée #5F6780 5,62 ; lien bleu-700 #0040E9 7,22 ;
 *           bouton : blanc sur bleu-600 #1D5BFF 5,26 ; point teal-600 sur blanc 3,30.
 *   sombre : encre #F5F6FA sur #0E1220 17,27 ; atténuée #A9B1C9 8,72 ; lien bleu-300 8,68 ;
 *           point teal-400 9,64 ; bouton bleu-600 contre le fond 3,3 (non textuel, seuil 3).
 */

:root {
  --t-lien: var(--skolo-bleu-700);
  --t-lien-survol: var(--skolo-bleu-800);
  --t-point: var(--skolo-secondaire);
  --t-gouttiere: clamp(1.25rem, 5vw, 4rem);
  /* Marge latérale de l'en-tête et du pied : alignée sur la colonne centrée de .page (82rem). */
  --t-marge: max(var(--t-gouttiere), calc((100% - 82rem) / 2 + var(--t-gouttiere)));
}

@media screen and (prefers-color-scheme: dark) {
  :root {
    --t-lien: var(--skolo-sombre-primaire-texte);
    --t-lien-survol: var(--skolo-sombre-primaire-texte-survol);
    --t-point: var(--skolo-sombre-secondaire-texte);
  }
}

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

html {
  color-scheme: light dark;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--skolo-surface);
  color: var(--skolo-encre);
  font-family: var(--skolo-police-corps);
  font-size: 1.0625rem;
  line-height: 1.6;
}

a {
  color: var(--t-lien);
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
}
a:hover { color: var(--t-lien-survol); }
a:focus-visible {
  outline: 3px solid var(--t-lien);
  outline-offset: 3px;
  border-radius: 2px;
}

@media (prefers-reduced-motion: no-preference) {
  a, .bouton { transition: color var(--skolo-duree-rapide) var(--skolo-courbe), background-color var(--skolo-duree-rapide) var(--skolo-courbe); }
}

/* Lien d'évitement : hors écran jusqu'au focus clavier. */
.evitement {
  position: absolute;
  top: var(--skolo-espace-2);
  left: var(--skolo-espace-2);
  z-index: 1;
  display: inline-flex;
  align-items: center;
  min-height: var(--skolo-cible-tactile);
  padding: 0 var(--skolo-espace-4);
  background: var(--skolo-surface);
  border: 1px solid var(--skolo-bordure);
  border-radius: var(--skolo-rayon);
  transform: translateY(-300%);
}
.evitement:focus-visible { transform: none; }

/* Bandeau haut : le sélecteur de langue seul. */
.entete {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  padding: var(--skolo-espace-2) var(--t-marge) 0;
}

.langues {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--skolo-espace-1);
}
.langues a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--skolo-cible-tactile);
  min-width: var(--skolo-cible-tactile);
  padding: 0 var(--skolo-espace-3);
  font-size: 0.9375rem;
  color: var(--skolo-encre-attenuee-lisible);
  text-decoration: none;
}
.langues a:hover { color: var(--skolo-encre); }
.langues a[aria-current="page"] {
  color: var(--skolo-encre);
  font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--t-point);
}

/* Corps : une colonne large, alignée à gauche, le mot-symbole en tête. */
.page {
  flex: 1;
  width: 100%;
  max-width: 82rem;
  margin: 0 auto;
  padding: clamp(1.5rem, 6vh, 4rem) var(--t-gouttiere) clamp(2rem, 6vh, 4rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Le seul geste visuel : le mot-symbole, très grand (écart avec .marque documenté en tête de fichier). */
.mot {
  margin: 0;
  font-family: var(--skolo-police-titres);
  font-weight: 700;
  font-size: clamp(2.5rem, min(28vw, 34vh), 22rem);
  line-height: 0.95;
  letter-spacing: -0.035em;
  color: var(--skolo-encre);
  white-space: nowrap;
}
.mot__point {
  display: inline-block;
  border: 1px solid transparent; /* visible en couleurs forcées */
  width: 0.16em;
  height: 0.16em;
  margin: 0 0.02em 0 0.03em;
  border-radius: 50%;
  background: var(--t-point);
  vertical-align: 0.36em;
}

.annonce {
  margin-top: clamp(1.75rem, 5vh, 3.5rem);
  padding-top: clamp(1.25rem, 3vh, 2rem);
  border-top: 1px solid var(--skolo-bordure);
  display: grid;
  gap: var(--skolo-espace-4);
}

/* Pastille d'état : une ligne, texte et point, jamais la couleur seule. */
.statut {
  margin: 0 0 var(--skolo-espace-4);
  display: inline-flex;
  align-items: center;
  gap: var(--skolo-espace-2);
  padding: var(--skolo-espace-1) var(--skolo-espace-3);
  border: 1px solid var(--skolo-bordure);
  border-radius: var(--skolo-rayon-pastille);
  font-size: 0.875rem;
  color: var(--skolo-encre-attenuee-lisible);
}
.statut__point {
  flex: none;
  border: 1px solid transparent; /* visible en couleurs forcées */
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--t-point);
}

h1 {
  margin: 0;
  max-width: 22ch;
  font-family: var(--skolo-police-titres);
  font-weight: 700;
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

/* 404 : le titre anglais sous le français, sur sa propre ligne. */
.h1__langue {
  display: block;
  color: var(--skolo-encre-attenuee-lisible);
}

.chapeau {
  text-wrap: pretty;
  margin: 0;
  max-width: 34rem;
  color: var(--skolo-encre-attenuee-lisible);
}

/* Trois faits, filets fins, sans carte ni icône. */
.faits {
  margin: clamp(1.75rem, 4vh, 3rem) 0 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  overflow-wrap: break-word;
}
.faits > div {
  padding: var(--skolo-espace-4) 0;
  border-top: 1px solid var(--skolo-bordure);
}
.faits dt {
  margin: 0 0 var(--skolo-espace-1);
  font-family: var(--skolo-police-titres);
  font-weight: 700;
  font-size: 0.9375rem;
  letter-spacing: 0.01em;
}
.faits dd {
  margin: 0;
  color: var(--skolo-encre-attenuee-lisible);
  max-width: 28rem;
}

/* Contact : un libellé et un bouton plein. */
.contact {
  margin-top: clamp(0.5rem, 2vh, 1.25rem);
  padding-top: var(--skolo-espace-4);
  border-top: 1px solid var(--skolo-bordure);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--skolo-espace-3) var(--skolo-espace-5);
}
.contact__libelle {
  margin: 0;
  color: var(--skolo-encre-attenuee-lisible);
}

.bouton {
  border: 1px solid transparent; /* visible en couleurs forcées */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  max-width: 100%;
  padding: var(--skolo-espace-2) var(--skolo-espace-5);
  border-radius: var(--skolo-rayon);
  background: var(--skolo-bleu-600);
  color: var(--skolo-sur-accent);
  font-family: var(--skolo-police-titres);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  overflow-wrap: anywhere;
}
.bouton:hover {
  background: var(--skolo-primaire-survol);
  color: var(--skolo-sur-accent);
}
.bouton--discret {
  background: none;
  color: var(--t-lien);
  box-shadow: inset 0 0 0 1px var(--skolo-bordure);
}
.bouton--discret:hover {
  background: none;
  color: var(--t-lien-survol);
}

/* Page 404 : deux liens côte à côte, empilés si l'écran est étroit. */
.retours {
  margin: clamp(1.75rem, 4vh, 3rem) 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--skolo-espace-3);
}

.pied {
  padding: var(--skolo-espace-4) var(--t-marge) var(--skolo-espace-5);
  color: var(--skolo-encre-attenuee-lisible);
  font-size: 0.875rem;
}
.pied p { margin: 0; }
/* Emplacement des mentions légales : invisible tant qu'il est vide. */
.pied__mentions:empty { display: none; }
.pied__mentions { margin-top: var(--skolo-espace-2); }

@media (min-width: 56rem) {
  .annonce {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: var(--skolo-espace-7);
    align-items: end;
  }
  .faits {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--skolo-espace-6);
  }
  .faits > div { padding-right: var(--skolo-espace-4); }
  .contact { margin-top: 0; }
}