/* La rangée des cinq jeux — et les icônes qui vont avec.
 *
 * Chargée par les DEUX familles de feuilles : « grand-tour » pour l'accueil du
 * site, « theme » pour les pages de jeu quand l'application les embarque. Elle
 * ne peut donc écrire que des jetons que les deux palettes déclarent —
 * --color-text, --color-bg, --color-surface, --color-accent, --color-accent-2,
 * --color-accent-2-200, --rule, --font-body, --space-*. Un jeton absent d'une
 * famille ne donne pas une valeur par défaut : il jette la déclaration.
 *
 * Un seul état : collée en haut, partout — site et application, accueil et
 * pages de jeu. C'est la navigation du produit, elle ne se mérite pas au
 * défilement. Elle vit en dernier enfant de « body » : un ancêtre qui promet
 * une transformation deviendrait le référent de son « position: fixed ».
 *
 * Le rembourrage qu'elle réclame sous elle n'est PAS écrit ici — « portes.js »
 * mesure sa hauteur, la pose en style direct sur le corps, et la publie en
 * jeton « --portes-h » pour les feuilles qui doivent compter avec elle.
 */

.portes {
  position: fixed; top: 0; left: 0; right: 0; z-index: 900;
  display: flex; gap: 1px;
  border-bottom: var(--rule);
  /* Un fond à elle, plus clair que le papier de la page : une barre de
     navigation doit se distinguer de ce qu'elle surplombe, sans quoi elle
     flotte au-dessus du contenu sans qu'on sache où elle commence. Les deux
     familles déclarent ce jeton. */
  background: var(--color-surface);
  /* Le haut d'un téléphone appartient au système : encoche, barre d'état. */
  padding: calc(var(--space-3) + env(safe-area-inset-top, 0px)) var(--space-2) var(--space-3);
  /* Le filet traverse toute la largeur — c'est lui qui pose la barre —, mais
     les cinq portes se regroupent au centre : étalées sur un écran large,
     elles devenaient cinq pastilles perdues dans autant de champs vides. */
  padding-inline: max(var(--space-2), calc((100% - 700px) / 2));
}
.portes a {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  text-decoration: none; color: var(--color-text);
  /* Pas un pixel de retrait latéral : à six colonnes sur un écran de 320,
     « GiroGuessr » — le plus long des six — déborde de deux pixels avec, et
     tient tout juste sans. Mesuré. */
  padding: 6px 0; border-radius: 12px;
}
.portes .pict { display: block; width: clamp(34px, 11vw, 46px); height: auto; }
.portes span {
  font-family: var(--font-body); font-weight: 700;
  /* Le plancher est taillé sur le plus long des cinq noms — « GiroGuessr » —
     à la largeur la plus étroite qu'on serve, 320 pixels, une fois le bouton
     d'accueil servi. Les écarts et les marges ont été resserrés du même coup :
     le bouton coûte une trentaine de pixels, et « GiroGuessr » les réclamait. */
  font-size: clamp(9px, 2.65vw, 12px); letter-spacing: 0;
  line-height: 1.15; text-align: center;
  /* Le nom d'un jeu ne se coupe pas en deux. S'il ne rentre vraiment pas, il
     vaut mieux le voir rogné que de lire « Giro » sur une ligne et « Guessr »
     sur la suivante. */
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}

/* LA PAGE OÙ L'ON EST DÉJÀ. L'aplat rose bordé disait bien où l'on se trouve,
   mais il posait une carte de visite au milieu d'une rangée qui n'en a pas :
   une case pleine entre cinq cases vides, et la barre se lisait de travers.
   Le nom passe donc au coquelicot, et l'anneau se met à tourner — un tour en
   dix secondes, assez lent pour ne pas appeler, assez vivant pour qu'on le
   remarque en passant. L'anneau est ajouré ; c'est sa coupure qui fait le tour,
   et c'est tout ce qu'il faut pour dire « vous êtes ici ».

   L'ANIMATION PASSE PAR UNE PROPRIÉTÉ PERSONNALISÉE, et non par un sélecteur :
   les marques vivent dans des <symbol> que <use> instancie derrière une
   frontière d'ombre. Une règle posée sur le symbole vaut pour TOUTES ses
   copies — on ne peut donc pas y distinguer l'onglet courant. Les propriétés
   personnalisées, elles, s'héritent depuis le <use> : chaque copie reçoit la
   sienne, et c'est elle qui nomme l'animation. */
.portes a[aria-current="page"] {
  color: var(--color-accent-2);
  --porte-tour: porte-tourne;
}
/* Qui a demandé moins de mouvement à son système garde un anneau immobile :
   le nom au coquelicot dit déjà où l'on est. */
