/* ============================================================================
   amorce.css, la charte du hub recopiee pour un outil qui se deploie seul.

   Les valeurs viennent de commun/tokens.css du hub et sont RECOPIEES ici, comme
   l'ont fait les autres outils : le dossier de l'outil doit tenir tout seul, y
   compris hors du hub, et n'a rien a aller chercher un cran plus haut.

   Le SOMBRE est le defaut, ici comme au hub, et TOUT bascule avec le theme, y
   compris le sol des scenes 3D. Le jeton --scene porte la couleur sur laquelle le
   fondu du sol s'eteint : elle doit s'accorder au sol rendu par la scene, sinon
   la plaque se cerne d'un liseré. Voir AMBIANCES dans src/scene.js, qui tient
   l'autre moitie du reglage.
   ========================================================================== */

@font-face { font-family:"Archivo"; src:url("../vendor/fonts/Archivo-var.woff2") format("woff2");
             font-weight:100 900; font-style:normal; font-display:swap; }
@font-face { font-family:"IBM Plex Mono"; src:url("../vendor/fonts/IBMPlexMono-400.woff2") format("woff2");
             font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"IBM Plex Mono"; src:url("../vendor/fonts/IBMPlexMono-500.woff2") format("woff2");
             font-weight:500; font-style:normal; font-display:swap; }

:root {
  color-scheme: dark;
  --acc:#2f3aa6;          /* l'encre bleue riso */
  --acc-hi:#8a93e6;       /* la meme, eclaircie : lisible en petit corps sur sombre */
  --desk:#161511;         /* la table */
  --paper:#1e1d18;        /* les panneaux */
  --ink:#e6e1d3;
  --mut:#948d7b;
  --faint:#5f5a4c;
  --hair:#24231d;         /* le quadrillage, les filets de separation */
  --mid:#45423a;
  --shadow-soft:rgba(0,0,0,.38);
  --pied:#0f0e0b;         /* le pied, un cran sous la table */
  --scene:#1e1d18;        /* le fond des plaques 3D, sous le fondu du sol */
  --shadow-deep:rgba(0,0,0,.8);
  --font:"Archivo", "Helvetica Neue", sans-serif;
  --mono:"IBM Plex Mono", "SF Mono", monospace;
  --grid:linear-gradient(var(--hair) 1px, transparent 1px),
         linear-gradient(90deg, var(--hair) 1px, transparent 1px);
}

html[data-theme="clair"] {
  color-scheme: light;
  --acc:#e8500a;          /* le minium */
  --acc-hi:#e8500a;
  --desk:#f6f4ee;
  --paper:#fcfbf7;
  --ink:#26241f;
  --mut:#8d8779;
  --faint:#c4beae;
  --hair:#ddd8ca;
  --mid:#b9b3a3;
  --shadow-soft:rgba(38,36,31,.08);
  --pied:#fcfbf7;
  --scene:#949288;      /* le sol clair rendu, la ou son fondu s'eteint */
  --shadow-deep:rgba(38,36,31,.55);
}

/* --- Socle ---------------------------------------------------------------- */

* { margin:0; padding:0; box-sizing:border-box; }
body {
  font-family:var(--font); font-size:15px; line-height:1.55;
  color:var(--ink); background:var(--desk);
  -webkit-font-smoothing:antialiased;
}

/* Le quadrillage de la table, au pas de 28 px du site vitrine (charte, §4). Il
   court sur les pages editoriales comme chez le hub, et NULLE PART derriere une
   scene 3D : le sol de la scene se fond sur ses bords, la trame se voyait donc
   au travers et se battait avec les reliefs. Deux trames sur le meme pixel, et
   le volume ne se detache plus de rien. */
body.page { background-image:var(--grid); background-size:28px 28px; }
a { color:inherit; }
svg { display:block; }
[hidden] { display:none !important; }

/* La voix des cotes (charte, §3). Tout ce qui mesure, nomme un etat ou numerote
   passe en mono capitales espacees. */
