/* Le Cartel : composants réutilisables (cartels, boutons, formulaires, états, chrono…). */

/* ---------- Cartel : la carte façon étiquette de musée ---------- */
.cartel {
  position: relative;
  background: var(--carte);
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
  padding: 16px 18px;
  box-shadow: var(--ombre);
}
.cartel + .cartel, .cartel + .bloc, .bloc + .cartel { margin-top: 14px; }
/* Double filet intérieur, comme les cartels sous verre */
.cartel--encadre {
  padding: 20px 22px;
  box-shadow: inset 0 0 0 5px var(--carte), inset 0 0 0 6px var(--filet), var(--ombre);
}
.cartel.fam { border-top: 3px solid var(--fam-vif); }
.cartel--bande.fam { border-top-width: 1px; border-left: 4px solid var(--fam-vif); }
.cartel--plat { box-shadow: none; }
.cartel--accent { border-color: color-mix(in srgb, var(--accent) 35%, var(--filet)); background: color-mix(in srgb, var(--accent-doux) 55%, var(--carte)); }

a.cartel, button.cartel {
  display: block;
  width: 100%;
  text-align: left;
  color: inherit;
  text-decoration: none;
  transition: transform var(--duree) var(--courbe), box-shadow var(--duree), border-color var(--duree);
}
a.cartel:hover, button.cartel:hover { border-color: var(--filet-fort); box-shadow: var(--ombre-forte); }
a.cartel:active, button.cartel:active { transform: scale(.99); }

.meta {
  display: block;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--encre-pale);
  margin-bottom: 6px;
}
.meta.fam { color: var(--fam-vif); }
.cartel__titre { font-family: var(--serif); font-size: 1.18rem; font-weight: 600; line-height: 1.25; margin: 0 0 4px; }
.cartel__texte { color: var(--encre-douce); margin: 0; }
.cartel__pied { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; color: var(--encre-pale); font-size: .88rem; }
.cartel__ligne { display: flex; align-items: center; gap: 14px; }
.cartel__ligne > .grandit { flex: 1; min-width: 0; }
.cartel__fleche { flex: none; width: 22px; height: 22px; color: var(--encre-pale); }

/* ---------- En-tête d'écran ---------- */
.entete { margin: 4px 0 20px; }
.entete__sur {
  display: block;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 6px;
}
.entete__sur.fam { color: var(--fam-vif); }
.entete h1 { margin-bottom: .3em; }
.entete__intro { color: var(--encre-douce); font-size: 1.02rem; margin: 0; max-width: var(--largeur-lecture); }

.section { margin-top: 30px; }
.section__titre {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--filet);
  font-size: 1.2rem;
}
.section__titre small { font-family: var(--sans); font-size: .82rem; font-weight: 500; color: var(--encre-pale); }

