/* ---------- Accueil (hub) ---------- */
.hub-hero { text-align: center; max-width: 64ch; margin: 8px auto 30px; }
.hub-mark { width: 60px; height: 60px; border-radius: 16px; font-size: 23px; border-width: 2px; margin: 6px auto 14px; }
.hub-title { font-size: clamp(30px, 4vw, 42px); margin: 0 0 10px; letter-spacing: .01em; }
.hub-lede { font-size: 17px; color: var(--ink-soft); margin: 0 auto 18px; max-width: 56ch; }
.hub-gardefou { text-align: left; max-width: 60ch; margin: 0 auto 16px; font-size: 14px; }
.hub-state { font-family: var(--sans); font-size: 12.5px; color: var(--ink-soft); }
.hub-state-n { font-weight: 700; color: var(--c-a); }
/* Filet doré décoratif entre les familles */
.fam { margin: 0 0 30px; }
.fam-h { display: flex; align-items: flex-start; gap: 11px; padding-bottom: 10px; margin-bottom: 14px; border-bottom: 1px solid var(--hairline); }
.fam-ht { flex: 1 1 auto; min-width: 0; }
.fam-t { font-size: 20px; margin: 0; }
.fam-note { font-family: var(--sans); font-size: 12.5px; color: var(--ink-soft); margin: 2px 0 0; }
.fam-count { font-family: var(--sans); font-size: 12px; font-weight: 700; color: var(--ink-soft); white-space: nowrap; padding-top: 4px; }
.fam-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(264px, 1fr)); gap: 14px; }
.toolcard {
  display: flex; flex-direction: column; gap: 7px;
  background: var(--card); border: 1px solid var(--hairline); border-radius: 13px;
  box-shadow: var(--shadow); padding: 14px 15px; text-decoration: none; color: inherit;
  position: relative;
}
.toolcard.is-dispo { cursor: pointer; transition: border-color .15s, transform .05s; }
.toolcard.is-dispo:hover { border-color: var(--gold); }
.toolcard.is-dispo:active { transform: translateY(1px); }
.toolcard-h { display: flex; align-items: center; gap: 7px; }
.toolcard-code { font-family: var(--sans); font-size: 10.5px; font-weight: 700; color: var(--n-on); background: var(--n-surface); padding: 2px 7px; border-radius: 20px; }
.toolcard-star { color: var(--gold); font-size: 14px; line-height: 1; }
.toolcard-t { font-size: 15.5px; margin: 0; line-height: 1.25; }
.toolcard-p { font-family: var(--sans); font-size: 12.5px; color: var(--ink-soft); margin: 0; line-height: 1.45; }
.toolcard-f { margin-top: auto; padding-top: 4px; }
.toolcard-soon { font-family: var(--sans); font-size: 11px; color: var(--ink-soft); opacity: .75; }
/*  Le Grand Livre — consultation                                        */
/* ===================================================================== */
/* Carte d'accès depuis le hub (hero) */
.hub-gl { display: flex; align-items: center; gap: 13px; text-align: left; max-width: 60ch; margin: 0 auto 18px;
  padding: 12px 15px; background: var(--card-2); border: 1px solid var(--hairline); border-radius: 13px;
  box-shadow: var(--shadow); text-decoration: none; color: inherit; transition: border-color .15s, transform .05s; }
.hub-gl:hover { border-color: var(--gold); }
.hub-gl:active { transform: translateY(1px); }
.hub-gl-mark { flex: 0 0 auto; display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 10px;
  font-family: var(--serif); font-size: 22px; color: var(--gold); border: 1.5px solid var(--gold);
  background: color-mix(in srgb, var(--gold) 9%, var(--card)); line-height: 1; }