@media (prefers-reduced-motion: reduce) {
  .portes a[aria-current="page"] { --porte-tour: none; }
}
/* De −14 à 346 degrés : les anneaux naissent penchés de quatorze degrés
   (attribut « transform » du dessin), et une rotation CSS l'écraserait — on
   repart donc de là où ils sont.
   LE CENTRE S'ÉCRIT DANS LA TRANSFORMATION, PAS DANS « transform-origin ».
   Cette propriété-là s'applique à TOUTE valeur de « transform », y compris
   celle qui vient de l'attribut de présentation : posée sur les cinq anneaux,
   elle composait son décalage avec le « rotate(-14 50 50) » du dessin, et les
   faisait tourner autour de (100,100). Les cinq anneaux immobiles se
   retrouvaient déportés hors de leur marque. */
@keyframes porte-tourne {
  from { transform: translate(50px, 50px) rotate(-14deg) translate(-50px, -50px); }
  to { transform: translate(50px, 50px) rotate(346deg) translate(-50px, -50px); }
}

/* Le survol se pose au doigt sur un écran tactile et n'en repart plus : il
   n'existe que là où il y a vraiment un pointeur.
   Il ne touche pas au dessin : les icônes vivent dans un <symbol> repeint par
   son identifiant, et aucun sélecteur descendant de « .pict » ne franchit la
   frontière d'ombre que <use> installe. C'est donc la case qui s'allume, pas
   le picto — et le fond choisi est assez pâle pour que l'encre y reste noire. */
@media (hover: hover) and (pointer: fine) {
  .portes a:hover { background: var(--color-accent-2-200); color: var(--color-text); }
  .portes a:hover span { text-decoration: underline; }
}

/* ---------- le sprite, repeint ----------
   Les couleurs des symboles sont écrites en attributs de présentation
   (fill=, stroke=), que la moindre règle CSS bat : on repeint ici, sans
   toucher au dessin. Anneau coquelicot, motif à l'encre — un seul accent,
   jamais deux, comme le veut le système.
   On vise les <symbol> eux-mêmes : un sélecteur descendant de .pict ne
   franchirait pas la frontière d'ombre créée par <use>. */
#ico-chezmoi circle, #ico-adopte circle, #ico-giroguessr circle,
#ico-giroquest circle, #ico-girogp circle { stroke: var(--color-accent-2); fill: none; }
/* L'anneau ajouré, et lui seul : « r=42 » le distingue du motif qu'il entoure —
   le moyeu de GiroGuessr et la tête de « chez moi » sont des cercles aussi, et
   les faire tourner les mettrait en orbite. Le repère de la rotation est le
   cadre du dessin, dont le centre est justement celui de l'anneau. */
#ico-chezmoi > circle[r="42"], #ico-adopte > circle[r="42"],
#ico-giroguessr > circle[r="42"], #ico-giroquest > circle[r="42"],
#ico-girogp > circle[r="42"] {
  animation-name: var(--porte-tour, none);
  animation-duration: 10s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
#ico-giroquest path { fill: var(--color-text); }
/* Le cœur d'Adopte est une jauge : un contour toujours là, un remplissage que
   « coeur.js » fait monter par tiers. Les deux tracés se distinguent par leur
   classe — « #ico-adopte path » les aurait peints tous les deux pleins, et la
   jauge n'aurait plus rien à montrer. */
#ico-adopte .coeur-trait { stroke: var(--color-text); fill: none; }
#ico-adopte .coeur-plein { fill: var(--color-text); stroke: none; }
/* La silhouette de « chez moi » est au trait : c'est le contour qui passe à
   l'encre, pas le remplissage. Le « g » interposé la protège de la règle
   ci-dessus, qui repeint en coquelicot tous les cercles du sprite — et la tête
   en est un. */
#ico-chezmoi g circle, #ico-chezmoi g path { fill: none; stroke: var(--color-text); }
#ico-giroguessr path { stroke: var(--color-text); fill: none; }
#ico-giroguessr circle[r="9"] { fill: var(--color-text); stroke: none; }
/* Le damier d'arrivée : encre pleine, cases évidées dans le papier — celui de
   la BARRE, qui n'est plus celui de la page depuis qu'elle a son fond à elle.
   Avec « --color-bg », les quatre cases claires ressortaient d'un ton trop
   sombre sur la barre, et le damier se voyait bosselé. */
#ico-girogp rect { fill: var(--color-text); }
#ico-girogp g rect { fill: var(--color-surface); }

/* ---------- la cocarde de l'accueil ---------- */
/* Elle porte ses trois couleurs, et n'obéit donc pas à l'anneau des cinq
   autres : c'est le logotype, pas une marque de jeu. Le bleu au-dehors, le
   coquelicot au-dedans, l'encre au moyeu — un rond-point vu du ciel. */
#ico-accueil .coc-bleu { stroke: var(--color-accent); }
#ico-accueil .coc-rouge { stroke: var(--color-accent-2); }
#ico-accueil .coc-moyeu { fill: var(--color-text); }

/* Elle prend une part EXACTEMENT comme les cinq autres : « .portes a » suffit,
   et rien n'est écrit ici. Elle a eu droit à une part plus mince, au motif que
   c'est un retour et non une destination — mais six colonnes dont une plus
   étroite ne se répartissent pas régulièrement, et la cocarde se retrouvait
   collée au cœur d'Adopte pendant que les quatre autres respiraient.

   Le mot « Accueil » tient partout, y compris sur la plus étroite des largeurs
   qu'on serve. */

