/* ============================================================================
   app-refonte.css — DESIGN SYSTEM « version app » (refonte 2026-08-14)
   ----------------------------------------------------------------------------
   • Reproduit la charte des maquettes validées : thème sombre officiel,
     navigation 5 onglets, composants doux et cohérents.
   • 100 % ADDITIF et RÉVERSIBLE. Ne s'active QUE :
        - en mode app/mobile (≤ 768 px), ET
        - sous la classe racine html.apprefonte
          (posée par le header quand site.mobile.refonte_on=1 OU ?apprefonte=1).
   • Le BUREAU (> 768 px) et les pages hors mode refonte ne sont JAMAIS touchés.
   • Le GARDIEN (.ai-*, .gw-*, gardien-*) n'est PAS recoloré ni redessiné :
     on ajuste seulement l'ESPACE autour de son conteneur (ratio préservé).
   • ÉTINCELLES : aucun style spécifique ici (module verrouillé, inchangé).
   ============================================================================ */

/* ---------- 1) TOKENS (charte maquettes) ---------- */
html.apprefonte {
  /* Fonds & surfaces */
  --ar-bg:            #071624;
  --ar-surface:       #0D2233;
  --ar-surface-2:     #123047;
  --ar-scrim:         rgba(7,22,36,.72);
  --ar-hairline:      rgba(155,177,191,.18);
  --ar-border:        rgba(155,177,191,.32);
  /* Texte */
  --ar-ink:           #F6F0DF;
  --ar-ink-soft:      #9BB1BF;
  --ar-ink-dis:       rgba(155,177,191,.45);
  --ar-on-accent:     #071624;
  /* Accents */
  --ar-cyan:          #35D7D1;
  --ar-cyan-hover:    #57E0DB;
  --ar-cyan-press:    #28B4AF;
  --ar-cyan-10:       rgba(53,215,209,.12);
  --ar-cyan-40:       rgba(53,215,209,.40);
  --ar-amber:         #FFB65A;
  --ar-amber-hover:   #FFC578;
  --ar-amber-press:   #E09A3F;
  --ar-amber-10:      rgba(255,182,90,.14);
  --ar-amber-40:      rgba(255,182,90,.40);
  --ar-danger:        #E5544B;
  --ar-danger-10:     rgba(229,84,75,.14);
  /* Rayons */
  --ar-r-sm: 12px; --ar-r-md: 16px; --ar-r-lg: 20px; --ar-r-xl: 24px; --ar-r-pill: 999px;
  /* Espacements (base 4) */
  --ar-1:4px; --ar-2:8px; --ar-3:12px; --ar-4:16px; --ar-5:20px; --ar-6:24px; --ar-7:32px;
  /* Dimensions */
  --ar-tap: 44px; --ar-btn-h: 48px; --ar-field-h: 52px; --ar-row-h: 56px;
  --ar-topbar-h: 56px; --ar-navh: 64px;
  --ar-safe-b: env(safe-area-inset-bottom, 0px);
  /* Ombres (élévation douce, rendu plat privilégié) */
  --ar-sh-card: 0 1px 0 rgba(255,255,255,.03) inset, 0 8px 24px rgba(0,0,0,.35);
  --ar-sh-sheet: 0 -12px 32px rgba(0,0,0,.45);
  --ar-sh-fab: 0 8px 20px rgba(0,0,0,.40);
  /* Mouvement */
  --ar-fast:120ms; --ar-std:200ms; --ar-sheet:280ms; --ar-ease:cubic-bezier(.2,0,0,1);
}

