/* =============================================================================
   Piton Games — style.css
   Monochrome · mobile d’abord · aucune ressource externe
   -----------------------------------------------------------------------------
    1. Polices             6. Héros                11. Pied de page
    2. Jetons              7. Studio               12. Pages de texte (légal, 404)
    3. Base                8. Jeux                 13. Mouvement
    4. Composants          9. Promesse             14. Préférences d’affichage
    5. En-tête            10. Contact              15. Impression
   ============================================================================= */


/* 1. Polices ----------------------------------------------------------------
   Archivo (SIL OFL 1.1) et Geist (SIL OFL 1.1), sous-ensemble latin,
   hébergées dans /assets/fonts avec leurs licences.                          */

@font-face {
  font-family: "Archivo";
  src: url("../assets/fonts/archivo/archivo-latin-variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Geist";
  src: url("../assets/fonts/geist/geist-latin-variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}


/* 2. Jetons ------------------------------------------------------------------ */

:root {
  color-scheme: dark;

  /* Gris froids. Contrastes mesurés sur le charbon #0c0e12. */
  --charbon: #0c0e12;   /* fond de la marque                               */
  --fosse: #0f1115;     /* creux (schémas)                                 */
  --acier: #14171c;     /* panneaux                                        */
  --joint: #262a32;     /* filets décoratifs, jamais interactifs           */
  --repere: #3a3f48;    /* repères de coupe                                */
  --contour: #6b717c;   /* contours d’éléments interactifs : 3,9:1         */
  --etiquette: #878d98; /* étiquettes et texte secondaire : 5,8:1          */
  --texte: #bfc4cc;     /* texte courant : 11:1                            */
  --blanc: #f2f4f7;     /* blanc Piton : titres, logo : 17,5:1             */

  --f-titre: "Archivo", "Arial Black", Arial, sans-serif;
  --f-etiquette: "Archivo", "Arial Narrow", Arial, sans-serif;
  --f-texte: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  --t-corps: clamp(1rem, 0.94rem + 0.25vw, 1.125rem);
  --t-etiquette: 0.8125rem;
  --t-h1: clamp(2rem, 1.1rem + 4vw, 4.75rem);
  /* Plafond 6,6vw sur petit écran : la dernière paire de mots d’une
     phrase-titre tient sur une ligne au lieu de laisser un mot seul.
     Sans effet au-delà d’environ 480 px. */
  --t-h2: max(1.375rem, min(clamp(1.75rem, 1.05rem + 3.1vw, 3.75rem), 6.6vw));
  --t-h3: clamp(1.375rem, 1.15rem + 1vw, 2rem);

  --gouttiere: clamp(1rem, 0.55rem + 2.4vw, 3rem);
  --largeur: 76rem;
  --section: clamp(4.5rem, 2.75rem + 7.5vw, 9rem);

  /* Chanfrein à 30°, l’angle des côtés de l’hexagone de l’emblème. */
  --chanfrein-x: 1.5rem;
  --chanfrein-y: 0.875rem;

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
}


/* 3. Base -------------------------------------------------------------------- */

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

/* Sur téléphone : pas de flash gris au toucher (chaque lien a son propre
   état :active plus bas) ni de police gonflée en paysage. */
html {
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 1.5rem;
}

body {
  margin: 0;
  background: var(--charbon) url("../assets/img/grain.svg");
  color: var(--texte);
  font-family: var(--f-texte);
  font-size: var(--t-corps);
  line-height: 1.6;
  font-synthesis: none;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* langue.js : redirection vers la langue choisie, la page ne s’affiche pas. */
.redirection body {
  visibility: hidden;
}

img,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

h1,
h2,
h3,
p,
ul,
ol,
dl,
dd,
figure,
blockquote {
  margin: 0;
}

ul[class],
ol[class] {
  padding: 0;
  list-style: none;
}

/* touch-action : le clic part tout de suite, sans attendre un double-toucher. */
a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  touch-action: manipulation;
}

/* Les liens de navigation sont des commandes : un appui long ne sélectionne
   pas leur texte. Le courriel et les liens dans le texte restent copiables. */
.nav__lien,
.langue__lien,
.pied__groupe a {
  -webkit-user-select: none;
  user-select: none;
}

strong {
  color: var(--blanc);
  font-weight: 600;
}

::selection {
  background: var(--blanc);
  color: var(--charbon);
}

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

/* Cible du lien d’évitement : pas de cadre autour de tout le contenu. */
#contenu:focus,
#contenu:focus-visible {
  outline: none;
}

.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* « Aller au contenu » : visible seulement quand il reçoit le focus. */
.lien-evitement {
  position: absolute;
  top: 0.75rem;
  left: var(--gouttiere);
  z-index: 100;
  padding: 0.75rem 1rem;
  background: var(--blanc);
  color: var(--charbon);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  transform: translateY(calc(-100% - 1.5rem));
}

.lien-evitement:focus {
  transform: none;
}


/* 4. Composants -------------------------------------------------------------- */

.conteneur {
  width: 100%;
  max-width: calc(var(--largeur) + 2 * var(--gouttiere));
  margin-inline: auto;
  padding-inline:
    max(var(--gouttiere), env(safe-area-inset-left))
    max(var(--gouttiere), env(safe-area-inset-right));
}

/* Étiquette : petites capitales techniques en Archivo étroit. */
.etiquette {
  font-family: var(--f-etiquette);
  font-size: var(--t-etiquette);
  font-stretch: 75%;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--etiquette);
}

/* La lampe : le seul point lumineux de l’interface, inspiré de l’œil du
   P-serpent. Détail décoratif : toujours aria-hidden, jamais porteur de sens. */
.lampe {
  display: inline-block;
  flex: none;
  width: 0.875rem;
  height: 0.3125rem;
  background: var(--blanc);
  clip-path: polygon(0 14%, 60% 0, 100% 78%, 44% 100%);
}

/* Plaque : panneau d’acier à bord fin, coin supérieur droit chanfreiné à 30°.
   Le bord est le fond de la plaque ; ::before pose l’acier 1 px plus bas.
   Décalages 0,73 px et 0,43 px : épaisseur constante de 1 px sur la diagonale. */
.plaque {
  position: relative;
  isolation: isolate;
  background: var(--joint);
  clip-path: polygon(
    0 0,
    calc(100% - var(--chanfrein-x)) 0,
    100% var(--chanfrein-y),
    100% 100%,
    0 100%
  );
}

.plaque::before {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: -1;
  background: var(--acier);
  clip-path: polygon(
    0 0,
    calc(100% - var(--chanfrein-x) + 0.73px) 0,
    100% calc(var(--chanfrein-y) - 0.43px),
    100% 100%,
    0 100%
  );
}

/* Tête de section : numéro de plaque, nom de section, puis la phrase-titre. */
.tete {
  display: block;
  margin-bottom: clamp(2.25rem, 1.5rem + 2.5vw, 4rem);
}

.tete__ligne {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  margin-bottom: clamp(1rem, 0.8rem + 0.8vw, 1.5rem);
}

.tete__index {
  color: var(--blanc);
}

/* Sans phrase-titre, l’étiquette est seule : pas de marge en double, le
   contenu suit à la même distance que dans les autres sections. */
.tete__ligne:last-child {
  margin-bottom: 0;
}

.tete__ligne::after {
  content: "";
  flex: 1 1 auto;
  min-width: 2.5rem;
  height: 1px;
  background: var(--joint);
}

.tete__accroche {
  display: block;
  max-width: 22ch;
  font-family: var(--f-titre);
  font-size: var(--t-h2);
  font-stretch: 125%;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--blanc);
}

