/* ═══════════════════════════════════════════════════════════════════════════════════════════
   ESPACES — LA STRUCTURE, ET RIEN QUE LA STRUCTURE (session 370).

   ⚠️ ⛔ AUCUNE COULEUR DE MARQUE, ⛔ AUCUNE TAILLE DE TEXTE, ⛔ AUCUNE MESURE DE CARTE ICI.
   Tout cela arrive en `style` inline depuis l'option `egmtheme_spaces_settings`, pour rester
   modifiable depuis l'écran « Espaces » du builder sans toucher à un fichier.
   ⭐ *Une couleur écrite ici serait un réglage repris à l'écran qui est censé le tenir* ⇒
   [[a-setting-that-lives-only-in-code-is-a-secret]].

   Les seules exceptions sont les deux variables d'accent (`--egm-spaces-accent`, `-hover`) et les
   deux ombres : elles sont POSÉES par le PHP sur la carte, et seulement CONSOMMÉES ici.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */

.egmtheme-spaces {
  width: 100%;
}

.egmtheme-spaces__inner {
  margin-left: auto;
  margin-right: auto;
}

.egmtheme-spaces__kicker {
  margin: 0;
  font-weight: 600;
  text-transform: uppercase;
}

.egmtheme-spaces__title {
  margin: 0;
  font-weight: 600;
  text-wrap: balance;
}

.egmtheme-spaces__subtitle {
  margin: 0;
  /* 🚨 ⛔ AUCUN plafond de lecture ici. Le V2 en avait inventé un (62ch) et l'accroche revenait à
     la ligne alors que la largeur restante était énorme, parce que RIEN ne vit à sa droite.
     ⭐ *Un plafond de mesure ne se pose que si quelque chose vit à côté.* */
  text-wrap: pretty;
}

/* ── La grille ─────────────────────────────────────────────────────────────────────────────── */
.egmtheme-spaces__grid {
  display: grid;
}

/* ── La carte ──────────────────────────────────────────────────────────────────────────────── */
.egmtheme-spaces__card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  /*
   * 🚨 SESSION 370, SIGNALÉ PAR LE PORTEUR — POURQUOI CETTE LIGNE EST ICI ET NON EN LIGNE.
   *
   * L'accent était écrit **inline** sur la carte, et la règle `:hover` ci-dessous ne pouvait donc
   * pas le reprendre : une déclaration inline l'emporte sur toute règle de feuille de style. Le
   * filet virait bien à l'orangé (sa règle porte `!important`), l'icône et l'appel à l'action
   * restaient bleus — et rien ne le signalait.
   * ⭐ ***Ce qui doit BASCULER se déclare dans la feuille ; l'inline ne lui donne que ses valeurs.***
   */
  --egm-spaces-accent: var(--egm-spaces-accent-rest);
  box-shadow: var(--egm-spaces-shadow);
  /* 📐 MESURE MAQUETTE : .18s — la durée des cartes, ⛔ pas celle des éléments collants (.22s). */
  transition: border-color 0.18s ease, box-shadow 0.18s ease, color 0.18s ease;
}

/*
 * ⭐ UN SEUL point de bascule : l'accent change, et le filet, l'icône et l'appel à l'action
 * suivent — parce qu'ils le LISENT tous les trois. Le thème V2 a appris cela à ses dépens (334) :
 * il avait trois règles de survol pour une seule intention, et l'icône n'en avait aucune.
 * ⭐ *Trois règles de survol pour une seule intention, c'est déjà la promesse qu'un jour l'une
 * des trois manquera.*
 */
.egmtheme-spaces__card:hover,
.egmtheme-spaces__card:focus-visible {
  --egm-spaces-accent: var(--egm-spaces-accent-hover);
  border-color: var(--egm-spaces-accent-hover) !important;
  box-shadow: var(--egm-spaces-shadow-hover);
}

.egmtheme-spaces__icon {
  display: inline-flex;
  color: var(--egm-spaces-accent);
  transition: color 0.18s ease;
}

.egmtheme-spaces__card-title {
  display: block;
  font-weight: 600;
}

.egmtheme-spaces__card-text {
  display: block;
  text-wrap: pretty;
}

.egmtheme-spaces__bullets {
  display: flex;
  flex-direction: column;
}