.cote { font-family:var(--mono); font-size:10.5px; font-weight:500; letter-spacing:.14em;
        text-transform:uppercase; color:var(--mut); }

/* Ce qui n'est la que pour les lecteurs d'ecran. */
.hors-ecran {
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap;
}

/* --- Le bandeau ----------------------------------------------------------- */
/* Aux cotes du hub : 48 px, filet du bas a l'encre, mot-marque en capitales
   espacees precede de la croix de repere. */

.bandeau {
  position:relative; z-index:3;
  display:flex; align-items:center; gap:22px; height:48px; padding:0 22px;
  background:var(--paper); border-bottom:1px solid var(--ink);
}
.marque { font-size:13px; font-weight:800; letter-spacing:.24em; text-transform:uppercase; }
/* Le mot-marque ramene a l'accueil de l'outil depuis toutes les pages internes.
   Sur l'accueil il n'est pas un lien : une page ne se lie pas a elle-meme, et
   c'est aussi ce que fait Maquettes de territoire. Le survol prend l'accent sans
   souligner : le filet du bandeau est deja le seul trait de cette zone. */
.marque a { color:inherit; text-decoration:none; transition:color .12s; }
.marque a:hover { color:var(--acc-hi); }
.marque a:focus-visible { outline:1px solid var(--acc-hi); outline-offset:4px; }
.marque::before { content:"+"; font-family:var(--mono); font-weight:400; color:var(--acc-hi);
                  margin-right:10px; }
.sorties { display:flex; align-items:center; gap:11px; margin-left:auto; }
.appartenance { font-family:var(--mono); font-size:10px; letter-spacing:.12em;
                text-transform:uppercase; color:var(--mut); text-decoration:none;
                transition:color .12s; }
.appartenance:hover { color:var(--acc-hi); text-decoration:underline; }
.appartenance:focus-visible { outline:1px solid var(--acc-hi); outline-offset:3px; }
.appartenance.sortant::after { content:" ↗"; color:var(--faint); }

/* La bascule de theme, aux cotes de celle du hub et des autres outils. Elle est
   sur les pages editoriales et PAS sur le plateau : celui-ci ne porte que Tirer,
   Couleurs et le regard, et le theme n'y change de toute facon que le bandeau,
   la scene restant sombre dans les deux. */
.theme-toggle { font-family:var(--mono); font-size:10px; letter-spacing:.12em;
                text-transform:uppercase; color:var(--mut); background:transparent;
                border:1px solid var(--mid); border-radius:0; padding:4px 9px; cursor:pointer;
                transition:color .12s, border-color .12s; }
.theme-toggle::before { content:"◐ "; color:var(--acc-hi); }
.theme-toggle:hover { color:var(--acc-hi); border-color:var(--acc-hi); }
.theme-toggle:focus-visible { outline:1px solid var(--acc-hi); outline-offset:2px; }

/* --- Les boutons ---------------------------------------------------------- */
/* Cadre encre, coins vifs, etiquette mono. Le cadre est trace en outline
   rentrant et non en border : mesure au pixel, une bordure d'un pixel sur une
   boite posee entre deux pixels ecran rend son bord du bas deux fois plus pale
   que le haut. Le contour, lui, est cale sur la grille des pixels. */

