@import url("tokens-uPDBcPl.css");
@import url("fonts-xL2MXrm.css");
@import url("icons-z8HhHU1.css");

/* ---------- Base ---------- */
/* Pas de halo bleu au tap (surlignage par défaut de la WebView Android). */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

body {
    margin: 0;
    /* Zones système du téléphone (APK/PWA plein écran) : ne rien dessiner dessous. */
    padding-top: env(safe-area-inset-top);
    font-family: var(--fy-font-body);
    -webkit-font-smoothing: antialiased;
    background: var(--fy-bg);
    color: var(--fy-ink);
}

h1, h2, h3 { font-family: var(--fy-font-title); color: var(--fy-ink); }

input::placeholder { color: #A9B6C8; }

.sx { scrollbar-width: none; }
.sx::-webkit-scrollbar { width: 0; height: 0; }

@keyframes scrIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes popIn { 0% { opacity: 0; transform: scale(.6); } 60% { transform: scale(1.08); } 100% { opacity: 1; transform: scale(1); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes sheetUp { from { transform: translateY(100%); } to { transform: translateY(0); } }

/* ---------- Shell app joueur (mobile-first, plein viewport) ---------- */
.fy-app {
    max-width: 520px;
    margin: 0 auto;
    min-height: 100dvh;
    background: var(--fy-bg);
    display: flex;
    flex-direction: column;
}

.fy-screen {
    flex: 1;
    padding: 8px 18px calc(86px + env(safe-area-inset-bottom));
}

/* Animation d'entrée : JAMAIS par défaut (sinon elle rejoue sur l'aperçu du
   cache PUIS sur le rendu final = « sursaut »). On l'ajoute en JS uniquement
   sur le 1er rendu frais d'une navigation (voir app.js). */
.fy-anim-in .fy-screen { animation: scrNav .28s ease; }
@keyframes fyBannerIn { from { opacity: 0; transform: translateY(-12px); } }
@keyframes scrNav {
    from { opacity: .4; transform: translateY(9px); }
}

/* Barre de chargement Turbo aux couleurs de la charte. */
.turbo-progress-bar { height: 3px; background: var(--fy-gradient); }

/* Tampon qui vient d'arriver sur la carte du client. */
.fy-stamp-pop { animation: stampPop .55s cubic-bezier(.2, 1.6, .4, 1); }

/* Un chiffre qui change rebondit sur place. `stampPop` part de .15 : sur une
   case vide qui se remplit c'est juste, sur du texte ça donnait l'impression
   d'un chiffre qui glisse vers la droite. */
.fy-bump {
    display: inline-block;
    transform-origin: center;
    animation: fyBump .5s cubic-bezier(.2, 1.6, .4, 1);
}
@keyframes fyBump {
    0%, 100% { transform: scale(1); }
    45% { transform: scale(1.32); }
}
@keyframes stampPop {
    0% { transform: scale(.15); opacity: 0; }
    65% { transform: scale(1.28); opacity: 1; }
    100% { transform: scale(1); }
}

.fy-screen-title { margin: 14px 0 2px; font-weight: 700; font-size: 22px; letter-spacing: -.5px; }
.fy-screen-sub { margin: 0 0 16px; font-size: 13px; color: var(--fy-text-muted); font-weight: 600; }

/* Nos gabarits portent leurs `display` en style inline : sans !important,
   l'attribut `hidden` posé par un contrôleur Stimulus ne masquerait rien. */
[hidden] { display: none !important; }

/* ---------- Écrans d'administration : filtres, kebab, fiche modale ---------- */
.fy-chip {
    min-height: 42px;
    padding: 0 15px;
    border-radius: var(--fy-r-pill);
    border: 1.5px solid var(--fy-border-soft);
    background: var(--fy-surface);
    color: var(--fy-text-soft);
    font-size: 12.5px;
    font-weight: 700;
    font-family: var(--fy-font-body);
    cursor: pointer;
    transition: all .15s;
}
.fy-chip:hover { border-color: var(--fy-border); }
.fy-chip.active {
    background: var(--fy-ink);
    border-color: var(--fy-ink);
    color: #fff;
}

/* Carte d'une liste d'administration (commerces, inscrits) : compacte au
   repos, les actions n'apparaissent qu'au survol pour ne pas transformer la
   grille en mur de boutons. Au doigt il n'y a pas de survol : elles restent
   visibles, c'est la seule façon de les atteindre. */
.fy-admin-card {
    display: flex;
    flex-direction: column;
    transition: transform .16s ease, box-shadow .16s ease;
}
.fy-admin-card .fy-admin-acts {
    display: flex;
    gap: 6px;
    margin-top: 11px;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity .16s ease, transform .16s ease;
}
/* Le bouton « retirer de l'annuaire » vit dans son propre <form> (POST) :
   `display:contents` le laisse s'aligner avec les cinq autres. */
.fy-admin-acts > form { display: contents; }
.fy-admin-acts .fy-btn {
    flex: 1;
    min-width: 0;
    min-height: 38px;
    padding: 0;
    font-size: 13px;
}
@media (hover: hover) {
    .fy-admin-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 18px 38px -22px rgba(29, 14, 63, .45);
    }
    .fy-admin-card:hover .fy-admin-acts,
    .fy-admin-card:focus-within .fy-admin-acts { opacity: 1; transform: none; }
}
@media (hover: none) {
    .fy-admin-card .fy-admin-acts { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .fy-admin-card, .fy-admin-card .fy-admin-acts { transition: none; }
    .fy-admin-card:hover { transform: none; }
}

/* Kebab en <details> : pas de JavaScript, et Échap le referme tout seul. */
.fy-kebab { position: relative; }
.fy-kebab > summary { list-style: none; cursor: pointer; }
.fy-kebab > summary::-webkit-details-marker { display: none; }
.fy-kebab-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    z-index: 25;
    min-width: 232px;
    padding: 6px;
    background: var(--fy-surface);
    border: 1px solid var(--fy-border);
    border-radius: 14px;
    box-shadow: 0 22px 50px -22px rgba(29, 14, 63, .45);
}
.fy-kebab-menu a,
.fy-kebab-menu button {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    min-height: 40px;
    padding: 0 11px;
    border: 0;
    border-radius: 10px;
    background: none;
    color: var(--fy-text-soft);
    font-size: 12.5px;
    font-weight: 700;
    font-family: var(--fy-font-body);
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}
.fy-kebab-menu a:hover,
.fy-kebab-menu button:hover { background: var(--fy-bg); }

.fy-modal {
    border: 0;
    padding: 0;
    border-radius: 20px;
    width: min(620px, calc(100vw - 32px));
    max-height: calc(100dvh - 48px);
    background: var(--fy-surface);
    box-shadow: 0 30px 70px -20px rgba(29, 14, 63, .5);
}
.fy-modal::backdrop { background: rgba(29, 14, 63, .38); backdrop-filter: blur(2px); }
.fy-modal > form { max-height: calc(100dvh - 48px); overflow-y: auto; }

/* ---------- Menu FAB (bouton flottant) ---------- */
/* Case cachée qui pilote l'ouverture (100 % CSS, robuste avec Turbo :
   chaque page recharge la case décochée). */
.fy-fab-cb { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; }
.fy-fab-scrim {
    position: fixed; inset: 0; z-index: 29;
    background: rgba(29, 14, 63, .34); backdrop-filter: blur(2px);
    opacity: 0; pointer-events: none; transition: opacity .22s; cursor: pointer;
}
/* Ancré au coin bas-droit de la colonne app (max 520px, centrée sur desktop).
   pointer-events none sur la nav : sa boîte englobe la pile de raccourcis
   invisibles et volait les taps de tout le bas-droit de l'écran (vécu le
   04/08/2026 : « MA CARTE » et « Rejoindre » morts sur l'accueil). Seuls le
   bouton rond et, menu ouvert, les items redeviennent cliquables. */
.fy-fab {
    position: fixed;
    right: max(18px, calc(50% - 242px));
    bottom: calc(22px + env(safe-area-inset-bottom));
    z-index: 30;
    display: flex; flex-direction: column; align-items: flex-end; gap: 12px;
    pointer-events: none;
}
.fy-fab-btn { pointer-events: auto; }
.fy-fab-items {
    display: flex; flex-direction: column; align-items: flex-end; gap: 11px;
    opacity: 0; transform: translateY(12px) scale(.92); pointer-events: none;
    transition: all .22s cubic-bezier(.2, 1.3, .4, 1);
}
.fy-fab-item { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.fy-fab-item .lbl {
    background: var(--fy-surface); color: var(--fy-ink); font-size: 13px; font-weight: 700;
    padding: 7px 13px; border-radius: var(--fy-r-pill); white-space: nowrap;
    box-shadow: 0 4px 12px rgba(56, 28, 76, .16);
}
.fy-fab-item .cir {
    width: 46px; height: 46px; border-radius: 50%; flex: none;
    background: var(--fy-surface); color: var(--fy-ink);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 12px rgba(56, 28, 76, .16); border: 1px solid var(--fy-border);
}
.fy-fab-item .cir i { font-size: 22px; }
.fy-fab-item.active .cir { background: var(--fy-gradient); color: #fff; border: none; }
.fy-fab-item.active .lbl { color: var(--fy-accent); }
.fy-fab-btn {
    width: 60px; height: 60px; border-radius: 50%; align-self: flex-end;
    background: var(--fy-gradient); color: #fff;
    display: flex; align-items: center; justify-content: center;
    box-shadow: var(--fy-shadow-pop); cursor: pointer;
    transition: transform .28s cubic-bezier(.2, 1.3, .4, 1);
}
.fy-fab-btn i { font-size: 28px; }
.fy-fab-cb:checked ~ .fy-fab .fy-fab-items { opacity: 1; transform: none; pointer-events: auto; }
.fy-fab-cb:checked ~ .fy-fab .fy-fab-btn { transform: rotate(135deg); }
.fy-fab-cb:checked ~ .fy-fab-scrim { opacity: 1; pointer-events: auto; }
.fy-fab-cb:checked ~ .fy-fab .fy-fab-item:nth-child(5) { transition-delay: .02s; }
.fy-fab-cb:checked ~ .fy-fab .fy-fab-item:nth-child(4) { transition-delay: .05s; }
.fy-fab-cb:checked ~ .fy-fab .fy-fab-item:nth-child(3) { transition-delay: .08s; }
.fy-fab-cb:checked ~ .fy-fab .fy-fab-item:nth-child(2) { transition-delay: .11s; }
.fy-fab-cb:checked ~ .fy-fab .fy-fab-item:nth-child(1) { transition-delay: .14s; }
@media (prefers-reduced-motion: reduce) {
    .fy-fab-items, .fy-fab-btn { transition: opacity .12s; }
}

/* ---------- Cartes / conteneurs ---------- */
.fy-card {
    background: var(--fy-surface);
    border: 1px solid var(--fy-border);
    border-radius: var(--fy-r-lg);
    box-shadow: var(--fy-shadow-card);
}

.fy-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 20px 0 11px;
}

.fy-section-head h2 { margin: 0; font-weight: 700; font-size: 15px; }
.fy-section-head .fy-link { font-size: 12px; color: var(--fy-accent); font-weight: 700; text-decoration: none; }

/* ---------- Boutons ---------- */
.fy-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: var(--fy-tap);
    padding: 0 22px;
    border: none;
    border-radius: var(--fy-r-md);
    background: var(--fy-gradient);
    color: #fff;
    font-family: var(--fy-font-title);
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    text-decoration: none;
    box-shadow: var(--fy-shadow-pop);
    white-space: nowrap;
}

.fy-btn--secondary {
    background: var(--fy-surface);
    color: var(--fy-primary);
    border: 1.5px solid var(--fy-border-soft);
    box-shadow: none;
}

.fy-btn--ghost {
    background: transparent;
    color: var(--fy-text-soft);
    box-shadow: none;
}

/* ---------- Pastilles de statut ---------- */
.fy-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: var(--fy-r-pill);
    font-size: 11px;
    font-weight: 700;
}

.fy-pill::before { content: ''; width: 7px; height: 7px; border-radius: 50%; }
.fy-pill--claim { background: var(--fy-st-claim-bg); color: var(--fy-st-claim-fg); }
.fy-pill--claim::before { background: var(--fy-st-claim-dot); }
.fy-pill--live { background: var(--fy-st-live-bg); color: var(--fy-st-live-fg); }
.fy-pill--live::before { background: var(--fy-st-live-dot); }
.fy-pill--done { background: var(--fy-st-done-bg); color: var(--fy-st-done-fg); }
.fy-pill--done::before { background: var(--fy-st-done-dot); }
.fy-pill--exp { background: var(--fy-st-exp-bg); color: var(--fy-st-exp-fg); }
.fy-pill--exp::before { background: var(--fy-st-exp-dot); }

/* ---------- Logo lettre commerçant ---------- */
.fy-logo-badge {
    width: 46px;
    height: 46px;
    flex: none;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-family: var(--fy-font-title);
    font-weight: 700;
    font-size: 18px;
}

/* ---------- Jauge de progression ---------- */
.fy-progress {
    height: 7px;
    border-radius: var(--fy-r-pill);
    background: #F1EAE3;
    overflow: hidden;
}

.fy-progress > span {
    display: block;
    height: 100%;
    border-radius: var(--fy-r-pill);
}

/* ---------- Tuile de stat (cockpit) ---------- */
.fy-stat {
    background: var(--fy-surface);
    border: 1px solid var(--fy-border);
    border-radius: var(--fy-r-lg);
    box-shadow: var(--fy-shadow-soft);
    padding: 14px;
}

.fy-stat .fy-stat-value { font-family: var(--fy-font-title); font-weight: 700; font-size: 24px; }
.fy-stat .fy-stat-label { font-size: 11.5px; color: var(--fy-text-muted); font-weight: 600; }

.fy-trend {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 10.5px;
    font-weight: 700;
    padding: 3px 7px;
    border-radius: 7px;
    color: var(--fy-st-done-fg);
    background: var(--fy-st-done-bg);
}

.fy-trend--down { color: var(--fy-danger); background: var(--fy-danger-bg); }

/* ---------- Intro : les trois écrans avant la connexion ----------
   Le verre dépoli n'a de sens que posé sur un fond qui a de la matière : ici le
   dégradé de marque. Sur le crème de l'app, il donnerait du beige sale — d'où
   les bulles du tutoriel, plus bas, en blanc opaque. */
.fy-intro {
    position: relative;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: linear-gradient(158deg, #F04A4C 0%, #F26A38 54%, #F8961F 100%);
    color: #fff;
}
.fy-intro::before {
    content: '';
    position: absolute; inset: -20%;
    pointer-events: none;
    background:
        radial-gradient(38% 30% at 16% 14%, rgba(255, 255, 255, .40), transparent 70%),
        radial-gradient(46% 36% at 88% 80%, rgba(29, 14, 63, .42), transparent 72%);
}
.fy-intro-top {
    position: relative; z-index: 1;
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 20px 0;
}
.fy-intro-top img { height: 32px; }
.fy-intro-skip {
    padding: 8px 4px; border: none; background: none; cursor: pointer;
    font-family: var(--fy-font-body); font-size: 13px; font-weight: 700;
    color: rgba(255, 255, 255, .88); text-decoration: none;
}
.fy-intro-track {
    position: relative; z-index: 1; flex: 1;
    display: flex; overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory; scrollbar-width: none;
}
.fy-intro-track::-webkit-scrollbar { width: 0; height: 0; }
.fy-intro-slide {
    flex: 0 0 100%; scroll-snap-align: center; scroll-snap-stop: always;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 16px 22px; text-align: center;
}
.fy-intro-glass {
    width: 100%; max-width: 380px;
    padding: 30px 24px 28px;
    border-radius: 28px;
    background: rgba(255, 255, 255, .17);
    border: 1px solid rgba(255, 255, 255, .34);
    box-shadow: 0 26px 60px -26px rgba(29, 14, 63, .6), inset 0 1px 0 rgba(255, 255, 255, .28);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    backdrop-filter: blur(20px) saturate(150%);
}
.fy-intro-ico {
    width: 74px; height: 74px; margin: 0 auto 18px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 24px; background: rgba(255, 255, 255, .93); color: var(--fy-accent);
    box-shadow: 0 12px 26px -12px rgba(29, 14, 63, .5);
}
.fy-intro-ico i { font-size: 38px; }
.fy-intro-glass h2 {
    margin: 0 0 10px; color: #fff;
    font-size: 23px; line-height: 1.22; letter-spacing: -.4px; text-wrap: balance;
}
.fy-intro-glass p { margin: 0; font-size: 14.5px; line-height: 1.6; color: rgba(255, 255, 255, .94); }
.fy-intro-foot {
    position: relative; z-index: 1;
    display: flex; flex-direction: column; align-items: center; gap: 15px;
    padding: 0 22px calc(24px + env(safe-area-inset-bottom));
}
.fy-intro-dots { display: flex; gap: 7px; }
.fy-intro-dots span {
    width: 7px; height: 7px; border-radius: 999px;
    background: rgba(255, 255, 255, .45);
    transition: width .25s, background .25s;
}
.fy-intro-dots span.on { width: 22px; background: #fff; }
.fy-intro-cta {
    width: 100%; max-width: 380px; min-height: 52px;
    display: flex; align-items: center; justify-content: center;
    border: none; border-radius: var(--fy-r-pill); cursor: pointer;
    background: #fff; color: var(--fy-accent);
    font-family: var(--fy-font-title); font-weight: 700; font-size: 15.5px;
    box-shadow: 0 14px 30px -14px rgba(29, 14, 63, .6);
}
.fy-intro-alt {
    padding: 4px; text-decoration: none;
    font-size: 13px; font-weight: 700; color: rgba(255, 255, 255, .92);
}

/* ---------- Tutoriel : bulles posées sur l'interface réelle ----------
   Ce qui crée le focus, c'est le voile sombre percé sur l'élément désigné :
   la bulle, elle, reste blanche et opaque pour rester lisible partout. */
.fy-coach-catch { position: fixed; inset: 0; z-index: 9000; cursor: pointer; touch-action: none; }
/* Le tutoriel déplie le menu pour le désigner : son voile à lui ferait doublon
   avec celui du tutoriel, et assombrirait l'élément justement mis en avant. */
.fy-coach-on .fy-fab-scrim { opacity: 0 !important; pointer-events: none !important; }
.fy-coach-hole {
    position: fixed; z-index: 9001; pointer-events: none;
    border-radius: 18px;
    box-shadow: 0 0 0 9999px rgba(23, 11, 48, .68), inset 0 0 0 2px rgba(255, 255, 255, .9);
    transition: top .3s cubic-bezier(.4, 0, .2, 1), left .3s cubic-bezier(.4, 0, .2, 1),
                width .3s cubic-bezier(.4, 0, .2, 1), height .3s cubic-bezier(.4, 0, .2, 1);
}
.fy-coach-pop {
    position: fixed; z-index: 9002;
    width: min(322px, calc(100vw - 28px));
    padding: 17px 18px 15px;
    border-radius: 20px; background: var(--fy-surface); color: var(--fy-ink);
    box-shadow: 0 24px 54px -20px rgba(29, 14, 63, .55);
    animation: fyCoachIn .28s cubic-bezier(.2, 1.2, .4, 1);
}
.fy-coach-pop h3 { margin: 0 0 6px; font-size: 15px; }
.fy-coach-pop p { margin: 0; font-size: 13px; line-height: 1.55; color: var(--fy-text-soft); }
.fy-coach-arrow {
    position: absolute; width: 14px; height: 14px;
    background: var(--fy-surface); transform: rotate(45deg);
}
.fy-coach-foot {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    margin-top: 14px;
}
.fy-coach-step {
    font-size: 11.5px; font-weight: 700; color: var(--fy-text-faint);
    font-variant-numeric: tabular-nums;
}
.fy-coach-acts { display: flex; align-items: center; gap: 4px; }
.fy-coach-btn {
    min-height: 36px; padding: 0 16px;
    border: none; border-radius: var(--fy-r-pill); cursor: pointer;
    background: var(--fy-gradient); color: #fff;
    font-family: var(--fy-font-title); font-weight: 700; font-size: 13px;
}
.fy-coach-btn--ghost { background: none; color: var(--fy-text-muted); padding: 0 9px; }
@keyframes fyCoachIn { from { opacity: 0; transform: translateY(8px) scale(.97); } }

/* ---------- Voile de chargement : au-delà de 800 ms, montrer qu'on travaille ----------
   Le trait Turbo suffit aux navigations rapides ; ce voile prend le relais
   quand le serveur tarde, sinon l'app paraît figée (retour testeur du 03/08). */
#fy-loader {
    position: fixed; inset: 0; z-index: 10050;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
    background: rgba(250, 246, 240, .74);
    backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
    animation: fyFadeIn .25s ease;
}
.fy-loader-spin {
    width: 38px; height: 38px; border-radius: 50%;
    border: 3.5px solid var(--fy-border);
    border-top-color: var(--fy-accent);
    animation: fySpin .8s linear infinite;
}
.fy-loader-txt { font-family: var(--fy-font-title); font-weight: 700; font-size: 13px; color: var(--fy-text-soft); }
@keyframes fySpin { to { transform: rotate(360deg); } }
@keyframes fyFadeIn { from { opacity: 0; } }

/* ---------- Verre dépoli : fonctionnalités à débloquer ---------- */
/* Voile posé sur les tuiles d'un compte neuf : on voit ce qui se débloque. */
.fy-lock {
    position: absolute; inset: 0; z-index: 1;
    border-radius: 18px; padding: 14px 16px;
    background: rgba(255, 251, 246, .58);
    border: 1px solid rgba(255, 255, 255, .85);
    backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
    display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
}

@media (prefers-reduced-motion: reduce) {
    .fy-loader-spin { animation-duration: 1.6s; }
    #fy-loader { animation: none; }
}

/* ---------- Wallet : pastilles de couleur des cartes d'autres enseignes ---------- */
.fy-swatch { cursor: pointer; position: relative; }
.fy-swatch input { position: absolute; opacity: 0; pointer-events: none; }
.fy-swatch span { display: block; width: 30px; height: 30px; border-radius: 10px; border: 2.5px solid transparent; }
.fy-swatch input:checked + span { border-color: var(--fy-ink); box-shadow: 0 0 0 2px #fff inset; }

@media (prefers-reduced-motion: reduce) {
    .fy-intro-dots span { transition: none; }
    .fy-coach-hole { transition: none; }
    .fy-coach-pop { animation: none; }
}

/* ================= Desktop & tablette : surface applicative centrée =================
   L'app reste une colonne (c'est une app mobile), mais posée sur un fond et
   cadrée pour un rendu volontaire et pro sur grand écran, plus large pour les
   outils utilisés au bureau (cockpit, admin). */
@media (min-width: 820px) {
    body {
        background:
            radial-gradient(70% 55% at 50% 0%, rgba(240,86,47,.07), transparent 72%),
            #EBE1D7;
    }
    .fy-app {
        position: relative;
        max-width: 600px;
        min-height: 100vh;
        box-shadow: 0 0 0 1px var(--fy-border), 0 40px 90px -55px rgba(29,14,63,.45);
    }
    .fy-app--desk { max-width: 980px; }

    /* Le bouton flottant s'ancre au bord de SA colonne, qui s'élargit ici :
       600px côté client, 980px dans le cockpit. Sinon il flotte au milieu. */
    .fy-fab { right: max(18px, calc(50% - 282px)); }
    .fy-app--desk .fy-fab { right: max(18px, calc(50% - 472px)); }

    /* Le burger flottant s'ancre à la colonne, pas au bord de l'écran
       (le kebab admin, lui, reste dans le flux de son entête). */
    .fy-app .fy-burger { position: absolute !important; }

    .fy-screen { padding-bottom: 118px; }

    /* Grilles denses du cockpit : on profite de la largeur. */
    .fy-app--desk .fy-dgrid { grid-template-columns: repeat(4, 1fr) !important; }
}

/* ---------- Super-admin au bureau : plein écran, navigation à demeure ----------
   POURQUOI. Le back-office se travaille sur un grand écran, souvent à côté d'un
   tableur ou d'une boîte mail. Bridé à 980 px, un tableau de commerces obligeait
   à scroller pour rien, et le kebab imposait deux gestes à chaque saut d'écran.
   Au-delà de 1100 px la coque prend toute la largeur et le menu reste affiché.
   En dessous, l'admin retombe sur la coque mobile : le kebab reprend la main. */
.fy-adminnav {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 244px;
    flex-direction: column;
    gap: 4px;
    padding: 18px 14px 16px;
    background: var(--fy-surface);
    border-right: 1px solid var(--fy-border);
    overflow-y: auto;
    z-index: 50;
}

@media (min-width: 1100px) {
    .fy-adminnav { display: flex; }
    .fy-app--admin {
        max-width: none;
        width: 100%;
        margin: 0;
        box-shadow: none;
        padding-left: 244px;
    }
    .fy-app--admin .fy-screen { padding: 8px 34px 64px; }
    .fy-app--admin .fy-menu-kebab { display: none; }

    /* Le logo vit dans la colonne : l'entête ne garde que le titre de page.
       `!important` parce que le gabarit porte ses styles en ligne. */
    .fy-app--admin .fy-brandline a { display: none !important; }
    .fy-app--admin .fy-brandline > div {
        border-left: 0 !important;
        margin-left: 0 !important;
        padding-left: 0 !important;
        font-size: 19px !important;
        color: var(--fy-ink) !important;
    }

    /* Un formulaire ne se lit pas sur 1200 px de large : on le garde à portée
       d'œil, pendant que listes et tableaux prennent toute la place. */
    .fy-app--admin .fy-screen > form { max-width: 880px; }
}

/* ---------- Impression ---------- */
/* On n'imprime que le contenu : ni navigation, ni boutons. La règle vit ici
   plutôt que dans chaque gabarit, sinon une page oubliée sort avec sa barre
   latérale en travers de la feuille (vécu sur le QR d'enrôlement). */
@media print {
    .fy-adminnav,
    .fy-menu-kebab,
    .fy-app--admin > header,
    .fy-fab,
    .fy-fab-btn,
    .fy-fab-scrim,
    .fy-app button { display: none !important; }
    .fy-app--admin { padding-left: 0 !important; }
    .fy-app, .fy-app--desk { max-width: none !important; box-shadow: none !important; }
    .fy-screen { padding: 0 !important; }
}