/*
 * ⚖️ LA PUCE — DEMANDÉE PAR LE PORTEUR (370), ET RÉGLABLE JUSQU'À SON ABSENCE.
 * `align-items: baseline` fait tomber le glyphe sur la ligne de base du texte, ⛔ pas au milieu de
 * la première ligne : c'est la différence entre une vraie liste et deux blocs côte à côte.
 * `flex: none` sur le glyphe l'empêche d'être compressé quand la phrase revient à la ligne, et le
 * texte reste alors aligné sous lui-même, ⛔ pas sous la puce.
 */
.egmtheme-spaces__bullet {
  display: flex;
  align-items: baseline;
  gap: var(--egm-spaces-bullet-gap, 10px);
}

.egmtheme-spaces__bullet-dot {
  flex: none;
  /* ⚠️ Le second argument est ce qui rend la puce solidaire du survol : sans couleur propre, elle
     lit l'accent de la carte et vire à l'orangé avec l'icône et la flèche. */
  color: var(--egm-spaces-bullet-marker, var(--egm-spaces-accent));
  transition: color 0.18s ease;
}

.egmtheme-spaces__bullet-text {
  min-width: 0;
}

/*
 * `margin-top: auto` colle l'appel à l'action au BAS de la carte : c'est ce qui aligne les quatre
 * flèches sur une même ligne quand une accroche fait deux lignes et une autre trois.
 * ⚠️ La marge réglée (`ctaMarginTop`) reste servie en ligne : elle est le PLANCHER, `auto` fait
 * le reste. Un `margin-top` inline gagne sur celui-ci — d'où le `!important`, qui n'est pas un
 * raccourci mais la seule façon de garder les deux.
 */
.egmtheme-spaces__cta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: auto !important;
  padding-top: var(--egm-spaces-cta-gap, 20px);
  font-weight: 600;
  color: var(--egm-spaces-accent);
  transition: color 0.18s ease;
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════
   🎭 SESSION 375 — LE VISAGE CONNECTE : LES TROIS WIDGETS (porte de `home.css` § A6.1)

   ⚠️ Meme loi que ci-dessus : ⛔ aucune couleur de marque, ⛔ aucune taille de texte ici. Les
   deux teintes de role arrivent en VARIABLES posees par le PHP sur la section
   (`--egm-role-accent`, `--egm-role-tint`) ; tout le reste arrive en `style` inline depuis
   l'option. Cette feuille ne tient que la STRUCTURE — et les trois FORMES de widget, qui sont
   une structure, ⛔ pas une decoration.
   ⭐ *Le V2 avait servi la meme ligne dans les trois widgets : le juge comptait 3 widgets
   presents, il ne voyait pas qu'ils se ressemblaient tous les trois.*
   ═══════════════════════════════════════════════════════════════════════════════════════════ */

.egmtheme-spaces__widgets {
  display: grid;
}

.egmtheme-spaces__widget {
  display: flex;
  flex-direction: column;
}

.egmtheme-spaces__widget-icon {
  display: block;
}

.egmtheme-spaces__widget-title {
  margin: 14px 0 0;
  font-weight: 600;
}

/* 📐 376 — LA MARGE A QUITTE CETTE FEUILLE POUR DEVENIR UN REGLAGE (`rowsMargin`), parce que la
   modale a sa PROPRE echelle (10/12 contre 14/18) et qu'une feuille ne connait qu'un seul jeu de
   valeurs. ⭐ *Une mesure qui doit differer selon l'hote ne peut pas rester dans la feuille.*
   ⛔ La declaration n'est PAS supprimee : elle reste le PLANCHER si l'inline manquait (charge
   servie depuis un cache d'avant la 376) — l'inline la recouvre de toute facon. */
.egmtheme-spaces__rows {
  display: flex;
  flex-direction: column;
  margin: 14px 0 18px;
  padding: 0;
  list-style: none;
}

.egmtheme-spaces__row {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* 🎯 522 — LE CONTENU D'UNE LIGNE EST UN BLOC (un `<a>` quand la ligne porte une porte, un
   `<span>` sinon) : c'est LUI qui range libelle et valeur, le `<li>` ne garde que son fond.
   ⛔ Aucune couleur : le lien herite (le chiffre garde sa pastille, le mot sa teinte). */
