/* ==========================================================================
   SupBalloon — fichier de design commun (refonte 2026)
   Utilisé par le hub, puis par chaque appli à son tour de refonte.
   Réglages de la balise <html> (préférences du compte) :
     data-mode   = auto | clair | sombre
     data-style  = techno | classique
     data-taille = petite | normale | grande
   Toutes les classes commencent par « aa- » pour ne pas gêner l'ancien style.
   ========================================================================== */

@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("polices/inter.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("polices/jetbrains-mono.woff2") format("woff2"); }
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 500 700; font-display: swap; src: url("polices/space-grotesk.woff2") format("woff2"); }

/* ---------- Couleurs : clair (par défaut) ---------- */
:root {
  --fond: #F4F6F8; --surface: #FFFFFF; --surface-2: #EEF2F6; --ligne: #DDE3EA; --ligne-2: #C5CFDA;
  --texte: #172337; --texte-2: #56657A;
  --turquoise: #00827A; --sur-turquoise: #FFFFFF; --turquoise-fond: #D5F0EC;
  --or: #A8672A; --or-fond: #F6EBDD;
  --vert: #1B7F39; --vert-fond: #DDF1E3; --ambre: #A86B00; --ambre-fond: #FBEFD6; --rouge: #C93A3A; --rouge-fond: #FBE3E3;
  --relief: #EAF0F4; --relief-2: #E1E8EE;
  --marque-fond: transparent;
  --voile: rgba(23, 35, 55, .45);
  color-scheme: light;

  --police-texte: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --police-titre: "Space Grotesk", var(--police-texte);
  --police-donnees: "JetBrains Mono", ui-monospace, Consolas, monospace;
  --donnees-graisse: 500;
  --label-police: var(--police-donnees); --label-taille: .6875rem; --label-graisse: 500;
  --label-espace: .1em; --label-casse: uppercase;
  --rayon: 16px; --rayon-petit: 10px;
}

/* ---------- Couleurs : sombre ---------- */
:root[data-mode="sombre"] {
  --fond: #0B1220; --surface: #172337; --surface-2: #223149; --ligne: #26354D; --ligne-2: #3A4B66;
  --texte: #F5F5F2; --texte-2: #9AA9BC;
  --turquoise: #19C3B1; --sur-turquoise: #0B1220; --turquoise-fond: rgba(25, 195, 177, .14);
  --or: #D9A15B; --or-fond: rgba(217, 161, 91, .14);
  --vert: #5BD67A; --vert-fond: rgba(91, 214, 122, .14); --ambre: #FFC857; --ambre-fond: rgba(255, 200, 87, .14);
  --rouge: #FF6B6B; --rouge-fond: rgba(255, 107, 107, .14);
  --relief: #1D2C44; --relief-2: #223149;
  --marque-fond: #FFFFFF;
  --voile: rgba(0, 0, 0, .6);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root[data-mode="auto"] {
    --fond: #0B1220; --surface: #172337; --surface-2: #223149; --ligne: #26354D; --ligne-2: #3A4B66;
    --texte: #F5F5F2; --texte-2: #9AA9BC;
    --turquoise: #19C3B1; --sur-turquoise: #0B1220; --turquoise-fond: rgba(25, 195, 177, .14);
    --or: #D9A15B; --or-fond: rgba(217, 161, 91, .14);
    --vert: #5BD67A; --vert-fond: rgba(91, 214, 122, .14); --ambre: #FFC857; --ambre-fond: rgba(255, 200, 87, .14);
    --rouge: #FF6B6B; --rouge-fond: rgba(255, 107, 107, .14);
    --relief: #1D2C44; --relief-2: #223149;
    --marque-fond: #FFFFFF;
    --voile: rgba(0, 0, 0, .6);
    color-scheme: dark;
  }
}

/* ---------- Couleur d'accent du compte (Paramètres > Apparence) : remplace le turquoise des boutons,
   liens et onglets. --accent / --sur-accent posés sur <html> par prefs_attributs(). En sombre : éclaircie. ---------- */