/* — LE MOT DU CŒUR, sous l'onglet d'Adopte. Une partie vient de rapporter son
     tiers : c'est la jauge de cet onglet qui a bougé, c'est de là que la
     nouvelle doit venir. Elle s'efface seule au bout de sept secondes, au clic
     suivant ou à la touche d'échappement.

     La position est écrite en style direct par « coeur.js » : la barre centre
     ses portes selon la largeur de l'écran, aucune feuille ne peut deviner où
     tombe la quatrième. La pointe suit, par « --pointe ». — */
.coeur-mot {
  position: fixed; z-index: 901; width: max-content;
  max-width: min(22rem, calc(100vw - 16px));
  font-family: var(--font-body); font-size: 13.5px; line-height: 1.35;
  color: var(--color-text); background: var(--color-surface);
  border: 1.5px solid var(--color-accent-2); border-radius: 12px;
  padding: 10px 14px; box-shadow: 0 10px 24px rgba(62, 23, 12, .18);
  opacity: 0; transform: translateY(-4px); pointer-events: none;
  transition: opacity .2s, transform .2s;
}
.coeur-mot.ouvert { opacity: 1; transform: none; }
/* La pointe : un carré tourné, dont on ne garde que les deux côtés du haut. */
.coeur-mot::before {
  content: ''; position: absolute; top: -6px; left: var(--pointe, 50%);
  width: 10px; height: 10px; margin-left: -5px;
  background: var(--color-surface);
  border-left: 1.5px solid var(--color-accent-2);
  border-top: 1.5px solid var(--color-accent-2);
  transform: rotate(45deg);
}

/* — LE TIERS QUI ARRIVE. Un petit cœur monte de la page, saute par-dessus
     l'onglet d'Adopte et retombe dedans. Il est posé sur l'icône, à sa taille,
     et ne fait que se déplacer : sa boîte ne bouge pas, donc rien ne bouge
     dans la page. Il s'efface tout seul à la fin. — */
.coeur-saut {
  position: fixed; z-index: 902; pointer-events: none;
  display: grid; place-items: center; color: #e34d68;
  animation: coeur-saut .78s cubic-bezier(.34, 1.12, .64, 1) forwards;
}
.coeur-saut svg { display: block; }
@keyframes coeur-saut {
  0%   { transform: translateY(52px) scale(.5);  opacity: 0; }
  26%  { transform: translateY(10px) scale(1.3); opacity: 1; }
  /* le saut par-dessus, qui donne son nom au geste */
  58%  { transform: translateY(-15px) scale(1.1); opacity: 1; }
  86%  { transform: translateY(0) scale(.8);     opacity: .9; }
  100% { transform: translateY(0) scale(.55);    opacity: 0; }
}

/* La montée de la jauge est menée par coeur.js, pas par une transition : WebKit
   ne transitionne pas « y » et ne redessine pas un symbole dont la découpe
   change. Voir « coeurPeint ». */

/* — LE BOUTON DU BANC D'ESSAI. Il n'est posé que sur la machine de
     développement (voir « bancDEssai » dans portes.js) et ne doit pas prendre
     sa part de la barre : les six portes se partagent la largeur, il se pose
     par-dessus, dans le coin, et se fait oublier. — */
.porte-essai {
  position: absolute; z-index: 2;
  top: calc(env(safe-area-inset-top, 0px) + 4px); right: 6px;
  font-family: var(--font-body); font-weight: 700; font-size: 12px;
  line-height: 1; padding: 5px 8px; cursor: pointer;
  color: var(--color-text); background: var(--color-bg);
  border: 1px dashed var(--color-text); border-radius: 8px; opacity: .55;
}
@media (hover: hover) and (pointer: fine) {
  .porte-essai:hover { opacity: 1; }
}

/* — LES TROIS FLÈCHES QUI MONTRENT LES JEUX. La bulle du cœur disait où gagner
     un tiers en refaisant trois boutons à elle, sous une barre qui porte déjà
     ces trois portes. Elle les montre maintenant : une flèche bleue sous chaque
     icône, qui saute vers elle et s'en va avec la bulle.

     En position fixe, calée à la volée sur l'onglet (voir « montreLesPortes »
     dans coeur.js) : la barre centre ses six portes selon la largeur, aucune
     feuille ne peut deviner où tombe la troisième. — */
.coeur-fleche {
  position: fixed; z-index: 901; pointer-events: none;
  margin-left: -11px; color: var(--color-accent);
  animation: coeur-montre 1.1s ease-in-out infinite;
}
.coeur-fleche svg { width: 22px; height: 22px; display: block; }
@keyframes coeur-montre {
  0%, 100% { transform: translateY(4px); opacity: .55; }
  50%      { transform: translateY(-3px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .coeur-fleche { animation: none; opacity: 1; }
}