/* ============================================================
   DCP — Jeu des cas d'usage
   ============================================================ */

/* Meme calage que .page-entete dans page.css : l'en-tete du site est dans
   le flux, ce retrait ne fait qu'espacer et suit l'accueil. */
.jeu {
  padding-block: 2.25rem 5rem;
}

/* --- Entete --------------------------------------------------------- */

/* L'entete partage le bord gauche de la laisse de lecture, comme les
   .page-entete des autres pages. Le decalage est ecrit ici plutot que dans
   le groupe de page.css parce que .jeu-entete n'existe que sur cette page,
   et parce que game.css est charge apres : une valeur posee la l'emporterait
   de toute facon. Le bloc etant deja borne a 720px, le max() suffit : il
   s'annule des que la fenetre descend sous la laisse. */
.jeu-entete {
  max-width: 720px;
  margin-bottom: 2.5rem;
  margin-left: max(0px, calc((100% - var(--laisse-texte)) / 2));
}

.jeu-eyebrow {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-gold-text);
  margin-bottom: 0.5rem;
}

.jeu-titre {
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  margin-bottom: 0.75rem;
}

.jeu-chapo {
  font-size: 1.0625rem;
  color: var(--text-secondary);
  line-height: 1.7;
  margin: 0;
}

/* Cadrage : rappeler que situations et services sont des exemples. Meme
   idiome encadre que .encart et .hors-perimetre (filet gauche or). */
.jeu-note {
  margin-top: 1.25rem;
  padding: 0.875rem 1.125rem;
  border-left: 3px solid var(--accent-gold);
  border-radius: 0 8px 8px 0;
  background-color: var(--surface);
  font-size: 0.9375rem;
  color: var(--text-secondary);
  line-height: 1.65;
}

.jeu-noscript,
.jeu-etat {
  padding: 1rem 1.25rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-secondary);
  font-size: 0.9375rem;
}

.jeu-etat--erreur {
  border-color: var(--status-err-text);
  background-color: var(--status-err-bg);
  color: var(--status-err-text);
}

/* --- Barre de pilotage ---------------------------------------------- */

.jeu-barre {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.25rem 1.5rem;
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 2rem;
}

.barre-cas {
  flex: 1 1 320px;
  min-width: 0;
}

.barre-label {
  display: block;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-gold-text);
  margin-bottom: 0.375rem;
}

.barre-select-enveloppe {
  position: relative;
  display: block;
}

.barre-select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  padding: 0.5rem 2.25rem 0.5rem 0.75rem;
  font-family: 'Source Serif Pro', Georgia, serif;
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--text-primary);
  background-color: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  text-overflow: ellipsis;
}

.barre-select:hover { border-color: var(--accent-gold); }

.barre-select:focus-visible {
  outline: 2px solid var(--accent-gold);
  outline-offset: 2px;
}

.barre-chevron {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--accent-gold-text);
  font-size: 0.875rem;
}

/* Bascule acheteur / vendeur */

.posture-groupe {
  display: inline-flex;
  padding: 3px;
  background-color: var(--surface-alt);
  border: 1.5px solid var(--border);
  border-radius: 999px;
}

.posture-btn {
  padding: 0.4375rem 1.125rem;
  border: none;
  border-radius: 999px;
  background: transparent;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease;
}

.posture-btn[aria-pressed="true"] {
  background-color: var(--text-primary);
  color: var(--bg);
}

.posture-btn:focus-visible {
  outline: 2px solid var(--accent-gold);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .posture-btn { transition: none; }
}

/* --- Le cas retenu --------------------------------------------------- */

.jeu-cas {
  margin-bottom: 2.5rem;
  max-width: 760px;
}

.cas-theme {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 0.375rem;
}

.cas-titre {
  font-size: clamp(1.375rem, 2.5vw, 1.875rem);
  margin-bottom: 0.5rem;
}

.cas-accroche {
  font-size: 1.0625rem;
  color: var(--text-secondary);
  line-height: 1.7;
  margin: 0;
}

/* --- Blocs ----------------------------------------------------------- */