.btn {
  font-family:var(--mono); font-size:10.5px; line-height:14px; letter-spacing:.08em;
  text-transform:uppercase; padding:9px 12px;
  border:1px solid transparent; border-radius:0; background:var(--paper);
  outline:1px solid var(--ink); outline-offset:-1px;
  color:var(--ink); cursor:pointer; text-decoration:none; display:inline-block;
  transition:box-shadow .1s, background .1s, color .1s, opacity .12s;
}
.btn:hover { box-shadow:inset 0 0 0 1px var(--ink); }
.btn:active { transform:translate(1px,1px); }
.btn:focus-visible { outline:1px solid var(--acc-hi); outline-offset:3px; }
.btn:disabled { opacity:.32; cursor:default; }
.btn:disabled:hover { box-shadow:none; }
.btn.cta { background:var(--acc); outline-color:var(--acc); color:#fff; font-weight:600; }
.btn.cta:hover { box-shadow:inset 0 0 0 1px rgba(255,255,255,.45); }
/* Le bouton enfonce : l'ENCRE PLEINE, texte papier (charte, §6). C'etait un
   contour d'accent ici, invente pour eviter deux blocs bleus cote a cote avec
   Tirer ; la charte resout le meme probleme sans inventer, puisque l'aplat
   d'accent reste reserve a l'action qui fait avancer et que l'etat presse, lui,
   prend l'encre. */
.btn[aria-pressed="true"] { background:var(--ink); outline-color:var(--ink); color:var(--paper); }
.btn[aria-pressed="true"]:hover { box-shadow:inset 0 0 0 1px var(--paper); }

/* Les fleches du regard. Un caractere, pas un dessin : il lui faut juste un corps
   un peu plus grand que l'etiquette mono pour se lire, et une largeur fixe pour
   que les deux boutons soient jumeaux au pixel. */
.btn.fleche { font-size:13px; line-height:14px; padding:9px 0; width:34px; text-align:center; }

/* --- La page de jeu ------------------------------------------------------- */

body.jeu {
  height:100dvh; overflow:hidden;
  display:grid; grid-template-rows:48px 1fr;
}
body.jeu main { position:relative; min-height:0; }
/* Les deux croix de calage aux coins opposes de la zone de travail (charte, §5).
   C'est le repere d'un plan, et c'est le meme signe que celui qui precede le
   mot-marque : les pages de l'outil se raccordent par la. L'atelier de Maquettes
   de territoire porte les memes. */
body.jeu main::before, body.jeu main::after {
  content:"+"; position:absolute; z-index:2; pointer-events:none;
  font-family:var(--mono); font-size:14px; color:var(--acc-hi);
}
body.jeu main::before { top:8px; left:12px; }
body.jeu main::after { bottom:8px; right:12px; }
body.jeu canvas {
  display:block; width:100%; height:100%;
  touch-action:none;            /* le doigt glisse une piece, il ne fait pas defiler la page */
  -webkit-tap-highlight-color:transparent;
}

/* La barre, posee sur la scene et non sous elle : la scene occupe tout, et les
   trois commandes flottent au-dessus, a portee de pouce sur tablette. */
.barre {
  position:fixed; z-index:4;
  left:50%; transform:translateX(-50%);
  bottom:calc(18px + env(safe-area-inset-bottom));
  display:flex; align-items:center; gap:8px;
  padding:8px; background:var(--paper);
  outline:1px solid var(--ink); outline-offset:-1px;
  /* La seule ombre floue autorisee sur un element d'interface : celle d'un
     panneau qui passe au-dessus (charte, §5). L'ombre courte et proche qui
     etait la n'existe pas dans la maison. */
  box-shadow:0 26px 50px -28px var(--shadow-deep);
}
.regard { display:flex; gap:4px; margin-left:4px; padding-left:10px; border-left:1px solid var(--mid); }

/* Le rejet d'une piece se fait a la trappe, dans la scene, et pas par un bouton.
   Ces deux-ci ne sortent QUE sous le focus clavier : un glisser-deposer n'a pas
   d'equivalent au clavier, et il fallait bien laisser une porte. Ils sont dans
   le flux et donc tabulables, mais invisibles et inertes le reste du temps. */
.relance {
  position:fixed; z-index:4; top:0; left:0;
  transform:translate(-50%,-50%);
  font-family:var(--mono); font-size:10px; line-height:14px; letter-spacing:.1em;
  text-transform:uppercase; padding:7px 10px;
  background:var(--paper); border:1px solid transparent;
  outline:1px solid var(--ink); outline-offset:-1px;
  color:var(--ink); cursor:pointer;
  opacity:0; pointer-events:none;
  transition:opacity .13s ease-out, box-shadow .1s;
}
.relance.visible { opacity:1; pointer-events:auto; }
.relance:hover { box-shadow:inset 0 0 0 1px var(--ink); }
.relance:focus-visible { opacity:1; pointer-events:auto; outline:1px solid var(--acc-hi); outline-offset:2px; }
.relance:disabled { opacity:0; pointer-events:none; }

.alerte {
  position:fixed; z-index:5; left:50%; transform:translateX(-50%);
  bottom:calc(74px + env(safe-area-inset-bottom));
  font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink); background:var(--paper); padding:8px 12px;
  outline:1px solid var(--acc-hi); outline-offset:-1px;
}

