/* =========================================================================
   Diagnostic « Ton profil IA » — styles de page
   S'appuie sur /styles.css (tokens, boutons, header, footer).
   Règle AJans : un encadré a une bordure sur tout son tour, ou aucune.
   AJans — 2026-10
   ========================================================================= */

.dg { background: var(--color-off-white); padding: var(--space-16) 0 var(--space-24); min-height: 70vh; }
.dg .container { max-width: 760px; }
.dg [hidden] { display: none !important; }
.dg-ecran:focus { outline: none; }

/* ---------- Accueil ---------- */
.dg-accueil { text-align: center; padding: var(--space-12) 0; }
.dg-etiquette { margin-bottom: var(--space-4); }
.dg-h1 {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(36px, 6vw, 56px); line-height: 1.05; letter-spacing: -0.02em;
  margin: 0 0 var(--space-6);
}
.dg-chapo { font-size: var(--text-lead-size); line-height: var(--text-lead-line); color: var(--color-gray-700); max-width: 560px; margin: 0 auto var(--space-8); }
/* Accueil : aperçu des 4 profils (01/11/2026) */
.dg-apercu { max-width: 640px; margin: 0 auto var(--space-8); }
.dg-lequel { font-family: var(--font-display); font-weight: 700; font-size: 17px; margin: 0 0 var(--space-4); }
.dg-apercu-liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); align-items: end; }
.dg-apercu-liste li { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); }
.dg-apercu-liste img { display: block; height: 150px; width: auto; }
.dg-apercu-liste span { font-size: 14px; color: var(--color-gray-700); }
@media screen and (max-width: 640px) {
  /* Mobile : bouton et phrase de marque avant les profils, pour garder « Je commence » dans le premier écran */
  .dg-accueil { display: flex; flex-direction: column; align-items: center; }
  .dg-accueil > * { max-width: 100%; }
  .dg-apercu { order: 1; margin: var(--space-8) auto 0; }
  .dg-apercu-liste { grid-template-columns: repeat(2, 1fr); row-gap: var(--space-6); }
  .dg-apercu-liste img { height: 120px; }
  .dg-apercu-equipe img { height: 90px; }
  .dg-apercu-equipe .is-toi img { height: 120px; }
  .dg-perso { height: 96px; }
  .dg-equipe-membres .dg-robot { width: 72px; height: 72px; }
  .dg-equipe-membres span { font-size: 15px; }
}
/* Accueil : toi + ton équipe (01/11/2026) */
.dg-apercu-equipe img { height: 110px; }
.dg-apercu-equipe .is-toi img { height: 150px; }
.dg-apercu-equipe .is-toi span { font-weight: 700; color: var(--color-ink); }
/* Écran « Dernière chose » : choix du personnage */
.dg-perso-aide { font-size: var(--text-small-size); color: var(--color-gray-700); margin: 0 0 var(--space-3); }
.dg-persos { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); }
.dg-perso { display: flex; align-items: flex-end; justify-content: center; height: 132px; padding: 10px 6px 6px; border: 1px solid var(--color-gray-300, #D4D4D4); border-radius: var(--radius-md); background: var(--color-white); cursor: pointer; }
.dg-perso img { height: 100%; width: auto; }
.dg-perso:hover { background: var(--color-mustard-tint); border-color: var(--color-ink); }
.dg-perso:focus-visible { outline: 2px solid var(--color-ink); outline-offset: 2px; }
/* Résultat : l'équipe */
.dg-equipe-membres { list-style: none; margin: var(--space-6) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.dg-equipe-membres li { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); }
.dg-equipe-membres .dg-robot { width: 96px; height: 96px; }
.dg-equipe-membres span { font-family: var(--font-display); font-weight: 700; font-size: 17px; line-height: 1.25; }
.dg-marque { margin-top: var(--space-8); font-family: var(--font-display); font-weight: 700; font-size: 17px; color: var(--color-gray-700); }

/* ---------- Questions ---------- */
.dg-carte {
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
}
.dg-progression { display: flex; justify-content: space-between; font-size: var(--text-small-size); color: var(--color-gray-500); margin-bottom: var(--space-3); }
.dg-barre { height: 6px; border-radius: 999px; background: var(--color-gray-200); overflow: hidden; margin-bottom: var(--space-8); }
.dg-barre span { display: block; height: 100%; background: var(--color-mustard); border-radius: 999px; transition: width var(--transition-base); }
.dg-question { font-family: var(--font-display); font-weight: 700; font-size: clamp(22px, 3.4vw, 28px); line-height: 1.25; margin: 0 0 var(--space-2); }
.dg-aide { font-size: var(--text-small-size); color: var(--color-gray-500); margin: 0 0 var(--space-6); }
.dg-options { display: grid; gap: var(--space-3); margin-top: var(--space-6); }
.dg-option {
  display: block; width: 100%; text-align: left;
  font-family: var(--font-body); font-size: 16px; line-height: 1.4; color: var(--color-ink);
  background: var(--color-white);
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
}
.dg-option:hover { border-color: var(--color-ink); }
.dg-option[aria-pressed="true"] { border-color: var(--color-mustard); background: var(--color-mustard-tint); }
.dg-option:focus-visible, .dg-genre button:focus-visible, .dg-format button:focus-visible { outline: 2px solid var(--color-ink); outline-offset: 2px; }
.dg-actions { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); margin-top: var(--space-8); flex-wrap: wrap; }
.dg-retour { background: none; border: 0; padding: 8px 0; font-family: var(--font-display); font-weight: 500; font-size: 15px; color: var(--color-gray-700); }
.dg-retour:hover { color: var(--color-ink); }
.dg .btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }

/* Curseur heures */
.dg-curseur { margin-top: var(--space-8); }
.dg-curseur-valeur { font-family: var(--font-display); font-weight: 900; font-size: 44px; text-align: center; margin-bottom: var(--space-4); }
.dg-curseur-valeur.is-vide { color: var(--color-gray-500); font-size: 18px; font-weight: 500; padding: 14px 0; }
.dg-curseur input[type="range"] { width: 100%; accent-color: var(--color-mustard); height: 32px; }
.dg-curseur-bornes { display: flex; justify-content: space-between; font-size: var(--text-small-size); color: var(--color-gray-500); }

/* ---------- Écran avant résultat ---------- */
.dg-champ { display: block; margin-top: var(--space-6); }
.dg-champ span { display: block; font-size: var(--text-small-size); color: var(--color-gray-700); margin-bottom: var(--space-2); }
.dg-champ input[type="text"], .dg-champ input[type="email"] {
  width: 100%; font: inherit; font-size: 16px; padding: 12px 14px;
  border: 1px solid var(--color-gray-300); border-radius: var(--radius-md); background: var(--color-white);
}
.dg-champ input:focus { outline: 2px solid var(--color-mustard); outline-offset: 1px; border-color: var(--color-mustard); }
.dg-genre { display: flex; gap: var(--space-3); margin-top: var(--space-4); flex-wrap: wrap; }
.dg-genre button {
  flex: 1 1 180px; font-family: var(--font-display); font-weight: 700; font-size: 17px;
  padding: 16px; border-radius: var(--radius-md); border: 1px solid var(--color-ink); background: var(--color-white); color: var(--color-ink);
}
.dg-genre button:hover { background: var(--color-mustard-tint); }

/* ---------- Résultats ---------- */
.dg-bloc { margin-top: var(--space-12); }
.dg-bloc > h2 { font-family: var(--font-display); font-weight: 900; font-size: clamp(24px, 3.6vw, 32px); line-height: 1.2; margin: 0 0 var(--space-6); }
.dg-profil { text-align: center; }
.dg-chibi { width: 240px; height: 240px; margin: 0 auto var(--space-6); border-radius: 50%; background: var(--color-mustard-tint); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.dg-chibi img { width: 100%; height: 100%; object-fit: contain; }
.dg-chibi.is-vide { border: 2px dashed var(--color-mustard); }
.dg-prenom { font-family: var(--font-hand); font-size: 30px; color: var(--color-mustard-dark); margin: 0 0 var(--space-2); }
.dg-nom { font-family: var(--font-display); font-weight: 900; font-size: clamp(40px, 7vw, 64px); line-height: 1; letter-spacing: -0.02em; margin: 0 0 var(--space-4); }
.dg-phrase { font-size: 20px; color: var(--color-gray-700); margin: 0 auto var(--space-6); max-width: 560px; }
.dg-texte { text-align: left; font-size: 17px; line-height: 1.65; }
.dg-calcul { margin-top: var(--space-4); text-align: left; font-size: var(--text-small-size); color: var(--color-gray-700); }
.dg-calcul summary { cursor: pointer; color: var(--color-mustard-dark); font-weight: 500; }
.dg-calcul p { margin-top: var(--space-2); }

.dg-cadre { background: var(--color-white); border: 2px solid var(--color-ink); border-radius: 20px; padding: var(--space-8); }
.dg-echelle { text-align: center; }
.dg-echelle h2 { margin-bottom: var(--space-2); }
.dg-donnees { margin: var(--space-3) 0 0; padding-left: 1.2em; }
.dg-donnees li { margin-bottom: var(--space-2); line-height: 1.55; }
.dg-echelle-sous { color: var(--color-gray-700); margin: 0 0 var(--space-4); }
.dg-pastilles { display: flex; justify-content: center; gap: 14px; margin-bottom: var(--space-4); }
.dg-pastilles span { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--color-gray-300); background: var(--color-white); }
.dg-pastilles span.is-on { background: var(--color-mustard); border-color: var(--color-mustard); }
.dg-marche { font-size: 19px; margin: 0 0 var(--space-2); }
.dg-marche-ligne { color: var(--color-gray-700); margin: 0; }
.dg-fragile { margin-top: var(--space-6); text-align: left; background: var(--color-mustard-tint); border: 1px solid var(--color-mustard); border-radius: var(--radius-md); padding: var(--space-4) var(--space-6); font-size: 16px; }
.dg-marque-res { margin-top: var(--space-6); font-family: var(--font-display); font-weight: 700; }
.dg-marque-res span, .dg-marque span { display: block; }