.jeu-bloc { margin-bottom: 3.5rem; }

.jeu-legende {
  font-size: 1.25rem;
  margin-bottom: 0.375rem;
}

.jeu-sous-legende {
  font-size: 0.9375rem;
  color: var(--text-secondary);
  margin-bottom: 1.25rem;
}

.jeu-legende + .comparaison,
.jeu-legende + .jeu-colonnes { margin-top: 1.25rem; }

/* --- Comparaison avec / sans ----------------------------------------- */

.comparaison {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}

.carte-comparaison {
  padding: 1.5rem;
  border-radius: 10px;
  border: 1px solid var(--border);
}

/* Regle du site : sans le protocole, rouge leger ; avec lui, vert. Voir le
   bloc « Avant / sans le DCP » de tokens.css. */
.carte-comparaison--sans {
  background-color: var(--sans-dcp-fond);
  border-color: var(--sans-dcp-accent);
}

.carte-comparaison--avec {
  background-color: var(--avec-dcp-fond);
  border-color: var(--avec-dcp-accent);
}

.carte-comparaison-titre {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9375rem;
  font-weight: 600;
  margin-bottom: 0.625rem;
}

.carte-comparaison--sans .carte-comparaison-titre { color: var(--sans-dcp-accent); }
.carte-comparaison--avec .carte-comparaison-titre { color: var(--avec-dcp-accent); }

.carte-coche { font-size: 1rem; }

.carte-comparaison-texte {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--text-primary);
  margin: 0;
}

/* --- Deux colonnes : services / apports ------------------------------ */

.jeu-colonnes {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 1.25rem;
  align-items: start;
}

.colonne {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1.25rem;
  background-color: var(--bg);
}

.colonne-entete {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.375rem;
}

.colonne-titre {
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-gold-text);
}

.colonne-aide {
  font-size: 0.8125rem;
  color: var(--text-secondary);
  margin-bottom: 1rem;
}

/* Les services listes n'existent pas : l'avertissement doit se voir sans
   crier, d'ou le filet or plutot qu'un fond colore, qui entrerait en
   concurrence avec le rouge et le vert de la comparaison juste au-dessus. */
.colonne-avertissement {
  margin: -0.5rem 0 1rem;
  padding: 0.5rem 0.75rem;
  border-left: 3px solid var(--accent-gold);
  border-radius: 0 6px 6px 0;
  background-color: var(--surface);
  font-size: 0.8125rem;
  color: var(--text-secondary);
  line-height: 1.55;
}

.colonne-avertissement a { color: var(--accent-gold-text); }

.lien-action {
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  font-size: 0.8125rem;
  color: var(--text-secondary);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  white-space: nowrap;
}

.lien-action:hover { color: var(--accent-gold-text); }

.lien-action:focus-visible {
  outline: 2px solid var(--accent-gold);
  outline-offset: 2px;
  border-radius: 2px;
}

/* --- Liste des services ---------------------------------------------- */

.liste-services {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.service {
  position: relative;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  transition: border-color 150ms ease, background-color 150ms ease;
}

.service--actif {
  border-color: var(--status-ok-text);
  background-color: var(--status-ok-bg);
}

@media (prefers-reduced-motion: reduce) {
  .service { transition: none; }
}

/* La case native est masquee visuellement mais reste focalisable :
   l'etiquette entiere sert de cible de clic. */
.service-case {
  position: absolute;
  top: 0.9375rem;
  left: 0.875rem;
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--status-ok-text);
  cursor: pointer;
}

.service-etiquette {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.25rem 0.75rem;
  padding: 0.875rem 0.875rem 0.875rem 2.75rem;
  cursor: pointer;
}

.service-nom {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.35;
}

.service-type {
  justify-self: end;
  align-self: start;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.125rem 0.5rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--text-secondary);
  white-space: nowrap;
}

.service-type[data-type="aiguille"] { border-color: var(--accent-blue); }
.service-type[data-type="teinte"]   { border-color: var(--accent-gold); }