/* ---------- Grilles et piles ---------- */
.pile > * + * { margin-top: 12px; }
.pile-serree > * + * { margin-top: 8px; }
.grille { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); }
.grille-2 { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grille-3 { display: grid; gap: 10px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (min-width: 640px) { .grille-4 { display: grid; gap: 12px; grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 639.98px) { .grille-4 { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.rangee { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.rangee--fin { justify-content: flex-end; }
.rangee--entre { justify-content: space-between; }

/* ---------- Boutons ---------- */
.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 10px 20px;
  border: 1px solid var(--accent-plein);
  border-radius: var(--rayon);
  background: var(--accent-plein);
  color: var(--sur-accent);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.2;
  text-decoration: none;
  text-align: center;
  letter-spacing: .01em;
  transition: background var(--duree), border-color var(--duree), transform 120ms, box-shadow var(--duree);
  -webkit-user-select: none;
  user-select: none;
}
.bouton:hover { background: var(--accent-survol); border-color: var(--accent-survol); text-decoration: none; }
.bouton:active { transform: translateY(1px) scale(.985); }
.bouton svg { width: 20px; height: 20px; flex: none; }
.bouton[disabled], .bouton[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; }
.bouton--second {
  background: transparent;
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 55%, var(--filet));
}
.bouton--second:hover { background: var(--accent-doux); border-color: var(--accent); }
.bouton--discret {
  background: transparent;
  border-color: transparent;
  color: var(--encre-douce);
}
.bouton--discret:hover { background: color-mix(in srgb, var(--filet) 45%, transparent); border-color: transparent; color: var(--encre); }
.bouton--succes { background: var(--succes); border-color: var(--succes); color: var(--carte); }
.bouton--succes:hover { background: var(--succes); filter: brightness(1.08); }
.bouton--bloc { display: flex; width: 100%; }
.bouton--petit { min-height: 44px; padding: 8px 14px; font-size: .92rem; }
.bouton--grand { min-height: 54px; font-size: 1.06rem; padding: 12px 24px; }

.bouton-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  flex: none;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--encre-douce);
  text-decoration: none;
  transition: background var(--duree), color var(--duree);
}
.bouton-icone:hover { background: color-mix(in srgb, var(--filet) 50%, transparent); color: var(--encre); }
.bouton-icone svg { width: 22px; height: 22px; }

/* ---------- Puces (filtres) ---------- */
.puces { display: flex; flex-wrap: wrap; gap: 8px; }
.puces--defile {
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  margin: 0 -16px;
  padding: 2px 16px 6px;
  scroll-padding: 0 16px;
}
.puces--defile::-webkit-scrollbar { display: none; }
.puce {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  min-height: 44px;
  padding: 8px 15px;
  border: 1px solid var(--filet-fort);
  border-radius: 999px;
  background: var(--carte);
  color: var(--encre-douce);
  font-size: .92rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--duree), color var(--duree), border-color var(--duree);
}
.puce:hover { border-color: var(--encre-pale); color: var(--encre); }
.puce[aria-pressed="true"], .puce[aria-selected="true"], .puce.est-active {
  background: var(--encre);
  border-color: var(--encre);
  color: var(--papier);
}
.puce.fam[aria-pressed="true"] { background: var(--fam-vif); border-color: var(--fam-vif); color: var(--carte); }
.puce__point { width: 9px; height: 9px; border-radius: 50%; background: var(--fam-vif); flex: none; }

.etiquette {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: .76rem;
  font-weight: 600;
  line-height: 1.6;
  background: var(--papier-fonce);
  color: var(--encre-douce);
  white-space: nowrap;
}
.etiquette--succes { background: var(--succes-doux); color: var(--succes); }
.etiquette--erreur { background: var(--erreur-doux); color: var(--erreur); }
.etiquette--accent { background: var(--accent-doux); color: var(--accent); }
.etiquette--avert { background: var(--avert-doux); color: var(--avert); }
.etiquette.fam { background: var(--fam-fond); color: var(--fam-vif); }

/* ---------- Formulaires ---------- */
.champ { display: block; margin-bottom: 16px; }
.champ__libelle { display: block; font-weight: 600; margin-bottom: 6px; }
.champ__aide { display: block; font-size: .86rem; color: var(--encre-pale); margin-top: 4px; }
.saisie, textarea.saisie, select.saisie {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: 11px 13px;
  border: 1px solid var(--filet-fort);
  border-radius: var(--rayon);
  background: var(--carte-relief);
  color: var(--encre);
  font-size: max(16px, 1rem);   /* évite le zoom automatique d'iOS */
  line-height: 1.5;
  transition: border-color var(--duree), box-shadow var(--duree);
}
textarea.saisie { resize: vertical; min-height: 110px; }
.saisie::placeholder { color: color-mix(in srgb, var(--encre-pale) 80%, transparent); }
.saisie:focus { outline: none; border-color: var(--focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 25%, transparent); }
.saisie--serif { font-family: var(--serif); font-size: max(16px, 1.06rem); line-height: 1.65; }

.interrupteur { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 48px; cursor: pointer; }
.interrupteur input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.interrupteur__piste {
  position: relative;
  flex: none;
  width: 50px; height: 30px;
  border-radius: 999px;
  background: var(--filet-fort);
  transition: background var(--duree);
}
.interrupteur__piste::after {
  content: "";
  position: absolute;
  top: 3px; left: 3px;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--carte-relief);
  box-shadow: 0 1px 3px rgba(0,0,0,.25);
  transition: transform var(--duree) var(--courbe);
}
.interrupteur input:checked + .interrupteur__piste { background: var(--accent-plein); }
.interrupteur input:checked + .interrupteur__piste::after { transform: translateX(20px); }
.interrupteur input:focus-visible + .interrupteur__piste { outline: 3px solid var(--focus); outline-offset: 2px; }