/* ---------- 2) SOCLE APP (≤768px, mode refonte) ---------- */
@media (max-width: 768px), (pointer: coarse) and (max-width: 1366px), (display-mode: standalone) and (max-width: 1366px) {

  /* Fond sombre officiel stable + zéro débordement horizontal. */
  html.apprefonte, html.apprefonte body {
    background: var(--ar-bg) !important;
    color: var(--ar-ink);
    overflow-x: clip; max-width: 100%;
  }
  /* Le fond « image par page » ne prime plus sur le thème app (rendu plat, lisible). */
  html.apprefonte body.has-pagebg::before { opacity:.16 !important; }

  html.apprefonte .pub-content,
  html.apprefonte main.container,
  html.apprefonte .ppx-wrap {
    padding-bottom: calc(var(--ar-navh) + var(--ar-safe-b) + 88px) !important; /* place pour bottom-nav + FAB */
  }

  /* Médias jamais plus larges que l'écran. */
  html.apprefonte img, html.apprefonte video, html.apprefonte canvas,
  html.apprefonte svg, html.apprefonte iframe { max-width:100% !important; }

  /* Respecte prefers-reduced-motion. */
  @media (prefers-reduced-motion: reduce) {
    html.apprefonte * { animation-duration:.001ms !important; transition-duration:.001ms !important; }
  }

  /* ---------- 3) TOP BAR (maquette : titre à gauche, actions à droite) ---------- */
  html.apprefonte .pub-topbar {
    position: sticky; top: 0; z-index: 900;
    background: var(--ar-bg) !important;
    border-bottom: 1px solid var(--ar-hairline) !important;
    box-shadow: none !important;
    padding: 8px 12px calc(8px + env(safe-area-inset-top,0px)) !important;
    padding-top: calc(8px + env(safe-area-inset-top,0px)) !important;
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px; row-gap: 8px;
    min-height: var(--ar-topbar-h); box-sizing: border-box;
  }
  html.apprefonte .pub-topbar > * { min-width: 0; }
  html.apprefonte .pub-topbrand { flex: 1 1 auto; }
  html.apprefonte .pub-topbrand-main { font: 700 18px/1.15 'Inter',system-ui,sans-serif; color: var(--ar-ink) !important; }
  html.apprefonte .pub-topbrand-sub  { display:none !important; }
  /* La recherche desktop dans la barre : masquée en app (recherche par page). */
  html.apprefonte .pub-search { display:none !important; }
  /* Badge BÊTA discret. */
  html.apprefonte .pub-hdr-beta { font-size:9px !important; padding:3px 8px !important; opacity:.7; }
  /* Rangée d'actions : une ligne, défilable, alignée à droite. */
  html.apprefonte .pub-actions {
    flex: 0 0 auto; margin-left: auto; display: flex; align-items: center;
    gap: 6px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
  }
  html.apprefonte .pub-actions::-webkit-scrollbar { display:none; }
  html.apprefonte .pub-actions > * { flex: 0 0 auto; }
  /* Boutons icône ronds cohérents (cloche, etc.). */
  html.apprefonte .pub-icon-btn {
    width: var(--ar-tap); height: var(--ar-tap); border-radius: var(--ar-r-pill);
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--ar-surface) !important; border: 1px solid var(--ar-hairline) !important;
    color: var(--ar-ink) !important;
  }
  /* Avatar « Passeport » : rond, initiales, jamais ambre plein. */
  html.apprefonte .pub-profile { padding:0 !important; gap:0 !important; }
  html.apprefonte .pub-profile .nm { display:none !important; }

  /* ---------- 4) BOTTOM NAV (maquette : 5 onglets, actif = cyan) ---------- */
  html.apprefonte .bottom-nav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000;
    display: flex; justify-content: space-around; align-items: stretch;
    gap: 2px; height: calc(var(--ar-navh) + var(--ar-safe-b));
    padding: 6px 6px var(--ar-safe-b);
    background: rgba(9,20,32,.92) !important;
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    border-top: 1px solid var(--ar-hairline) !important;
    box-shadow: 0 -8px 24px rgba(0,0,0,.35);
  }
  html.apprefonte .bottom-nav .bn-item {
    flex: 1 1 0; min-width: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; padding: 6px 2px; border-radius: 14px;
    color: var(--ar-ink-soft) !important; text-decoration: none;
    background: transparent !important; border: 0 !important;
    font: 500 11px/1.1 'Inter',system-ui,sans-serif;
    position: relative; min-height: var(--ar-tap);
  }
  html.apprefonte .bottom-nav .bn-item svg { width: 24px; height: 24px; }
  html.apprefonte .bottom-nav .bn-item span {
    max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  html.apprefonte .bottom-nav .bn-item.active { color: var(--ar-cyan) !important; }
  html.apprefonte .bottom-nav .bn-item.active::before {
    content:""; position:absolute; top:2px; width:28px; height:3px; border-radius:3px;
    background: var(--ar-cyan);
  }
  html.apprefonte .bottom-nav .bn-badge {
    position: absolute; top: 4px; right: calc(50% - 22px);
    min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px;
    background: var(--ar-amber); color: var(--ar-on-accent);
    font: 700 10px/16px 'Inter',sans-serif; text-align: center;
  }

  /* ---------- 5) EN-TÊTE DE PAGE ---------- */
  html.apprefonte .pub-pagehead { margin-bottom: 12px !important; }
  html.apprefonte .pub-pagetitle {
    font: 700 24px/1.18 'Inter',system-ui,sans-serif !important; color: var(--ar-ink) !important;
    letter-spacing: .2px;
  }
  html.apprefonte .pub-pagetitle svg { width: 22px !important; height: 22px !important; color: var(--ar-cyan); }
  html.apprefonte .pub-pagesub { font-size: 13.5px !important; color: var(--ar-ink-soft) !important; }

  /* ---------- 6) CARTES ---------- */
  html.apprefonte .adm-card,
  html.apprefonte .card, html.apprefonte .cg-card, html.apprefonte .panel, html.apprefonte .box, html.apprefonte .tile {
    background: var(--ar-surface) !important;
    border: 1px solid var(--ar-hairline) !important;
    border-radius: var(--ar-r-md) !important;
    box-shadow: var(--ar-sh-card) !important;
    color: var(--ar-ink);
    padding: 16px !important; box-sizing: border-box;
    max-width: calc(100% - 24px); margin-left:auto; margin-right:auto;
  }
  html.apprefonte .adm-card + .adm-card { margin-top: 12px !important; }
  html.apprefonte .adm-card-head { margin-bottom: 12px !important; color: var(--ar-ink); }

  /* ---------- 7) BOUTONS ---------- */
  /* Primaire (une seule action pleine par écran) — amber = engagement, cyan = exploration.
     Par défaut on aligne les CTA existants sur AMBRE ; ajouter .ar-cta-cyan pour le cyan. */
  html.apprefonte .btn-primary, html.apprefonte .adm-btn-primary,
  html.apprefonte button.primary, html.apprefonte .cta-primary, html.apprefonte .btn.primary {
    background: var(--ar-amber) !important; color: var(--ar-on-accent) !important;
    border: 0 !important; border-radius: var(--ar-r-pill) !important;
    min-height: var(--ar-btn-h) !important; padding: 0 20px !important;
    font: 700 16px/1 'Inter',system-ui,sans-serif !important;
    box-shadow: none !important; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  }
  html.apprefonte .ar-cta-cyan,
  html.apprefonte .btn-primary.ar-cta-cyan { background: var(--ar-cyan) !important; }
  html.apprefonte .btn-primary:active, html.apprefonte .adm-btn-primary:active { background: var(--ar-amber-press) !important; }
  /* Secondaire : contour. */
  html.apprefonte .btn-secondary, html.apprefonte .adm-btn-outline, html.apprefonte .btn.secondary {
    background: transparent !important; color: var(--ar-ink) !important;
    border: 1px solid var(--ar-border) !important; border-radius: var(--ar-r-pill) !important;
    min-height: var(--ar-btn-h) !important; padding: 0 18px !important;
    font: 600 15px/1 'Inter',system-ui,sans-serif !important;
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  html.apprefonte .adm-btn-outline svg { color: var(--ar-cyan) !important; }
  /* Danger : réservé destructif / 112. */
  html.apprefonte .btn-danger, html.apprefonte .adm-btn-danger {
    background: transparent !important; color: var(--ar-danger) !important;
    border: 1px solid var(--ar-danger) !important; border-radius: var(--ar-r-pill) !important;
  }

  /* ---------- 8) CHAMPS & CHIPS ---------- */
  html.apprefonte input:not([type=checkbox]):not([type=radio]):not([type=range]),
  html.apprefonte select, html.apprefonte textarea {
    background: var(--ar-surface-2) !important; color: var(--ar-ink) !important;
    border: 1px solid var(--ar-border) !important; border-radius: var(--ar-r-sm) !important;
    min-height: var(--ar-field-h); padding: 12px 14px !important;
    font-size: 16px !important; /* anti-zoom iOS */ box-sizing: border-box; width: 100%;
  }
  html.apprefonte input:focus, html.apprefonte select:focus, html.apprefonte textarea:focus {
    outline: 2px solid var(--ar-cyan) !important; outline-offset: 2px; border-color: var(--ar-cyan) !important;
  }
  html.apprefonte .chip, html.apprefonte .filter-chip, html.apprefonte .tag {
    display: inline-flex; align-items: center; gap: 6px; min-height: var(--ar-tap);
    padding: 8px 14px; border-radius: var(--ar-r-pill);
    background: var(--ar-surface-2) !important; color: var(--ar-ink-soft) !important;
    border: 1px solid var(--ar-hairline) !important; font-size: 14px;
  }
  html.apprefonte .chip.active, html.apprefonte .filter-chip.active, html.apprefonte .chip[aria-selected="true"] {
    background: var(--ar-cyan-10) !important; color: var(--ar-cyan) !important; border-color: var(--ar-cyan-40) !important;
  }

  /* ---------- 9) FEUILLES / MODALES (base) ---------- */
  html.apprefonte .sheet, html.apprefonte .bottom-sheet, html.apprefonte .modal-sheet {
    background: var(--ar-surface) !important; color: var(--ar-ink) !important;
    border-top-left-radius: var(--ar-r-xl) !important; border-top-right-radius: var(--ar-r-xl) !important;
    box-shadow: var(--ar-sh-sheet) !important; border: 0 !important;
    padding-bottom: var(--ar-safe-b);
  }

  /* ---------- 10) TOASTS / ÉTATS ---------- */
  html.apprefonte .toast, html.apprefonte .snackbar {
    background: var(--ar-surface-2) !important; color: var(--ar-ink) !important;
    border: 1px solid var(--ar-hairline) !important; border-radius: var(--ar-r-sm) !important;
  }
  html.apprefonte .empty-state, html.apprefonte .is-empty {
    color: var(--ar-ink-soft) !important; text-align: center;
  }

  /* ---------- 11) GARDIEN — SEULEMENT l'espace (jamais le dessin) ---------- */
  /* La roue orbitale (.ai-cluster/.ai-stage) reste EXACTEMENT ce qu'elle est ;
     on la laisse respirer et on masque la pastille de nom en app (comme header compact). */
  html.apprefonte .ai-cluster { max-width: min(92vw, 400px) !important; margin-left:auto; margin-right:auto; }
  html.apprefonte .ai-gardien-name { display: none !important; }
  /* Le bouton d'envoi du composer Gardien : carré bleu (maquette). */
  html.apprefonte .ai-send {
    width: 42px !important; height: 42px !important; min-width: 0 !important; padding: 0 !important;
    background: linear-gradient(180deg,#3f8bff,#2f7ef7) !important; color: #fff !important; border-radius: 12px !important;
    box-shadow: 0 6px 16px rgba(47,126,247,.35) !important; border: 0 !important;
  }
  html.apprefonte .ai-send svg { color:#fff !important; stroke:#fff !important; }

  /* ---------- 12) BOUTONS FLOTTANTS empilés proprement au-dessus de la nav ---------- */
  html.apprefonte {
    --fab-base: calc(var(--ar-navh) + var(--ar-safe-b) + 14px);
    --fab-step: 70px;
  }
  html.apprefonte .gw-launcher { right: 12px !important; bottom: var(--fab-base) !important; }
  html.apprefonte #secuFab     { right: 12px !important; bottom: calc(var(--fab-base) + var(--fab-step)) !important; }
  /* (16/09/2026, Julien : « oui » — deplacer le bouton d aide) IL RECOUVRAIT LE TEXTE.
     VU sur son telephone : le rond « ? » flottait 14 px au-dessus de la barre du bas, et le
     contenu de la page passait DESSOUS — il cachait une ligne de la fiche de voyage, et sur
     l accueil il mangeait le debut de « Le Gardien peut se tromper… ».
     Il descend DANS la barre du bas, a gauche : la place y est libre (« Accueil » est au
     centre), et c est la place naturelle d un bouton de navigation.
     ⚠ z-index : la barre du bas est peinte par-dessus la page ; sans cela le bouton
       disparaitrait derriere elle.
     RETOUR ARRIERE : remettre la ligne d avant, « bottom: var(--fab-base) ». */
  html.apprefonte .obw-launch  { left: 16px !important;
    bottom: calc(var(--ar-safe-b, 0px) + (var(--ar-navh, 64px) - 44px) / 2) !important;
    z-index: 1002 !important; }
}

/* ---------- 13) Très petit téléphone (≤ 380px) : compactage doux ---------- */
@media (max-width: 380px) {
  html.apprefonte .bottom-nav .bn-item { font-size: 10px; }
  html.apprefonte .bottom-nav .bn-item svg { width: 22px; height: 22px; }
  html.apprefonte .pub-pagetitle { font-size: 21px !important; }
}

/* ---------- 14) TOP BAR — épuration (maquette : titre · cloche · avatar, + Phare) ---------- */
@media (max-width: 768px), (pointer: coarse) and (max-width: 1366px), (display-mode: standalone) and (max-width: 1366px) {
  /* Retirés du bandeau (restent accessibles via le Menu / le Passeport) :
     Ma sécurité, Réglages, Bons coups, Déconnexion. */
  html.apprefonte .pub-mysecu,
  html.apprefonte .pub-actions .pub-icon-btn[aria-label="Se déconnecter"],
  html.apprefonte .pub-actions .pub-icon-btn[aria-label="Mes réglages"],
  html.apprefonte .pub-actions .pub-icon-btn[aria-label="Bons coups"] { display: none !important; }
  /* Menu (toutes les sections) + Phare : boutons ronds/pilule cohérents. */
  html.apprefonte .pub-menu-btn {
    width: var(--ar-tap) !important; height: var(--ar-tap) !important;
    border-radius: var(--ar-r-pill) !important; background: var(--ar-surface) !important;
    border: 1px solid var(--ar-hairline) !important; color: var(--ar-ink) !important;
  }
  html.apprefonte .pub-phare {
    height: var(--ar-tap) !important; border-radius: var(--ar-r-pill) !important;
    padding: 0 12px !important; gap: 6px !important;
  }
  html.apprefonte .pub-phare.phare-state-on { color: #4fe0a0 !important; border-color: rgba(79,224,160,.40) !important; background: rgba(79,224,160,.12) !important; }
  html.apprefonte .pub-phare .phare-label { display: inline !important; font-weight: 600; }

  /* Logo flamme devant le titre (inséré par app-refonte.js). */
  html.apprefonte .pub-topbrand.has-logo { flex-direction: row !important; align-items: center; gap: 9px; }
  html.apprefonte .ar-logo { width: 30px; height: 30px; object-fit: contain; flex: 0 0 auto; filter: drop-shadow(0 0 6px rgba(79,140,255,.55)); }

  /* Rangée « Phare » centrée sous le bandeau (accueil) — remplie par app-refonte.js.
     (18/08) min-height : la place est RÉSERVÉE avant le premier rendu. 56 px est la
     hauteur RÉELLE de cette rangée une fois remplie, mesurée en production dans un
     cadre de 390 px — pas une valeur choisie au hasard. Comme c'est un plancher et
     non une hauteur fixe, rien ne peut être écrasé si le bouton devait grandir. */
  html.apprefonte .ar-phare-row { display: flex; justify-content: center; padding: 10px 12px 2px;
                                  min-height: 56px; box-sizing: border-box; }
  html.apprefonte .ar-phare-row .pub-phare { height: 40px !important; padding: 0 16px !important; font-weight: 600; }
}

/* ---------- 15) Accueil : astuce Gardien + espace composer (anti-chevauchement) ---------- */
@media (max-width: 768px), (pointer: coarse) and (max-width: 1366px), (display-mode: standalone) and (max-width: 1366px) {
  /* (15/08 Julien « la barre est trop grosse ») Barre Gardien compacte : hauteur réduite,
     bouton d'envoi/micro 42px, hint masqué (il chevauchait la barre ; la roue reste cliquable). */
  html.apprefonte .ai-searchbar { margin-top: 16px !important; padding: 5px !important; gap: 8px !important; }
  html.apprefonte .ai-searchbar textarea { min-height: 0 !important; height: 42px !important; padding: 9px 12px !important; font-size: 15px !important; line-height: 22px !important; }
  html.apprefonte .ai-mic { width: 42px !important; height: 42px !important; }
  html.apprefonte .ai-sc2hint-closed { display: none !important; }
  /* Bandeau : actions sur une seule ligne, sans chevauchement ; Phare compact (icône + état). */
  html.apprefonte .pub-actions { flex-wrap: nowrap !important; gap: 8px !important; align-items: center !important; }
  html.apprefonte .pub-phare .phare-label { display: none !important; }
  html.apprefonte .pub-phare { width: auto !important; min-width: 0 !important; padding: 0 12px !important; }
}

/* ---------- 16) Accueil : feuille « Mes raccourcis » (maquette 02) ---------- */
/* Grille 3×3 additive, pilotée par le MÊME état `.ai-cluster.sc2-open` (tap Gardien).
   L'anneau sc2 (.ai-node2) est masqué et remplacé par cette feuille ; la roue reste
   visible au-dessus (comme la maquette). 100 % scopé apprefonte + ≤768 : desktop intact. */
html.apprefonte .ar-shortcuts-sheet { display: none; }
@media (max-width: 768px), (pointer: coarse) and (max-width: 1366px), (display-mode: standalone) and (max-width: 1366px) {
  html.apprefonte .ai-node2 { display: none !important; }               /* anneau remplacé par la feuille */
  html.apprefonte .ai-cluster.sc2-open .ai-node:not(.ai-node2) {        /* roue reste visible quand ouvert */
    opacity: 1 !important; transform: translate(-50%,-50%) scale(1) !important; pointer-events: auto !important;
  }
  html.apprefonte .ai-sc2hint { display: none !important; }             /* hint "ouvert" → remplacé par le pied de feuille */
  /* Bascule dev/admin « voir en visiteur » (brun hors palette, absente de la maquette) :
     masquée dans l'app refonte. Se déconnecter reste accessible par les voies normales. */
  html.apprefonte .dev-toggle { display: none !important; }

  html.apprefonte .ar-shortcuts-sheet {
    display: flex; flex-direction: column; gap: 12px;
    position: fixed; left: 0; right: 0; bottom: calc(var(--ar-navh) + var(--ar-safe-b));
    z-index: 950; padding: 16px 16px 14px; box-sizing: border-box;
    background: var(--ar-surface); border-top: 1px solid var(--ar-hairline);
    border-top-left-radius: var(--ar-r-xl); border-top-right-radius: var(--ar-r-xl);
    box-shadow: var(--ar-sh-sheet);
    transform: translateY(115%); transition: transform var(--ar-sheet) var(--ar-ease);
    max-height: 66vh; overflow: auto;
  }
  html.apprefonte .ar-shortcuts-sheet.ar-open { transform: none; }
  html.apprefonte .ar-sc-head { position: relative; text-align: center; padding: 2px 40px 0; }
  html.apprefonte .ar-sc-title { font: 700 20px/1.2 'Inter',system-ui,sans-serif; color: var(--ar-ink); }
  html.apprefonte .ar-sc-sub { font-size: 13.5px; color: var(--ar-ink-soft); margin-top: 2px; }
  html.apprefonte .ar-sc-close {
    position: absolute; top: -2px; right: -4px; width: var(--ar-tap); height: var(--ar-tap);
    display: flex; align-items: center; justify-content: center; border-radius: var(--ar-r-pill);
    background: transparent; border: 0; color: var(--ar-ink-soft);
  }
  html.apprefonte .ar-sc-close svg { width: 22px; height: 22px; }
  html.apprefonte .ar-sc-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; }
  html.apprefonte .ar-sc-tile {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
    min-height: 84px; padding: 12px 6px; text-decoration: none;
    background: var(--ar-surface-2); border: 1px solid var(--ar-hairline); border-radius: var(--ar-r-md);
    color: var(--ar-ink);
  }
  html.apprefonte .ar-sc-tile:active { background: var(--ar-cyan-10); border-color: var(--ar-cyan-40); }
  html.apprefonte .ar-sc-tile svg { width: 26px; height: 26px; color: var(--ar-cyan); }
  html.apprefonte .ar-sc-emo { font-size: 30px; line-height: 1; filter: drop-shadow(0 2px 6px rgba(0,0,0,.35)); }
  html.apprefonte .ar-sc-tile span:not(.ar-sc-emo) { font: 600 12.5px/1.15 'Inter',system-ui,sans-serif; text-align: center; }
  html.apprefonte .ar-sc-foot { text-align: center; font-size: 12.5px; color: var(--ar-ink-soft); }
}

/* ═══════════ (16/08) Raccourcis « Mes raccourcis » : icônes animées (demande Julien) ═══════════
   Toutes les icônes (.ar-sc-emo) s'animent quand la feuille est ouverte : flottement /
   respiration / oscillation en vagues décalées + entrée en cascade. 100% additif,
   GPU-only (transform/opacity), actif uniquement sous .ar-open (économie batterie),
   coupé si prefers-reduced-motion. Réversible : supprimer ce bloc. */
@media (max-width: 768px), (pointer: coarse) and (max-width: 1366px), (display-mode: standalone) and (max-width: 1366px) {
  @keyframes arEmoFloat  { 0%,100% { transform: translateY(0); }   50% { transform: translateY(-4px); } }
  @keyframes arEmoBreath { 0%,100% { transform: scale(1); }         50% { transform: scale(1.12); } }
  @keyframes arEmoWiggle { 0%,100% { transform: rotate(-6deg); }    50% { transform: rotate(6deg); } }
  @keyframes arScTileIn  { from { opacity: 0; transform: translateY(10px) scale(.96); } to { opacity: 1; transform: none; } }

  html.apprefonte .ar-shortcuts-sheet.ar-open .ar-sc-tile {
    animation: arScTileIn .42s cubic-bezier(.22,1,.36,1) both;
  }
  html.apprefonte .ar-shortcuts-sheet.ar-open .ar-sc-emo {
    animation: arEmoFloat 3s ease-in-out infinite;
    transform-origin: 50% 60%; will-change: transform;
  }
  html.apprefonte .ar-open .ar-sc-tile:nth-child(3n+2) .ar-sc-emo { animation-name: arEmoBreath; animation-duration: 3.4s; }
  html.apprefonte .ar-open .ar-sc-tile:nth-child(3n)   .ar-sc-emo { animation-name: arEmoWiggle; animation-duration: 2.8s; }
  html.apprefonte .ar-open .ar-sc-tile:nth-child(4n)   .ar-sc-emo { animation-delay: .15s; }
  html.apprefonte .ar-open .ar-sc-tile:nth-child(4n+1) .ar-sc-emo { animation-delay: .30s; }
  html.apprefonte .ar-open .ar-sc-tile:nth-child(4n+2) .ar-sc-emo { animation-delay: .45s; }
  html.apprefonte .ar-open .ar-sc-tile:nth-child(4n+3) .ar-sc-emo { animation-delay: .60s; }
  html.apprefonte .ar-open .ar-sc-tile:nth-child(3n+2) { animation-delay: .05s; }
  html.apprefonte .ar-open .ar-sc-tile:nth-child(3n)   { animation-delay: .10s; }
}
@media (prefers-reduced-motion: reduce) {
  html.apprefonte .ar-shortcuts-sheet .ar-sc-emo,
  html.apprefonte .ar-shortcuts-sheet .ar-sc-tile { animation: none !important; }
}