.hub-gl-b { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.hub-gl-t { font-family: var(--serif); font-size: 15.5px; color: var(--ink); }
.hub-gl-s { font-family: var(--sans); font-size: 12.5px; color: var(--ink-soft); line-height: 1.4; }
.hub-gl-go { flex: 0 0 auto; font-size: 18px; color: var(--gold); }
/* Rangée d'accès (Grand Livre + Calendrier) */
.hub-acces { display: flex; gap: 12px; flex-wrap: wrap; max-width: 60ch; margin: 0 auto 18px; }
.hub-acces .hub-gl { flex: 1 1 260px; margin: 0; max-width: none; }
.hub-cal .hub-gl-mark { color: var(--c-c); border-color: var(--c-c); background: color-mix(in srgb, var(--c-c) 9%, var(--card)); }
.hub-cal .hub-gl-mark svg { width: 21px; height: 21px; }
.hub-cal .hub-gl-go { color: var(--c-c); }
.hub-cal:hover { border-color: var(--c-c); }
/* Vue de consultation (iframe) */
.gl-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.gl-head-l { min-width: 0; }
.gl-open { white-space: nowrap; }
.gl-frame-wrap { width: 100%; }
.gl-frame { width: 100%; height: calc(100dvh - 210px); min-height: 460px; border: 1px solid var(--hairline);
  border-radius: 14px; box-shadow: var(--shadow); background: var(--card); display: block; }
@media (max-width: 860px) { .gl-frame { height: calc(100dvh - 230px); } }
/* Réinitialisation ciblée (cases à cocher) */
.rz-list { display: flex; flex-direction: column; gap: 1px; margin: 4px 0 8px; }
.rz-row { display: flex; align-items: flex-start; gap: 11px; padding: 9px 11px; border-radius: 10px; cursor: pointer; transition: background .12s; }
.rz-row:hover { background: var(--card-2); }
.rz-cb { margin-top: 2px; width: 16px; height: 16px; accent-color: var(--gold); flex: 0 0 auto; cursor: pointer; }
.rz-row-b { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.rz-row-b b { font-size: 14px; color: var(--ink); }
.rz-row-d { font-size: 12px; color: var(--ink-soft); line-height: 1.35; }
.rz-count { flex: 0 0 auto; align-self: center; font-size: 12px; color: var(--ink-soft); font-variant-numeric: tabular-nums; min-width: 2.5ch; text-align: right; }
.rz-total { margin: 2px 0 10px; font-weight: 600; color: var(--ink); }
.rz-go { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, var(--hairline)); }
.rz-go:hover { border-color: var(--danger); color: var(--danger); }
.cr-go { font-size: 14.5px; padding: 11px 18px; }
.cr-confirm { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, var(--hairline)); font-weight: 600; }
.cr-confirm:hover { border-color: var(--danger); background: color-mix(in srgb, var(--danger) 9%, var(--card)); }
/* ============================================================
   Synchronisation multi-appareils (chiffrée, opt-in)
   ============================================================ */
.sync-etat { font-family: var(--sans); font-size: 14.5px; margin: 0 0 2px; }
.sync-hint { font-family: var(--sans); font-size: 12.5px; margin: 0 0 10px; }
.sync-warn { font-family: var(--sans); font-size: 12.5px; line-height: 1.5; margin: 10px 0;
  padding: 9px 12px; border-radius: 10px; border-left: 3px solid var(--gold);
  background: color-mix(in srgb, var(--gold) 9%, transparent); }
.ia-transp-l { margin: 0; padding-left: 16px; }


/* Lot 4 : l'iframe dit où elle en est (chargement pulsé, échec avec secours) */
.gl-frame-wrap { position: relative; }
.gl-chargement::before { content: ''; position: absolute; inset: 0; border-radius: 14px;
  background: var(--card); border: 1px solid var(--hairline);
  animation: attente-pulse 1.2s var(--ease) infinite alternate; }
.gl-chargement .gl-frame { opacity: 0; }
.gl-echec { margin-top: 10px; }


/* ===== Lot 5 : le pigment de famille atteint les cartes du hub ===== */
.fam { position: relative; }
.fam-ic { display: inline-grid; place-items: center; flex: 0 0 auto; margin-top: 2px; }
.fam-ic svg { width: 19px; height: 19px; }
.fam-filigrane { position: absolute; top: -10px; right: -6px; opacity: .045; pointer-events: none; }
.fam-filigrane svg { width: 120px; height: 120px; stroke-width: 1; }
.toolcard.is-avenir { opacity: .82; }
#fam-acquisition .toolcard-code { background: var(--a-surface); }
#fam-methode .toolcard-code { background: var(--b-surface); }
#fam-memoire .toolcard-code, #fam-organisation .toolcard-code { background: var(--c-surface); }
#fam-redevabilite .toolcard-code, #fam-pilotage .toolcard-code { background: var(--e-surface); }
#fam-acquisition .toolcard.is-dispo:hover { border-color: var(--a-line); }
#fam-methode .toolcard.is-dispo:hover { border-color: var(--b-line); }
#fam-memoire .toolcard.is-dispo:hover, #fam-organisation .toolcard.is-dispo:hover { border-color: var(--c-line); }
#fam-redevabilite .toolcard.is-dispo:hover, #fam-pilotage .toolcard.is-dispo:hover { border-color: var(--e-line); }
.hub-acces { max-width: 78ch; }
.hub-bible .hub-gl-mark { color: var(--d-text); border-color: var(--c-d); background: color-mix(in srgb, var(--c-d) 9%, var(--card)); }
.hub-bible .hub-gl-mark svg { width: 20px; height: 20px; }
.hub-bible:hover { border-color: var(--d-line); }
.hub-bible .hub-gl-go { color: var(--d-text); }

