/* quentyx-hora / L ACCUEIL EN GRILLE D ICONES, 2026-09-27. Voir accueil.js.
 *
 * LA REFERENCE EST UNE CAPTURE D ANTHONY : des icones sombres en relief, un carre tres
 * arrondi en degrade, un bord eclaire en haut, une ombre portee, un dessin GRAVE.
 *
 * DEUX JEUX DE JETONS : les themes clairs (relief, rose, verre, heure) par defaut, et
 * le sombre en surcharge. Un dessin grave se lit par son ombre d un pixel et son arete
 * de lumiere : sur un clair, l ombre est un gris bleute ; sur le sombre, un noir. */
:root {
  --ico-haut: var(--lumiere, #FFFFFF);
  --ico-bas: var(--relief-sol, #F0F2F5);
  --ico-arete: rgba(255, 255, 255, .95);
  --ico-fond-arete: rgba(0, 0, 0, .05);
  --ico-ombre: var(--penombre, rgba(166, 176, 194, .55));
  --gl-haut: color-mix(in srgb, var(--relief-sol, #F0F2F5), #5A6272 26%);
  --gl-bas: color-mix(in srgb, var(--relief-sol, #F0F2F5), #5A6272 8%);
  --gl-arete: rgba(255, 255, 255, .95);
  --gl-ombre: rgba(255, 255, 255, .9);
  --gl-grave: color-mix(in srgb, var(--relief-sol, #F0F2F5), #5A6272 40%);
}
html[data-theme="relief-sombre"] {
  --ico-haut: #272727;
  --ico-bas: #0C0C0C;
  --ico-arete: rgba(255, 255, 255, .13);
  --ico-fond-arete: rgba(0, 0, 0, .7);
  --ico-ombre: rgba(0, 0, 0, .8);
  --gl-haut: #5A5A5A;
  --gl-bas: #1B1B1B;
  --gl-arete: rgba(255, 255, 255, .34);
  --gl-ombre: rgba(0, 0, 0, .95);
  --gl-grave: #0E0E0E;
}

.acc { max-width: 780px; margin: 5vh auto 0; padding-bottom: 40px; }
.acc-grille {
  /* Une regle globale donne `overflow: auto` a `nav` : un pixel de trop et une barre
     de defilement apparaissait sous la grille. Les ombres, elles, doivent deborder. */
  overflow: visible;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: 30px 10px; justify-items: center;
}
/* LES PORTES D ABORD, PUIS LES ESPACES : une rangee de rupture, sans titre. */
.acc-rupture { grid-column: 1 / -1; height: 0; }

.acc-app {
  width: 100%; min-width: 0; padding: 0; border: 0; background: none; color: var(--encre-2); cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; user-select: none; -webkit-user-select: none;
}
.acc-ico {
  position: relative; width: 84px; aspect-ratio: 1; border-radius: 24%;
  display: grid; place-items: center;
  background: linear-gradient(165deg, var(--ico-haut), var(--ico-bas));
  box-shadow: inset 0 1px 0 var(--ico-arete), inset 0 -1px 0 var(--ico-fond-arete),
              0 12px 22px var(--ico-ombre), 0 2px 4px var(--ico-ombre);
  transition: transform .18s cubic-bezier(.2, .8, .2, 1), box-shadow .18s;
}
.acc-app:hover .acc-ico { transform: translateY(-2px); }
.acc-app:active .acc-ico { transform: scale(.95); }
.acc-app:focus-visible { outline: none; }
.acc-app:focus-visible .acc-ico { box-shadow: 0 0 0 2px var(--encre-3), 0 12px 22px var(--ico-ombre); }

.acc-glyphe { width: 60%; height: 60%; overflow: visible; }
.acc-glyphe-ombre path { fill: var(--gl-ombre); }
.acc-glyphe-corps path { fill: url(#accGlCorps); stroke: url(#accGlArete); stroke-width: .7; }
.acc-date { font: 700 13.5px var(--interface); fill: var(--gl-grave); letter-spacing: -.02em; }

/* L EXCEPTION, ET ELLE SEULE : un espace ouvert aux modeles en ligne. */
.acc-point {
  position: absolute; top: 8%; right: 8%; width: 8px; height: 8px; border-radius: 50%;
  background: var(--encre); box-shadow: 0 0 0 2px var(--ico-haut), 0 0 8px color-mix(in srgb, var(--encre) 45%, transparent);
}

.acc-nom {
  /* BORNE A SA COLONNE : un nom plus long se coupe en « … », il ne chevauche jamais son
     voisin (mesure a 360 px le 2026-09-27 : « Conversations Parametres » se touchaient). */
  max-width: 100%; font: 500 14px/1.25 var(--interface); color: var(--encre-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.acc-sous { margin-top: -7px; font: 500 13px/1.2 var(--interface); color: var(--encre-4); }

.acc-chercher {
  display: flex; align-items: center; gap: 9px; margin: 52px auto 0; padding: 11px 24px; border: 0; border-radius: 999px;
  background: linear-gradient(165deg, var(--ico-haut), var(--ico-bas)); color: var(--encre-2); cursor: pointer;
  box-shadow: inset 0 1px 0 var(--ico-arete), 0 10px 20px var(--ico-ombre); font: 500 15px var(--interface);
}
.acc-chercher svg { width: 17px; height: 17px; }
.acc-chercher:hover { color: var(--encre); }
.acc-dehors { margin-top: 56px; }

/* ── Choisir une icone ──────────────────────────────────────────────────── */
.acc-choix { width: min(520px, calc(100vw - 32px)); }
.acc-choix-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 18px 8px; margin: 6px 0 4px; }
.acc-choix-app { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 6px 0; border: 0; border-radius: 14px;
  background: none; cursor: pointer; color: var(--encre-3); }
.acc-choix-app .acc-ico { width: 58px; }
.acc-choix-app .acc-nom { font-size: 13px; }
.acc-choix-app[aria-checked="true"] { background: var(--voile); color: var(--encre); }
.acc-choix-app[aria-checked="true"] .acc-nom { color: var(--encre); }

/* LE DESSIN SE CHANGE SUR L ICONE, et seulement la (2026-10-03). Un « ⋯ » discret en haut a
   gauche (le point de l espace ouvert garde le coin droit) : il se montre au survol, et reste
   estompe au telephone, ou il n y a pas de survol. */
.acc-dessin {
  position: absolute; top: 4%; left: 6%; width: 26px; height: 20px; border-radius: 8px;
  display: grid; place-items: center;
  color: var(--encre-2); opacity: 0; cursor: pointer; transition: opacity .15s, color .15s, background .15s;
}
.acc-dessin svg { width: 16px; height: 16px; fill: currentColor; }
.acc-app:hover .acc-dessin, .acc-dessin:focus-visible { opacity: 1; }
.acc-dessin:hover, .acc-dessin:focus-visible { color: var(--encre); background: color-mix(in srgb, var(--encre) 10%, transparent); outline: none; }
@media (hover: none) { .acc-dessin { opacity: .55; } }

/* ── Le telephone : quatre colonnes, comme la reference ─────────────────── */
/* MESURE A 360 px : colonnes de 77 px, « Conversations » 79 px et « Nouvel espace » 80 px
   a 12 px. On gagne 8 px de chaque cote sur la marge de la page (colonnes de 81 px) :
   les portes tiennent entieres, comme les libelles d un ecran de telephone. */
@media (max-width: 480px) {
  .acc { margin: 3vh -8px 0; }
  .acc-grille { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 4px; }
  .acc-ico { width: min(64px, 100%); }
  .acc-nom { font-size: 12px; letter-spacing: -.005em; }
  .acc-sous { font-size: 12px; margin-top: -8px; }
  .acc-point { width: 7px; height: 7px; }
  .acc-dessin { width: 22px; height: 18px; top: 3%; left: 4%; }
  .acc-dessin svg { width: 14px; height: 14px; }
  .acc-chercher { margin-top: 40px; }
}

/* ── L ENGRENAGE DES PARAMETRES, en haut de toutes les pages (2026-09-27) ──
   Le dessin de la tuile, sans la tuile : sur la barre il se lit a l encre, pas au
   degrade grave, qui disparaitrait sur le fond a cette taille. */
#bParametres.b-engrenage { display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 0; border-radius: 10px; }
#bParametres.b-engrenage .acc-glyphe { width: 22px; height: 22px; }
#bParametres.b-engrenage .acc-glyphe-ombre path { fill: var(--gl-ombre); opacity: .6; }
#bParametres.b-engrenage .acc-glyphe-corps path { fill: var(--encre-3); stroke: none; transition: fill .15s; }
#bParametres.b-engrenage:hover .acc-glyphe-corps path, #bParametres.b-engrenage:focus-visible .acc-glyphe-corps path { fill: var(--encre); }
#bParametres.b-engrenage:hover { background: var(--voile); }


/* ══ LA CARTE D UN ESPACE, 2026-09-30 (`carteEspace` dans app.js) ═════════════════════════════════════════════════════════
   La PLAQUE de l accueil (l icone choisie pour l espace), le nom, le numero, deux chiffres, l interrupteur. Pas de resume : il est
   dans l espace. LA LISTE d abord : la plaque a gauche, le nom et les chiffres a droite ; l interrupteur au bout de la ligne des chiffres. */
.carte.carte-espace { display: flex; align-items: center; gap: 18px; padding: 16px 20px; margin: 0 0 12px; min-height: 92px; }
.carte-espace .plaque-espace { width: 58px; flex: 0 0 58px; }
.carte-espace .corps { flex: 1 1 auto; min-width: 0; }
.carte-espace h3 { padding-right: 0; display: flex; align-items: flex-start; gap: 8px; }
/* Le nom peut passer sur deux lignes : « Personal’S… » ne dit pas quel espace c est. */
.carte-espace h3 .nom { min-width: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: break-word; }
.carte-espace h3 .coord { flex: none; margin-top: 2px; vertical-align: baseline; }
.carte-espace .meta { margin-top: 6px; }
@media (max-width: 480px) { .carte.carte-espace { gap: 14px; padding: 14px 14px; } .carte-espace .plaque-espace { width: 50px; flex-basis: 50px; } }

/* LA GRILLE : la plaque en haut, le nom et les chiffres en bas, et une PILE derriere (deux feuillets qui depassent) : un espace contient des dossiers. */
.grille:has(.carte-espace) { grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 30px 20px; padding-top: 14px; }
.grille .carte.carte-espace { position: relative; flex-direction: column; align-items: flex-start; gap: 22px;
  padding: 24px 22px 20px; min-height: 210px; }
.grille .carte-espace .plaque-espace { width: 64px; flex: none; }
.grille .carte-espace .corps { width: 100%; flex: 0 0 auto; margin-top: auto; }
.grille .carte-espace h3 { font-size: 18px; }
/* Deux lignes toujours : les chiffres, puis l interrupteur a droite. Toutes les cartes ont la meme hauteur, quel que soit le nombre de chiffres. */
.grille .carte-espace .meta { flex-wrap: wrap; row-gap: 10px; }
.grille .carte-espace .regime-carte { flex: 1 0 100%; justify-content: flex-end; margin-left: 0; }
.grille .carte-espace::before, .grille .carte-espace::after {
  content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: 0; bottom: 0; border-radius: inherit;
  background: var(--fond-carte); border: 1px solid color-mix(in srgb, var(--encre) 13%, transparent); box-shadow: var(--carte-ombre);
  transform-origin: 50% 0; pointer-events: none; transition: transform .18s ease;
}
.grille .carte-espace::before { transform: translateY(-7px) scale(.95); }
.grille .carte-espace::after { transform: translateY(-14px) scale(.9); z-index: -2; filter: brightness(.94); }
.grille .carte-espace:hover::before { transform: translateY(-9px) scale(.95); }
.grille .carte-espace:hover::after { transform: translateY(-18px) scale(.9); }
@media (max-width: 600px) { .grille:has(.carte-espace) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 12px; }
  .grille .carte.carte-espace { padding: 18px 14px 14px; min-height: 176px; gap: 16px; }
  .grille .carte-espace .plaque-espace { width: 54px; }
  .grille .carte-espace h3 { font-size: 16px; }
  /* Petite tuile : le nom d abord, un seul chiffre, l interrupteur. Le numero et les jetons sont dans l espace. */
  .grille .carte-espace h3 .coord, .grille .carte-espace .n-jetons { display: none; }
  .grille .carte-espace .meta { gap: 6px 10px; flex-wrap: wrap; } }