/* ==========================================================================
   V15 « Le premier contact » — le parcours d'entrée
   Design : claude/parcours-entree.md (D1 → D7). Décisions : claude/lot-v15.md.

   O-4 : ce fichier vit à côté d'app.css, pas dedans. app.css fait 38 Ko et
   app.js 153 Ko ; treize écrans qu'on ne voit qu'une fois dans sa vie n'ont
   rien à faire au milieu de ceux qu'on ouvre tous les jours.

   Tout emprunte aux jetons d'app.css — aucune couleur neuve, aucune police
   neuve. Les classes réutilisées telles quelles : .card .hero .btn1 .btn2
   .kicker .h-display .lien .lienx .bsteave
   ========================================================================== */

.entree {
  position: fixed;
  inset: 0;
  z-index: 900;
  background: var(--bg);
  overflow-y: auto;
  overflow-x: hidden;
}

/* Le grain d'app.css est en position:fixed — il passe dessous sans effort. */

.ent-centre {
  max-width: 660px;
  margin: 0 auto;
  padding: 56px 24px 80px;
}

.ent-large { max-width: 820px; }

/* --- l'en-tête d'écran ---------------------------------------------------- */

.ent-tete { margin-bottom: 28px; }

.ent-titre {
  font-family: Anton, sans-serif;
  text-transform: uppercase;
  font-size: 34px;
  line-height: 1.06;
  letter-spacing: .01em;
  margin: 6px 0 12px;
}

.ent-chapo {
  font-size: 15px;
  line-height: 1.6;
  font-weight: 500;
  color: var(--ink);
}

.ent-chapo + .ent-chapo { margin-top: 12px; }

.ent-sub { color: var(--sub); font-size: 13.5px; line-height: 1.55; }

/* --- la limite de l'écran 1 (D2) : un fait, pas une excuse ---------------- */

.ent-limite {
  border: 1.5px solid var(--line);
  border-left: 4px solid var(--ink);
  background: #FFF;
  border-radius: 8px;
  padding: 16px 18px;
  margin-top: 22px;
  font-size: 13.5px;
  line-height: 1.6;
}

.ent-limite b { font-weight: 800; }

/* --- l'écran de la clé (D3) : quatre étapes cochables --------------------- */

.ent-etapes { display: flex; flex-direction: column; gap: 2px; margin: 8px 0 4px; }

.ent-etape {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 14px 16px;
  border: 1.5px solid var(--line);
  border-radius: 8px;
  background: #FFF;
  cursor: pointer;
}

.ent-etape + .ent-etape { margin-top: 8px; }

.ent-etape:hover { border-color: var(--ink); }

/* Le vocabulaire des pastilles vient de l'app : jaune cerclé d'encre = à
   faire, vert-t + liseré vert = fait (le tag « faite ✓ » de la V10). */
.ent-pastille {
  flex-shrink: 0;
  width: 26px; height: 26px;
  border-radius: 999px;
  background: var(--jaune);
  border: 1.5px solid var(--ink);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800;
}

.ent-faite .ent-pastille { background: var(--vert-t); border-color: var(--vert); }
.ent-faite .ent-etape-titre { text-decoration: line-through; color: var(--sub); }
.ent-faite { border-color: var(--vert); }

.ent-encours { border-color: var(--ink); box-shadow: 3px 3px 0 rgba(21,24,13,.10); }

.ent-etape-titre { font-size: 14px; font-weight: 800; }
.ent-etape-dit { font-size: 12.5px; color: var(--sub); margin-top: 3px; line-height: 1.5; }

.ent-reprendre {
  background: var(--steel);
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 18px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}

/* --- le coût (D3b) : l'ancrage mesuré, et les trous qui se voient --------- */

.ent-cout { margin-top: 20px; font-size: 13.5px; line-height: 1.65; }

.ent-trou {
  display: inline-block;
  background: var(--jaune);
  border: 1.5px dashed var(--ink);
  border-radius: 5px;
  padding: 0 7px;
  font-weight: 800;
  font-size: 12.5px;
}

/* --- les quatre cartes de D4b : à égalité, chacune dit ce qu'elle produit - */

.ent-cartes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 6px; }

.ent-carte {
  border: 1.5px solid var(--line);
  border-radius: 8px;
  background: #FFF;
  padding: 18px;
  cursor: pointer;
}

.ent-carte:hover { border-color: var(--ink); box-shadow: 3px 3px 0 rgba(21,24,13,.10); }
.ent-carte.ent-choisie { border: 2px solid var(--ink); box-shadow: 4px 4px 0 rgba(21,24,13,.14); }
.ent-carte-titre { font-family: Anton, sans-serif; text-transform: uppercase; font-size: 17px; }
.ent-carte-dit { font-size: 12.5px; color: var(--sub); margin-top: 7px; line-height: 1.5; }

/* --- les fourchettes à cocher (D4) --------------------------------------- */

.ent-champ { margin-top: 26px; }
.ent-label { font-size: 14px; font-weight: 800; margin-bottom: 4px; }
.ent-aide { font-size: 12.5px; color: var(--sub); margin-bottom: 10px; line-height: 1.5; }

.ent-choix { display: flex; flex-wrap: wrap; gap: 8px; }

