/* La carte appelable — bouton, panneau, commandes.
   Partagée par les pages document (accueil, commune, département, région) et
   par les pages jeu, qui n'en prennent que le bouton et les commandes : leur
   carte à elles vit dans la mise en page, pas dans un panneau. */

/* La durée du glissement du panneau, écrite une seule fois. Le script la lit
   sur le panneau, qui en hérite de la racine. */
:root { --carte-glisse: .28s; }

/* ---------- le bouton d'appel ---------- */
/* Le même habit qu'« Entrer dans la ronde », l'appel à l'action de l'accueil :
   coquelicot plein, contour de la même couleur, gélule. Sans texte il devient
   un rond — c'est de circonstance.
   Il flotte sur les pages qui n'ont pas de fil d'Ariane (l'accueil) et prend
   sa place dans le fil sur les autres. */
.carte-appel {
  position: fixed; top: 14px; right: 14px; z-index: 1100;
  width: 46px; height: 46px; padding: 0;
  display: grid; place-items: center; cursor: pointer;
  background: #d94f2b; color: #fff;
  border: 2.5px solid #d94f2b; border-radius: 999px;
  transition: background-color .12s ease, border-color .12s ease;
}
.carte-appel svg { width: 23px; height: 23px; display: block; }
@media (hover: hover) and (pointer: fine) {
  .carte-appel:hover { background: #b23e20; border-color: #b23e20; color: #fff; }
}

.carte-appel:focus-visible { outline: 3px solid #2b4a9e; outline-offset: 3px; }
.carte-appel[hidden] { display: none; }

/* Rangé dans la page plutôt que flottant : il prend sa place dans la ligne où
   la page l'a mis — à côté du titre sur les pages document, à droite du champ
   de recherche sur l'accueil. Une page réclame le bouton chez elle en posant
   un point d'ancrage, `<span data-carte-bouton></span>` ; le script lui donne
   alors cette classe.
   « flex: 0 0 auto » lui évite d'être écrasé par une ligne qui déborde. */
.carte-appel.en-ligne { position: static; z-index: auto; flex: 0 0 auto; }
/* Dans le fil, un peu plus petit : quarante-six pixels feraient une ligne de
   fil deux fois trop haute. */
.crumb .carte-appel {
  position: static; z-index: auto; flex: 0 0 auto;
  width: 38px; height: 38px; margin-left: auto;
}
.crumb .carte-appel svg { width: 20px; height: 20px; }

/* ---------- le panneau ---------- */
/* La carte partage l'écran, elle ne flotte pas au-dessus : à droite sur un
   écran large, en bas sur un téléphone. Le texte se replie d'autant — la page
   reste lisible et défilable à côté, ce qui n'est pas vrai d'un calque posé
   dessus. */
.carte-panneau {
  /* La largeur ne se dit pas en « width » mais en « left » : c'est la même
     moitié d'écran, mais elle devient une position — donc quelque chose qui
     peut glisser jusqu'à 0 quand on passe en plein écran. Une largeur « auto »
     ne s'anime pas, une position, si.
     Et la moitié n'est que le partage par défaut : la couture se tire, et
     `--carte-large` porte alors le partage choisi. Une seule valeur pour les
     deux, sinon ils divergent d'un pixel à chaque geste — mais elle ne dit pas
     la même chose des deux côtés : ici OÙ COMMENCE la carte, plus bas CE
     QU'ELLE PREND, qui en est le complément. Les confondre marchait tant que
     le partage restait à la moitié, et se voyait au premier geste. */
  /* SOUS LA BARRE DES CINQ JEUX, pas par-dessus. Le panneau montait jusqu'en
     haut de la fenêtre et mangeait la moitié droite de l'en-tête : la
     navigation du produit disparaissait au moment même où l'on ouvrait la
     carte, et il fallait refermer pour changer de jeu. « --portes-h » est posé
     par « portes.js » sur les pages qui portent la barre ; ailleurs le repli
     vaut zéro et le panneau reprend toute la hauteur. */
  position: fixed; top: var(--portes-h, 0px); right: 0; bottom: 0; left: var(--carte-large, 50vw); z-index: 1200;
  display: flex; flex-direction: column;
  background: #fdf8ec; border-left: 3px solid #26251f;
  /* Le panneau est une « section » : sans ça, l'accueil lui applique le grand
     retrait qu'il réserve à ses sections de texte, et la carte perdait cent
     pixels en haut comme en bas. */
  padding: 0;
  /* Deux mouvements, et deux seulement. Le panneau ARRIVE en glissant depuis
     le bord (transform) : sa taille ne change pas d'un pixel pendant le
     trajet, Leaflet n'a donc rien à remesurer et la carte entre déjà dessinée.
     Il S'AGRANDIT en plein écran (left/top) : là sa taille change vraiment, et
     c'est carte-lieux.js qui prévient Leaflet à chaque image.
     La durée vit sur la racine, plus haut. */
  transition:
    transform var(--carte-glisse) cubic-bezier(.22, .61, .36, 1),
    left      var(--carte-glisse) cubic-bezier(.22, .61, .36, 1),
    top       var(--carte-glisse) cubic-bezier(.22, .61, .36, 1);
}
.carte-panneau[hidden] { display: none; }
/* Plein écran : elle reprend tout, et la page dessous n'a plus à se replier. */
.carte-panneau.plein { left: 0; border-left-width: 0; }
/* Dehors : rangé contre le bord, hors de l'écran. C'est de là qu'il vient à
   l'ouverture et c'est là qu'il repart à la fermeture — la classe est mise ou
   retirée par le script, qui n'escamote le panneau qu'une fois sorti. */
.carte-panneau.parti { transform: translateX(100%); }
/* Qui préfère que rien ne bouge n'a rien demandé de tel : le panneau se pose
   et se retire d'un coup, comme avant. */
@media (prefers-reduced-motion: reduce) {
  .carte-panneau { transition: none; }
}
/* La scène : la carte occupe toute la hauteur qui reste, et le bouton de
   recherche s'y pose par-dessus plutôt que d'encombrer la barre. */
.carte-scene { position: relative; flex: 1; min-height: 0; }
.carte-panneau .toile { position: absolute; inset: 0; }
/* Le texte se replie de la LARGEUR DE LA CARTE, pas de la position de son
   bord : « --carte-large » dit où la carte commence, et son complément dit ce
   qu'elle prend. Tirée à 80 %, la couture partait bien à droite mais le texte
   se serrait comme si la carte occupait tout — il se rétrécissait au moment
   même où on lui faisait de la place. Le « 100 % » est celui du bloc racine,
   soit la fenêtre moins l'ascenseur, et donc exactement le bord droit du
   panneau. */
body.carte-ouverte { padding-right: calc(100% - var(--carte-large, 50vw)); }
body.carte-ouverte.carte-pleine { padding-right: 0; overflow: hidden; }

/* Les deux commandes du panneau, posées sur la carte en haut à droite : même
   gélule de papier que les boutons d'une boîte à photos, puisque c'est le même
   geste au même endroit. */
.carte-cmd {
  position: absolute; top: 12px; right: 12px; z-index: 1000;
  display: flex; gap: 8px;
}
.carte-cmd .icone {
  width: 40px; height: 40px; padding: 0; cursor: pointer;
  display: grid; place-items: center; font-size: 15px; line-height: 1;
  font-family: "Archivo", system-ui, sans-serif;
  background: #fdf8ec; color: #26251f;
  border: 2px solid #26251f; border-radius: 999px;
  box-shadow: 0 2px 10px rgba(38, 37, 31, .22);
}
@media (hover: hover) and (pointer: fine) {
  .carte-cmd .icone:hover { background: #f7efdd; }
}

.carte-cmd .icone:focus-visible { outline: 3px solid #2b4a9e; outline-offset: 2px; }
.carte-cmd .icone svg { width: 18px; height: 18px; display: block; }

/* « Aller à ma position » a rejoint les deux autres commandes, en haut à
   droite : il porte donc leur gélule de papier, et n'a plus de règle de
   couleur à lui. Il vivait en bas, en coquelicot plein — un coin à part pour
   un geste de même nature que ses voisins, et un aplat qui annonçait plus
   grave qu'il n'est. Ne reste ici que ce qui lui est propre : la taille de son
   dessin, qui porte plus de trait que les deux autres, et ce qu'il devient
   pendant qu'il cherche. */
.carte-cmd .ici svg { width: 19px; height: 19px; }
/* Pendant la recherche de position : le bouton attend, et le dit. */
.carte-cmd .ici[disabled] { opacity: .55; cursor: progress; }

/* Un mot quand le chargement se fait attendre ou qu'il n'y a rien à montrer :
   mieux qu'une carte vide sans explication. Invisible tant qu'il n'y a rien
   à dire.

   EN HAUT À GAUCHE, sur la ligne des deux commandes d'en face : flottant au
   milieu, il tombait en plein sur le paysage qu'on venait de chercher. Même
   hauteur, même retrait, même gélule de papier que les boutons — les trois
   font une seule ligne posée sur la carte, et le décompte ne cache plus rien
   d'important. */
.carte-mot {
  position: absolute; top: 12px; left: 12px; z-index: 1000;
  display: flex; align-items: center; min-height: 40px;
  font-family: "Archivo", system-ui, sans-serif;
  font-size: 12px; color: #26251f; white-space: nowrap;
  background: #fdf8ec; border: 2px solid #26251f; border-radius: 999px;
  padding: 0 14px; box-shadow: 0 2px 10px rgba(38, 37, 31, .22);
}
.carte-mot:empty { display: none; }
/* Il s'en va en fondu plutôt que de disparaître d'un coup : un mot qui
   s'évanouit se remarque moins qu'un mot qui saute. */
.carte-mot { transition: opacity .4s ease; }
.carte-mot.parti { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .carte-mot { transition: none; } }

/* Sur un écran étroit, la coupe se fait à l'horizontale : la carte en bas,
   le texte au-dessus. Une moitié de 375 pixels de large ne montrerait rien. */
@media (max-width: 760px) {
  /* La coupe passe à l'horizontale : ce qui se disait en « left » se dit en
     « top », et le panneau monte du bas au lieu de venir de la droite. */
  .carte-panneau {
    top: var(--carte-haut, 50vh); left: 0; right: 0; bottom: 0; height: auto;
    border-left: none; border-top: 3px solid #26251f;
  }
  /* Plein écran : tout, sauf la barre du haut — voir plus haut. */
  .carte-panneau.plein { top: var(--portes-h, 0px); border-top-width: 0; }
  .carte-panneau.parti { transform: translateY(100%); }
  /* Même complément qu'en largeur — un pourcentage de retrait vertical se
     mesurerait sur la LARGEUR du bloc, il ne peut donc pas servir ici. */
  body.carte-ouverte { padding-right: 0; padding-bottom: calc(100vh - var(--carte-haut, 50vh)); }
  body.carte-ouverte.carte-pleine { padding-bottom: 0; }
}


/* ---------- la poignée : la couture qu'on tire ----------
   Une bande à tirer sur le bord de la carte, discrète tant qu'on ne la cherche
   pas : deux pixels de filet et trois traits au milieu, comme la poignée d'un
   panneau qu'on redimensionne. Elle déborde de six pixels sur ce qu'il y a à
   côté pour être attrapable sans viser.

   Partagée par les deux familles — la carte en colonne des pages jeu et le
   panneau des pages document — d'où les couleurs écrites en repli : les jeux
   ont leurs variables, les pages document n'en ont pas, et ce sont les mêmes
   crème et encre de part et d'autre. */
/* L'ASCENSEUR DU TEXTE PASSAIT PAR-DESSUS. La couture tombe exactement sur le
   bord droit de la colonne qui défile, donc sur sa barre de défilement, et le
   disque de la poignée y perdait son quart gauche — coupé net par une bande
   grise. Un « z-index » n'y peut rien : le navigateur compose l'ascenseur d'un
   conteneur défilant dans sa propre couche, au-dessus de ce qui n'en a pas.
   On promet donc une transformation, ce qui donne à la poignée sa couche à
   elle, et la remet au-dessus. (Elle n'a aucun descendant en position fixe :
   la promesse ne piège personne ici.) */
.carte-poignee {
  position: absolute; z-index: 1001; touch-action: none; will-change: transform;
  left: -12px; top: 0; bottom: 0; width: 24px; cursor: col-resize;
  display: grid; place-items: center;
}
.carte-poignee::before {          /* le filet, sur la couture exacte */
  content: ""; position: absolute; left: 11px; top: 0; bottom: 0; width: 2px;
  background: transparent; transition: background .15s;
}
/* La prise, au milieu de la hauteur. Elle se voit au repos : une poignée qu'on
   ne découvre qu'en la survolant n'existe pas pour qui ne la survole pas — et
   sur un écran tactile, personne ne survole rien.

   RONDE, ET LARGE À VISER. Elle a d'abord été un trait de neuf pixels sur une
   bande de douze : joli, et manqué une fois sur deux au doigt. Le disque en
   fait trente-deux, et la zone qui l'entoure quarante-quatre — la taille au
   -dessous de laquelle une cible tactile se rate. La bande, elle, reste
   étroite : l'élargir sur toute la hauteur volerait les clics de la carte tout
   du long, alors qu'on ne vise jamais la couture ailleurs que sur sa prise.

   Deux chevrons dessus disent dans quel sens ça tire. Un rond muet, au milieu
   d'une couture, ne dit pas qu'il se tire. */
/* Centré à la main, et non par la grille : un élément plus large que sa piste
   n'y est pas centré par « place-items » — il s'alignait au bord et débordait
   d'un seul côté, ce qui posait le disque dix pixels à droite de la couture.
   Une translation de moitié ne se trompe pas. */
.carte-poignee .prise {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 44px; height: 44px;
  display: grid; place-items: center;
  color: var(--color-text, #26251f);
}
.carte-poignee .prise::before {
  content: ""; position: absolute; width: 32px; height: 32px; border-radius: 999px;
  background: var(--color-surface, #fdf8ec); border: 2px solid var(--color-text, #26251f);
  box-shadow: var(--shadow-sm, 0 2px 10px rgba(38, 37, 31, .22));
  transition: background .15s, border-color .15s;
}
.carte-poignee .prise svg { position: relative; width: 17px; height: 17px; display: block; }
.carte-poignee:focus-visible .prise::before, body.carte-en-tirage .carte-poignee .prise::before {
  background: var(--accent, #d94f2b); border-color: var(--accent, #d94f2b);
}
@media (hover: hover) and (pointer: fine) {
  .carte-poignee:hover .prise::before {
    background: var(--accent, #d94f2b); border-color: var(--accent, #d94f2b);
  }
}

.carte-poignee:focus-visible .prise, body.carte-en-tirage .carte-poignee .prise { color: #fff; }
@media (hover: hover) and (pointer: fine) {
  .carte-poignee:hover .prise { color: #fff; }
}

.carte-poignee:focus-visible::before, body.carte-en-tirage .carte-poignee::before { background: var(--accent, #d94f2b); }
@media (hover: hover) and (pointer: fine) {
  .carte-poignee:hover::before { background: var(--accent, #d94f2b); }
}

.carte-poignee:focus-visible { outline: none; }

/* Pendant le tirage, le curseur ne doit pas changer sous la souris et rien ne
   doit se sélectionner : les deux gâchent le geste. Et le panneau doit suivre
   le doigt sans retard — sa transition sert à s'ouvrir, pas à être tiré. */
body.carte-en-tirage { user-select: none; }
/* Le panneau suit le doigt sans retard : sa transition sert à s'ouvrir, pas à
   être tiré. */
body.carte-en-tirage .carte-panneau { transition: none; }
body.carte-en-tirage.tirage-horizontal, body.carte-en-tirage.tirage-horizontal * { cursor: col-resize !important; }
body.carte-en-tirage.tirage-vertical, body.carte-en-tirage.tirage-vertical * { cursor: row-resize !important; }

/* En plein écran il n'y a plus de couture : le panneau touche les quatre bords. */
.carte-panneau.plein .carte-poignee { display: none; }

@media (max-width: 760px) {
  /* Les colonnes s'empilent : la couture passe à l'horizontale. */
  .carte-poignee {
    left: 0; right: 0; width: auto; top: -12px; bottom: auto; height: 24px;
    cursor: row-resize;
  }
  .carte-poignee::before { left: 0; right: 0; top: 11px; bottom: auto; width: auto; height: 2px; }
  /* La couture est horizontale : les chevrons montrent le haut et le bas. */
  .carte-poignee .prise svg { transform: rotate(90deg); }
}

/* ---------- pages jeu : même bouton, même icône ---------- */
/* Leur carte vit dans la mise en page ; le bouton ne fait que la rappeler
   quand elle est repliée. Il prend la place et l'allure du bouton d'appel. */
#carte-bascule {
  /* Sous la barre des cinq, qui est collée en haut : « --portes-h » est
     publié par « portes.js », qui seul connaît sa hauteur. Sans lui, le
     bouton se posait derrière elle. */
  position: fixed; top: calc(14px + var(--portes-h, 0px)); right: 14px; transform: none;
  z-index: 1100; display: flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; padding: 0;
  background: #d94f2b; color: #fff;
  border: 2.5px solid #d94f2b; border-radius: 999px; cursor: pointer;
}
/* IL RESTE, CARTE OUVERTE OU NON : c'est lui qui la referme. Il ne se montrait
   que sur une carte repliée, et il fallait aller chercher la croix posée sur la
   carte pour la renvoyer — à l'autre bout de l'écran. Dans une ligne, sa
   disparition recomposait en plus la ligne à chaque fois. */
/* Rangé dans la page : il ne flotte plus, il prend sa place dans la ligne où
   la page l'a mis. */
#carte-bascule.en-ligne { position: static; flex: none; }
/* Nommé, il cesse d'être un disque : il prend la gélule des boutons du
   système, le dessin devant et le mot derrière. */
#carte-bascule.avec-mot {
  width: auto; height: auto; gap: 8px; padding: 9px 16px; border-radius: 999px;
  border-width: 2px;
  font-family: var(--font-body, inherit); font-weight: 700; font-size: 12px;
  letter-spacing: .08em; text-transform: uppercase; line-height: 1;
}
/* Le dessin se serre avec le reste : vingt-trois pixels étaient la taille d'un
   bouton rond qui n'avait que lui à montrer. */
#carte-bascule.avec-mot svg { width: 18px; height: 18px; }
#carte-bascule svg { width: 23px; height: 23px; display: block; }
#carte-bascule:focus-visible { outline: 3px solid #2b4a9e; outline-offset: 3px; }