.dg-geste { margin-top: var(--space-6); }
.dg-suivante { font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--color-mustard-dark); text-transform: uppercase; letter-spacing: .06em; margin: 0 0 var(--space-2); }
.dg-geste h3 { font-family: var(--font-display); font-weight: 900; font-size: 24px; margin: 0 0 var(--space-4); }
.dg-geste p { font-size: 17px; line-height: 1.65; margin: 0 0 var(--space-4); }
.dg-prefixe { font-weight: 500; }
.dg-prompt { position: relative; background: var(--color-off-white); border: 1px solid var(--color-gray-300); border-radius: var(--radius-md); padding: var(--space-4) var(--space-4) var(--space-12); margin: 0 0 var(--space-4); }
.dg-prompt pre { white-space: pre-wrap; font-family: var(--font-body); font-size: 16px; line-height: 1.6; margin: 0; }
.dg-copier { position: absolute; right: 12px; bottom: 12px; font-family: var(--font-display); font-weight: 700; font-size: 14px; padding: 8px 14px; border-radius: var(--radius-sm); border: 1px solid var(--color-ink); background: var(--color-white); }
.dg-copier:hover { background: var(--color-mustard-tint); }

.dg-assistants { display: grid; gap: var(--space-4); }
.dg-assistant { display: grid; grid-template-columns: 72px 1fr; gap: var(--space-4); align-items: start; }
.dg-robot { width: 72px; height: 72px; border-radius: 16px; background: var(--color-mustard-tint); overflow: hidden; }
.dg-robot img { width: 100%; height: 100%; object-fit: contain; }
.dg-assistant h3 { font-family: var(--font-display); font-weight: 700; font-size: 19px; margin: 0 0 4px; }
.dg-assistant p { margin: 0 0 6px; font-size: 16px; line-height: 1.5; }
.dg-besoin { color: var(--color-gray-700); }
.dg-note { font-size: var(--text-small-size); color: var(--color-mustard-dark); }

.dg-chiffre-n { font-family: var(--font-display); font-weight: 900; font-size: 120px; line-height: 1; letter-spacing: -0.03em; }
.dg-chiffre-u { font-family: var(--font-display); font-weight: 700; font-size: 28px; line-height: 1.2; margin-top: var(--space-1); }
.dg-chiffre p { font-size: 17px; line-height: 1.65; margin: var(--space-3) 0 0; }

.dg-cas blockquote { font-family: var(--font-display); font-weight: 700; font-size: 20px; line-height: 1.35; margin: 0 0 var(--space-3); }

.dg-offre h3 { font-family: var(--font-display); font-weight: 900; font-size: 24px; margin: 0 0 var(--space-2); }
.dg-offre p { margin: 0 0 var(--space-6); font-size: 17px; }
.dg-secondaire { margin-top: var(--space-4); text-align: center; }

.dg-format { display: inline-flex; border: 1px solid var(--color-ink); border-radius: 999px; overflow: hidden; margin-bottom: var(--space-6); }
.dg-format button { font-family: var(--font-display); font-weight: 700; font-size: 14px; padding: 10px 18px; border: 0; background: var(--color-white); color: var(--color-ink); }
.dg-format button[aria-pressed="true"] { background: var(--color-ink); color: var(--color-white); }
.dg-apercus { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); margin-bottom: var(--space-6); }
.dg-apercus img { width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--color-gray-200); background: var(--color-white); }
.dg-partage-info { font-size: var(--text-small-size); color: var(--color-gray-500); margin-top: var(--space-3); }

.dg-form .dg-case { display: flex; gap: var(--space-3); align-items: flex-start; margin-top: var(--space-6); font-size: 15px; }
.dg-form .dg-case input { margin-top: 4px; width: 18px; height: 18px; accent-color: var(--color-mustard); flex: none; }
.dg-piege { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }
.dg-mention { font-size: 13px; color: var(--color-gray-500); margin-top: var(--space-4); line-height: 1.5; }
.dg-mention a { color: var(--color-gray-700); text-decoration: underline; }
.dg-statut { margin-top: var(--space-4); font-size: 15px; }
.dg-statut.is-ok { color: var(--color-success); }
.dg-statut.is-erreur { color: var(--color-error); }

.dg-pied { margin-top: var(--space-16); text-align: center; font-size: var(--text-small-size); color: var(--color-gray-700); }
.dg-pied a { color: var(--color-gray-700); text-decoration: underline; }
.dg-refaire { margin-top: var(--space-6); }

@media screen and (max-width: 640px) {
  .dg { padding-top: var(--space-8); }
  .dg-carte, .dg-cadre { padding: var(--space-6); }
  .dg-apercus { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .dg-chibi { width: 200px; height: 200px; }
}