.segments {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--filet);
  border-radius: calc(var(--rayon) + 4px);
  background: var(--papier-fonce);
}
.segments button {
  min-height: 44px;
  padding: 6px 10px;
  border: 0;
  border-radius: var(--rayon);
  background: transparent;
  color: var(--encre-douce);
  font-weight: 500;
}
.segments button[aria-pressed="true"] { background: var(--carte); color: var(--encre); font-weight: 650; box-shadow: var(--ombre); }

.message-erreur {
  margin: 10px 0 0;
  padding: 10px 14px;
  border-radius: var(--rayon);
  background: var(--erreur-doux);
  color: var(--erreur);
  font-weight: 500;
}
.message-erreur:empty { display: none; }
.message-info {
  padding: 12px 14px;
  border-radius: var(--rayon);
  background: var(--avert-doux);
  color: var(--encre);
  border-left: 3px solid var(--avert);
}

/* ---------- Progression : barres et anneaux ---------- */
.barre {
  --p: 0;
  position: relative;
  height: 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--filet) 70%, transparent);
  overflow: hidden;
}
.barre__remplissage {
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(var(--p) * 100%);
  border-radius: inherit;
  background: var(--accent-plein);
  transition: width 500ms var(--courbe);
}
.barre.fam .barre__remplissage { background: var(--fam-vif); }
.barre--fine { height: 5px; }
.barre--succes .barre__remplissage { background: var(--succes); }

.anneau { display: block; flex: none; }
.anneau__piste { stroke: color-mix(in srgb, var(--filet) 80%, transparent); }
.anneau__valeur { stroke: var(--fam-vif, var(--accent)); transition: stroke-dashoffset 700ms var(--courbe); }
.anneau__texte { font-family: var(--sans); font-weight: 700; fill: var(--encre); }

/* ---------- Chiffres clés ---------- */
.chiffre {
  padding: 12px 14px;
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
  background: var(--carte);
}
.chiffre__valeur { display: block; font-family: var(--serif); font-size: 1.6rem; font-weight: 600; line-height: 1.1; font-variant-numeric: lining-nums tabular-nums; }
.chiffre__libelle { display: block; font-size: .8rem; color: var(--encre-pale); margin-top: 3px; line-height: 1.3; }

/* ---------- Prose (Markdown rendu) ---------- */
.prose { max-width: var(--largeur-lecture); overflow-wrap: break-word; }
.prose p:last-child, .prose ul:last-child, .prose ol:last-child { margin-bottom: 0; }
.prose li { margin-bottom: .3em; }
.prose li::marker { color: var(--accent); }
.prose strong { font-weight: 650; color: var(--encre); }
.prose--serif { font-family: var(--serif); font-size: 1.06rem; line-height: 1.65; }

/* ---------- Repliables ---------- */
details.repli {
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
  background: var(--carte);
}
details.repli + details.repli { margin-top: 10px; }
details.repli > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 12px 16px;
  cursor: pointer;
  list-style: none;
  font-family: var(--serif);
  font-size: 1.08rem;
  font-weight: 600;
  border-radius: var(--rayon);
}
details.repli > summary::-webkit-details-marker { display: none; }
details.repli > summary::after {
  content: "";
  margin-left: auto;
  width: 10px; height: 10px;
  flex: none;
  border-right: 2px solid var(--encre-pale);
  border-bottom: 2px solid var(--encre-pale);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--duree) var(--courbe);
}
details.repli[open] > summary::after { transform: rotate(225deg) translate(-2px, -2px); }
details.repli > summary .etiquette { font-family: var(--sans); }
.repli__corps { padding: 0 16px 16px; }