/* Une phrase par bloc : on ne coupe jamais au milieu de deux phrases. */
.tete__accroche > span {
  display: block;
}

/* Lien avec flèche : soulignement discret qui s’affirme au survol.
   La flèche reste collée au dernier mot (.insecable). */
.lien-fleche {
  display: inline-block;
  padding-block: 0.6rem;
  color: var(--blanc);
  font-weight: 500;
  text-decoration-line: underline;
  text-decoration-color: var(--contour);
  text-underline-offset: 0.3em;
  transition: text-decoration-color 160ms ease;
}

/* Le dernier mot + la flèche, ou un nom court comme « Chosen One » : jamais
   un nom long entier, qui ne pourrait plus se couper et sortirait du panneau. */
.insecable {
  white-space: nowrap;
}

.fleche {
  flex: none;
  width: 1rem;
  height: 1rem;
  transition: transform 200ms var(--ease-out);
}

.lien-fleche .fleche {
  display: inline-block;
  margin-left: 0.5rem;
  vertical-align: -0.12em;
}

@media (hover: hover) and (pointer: fine) {
  .lien-fleche:hover {
    text-decoration-color: var(--blanc);
  }

  .lien-fleche:hover .fleche {
    transform: translateX(0.25rem);
  }
}

.prose > * + * {
  margin-top: 1.1em;
}

/* Pas de mot seul en fin de paragraphe. */
.prose p,
.fiche__corps p,
.engagement p,
.contact__corps p {
  text-wrap: pretty;
}


/* 5. En-tête ----------------------------------------------------------------- */

.entete {
  position: relative;
  z-index: 10;
  background: var(--charbon) url("../assets/img/grain.svg");
  border-bottom: 1px solid var(--joint);
}

.entete__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "logo langue"
    "nav  nav";
  align-items: center;
  column-gap: 1rem;
}

.entete__logo {
  grid-area: logo;
  justify-self: start;
  display: block;
  margin-block: 0.875rem;
}

.entete__logo img {
  width: auto;
  height: 1.75rem;
}

.nav {
  grid-area: nav;
  border-top: 1px solid var(--joint);
}

.nav__liste {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  column-gap: 0.5rem;
}