/* --- Les pages editoriales : accueil et collection ------------------------- */
/* Les cotes viennent du hub (commun/base.css) : une colonne de 1120 px, des
   sections aerees de 56 px, un texte suivi tenu a 62 caracteres. Un outil qui se
   deploie seul recopie la charte plutot que d'aller la chercher un cran plus
   haut, comme les autres outils du hub le font. */

body.page { min-height:100dvh; display:flex; flex-direction:column; }
body.page > footer { margin-top:auto; }

.contenu { width:100%; max-width:1120px; margin:0 auto; padding:0 26px; }
.section { padding:52px 0; }
.section p { max-width:62ch; line-height:1.65; margin:0 0 16px; }
.section p:last-child { margin-bottom:0; }
.appui { color:var(--ink); font-weight:600; }

/* Le titre de section, sa cote au-dessus. Pas de filet : le vide et la cote
   separent assez, un trait de plus ne separerait rien. */
.titre-sec { margin:0 0 26px; }
.titre-sec .num { display:block; font-family:var(--mono); font-size:10.5px; font-weight:500;
                  letter-spacing:.2em; text-transform:uppercase; color:var(--mut); margin-bottom:8px; }
.titre-sec h2 { font-size:24px; font-weight:800; letter-spacing:.04em;
                text-transform:uppercase; margin:0; line-height:1.2; }

.duo { display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:34px; }
.chapo { max-width:62ch; font-size:17px; line-height:1.6; color:var(--mut); margin:0 0 18px; }
.actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; }

/* Le chapeau de la page de collection : un titre de page, pas un heros. */
.ouverture-page { padding-top:44px; }
.ouverture-page .cote { font-family:var(--mono); font-size:10.5px; font-weight:500;
                        letter-spacing:.2em; text-transform:uppercase; color:var(--mut); margin:0 0 10px; }
.ouverture-page h1 { max-width:16em; font-size:clamp(26px, 3.2vw, 38px); font-weight:800;
                     line-height:1.14; letter-spacing:.005em; margin:0 0 22px; text-wrap:balance; }

.alerte-page {
  margin-top:18px; max-width:62ch;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink); background:var(--paper); padding:9px 12px;
  outline:1px solid var(--acc-hi); outline-offset:-1px;
}

/* --- Le heros de l'accueil ------------------------------------------------- */
/* Une phrase, deux boutons, et la scene elle-meme qui tourne a cote. Pas de
   capture d'ecran : ce qu'on voit est ce qu'on va manipuler. */

/* La colonne du texte est la plus large des deux, et le visuel est un CARRE qui
   suit la largeur de sa colonne, comme le heros de Maquettes de territoire. Un
   carre parce que la scene est cadree sur un carre de jeu : dans une plaque plus
   large que haute, la moitie de la surface ne montrait rien. La rangee n'est plus
   etiree a une hauteur imposee, c'est le carre qui la donne. */
.ouverture {
  display:grid; grid-template-columns:minmax(0, 1.05fr) minmax(0, .95fr);
  align-items:center; gap:44px; padding:34px 26px 40px;
  width:100%; max-width:1120px; margin:0 auto;
}
.mot { display:grid; justify-items:start; gap:8px; }
/* La mesure est portee par le TITRE et comptee en em, donc dans son corps a lui.
   Posee sur le bloc, en ch, elle se calculait sur le corps du bloc (15 px) et
   donnait une colonne deux fois trop etroite : la phrase tombait en six lignes
   dont la premiere ne portait qu'un mot. En em, elle suit le clamp ci-dessous
   sans avoir a etre reprise. 11,5 em fait trois lignes pleines. */