.egmtheme-spaces__row-inner {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  align-items: center;
  gap: 10px;
  color: inherit;
  text-decoration: none;
}

/* Une ligne-porte se signale au survol et au clavier par un filet a l'accent du role — ⛔ pas
   par un soulignement (le chiffre est dans la ligne) ni par un changement de fond (la teinte
   est un reglage). Le filet est `inset` : la ligne ne bouge pas d'un pixel. */
.egmtheme-spaces__row.has-link {
  transition: box-shadow 0.15s ease;
}

.egmtheme-spaces__row.has-link:hover,
.egmtheme-spaces__row.has-link:focus-within {
  box-shadow: inset 0 0 0 1.5px var(--egm-role-accent);
}

.egmtheme-spaces__row-link:focus-visible {
  outline: 2px solid var(--egm-role-accent);
  outline-offset: 2px;
  border-radius: 6px;
}

.egmtheme-spaces__row-label {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}

/* ⭐ La NOTE est SOUS son libelle, dans la meme colonne — ⛔ elle ne s'aligne pas sur le chiffre :
   « 22 familles » commente la ligne. */
.egmtheme-spaces__row-note {
  display: block;
  margin-top: 1px;
}

/* ⭐ LA VALEUR EST UNE PASTILLE (mesure maquette : 22 px, plein accent, texte blanc). */
.egmtheme-spaces__row-value {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* 🚫 Une cellule ABSENTE porte un tiret : sa pastille perd l'accent (pose en ligne par le PHP),
   parce qu'un tiret en pleine couleur se lirait comme une mesure. */
.egmtheme-spaces__row.is-absent .egmtheme-spaces__row-value {
  font-weight: 600;
}

/* ── ② La LISTE separee par un filet, ⛔ pas des lignes teintees (communautes · enfants). ─────
   🎯 522 — la forme est dite par le PRODUCTEUR (`layout`), la classe `--layout-*` la porte : le
   widget de role du parent est une liste d'enfants, celui de l'enseignant des tuiles. ⛔ Plus de
   selecteur par `id` : le meme `id` (`role`) prend deux formes selon qui lit. */

.egmtheme-spaces__widget--layout-list .egmtheme-spaces__row,
.egmtheme-spaces__widget--layout-list .egmtheme-spaces__row-inner {
  gap: 8px;
}

.egmtheme-spaces__widget--layout-list .egmtheme-spaces__row-label {
  font-weight: 500;
}

/* L'effectif est une PHRASE (« 24 eleves »), ⛔ pas une pastille : elle porte deja son nombre. */
.egmtheme-spaces__row-count {
  white-space: nowrap;
}

/* ── ③ Les TUILES cote a cote (Studio · Ma progression · Deploiement). ────────────────────── */

.egmtheme-spaces__widget--layout-tiles .egmtheme-spaces__rows {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px;
}

.egmtheme-spaces__widget--layout-tiles .egmtheme-spaces__row {
  flex: 1 1 0;
  min-width: 84px;
}

.egmtheme-spaces__widget--layout-tiles .egmtheme-spaces__row-inner {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
}

.egmtheme-spaces__widget--layout-tiles .egmtheme-spaces__row-label {
  flex: none;
  margin-top: 2px;
}

/* ⭐ Le chiffre s'affiche AU-DESSUS de son libelle SANS quitter sa place dans le document : un
   lecteur d'ecran entend « Brouillons, 12 », l'oeil voit « 12 / Brouillons ». */
.egmtheme-spaces__row-stat {
  order: -1;
  display: block;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.egmtheme-spaces__widget-empty {
  margin: 14px 0 18px;
}

/* ── L'appel a l'action — PLEINE LARGEUR, centre, colle au bas de la carte. ───────────────── */

.egmtheme-spaces__widget-cta {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  text-decoration: none;
  transition: box-shadow 0.18s ease;
}

.egmtheme-spaces__widget-cta:hover,
.egmtheme-spaces__widget-cta:focus-visible {
  box-shadow: 0 1px 3px rgba(13, 16, 36, 0.14);
}

/* 🎯 525 — dans la modale, les appels ② · ③ sont des LIENS texte (modele l. 388 · 397 :
   `font-size:12.5px;font-weight:600;color:accent`, ni retrait ni fond) : a gauche, sans ombre. */
.egmtheme-spaces__widget-cta--link {
  justify-content: flex-start;
  padding: 0;
  background: none;
}

.egmtheme-spaces__widget-cta--link:hover,
.egmtheme-spaces__widget-cta--link:focus-visible {
  box-shadow: none;
  text-decoration: underline;
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════
   🪟 SESSION 375 — LE REPRESENTANT DU REBORD GAUCHE, ET SA MODALE

   ⭐ ZERO JAVASCRIPT : c'est un `<details>`. Le `<summary>` est nativement focusable et s'ouvre
   au clavier. La feuille ne fait que POSITIONNER et basculer LEQUEL des deux mots se montre.
   📐 Mesures relevees sur `IA/Galerie Tizofun trois designs`, `Accueil.dc.html` l. 359 / 363-364.
   ⛔ Aucune couleur ici : l'onglet et le fond de la modale prennent l'accent du role, pose en
   variable par le PHP sur le `<details>` lui-meme.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */

/*
 * 🪤 Le `<details>` n'est qu'un PORTEUR D'ETAT : il ne doit rien occuper dans le flux, sinon il
 * pousserait la section suivante d'une hauteur invisible. Ses trois enfants etant tous
 * `position: fixed`, il retombe naturellement a zero — ⛔ pas besoin de `display: contents`, qui
 * retirerait la boite sur laquelle la regle d'agent utilisateur `details:not([open]) > *` se pose
 * pour cacher le contenu ferme.
 * ⭐ *On resout une hauteur par ce qui la produit, ⛔ pas en supprimant la boite qui la porte.*
 */
.egmtheme-spaces__dock {
  margin: 0;
  padding: 0;
  border: 0;
}

.egmtheme-spaces__dock-tab {
  position: fixed;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  /* ⚠️ AU-DESSUS du voile (255) : l'onglet est le SEUL controle qui ferme la modale. Le passer
     dessous en ferait un bouton qu'on voit et qu'on ne peut plus atteindre. */
  z-index: 260;
  /* 📐 Le texte est VERTICAL dans la maquette : c'est ce qui permet a un onglet de 9 px de large
     de porter deux mots sans deborder sur la page. */
  writing-mode: vertical-rl;
  font-weight: 300;
  letter-spacing: 0.02em;
  cursor: pointer;
  list-style: none;
}

.egmtheme-spaces__dock-tab::-webkit-details-marker {
  display: none;
}

.egmtheme-spaces__dock-tab::marker {
  content: '';
}

/* 🏷️ Un seul des deux mots se montre — et c'est la FEUILLE qui choisit, ⛔ pas un script : les
   deux libelles sont servis, donc traduits, donc justes. */
.egmtheme-spaces__dock:not([open]) .egmtheme-spaces__dock-word--open,
.egmtheme-spaces__dock[open] .egmtheme-spaces__dock-word--closed {
  display: none;
}

/* 🌓 376 — le voile est devenu un vrai BOUTON (il ferme la modale) : on lui retire donc l'aspect
   de bouton, ⛔ pas son role. */
.egmtheme-spaces__scrim {
  position: fixed;
  inset: 0;
  z-index: 255;
  padding: 0;
  border: 0;
  cursor: default;
  -webkit-appearance: none;
  appearance: none;
}

.egmtheme-spaces__modal {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  z-index: 258;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  border: 1px solid rgba(255, 255, 255, 0.16);
}

/* 📐 376 — « les barres de defilement dont on peut s'en passer » (signalement porteur).
   ⚖️ Le debordement reste POSSIBLE (`overflow-y:auto` au-dessus) : sur un ecran tres court, la
   modale doit encore pouvoir defiler — c'est la BARRE qu'on retire, ⛔ pas le defilement.
   ⭐ *On retire l'ornement d'un mecanisme, jamais le mecanisme* : le supprimer rendrait le bas de
   la modale inatteignable sur un telephone en paysage.
   🕳️ La vraie correction est ailleurs : sans icone et avec les mesures propres de la modale
   (`modalCardPadding` / `modalCardRadius`), les trois widgets tiennent dans 560 px — la barre
   n'apparait plus du tout aux hauteurs usuelles. */
.egmtheme-spaces__modal {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.egmtheme-spaces__modal::-webkit-scrollbar {
  width: 0;
  height: 0;
}

/* 📐 L'en-tete du modele (l. 365-369) : le titre pousse, la croix tient a droite. */
.egmtheme-spaces__modal-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.egmtheme-spaces__modal-title {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-weight: 700;
}

/* ✕ La croix du modele. ⛔ Aucune couleur ici : le fond et l'encre arrivent en ligne, depuis les
   reglages, comme tout le reste de ce composant. */
.egmtheme-spaces__modal-close {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  cursor: pointer;
}

.egmtheme-spaces__modal-close:hover,
.egmtheme-spaces__modal-close:focus-visible {
  filter: brightness(1.35);
}

/* 📐 Dans une colonne de 340 px, les trois widgets s'empilent : la grille `auto-fit` du visage
   plein le fait deja toute seule — ⛔ rien a redecider ici. */
.egmtheme-spaces__modal .egmtheme-spaces__widget {
  flex: none;
}

/* ♿ Sur un ecran court, la modale prend toute la hauteur utile plutot que de deborder : le
   `max-height` en `vh` s'en charge, et le defilement reste INTERNE. */
@media (max-width: 640px) {
  .egmtheme-spaces__dock-tab {
    /* 📐 Un onglet de 16 px de retrait mange trop d'une fenetre etroite. */
    padding: 12px 7px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════
   🪟 SESSION 376 — L'ONGLET NE PARAIT QU'APRES LA SECTION

   > « la miniature […] ne doit s'arrimer que lorsque cette section n'est plus visible a l'ecran,
   >   et elle ne fonctionne qu'en-dessous de la section […] et non au-dessus d'elle »
   > « l'ergo miniature de gauche obstrue le contenu principal »

   ⭐ LA CLASSE `--auto` EST POSEE PAR LE SCRIPT, ⛔ PAS PAR LE PHP. C'est ce qui garantit que
   l'onglet reste visible quand le script n'a pas tourne : une regle de masquage servie dans le
   balisage aurait rendu le representant introuvable sans JavaScript.
   ⭐ *Une regle qui cache doit venir de ce qui saura la lever.*
   ═══════════════════════════════════════════════════════════════════════════════════════════ */

.egmtheme-spaces__dock--auto .egmtheme-spaces__dock-tab {
  /* 🪤 `visibility` + `opacity`, ⛔ pas `display:none` : le `<summary>` doit rester dans l'arbre
     d'accessibilite pour que le `<details>` garde son etat, et un element qui reapparait par
     `display` saute au lieu de se fondre. */
  visibility: hidden;
  opacity: 0;
  /* ⛔ Et surtout : il ne capte plus le clic. C'est LA correction du « obstrue le contenu
     principal » — un onglet invisible mais cliquable reste un obstacle, en pire (on ne voit pas
     ce qui nous arrete). */
  pointer-events: none;
  transform: translateY(-50%) translateX(-100%);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
}

.egmtheme-spaces__dock--auto.is-armed .egmtheme-spaces__dock-tab {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transform: translateY(-50%) translateX(0);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s;
}

/* ♿ Qui refuse les animations recoit la meme bascule, sans le glissement. */
@media (prefers-reduced-motion: reduce) {
  .egmtheme-spaces__dock--auto .egmtheme-spaces__dock-tab,
  .egmtheme-spaces__dock--auto.is-armed .egmtheme-spaces__dock-tab {
    transform: translateY(-50%);
    transition: none;
  }
}

/* 📐 376 — LA MODALE N'EST PLUS « CHETIVE » : ses cartes prennent la largeur utile.
   ⚖️ La section pleine pose une grille `auto-fit` de colonnes de 240 px minimum ; dans 340 px
   moins 32 px de retrait, cela rend UNE colonne — mais les cartes gardaient le retrait de 24 px
   et le rayon de 13 px d'une carte de 272 px. Les trois valeurs propres a la modale arrivent
   desormais en ligne (`modalCardPadding`, `modalCardRadius`, `modalCardGap`).
   ⭐ *Un composant se re-mesure, ⛔ il ne se reecrit pas.* */
.egmtheme-spaces__modal .egmtheme-spaces__widget {
  width: 100%;
}

/* 🕳️ Sans icone (choix du modele), le titre ne doit plus porter la marge qui la separait d'elle :
   sinon la carte commence par un vide de 16 px que rien n'explique.
   ⭐ *Retirer un element, c'est aussi retirer l'espace qui le tenait.* */
.egmtheme-spaces__modal .egmtheme-spaces__widget-title {
  margin-top: 0;
}

/* 📐 376 — LA VALEUR SANS PASTILLE (modale) : le modele l'ecrit en gras a l'accent du role.
   ⛔ Aucune couleur ici : elle arrive en ligne, comme partout ailleurs dans ce composant. */
.egmtheme-spaces__row-plain {
  flex: none;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════
   🔄 1529 — LA CARTE DE DÉMARRAGE AU MODÈLE DES TUILES D'ACTIONS RAPIDES (`TaskTile.css`)

   Consigne porteur : très peu de texte, une belle image-icône, un bouton, le ⓘ dans le rond qui
   fait pivoter la carte ; en haut du recto, « Plus de détails ici → » en petits caractères.
   Les teintes du rôle arrivent en VARIABLES (`--egm-spaces-tint` · `-tint2` · `-line`, posées par
   le PHP) : ⛔ aucune couleur de marque ici, comme le reste de la feuille. Rayon, marge intérieure
   et tailles de texte restent servis en ligne depuis les réglages.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */
.egmtheme-spaces__card--flip {
  display: block;
  perspective: 900px;
  min-width: 0;
  box-shadow: none;
}
.egmtheme-spaces__card--flip:hover,
.egmtheme-spaces__card--flip:focus-within {
  box-shadow: none;
}
.egmtheme-spaces__flip {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  height: 100%;
  border-radius: inherit;
  transform-style: preserve-3d;
  transition: transform 400ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.egmtheme-spaces__card--flip.is-flipped .egmtheme-spaces__flip {
  transform: rotateY(180deg);
}
.egmtheme-spaces__face {
  grid-area: 1 / 1;
  position: relative;
  min-width: 0;
  min-height: 250px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  /* 📐 la tuile : rayon 18 · marge 14/16/16 (recto) · 16 (verso) — `TaskTile.css`. */
  border-radius: 18px;
  padding: 14px 16px 16px;
  color: #1d1a17;
  border: 1px solid color-mix(in srgb, var(--egm-spaces-line) 22%, transparent);
  background: linear-gradient(160deg, var(--egm-spaces-tint) 0%, var(--egm-spaces-tint2) 100%);
  box-shadow: var(--egm-spaces-shadow);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transition: box-shadow 0.18s ease;
}
.egmtheme-spaces__face:hover {
  box-shadow: var(--egm-spaces-shadow-hover);
}
.egmtheme-spaces__back {
  transform: rotateY(180deg);
  gap: 8px;
  padding: 16px;
}

/* ── Recto ─────────────────────────────────────────────────────────────────────────────────── */
/* L'indice et le ⓘ n'existent que si le script a armé la carte : ⛔ un bouton qui ne fait rien. */
.egmtheme-spaces__hint,
.egmtheme-spaces__info {
  display: none;
}
/* La ligne du haut de la tuile (`.egm-tt__status`) : 13 px, gris, à GAUCHE, hors du coin du ⓘ. */
.egmtheme-spaces__card--flip.is-flippable .egmtheme-spaces__hint {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 36px 0 0;
  min-height: 1.4em;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  color: #6b645a;
}
.egmtheme-spaces__card--flip.is-flippable .egmtheme-spaces__info {
  position: absolute;
  top: 8px;
  right: 8px;
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: color-mix(in srgb, #fff 70%, transparent);
  color: var(--egm-spaces-line);
  cursor: pointer;
  z-index: 1;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.egmtheme-spaces__info:hover { background: #fff; }
/* 🪲 1534 (signalement porteur, capture du verso) — le ⓘ, positionné avec un `z-index`, prend son propre calque :
   le `backface-visibility` de la face ne le couvre plus, et il transparaissait AU VERSO par-dessus le titre
   (« Apprenant », « Parent »…). ⇒ il porte le sien, ET il s'éteint à mi-rotation quand la carte est retournée
   (le recto est déjà `inert` : rien ne change pour le clavier ni le lecteur d'écran). Idem l'indice. */
.egmtheme-spaces__card--flip.is-flippable .egmtheme-spaces__info,
.egmtheme-spaces__card--flip.is-flippable .egmtheme-spaces__hint {
  transition: visibility 0s linear 200ms;
}
.egmtheme-spaces__card--flip.is-flipped .egmtheme-spaces__info,
.egmtheme-spaces__card--flip.is-flipped .egmtheme-spaces__hint {
  visibility: hidden;
}
.egmtheme-spaces__link {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  color: inherit;
  text-decoration: none;
}
.egmtheme-spaces__img {
  margin-top: auto;
  display: block;
}
.egmtheme-spaces__img img {
  display: block;
  width: 96px;
  height: 96px;
  object-fit: contain;
}
.egmtheme-spaces__front .egmtheme-spaces__card-title {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.25;
  color: #6b645a;
}
/* Le bouton : la pilule blanche des tuiles (`.egm-tt__cta` + `.egm-tt__title` 16 px / 700). */
.egmtheme-spaces__front .egmtheme-spaces__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 0 !important;
  padding: 7px 16px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.25;
  min-height: var(--egm-ctl-h, 38px);
  max-width: 100%;
  box-sizing: border-box;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--egm-spaces-line) 45%, transparent);
  background: #fff;
  color: color-mix(in srgb, var(--egm-spaces-line) 80%, #1d1a17);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
  overflow-wrap: anywhere;
  transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
}
.egmtheme-spaces__link:hover .egmtheme-spaces__cta,
.egmtheme-spaces__link:focus-visible .egmtheme-spaces__cta {
  background: var(--egm-spaces-line);
  border-color: var(--egm-spaces-line);
  color: #fff;
}

/* ── Verso ─────────────────────────────────────────────────────────────────────────────────── */
/* `.egm-tt__purpose` (16 / 600) · `.egm-tt__preview` (14, gris) — la puce reste un réglage (370). */
.egmtheme-spaces__back-title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
}
.egmtheme-spaces__back-text {
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
  color: #6b645a;
}
.egmtheme-spaces__back .egmtheme-spaces__bullets {
  gap: 4px;
  margin: 0;
  padding: 0;
  font-size: 14px;
  line-height: 1.45;
  color: #6b645a;
}
.egmtheme-spaces__back .egmtheme-spaces__bullet-dot {
  color: var(--egm-spaces-bullet-marker, var(--egm-spaces-line));
}
/* `.egm-tt__actions` : UNE rangée (⛔ wrap), chaque bouton partage la largeur, le texte passe à la ligne. */
.egmtheme-spaces__actions {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 8px;
  margin-top: auto;
}
.egmtheme-spaces__go,
.egmtheme-spaces__back-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--egm-ctl-h, 38px);
  min-width: 0;
  padding: 7px 12px;
  box-sizing: border-box;
  border-radius: 12px;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  white-space: normal;
  text-decoration: none;
  cursor: pointer;
}
.egmtheme-spaces__go {
  flex: 1 1 auto;
  border: 1px solid var(--egm-spaces-line);
  background: var(--egm-spaces-line);
  color: #fff;
}
.egmtheme-spaces__back-btn {
  flex: 0 1 auto;
  border: 1px solid color-mix(in srgb, var(--egm-spaces-line) 25%, transparent);
  background: color-mix(in srgb, #fff 85%, var(--egm-spaces-tint));
  color: #1d1a17;
  font-weight: 600;
}
.egmtheme-spaces__back-ico { display: none; }
.egmtheme-spaces__card--flip { container-type: inline-size; }
@container (max-width: 230px) {
  .egmtheme-spaces__back-ico { display: inline; font-weight: 700; }
  .egmtheme-spaces__back-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }
}
.egmtheme-spaces__link:focus-visible,
.egmtheme-spaces__info:focus-visible,
.egmtheme-spaces__go:focus-visible,
.egmtheme-spaces__back-btn:focus-visible,
.egmtheme-spaces__back-title:focus-visible {
  outline: 3px solid var(--egm-spaces-line);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .egmtheme-spaces__flip { transition: none; }
}