.nav__lien {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 2.75rem;
  padding-inline: 0.125rem;
  color: var(--texte);
  text-decoration: none;
  transition: color 150ms ease;
}

.nav__lien::after {
  content: "";
  position: absolute;
  right: 0.125rem;
  bottom: 0.625rem;
  left: 0.125rem;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 220ms var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .nav__lien:hover {
    color: var(--blanc);
  }

  .nav__lien:hover::after {
    transform: scaleX(1);
  }
}

/* Choix de la langue : FR / EN, la langue active porte la lampe. */
.langue {
  grid-area: langue;
  margin-right: -0.5rem;
}

.langue__liste {
  display: flex;
  align-items: center;
}

.langue__liste li + li::before {
  content: "/";
  content: "/" / "";
  color: var(--repere);
}

.langue__lien {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding-inline: 0.5rem;
  color: var(--etiquette);
  text-decoration: none;
  transition: color 150ms ease;
}

.langue__lien[aria-current] {
  color: var(--blanc);
}

.langue__lien[aria-current]::before {
  content: "";
  width: 0.75rem;
  height: 0.27rem;
  background: var(--blanc);
  clip-path: polygon(0 14%, 60% 0, 100% 78%, 44% 100%);
}

@media (hover: hover) and (pointer: fine) {
  .langue__lien:hover {
    color: var(--blanc);
  }
}

@media (min-width: 60em) {
  html {
    scroll-padding-top: 6rem;
  }

  .entete {
    position: sticky;
    top: 0;
  }

  .entete__inner {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "logo nav langue";
    column-gap: 2rem;
    min-height: 4.5rem;
  }

  .entete__logo img {
    height: 2rem;
  }

  .nav {
    justify-self: end;
    border-top: 0;
  }

  .nav__liste {
    column-gap: clamp(1.25rem, 2.6vw, 2.5rem);
  }

  .langue {
    padding-left: 1.5rem;
    border-left: 1px solid var(--joint);
  }
}


/* 6. Héros ------------------------------------------------------------------- */

.heros {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

/* Tôle perforée à trous hexagonaux. Elle s’efface avant l’emblème :
   la zone de protection du logo reste unie. */
.heros__tole {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("../assets/img/tole.svg") 0 0 / 14px 24px repeat;
  -webkit-mask-image: radial-gradient(130% 100% at 100% 100%, #000 0%, rgb(0 0 0 / 0.5) 38%, transparent 70%);
  mask-image: radial-gradient(130% 100% at 100% 100%, #000 0%, rgb(0 0 0 / 0.5) 38%, transparent 70%);
}

.heros__inner {
  display: grid;
  align-content: center;
  gap: clamp(2.75rem, 2rem + 4vw, 5rem);
  min-height: min(calc(100svh - 6.5rem), 46rem);
  padding-block: clamp(3.5rem, 2rem + 7vw, 7rem);
}

.heros__embleme {
  position: relative;
  width: clamp(6.5rem, 4rem + 12vw, 11rem);
}

.heros__embleme img {
  width: 100%;
  height: auto;
}

.heros__nom {
  display: block;
  margin-bottom: clamp(1rem, 0.8rem + 1vw, 1.75rem);
  font-family: var(--f-etiquette);
  font-size: clamp(0.875rem, 0.8rem + 0.3vw, 1.0625rem);
  font-stretch: 75%;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--blanc);
}

/* Une phrase par bloc : chacune monte à son tour à l’arrivée. */
.heros__ligne {
  display: block;
  font-family: var(--f-titre);
  font-size: var(--t-h1);
  font-stretch: 125%;
  font-weight: 800;
  line-height: 0.95;
  text-transform: uppercase;
  color: var(--blanc);
}

.heros__ligne + .heros__ligne {
  margin-top: 0.1em;
}

.heros__ligne > span {
  display: block;
}

/* Coupures fixes, qui suivent le sens et gardent la même structure dans les
   deux langues : « Des jeux pour / se retrouver. », « Games to / get
   together. ». Chaque groupe reste entier à toutes les largeurs. */
.heros__groupe {
  display: block;
  white-space: nowrap;
}

/* Sur petit écran, le titre suit la largeur pour que le groupe le plus large
   (« SE RETROUVER. », 10,64 fois la taille) tienne dans le contenu, même à
   320 px. Le plafond ne joue que sous environ 406 px ; au-delà, --t-h1
   s’applique tel quel. L’anglais est en plus 4 % plus petit, pour
   « GET TOGETHER. ». */
.heros__ligne {
  font-size: min(var(--t-h1), calc(8.73vw - 0.1rem));
}

.heros__ligne:lang(en) {
  font-size: calc(min(var(--t-h1), 8.73vw - 0.1rem) * 0.96);
}

/* « Se perdre » recule dans l’ombre (5,8:1, au-delà du seuil AA). */
.heros__ligne--ombre {
  color: var(--etiquette);
}

.heros__meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: clamp(1.75rem, 1.25rem + 2vw, 3rem);
}

/* Repères de coupe aux quatre coins de la scène. */
.reperes {
  --l: 0.875rem;
  --c: var(--repere);
  position: absolute;
  inset: clamp(0.75rem, 2vw, 1.5rem);
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(var(--c), var(--c)) left top / var(--l) 1px no-repeat,
    linear-gradient(var(--c), var(--c)) left top / 1px var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) right top / var(--l) 1px no-repeat,
    linear-gradient(var(--c), var(--c)) right top / 1px var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) left bottom / var(--l) 1px no-repeat,
    linear-gradient(var(--c), var(--c)) left bottom / 1px var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) right bottom / var(--l) 1px no-repeat,
    linear-gradient(var(--c), var(--c)) right bottom / 1px var(--l) no-repeat;
}