.mot h1 {
  max-width:11.5em;
  font-size:clamp(26px, 2.6vw, 34px); font-weight:800; line-height:1.16;
  letter-spacing:.005em; text-wrap:balance;
}

/* La vitrine est une carte, en grand : la meme plaque sombre a filet fin que les
   vignettes de la collection. C'est ce qui la raccorde au reste de la page, ou
   le quadrillage de la table court partout ailleurs. Le sol de la scene se fond
   donc sur cette plaque et non sur la page, et la trame passe DERRIERE le cadre
   au lieu d'etre masquee par une bande de couleur.

   C'est un BOUTON : un clic retire la paire, comme sur la carte du hub. Il n'a
   rien d'un bouton a l'oeil, sinon le filet qui passe a l'encre au survol, comme
   une carte de la collection : la plaque elle-meme est l'invitation, et la
   legende en dessous le dit en cote. */
.vitrine-bloc { display:grid; gap:10px; }
.vitrine {
  display:block; width:100%; padding:0; border:0; font:inherit; color:inherit;
  position:relative; aspect-ratio:1;
  /* Le fond suit le theme, comme le sol de la scene qu'il prolonge : c'est sur
     lui que le fondu du sol s'eteint, les deux valeurs doivent donc s'accorder. */
  background:var(--scene);
  outline:1px solid var(--mid); outline-offset:-1px;
  cursor:pointer; transition:outline-color .12s;
  -webkit-tap-highlight-color:transparent;
}
.vitrine:hover:not(:disabled) { outline-color:var(--ink); }
.vitrine:focus-visible { outline-color:var(--acc-hi); }
.vitrine:disabled { cursor:default; }
.vitrine canvas {
  position:absolute; inset:0; width:100%; height:100%;
  pointer-events:none;   /* c'est le bouton qui recoit le clic, pas la toile */
}
.legende { margin:0; }

/* --- Le tirage continu, sur l'accueil ---------------------------------------- */
/* La meme plaque que la vitrine, en large : elle prend la colonne entiere. Sa
   hauteur vient de son rapport, et le sol de la scene est etire pour la remplir
   (voir src/infini.js). Sur un ecran etroit elle se redresse, sinon elle ne
   ferait qu'une bande ou rien ne tiendrait. */
.infini {
  position:relative; aspect-ratio:12 / 5; margin:0 0 34px;
  background:var(--scene);
  outline:1px solid var(--mid); outline-offset:-1px;
}
.infini canvas { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }

/* --- La phrase, en grand -------------------------------------------------------- */
/* Le titre de la section 02 n'est pas un titre, c'est le principe de l'outil en
   une phrase : elle prend le corps et la casse du heros, pas les capitales
   espacees des titres de section. */
.titre-sec h2.phrase {
  text-transform:none; letter-spacing:.005em;
  font-size:clamp(26px, 3.2vw, 40px); line-height:1.14;
  max-width:17em; text-wrap:balance;
}

/* --- Le geste et ce qui en sort, cote a cote ------------------------------------ */
/* Deux sections legeres sur un seul rang, chacune avec sa cote et son titre. */
.jumelles { display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:start; }

/* Le fil, en quatre temps : une liste verticale dans le panneau a fond de papier
   de Maquettes de territoire, le numero en accent dans sa colonne, un filet
   entre les pas. C'est la seule texture de la page qui ne soit ni de la prose ni
   une scene. */
.fil {
  list-style:none; margin:0; padding:6px 22px;
  background:var(--paper); outline:1px solid var(--mid); outline-offset:-1px;
}
.fil li { display:grid; grid-template-columns:34px 1fr; gap:0 8px; padding:15px 0;
          border-top:1px solid var(--hair); }
.fil li:first-child { border-top:0; }
.fil .num { font-family:var(--mono); font-size:10.5px; font-weight:500; letter-spacing:.14em;
            text-transform:uppercase; color:var(--acc-hi); padding-top:2px; }