.service-accroche {
  grid-column: 1 / -1;
  font-size: 0.8125rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

.service-case:focus-visible + .service-etiquette {
  outline: 2px solid var(--accent-gold);
  outline-offset: 2px;
  border-radius: 6px;
}

.service-note {
  font-size: 0.8125rem;
  color: var(--text-secondary);
  font-style: italic;
  padding: 0.625rem 0.25rem 0;
  border-top: 1px dashed var(--border);
  margin-top: 0.25rem;
}

/* --- Apports groupe par groupe --------------------------------------- */

.apports {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.apports-invite {
  font-size: 0.9375rem;
  color: var(--text-secondary);
  padding: 1.5rem 1rem;
  text-align: center;
  border: 1px dashed var(--border);
  border-radius: 8px;
  margin: 0;
}

.groupe {
  border-left: 3px solid var(--border);
  padding-left: 1rem;
}

.groupe--probleme    { border-left-color: var(--status-err-text); }
.groupe--information { border-left-color: var(--accent-blue); }

.groupe-nature {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 0.25rem;
}

.groupe--probleme .groupe-nature    { color: var(--status-err-text); }
.groupe--information .groupe-nature { color: var(--accent-blue); }

.groupe-accroche {
  font-size: 1rem;
  margin-bottom: 0.375rem;
}

.groupe-definition {
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 0.75rem;
}

.effets {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.effet {
  padding: 0.625rem 0.75rem;
  border-radius: 6px;
  background-color: var(--surface);
  border-left: 3px solid var(--border);
}

.effet--alerte  { background-color: var(--status-err-bg); border-left-color: var(--status-err-text); }
.effet--info    { background-color: var(--surface);       border-left-color: var(--accent-blue); }
.effet--positif { background-color: var(--status-ok-bg);  border-left-color: var(--status-ok-text); }

.effet-service {
  font-size: 0.8125rem;
  font-weight: 600;
  margin-bottom: 0.1875rem;
  color: var(--text-primary);
}

.effet-texte {
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--text-primary);
  margin: 0;
}

/* --- Personas -------------------------------------------------------- */

.liste-personas {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.persona {
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  background-color: var(--bg);
}

.persona--ouvert { border-color: var(--accent-gold); }

.persona-tete {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  padding: 1rem 1.25rem;
  background: none;
  border: none;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  color: var(--text-primary);
}

.persona-tete:hover { background-color: var(--surface); }

.persona-tete:focus-visible {
  outline: 2px solid var(--accent-gold);
  outline-offset: -2px;
}

.persona-identite {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  flex: 1 1 auto;
  min-width: 0;
}

.persona-nom {
  font-family: 'Source Serif Pro', Georgia, serif;
  font-size: 1.0625rem;
  font-weight: 700;
}

.persona-metier {
  font-size: 0.8125rem;
  color: var(--text-secondary);
}

.persona-resume {
  font-size: 0.75rem;
  color: var(--text-secondary);
  padding: 0.1875rem 0.625rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  white-space: nowrap;
  flex-shrink: 0;
}

.persona-chevron {
  color: var(--accent-gold-text);
  flex-shrink: 0;
  transition: transform 200ms ease;
}

.persona-tete[aria-expanded="true"] .persona-chevron {
  transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
  .persona-chevron { transition: none; }
}

.persona-panneau {
  padding: 0 1.25rem 1.25rem;
  border-top: 1px solid var(--border);
  padding-top: 1rem;
}

.persona-portrait {
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--text-secondary);
  margin-bottom: 1.25rem;
}

.persona-sous-titre {
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-gold-text);
  margin-bottom: 0.625rem;
}

.persona-services { margin-bottom: 1.25rem; }
.persona-services ul { list-style: none; display: flex; flex-direction: column; gap: 0.75rem; }

.persona-service-nom {
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: 0.1875rem;
}

.persona-service-moti {
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0;
}

.persona-nu {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--text-secondary);
  padding: 0.875rem 1rem;
  border: 1px dashed var(--border);
  border-radius: 8px;
  margin-bottom: 1.25rem;
}

.persona-point { margin-bottom: 1rem; }
.persona-point:last-child { margin-bottom: 0; }