/* Les 3 acces du hero tiennent sur une rangee (lot 5) */
.hub-acces .hub-gl { flex: 1 1 200px; }


/* ===== Lot 13 : Données & sauvegarde ===== */
/* Le réglage le plus utilisé remonte en tête sur mobile */
@media (max-width: 860px) { .panel-apparence { order: -1; } }
/* La zone dangereuse SE VOIT (rentrée, effacement) */
.panel-danger { border-color: var(--danger-line); }
.panel-danger .panel-t { color: var(--danger-text); }

/* =====================================================================
   Référentiel IED — maquette officielle L1
   ===================================================================== */
.ied-statut { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; }
.ied-statut .pastille { margin-top: 3px; }
.ied-statut div { font-family: var(--sans); font-size: 13px; line-height: 1.55; }
.ied-formation { display: flex; flex-wrap: wrap; gap: 5px 12px; margin: 0 0 28px; padding: 0 4px;
  font-family: var(--sans); font-size: 12.5px; color: var(--ink-soft); }
.ied-formation b { color: var(--ink); }
.ied-semestre { margin: 0 0 34px; }
.ied-sem-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  padding-bottom: 10px; margin-bottom: 14px; border-bottom: 1px solid var(--hairline); }
.ied-surtitle { margin: 0 0 2px; font-family: var(--sans); font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em; color: var(--d-text); }
.ied-sem-title, .ied-section-head h2 { margin: 0; font-size: 21px; }
.ied-totaux { display: flex; flex-wrap: wrap; gap: 6px; }
.ied-totaux .chip { cursor: default; }
.ied-ue-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 390px), 1fr)); gap: 14px; align-items: start; }
.ied-ue { padding: 0; overflow: hidden; }
.ied-ue-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 15px 16px 11px; }
.ied-ue-title { margin: 0; font-size: 16px; }
.ied-table-wrap { overflow-x: auto; border-top: 1px solid var(--hairline); }
.ied-table { width: 100%; min-width: 520px; border-collapse: collapse; font-family: var(--sans); }
.ied-table caption { padding: 8px 14px; text-align: left; font-size: 11px; color: var(--ink-soft); background: var(--card-2); }
.ied-table th, .ied-table td { padding: 9px 10px; border-top: 1px solid var(--hairline); text-align: right; font-size: 12px; }
.ied-table thead th { border-top: 0; font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); }
.ied-table th:first-child { text-align: left; }
.ied-table tbody tr:hover { background: var(--card-2); }
.ied-matiere { width: 58%; color: var(--ink); font-weight: 600; }
.ied-matiere > span:first-child { display: block; }
.ied-choix { display: block; margin-top: 3px; color: var(--ink-soft); font-size: 10.5px; font-weight: 400; line-height: 1.35; }
.ied-n { white-space: nowrap; color: var(--ink-soft); }
.ied-section { margin: 0 0 32px; }
.ied-section-head { margin: 0 0 13px; }
.ied-section-head .muted { margin-top: 3px; }
.ied-regles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 12px; }
.ied-regle { display: flex; flex-direction: column; gap: 7px; box-shadow: none; }
.ied-regle-head { display: flex; align-items: center; gap: 8px; }
.ied-regle h3 { margin: 0; font-size: 15px; }
.ied-regle p { margin: 0; font-family: var(--sans); font-size: 12.5px; line-height: 1.5; color: var(--ink-soft); }
.ied-regle .ied-prudence { color: var(--react-text); font-weight: 600; }
.ied-a-confirmer { margin-bottom: 32px; border-left: 4px solid var(--gold); }
.ied-checklist { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 10px 18px;
  list-style: none; padding: 0; margin: 0; }