.fil h3 { font-size:15px; font-weight:700; margin:0 0 4px; }
.section .fil p { font-size:13px; line-height:1.55; color:var(--mut); margin:0; max-width:none; }

/* --- La page des licences --------------------------------------------------- */

/* Le nom de la licence porte son code en cote, comme une valeur mesuree porte
   son unite, et la mention de l'autorisation qui l'accompagne : les deux ne se
   lisent bien qu'ensemble, la licence seule dirait moins que la verite. */
.licence-titre { font-size:17px; font-weight:600; color:var(--ink); margin:0 0 24px;
                 max-width:none; line-height:1.35; }
.licence-titre .cote { font-family:var(--mono); font-size:10.5px; font-weight:500;
                       letter-spacing:.14em; text-transform:uppercase; color:var(--acc-hi);
                       margin-left:8px; white-space:nowrap; }
.licence-titre .licence-plus { display:block; font-size:13.5px; font-weight:400; color:var(--mut);
                               margin-top:4px; }

/* Le verdict d'une colonne : ce qu'on peut, ce qu'on ne peut pas. Le signe est un
   caractere, pas un dessin, et il porte la seule couleur de la page. */
.verdict { font-family:var(--mono); font-size:10.5px; font-weight:500; letter-spacing:.14em;
           text-transform:uppercase; color:var(--mut); margin:0 0 10px; }
.verdict::before { margin-right:8px; color:var(--acc-hi); }
.verdict.oui::before { content:"✓"; }
.verdict.non::before { content:"×"; }

.liste { max-width:62ch; margin:0 0 16px; padding-left:18px; line-height:1.65; }
.liste li { margin-bottom:4px; }

/* L'autorisation supplementaire est la clause qui compte le plus, et la seule
   qui ne se devine pas depuis le nom de la licence : elle est encadree. */
.encadre {
  max-width:62ch; margin:0 0 22px; padding:14px 16px; line-height:1.65;
  background:var(--paper); outline:1px solid var(--mid); outline-offset:-1px;
}

/* La formule d'attribution, donnee a copier : c'est une valeur, donc du mono
   dans un cadre, et non une phrase du texte courant. */
.formule {
  font-family:var(--mono); font-size:11.5px; line-height:1.7; color:var(--ink);
  background:var(--paper); padding:10px 12px; margin:0 0 16px;
  outline:1px solid var(--mid); outline-offset:-1px;
  overflow-wrap:anywhere; user-select:all;
}

/* Les fiches : un terme, sa definition. Le terme prend la voix des cotes. */
.fiches { margin:0 0 16px; }
.fiches dt { font-family:var(--mono); font-size:10px; font-weight:500; letter-spacing:.12em;
             text-transform:uppercase; color:var(--mut); margin-top:14px; }
.fiches dt:first-child { margin-top:0; }
.fiches dd { margin:4px 0 0; max-width:62ch; line-height:1.6; }
.fiches a { color:inherit; text-decoration:none; border-bottom:1px solid var(--mid); }
.fiches a:hover { color:var(--acc-hi); border-bottom-color:var(--acc-hi); }

/* Les liens au fil du texte suivi : filet sous le mot, accent au survol, comme
   au pied de page et chez le hub. */
.section p a { color:inherit; text-decoration:none; border-bottom:1px solid var(--mid); }
.section p a:hover { color:var(--acc-hi); border-bottom-color:var(--acc-hi); }

/* --- Le pied ---------------------------------------------------------------- */
/* Le moule de celui de Maquettes de territoire : deux lignes sur un seul rang,
   le nom a gauche et les mots en cote a droite, puis les sorties sous un filet.
   Trois lignes en tout. La version d'avant empilait quatre blocs et prenait la
   hauteur d'une section pour dire moins.

   Ce qui n'y est PAS : la licence. Un pied de page n'est pas l'endroit ou l'on
   apprend ce qu'on a le droit de faire, c'est l'endroit ou l'on trouve le lien
   qui le dit. */