:root[data-accent] { --turquoise: var(--accent); --sur-turquoise: var(--sur-accent); --turquoise-fond: color-mix(in srgb, var(--accent) 12%, transparent); }
:root[data-accent][data-mode="sombre"] { --turquoise: color-mix(in srgb, var(--accent) 65%, white); --sur-turquoise: #0B1220; --turquoise-fond: color-mix(in srgb, var(--accent) 22%, transparent); }
@media (prefers-color-scheme: dark) {
  :root[data-accent][data-mode="auto"] { --turquoise: color-mix(in srgb, var(--accent) 65%, white); --sur-turquoise: #0B1220; --turquoise-fond: color-mix(in srgb, var(--accent) 22%, transparent); }
}

/* ---------- Thème Classique : une seule police, intitulés sans capitales ---------- */
:root[data-style="classique"] {
  --police-donnees: var(--police-texte);
  --donnees-graisse: 600;
  --label-police: var(--police-texte); --label-taille: .8125rem; --label-graisse: 600;
  --label-espace: 0; --label-casse: none;
}

/* ---------- Taille du texte (le téléphone est un cran plus compact) ---------- */
html { font-size: 15px; }
html[data-taille="petite"] { font-size: 13.5px; }
html[data-taille="grande"] { font-size: 17px; }
@media (min-width: 640px) {
  html { font-size: 16px; }
  html[data-taille="petite"] { font-size: 14.5px; }
  html[data-taille="grande"] { font-size: 18px; }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
body.aa {
  margin: 0; min-height: 100vh; background: var(--fond); color: var(--texte);
  font-family: var(--police-texte); line-height: 1.5; -webkit-font-smoothing: antialiased;
}
:where(.aa) a { color: inherit; text-decoration: none; }
:where(.aa) h1, :where(.aa) h2, :where(.aa) h3 { font-family: var(--police-titre); margin: 0; line-height: 1.2; }
:where(.aa) h1 { font-size: 2rem; font-weight: 600; }
:where(.aa) h2 { font-size: 1.125rem; font-weight: 600; }
:where(.aa) p { margin: 0; }
.aa :focus-visible { outline: 2px solid var(--turquoise); outline-offset: 2px; border-radius: 4px; }
.aa-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.aa-donnee { font-family: var(--police-donnees); font-weight: var(--donnees-graisse); font-variant-numeric: tabular-nums; }
.aa-label {
  font-family: var(--label-police); font-size: var(--label-taille); font-weight: var(--label-graisse);
  letter-spacing: var(--label-espace); text-transform: var(--label-casse); color: var(--or);
}
.aa-discret { color: var(--texte-2); }
.aa-petit { font-size: .8125rem; }
.aa-or { color: var(--or); }
.aa-icone { width: 1.25rem; height: 1.25rem; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Charpente : barre latérale (ordinateur) / onglets du bas (téléphone) ---------- */
.aa-app { min-height: 100vh; display: flex; }
.aa-laterale {
  display: none; width: 248px; flex-shrink: 0; flex-direction: column; gap: 4px; padding: 28px 16px;
  background: var(--surface); border-right: 1px solid var(--ligne); position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.aa-marque { display: flex; align-items: center; gap: 10px; padding: 0 10px 24px; font-family: var(--police-titre); font-weight: 700; font-size: 1rem; line-height: 1.15; }
.aa-marque em { font-style: normal; color: var(--or); }
.aa-marque-logo { background: var(--marque-fond); border-radius: var(--rayon-petit); padding: 4px 8px; margin-left: -8px; }
.aa-nav-lien {
  display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 12px; border-radius: var(--rayon-petit);
  font-size: .875rem; font-weight: 500; color: var(--texte-2);
}
.aa-nav-lien:hover { background: var(--surface-2); color: var(--texte); }
.aa-nav-lien[aria-current="page"] { background: var(--turquoise-fond); color: var(--turquoise); font-weight: 600; }
.aa-sous-nav { margin: 12px 12px 0; padding-top: 14px; border-top: 1px solid var(--ligne); display: flex; flex-direction: column; gap: 12px; font-size: .8125rem; color: var(--texte-2); }
.aa-sous-nav a[aria-current="page"] { color: var(--or); font-weight: 600; }
.aa-laterale-bas { margin-top: auto; padding: 12px 4px 0; border-top: 1px solid var(--ligne); display: flex; flex-direction: column; gap: 4px; }
.aa-profil { display: flex; align-items: center; gap: 10px; padding: 8px; font-size: .8125rem; line-height: 1.3; }
.aa-avatar {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  background: var(--or-fond); color: var(--or); font-weight: 600; font-size: .8125rem;
}
.aa-role { display: inline-block; margin-top: 2px; padding: 1px 8px; border-radius: 999px; font-size: .6875rem; font-weight: 600; background: var(--surface-2); color: var(--texte-2); }
.aa-role--entreprise { background: var(--or-fond); color: var(--or); }
.aa-bouton-nu { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; width: 100%; text-align: left; }

.aa-contenu { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.aa-entete-mobile { display: flex; align-items: center; gap: 10px; padding: 14px 16px 6px; }
.aa-entete-mobile .aa-marque { padding: 0; flex: 1; font-size: .9375rem; }
.aa-main { flex: 1; width: 100%; max-width: 1240px; margin: 0 auto; padding: 8px 16px 104px; display: flex; flex-direction: column; gap: 16px; }
.aa-pied { padding: 16px; font-size: .8125rem; color: var(--texte-2); display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: center; padding-bottom: 96px; }
.aa-pied a:hover { color: var(--or); }

.aa-onglets-bas {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  padding: 6px 4px calc(8px + env(safe-area-inset-bottom)); background: var(--surface); border-top: 1px solid var(--ligne);
}
.aa-onglet { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 50px; font-size: .6875rem; font-weight: 500; color: var(--texte-2); }
.aa-onglet .aa-icone { width: 1.375rem; height: 1.375rem; }
.aa-onglet[aria-current="page"] { color: var(--turquoise); font-weight: 600; }
.aa-plus { position: relative; }
.aa-plus > summary { list-style: none; cursor: pointer; }
.aa-plus > summary::-webkit-details-marker { display: none; }
.aa-plus[open] > summary { color: var(--turquoise); }
.aa-plus-menu {
  position: fixed; left: 12px; right: 12px; bottom: calc(76px + env(safe-area-inset-bottom)); z-index: 30;
  background: var(--surface); border: 1px solid var(--ligne); border-radius: var(--rayon); padding: 8px;
  box-shadow: 0 12px 32px var(--voile); display: flex; flex-direction: column; gap: 2px;
}

@media (min-width: 1024px) {
  .aa-laterale { display: flex; }
  .aa-entete-mobile, .aa-onglets-bas { display: none; }
  .aa-main { padding: 32px 44px 24px; gap: 20px; }
  .aa-pied { padding: 12px 44px 24px; justify-content: flex-start; }
}

/* ---------- Blocs de page ---------- */
.aa-titre-page { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 24px; }
.aa-titre-page > div:first-child { flex: 1; min-width: 12rem; }
.aa-titre-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
/* Titre de la charpente : même rendu quel que soit le style du contenu (Tailwind remet les titres à zéro) */
.aa-titre-page h1 { font-family: var(--police-titre); font-size: 2rem; font-weight: 600; line-height: 1.2; margin: 0; color: var(--texte); }
.aa-titre-page p { margin: 0; }

/* Onglets d'une appli (sous le titre) : défilent au doigt sur téléphone */
.aa-onglets-appli {
  display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  margin: -4px -16px 0; padding: 0 16px 2px; border-bottom: 1px solid var(--ligne);
}
.aa-onglets-appli::-webkit-scrollbar { display: none; }
.aa-onglets-appli a {
  flex-shrink: 0; padding: 10px 14px; font-size: .875rem; font-weight: 500; color: var(--texte-2); white-space: nowrap;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.aa-onglets-appli a:hover { color: var(--texte); }
.aa-onglets-appli a[aria-current="page"] { color: var(--turquoise); border-bottom-color: var(--turquoise); font-weight: 600; }
@media (min-width: 1024px) { .aa-onglets-appli { margin: -8px 0 0; padding: 0; } }

/* Petit sélecteur à deux choix (ex. inventaire Pilote / Entreprise) */
.aa-bascule { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--ligne); }
.aa-bascule a { padding: 6px 14px; border-radius: 999px; font-size: .8125rem; font-weight: 600; color: var(--texte-2); }
.aa-bascule a[aria-current="true"] { background: var(--surface); color: var(--texte); box-shadow: 0 1px 3px var(--voile); }

/* Pages au contenu encore à l'ancien style (Tailwind) dans la nouvelle charpente */
.aa-main--ancien { display: block; }
.aa-main--ancien > .aa-titre-page, .aa-main--ancien > .aa-onglets-appli { margin-bottom: 20px; }
.aa-titre-page .aa-label { display: block; margin-bottom: 6px; }
/* Un élément caché (attribut hidden) reste caché, même si sa classe lui donne un display (ex. .aa-carte en flex) */
[hidden] { display: none !important; }
.aa-carte { background: var(--surface); border: 1px solid var(--ligne); border-radius: var(--rayon); padding: 18px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
@media (min-width: 640px) { .aa-carte { padding: 22px; } }
.aa-carte-tete { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.aa-grille { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) {
  .aa-grille { gap: 20px; }
  .aa-grille--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .aa-grille--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) { .aa-grille--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.aa-ligne { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--ligne); }
.aa-ligne:last-child { border-bottom: 0; }
.aa-ligne-texte { flex: 1; min-width: 0; font-size: .875rem; line-height: 1.35; }
.aa-ligne-texte strong { font-weight: 600; }
.aa-vide { font-size: .875rem; color: var(--texte-2); }
.aa-tuile { background: var(--surface-2); border-radius: var(--rayon-petit); padding: 10px 12px; }
.aa-tuile span { display: block; font-size: .75rem; color: var(--texte-2); }
.aa-tuile strong { display: block; margin-top: 2px; font-size: .9375rem; }
.aa-date { width: 52px; flex-shrink: 0; text-align: center; border-radius: var(--rayon-petit); background: var(--or-fond); color: var(--or); padding: 6px 0; font-size: .6875rem; line-height: 1.3; text-transform: uppercase; }
.aa-date strong { display: block; font-size: 1.125rem; }

/* ---------- Boutons, liens, champs ---------- */
.aa-bouton, .aa-bouton-second, .aa-bouton-danger {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px;
  border-radius: var(--rayon-petit); font: 600 .875rem var(--police-texte); cursor: pointer; text-align: center;
}
.aa-bouton { background: var(--turquoise); color: var(--sur-turquoise); border: 0; }
.aa-bouton:hover { filter: brightness(1.08); }
.aa-bouton-second { background: var(--surface); color: var(--texte); border: 1px solid var(--ligne); }
.aa-bouton-second:hover { border-color: var(--or); }
.aa-bouton-danger { background: var(--rouge); color: #FFFFFF; border: 0; }
.aa-bouton-petit { min-height: 34px; padding: 0 12px; font-size: .8125rem; }
.aa-lien { font-size: .875rem; font-weight: 600; color: var(--turquoise); }
.aa-lien:hover { text-decoration: underline; }
.aa-pousse-bas { margin-top: auto; }
.aa-champ-bloc { display: flex; flex-direction: column; gap: 6px; font-size: .8125rem; font-weight: 600; }
.aa-champ {
  width: 100%; min-height: 44px; padding: 0 12px; border: 1px solid var(--ligne); border-radius: var(--rayon-petit);
  background: var(--surface); color: var(--texte); font: 400 .9375rem var(--police-texte);
}
.aa-champ:focus { outline: 2px solid var(--turquoise); outline-offset: 1px; }

/* Choix « segmenté » (boutons radio) */
.aa-segment { display: flex; padding: 4px; border-radius: 12px; background: var(--surface-2); gap: 4px; flex-wrap: wrap; }
.aa-segment label { flex: 1; min-width: 5.5rem; }
.aa-segment input { position: absolute; opacity: 0; pointer-events: none; }
.aa-segment span {
  display: flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 10px; border-radius: 9px;
  font-size: .8125rem; font-weight: 600; color: var(--texte-2); cursor: pointer; text-align: center;
}
.aa-segment input:checked + span { background: var(--surface); color: var(--texte); box-shadow: 0 1px 2px var(--voile); }
.aa-segment input:focus-visible + span { outline: 2px solid var(--turquoise); }

/* Cases à cocher */
.aa-case { display: flex; align-items: center; gap: 12px; min-height: 40px; font-size: .875rem; cursor: pointer; }
.aa-case input { width: 20px; height: 20px; accent-color: var(--turquoise); margin: 0; flex-shrink: 0; }

/* ---------- États (échéances, avis) ---------- */
.aa-pastille { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; background: var(--ligne-2); }
.aa-rouge { color: var(--rouge); } .aa-ambre { color: var(--ambre); } .aa-vert { color: var(--vert); } .aa-turquoise { color: var(--turquoise); }
.aa-pastille.aa-rouge { background: var(--rouge); } .aa-pastille.aa-ambre { background: var(--ambre); } .aa-pastille.aa-vert { background: var(--vert); }
.aa-barre { height: 5px; border-radius: 3px; background: var(--surface-2); overflow: hidden; }
.aa-barre > span { display: block; height: 100%; background: var(--ligne-2); border-radius: 3px; }
.aa-barre > span.aa-rouge { background: var(--rouge); } .aa-barre > span.aa-ambre { background: var(--ambre); } .aa-barre > span.aa-vert { background: var(--vert); }
.aa-badge { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; font-size: .75rem; font-weight: 600; background: var(--surface-2); color: var(--texte-2); }
.aa-badge--turquoise { background: var(--turquoise-fond); color: var(--turquoise); }
.aa-badge--rouge { background: var(--rouge-fond); color: var(--rouge); }
.aa-badge--ambre { background: var(--ambre-fond); color: var(--ambre); }
.aa-badge--or { background: var(--or-fond); color: var(--or); }
.aa-message { border-left: 4px solid var(--or); background: var(--surface); border-radius: 0 var(--rayon-petit) var(--rayon-petit) 0; padding: 12px 16px; font-size: .875rem; }
.aa-message--succes { border-color: var(--vert); background: var(--vert-fond); }
.aa-message--erreur { border-color: var(--rouge); background: var(--rouge-fond); }
.aa-message ul { margin: 0; padding-left: 18px; }

/* ---------- Tableaux simples ---------- */
.aa-tableau-bloc { overflow-x: auto; }
.aa-tableau { width: 100%; border-collapse: collapse; font-size: .875rem; }
.aa-tableau th, .aa-tableau td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--ligne); }
.aa-tableau tr:last-child th, .aa-tableau tr:last-child td { border-bottom: 0; }
.aa-tableau th { font-weight: 600; white-space: nowrap; }

/* ---------- Bandeau du tableau de bord (météo des 7 jours) ---------- */
.aa-bandeau { position: relative; overflow: hidden; background: var(--surface); border: 1px solid var(--ligne); border-radius: 18px; padding: 18px; }
.aa-bandeau-relief { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 60%; pointer-events: none; }
.aa-bandeau-relief .r1 { fill: var(--relief); } .aa-bandeau-relief .r2 { fill: var(--relief-2); }
.aa-bandeau-texte { position: relative; display: flex; flex-direction: column; gap: 6px; max-width: 30rem; }
.aa-bandeau-texte h1 { font-size: 1.5rem; }
.aa-soleil { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: .8125rem; color: var(--texte-2); margin-top: 4px; }
.aa-soleil strong { color: var(--or); font-weight: 600; }
.aa-bandeau-outil { position: relative; margin-top: 12px; display: inline-flex; width: fit-content; }
.aa-semaine { position: relative; margin-top: 14px; }
.aa-semaine-ciel { position: relative; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); height: 70px; }
.aa-semaine-ciel::before { content: ""; position: absolute; left: 0; right: 0; top: 14px; border-top: 1px dashed var(--ligne-2); }
.aa-jour { position: relative; display: flex; justify-content: center; }
.aa-jour svg { position: absolute; }
.aa-jour .vol { top: 2px; width: 20px; height: 25px; fill: var(--or); animation: aa-monte .9s ease-out both; }
.aa-jour .sol { bottom: 4px; width: 28px; height: 12px; }
.aa-jour .sol path { fill: none; stroke: var(--texte-2); stroke-width: 3; stroke-linecap: round; }
.aa-jour .sol rect { fill: var(--texte-2); }
.aa-jour .inconnu { bottom: 6px; font-size: .75rem; color: var(--texte-2); }
.aa-semaine-noms { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); text-align: center; font-size: .6875rem; color: var(--texte-2); margin-top: 4px; }
.aa-semaine-noms .demain { color: var(--texte); font-weight: 700; }
.aa-semaine-legende { font-size: .6875rem; color: var(--texte-2); margin-top: 6px; }
@media (min-width: 900px) {
  .aa-bandeau { padding: 30px 36px; min-height: 214px; }
  .aa-bandeau-texte h1 { font-size: 2.125rem; }
  .aa-semaine { position: absolute; right: 36px; bottom: 24px; width: min(44%, 500px); margin: 0; }
  .aa-semaine-ciel { height: 118px; }
  .aa-semaine-ciel::before { top: 26px; }
  .aa-jour .vol { top: 12px; width: 26px; height: 32px; }
  .aa-jour .sol { width: 34px; height: 14px; }
  .aa-bandeau-outil { margin-top: 16px; }
}
@keyframes aa-monte { from { transform: translateY(50px); opacity: 0; } to { transform: none; opacity: 1; } }

/* Raccourcis du tableau de bord */
.aa-raccourcis { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; margin-bottom: 16px; }
.aa-raccourci { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 84px; padding: 12px 8px;
  background: var(--surface); border: 1px solid var(--ligne); border-radius: var(--rayon); color: var(--texte); text-decoration: none;
  font-size: .8125rem; font-weight: 600; text-align: center; transition: border-color .15s, transform .15s; }
.aa-raccourci .aa-icone { color: var(--or); width: 24px; height: 24px; }
.aa-raccourci:hover { border-color: var(--or); transform: translateY(-1px); }
.aa-case .aa-icone { color: var(--or); }

/* Mode personnalisation du tableau de bord */
.aa-perso-liste { display: flex; flex-direction: column; gap: 6px; }
.aa-perso-item { display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 8px 0 12px; border-radius: var(--rayon-petit); background: var(--surface-2); font-size: .875rem; font-weight: 600; }
.aa-perso-item .aa-icone { color: var(--or); }
.aa-perso-item span { flex: 1; }
.aa-fleche { width: 36px; height: 36px; border-radius: 8px; border: 1px solid var(--ligne); background: var(--surface); color: var(--texte); cursor: pointer; font-size: 1rem; }
.aa-fleche:disabled { opacity: .35; cursor: default; }

/* Moins d'animations si l'appareil le demande */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Bouton « Tutoriel » de l'en-tête sur téléphone (design/guide.js) */
.aa-guide-ouvrir { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; color: var(--texte-2); }
.aa-guide-ouvrir:hover, .aa-guide-ouvrir:focus-visible { background: var(--surface-2); color: var(--texte); }

/* ---------- Menu du compte (refonte R1, 19/10/2026) : flèche en bas de la barre latérale ---------- */
.aa-compte { display: flex; flex-direction: column-reverse; }
.aa-compte > summary { list-style: none; cursor: pointer; border-radius: var(--rayon-petit); }
.aa-compte > summary::-webkit-details-marker { display: none; }
.aa-compte > summary:hover { background: var(--surface-2); }
.aa-compte-fleche { width: 1rem; height: 1rem; color: var(--texte-2); transition: transform .15s; }
.aa-compte[open] .aa-compte-fleche { transform: rotate(180deg); }
.aa-compte-menu { display: flex; flex-direction: column; gap: 2px; padding-bottom: 6px; }
.aa-compte-titre { font-size: .6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--texte-2); padding: 4px 12px; }
.aa-compte-actif { color: var(--texte); font-weight: 600; }
.aa-compte-menu .aa-nav-lien span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aa-compte-sep { border: 0; border-top: 1px solid var(--ligne); margin: 4px 0; width: 100%; }
.aa-nav-sep { border: 0; border-top: 1px solid var(--ligne); margin: 8px 4px; width: auto; }
.aa-nav-double { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.aa-nav-sous { font-size: .75rem; color: var(--texte-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aa-laterale form { margin: 0; }
.aa-plus-menu .aa-compte-sep { margin: 4px 0; }
/* Boutons du menu (Tutoriel, Se déconnecter, changer de compte) alignés sur les liens */
.aa-nav-lien.aa-bouton-nu { padding: 0 12px; font-size: .875rem; font-weight: 500; color: var(--texte-2); }
.aa-nav-lien.aa-bouton-nu:hover { color: var(--texte); }
.aa-avatar--mini { width: 24px; height: 24px; font-size: .625rem; }