/* La colonne de l’emblème est plafonnée pour laisser au titre la place de
   « SE RETROUVER. » et « GET TOGETHER. » sur une seule ligne, de 960 à
   1920 px et au-delà. */
@media (min-width: 60em) {
  .heros__inner {
    grid-template-columns: clamp(12rem, 22vw, 19rem) minmax(0, 1fr);
    align-items: center;
    min-height: min(calc(100svh - 4.5rem), 54rem);
    column-gap: clamp(3rem, 6vw, 5.5rem);
  }

  .heros__embleme {
    justify-self: start;
    width: 100%;
  }
}


/* 7. Studio ------------------------------------------------------------------ */

.section {
  position: relative;
  padding-block: var(--section);
  border-top: 1px solid var(--joint);
}

.studio__texte {
  max-width: 44rem;
}

.chapeau {
  font-size: clamp(1.1875rem, 1.05rem + 0.6vw, 1.5rem);
  line-height: 1.45;
  color: var(--blanc);
}


/* 8. Jeux -------------------------------------------------------------------- */

.jeux__grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}

.fiche {
  display: flex;
  flex-direction: column;
}

/* Le schéma reprend la découpe intérieure de la plaque, pour garder le bord
   diagonal intact. */
.fiche__visuel {
  margin: 1px 1px 0;
  background: var(--fosse);
  border-bottom: 1px solid var(--joint);
  clip-path: polygon(
    0 0,
    calc(100% - var(--chanfrein-x) + 0.73px) 0,
    100% calc(var(--chanfrein-y) - 0.43px),
    100% 100%,
    0 100%
  );
}

/* Cadre 16:9 ; une illustration d’un autre format n’est jamais déformée.
   Le calque couleur (.schema-couleur) se pose exactement sur le schéma gris. */
.fiche__visuel {
  display: grid;
}

.fiche__visuel img {
  grid-area: 1 / 1;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: contain;
}

/* La couleur appartient aux jeux : chaque fiche porte la couleur de son jeu,
   et seulement elle. Liseré de 2 px sur l’arête du haut et le chanfrein,
   traits clés du schéma, voyant d’état, étiquette « nom de code »,
   soulignement du lien. Contrastes sur l’acier #14171c : vert 10,4:1,
   rouille 4,69:1 (aucun texte n’est écrit en couleur). */
.fiche[data-jeu="chosen-one"] {
  --jeu: #3be07f;
}

.fiche[data-jeu="project-paper"] {
  --jeu: #cc6448;
}

/* Le calque du liseré ne couvre que la bande du haut (chanfrein compris) :
   il ne passe jamais au-dessus du texte, et l’allumage ne repeint qu’elle. */
.fiche[data-jeu]::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: calc(var(--chanfrein-y) + 3px);
  z-index: 1;
  pointer-events: none;
  background: var(--jeu);
  clip-path: polygon(
    0 0,
    calc(100% - var(--chanfrein-x)) 0,
    100% var(--chanfrein-y),
    100% calc(var(--chanfrein-y) + 2.3px),
    calc(100% - var(--chanfrein-x) - 1.2px) 2px,
    0 2px
  );
}

.fiche[data-jeu] .lampe {
  background: var(--jeu);
}

.fiche[data-jeu] .fiche__code {
  border-color: var(--jeu);
}

.fiche[data-jeu] .lien-fleche {
  text-decoration-color: var(--jeu);
}

/* Survol, ou focus clavier dans la fiche : tout le cadre prend la couleur du
   jeu. Au survol du lien, son soulignement s’épaissit dans la même couleur. */
.fiche[data-jeu]:has(:focus-visible) {
  background-color: var(--jeu);
}

@media (hover: hover) and (pointer: fine) {
  .fiche[data-jeu]:hover {
    background-color: var(--jeu);
  }

  .fiche[data-jeu] .lien-fleche:hover {
    text-decoration-thickness: 2px;
  }

  .fiche[data-jeu] .lien-fleche:hover .fleche {
    color: var(--jeu);
  }
}

.fiche__corps {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  padding: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);
}

.fiche__ref {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.25rem 1rem;
  margin-bottom: 1.25rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--joint);
}