.ied-checklist li { display: flex; align-items: flex-start; gap: 9px; }
.ied-checklist .pastille { margin-top: 2px; }
.ied-checklist b { display: block; font-size: 13.5px; }
.ied-checklist p, .ied-checklist span { display: block; margin: 2px 0 0; font-family: var(--sans); font-size: 11.5px; line-height: 1.45; color: var(--ink-soft); }
.ied-source-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 12px; }
.ied-source { display: flex; align-items: center; gap: 11px; padding: 13px; text-decoration: none; color: inherit; box-shadow: none; }
.ied-source:hover { border-color: var(--d-line); }
.ied-source-ic { display: grid; place-items: center; width: 36px; height: 36px; flex: 0 0 auto; border-radius: 10px;
  background: var(--d-surface); color: var(--d-on); }
.ied-source-ic svg { width: 19px; height: 19px; }
.ied-source-body { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ied-source-body b { font-size: 13px; line-height: 1.3; }
.ied-source-body span, .ied-source-body small { font-family: var(--sans); font-size: 10.5px; line-height: 1.35; color: var(--ink-soft); }
.ied-source-go { margin-left: auto; color: var(--d-text); }

@media (max-width: 560px) {
  .ied-sem-head { align-items: flex-start; }
  .ied-totaux { width: 100%; }
  .ied-table { min-width: 470px; }
}

/* =====================================================================
   Assistant de rentrée — parcours court et progressif
   ===================================================================== */
.ob-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.ob-head .view-sub { max-width: 58ch; }
.ob-skip { flex: 0 0 auto; }
.ob-progress { display: grid; grid-template-columns: repeat(6, 1fr); gap: 7px; margin: 0 0 14px; }
.ob-progress-step { position: relative; display: flex; align-items: center; gap: 6px; min-width: 0;
  font-family: var(--sans); color: var(--ink-soft); }
.ob-progress-step::after { content: ''; position: absolute; left: calc(100% - 2px); right: -9px; top: 12px;
  height: 1px; background: var(--hairline); }
.ob-progress-step:last-child::after { display: none; }
.ob-progress-step > span { position: relative; z-index: 1; display: grid; place-items: center; width: 24px; height: 24px;
  flex: 0 0 auto; border: 1px solid var(--hairline); border-radius: 50%; background: var(--card); font-size: 10.5px; }
.ob-progress-step small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; }
.ob-progress-step[data-state='active'] { color: var(--a-text); font-weight: 700; }
.ob-progress-step[data-state='active'] > span { border-color: var(--a-surface); background: var(--a-surface); color: var(--a-on); }
.ob-progress-step[data-state='done'] > span { border-color: var(--ok-surface); background: var(--ok-surface); color: var(--ok-on); }
.ob-progress-step[data-state='done']::after { background: var(--ok-surface); }
.ob-card { max-width: 860px; min-height: 480px; margin: 0 auto; padding: clamp(20px, 4vw, 38px); }
.ob-step { min-height: 400px; display: flex; flex-direction: column; }
.ob-kicker { margin: 0 0 5px; font-family: var(--sans); font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .09em; color: var(--a-text); }
.ob-step h2 { margin: 0 0 8px; font-size: clamp(22px, 3vw, 29px); }
.ob-lede { max-width: 66ch; margin: 0 0 24px; font-family: var(--sans); color: var(--ink-soft); font-size: 14px; line-height: 1.6; }
.ob-promesses { display: grid; grid-template-columns: repeat(3, 1fr); gap: 11px; margin: 2px 0 24px; }
.ob-promise { display: flex; align-items: flex-start; gap: 10px; padding: 13px; border: 1px solid var(--hairline);
  border-radius: 12px; background: var(--card-2); }
.ob-promise-ic { display: grid; place-items: center; width: 32px; height: 32px; flex: 0 0 auto;
  border-radius: 9px; color: var(--a-on); background: var(--a-surface); }
