/* quentyx-hora / L ATELIER, L ETABLI D AVYIS, 2026-09-28. Voir atelier.js.
 *
 * Deux matieres, celles du reste de Hora : la LISTE sans boite (filets et air, comme les
 * cartes), et les TUILES des creations dans la matiere des icones de l accueil (jetons
 * --ico-*, qui ont un jeu clair et un jeu sombre). Jamais --fond-haut ni --fond-carte : le
 * theme relief leur donne la meme valeur, une matiere peinte avec eux disparait. */
.at { max-width: 860px; min-width: 0; }
/* LA MARQUE AVYIS PLUS GRANDE QUE LE MOT (2026-09-28, sa demande) : c est son etabli. */
.at-titre { display: flex; align-items: center; gap: 20px; margin-bottom: 16px; }
.at-marque.ia-badge { width: 96px; height: 96px; }
.at-liens { display: flex; flex-wrap: wrap; gap: 8px; margin: -12px 0 8px; }
.at-lien { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 14px 0 11px !important;
  border: 1px solid var(--filet) !important; border-radius: 999px !important; color: var(--encre-2) !important;
  font: 500 14px var(--interface) !important; max-width: 100%; min-width: 0; }
.at-lien span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.at-lien svg { width: 17px; height: 17px; flex: 0 0 auto; }
.at-lien:hover { color: var(--encre) !important; border-color: var(--encre-4) !important; }
.at-rien { font: 400 17px/1.6 var(--lecture); color: var(--encre-3); max-width: 56ch; margin-top: 30px; }