/* Un nom d’un seul mot très long se coupe plutôt que d’être rogné par la
   découpe du panneau. L’espace sous le titre tient même sans accroche. */
.fiche__titre {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.875rem;
  margin-bottom: 1rem;
  font-family: var(--f-titre);
  font-size: var(--t-h3);
  font-stretch: 125%;
  font-weight: 800;
  line-height: 1.05;
  text-transform: uppercase;
  overflow-wrap: anywhere;
  color: var(--blanc);
}

.fiche__titre > span:first-child {
  min-width: 0;
}

.fiche__code {
  padding: 0.3rem 0.5rem 0.25rem;
  border: 1px solid var(--contour);
  line-height: 1;
  color: var(--texte);
}

.fiche__pitch {
  font-size: 1.125em;
  font-weight: 500;
  line-height: 1.45;
  color: var(--blanc);
}

.fiche__corps > p + p {
  margin-top: 0.75rem;
}

.fiche__garanties {
  display: grid;
  gap: 0.5rem;
  margin-top: 1.5rem;
}

.fiche__garanties li {
  position: relative;
  padding-left: 1.25rem;
  color: var(--blanc);
}

.fiche__garanties li::before {
  content: "";
  position: absolute;
  top: 0.62em;
  left: 0;
  width: 0.4375rem;
  height: 0.4375rem;
  background: var(--contour);
}

/* Fiche technique : une seule grille pour toutes les lignes (subgrid), la
   colonne des étiquettes prend la largeur de la plus longue, sans couper de mot. */
.fiche__specs {
  display: grid;
  grid-template-columns: fit-content(45%) minmax(0, 1fr);
  column-gap: 1rem;
  margin-top: 1.75rem;
}

.fiche__specs > div {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: 6.25rem minmax(0, 1fr);
  grid-template-columns: subgrid;
  column-gap: 1rem;
  align-items: baseline;
  padding-block: 0.7rem;
  border-top: 1px solid var(--joint);
}

.fiche__specs dt {
  overflow-wrap: normal;
}

.fiche__specs > div:last-child {
  border-bottom: 1px solid var(--joint);
}

.fiche__specs dd {
  position: relative;
  color: var(--blanc);
}

/* Le voyant se place en marge, à gauche de la valeur : toutes les valeurs
   s’alignent sur la même verticale. Il tombe dans l’espace laissé par une
   étiquette courte (« État », « Status »), centré sur la première ligne. */
.fiche__specs dd .lampe {
  position: absolute;
  top: calc(0.8em - 0.156rem);
  right: calc(100% + 0.6rem);
}

.fiche__corps > .lien-fleche {
  align-self: flex-start;
  margin-top: 1.25rem;
}