.ent-opt {
  border: 1.5px solid var(--line);
  border-radius: 999px;
  background: #FFF;
  padding: 8px 15px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.ent-opt:hover { border-color: var(--ink); }
.ent-opt.ent-choisie { background: var(--jaune); border-color: var(--ink); }

/* Q-A bis — les sept jours d'un créneau. Ce sont les mêmes pastilles que
   l'écran Réglages devra porter : le parcours n'écrit rien qu'un écran ne
   sache reprendre. */
.ent-jours { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }

.ent-jour {
  width: 42px; text-align: center;
  border: 1.5px solid var(--line);
  border-radius: 8px;
  background: #FFF;
  padding: 7px 0;
  font-size: 12px; font-weight: 800; text-transform: uppercase;
  cursor: pointer;
}

.ent-jour:hover { border-color: var(--ink); }
.ent-jour.ent-choisie { background: var(--jaune); border-color: var(--ink); }

.ent-creneau {
  border: 1.5px solid var(--line);
  border-radius: 8px;
  padding: 14px 16px;
  background: #FFF;
}

.ent-creneau + .ent-creneau { margin-top: 8px; }
.ent-creneau.ent-actif { border-color: var(--ink); }

.ent-saisie {
  width: 100%;
  border: 1.5px solid var(--line);
  border-radius: 8px;
  padding: 11px 13px;
  font-family: inherit;
  font-size: 13.5px;
  background: #FFF;
  resize: vertical;
}

.ent-saisie:focus { outline: none; border-color: var(--ink); }

/* --- le verdict (D6) : les faits dans la voix de l'app -------------------- */

.ent-barres { margin: 22px 0 6px; }

.ent-barre-ligne { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.ent-barre-nom { width: 148px; flex-shrink: 0; font-size: 12.5px; font-weight: 700; color: var(--sub); }

.ent-barre-piste { flex: 1 1 0; height: 22px; background: var(--steel); border-radius: 4px; overflow: hidden; }
.ent-barre-part { height: 100%; background: var(--bleu); }

/* Vu en REGARDANT la capture, pas au test : --steel2 sur une piste --steel,
   ce sont deux gris presque identiques — la barre « ce que la prépa demande »
   ne se lisait pas du tout. Le test comptait deux barres, et il y en avait
   bien deux. C'est exactement le défaut de la V14 : tout passait, et l'écran
   dessinait autre chose. */
.ent-barre-part.ent-manque { background: var(--sub); }
.ent-barre-val { width: 92px; flex-shrink: 0; font-size: 13px; font-weight: 800; color: var(--bleu); }
.ent-barre-ligne.ent-manque-ligne .ent-barre-val { color: var(--sub); }

/* Le nom du programme sous le plancher (D6b) : un en-tête noir plein, comme
   le jour J de la V12. Le noir plein est réservé — ici il dit que ce
   programme ne porte PAS le nom de la course, et que c'est volontaire. */
.ent-renomme {
  background: var(--ink);
  color: var(--bg);
  border-radius: 8px;
  padding: 16px 18px;
  margin-top: 20px;
}

.ent-renomme .ent-carte-titre { color: var(--bg); }
.ent-renomme .ent-carte-dit { color: #C9CCC0; }

/* --- les vides datés du jour 1 (D7) --------------------------------------- */

.ent-vide-date { font-weight: 800; color: var(--ink); }

/* --- la barre du bas ------------------------------------------------------ */

.ent-pied {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin-top: 34px;
}

.ent-fil { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--sub); font-weight: 800; }

.ent-actions { display: flex; gap: 10px; align-items: center; }

.ent-bloque { opacity: .4; pointer-events: none; }

/* --- la couture (D1) : STEAVE se présente pendant que la question est là --- */

.ent-couture { display: grid; grid-template-columns: 1fr 300px; gap: 28px; align-items: start; }

.ent-panneau {
  background: #FFF;
  border: 1.5px solid var(--line);
  border-radius: 8px;
  padding: 18px;
}

.ent-panneau .bsteave { margin-top: 12px; }

.ent-mot {
  background: #F0EFE6;
  border-radius: 10px 10px 10px 2px;
  padding: 14px 16px;
  font-size: 13.5px;
  line-height: 1.6;
}

.ent-mot + .ent-mot { margin-top: 10px; }

/* --- étroit : G2 n'est pas négociable depuis le 15 septembre -------------- */

@media (max-width: 760px) {
  .ent-centre { padding: 32px 18px 64px; }
  .ent-titre { font-size: 27px; }
  .ent-cartes { grid-template-columns: 1fr; }
  .ent-couture { grid-template-columns: 1fr; }
  .ent-barre-nom { width: 92px; }
  .ent-barre-val { width: 72px; }
  .ent-pied { flex-direction: column; align-items: stretch; }
  .ent-actions { justify-content: space-between; }
}

/* ---- V18 · écran 7 : la présentation du programme (D4) ---- */
/* Le voyage reprend le vocabulaire des cartes de phase de la page Programme :
   pointillé pour ce qui construit, noir plein pour le jour J — le noir plein
   reste réservé à aujourd'hui et au jour J. */
.ent-voyage { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ent-voy {
  border: 1.5px dashed var(--sub);
  border-radius: 8px;
  background: #FFF;
  padding: 16px 18px;
}
.ent-voy-jourj { border: 2px solid var(--ink); background: var(--ink); color: #FFF; box-shadow: 5px 5px 0 rgba(21,24,13,.14); }
.ent-voy-nom { font-size: 14px; font-weight: 800; }
.ent-voy-dit { font-size: 12.5px; color: var(--sub); margin-top: 6px; line-height: 1.5; }
.ent-voy-jourj .ent-voy-dit { color: var(--line); }
.ent-voy-jourj .ent-voy-dit b { color: var(--jaune); }

.ent-pas-liste { display: flex; flex-direction: column; gap: 8px; }
.ent-pas {
  display: flex; align-items: center; gap: 14px;
  border: 1.5px solid var(--line); border-radius: 8px;
  background: #FFF; padding: 12px 16px;
}
.ent-pas:first-child { border-color: var(--ink); }
.ent-pas-jour { width: 74px; flex-shrink: 0; font-size: 13px; font-weight: 800; }
.ent-pas-pt { width: 9px; height: 9px; border-radius: 50%; background: var(--bleu); flex-shrink: 0; }
.ent-pas-titre { font-size: 13.5px; font-weight: 700; }
.ent-pas-duree { color: var(--bleu); }
.ent-pas-dit { font-size: 11.5px; color: var(--sub); font-weight: 600; }

@media (max-width: 760px) {
  /* ⚠ Le contre assumé de D4, mesuré au canvas : en étroit, trois blocs
     empilés PLUS le panneau. On garde un seul ordre de lecture (O-5 de la
     V15) et on resserre tout ce qui peut l'être. */
  .ent-voyage { grid-template-columns: 1fr; gap: 8px; }
  .ent-voy { padding: 13px 15px; }
  .ent-pas { padding: 11px 13px; gap: 11px; }
  .ent-pas-jour { width: 60px; font-size: 12px; }
}

/* L'écran 7 est le plus large du parcours : trois cartes de phase EN LIGNE
   plus le panneau. À 820 px (.ent-large) les noms de phase passaient sur
   trois lignes — mesuré à l'écran, pas au canvas. */
.ent-presentation { max-width: 1060px; }

/* ==========================================================================
   V19 « L'accueil » — la présentation en trois écrans, façon Komoot
   Canvas : « Le parcours d'entrée (lot 1) », rangée V19. Base : l'option D.
   Décidé par Max le 25 septembre — voir claude/decisions.md, V19.

   ⚠ Deux écarts assumés au design system, décidés au dessin :
   · une troisième police, Permanent Marker, pour les SEULS dessins à la main ;
   · le noir plein sous le chevalier et les aperçus (le noir plein est
     d'habitude réservé à aujourd'hui et au jour J).
   Le chevalier est posé sur du noir parce qu'un sticker à bord clair
   disparaît sur le fond crème (piège déjà payé).
   ========================================================================== */

.ent-pr {
  position: relative;
  min-height: 100vh;
  box-sizing: border-box;
  padding: 72px 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.ent-pr-corps {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 64px;
}

/* --- la carte de gauche ---------------------------------------------------- */

.ent-pr-carte {
  width: 330px;
  flex-shrink: 0;
  background: var(--card);
  border: 2px solid var(--ink);
  border-radius: 14px;
  box-shadow: 6px 6px 0 rgba(21, 24, 13, .16);
  overflow: hidden;
}

.ent-pr-scene {
  position: relative;
  height: 380px;
  background: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.ent-pr-chevalier { height: 320px; width: auto; display: block; }

.ent-pr-legende {
  padding: 16px 20px;
  display: flex;
  flex-wrap: wrap;                  /* « Ton programme » + « Semaine après semaine »
                                       ne tiennent pas sur une ligne : la mention
                                       passe dessous plutôt que de se casser en trois */
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 12px;
  border-top: 2px solid var(--ink);
}

.ent-pr-nom {
  font-family: Anton, sans-serif;
  font-size: 26px;
  text-transform: uppercase;
  line-height: 1;
}

.ent-pr-sous { white-space: nowrap; }

.ent-pr-sous,
.ent-ap-kicker {
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--sub);
  font-weight: 800;
}

/* --- les deux aperçus d'app (dessins, pas des données) --------------------- */

.ent-ap {
  background: var(--card);
  border: 2px solid var(--ink);
  border-radius: 10px;
  box-shadow: 5px 5px 0 rgba(0, 0, 0, .35);
}

.ent-ap-semaine { width: 250px; transform: rotate(-3deg); padding: 14px 16px 6px; }
.ent-ap-semaine .ent-ap-kicker { font-size: 10px; padding-bottom: 8px; }

.ent-ap-ligne {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-top: 1px solid var(--line);
}
.ent-ap-jour { width: 34px; font-size: 11px; font-weight: 800; color: var(--sub); text-transform: uppercase; }
.ent-ap-titre { flex-grow: 1; font-size: 13px; font-weight: 700; }
.ent-ap-duree { font-size: 12px; font-weight: 600; color: var(--bleu); }

.ent-ap-jmoins {
  position: absolute;
  right: 22px;
  top: 56px;
  transform: rotate(6deg);
  background: var(--jaune);
  border: 1.5px solid var(--ink);
  border-radius: 6px;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 800;
}

.ent-ap-pile { display: flex; flex-direction: column; gap: 14px; width: 260px; }
.ent-ap-sortie { transform: rotate(-2deg); padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; }
.ent-ap-sortie .ent-ap-kicker { font-size: 10px; }
.ent-ap-vert { color: var(--vert); }
.ent-ap-nom { font-size: 15px; font-weight: 800; }
.ent-ap-chiffres { display: flex; gap: 14px; font-size: 13px; font-weight: 700; color: var(--bleu); }

.ent-ap-bulle {
  align-self: flex-end;
  width: 220px;
  box-sizing: border-box;
  transform: rotate(2deg);
  background: #F0EFE6;              /* le fond de .bsteave */
  border: 1.5px solid var(--ink);
  border-radius: 12px 12px 12px 2px;
  padding: 12px 14px;
  font-size: 13px;
  line-height: 1.45;
  font-weight: 600;
}
.ent-ap-bulle .ent-ap-kicker { font-size: 10px; margin-top: 6px; }

/* --- le texte de droite --------------------------------------------------- */

.ent-pr-texte {
  width: 520px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.ent-pr-etape {
  align-self: flex-start;
  background: var(--ink);
  color: var(--bg);
  border-radius: 8px;
  padding: 5px 12px;
  font-size: 13px;
  font-weight: 700;
}

.ent-pr-titre {
  margin: 0;
  font-family: Anton, sans-serif;
  font-weight: 400;
  font-size: 60px;
  text-transform: uppercase;
  line-height: .96;
  letter-spacing: .01em;
}
.ent-pr-titre span { color: var(--bleu); }

.ent-pr-puces {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ent-pr-puces li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 18px;
  line-height: 1.4;
  font-weight: 500;
}
.ent-pr-coche { flex-shrink: 0; margin-top: 2px; color: var(--ink); }

.ent-pr-bouton {
  margin-top: 8px;
  width: 100%;
  background: var(--jaune);
  color: var(--ink);
  font-family: inherit;
  font-weight: 800;
  font-size: 17px;
  border: 1.5px solid var(--ink);
  border-radius: 8px;
  padding: 17px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.ent-pr-bouton:hover { box-shadow: 3px 3px 0 var(--ink); }

.ent-pr-retour {
  align-self: center;
  margin-top: -10px;
  background: none;
  border: none;
  padding: 8px 12px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  color: var(--sub);
  cursor: pointer;
}
.ent-pr-retour:hover { color: var(--ink); }

/* --- les petits dessins à la main ----------------------------------------- */

.ent-pr-deco { position: absolute; inset: 0; pointer-events: none; }
.ent-pr-main { position: absolute; font-family: 'Permanent Marker', cursive; }
.ent-pr-pret {
  left: 64px; top: 150px;
  font-size: 24px; line-height: 1.25;
  color: var(--bleu);
  transform: rotate(-6deg);
}
.ent-pr-fleche { position: absolute; left: 70px; top: 240px; color: var(--ink); }
.ent-pr-etoile { position: absolute; right: 90px; top: 110px; color: var(--rouge); }
.ent-pr-lune {
  right: 70px; bottom: 70px;
  transform: rotate(-7deg);
  background: var(--card);
  border: 2px solid var(--ink);
  border-radius: 999px;
  box-shadow: 4px 4px 0 var(--ink);
  padding: 10px 22px;
  font-size: 19px;
  color: var(--ink);
}

/* Les dessins débordent sur le contenu avant qu'il ne s'empile : on les
   retire dès que la marge autour de la carte et du texte ne suffit plus. */
@media (max-width: 1180px) {
  .ent-pr-deco { display: none; }
}

/* Décidé par Max : en étroit, la carte passe AU-DESSUS du texte et les
   dessins disparaissent. */
@media (max-width: 980px) {
  .ent-pr { align-items: flex-start; padding: 32px 16px 48px; }
  .ent-pr-corps { flex-direction: column; align-items: stretch; gap: 26px; width: 100%; max-width: 520px; }
  .ent-pr-carte { width: 100%; }
  .ent-pr-scene { height: 230px; }
  .ent-pr-chevalier { height: 196px; }
  .ent-pr-texte { width: 100%; gap: 18px; }
  .ent-pr-titre { font-size: 40px; }
  .ent-pr-puces li { font-size: 16px; }
}

/* ==========================================================================
   V19 · étape 2 — « Branche mon cerveau » (option A bis, décidée par Max)
   Même gabarit que la présentation (.ent-pr…), la colonne de droite est plus
   large, et l'illustration est un MONTAGE : le vrai chevalier, éteint ou
   allumé, et une prise dessinée.
   ========================================================================== */

.ent-cle-texte { width: 580px; gap: 13px; }
.ent-cle-titre { font-size: 50px; }

.ent-cle-intro { font-size: 16px; line-height: 1.5; font-weight: 500; }
.ent-cle-intro b { font-weight: 800; }

.ent-cle-pas-liste { display: flex; flex-direction: column; gap: 11px; }
.ent-cle-pas { display: flex; gap: 12px; align-items: flex-start; }
.ent-cle-num {
  flex-shrink: 0;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--bg);
  font-size: 13px;
  font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.ent-cle-pas-titre { font-size: 16px; font-weight: 800; padding-top: 3px; }
.ent-cle-pas-dit { font-size: 14px; line-height: 1.45; font-weight: 500; color: #4A4F42; margin-top: 2px; }
.ent-cle-lien {
  display: inline-block;
  margin-top: 3px;
  font-size: 13px;
  font-weight: 800;
  color: var(--bleu);
  text-decoration: none;
}
.ent-cle-lien:hover { text-decoration: underline; }

.ent-cle-label {
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--sub);
  font-weight: 800;
  margin-bottom: -6px;
}

.ent-cle-modele {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1.5px solid var(--ink);
  border-radius: 8px;
  padding: 10px 14px;
  background: var(--card);
}
.ent-cle-modele-nom { font-size: 15px; font-weight: 700; }
.ent-cle-conseille {
  background: var(--vert-t);
  border: 1px solid var(--vert);
  color: #2C7A1A;
  border-radius: 6px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 800;
}
.ent-cle-changer {
  margin-left: auto;
  background: none;
  border: none;
  padding: 4px 0;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 800;
  color: var(--bleu);
  cursor: pointer;
}
.ent-cle-aide { font-size: 12.5px; color: var(--sub); font-weight: 600; margin-top: -6px; }

.ent-cle-pied {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-size: 12.5px;
  color: var(--sub);
  font-weight: 600;
}
.ent-cle-retour { flex-shrink: 0; white-space: nowrap; margin-top: 0; align-self: auto; }

/* --- ce que la vérification répond. Une panne n'est JAMAIS en vert (GR7). --- */

.ent-cle-etat {
  border-radius: 12px;
  padding: 16px 18px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.ent-cle-etat > div { display: flex; flex-direction: column; gap: 4px; }
.ent-cle-etat-titre { font-size: 17px; font-weight: 800; }
.ent-cle-etat-dit { font-size: 14.5px; line-height: 1.5; font-weight: 500; }
.ent-cle-attente {
  background: var(--card);
  border: 1.5px dashed var(--sub);
  color: var(--sub);
  font-size: 15px;
  font-weight: 700;
}
.ent-cle-ok { background: var(--vert-t); border: 2px solid var(--vert); }
.ent-cle-ko { background: #FBECEC; border: 2px solid var(--rouge); display: block; }
.ent-cle-vide { background: #FFF8C2; border: 2px solid var(--ink); display: block; }
.ent-cle-coche { flex-shrink: 0; }
.ent-cle-bleu { color: var(--bleu); }

/* --- l'illustration : débranché / branché --------------------------------- */

.ent-cle-chevalier { position: relative; height: 280px; margin-top: -30px; }
.ent-cle-eteint { filter: grayscale(1) brightness(.55); }
.ent-cle-lueur {
  position: absolute;
  left: 50%; top: 50%;
  width: 260px; height: 260px;
  margin: -130px 0 0 -130px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 237, 39, .28), rgba(255, 237, 39, 0));
}
.ent-cle-fil { position: absolute; left: 0; top: 0; }
.ent-cle-socle {
  position: absolute;
  right: 26px; bottom: 58px;
  width: 46px; height: 64px;
  border-radius: 10px;
  background: #2A2E22;
  border: 2px solid #7E8890;
  display: flex; align-items: center; justify-content: center;
}
.ent-cle-socle div { width: 6px; height: 16px; border-radius: 2px; background: var(--ink); }
.ent-cle-prise-pos { position: absolute; left: 40px; top: 322px; transform: rotate(160deg); line-height: 0; }
.ent-cle-prise-pos.ent-cle-dedans { left: 236px; top: 268px; transform: rotate(-90deg); }
.ent-cle-tag {
  position: absolute;
  left: 18px; top: 18px;
  transform: rotate(-5deg);
  background: var(--card);
  border: 1.5px solid var(--ink);
  border-radius: 6px;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 800;
}
.ent-cle-tag-on { background: var(--vert-t); border-color: var(--vert); color: #2C7A1A; }
.ent-cle-zzz {
  position: absolute;
  right: 60px; top: 60px;
  font-family: 'Permanent Marker', cursive;
  font-size: 26px;
  color: #7E8890;
  transform: rotate(-8deg);
}
.ent-cle-zzz span { font-size: 20px; }
.ent-cle-zzz i { font-size: 15px; font-style: normal; }

@media (max-width: 980px) {
  .ent-cle-texte { width: 100%; }
  .ent-cle-titre { font-size: 38px; }
  /* la scène rétrécit à 230 px : on garde le chevalier et la prise lisibles */
  .ent-cle-chevalier { height: 180px; margin-top: -10px; }
  .ent-cle-fil, .ent-cle-socle, .ent-cle-prise-pos { display: none; }
  .ent-cle-pied { flex-direction: column; align-items: flex-start; }
}

/* ==========================================================================
   V19.2 « L'accueil » — étapes 3 à 8 : STEAVE fait le programme
   Canvas : « Le parcours d'entrée », rangée « V19 — étapes 3 à 8 ».
   Décisions : claude/decisions.md, lot 4, E3-1 → E3-12.
   Mêmes jetons, mêmes polices que la présentation. Pas de fil de progression,
   pas de STEAVE sur les vues 3 à 5 (retirés par Max le 26 septembre).
   ========================================================================== */

.ent-s { max-width: 740px; margin: 0 auto; padding: 64px 24px 96px; display: flex; flex-direction: column; gap: 18px; }
.ent-s-large { max-width: 1140px; }
.ent-s-titre {
  margin: 0;
  font-family: Anton, 'Arial Narrow', Impact, sans-serif;
  font-weight: 400;
  font-size: 52px;
  line-height: .96;
  letter-spacing: .01em;
  text-transform: uppercase;
}
.ent-s-titre span { color: var(--bleu); }
.ent-s-chapo { margin: 0; font-size: 16px; line-height: 1.5; font-weight: 600; }
.ent-s-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }

.ent-bouton {
  width: 100%;
  background: var(--jaune);
  color: var(--ink);
  font-family: inherit;
  font-weight: 800;
  font-size: 17px;
  border: 1.5px solid var(--ink);
  border-radius: 8px;
  padding: 16px;
  cursor: pointer;
}
.ent-bouton-2 { background: var(--card); font-size: 15px; padding: 12px; }
.ent-bouton-petit { width: auto; font-size: 14px; padding: 10px 18px; }
.ent-retour2 {
  align-self: center;
  background: none; border: none; cursor: pointer;
  font-family: inherit; font-size: 14px; font-weight: 700; color: var(--sub);
  padding: 8px 12px;
}
.ent-retour2:hover { color: var(--ink); }
.ent-lien {
  align-self: flex-start;
  background: none; border: none; padding: 0; cursor: pointer;
  font-family: inherit; font-size: 14px; font-weight: 800; color: var(--bleu);
}
.ent-manque { font-size: 13px; font-weight: 700; color: var(--sub); min-height: 18px; }
.ent-refus { font-size: 13.5px; font-weight: 700; color: var(--rouge); }

/* --- les tuiles des sports (façon Komoot) --------------------------------- */

.ent-tuiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.ent-tuile {
  position: relative;
  height: 136px;
  background: var(--card);
  border: 1.5px solid var(--ink);
  border-radius: 14px;
  box-shadow: 3px 3px 0 rgba(21, 24, 13, .12);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  font-family: inherit; color: var(--ink); cursor: pointer;
}
.ent-tuile-on { background: var(--jaune); border-width: 2px; box-shadow: 4px 4px 0 var(--ink); }
.ent-tuile-nom { font-size: 16px; font-weight: 800; }
.ent-ic { width: 54px; height: 54px; display: block; }
.ent-ic-trio { display: flex; gap: 4px; }
.ent-ic-trio .ent-ic { width: 34px; height: 34px; }
.ent-tuile-coche {
  position: absolute; right: 10px; top: 10px;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--ink); color: var(--jaune);
  display: flex; align-items: center; justify-content: center;
}
.ent-tuile-coche svg { width: 14px; height: 14px; }

/* --- qu'est-ce qui t'amène ------------------------------------------------ */

.ent-objs { display: flex; flex-direction: column; gap: 10px; }
.ent-obj {
  position: relative;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  text-align: left;
  background: var(--card);
  border: 1.5px solid var(--ink);
  border-radius: 12px;
  padding: 16px 18px;
  font-family: inherit; color: var(--ink); cursor: pointer;
}
.ent-obj-on { background: var(--jaune); border-width: 2px; box-shadow: 4px 4px 0 var(--ink); }
.ent-obj-off { border-color: var(--line); color: var(--sub); cursor: default; }
.ent-obj-titre { font-size: 17px; font-weight: 800; }
.ent-obj-dit { font-size: 14px; font-weight: 500; margin-top: 2px; }
.ent-bientot {
  flex-shrink: 0;
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase; font-weight: 800;
  border: 1.5px solid var(--line); border-radius: 999px; padding: 4px 10px;
}

/* --- les champs et les puces ---------------------------------------------- */

.ent-lab { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--sub); font-weight: 800; }
.ent-champs2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ent-champ2 { display: flex; flex-direction: column; gap: 7px; }
.ent-in {
  box-sizing: border-box; width: 100%;
  border: 1.5px solid var(--ink); border-radius: 8px;
  padding: 10px 12px;
  font-family: inherit; font-size: 15px; font-weight: 700; color: var(--ink);
  background: var(--card);
}
textarea.ent-in { font-weight: 600; line-height: 1.45; resize: vertical; }
.ent-in-unite { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--sub); }
.ent-chrono { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--sub); }
.ent-chrono .ent-in { width: 64px; padding: 7px 8px; }

.ent-puces { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ent-puce {
  background: var(--card); color: var(--ink);
  border: 1.5px solid var(--ink); border-radius: 999px;
  padding: 8px 15px;
  font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
}
.ent-puce-on { background: var(--ink); color: var(--bg); }
/* V19.3 — « Tous » n'est pas un jour : un raccourci, en pointillés, à part */
.ent-puce-tous { margin-left: 10px; border-style: dashed; color: var(--bleu); background: transparent; }
.ent-puce-tous-on { border-style: solid; border-color: var(--bleu); background: var(--card); }
.ent-puces-mini { margin-top: 10px; }
.ent-puces-mini .ent-puce { padding: 5px 11px; font-size: 13px; }

.ent-depot {
  display: flex; flex-direction: column; gap: 4px;
  border: 2px dashed var(--ink); border-radius: 12px;
  padding: 16px 18px;
  background: var(--card);
  font-size: 15px; cursor: pointer;
}
.ent-depot-survol { background: var(--jaune); border-style: solid; }
.ent-depot-ok { border-style: solid; border-color: var(--vert); background: var(--vert-t); cursor: default; }

/* --- la fiche ------------------------------------------------------------- */

.ent-sec { display: flex; flex-direction: column; gap: 10px; padding-top: 16px; border-top: 1.5px solid var(--line); }
.ent-niv { display: flex; flex-direction: column; gap: 8px; background: var(--card); border: 1.5px solid var(--ink); border-radius: 12px; padding: 14px 16px; }
.ent-niv-nom { font-size: 16px; font-weight: 800; }
.ent-niv-q { font-size: 13.5px; font-weight: 700; color: var(--sub); margin-top: 4px; }

/* --- STEAVE lit ta fiche -------------------------------------------------- */

.ent-lit { display: grid; grid-template-columns: minmax(0, 1fr) 440px; gap: 48px; align-items: start; }
.ent-lit-fiche { display: flex; flex-direction: column; gap: 16px; }
.ent-recap { opacity: .85; }
.ent-rl { display: flex; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 14px; }
.ent-rl span { width: 150px; flex-shrink: 0; color: var(--sub); font-weight: 700; }
.ent-rl b { font-weight: 700; }

.ent-steave {
  background: var(--ink);
  border-radius: 14px;
  box-shadow: 6px 6px 0 rgba(21, 24, 13, .16);
  padding: 22px;
  display: flex; flex-direction: column; gap: 12px;
}
.ent-steave-tete { display: flex; align-items: center; gap: 12px; }
.ent-steave-tete img { height: 60px; width: auto; }
.ent-steave-nom { color: var(--bg); font-family: Anton, 'Arial Narrow', Impact, sans-serif; font-size: 24px; text-transform: uppercase; }
.ent-steave-sous { color: #C4CCD2; font-size: 12px; font-weight: 700; }
.ent-steave .ent-sub-clair { color: #C4CCD2; }
.ent-bq {
  background: #F0EFE6;
  border: 1.5px solid var(--ink);
  border-radius: 12px 12px 12px 2px;
  padding: 12px 14px;
  font-size: 14.5px; line-height: 1.45; font-weight: 600;
}
.ent-bq .ent-in { margin-top: 10px; font-size: 13.5px; }
.ent-bq-attente { opacity: .75; }
.ent-bq-erreur { border-color: var(--rouge); color: var(--rouge); }
.ent-toi {
  align-self: flex-end; max-width: 300px;
  background: var(--jaune);
  border: 1.5px solid var(--ink);
  border-radius: 12px 12px 2px 12px;
  padding: 10px 13px;
  font-size: 14px; font-weight: 700;
}
.ent-steave .ent-retour-clair { color: #C4CCD2; }

/* --- la proposition ------------------------------------------------------- */

.ent-construit {
  min-height: 100vh; box-sizing: border-box; padding: 40px 24px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  text-align: center;
}
.ent-construit img { height: 150px; width: auto; }
.ent-construit-titre { font-family: Anton, 'Arial Narrow', Impact, sans-serif; font-size: 40px; text-transform: uppercase; line-height: 1; }
.ent-construit .ent-s-actions { width: 100%; max-width: 420px; }

.ent-prop {
  max-width: 1180px; margin: 0 auto; padding: 40px 24px 80px;
  display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 36px; align-items: start;
}
.ent-prop-g { display: flex; flex-direction: column; gap: 16px; }
.ent-prop .ent-s-titre { font-size: 46px; }
.ent-etiq {
  align-self: flex-start;
  background: var(--card); border: 1.5px dashed var(--ink); border-radius: 999px;
  padding: 5px 12px;
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase; font-weight: 800;
}
.ent-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.ent-stats div { background: var(--card); border: 1.5px solid var(--ink); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.ent-stats b { font-family: Anton, 'Arial Narrow', Impact, sans-serif; font-weight: 400; font-size: 28px; line-height: 1; }
.ent-stats span { font-size: 12px; font-weight: 700; color: var(--sub); }
.ent-phases { display: flex; gap: 8px; }
.ent-phase { flex: 1; min-width: 0; background: var(--card); border: 1.5px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.ent-phase-nom { font-size: 14px; font-weight: 800; }
.ent-phase-quand { font-size: 12px; font-weight: 700; color: var(--bleu); margin-top: 2px; }
.ent-phase-but { font-size: 12.5px; font-weight: 500; margin-top: 4px; line-height: 1.35; }
.ent-ps-liste { display: flex; flex-direction: column; gap: 6px; }
.ent-ps {
  display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 12px; align-items: center;
  background: var(--card); border: 1.5px solid var(--ink); border-radius: 10px; padding: 10px 14px;
}
.ent-ps-change { border-color: var(--bleu); box-shadow: 3px 3px 0 rgba(40, 130, 208, .25); }
.ent-ps-j { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; font-weight: 800; }
.ent-ps-titre { font-size: 15px; font-weight: 800; }
.ent-ps-dit { font-size: 13px; font-weight: 500; color: #4A4F42; margin-top: 2px; }
.ent-ps-duree { font-size: 15px; font-weight: 800; color: var(--bleu); white-space: nowrap; }
.ent-change {
  display: inline-block; vertical-align: 2px;
  background: var(--bleu); color: #FFFFFF;
  border-radius: 999px; padding: 1px 8px;
  font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; font-weight: 800;
}
.ent-steave-prop { position: sticky; top: 24px; }
.ent-retenu { background: var(--card); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }
.ent-retenu-liste { display: flex; flex-wrap: wrap; gap: 5px; }
.ent-retenu-liste span { background: var(--bg); border: 1px solid var(--line); border-radius: 999px; padding: 3px 9px; font-size: 12px; font-weight: 700; }

/* --- tout le programme ---------------------------------------------------- */

.ent-voile { position: fixed; inset: 0; background: rgba(21, 24, 13, .45); z-index: 910; }
.ent-tout {
  position: fixed; z-index: 911;
  top: 4vh; bottom: 4vh; left: 50%; transform: translateX(-50%);
  width: min(900px, calc(100vw - 32px)); box-sizing: border-box;
  overflow-y: auto;
  background: var(--bg); border: 2px solid var(--ink); border-radius: 14px;
  padding: 24px 28px;
}
.ent-tout-tete { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.ent-tout .ent-s-titre { font-size: 38px; }
.ent-tout-ph { margin-top: 14px; }
.ent-tout-phnom { font-size: 15px; font-weight: 800; padding-bottom: 6px; }
.ent-tout-phnom span { font-weight: 500; color: var(--sub); }
.ent-tout-sem { display: grid; grid-template-columns: 42px 70px 64px minmax(0, 1fr); gap: 10px; padding: 6px 0; border-top: 1px solid var(--line); font-size: 13px; }
.ent-tout-sem span { font-weight: 600; }
.ent-tout-tot { color: var(--bleu); font-weight: 800 !important; }
.ent-tout-ss i { color: var(--sub); font-style: normal; font-weight: 700; }

/* --- la fête (E3-10) ------------------------------------------------------ */

.ent-fete {
  position: fixed; inset: 0; z-index: 920;
  background: #000000;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  padding: 24px; text-align: center;
}
.ent-fete img { width: min(520px, 90vw); height: auto; }
.ent-fete-titre { color: var(--jaune); font-family: Anton, 'Arial Narrow', Impact, sans-serif; font-size: 64px; text-transform: uppercase; line-height: 1; }
.ent-fete-main { color: var(--bg); font-family: 'Permanent Marker', cursive; font-size: 30px; transform: rotate(-3deg); }
.ent-fete-dit { color: #C4CCD2; font-size: 16px; font-weight: 600; }
.ent-bouton-fete { width: auto; padding: 15px 34px; border-color: var(--jaune); font-size: 16px; }

/* --- en étroit ------------------------------------------------------------ */

@media (max-width: 980px) {
  .ent-lit, .ent-prop { grid-template-columns: minmax(0, 1fr); }
  .ent-steave-prop { position: static; }
  .ent-phases { flex-wrap: wrap; }
  .ent-phase { flex: 1 1 45%; }
}
@media (max-width: 760px) {
  .ent-s { padding: 36px 16px 64px; }
  .ent-s-titre, .ent-prop .ent-s-titre { font-size: 38px; }
  .ent-tuiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ent-champs2 { grid-template-columns: minmax(0, 1fr); }
  .ent-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ent-prop { padding: 28px 16px 64px; }
  .ent-rl span { width: 110px; }
  .ent-tout { padding: 18px 16px; }
  .ent-tout-sem { grid-template-columns: 36px 60px minmax(0, 1fr); }
  .ent-tout-ss { grid-column: 1 / -1; }
  .ent-fete-titre { font-size: 44px; }
}

/* ==========================================================================
   V19.4 « L'accueil » — le parcours en conversation mixte (B2)
   Canvas : rangée « V19.4 — B2 ». Décisions : claude/decisions.md, V19.4.
   ========================================================================== */

.ent-compteur { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--sub); font-weight: 800; }
.ent-conv-page { position: relative; min-height: 100vh; overflow: hidden; }
.ent-conv { position: relative; z-index: 1; max-width: 780px; margin: 0 auto; padding: 56px 24px 96px; display: flex; flex-direction: column; gap: 14px; }

.ent-msg { display: flex; gap: 12px; align-items: flex-start; }
.ent-av { width: 42px; height: 42px; flex-shrink: 0; border-radius: 10px; background: var(--ink); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.ent-av img { height: 36px; width: auto; }
.ent-msg-corps { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.ent-bulle { max-width: 580px; background: #F0EFE6; border: 1.5px solid var(--ink); border-radius: 12px 12px 12px 2px; padding: 11px 14px; font-size: 15px; line-height: 1.45; font-weight: 600; }
.ent-bulle-ia { background: #E9F2FB; }
.ent-moi { align-self: flex-end; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; max-width: 480px; }
.ent-moi-bulle { background: var(--jaune); border: 1.5px solid var(--ink); border-radius: 12px 12px 2px 12px; padding: 9px 13px; font-size: 14.5px; font-weight: 700; }
.ent-moi-mot { margin-top: 4px; font-size: 13.5px; font-weight: 500; font-style: italic; }
.ent-modifier { background: none; border: none; padding: 2px 4px; cursor: pointer; font-family: inherit; font-size: 12.5px; font-weight: 800; color: var(--bleu); }

.ent-widget { align-self: stretch; background: var(--card); border: 2px solid var(--ink); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; box-shadow: 4px 4px 0 rgba(21, 24, 13, .12); }
.ent-widget-actions { display: flex; align-items: center; gap: 14px; }
.ent-valider { background: var(--jaune); border: 1.5px solid var(--ink); border-radius: 8px; padding: 10px 22px; font-family: inherit; font-size: 15px; font-weight: 800; color: var(--ink); cursor: pointer; }
.ent-passer { background: none; border: none; cursor: pointer; font-family: inherit; font-size: 14px; font-weight: 700; color: var(--sub); }
.ent-mot { display: flex; align-items: center; gap: 9px; border-top: 1px dashed var(--line); padding-top: 10px; color: var(--sub); }
.ent-mot .ent-in { border-style: dashed; border-color: var(--sub); font-size: 13.5px; font-weight: 600; padding: 7px 10px; }
.ent-wq { display: flex; flex-direction: column; gap: 7px; }
.ent-unite { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--sub); flex-wrap: wrap; }
.ent-unite .ent-in { width: 90px; }
.ent-unite i { font-style: normal; }

.ent-tuiles2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ent-tuile-bas { height: 64px; flex-direction: row; gap: 12px; }
.ent-tuile-bas .ent-ic { width: 36px; height: 36px; }

.ent-gpx { display: flex; align-items: center; justify-content: space-between; gap: 16px; border: 1.5px solid var(--ink); border-radius: 12px; padding: 12px 16px; background: var(--card); }
.ent-gpx-ok { border-color: var(--vert); background: var(--vert-t); }
.ent-gpx.ent-depot-survol { background: var(--jaune); }
.ent-ajouter { flex-shrink: 0; background: var(--jaune); border: 1.5px solid var(--ink); border-radius: 8px; padding: 9px 16px; font-size: 14px; font-weight: 800; cursor: pointer; }

.ent-acote { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; border: 1.5px solid var(--line); border-radius: 10px; padding: 9px 12px; }
.ent-acote b { width: 100px; font-size: 14px; }
.ent-acote-q { font-size: 13px; color: var(--sub); font-weight: 700; }

.ent-imports { display: flex; gap: 12px; }
.ent-import { flex: 1; display: flex; align-items: center; gap: 12px; background: var(--card); border: 1.5px solid var(--ink); border-radius: 10px; padding: 10px 14px; font-size: 15px; font-weight: 800; cursor: pointer; box-shadow: 3px 3px 0 rgba(21, 24, 13, .12); }
.ent-import img { width: 36px; height: 36px; border-radius: 8px; flex-shrink: 0; }
.ent-import-off { border-color: var(--line); color: var(--sub); cursor: default; box-shadow: none; }
.ent-import-vide { width: 36px; height: 36px; border-radius: 8px; flex-shrink: 0; background: var(--line); }

.ent-acquis { display: flex; flex-wrap: wrap; gap: 7px; }
.ent-acquis span { background: var(--card); border: 1.5px solid var(--line); border-radius: 999px; padding: 4px 11px; font-size: 12.5px; font-weight: 700; }
.ent-conv-suite { display: flex; flex-direction: column; gap: 8px; margin: 8px 0 0 54px; max-width: 460px; }

/* le squelette : STEAVE réfléchit (demandé par Max) */
.ent-bulle-sq { display: flex; flex-direction: column; gap: 7px; width: 300px; background: #EEF0E8; border-color: var(--line); }
.ent-bulle-sq span { display: block; height: 10px; border-radius: 5px; background: linear-gradient(90deg, #DCDFD3 0%, #F4F5EF 50%, #DCDFD3 100%); background-size: 200% 100%; animation: ent-sq 1.2s linear infinite; }
.ent-bulle-sq span:nth-child(2) { width: 85%; }
.ent-bulle-sq span:nth-child(3) { width: 55%; }
.ent-sq-dit { font-size: 12.5px; font-weight: 700; color: var(--sub); }
@keyframes ent-sq { from { background-position: 200% 0; } to { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) { .ent-bulle-sq span { animation: none; } }

.ent-fiche { display: flex; flex-direction: column; gap: 6px; background: var(--card); border: 1.5px solid var(--line); border-radius: 10px; padding: 10px 14px; }
.ent-fiche-dit { font-size: 13.5px; font-weight: 700; }
.ent-fiche-liens { display: flex; flex-wrap: wrap; gap: 12px; font-size: 13px; font-weight: 700; color: var(--sub); }
.ent-fiche-liens .ent-lien { font-size: 13px; }

.ent-prop .ent-compteur { margin-bottom: -6px; }
.ent-construit-noir { background: #000000; color: var(--bg); }
.ent-construit-noir .ent-sub { color: #C4CCD2; }
.ent-construit img.ent-galop { width: min(480px, 88vw); height: auto; }
.ent-fete img.ent-fete-chevalier { width: auto; height: min(300px, 40vh); }

@media (max-width: 760px) {
  .ent-conv { padding: 32px 16px 64px; }
  .ent-imports { flex-direction: column; }
  .ent-conv-suite { margin-left: 0; }
  .ent-bulle-sq { width: 220px; }
}

/* ------------------------------------------------ V20 · « Ton prénom ? » */
/* Même page que la présentation (ent-pr) : le chevalier sur noir plein, le
   grand titre dont la fin est en bleu, le bouton jaune large. Un champ en plus. */
.ent-prenom-champ {
  display: block;
  width: 100%;
  margin: 18px 0 6px;
  padding: 16px 18px;
  font-family: inherit;
  font-size: 20px;
  font-weight: 700;
  color: var(--ink);
  background: #FFFFFF;
  border: 1.5px solid var(--ink);
  border-radius: 8px;
}
.ent-prenom-champ:focus { outline: none; box-shadow: 3px 3px 0 var(--bleu); }
.ent-prenom-erreur { color: var(--rouge); font-weight: 700; font-size: 14px; margin: 4px 0; }


/* --- V21 — l'écran de chargement (index.html, #chargement) ---------------- */
.chargement {
  position: fixed; inset: 0; z-index: 960;
  background: var(--bg);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 26px; padding: 24px; box-sizing: border-box;
}
.chargement .ent-pr-carte { width: 260px; }
.chargement .ent-pr-scene { height: 290px; }
.chargement .ent-pr-chevalier { height: 240px; }
.chargement-texte {
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-size: 18px; font-weight: 700; color: var(--ink);
  animation: chargement-souffle 1.6s ease-in-out infinite;
}
@keyframes chargement-souffle { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .chargement-texte { animation: none; } }