/* ── CE QU AVYIS A FAIT ─────────────────────────────────────────────────── */
.at-section .etiquette { margin-top: 38px; }
.at-jour { margin: 22px 0 4px; font: 600 14px var(--interface); letter-spacing: .01em; color: var(--encre-3); }
.at-liste { display: flex; flex-direction: column; margin: 0 -12px; min-width: 0; }
.at-ligne {
  display: flex; align-items: center; gap: 14px; width: 100%; min-width: 0; min-height: 60px; padding: 10px 12px;
  border: 0; border-bottom: 1px solid var(--filet-2); border-radius: 6px; background: transparent;
  color: var(--encre); text-align: left; cursor: pointer; transition: background .16s ease;
}
.at-liste .at-ligne:last-child { border-bottom-color: transparent; }
.at-ligne:hover, .at-ligne:focus-visible { background: var(--voile); outline: none; }
.at-pastille {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; color: var(--encre-2);
  background: linear-gradient(165deg, var(--ico-haut), var(--ico-bas));
  box-shadow: inset 0 1px 0 var(--ico-arete), 0 4px 10px var(--ico-ombre);
}
.at-pastille svg { width: 19px; height: 19px; }
.at-texte { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.at-quoi { font: 400 16.5px/1.4 var(--lecture); color: var(--encre); overflow-wrap: anywhere; }
.at-sous { font: 500 14px/1.4 var(--interface); color: var(--encre-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.at-suite { flex: 0 0 auto; color: var(--encre-4); opacity: 0; transition: opacity .15s; }
.at-suite svg { width: 16px; height: 16px; display: block; }
.at-ligne:hover .at-suite, .at-ligne:focus-visible .at-suite { opacity: 1; }
/* Le travail de fond, a part des faits du jour : c est un etat qui dure, pas un geste. */
.at-fond { margin-top: 6px; }
.at-fond .at-pastille { color: var(--encre-3); }

/* ── SES CREATIONS ──────────────────────────────────────────────────────── */
.at-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: 16px; margin-top: 6px; overflow: visible; }
.at-tuile {
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; min-height: 150px; padding: 16px 16px 14px;
  border: 0; border-radius: 18px; text-align: left; cursor: pointer; color: var(--encre);
  background: linear-gradient(165deg, var(--ico-haut), var(--ico-bas));
  box-shadow: inset 0 1px 0 var(--ico-arete), 0 10px 22px var(--ico-ombre), 0 2px 5px var(--ico-ombre);
  transition: transform .18s ease, box-shadow .18s ease;
}
.at-tuile:hover, .at-tuile:focus-visible { transform: translateY(-2px); outline: none;
  box-shadow: inset 0 1px 0 var(--ico-arete), 0 16px 30px var(--ico-ombre), 0 3px 6px var(--ico-ombre); }
.at-genre { display: inline-flex; align-items: center; gap: 6px; font: 600 14px var(--interface); letter-spacing: .01em;
  color: var(--encre-3); }
.at-genre svg { width: 16px; height: 16px; }
.at-nom { font: 400 18px/1.35 var(--lecture); color: var(--encre); overflow-wrap: anywhere; max-width: 100%;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.at-meta, .at-lieu { font: 500 14px/1.4 var(--interface); color: var(--encre-3); max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.at-meta { margin-top: auto; }
.at-lieu { color: var(--encre-4); margin-top: -4px; }

/* LE « ... » D UNE SYNTHESE : discret au repos, plein au survol ; toujours la au doigt. */
.at-tuile { position: relative; }
.at-points { position: absolute; top: 8px; right: 8px; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 10px;
  display: grid; place-items: center; background: transparent; color: var(--encre-3); cursor: pointer; opacity: .55; transition: opacity .15s, background .15s; }
.at-points svg { width: 18px; height: 18px; }
.at-tuile:hover .at-points, .at-points:focus-visible { opacity: 1; }
.at-points:hover { background: var(--voile); color: var(--encre); }
.at-tuile.emporte { opacity: .45; }
/* L exception se marque : une synthese hors de tout espace. */
.at-lieu.at-hors { color: var(--encre-3); font-style: italic; }
/* Une synthese supprimee : son titre, eteint, qui ne s ouvre plus. */
.at-ligne.at-eteinte { cursor: default; }
.at-ligne.at-eteinte:hover { background: transparent; }
.at-eteinte .at-quoi { color: var(--encre-3); text-decoration: line-through; text-decoration-color: var(--encre-4); }

/* ── DANS L APERCU A DROITE ─────────────────────────────────────────────── */
.av-ligne.at-eteint { cursor: default; color: var(--encre-4); }
.av-ligne.at-eteint:hover { background: transparent; }
.at-ligne-resume em { margin-left: auto; flex: 0 0 auto; font: 500 14px var(--interface); font-style: normal; color: var(--encre-4); }
/* L icone Atelier dans la tete de l apercu : la meme cible que la fermeture. */
.av-atelier svg { width: 18px; height: 18px; }

@media (hover: none) { .at-points { opacity: 1; } }
@media (max-width: 480px) {
  .at-titre { gap: 10px; }
  .at-marque.ia-badge { width: 72px; height: 72px; }
  .at-ligne { gap: 12px; }
  .at-quoi { font-size: 16px; }
  .at-grille { gap: 12px; }
  .at-tuile { min-height: 0; }
  .at-suite { display: none; }
}

/* ── CE QUI TOURNE : une mise au propre en cours (2026-09-28) ─────────────── */
.at-travail { cursor: default; }
.at-travail:hover { background: transparent; }
.at-tourne svg { animation: atTourne 2.4s ease-in-out infinite; }
@keyframes atTourne { 50% { opacity: .35; } }
.at-barre { display: block; height: 4px; margin-top: 6px; border-radius: 4px; background: var(--filet-2); overflow: hidden; max-width: 320px; }
.at-barre i { display: block; width: 100%; height: 100%; background: var(--encre-3); border-radius: 4px; transform-origin: left; transition: transform .6s ease; }
.at-arreter { flex: 0 0 auto; min-height: 36px; }

/* ── L HISTORIQUE AU-DELA DE 30 JOURS : un mois par ligne, replie ────────── */
.at-mois { margin: 6px -12px 0; border-top: 1px solid var(--filet-2); }
.at-mois summary { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 12px; cursor: pointer; list-style: none;
  font: 600 14px var(--interface); color: var(--encre-2); text-transform: capitalize; }
.at-mois summary::-webkit-details-marker { display: none; }
.at-mois summary::before { content: '›'; color: var(--encre-4); transition: transform .15s; }
.at-mois[open] summary::before { transform: rotate(90deg); }
.at-mois .at-nb { margin-left: auto; color: var(--encre-4); font-weight: 500; }
.at-mois .at-liste { margin: 0; }

/* ── METTRE AU PROPRE : la fenetre ───────────────────────────────────────── */
#voileMap[hidden] { display: none; }
.map-carte { width: min(620px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); overflow-y: auto; padding: 22px 24px 18px;
  border-radius: 20px; background: var(--fond-carte, var(--fond)); color: var(--encre); }
.map-carte .map-tete { display: flex; align-items: flex-start; gap: 10px; padding: 0; margin: 0; border: 0; position: static; background: none; }
.map-tete > div { flex: 1; min-width: 0; }
.map-tete h2 { margin: 0; font: 400 24px/1.2 var(--lecture); }
.map-tete p { margin: 4px 0 0; font: 500 14px var(--interface); color: var(--encre-3); overflow-wrap: anywhere; }
.map-carte h3 { margin: 22px 0 10px; font: 600 14px var(--interface); color: var(--encre-3); }
.map-choix { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 10px; }
.map-option { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; min-height: 64px; padding: 12px 14px;
  border: 1px solid var(--filet); border-radius: 14px; background: transparent; color: var(--encre); text-align: left; cursor: pointer;
  transition: border-color .15s, background .15s; }
.map-option b { font: 600 15px var(--interface); }
.map-option span { font: 500 14px/1.4 var(--interface); color: var(--encre-3); }
.map-option:hover { border-color: var(--encre-4); }
.map-option.choisie { border-color: var(--encre-2); background: var(--voile); box-shadow: inset 0 0 0 1px var(--encre-2); }
.map-est { margin: 20px 0 0; font: 500 14px/1.5 var(--interface); color: var(--encre-3); }
.map-gros { margin-top: 6px; color: var(--encre-2); }
.map-erreur { color: var(--encre); }
.map-pied { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }
.map-pied .nu { min-height: 40px; }

/* ── LE RAPPORT D UNE MISE AU PROPRE, dans l apercu ──────────────────────── */
.map-couverture { padding: 12px 22px 4px; border-bottom: 1px solid var(--filet-2); font: 500 14px/1.5 var(--interface); color: var(--encre-3); }
.map-couverture p { margin: 0 0 8px; }
.map-ok { color: var(--encre-2); }
.map-rapport { margin: 0 0 8px; }
.map-rapport summary { cursor: pointer; color: var(--encre-2); min-height: 32px; display: flex; align-items: center; }
.map-rapport ul { margin: 4px 0 8px; padding-left: 18px; max-height: 260px; overflow-y: auto; }
.map-rapport li { margin: 3px 0; overflow-wrap: anywhere; }
.map-rapport li span { color: var(--encre-4); }

/* ── UN TEXTE GARDE A SON NOM : sa provenance, discrete, et jamais imprimee ── */
.provenance { margin: 0 0 18px; font: 500 14px var(--interface); color: var(--encre-4); }
@media print { .provenance { display: none !important; } }
@media (max-width: 480px) {
  .map-carte { padding: 18px 16px 14px; }
  .at-arreter { padding: 0 8px; }
}
.map-sources { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0 8px; } .map-sources .nu { min-height: 32px; padding: 0 8px; font-variant-numeric: tabular-nums; }