/* ---------- 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); }