.persona-point-accroche {
  font-size: 0.9375rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.persona-point ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* --- Responsive ------------------------------------------------------ */

/* minmax(0, 1fr) et non 1fr : une piste de grille vaut min-width:auto par
   defaut et refuse alors de se reduire sous la largeur de son contenu,
   ce qui faisait deborder la colonne sur les petits ecrans. */
@media (max-width: 899px) {
  .jeu-colonnes { grid-template-columns: minmax(0, 1fr); }
  .comparaison  { grid-template-columns: minmax(0, 1fr); }
}

/* La barre bascule des que ses deux blocs ne tiennent plus cote a cote.
   En laissant faire l'enroulement, on obtenait deux rangees surmontees
   chacune de leur libelle, plus hautes que la version empilee. */
@media (max-width: 767px) {
  .jeu-barre {
    flex-direction: column;
    align-items: stretch;
    gap: 0.875rem;
    padding: 0.875rem 1rem;
  }

  /* La base de 320px de .barre-cas vaut pour la disposition en ligne ;
     en colonne elle s'appliquerait a la HAUTEUR et etirerait le bloc a
     320px pour 59px de contenu. */
  .barre-cas { flex: 0 0 auto; }

  /* « Vous etes » passe a cote du commutateur plutot qu'au-dessus :
     une rangee de moins, sans rien retirer au sens. */
  .barre-posture {
    display: flex;
    align-items: center;
    gap: 0.75rem;
  }

  .barre-posture .barre-label { margin-bottom: 0; }

  .posture-groupe { flex: 1; }

  /* Cible tactile confortable : 32px passait le minimum, sans plus. */
  .posture-btn {
    flex: 1;
    min-height: 40px;
  }
}

@media (max-width: 599px) {
  .jeu { padding-block: 1.5rem 3rem; }

  .persona-tete {
    flex-wrap: wrap;
    padding: 0.875rem 1rem;
  }

  .persona-resume { order: 3; }

  .persona-panneau { padding-inline: 1rem; }

  .service-etiquette { padding-left: 2.5rem; }
}

/* --- Les sections de la page Utiliser ------------------------------------ */

/* Trois sections, cibles des sous-titres du menu : les situations reelles,
   les avantages, les limites. L'en-tete colle en haut de la page, d'ou la
   marge de defilement. Le titre de section est plus grand que les legendes
   des paliers du jeu, qui deviennent ses sous-titres. */
.jeu-section { scroll-margin-top: 5rem; }

.jeu-section + .jeu-section {
  margin-top: 4rem;
  padding-top: 3rem;
  border-top: 1px solid var(--border);
}

.jeu-section-titre {
  font-size: clamp(1.375rem, 2.75vw, 1.875rem);
  margin-bottom: 1.5rem;
}

.jeu-legende--espace { margin-top: 2.5rem; }

/* Les gains et les limites : motif partage .depliant-item de base.css,
   borne a la laisse comme les textes courants. Chaque gain porte son
   exemple, tire d'un cas d'usage, et le principe qu'il cite. */
.gains {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: var(--laisse-texte);
}

.gains summary { font-size: 1rem; padding-block: 0.75rem; }

.gain-exemple {
  border-left: 3px solid var(--accent-gold);
  margin-left: 1.3125rem;
  padding-left: 0.875rem;
}

.gain-etiquette {
  display: block;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-gold-text);
  margin-bottom: 0.25rem;
}

.gain-principe { font-style: italic; }
.gain-principe a { color: var(--accent-gold-text); font-style: normal; font-weight: 600; }
.gain-principe a:hover { text-decoration: underline; }

.jeu-chute {
  max-width: 56ch;
  margin: 2rem 0 0;
  font-family: 'Source Serif Pro', Georgia, serif;
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--text-primary);
}

/* Le retour vers la page d'aiguillage, en bas du simulateur : le jeu est
   sorti de /cas-usage/ le 16 septembre 2026, il faut un chemin de retour
   autre que le bouton du navigateur. */
.jeu-retour {
  margin: 2.5rem 0 0;
  font-size: 0.875rem;
  font-weight: 600;
}