:root {
  --bg: #faf7f2;
  --ink: #2a2a2a;
  --accent: #3a6b5c;
  --accent-light: #e4efe9;
  --user-bubble: #3a6b5c;
  --bot-bubble: #ffffff;
  --border: #e2ddd3;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Segoe UI', system-ui, sans-serif;
  background: var(--bg);
  color: var(--ink);
  display: flex;
  flex-direction: column;
  height: 100vh;
}

header {
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--border);
  /* Liseré d'habillage : décoratif, jamais sur du texte (confort/presets.js). */
  box-shadow: inset 0 -3px 0 var(--altair-accent-color, var(--border));
  background: #fff;
}

.header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
}

header h1 {
  margin: 0;
  font-size: 1.4rem;
  color: var(--accent);
}

.tag {
  font-size: 0.7rem;
  vertical-align: middle;
  background: var(--accent-light);
  color: var(--accent);
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  margin-left: 0.5rem;
}

.subtitle {
  margin: 0.2rem 0 0;
  font-size: 0.9rem;
  color: #666;
}

.voice-settings {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.8rem;
  color: #555;
}

.voice-settings select {
  font-size: 0.8rem;
  padding: 0.2rem 0.4rem;
  border-radius: 0.4rem;
  border: 1px solid var(--border);
}

.auto-read-toggle {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  white-space: nowrap;
}

main#chat {
  flex: 1;
  overflow-y: auto;
  padding: 1rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.bubble {
  max-width: 70%;
  padding: 0.6rem 0.9rem;
  /* Forme choisie par l'habillage ; 1rem = forme historique. */
  border-radius: var(--altair-bubble-radius, 1rem);
  line-height: 1.4;
}

.bubble p {
  margin: 0.9rem 0;
}
.bubble p:first-child { margin-top: 0; }
.bubble p:last-child { margin-bottom: 0; }

.bubble ul {
  margin: 0.9rem 0;
  padding-left: 1.2rem;
}

.bubble code {
  font-family: 'Cascadia Code', Consolas, 'Courier New', monospace;
  background: var(--accent-light);
  padding: 0.1rem 0.3rem;
  border-radius: 0.3rem;
  font-size: 0.95em;
}

.bubble .frac {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  vertical-align: middle;
  margin: 0 0.2em;
  font-size: 0.85em;
  line-height: 1.15;
  transform: translateY(0.05em);
}

.bubble .frac-num {
  padding: 0 0.2em 0.05em;
  border-bottom: 1.5px solid currentColor;
}

.bubble .frac-den {
  padding: 0.05em 0.2em 0;
}

.bubble .figure-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 1rem;
  margin: 0.9rem 0;
}

.bubble .figure-pie {
  width: 100px;
  height: 100px;
  flex-shrink: 0;
}

.bubble .figure-bars {
  max-width: 100%;
  height: auto;
}

.bubble .figure-geo {
  width: 170px;
  height: 170px;
  flex-shrink: 0;
}

.bubble .figure-rosace {
  width: 150px;
  height: 150px;
  flex-shrink: 0;
}

.bubble .figure-fibonacci {
  width: 230px;
  height: auto;
  flex-shrink: 0;
}

/* Volontairement compactes : l'intérêt pédagogique est de voir plusieurs
   étapes côte à côte (flocon 1, 2, 3) dans une même rangée. */
.bubble .figure-fractale {
  width: 140px;
  height: 140px;
  flex-shrink: 0;
}

.bubble .figure-tournesol {
  width: 190px;
  height: 190px;
  flex-shrink: 0;
}

.bubble .table-pythagore {
  border-collapse: collapse;
  font-size: 0.75rem;
  background: #fff;
}

.bubble .table-pythagore th,
.bubble .table-pythagore td {
  border: 1px solid var(--border);
  padding: 0.25rem 0.4rem;
  text-align: center;
  min-width: 1.6em;
}

.bubble .table-pythagore th {
  background: var(--accent-light);
  color: var(--accent);
}

.bubble .table-pythagore .table-pythagore-hl {
  background: var(--accent);
  color: #fff;
  font-weight: 600;
}