@media (min-width: 45em) {
  .jeux__grille {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


/* 9. Promesse ---------------------------------------------------------------- */

.promesse__liste {
  display: grid;
  border-top: 1px solid var(--joint);
}

.engagement {
  padding-block: 1.75rem;
  border-bottom: 1px solid var(--joint);
}

.engagement__titre {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  margin-bottom: 0.875rem;
  font-family: var(--f-titre);
  font-size: clamp(1.125rem, 1rem + 0.6vw, 1.5rem);
  font-stretch: 125%;
  font-weight: 700;
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--blanc);
}

/* La lampe s’aligne sur la première ligne du titre, même s’il se replie. */
.engagement__titre .lampe {
  margin-top: calc(0.55em - 0.156rem);
}

.engagement p {
  max-width: 34rem;
}

.promesse__test {
  max-width: 46rem;
  margin-top: clamp(2.5rem, 2rem + 2vw, 3.5rem);
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  line-height: 1.5;
  color: var(--blanc);
}

.promesse__test .etiquette {
  display: block;
  margin-bottom: 0.75rem;
}

@media (min-width: 52em) {
  .promesse__liste {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-bottom: 1px solid var(--joint);
  }

  .engagement {
    padding: 2rem 2rem 2.25rem 0;
    border-bottom: 0;
  }

  .engagement + .engagement {
    padding-left: 2rem;
    border-left: 1px solid var(--joint);
  }
}


/* 10. Contact ---------------------------------------------------------------- */

.contact__corps {
  display: grid;
  gap: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  max-width: 48rem;
}

.courriel {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: clamp(0.75rem, 0.5rem + 1vw, 1.25rem);
  max-width: 100%;
  padding-block: 0.5rem;
  font-family: var(--f-titre);
  font-size: clamp(1.25rem, 0.55rem + 3.3vw, 3rem);
  font-stretch: 112%;
  font-weight: 700;
  line-height: 1.15;
  color: var(--blanc);
  text-decoration-line: underline;
  text-decoration-color: var(--contour);
  text-decoration-thickness: max(1px, 0.05em);
  text-underline-offset: 0.18em;
  overflow-wrap: anywhere;
  transform-origin: left center;
  transition:
    text-decoration-color 160ms ease,
    transform 160ms var(--ease-out);
}

.courriel .fleche {
  width: 0.7em;
  height: 0.7em;
}

.courriel:active {
  transform: scale(0.98);
}

@media (hover: hover) and (pointer: fine) {
  .courriel:hover {
    text-decoration-color: var(--blanc);
  }

  .courriel:hover .fleche {
    transform: translateX(0.2em);
  }
}


/* 11. Pied de page ----------------------------------------------------------- */

.pied {
  padding-block:
    clamp(3rem, 2rem + 4vw, 5rem)
    calc(clamp(1.5rem, 1rem + 2vw, 2.5rem) + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--joint);
}

.pied__haut {
  display: grid;
  gap: 2.5rem;
}

.pied__marque {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.pied__embleme {
  flex: none;
  width: 2.75rem;
  height: auto;
}

.pied__signature > span {
  display: block;
}

.pied__signature {
  max-width: 22rem;
  text-wrap: balance;
  font-family: var(--f-titre);
  font-size: 0.9375rem;
  font-stretch: 112%;
  font-weight: 600;
  line-height: 1.35;
  text-transform: uppercase;
  color: var(--texte);
}

.pied__nav {
  display: grid;
  gap: 2rem;
}

@media (min-width: 30em) {
  .pied__nav {
    grid-template-columns: repeat(2, max-content);
    column-gap: clamp(2.5rem, 6vw, 5rem);
  }
}

.pied__groupe ul {
  display: grid;
  gap: 0.125rem;
  margin-top: 0.75rem;
  padding: 0;
  list-style: none;
}

.pied__groupe a {
  display: inline-flex;
  align-items: center;
  min-height: 2.25rem;
  padding-block: 0.25rem;
  line-height: 1.35;
  color: var(--texte);
  text-decoration: none;
  transition: color 150ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .pied__groupe a:hover {
    color: var(--blanc);
    text-decoration-line: underline;
  }
}

.pied__bas {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  margin-top: clamp(2.5rem, 2rem + 2vw, 3.5rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--joint);
  font-size: 0.875rem;
  color: var(--etiquette);
}

/* Pied de page réduit (404) : pas de filet en double. */
.pied__bas:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

@media (min-width: 52em) {
  .pied__haut {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    column-gap: 3rem;
  }
}


/* 12. Pages de texte (confidentialité, 404) ---------------------------------- */

.page-texte {
  padding-block: clamp(3rem, 2rem + 5vw, 6rem) var(--section);
}

.page-texte .conteneur {
  max-width: calc(46rem + 2 * var(--gouttiere));
}

.titre-page {
  margin-block: 1rem clamp(1.75rem, 1.25rem + 2vw, 2.75rem);
  font-family: var(--f-titre);
  font-size: clamp(1.625rem, 0.95rem + 3.1vw, 3.25rem);
  font-stretch: 112%;
  font-weight: 800;
  line-height: 1.02;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--blanc);
}

.resume {
  padding: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  line-height: 1.5;
  color: var(--blanc);
}

.texte-legal h2 {
  margin-top: clamp(2.5rem, 2rem + 1.5vw, 3.25rem);
  margin-bottom: 0.875rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--joint);
  font-family: var(--f-titre);
  font-size: clamp(1.125rem, 1rem + 0.6vw, 1.5rem);
  font-stretch: 112%;
  font-weight: 700;
  line-height: 1.15;
  text-transform: uppercase;
  color: var(--blanc);
}

.texte-legal p + p,
.texte-legal p + ul,
.texte-legal ul + p {
  margin-top: 1em;
}

.texte-legal ul {
  padding-left: 1.25rem;
}

.texte-legal li + li {
  margin-top: 0.4em;
}

.texte-legal a,
.page-texte .lien {
  color: var(--blanc);
  text-decoration-color: var(--contour);
  transition: text-decoration-color 160ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .texte-legal a:hover,
  .page-texte .lien:hover {
    text-decoration-color: var(--blanc);
  }
}

.page-texte .retour {
  margin-top: clamp(2.5rem, 2rem + 2vw, 3.5rem);
}

.perdu__en {
  margin-top: clamp(2.5rem, 2rem + 2vw, 3.5rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--joint);
}

.perdu__en p + p {
  margin-top: 0.5rem;
}


/* Retour au toucher : réponse dès que le doigt se pose (:active), sur tous
   les types d'entrée. Remplace le flash gris supprimé plus haut. */
.entete__logo:active {
  opacity: 0.72;
}

.nav__lien:active,
.langue__lien:active,
.pied__groupe a:active {
  color: var(--blanc);
}

.lien-fleche:active,
.courriel:active,
.texte-legal a:active,
.page-texte .lien:active {
  text-decoration-color: var(--blanc);
}

.lien-fleche:active .fleche {
  transform: translateX(0.25rem);
}


