/* Suite Forge : coque commune (DESIGN-SYSTEM.md du pack).
   Rail vertical 64 px, barre haute 72 px, panneaux à rayon 12 px, contrôles à 8 px, CTA blanc en pilule
   dont le texte prend l'accent de l'application. Réutilisable par toutes les apps : il suffit des classes
   sfx-* et de data-app sur <body>. Chargé après les feuilles propres à l'application. */
.sfx-corps {
  margin: 0; min-height: 100vh; font-family: var(--forge-font); font-size: 14px; color: var(--forge-text);
  background:
    radial-gradient(1000px 520px at 85% -12%, color-mix(in srgb, var(--forge-accent) 14%, transparent), transparent 62%),
    var(--forge-bg) !important;
}
.sfx-coque { display: grid; grid-template-columns: var(--forge-rail) minmax(0, 1fr); min-height: 100vh; }

/* Rail */
.sfx-rail {
  position: sticky; top: 0; height: 100vh; box-sizing: border-box; display: flex; flex-direction: column; align-items: center;
  gap: 4px; padding: 14px 0; background: var(--forge-panel-glass); border-right: 1px solid var(--forge-border);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); z-index: 5;
}
.sfx-logo { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 12px; border-radius: var(--forge-radius-control); }
.sfx-logo svg { width: 30px; height: 30px; }
.sfx-rail nav { display: flex; flex-direction: column; gap: 4px; }
.sfx-rail-bas { margin-top: auto; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.sfx-rail-lien {
  position: relative; display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--forge-radius-control);
  color: var(--forge-muted); text-decoration: none; border: 1px solid transparent; background: none; cursor: pointer;
}
.sfx-rail-lien svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.sfx-rail-lien:hover { color: var(--forge-text); background: var(--forge-panel-raised); }
.sfx-rail-lien[aria-current="page"] {
  color: var(--forge-accent); background: color-mix(in srgb, var(--forge-accent) 14%, transparent);
  border-color: color-mix(in srgb, var(--forge-accent) 45%, transparent);
}
/* Infobulle au survol et au focus : chaque icône garde un libellé lisible. */
.sfx-rail-lien[data-libelle]:hover::after, .sfx-rail-lien[data-libelle]:focus-visible::after {
  content: attr(data-libelle); position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%); white-space: nowrap;
  padding: 5px 9px; border-radius: 6px; font-size: 12px; color: var(--forge-text); background: var(--forge-panel-raised);
  border: 1px solid var(--forge-border); pointer-events: none;
}
.sfx-avatar {
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; font-size: 13px; font-weight: 700;
  color: var(--forge-bg); background: linear-gradient(135deg, var(--forge-accent), color-mix(in srgb, var(--forge-accent) 40%, #fff));
}

/* Barre haute */
.sfx-principal { display: flex; flex-direction: column; min-width: 0; }
.sfx-barre {
  position: sticky; top: 0; z-index: 4; height: var(--forge-toolbar); box-sizing: border-box; display: flex; align-items: center;
  gap: var(--forge-gap); padding: 0 var(--forge-margin); background: color-mix(in srgb, var(--forge-bg) 82%, transparent);
  border-bottom: 1px solid var(--forge-border); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
}
.sfx-produit { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.sfx-produit strong { font-size: 22px; font-weight: 700; letter-spacing: -.01em; white-space: nowrap; }
.sfx-produit strong span { color: var(--forge-accent); }
.sfx-produit small { color: var(--forge-muted); font-size: 12px; white-space: nowrap; }
.sfx-barre-droite { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.sfx-bouton {
  min-height: 44px; padding: 0 14px; border-radius: var(--forge-radius-control); border: 1px solid var(--forge-border);
  background: var(--forge-panel); color: var(--forge-text); font: inherit; font-weight: 500; cursor: pointer;
}
.sfx-bouton:hover { background: var(--forge-panel-raised); }
.sfx-bouton, .sfx-cta { white-space: nowrap; }
.sfx-cta {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 20px; border-radius: 999px; border: 0;
  background: #fff; color: color-mix(in srgb, var(--forge-accent) 82%, #000); font: inherit; font-size: 15px; font-weight: 600;
  cursor: pointer; text-decoration: none; box-shadow: 0 8px 24px -12px color-mix(in srgb, var(--forge-accent) 70%, transparent);
}
.sfx-cta:hover { filter: brightness(.97); }
:root[data-theme="clair"] .sfx-cta { background: var(--forge-accent); color: #fff; }

/* Contenu et panneaux */
.sfx-contenu { padding: 24px var(--forge-margin) 48px; max-width: 1440px; width: 100%; box-sizing: border-box; margin: 0 auto; }
.sfx-titre-page { margin: 0 0 4px; font-size: 30px; font-weight: 700; letter-spacing: -.015em; }
.sfx-sous-titre { margin: 0 0 20px; color: var(--forge-muted); max-width: 70ch; }
.sfx-panneau {
  background: var(--forge-panel-glass); border: 1px solid var(--forge-border); border-radius: var(--forge-radius); padding: 16px;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .04), 0 18px 40px -28px #000;
}
.sfx-panneau-titre { margin: 0 0 12px; font-size: 17px; font-weight: 600; }

/* Accessibilité commune */
.sfx-corps :focus-visible { outline: 2px solid var(--forge-focus); outline-offset: 2px; }
.sfx-cacher { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Tablette : la coque reste, la barre se resserre. Mobile : le rail devient une barre de navigation en bas. */
@media (max-width: 1279px) { .sfx-produit small { display: none; } }
@media (max-width: 767px) {
  .sfx-coque { grid-template-columns: minmax(0, 1fr); padding-bottom: 64px; }
  .sfx-rail {
    position: fixed; top: auto; bottom: 0; left: 0; right: 0; height: 64px; flex-direction: row; justify-content: space-around;
    padding: 0 8px; border-right: 0; border-top: 1px solid var(--forge-border);
  }
  .sfx-rail nav, .sfx-rail-bas { flex-direction: row; margin: 0; }
  .sfx-logo, .sfx-avatar { display: none; }
  .sfx-rail-lien[data-libelle]:hover::after, .sfx-rail-lien[data-libelle]:focus-visible::after { display: none; }
  .sfx-barre { height: 60px; }
  .sfx-produit strong { font-size: 19px; }
  .sfx-cta { min-height: 44px; padding: 0 14px; font-size: 14px; }
  .sfx-bouton { padding: 0 10px; font-size: 13px; }
  .sfx-long { display: none; }
  .sfx-titre-page { font-size: 24px; }
}
@media (prefers-reduced-motion: reduce) { .sfx-corps * { transition: none !important; } }

/* ── Thème clair (option) ── */
:root[data-theme="clair"] .sfx-rail-lien[aria-current="page"] { color: color-mix(in srgb, var(--forge-accent) 78%, #000); }
:root[data-theme="clair"] .sfx-avatar { color: #fff; background: var(--forge-accent); }
:root[data-theme="clair"] .sfx-bouton { border-color: var(--forge-controle); }
:root[data-theme="clair"] .sfx-panneau { box-shadow: 0 18px 40px -30px rgb(13 23 38 / .35); }
:root[data-theme="clair"] .sfx-cta { box-shadow: 0 8px 22px -14px var(--forge-accent); }

/* ══ Coque V2 « pub Apple » (classe sf2 sur <body>) ══════════════════════════════════════
   Fond plein, police du système, une barre de navigation flottante en verre (le seul verre de la
   page), boutons pleins en pilule, champs à 12-24 px. Sur téléphone, les liens passent dans une
   barre d'onglets en bas, comme sur iOS. Utilisée par le hub, la landing, la connexion et le compte. */
.sf2 {
  margin: 0; min-height: 100vh; min-height: 100dvh; background: var(--sf2-fond); color: var(--sf2-texte);
  font-family: var(--sf2-police); font-size: 17px; line-height: 1.47; letter-spacing: -.011em;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
}
.sf2 *, .sf2 *::before, .sf2 *::after { box-sizing: border-box; }
:where(.sf2 h1, .sf2 h2, .sf2 h3) { text-wrap: balance; }
:where(.sf2 p) { text-wrap: pretty; }
.sf2 img { max-width: 100%; }
.sf2 [hidden] { display: none !important; }
/* Une ancre (#parcours, #jetons…) ne se cache pas sous la barre flottante. */
.sf2 [id] { scroll-margin-top: 92px; }
/* « Taille du texte : Grande » (Mon compte) : le texte courant passe de 17 à 19 px. */
:root[data-texte="grand"] .sf2 { font-size: 19px; }
.sf2 :focus-visible { outline: 2px solid var(--sf2-accent); outline-offset: 3px; }
/* Spécificité nulle : la moindre classe d'un composant reprend la main sur cette remise à zéro. */
:where(.sf2 button, .sf2 input, .sf2 textarea, .sf2 select) { font: inherit; color: inherit; letter-spacing: inherit; }
.sf2-saut { position: absolute; left: 16px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: var(--sf2-rayon-controle);
  background: var(--sf2-action); color: var(--sf2-action-texte); text-decoration: none; }
.sf2-saut:focus { top: 12px; }
.sf2-page { width: 100%; max-width: calc(var(--sf2-largeur) + 2 * var(--sf2-marge)); margin: 0 auto; padding: 0 var(--sf2-marge); }

/* Barre de navigation flottante (Liquid Glass discret) */
.sf2-entete { position: sticky; top: 0; z-index: 40; display: flex; justify-content: center; padding: 12px var(--sf2-marge) 0;
  pointer-events: none; }
/* Le verre est porté par un pseudo-élément : un backdrop-filter sur la barre elle-même ferait de la barre
   le repère des éléments fixes qu'elle contient (la barre d'onglets du téléphone). */
.sf2-nav { position: relative; z-index: 0; pointer-events: auto; display: flex; align-items: center; gap: 6px; width: min(100%, 1040px);
  min-height: 60px; padding: 7px 8px 7px 18px; border-radius: 20px; border: 1px solid var(--sf2-verre-bord);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .07), 0 12px 32px -16px rgb(0 0 0 / .55); }
.sf2-nav::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--sf2-verre);
  -webkit-backdrop-filter: blur(24px) saturate(170%); backdrop-filter: blur(24px) saturate(170%); }
.sf2-marque { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin-right: 10px; color: var(--sf2-texte);
  text-decoration: none; font-size: 17px; font-weight: 650; letter-spacing: -.02em; white-space: nowrap; }
.sf2-marque svg { width: 24px; height: 24px; flex: none; }
.sf2-liens { display: flex; align-items: center; gap: 2px; margin: 0; padding: 0; list-style: none; }
.sf2-liens a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border-radius: 12px;
  color: var(--sf2-texte-2); text-decoration: none; font-size: 15px; font-weight: 500;
  transition: color .16s ease, background-color .16s ease; }
.sf2-liens a:hover { color: var(--sf2-texte); }
.sf2-liens a[aria-current="page"] { color: var(--sf2-texte); background: color-mix(in srgb, var(--sf2-texte) 9%, transparent); }
/* Icônes des onglets (téléphone seulement) : masques CSS, pas d'icône dans le texte des liens sur grand écran. */
.sf2-liens [data-icone]::before { content: none; width: 22px; height: 22px; background: currentColor;
  -webkit-mask: var(--sf2-icone) center / contain no-repeat; mask: var(--sf2-icone) center / contain no-repeat; }
[data-icone="accueil"] { --sf2-icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.5 12 3l9 7.5'/%3E%3Cpath d='M5 9.5V21h14V9.5'/%3E%3C/svg%3E"); }
[data-icone="applications"] { --sf2-icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1.5'/%3E%3C/svg%3E"); }
[data-icone="projets"] { --sf2-icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7Z'/%3E%3C/svg%3E"); }
[data-icone="bibliotheque"] { --sf2-icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h4v16H4zM10 4h4v16h-4z'/%3E%3Cpath d='m16 5 3.8-1 2.2 15.5-3.8 1z'/%3E%3C/svg%3E"); }
[data-icone="tutoriels"] { --sf2-icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='3'/%3E%3Cpath d='m10 9.5 4.5 2.5-4.5 2.5z'/%3E%3C/svg%3E"); }
.sf2-nav-droite { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.sf2-avatar { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; flex: none; text-decoration: none;
  font-size: 14px; font-weight: 650; color: var(--sf2-texte); background: var(--sf2-surface-2); }
.sf2-avatar:hover { background: color-mix(in srgb, var(--sf2-texte) 16%, var(--sf2-surface-2)); }

/* Boutons et liens d'action */
.sf2-bouton { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 24px;
  border: 0; border-radius: 999px; background: var(--sf2-action); color: var(--sf2-action-texte); font-size: 17px; font-weight: 600;
  text-decoration: none; white-space: nowrap; cursor: pointer; transition: transform .16s var(--sf2-sortie), background-color .16s ease; }
.sf2-bouton:hover { background: var(--sf2-action-survol); }
.sf2-bouton:active { transform: scale(.97); }
.sf2-bouton:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.sf2-bouton-second { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px;
  border: 1px solid var(--sf2-ligne); border-radius: 999px; background: transparent; color: var(--sf2-texte); font-size: 15px;
  font-weight: 500; text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: transform .16s var(--sf2-sortie), background-color .16s ease, border-color .16s ease; }
.sf2-bouton-second:hover { background: var(--sf2-surface); border-color: color-mix(in srgb, var(--sf2-texte) 30%, var(--sf2-ligne)); }
.sf2-bouton-second:active { transform: scale(.97); }
.sf2-lien { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; color: var(--sf2-accent); text-decoration: none;
  font-weight: 500; }
.sf2-lien::after { content: "›"; font-size: 1.15em; line-height: 1; transform: translateY(-1px); transition: transform .16s var(--sf2-sortie); }
.sf2-lien:hover { text-decoration: underline; text-underline-offset: 3px; }
.sf2-lien:hover::after { transform: translate(2px, -1px); }

@media (max-width: 767px) {
  .sf2 { font-size: 16px; padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  :root[data-texte="grand"] .sf2 { font-size: 18px; }
  .sf2-sans-onglets { padding-bottom: 0; }
  .sf2-nav { min-height: 56px; padding: 6px 6px 6px 14px; }
  /* Les liens du hub deviennent une barre d'onglets en bas (verre aussi : 2 éléments de verre au plus). */
  .sf2-liens { position: fixed; z-index: 40; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom));
    justify-content: space-around; padding: 6px; border-radius: 22px; background: var(--sf2-verre); border: 1px solid var(--sf2-verre-bord);
    -webkit-backdrop-filter: blur(24px) saturate(170%); backdrop-filter: blur(24px) saturate(170%);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / .07), 0 12px 32px -16px rgb(0 0 0 / .55); }
  .sf2-liens li { flex: 1; min-width: 0; }
  .sf2-liens a { flex-direction: column; justify-content: center; gap: 3px; width: 100%; min-height: 54px; padding: 0 4px;
    font-size: 11px; border-radius: 16px; }
  .sf2-liens a span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sf2-liens [data-icone]::before { content: ""; display: block; }
}
@media (prefers-reduced-transparency: reduce) {
  .sf2-nav::before, .sf2-liens { background: var(--sf2-surface); -webkit-backdrop-filter: none; backdrop-filter: none; }
}