.bubble .formula {
  font-family: 'Cascadia Code', Consolas, 'Courier New', monospace;
  background: var(--accent-light);
  border-left: 3px solid var(--accent);
  color: var(--ink);
  padding: 0.4rem 0.7rem;
  margin: 0.5rem 0;
  border-radius: 0.4rem;
  white-space: nowrap;
  overflow-x: auto;
  font-size: 1.05rem;
}

.bubble.user {
  align-self: flex-end;
  background: var(--user-bubble);
  color: #fff;
  border-bottom-right-radius: 0.2rem;
  white-space: pre-wrap;
}

.bubble.bot {
  align-self: flex-start;
  background: var(--bot-bubble);
  border: 1px solid var(--border);
  border-bottom-left-radius: 0.2rem;
}

.bubble.system {
  align-self: center;
  background: #fff3cd;
  border: 1px solid #ffe08a;
  font-size: 0.85rem;
  color: #7a5b00;
  white-space: pre-wrap;
}

/* Photo du sujet sous une réponse d'Altaïr (public/conversation/photo.js). */
.bubble .photo-reponse {
  margin: 0.9rem 0 0.2rem;
}

.bubble .photo-reponse img {
  display: block;
  max-width: 100%;
  max-height: 320px;
  height: auto;
  border-radius: 0.5rem;
}

.bubble .photo-reponse figcaption {
  margin-top: 0.35rem;
  font-size: 0.9em;
}

.bubble .photo-reponse .photo-credit {
  display: block;
  margin-top: 0.15rem;
  opacity: 0.7;
  font-size: 0.85em;
}

.bubble-image {
  max-width: 220px;
  max-height: 220px;
  border-radius: 0.5rem;
  display: block;
  margin-bottom: 0.4rem;
}

.speak-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.95rem;
  padding: 0.1rem 0.3rem;
  color: var(--accent);
  margin-top: 0.3rem;
}

.image-preview {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 1.5rem;
  background: #fff;
  border-top: 1px solid var(--border);
}

.image-preview[hidden] {
  display: none;
}

.image-preview img {
  max-height: 70px;
  border-radius: 0.4rem;
}

.image-preview button {
  padding: 0.2rem 0.6rem;
  background: #eee;
  color: #333;
}

form#chat-form {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--border);
  background: #fff;
}

textarea {
  flex: 1;
  resize: none;
  padding: 0.6rem;
  border-radius: 0.6rem;
  border: 1px solid var(--border);
  font-family: inherit;
  font-size: 1rem;
}

button {
  padding: 0 1.2rem;
  border: none;
  border-radius: 0.6rem;
  background: var(--accent);
  color: #fff;
  font-size: 1rem;
  cursor: pointer;
}

button:disabled {
  opacity: 0.6;
  cursor: default;
}

#image-btn,
#mic-btn {
  padding: 0 0.7rem;
  background: var(--accent-light);
  color: var(--accent);
  font-size: 1.2rem;
  flex-shrink: 0;
}

/* Anneau d'habillage autour du micro : décoratif, le pictogramme garde sa
   couleur. */
#mic-btn {
  box-shadow: 0 0 0 2px var(--altair-accent-color, transparent);
}

#mic-btn.listening {
  background: #e35d5d;
  color: #fff;
  animation: pulse 1s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

/* ---------- Accueil ---------- */

.home-link {
  color: inherit;
  text-decoration: none;
  margin-right: 0.3rem;
}