/* 13. Mouvement --------------------------------------------------------------
   Une seule séquence orchestrée, à l’arrivée : l’atelier ouvre.
   ┌───────────────────────┬───────────┬────────┬────────┬──────────────────────────┐
   │ Élément               │ Rôle      │ Départ │ Durée  │ Mouvement                │
   ├───────────────────────┼───────────┼────────┼────────┼──────────────────────────┤
   │ Emblème               │ Meneur    │   0 ms │ 800 ms │ dévoilé de bas en haut   │
   │ Bord du rideau        │ Meneur    │   0 ms │ 800 ms │ suit la découpe, s’éteint│
   │ Repères de coupe      │ Décor     │ 200 ms │ 600 ms │ fondu seulement          │
   │ Nom                   │ Soutien   │ 240 ms │ 500 ms │ fondu + 8 px             │
   │ Phrase 1              │ Soutien   │ 320 ms │ 700 ms │ fondu + 0,3 em           │
   │ Phrase 2              │ Soutien   │ 440 ms │ 700 ms │ idem, chevauche la 1     │
   │ Mention studio        │ Soutien   │ 700 ms │ 500 ms │ fondu seulement          │
   │ Lampe                 │ Décor     │ 950 ms │ 450 ms │ s’allume (opacité)       │
   └───────────────────────┴───────────┴────────┴────────┴──────────────────────────┘
   Le logo n’est jamais modifié : seule la découpe qui le dévoile bouge.
   Rien ne bloque la page : l’en-tête et la navigation sont là dès le départ.
   La séquence ne joue qu’en arrivant de l’extérieur du site : en changeant de
   langue ou en revenant à l’accueil, langue.js pose .sans-entree sur <html>. */

@media (prefers-reduced-motion: no-preference) {
  :root:not(.sans-entree) .heros__embleme img {
    animation: rideau 800ms var(--ease-drawer) both;
  }

  :root:not(.sans-entree) .heros__embleme::after {
    content: "";
    position: absolute;
    inset: 0 -14%;
    border-top: 1px solid var(--contour);
    opacity: 0;
    pointer-events: none;
    animation: rideau-bord 800ms var(--ease-drawer) both;
  }

  :root:not(.sans-entree) .reperes {
    animation: fondu 600ms ease 200ms both;
  }

  :root:not(.sans-entree) .heros__nom {
    animation: monter 500ms var(--ease-out) 240ms both;
  }

  :root:not(.sans-entree) .heros__ligne > span {
    animation: surgir 700ms var(--ease-out) 320ms both;
  }

  :root:not(.sans-entree) .heros__ligne + .heros__ligne > span {
    animation-delay: 440ms;
  }

  :root:not(.sans-entree) .heros__meta-texte {
    animation: fondu 500ms ease 700ms both;
  }

  :root:not(.sans-entree) .heros__meta .lampe {
    animation: allumage 450ms linear 950ms both;
  }
}

/* Mouvement réduit : la séquence se replie en un seul fondu, sans déplacement. */
@media (prefers-reduced-motion: reduce) {
  :root:not(.sans-entree) .heros__embleme img,
  :root:not(.sans-entree) .heros__nom,
  :root:not(.sans-entree) .heros__ligne > span,
  :root:not(.sans-entree) .heros__meta,
  :root:not(.sans-entree) .reperes {
    animation: fondu 400ms ease both;
  }
}

@keyframes rideau {
  from {
    clip-path: inset(100% 0 0 0);
  }

  to {
    clip-path: inset(0 0 0 0);
  }
}

@keyframes rideau-bord {
  0% {
    transform: translateY(100%);
    opacity: 0;
  }

  6%,
  82% {
    opacity: 1;
  }

  100% {
    transform: translateY(0);
    opacity: 0;
  }
}

@keyframes monter {
  from {
    opacity: 0;
    transform: translateY(0.5rem);
  }
}

@keyframes surgir {
  from {
    opacity: 0;
    transform: translateY(0.3em);
  }
}

@keyframes fondu {
  from {
    opacity: 0;
  }
}

@keyframes allumage {
  0% {
    opacity: 0;
  }

  14% {
    opacity: 1;
  }

  26% {
    opacity: 0.15;
  }

  40%,
  100% {
    opacity: 1;
  }
}

/* Apparition au défilement (main.js) : une seule fois, seulement pour ce qui
   est sous la ligne de flottaison au chargement. Le titre monte plus que le
   reste ; les blocs qui arrivent ensemble se décalent de 90, 70, 50 ms. */
.apparition--attente {
  opacity: 0;
  transform: translateY(1rem);
  transition:
    opacity 500ms var(--ease-out),
    transform 600ms var(--ease-out);
}

.apparition--attente[data-apparition="titre"] {
  transform: translateY(1.5rem);
  transition-duration: 600ms, 700ms;
}

.apparition--attente.apparition--visible {
  opacity: 1;
  transform: none;
}

/* Le cadre des fiches change de couleur au survol (section 8) ; cette
   transition s’ajoute à celle de l’apparition au lieu de l’écraser. */