.ob-promise-ic svg { width: 17px; height: 17px; }
.ob-promise b, .ob-promise small { display: block; font-family: var(--sans); }
.ob-promise b { font-size: 13px; }
.ob-promise small { margin-top: 2px; color: var(--ink-soft); font-size: 11px; line-height: 1.4; }
.ob-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 22px; }
.ob-fact { padding: 12px 14px; border-radius: 11px; background: var(--a-surface); color: var(--a-on); }
.ob-fact span, .ob-fact b { display: block; font-family: var(--sans); }
.ob-fact span { font-size: 10.5px; opacity: .78; }
.ob-fact b { margin-top: 2px; font-size: 14px; }
.ob-field { margin-bottom: 18px; }
.ob-field > .muted { margin-bottom: 3px; }
.ob-options { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.ob-options-compact { display: flex; flex-wrap: wrap; gap: 8px; }
.ob-choice { padding: 9px 14px; border: 1px solid var(--hairline); border-radius: 9px; background: var(--card);
  color: var(--ink-soft); font-family: var(--sans); cursor: pointer; }
.ob-choice[data-on='true'] { border-color: var(--a-surface); background: var(--a-surface); color: var(--a-on); font-weight: 700; }
.ob-rhythm-grid { display: grid; grid-template-columns: minmax(190px, .7fr) minmax(280px, 1.3fr); gap: 22px; }
.ob-hours { width: 110px; font-variant-numeric: tabular-nums; }
.ob-days { display: flex; flex-wrap: wrap; gap: 7px; }
.ob-day { width: 48px; min-height: 42px; border: 1px solid var(--hairline); border-radius: 10px; background: var(--card);
  color: var(--ink-soft); font-family: var(--sans); font-size: 12px; cursor: pointer; }
.ob-day[data-on='true'] { background: var(--c-surface); border-color: var(--c-surface); color: var(--c-on); font-weight: 700; }
.ob-error { margin: 3px 0 0; color: var(--danger-text); font-family: var(--sans); font-size: 12px; }
.ob-projects { grid-template-columns: repeat(2, 1fr); }
.ob-option { display: flex; align-items: flex-start; gap: 11px; padding: 13px; border: 1px solid var(--hairline);
  border-radius: 12px; background: var(--card); color: inherit; cursor: pointer; text-align: left; }
.ob-option:hover { border-color: var(--gold); }
.ob-option[data-on='true'] { border-color: var(--a-surface); box-shadow: 0 0 0 1px var(--a-surface); background: color-mix(in srgb, var(--a-surface) 7%, var(--card)); }
.ob-option input { margin-top: 2px; accent-color: var(--c-a); }
.ob-option b, .ob-option small { display: block; font-family: var(--sans); }
.ob-option b { font-size: 13.5px; }
.ob-option small { margin-top: 3px; color: var(--ink-soft); font-size: 11.5px; line-height: 1.45; }
.ob-selection { margin-top: 12px; }
.ob-ai { margin-bottom: 18px; }
.ob-option-button { width: 100%; }
.ob-radio { width: 17px; height: 17px; flex: 0 0 auto; margin-top: 1px; border: 2px solid var(--hairline); border-radius: 50%; }
.ob-option-button[data-on='true'] .ob-radio { border: 5px solid var(--a-surface); background: var(--card); }
.ob-key { max-width: 560px; }
.ob-summary { display: grid; grid-template-columns: minmax(105px, .35fr) 1fr; gap: 0; margin: 0 0 18px;
  border: 1px solid var(--hairline); border-radius: 12px; overflow: hidden; }
.ob-summary dt, .ob-summary dd { margin: 0; padding: 10px 13px; border-bottom: 1px solid var(--hairline);
  font-family: var(--sans); font-size: 12.5px; line-height: 1.45; }
.ob-summary dt { background: var(--card-2); color: var(--ink-soft); font-weight: 700; }
.ob-summary dd { background: var(--card); }
.ob-summary dt:nth-last-of-type(1), .ob-summary dd:last-child { border-bottom: 0; }
.ob-next { margin-bottom: 20px; }
.ob-next b { font-family: var(--sans); }
.ob-next ol { margin: 7px 0 0; padding-left: 20px; font-family: var(--sans); font-size: 12.5px; line-height: 1.6; }
.ob-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 24px; }

@media (max-width: 700px) {
  .ob-progress { gap: 3px; }
  .ob-progress-step { justify-content: center; }
  .ob-progress-step small { display: none; }
  .ob-progress-step::after { left: calc(50% + 12px); right: calc(-50% + 10px); }
  .ob-head { display: block; }
  .ob-skip { margin-top: 10px; }
  .ob-card { min-height: 0; padding: 20px 16px; }
  .ob-step { min-height: 0; }
  .ob-promesses, .ob-facts, .ob-projects, .ob-ai, .ob-rhythm-grid { grid-template-columns: 1fr; }
  .ob-promesses { gap: 8px; }
  .ob-facts { grid-template-columns: repeat(3, 1fr); }
  .ob-fact { padding: 10px; }
  .ob-fact b { font-size: 12.5px; }
  .ob-actions { margin-top: 10px; }
}

@media (max-width: 430px) {
  .ob-facts { grid-template-columns: 1fr; }
  .ob-actions .btn { padding-left: 10px; padding-right: 10px; }
  .ob-summary { grid-template-columns: 95px 1fr; }
}