.accueil {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

.accueil-card {
  text-align: center;
  max-width: 420px;
}

.accueil-card h1 {
  font-size: 2rem;
  color: var(--accent);
  margin-bottom: 0.5rem;
}

.accueil-tagline {
  color: #555;
  margin-bottom: 1.5rem;
}

.accueil-ai-notice {
  display: inline-block;
  background: var(--accent-light);
  color: var(--accent);
  font-size: 0.85rem;
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  margin-bottom: 1.5rem;
}

.accueil-cta {
  display: inline-block;
  padding: 0.8rem 1.8rem;
  background: var(--accent);
  color: #fff;
  text-decoration: none;
  border-radius: 0.6rem;
  font-size: 1.1rem;
}

/* Second chemin depuis l'accueil : l'atelier d'écriture cursive, destiné au
   primaire. Volontairement moins appuyé que le bouton principal. */
.accueil-lien-second {
  display: block;
  margin-top: 1rem;
  color: var(--accent);
  font-size: 0.95rem;
}

.accueil-footer {
  text-align: center;
  padding: 1rem;
}

.accueil-footer a {
  color: #999;
  font-size: 0.8rem;
  text-decoration: none;
}

.accueil-footer a:hover {
  text-decoration: underline;
}

/* ---------- Espace parents ---------- */

.parents-main {
  flex: 1;
  overflow-y: auto;
  padding: 1.5rem;
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.parents-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 0.6rem;
  padding: 1.2rem 1.5rem;
}

.parents-card h2 {
  margin-top: 0;
  font-size: 1.1rem;
  color: var(--accent);
}

.parents-card h3 {
  font-size: 0.95rem;
  color: #555;
}

.hint {
  font-size: 0.85rem;
  color: #666;
}

.error-text {
  color: #b3261e;
  font-size: 0.85rem;
}

.saved-text {
  color: var(--accent);
  font-size: 0.85rem;
}

.ok-text {
  color: var(--accent);
}

.warning-text {
  color: #7a5b00;
  font-size: 0.9rem;
}

#pin-form, #pin-change-form {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}

#pin-input, #new-pin-1, #new-pin-2, #niveau-select,
#langue-select, #heure-limite-input, #duree-max-select,
#vitesse-lecture-select, #vitesse-ecriture-select, #devoirs-input {
  padding: 0.5rem 0.7rem;
  border-radius: 0.4rem;
  border: 1px solid var(--border);
  font-size: 1rem;
}

#devoirs-input {
  flex: 1;
  min-width: 220px;
  font-family: inherit;
  resize: vertical;
}

#devoirs-mic-btn {
  flex-shrink: 0;
  background: var(--accent-light);
  color: var(--accent);
  font-size: 1.1rem;
  align-self: flex-start;
}

#devoirs-mic-btn.listening {
  background: #e35d5d;
  color: #fff;
}

.field-label {
  display: block;
  margin: 0.8rem 0 0.3rem;
  font-size: 0.9rem;
  color: var(--ink);
}

.parents-card h2 + .field-label {
  margin-top: 0.3rem;
}