.fiche[data-jeu] {
  transition: background-color 200ms ease;
}

.fiche[data-jeu].apparition--attente {
  transition:
    opacity 500ms var(--ease-out),
    transform 600ms var(--ease-out),
    background-color 200ms ease;
}

/* La couleur du jeu s’allume quand sa fiche entre à l’écran, une seule fois,
   comme une lampe de l’atelier (main.js pose .fiche--eteinte, puis
   .fiche--allumee). Le liseré se trace de gauche à droite, le schéma prend
   sa couleur, puis le voyant s’allume. Sans JavaScript, en mouvement réduit
   ou en navigation interne, la couleur est là d’emblée.
   ┌──────────────┬────────┬────────┬──────────────────────────────┐
   │ Élément      │ Départ │ Durée  │ Mouvement                    │
   ├──────────────┼────────┼────────┼──────────────────────────────┤
   │ Liseré       │   0 ms │ 600 ms │ tracé gauche → droite        │
   │ Schéma       │ 380 ms │ 400 ms │ fondu de la couleur          │
   │ Voyant       │ 560 ms │ 450 ms │ s’allume (même que le héros) │
   └──────────────┴────────┴────────┴──────────────────────────────┘
   Le liseré prend la courbe du rideau de l’emblème (--ease-drawer) : les deux
   sont des balayages qui révèlent, et la pointe atteint le chanfrein sans
   ramper. Le voyant reprend exactement la durée de la lampe du héros. */
@media (prefers-reduced-motion: no-preference) {
  .fiche--eteinte::after,
  .fiche--eteinte .schema-couleur,
  .fiche--eteinte .lampe {
    opacity: 0;
  }

  .fiche--allumee::after {
    animation: lisere 600ms var(--ease-drawer) both;
  }

  .fiche--allumee .schema-couleur {
    animation: fondu 400ms var(--ease-out) 380ms both;
  }

  .fiche--allumee .lampe {
    animation: allumage 450ms linear 560ms both;
  }
}

@keyframes lisere {
  from {
    clip-path: polygon(0 0, 0 0, 0 0, 0 2px, 0 2px, 0 2px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .apparition--attente,
  .apparition--attente[data-apparition="titre"] {
    transform: none;
    transition: opacity 300ms ease;
    transition-delay: 0s !important;
  }

  .fiche[data-jeu].apparition--attente {
    transition: opacity 300ms ease, background-color 200ms ease;
  }

  .fleche,
  .nav__lien::after,
  .courriel {
    transition: none;
  }

  .courriel:active,
  .lien-fleche:active .fleche {
    transform: none;
  }
}


/* 14. Préférences d’affichage ------------------------------------------------ */

@media (prefers-contrast: more) {
  :root {
    --joint: #4a4f58;
    --repere: #6b717c;
    --contour: #a3a9b3;
    --etiquette: #b4b9c2;
    --texte: #e3e6ea;
  }

  body,
  .entete {
    background-image: none;
  }

  .heros__tole {
    display: none;
  }
}

/* Couleurs forcées (Windows) : les bords dessinés par des fonds disparaissent,
   on les remplace par de vraies bordures système. */
@media (forced-colors: active) {
  .plaque {
    border: 1px solid CanvasText;
    clip-path: none;
  }

  .plaque::before,
  .fiche__visuel,
  .heros__tole,
  .reperes {
    clip-path: none;
  }

  .lampe,
  .langue__lien[aria-current]::before,
  .fiche__garanties li::before {
    forced-color-adjust: none;
    background: CanvasText;
  }
}

/* Thème de contraste clair : le logo blanc disparaîtrait sur le fond système.
   On affiche alors les versions charbon officielles. */
@media (forced-colors: active) and (prefers-color-scheme: light) {
  .entete__logo img {
    content: url("../assets/logo/piton-games-horizontal-noir.svg");
  }

  .heros__embleme img,
  .pied__embleme {
    content: url("../assets/logo/piton-games-embleme-noir.svg");
  }
}


/* 15. Impression ------------------------------------------------------------- */

@media print {
  :root {
    --blanc: #000;
    --texte: #000;
    --etiquette: #333;
    --joint: #999;
  }

  body {
    background: #fff;
    color: #000;
  }

  .entete {
    position: static;
    background: none;
  }

  .entete__logo img {
    content: url("../assets/logo/piton-games-horizontal-noir.svg");
  }

  .heros__embleme img,
  .pied__embleme {
    content: url("../assets/logo/piton-games-embleme-noir.svg");
  }

  .nav,
  .langue,
  .heros__tole,
  .reperes,
  .lien-evitement,
  .fiche__visuel {
    display: none;
  }

  .apparition--attente {
    opacity: 1 !important;
    transform: none !important;
  }

  .plaque {
    background: none;
    border: 1px solid #999;
    clip-path: none;
  }

  .plaque::before {
    display: none;
  }

  .heros__inner {
    min-height: 0;
  }

  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.85em;
  }
}