/* ==========================================================================
   mft-andorra.com — guide.css — v1.11.0 (30/09/2026)
   v1.11.0 : encart « connexion en 1 clic » (.gd__oa), montré par guide.js quand le site l'a ouverte à tous.
   Guide Alpaca (/xx/alpaca/) et schémas de l'interface d'Alpaca, partagés avec l'espace client (onglet « Clés et
   sécurité »). Chargé seulement par la page du guide et par l'espace client. Les schémas sont des maquettes
   simplifiées : fenêtre claire, bouton à cliquer entouré d'un pointillé doré et numéroté comme l'étape.
   ========================================================================== */

/* ---- schémas (SVG, classes gf-*) ---- */
.gfig { margin: 0; }
.gfig__svg { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 10px 24px rgba(10, 26, 51, .12)); }
.gf-tx { font-family: var(--f-body, "Onest", system-ui, sans-serif); }
.gf-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; letter-spacing: .02em; }
.gf-win { fill: #fff; stroke: #D5DFEC; stroke-width: 1.5; }
.gf-bar { fill: #EEF3FA; }
.gf-dot { fill: #C9D5E6; }
.gf-url { fill: #fff; stroke: #D5DFEC; }
.gf-urlt { fill: #66768F; }
.gf-nwin { fill: #06152F; stroke: rgba(159, 199, 245, .28); stroke-width: 1.5; }
.gf-nbar { fill: #0A2250; }
.gf-nwin ~ .gf-url { fill: #06152F; stroke: rgba(159, 199, 245, .28); }
.gf-nwin ~ .gf-urlt { fill: #8298BA; }
.gf-ln { fill: #E3EAF3; }
.gf-card { fill: #fff; stroke: #D5DFEC; stroke-width: 1.2; }
.gf-shadow { filter: drop-shadow(0 8px 16px rgba(10, 26, 51, .14)); }
.gf-none { fill: none; }
.gf-t { fill: #0A1A33; }
.gf-t2 { fill: #3C4D68; }
.gf-t3 { fill: #8896AC; }
.gf-in { fill: #F7F9FC; stroke: #C6D2E3; stroke-width: 1.2; }
.gf-btn { fill: #0E2F6B; }
.gf-btnt { fill: #fff; }
.gf-gold { fill: #E3B44A; }
.gf-goldt { fill: #1B1405; }
.gf-sel { fill: #FBF1D9; }
.gf-sep { stroke: #E3EAF3; stroke-width: 1.5; }
.gf-link { fill: #1C4FA8; }
.gf-chev { fill: none; stroke: #3C4D68; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.gf-chk, .gf-okt, .gf-chkd { fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.gf-chk { stroke: #2E9E6B; }
.gf-okt { stroke: #fff; }
.gf-chkd { stroke: #1B1405; }
.gf-ok { fill: #2E9E6B; }
.gf-env { fill: none; stroke: #8896AC; stroke-width: 1.8; stroke-linejoin: round; }
.gf-chart { fill: none; stroke: #3A86E0; stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; }
.gf-dim { fill: rgba(6, 21, 47, .32); }
.gf-cp { fill: #fff; stroke: #3C4D68; stroke-width: 1.6; }
.gf-cp2 { fill: #EEF3FA; }
.gf-warn { fill: #E3B44A; }
.gf-warnt { fill: #1B1405; }
.gf-stp { fill: #fff; stroke: #C6D2E3; stroke-width: 1.5; }
.gf-tw { fill: #fff; }
.gf-tw2 { fill: #B3C6E2; }
.gf-nin { fill: #0A2250; stroke: rgba(159, 199, 245, .32); stroke-width: 1.2; }
.gf-okg { fill: #5FD39B; }
.gf-okl { fill: none; stroke: #5FD39B; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.gf-eye { fill: none; stroke: #B3C6E2; stroke-width: 1.6; }
.gf-eyec { fill: #B3C6E2; }
.gf-hl { fill: rgba(227, 180, 74, .08); stroke: #E3B44A; stroke-width: 3; stroke-dasharray: 8 6; }
.gf-pin { fill: #E3B44A; stroke: #fff; stroke-width: 3; }
.gf-pint { fill: #1B1405; }
@media (prefers-reduced-motion: no-preference) {
  .gf-hl { animation: gfDash 1.4s linear infinite; }
  @keyframes gfDash { to { stroke-dashoffset: -28; } }
}

/* ---- page du guide ---- */
.gd__q { margin-bottom: 18px; }
.gd__tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-width: 760px; margin: 0 0 34px; }
.gd__tabs[hidden] { display: none; }
.gd__tab { display: grid; gap: 4px; text-align: left; min-height: 74px; padding: 16px 18px; border-radius: var(--r-m); border: 1.5px solid var(--line); background: var(--paper); color: var(--ink); font: inherit; cursor: pointer; transition: border-color .2s, box-shadow .2s, transform .2s; }
.gd__tab b { font: 720 1.08rem/1.2 var(--f-display); letter-spacing: -.01em; }
.gd__tab span { font-size: .88rem; color: var(--ink-3); }
.gd__tab:hover { border-color: var(--gold); transform: translateY(-1px); }
.gd__tab[aria-selected="true"] { border-color: var(--gold); box-shadow: 0 0 0 4px rgba(227, 180, 74, .18), var(--shadow); }
.gd__tab[aria-selected="true"] b::after { content: ""; display: inline-block; width: 8px; height: 8px; margin-left: 8px; vertical-align: middle; border-radius: 50%; background: var(--gold); }
.gd__tab:focus-visible { outline: 3px solid var(--glacier); outline-offset: 2px; }
.gd__panel[hidden] { display: none; }
.gd__panel + .gd__panel { margin-top: 64px; }
.gd__tabs:not([hidden]) ~ .gd__panel + .gd__panel { margin-top: 0; }
.gd__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 24px; margin-bottom: 22px; }
.gd__ptitle span { color: var(--ink-3); font-weight: 500; }
.gd__lead { color: var(--ink-2); margin-top: 6px; max-width: 64ch; }
.gd__open .ico { width: 16px; height: 16px; }
.gd__oa { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; margin: 0 0 22px; padding: 18px 22px; border-radius: var(--r-m); border: 1.5px solid var(--gold); background: #FBF6E8; }
.gd__oa[hidden] { display: none; }
.gd__oat { flex: 1 1 320px; min-width: 0; }
.gd__oat b { display: block; font: 720 1.05rem/1.3 var(--f-display); color: var(--ink); }
.gd__oat p { margin-top: 4px; color: var(--ink-2); font-size: .95rem; overflow-wrap: anywhere; }
.gd__oa .btn { max-width: 100%; white-space: normal; text-align: center; }
.gd__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; counter-reset: none; }
.gd__step { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(20px, 3vw, 40px); align-items: center; padding: clamp(18px, 3vw, 32px); border-radius: var(--r-l); background: var(--paper); box-shadow: var(--shadow); }
.gd__txt { position: relative; padding-left: 54px; min-width: 0; }
.gd__n { position: absolute; left: 0; top: -4px; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: var(--gold); color: #1B1405; font: 800 1.08rem/1 var(--f-display); box-shadow: 0 6px 16px rgba(227, 180, 74, .35); }
.gd__txt .h5 { margin: 4px 0 8px; font-size: 1.16rem; }
.gd__txt p { color: var(--ink-2); overflow-wrap: anywhere; }
.gd__tip { margin-top: 12px; padding: 10px 14px; border-left: 3px solid var(--gold); border-radius: 0 12px 12px 0; background: #FBF6E8; font-size: .92rem; }
.gd__tip b { color: var(--gold-ink); margin-right: 6px; }
.gd__figs { display: grid; gap: 14px; min-width: 0; }
.gd__note { margin-top: 18px; }
.gd__traps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 26px; }
.gd__trap { padding: 20px 22px; border-radius: var(--r-m); border: 1px solid var(--line); background: var(--paper); min-width: 0; }
.gd__trap .h5 { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.gd__tn { flex: none; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--night); color: var(--gold); font: 800 .86rem/1 var(--f-display); }
.gd__trap p { color: var(--ink-2); font-size: .96rem; overflow-wrap: anywhere; }
.gd__perm { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 22px; }
.gd__keynote { display: flex; align-items: flex-start; gap: 12px; max-width: 80ch; margin-top: 18px; color: var(--ink-2); }
.gd__keynote .ico { flex: none; width: 26px; height: 26px; color: var(--guard); }
.gd__h2b { margin-top: 56px; }
.gd__rules { list-style: none; margin: 20px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.gd__rules li { display: grid; gap: 10px; align-content: start; padding: 20px; border-radius: var(--r-m); background: var(--night); color: var(--on); }
.gd__rules p { color: var(--on-2); overflow-wrap: anywhere; }
.gd__rn { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--gold); color: #1B1405; font: 800 .9rem/1 var(--f-display); }
@media (max-width: 900px) {
  .gd__step { grid-template-columns: minmax(0, 1fr); }
  .gd__rules { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .gd__traps, .gd__perm { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 520px) {
  .gd__tabs { grid-template-columns: minmax(0, 1fr); }
  .gd__txt { padding-left: 0; padding-top: 50px; }
  .gd__n { top: 0; }
  .gd__open { width: 100%; justify-content: center; }
  .gd__oa { padding: 16px; }
  .gd__oa .btn { width: 100%; justify-content: center; }
  .gd__figs { margin-inline: calc(-1 * clamp(18px, 3vw, 32px) + 2px); }   /* téléphone : schémas sur toute la largeur de la carte */
}
@media print {
  .gd__tabs { display: none !important; }
  .gd__panel[hidden] { display: block; }
  .gd__step { box-shadow: none; border: 1px solid var(--line); break-inside: avoid; }
}