.inline-field {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.secondary-btn {
  background: #eee;
  color: #333;
}

.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.tab-btn {
  background: var(--accent-light);
  color: var(--accent);
}

.tab-btn.active {
  background: var(--accent);
  color: #fff;
}

.incidents-list {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.incident {
  display: flex;
  gap: 0.7rem;
  flex-wrap: wrap;
  padding: 0.5rem 0.7rem;
  border-radius: 0.4rem;
  border: 1px solid var(--border);
  font-size: 0.85rem;
}

.incident.critical {
  border-color: #e35d5d;
  background: #fdeceb;
}

.incident-date {
  color: #777;
}

.incident-level {
  font-weight: 600;
}

/* ---------- Confort visuel de la zone de conversation ---------- */

/* Tout ce qui est réglable par un parent passe par ces variables, posées sur
   le conteneur par confort/appliquer.js. Aucune bulle, aucune formule, aucune
   figure ne définit sa propre police ou sa propre couleur de texte : elles
   héritent. C'est ce qui permet d'ajouter demain un type de bulle sans avoir
   à le rendre réglable, et c'est aussi pourquoi le cadre d'aperçu de l'espace
   parents ne peut pas diverger de la vraie conversation - il porte la même
   classe.

   Les valeurs ci-dessous sont les mêmes que REGLAGES_PAR_DEFAUT dans
   confort/presets.js : elles servent de filet si le JavaScript n'a pas encore
   posé les variables (première peinture, réseau lent). */
.altair-conversation {
  --altair-font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  --altair-bg-color: #FDFBF7;
  --altair-text-color: #2D2D2D;
  --altair-font-size-scale: 1;
  --altair-letter-spacing: 0.02em;
  --altair-line-height: 1.5;
  --altair-font-weight: 400;
  --altair-eleve-bg: #4C4C4B;
  --altair-eleve-text: #FDFBF7;
  --altair-surface: #ECEBE7;
  --altair-bordure: #CFCECB;

  /* Même mise en page que main#chat : les bulles s'alignent à gauche ou à
     droite via align-self, ce qui suppose un conteneur en colonne. L'aperçu
     du panneau parent en hérite au lieu de la redéfinir. */
  display: flex;
  flex-direction: column;
  gap: 0.75rem;

  background: var(--altair-bg-color);
  color: var(--altair-text-color);
  font-family: var(--altair-font-family);
  /* En rem, jamais en px : la taille de base reste celle que l'utilisateur a
     réglée dans son navigateur ou son système, et notre multiplicateur s'y
     ajoute au lieu de l'écraser. */
  font-size: calc(1rem * var(--altair-font-size-scale));
  letter-spacing: var(--altair-letter-spacing);
  line-height: var(--altair-line-height);
  /* 180 ms, une seule courbe, aucun déplacement : le texte ne bouge pas, seule
     la couleur fond/texte se fait rejoindre. Pas de rebond ni de flash - les
     animations sont un risque connu pour les profils TDAH. */
  transition: background-color 180ms ease, color 180ms ease;
}

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

.altair-conversation .bubble {
  font-weight: var(--altair-font-weight);
  line-height: inherit;
  letter-spacing: inherit;
}

/* La bulle d'Altaïr porte exactement le couple du preset : le ratio affiché
   par le badge de l'aperçu est donc celui que l'enfant lit vraiment, sans
   correction cachée. Elle se distingue du fond par son liseré, qui ne
   concerne aucun texte et ne change donc aucun contraste. */
.altair-conversation .bubble.bot {
  background: var(--altair-bg-color);
  color: var(--altair-text-color);
  /* L'accent d'habillage (≥ 3:1 contre les six fonds, vérifié par les tests)
     ne colore que le liseré ; sans habillage posé - aperçu du panneau
     parent - le liseré dérivé du confort reprend sa place. */
  border-color: var(--altair-accent-color, var(--altair-bordure));
}

/* La bulle de l'enfant est dérivée du même couple (85 % de la couleur de
   texte versés dans le fond, texte repris du fond) et non d'une teinte
   choisie à part : elle reste AAA dans les six presets, y compris en mode
   sombre, et le vert de marque ne vient pas s'y imposer sans avoir été
   validé pour chaque fond. */
.altair-conversation .bubble.user {
  background: var(--altair-eleve-bg);
  color: var(--altair-eleve-text);
}

/* Fonds dérivés, calculés en JavaScript pour être vérifiables par les tests
   (voir MELANGES dans confort/appliquer.js). Sans cela, un fond vert pâle en
   dur laisserait un texte clair illisible dès que le parent choisit le mode
   sombre. */
.altair-conversation .bubble code,
.altair-conversation .bubble .formula,
.altair-conversation .bubble .table-pythagore th {
  background: var(--altair-surface);
  color: var(--altair-text-color);
}

.altair-conversation .bubble .formula {
  border-left-color: var(--altair-text-color);
}

.altair-conversation .bubble .table-pythagore {
  background: var(--altair-bg-color);
  color: var(--altair-text-color);
}

.altair-conversation .bubble .table-pythagore th,
.altair-conversation .bubble .table-pythagore td {
  border-color: var(--altair-bordure);
}

.altair-conversation .bubble .table-pythagore .table-pythagore-hl {
  background: var(--altair-eleve-bg);
  color: var(--altair-eleve-text);
}

.altair-conversation .speak-btn {
  color: var(--altair-text-color);
}


/* ---------- Habillage (choisi par l'enfant dans le chat) ----------
   Une rangée de vraies cases radio, habillées. La vignette montre l'accent et
   la forme de bulle qu'elle propose ; le nom est toujours écrit, la couleur ne
   porte jamais seule l'information. */
.habillage-selecteur {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin: 0.5rem 0 0;
  padding: 0;
  border: 0;
  font-size: 0.8rem;
  color: #555;
}

.habillage-selecteur legend {
  float: left;
  margin-right: 0.3rem;
  padding: 0;
}

.habillage-vignette {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: #fff;
  cursor: pointer;
}

.habillage-vignette input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.habillage-vignette:has(input:checked) {
  border-color: var(--vignette-accent);
  box-shadow: 0 0 0 1px var(--vignette-accent);
  color: #222;
  font-weight: 600;
}

.habillage-vignette:has(input:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.habillage-pastille {
  width: 1rem;
  height: 0.75rem;
  border: 2px solid var(--vignette-accent);
  background: #fff;
}

.habillage-pastille.forme-arrondie { border-radius: 0.35rem; }
.habillage-pastille.forme-douce { border-radius: 0.15rem; }
.habillage-pastille.forme-ronde { border-radius: 999px; }

/* Ce que fait Altaïr, en une phrase discrète (zone aria-live). La hauteur est
   réservée : le texte qui apparaît ne fait pas sauter la mise en page. */
.etat-conversation {
  min-height: 1.2em;
  margin: 0.3rem 0 0;
  font-size: 0.85rem;
  font-style: italic;
  color: #555;
}

/* Libellé lu par les lecteurs d'écran mais non affiché. */
.visuellement-masque {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Lien vers la carte de progression, dans l'en-tête du chat. */
.lien-carte {
  margin-left: 0.6rem;
  font-size: 0.8rem;
  font-weight: 600;
  vertical-align: middle;
  color: var(--accent);
}

/* ---------- Atelier de code (public/code/atelier.js) ---------- */
.atelier-code {
  margin: 10px 0;
  border: 1px solid var(--accent, #3a6b5c);
  border-radius: 10px;
  background: var(--accent-light, #e4efe9);
  padding: 10px;
}
.atelier-entete { margin-bottom: 6px; font-weight: 600; }
.atelier-editeur {
  width: 100%;
  box-sizing: border-box;
  font: 0.95rem/1.45 ui-monospace, Consolas, monospace;
  color: #1a1a1a;
  background: #fff;
  border: 1px solid #b9c7c0;
  border-radius: 6px;
  padding: 8px;
  resize: vertical;
  tab-size: 2;
  white-space: pre;
  overflow: auto;
}
.atelier-barre { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.atelier-barre button {
  font: inherit;
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid var(--accent, #3a6b5c);
  background: #fff;
  color: var(--accent, #3a6b5c);
  cursor: pointer;
  min-height: 36px;
}
.atelier-barre button.atelier-lancer { background: var(--accent, #3a6b5c); color: #fff; font-weight: 600; }
.atelier-barre button:focus-visible { outline: 3px solid #1a1a1a; outline-offset: 2px; }
.atelier-scene { margin-top: 8px; }
.atelier-cadre { width: 100%; max-width: 420px; border: 0; border-radius: 6px; background: #fff; display: block; }
.atelier-outils { margin-top: 8px; font-size: 0.9rem; }
.atelier-outils summary { cursor: pointer; }
.atelier-outils p { margin: 4px 0; }
.atelier-note { opacity: 0.8; }

/* ---------- Agrandissement des photos et figures (conversation/agrandir.js) ---------- */

.bubble .photo-reponse,
.bubble .figure-row .figure {
  position: relative;
}

.bubble .photo-reponse img,
.bubble .figure-row .figure > svg {
  cursor: zoom-in;
}

.bubble .photo-reponse img:focus-visible,
.bubble .figure-row .figure > svg:focus-visible {
  outline: 3px solid #1a1a1a;
  outline-offset: 2px;
  box-shadow: 0 0 0 6px #fff; /* double anneau : lisible sur fond clair comme sombre */
}

/* Petite loupe sur le coin de l'image, posée par agrandir.js. */
.zoom-loupe {
  position: absolute;
  width: 28px;
  height: 28px;
  padding: 4px;
  box-sizing: border-box;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  pointer-events: none;
}

.zoom-loupe svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Visualiseur plein écran. Couleurs fixes (et non celles de l'habillage) : fond
   sombre, boutons blancs et anneau de focus jaune restent lisibles quel que soit
   l'habillage ou le contraste choisi. Aucune animation. */
.agrandir {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  background: rgba(10, 10, 10, 0.88);
  color: #fff;
}

.agrandir-barre {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  padding: 8px 6px;
}

.agrandir-bouton {
  min-width: 44px;
  min-height: 44px;
  padding: 0 8px;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  color: #111;
  background: #fff;
  border: 2px solid #fff;
  border-radius: 8px;
  cursor: pointer;
}

.agrandir-bouton:hover {
  background: #e8e8e8;
}

.agrandir-bouton:focus-visible {
  outline: 3px solid #ffd54a;
  outline-offset: 2px;
}

.agrandir-fermer {
  font-size: 1.4rem;
}

.agrandir-scene {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  touch-action: none;
  cursor: grab;
}

.agrandir-contenu {
  position: absolute;
  max-width: none;
  max-height: none;
  border-radius: 4px;
  user-select: none;
  -webkit-user-drag: none;
}

.agrandir-legende {
  max-height: 25vh;
  overflow-y: auto;
  padding: 8px 16px 12px;
  text-align: center;
}

.agrandir-legende p {
  margin: 0.2rem 0;
}

.agrandir-credit {
  font-size: 0.85em;
  opacity: 0.85;
}

@media (prefers-reduced-motion: reduce) {
  .agrandir, .agrandir * { animation: none !important; transition: none !important; }
}

/* ---------- Connexion (étape 3) ---------- */

.compte-form {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  max-width: 360px;
}

.compte-form[hidden] {
  display: none;
}

.compte-form input {
  padding: 0.5rem 0.7rem;
  border-radius: 0.4rem;
  border: 1px solid var(--border);
  font-size: 1rem;
}

.compte-form button {
  margin-top: 0.6rem;
  align-self: flex-start;
}

/* Bouton qui a l'air d'un lien : « Mot de passe oublié ? ». */
.lien-bouton {
  background: none;
  border: none;
  padding: 0;
  color: var(--accent);
  text-decoration: underline;
  font-size: 0.9rem;
  cursor: pointer;
}

/* Qui travaille aujourd'hui ? (connexion.html, famille de plusieurs enfants). */
.choix-enfants {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 0.75rem;
  margin: 1rem 0;
}
.choix-enfant {
  min-height: 4.5rem;
  padding: 0.9rem 1rem;
  border: 2px solid var(--border);
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
  font-size: 1.15rem;
  font-weight: 600;
  cursor: pointer;
}
.choix-enfant:hover,
.choix-enfant:focus-visible {
  border-color: var(--accent);
  background: var(--accent-light);
}
.choix-enfant.actif { border-color: var(--accent); }
.choix-niveau {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--accent);
}

/* Espace parents : liste des enfants (Paramètres). */
.enfants-liste { list-style: none; padding: 0; margin: 0.5rem 0 1rem; }
.enfants-liste li {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--border);
}
.enfants-liste li strong { min-width: 8rem; }

/* ---------- Bouton FR | EN (public/bouton-langue.js) ----------
   Deux vraies cases radio habillées en interrupteur ; le choix coché est
   écrit en gras et encadré, la couleur ne porte jamais seule l'information. */
.bouton-langue {
  display: inline-flex;
  margin: 0;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 999px;
  overflow: hidden;
  font-size: 0.8rem;
  background: #fff;
}

.bouton-langue-choix {
  position: relative;
  padding: 0.25rem 0.6rem;
  cursor: pointer;
  color: #555;
}

.bouton-langue-choix input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.bouton-langue-choix:has(input:checked) {
  background: var(--accent-light);
  color: var(--accent);
  font-weight: 700;
}

.bouton-langue-choix:has(input:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.accueil-langue {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 0.5rem;
}