body.page > footer { margin-top:72px; background:var(--pied); color:var(--mut);
                     border-top:1px solid var(--mid); }
.pied { max-width:1120px; margin:0 auto; padding:34px 26px; display:flex;
        justify-content:space-between; align-items:baseline; gap:18px; flex-wrap:wrap; }
.pied p { margin:0; }
.pied b { color:var(--ink); font-weight:700; }
.pied a { color:var(--ink); text-decoration:underline; text-underline-offset:3px; }
.pied a:hover { color:var(--acc-hi); }
.pied .cote { color:var(--faint); }
.pied .credits { flex:1 0 100%; order:9; font-size:11px; line-height:1.7;
                 border-top:1px solid var(--mid); padding-top:16px; margin-top:8px; }

/* --- Les cartes de la collection ------------------------------------------- */
/* Une carte par piece : la vue isometrique, le nom, le fichier. Rien d'autre, et
   surtout aucun moyen d'envoyer la piece sur le plateau : la collection se
   regarde et se telecharge, elle ne se choisit pas. */

.grille-pieces {
  display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:18px;
}
.carte {
  background:var(--paper); outline:1px solid var(--mid); outline-offset:-1px;
  display:flex; flex-direction:column;
  transition:outline-color .12s;
}
.carte:hover { outline-color:var(--ink); }
/* Le fond de la vignette est celui du sol de la scene, pour que le canvas et sa
   carte ne fassent qu'un tant que l'image n'est pas peinte. */
.vignette {
  display:block; width:100%; height:auto; aspect-ratio:420 / 340;
  /* Le meme fond que la scene, et il suit le theme comme elle : c'est sur lui
     que le fondu du sol de la vignette s'eteint. */
  background:var(--scene);
  opacity:0; transition:opacity .25s ease-out;
}
.carte.peinte .vignette { opacity:1; }
/* Sans WebGL, la carte garde ce qu'elle a d'essentiel : le nom et le fichier. */
.carte.sans-vue .vignette { display:none; }

.carte-pied {
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:11px 12px; border-top:1px solid var(--hair);
}
.carte-pied .cote { font-family:var(--mono); font-size:10.5px; font-weight:500;
                    letter-spacing:.14em; text-transform:uppercase; color:var(--mut); margin:0; }
.carte-pied .btn { padding:6px 9px; font-size:9.5px; }

/* --- Petits ecrans -------------------------------------------------------- */

/* En dessous de deux colonnes, le plateau passe au-dessus de la phrase : c'est lui
   qui dit de quoi il s'agit, la phrase ne fait que le nommer. */
@media (max-width:880px) {
  /* La vitrine prend une part fixe de la hauteur au lieu de tout le reste : sans
     plafond, la scene flottait au milieu d'une colonne trop grande et la phrase
     se retrouvait rejetee en bas de page. */
  .ouverture { grid-template-columns:1fr; align-content:center;
               gap:26px; padding:20px 22px 30px; }
  .vitrine-bloc { order:-1; max-width:420px; width:100%; justify-self:center; }
  .legende { text-align:center; }
  .mot { justify-self:center; justify-items:center; text-align:center; gap:6px; }
  .mot .actions { justify-content:center; }
  .section { padding:40px 0; }
  .duo { gap:22px; }
  .infini { aspect-ratio:4 / 3; }
  .jumelles { grid-template-columns:1fr; gap:40px; }
}

@media (max-width:560px) {
  .bandeau { padding:0 16px; gap:14px; }
  .appartenance.sortant { display:none; }   /* la sortie lointaine cede la place a la proche */
  .barre { gap:6px; padding:7px; bottom:calc(12px + env(safe-area-inset-bottom)); }
  .regard { margin-left:2px; padding-left:7px; }
}

/* --- Mouvement reduit ----------------------------------------------------- */
/* Les chutes et les aspirations sont remplacees par des fondus dans le code de
   la scene. Ici, il ne reste que les transitions de l'interface. */

@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after {
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}