/* ---------- Listes de liens ---------- */
.liste-liens { list-style: none; margin: 0; padding: 0; border: 1px solid var(--filet); border-radius: var(--rayon); background: var(--carte); overflow: hidden; }
.liste-liens > li + li { border-top: 1px solid var(--filet); }
.liste-liens a, .liste-liens button {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 56px;
  padding: 10px 16px;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  text-decoration: none;
}
.liste-liens a:hover, .liste-liens button:hover { background: color-mix(in srgb, var(--papier-fonce) 60%, transparent); }
.liste-liens .grandit { flex: 1; min-width: 0; }
.liste-liens__titre { display: block; font-weight: 550; line-height: 1.3; }
.liste-liens__sous { display: block; font-size: .85rem; color: var(--encre-pale); margin-top: 2px; }

/* ---------- Squelettes de chargement ---------- */
.squelette {
  position: relative;
  overflow: hidden;
  border-radius: var(--rayon-petit);
  background: color-mix(in srgb, var(--filet) 55%, transparent);
}
.squelette::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--carte) 70%, transparent), transparent);
  animation: lueur 1.4s infinite;
}
@keyframes lueur { to { transform: translateX(100%); } }
.squelette--titre { height: 34px; width: 62%; margin: 8px 0 14px; }
.squelette--ligne { height: 14px; margin: 10px 0; }
.squelette--ligne:nth-child(3n) { width: 82%; }
.squelette--ligne:nth-child(4n) { width: 68%; }
.squelette--carte { height: 104px; border-radius: var(--rayon); margin-top: 12px; }
.squelette--grande { height: 168px; border-radius: var(--rayon); margin-top: 12px; }

/* ---------- États vide et erreur ---------- */
.etat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  padding: 34px 18px;
  margin: 12px 0;
  border: 1px dashed var(--filet-fort);
  border-radius: var(--rayon-grand);
  background: color-mix(in srgb, var(--carte) 60%, transparent);
}
.etat__emoji { font-size: 2.6rem; line-height: 1; margin-bottom: 6px; }
.etat__titre { font-family: var(--serif); font-size: 1.25rem; font-weight: 600; margin: 0; }
.etat__texte { color: var(--encre-douce); margin: 0 0 10px; max-width: 30rem; }
.etat--erreur { border-style: solid; border-color: color-mix(in srgb, var(--erreur) 35%, var(--filet)); background: var(--erreur-doux); }

/* ---------- Notifications (toasts) ---------- */
#toasts {
  position: fixed;
  left: 50%;
  bottom: calc(var(--haut-nav) + var(--sure-bas) + 14px);
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: min(92vw, 26rem);
  transform: translateX(-50%);
  pointer-events: none;
}
@media (min-width: 900px) { #toasts { bottom: 24px; left: calc(50% + 132px); } }
.toast {
  padding: 12px 16px;
  border-radius: var(--rayon);
  background: var(--encre);
  color: var(--papier);
  box-shadow: var(--ombre-forte);
  font-weight: 500;
  pointer-events: auto;
  animation: toast-entree 260ms var(--courbe);
}
.toast--succes { background: var(--succes); color: var(--carte); }
.toast--erreur { background: var(--erreur); color: var(--carte); }
.toast.sort { opacity: 0; transform: translateY(8px); transition: opacity 240ms, transform 240ms; }
@keyframes toast-entree { from { opacity: 0; transform: translateY(10px); } }

/* ---------- Boîte de dialogue ---------- */
dialog.dialogue {
  width: min(92vw, 28rem);
  padding: 22px;
  border: 1px solid var(--filet);
  border-radius: var(--rayon-grand);
  background: var(--carte);
  color: var(--encre);
  box-shadow: var(--ombre-forte);
}
dialog.dialogue::backdrop { background: var(--voile); }
dialog.dialogue h2 { font-size: 1.3rem; }
dialog.dialogue p { color: var(--encre-douce); }
dialog.dialogue .rangee { margin-top: 18px; justify-content: flex-end; }
dialog.dialogue[open] { animation: dialogue-entree 220ms var(--courbe); }
@keyframes dialogue-entree { from { opacity: 0; transform: translateY(12px) scale(.98); } }

/* ---------- Chrono ---------- */
.chrono {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 6px 8px 6px 14px;
  border: 1px solid var(--filet-fort);
  border-radius: 999px;
  background: var(--carte);
}
.chrono__temps {
  font-family: var(--chiffres);
  font-size: 1.12rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
  min-width: 4.4ch;
}
.chrono__bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border: 0;
  border-radius: 50%;
  background: var(--papier-fonce);
  color: var(--encre);
}
.chrono__bouton svg { width: 18px; height: 18px; }
.chrono.est-alerte { border-color: var(--avert); background: var(--avert-doux); }
.chrono.est-alerte .chrono__temps { color: var(--avert); }
.chrono.est-fini { border-color: var(--erreur); background: var(--erreur-doux); animation: pulsation 1.2s 3; }
.chrono.est-fini .chrono__temps { color: var(--erreur); }
.chrono.est-pause .chrono__temps { opacity: .55; }
@keyframes pulsation { 50% { transform: scale(1.05); } }

/* Barre collante pour les exercices chronométrés */
.barre-outils {
  position: sticky;
  top: calc(var(--haut-barre) + var(--sure-haut));
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: -6px -16px 16px;
  padding: 8px 16px;
  background: color-mix(in srgb, var(--papier) 92%, transparent);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--filet);
}
@media (min-width: 900px) { .barre-outils { margin: -10px -32px 18px; padding: 10px 32px; } }
.barre-outils .grandit { flex: 1; min-width: 0; }
.etat-sauvegarde { font-size: .82rem; color: var(--encre-pale); }
.etat-sauvegarde.est-erreur { color: var(--erreur); }

/* ---------- Onglets ---------- */
.onglets {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: thin;
  margin: 0 -16px 14px;
  padding: 2px 16px 8px;
}
.onglets [role="tab"] {
  flex: none;
  min-height: 44px;
  padding: 8px 14px;
  border: 1px solid var(--filet-fort);
  border-radius: var(--rayon);
  background: var(--carte);
  color: var(--encre-douce);
  font-weight: 550;
  font-size: .92rem;
  white-space: nowrap;
}
.onglets [role="tab"][aria-selected="true"] { background: var(--encre); border-color: var(--encre); color: var(--papier); }
.onglets [role="tab"].onglet-copie { border-color: var(--accent); color: var(--accent); }
.onglets [role="tab"].onglet-copie[aria-selected="true"] { background: var(--accent-plein); border-color: var(--accent-plein); color: var(--sur-accent); }

/* Pastille ronde numérotée ou cochée */
.pastille {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1.5px solid var(--filet-fort);
  color: var(--encre-pale);
  font-weight: 700;
  font-size: .9rem;
  background: var(--carte);
}
.pastille svg { width: 18px; height: 18px; }
.pastille.est-faite { background: var(--succes); border-color: var(--succes); color: var(--carte); }
.pastille.est-lue { background: var(--fam-vif, var(--succes)); border-color: var(--fam-vif, var(--succes)); color: var(--carte); }

.cachee-tant-que { filter: blur(6px); user-select: none; }
.note-bas { font-size: .84rem; color: var(--encre-pale); }
.centre { text-align: center; }
.marge-haut { margin-top: 18px; }
.marge-haut-grande { margin-top: 30px; }
.sans-marge { margin: 0; }
.grandit { flex: 1; min-width: 0; }