/* Atelia — coque « app franchisé » : scène + cadre téléphone + dock (portage de l'app iOS) */

.fr-scene { display: grid; grid-template-columns: 268px 1fr; min-height: 100vh; background:
  radial-gradient(900px 500px at 20% -10%, #E9EEF9 0%, transparent 60%),
  radial-gradient(800px 500px at 110% 20%, #F3E9E9 0%, transparent 55%), var(--cream); }

.fr-aside { position: sticky; top: 0; height: 100vh; align-self: start; background: var(--surface); border-right: 1px solid var(--line); padding: 20px 14px; display: flex; flex-direction: column; gap: 4px; }
.fr-aside .persona { margin-top: 6px; }
.fr-aside-note { font-size: 12px; color: var(--muted); background: var(--surface-2); border: 1px solid var(--line-2); border-radius: 10px; padding: 10px 12px; margin: 8px 4px; line-height: 1.5; }

.fr-phone { align-self: center; justify-self: center; width: 412px; max-width: 94vw; height: 860px; max-height: 92vh; margin: 24px; background: #0f1526; border-radius: 46px; padding: 12px; box-shadow: 0 18px 44px rgba(22,36,63,.20), inset 0 0 0 2px #222b42; position: relative; }
.fr-notch { position: absolute; top: 20px; left: 50%; transform: translateX(-50%); width: 128px; height: 26px; background: #0f1526; border-radius: 0 0 16px 16px; z-index: 3; }
.fr-screen-wrap { background: var(--cream); border-radius: 36px; height: 100%; overflow: hidden; display: flex; flex-direction: column; }
.fr-content { flex: 1; overflow-y: auto; padding: 44px 16px 92px; }

/* Dock « liquid glass » */
/* Dock : surface pleine (pas de backdrop-filter → aucun recalcul de flou au défilement). */
.fr-dock { position: absolute; left: 50%; transform: translateX(-50%); bottom: 26px; display: flex; gap: 2px; background: rgba(255,255,255,.96); border: 1px solid var(--line); border-radius: 22px; padding: 6px; box-shadow: 0 4px 16px rgba(22,36,63,.12); z-index: 4; }
.fr-tab { border: 0; background: transparent; color: var(--muted); font-size: 9.5px; font-weight: 700; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 7px 10px; border-radius: 16px; cursor: pointer; }
.fr-tab.on { background: var(--navy); color: #fff; }

/* Contenu mobile */
.fr-h1 { font-size: 27px; font-weight: 800; letter-spacing: -.5px; color: var(--navy); margin: 0 0 2px; }
.fr-hello { font-size: 14px; color: var(--muted); margin-bottom: 16px; }
.fr-card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); padding: 15px 16px; margin-bottom: 12px; }
.fr-card h3 { margin: 0 0 10px; font-size: 15px; font-weight: 800; color: var(--navy); }
.fr-big { font-size: 34px; font-weight: 800; letter-spacing: -.8px; color: var(--navy); }
.fr-kpirow { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.fr-mini { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 12px 13px; }
.fr-mini .l { font-size: 11.5px; color: var(--muted); font-weight: 600; }
.fr-mini .v { font-size: 20px; font-weight: 800; color: var(--navy); }
.fr-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line-2); }
.fr-row:last-child { border-bottom: 0; }
/* Files du poste de commande cliquables : indice de survol (retour Kenzy A01.1). */
.fr-row[data-dossier], .fr-row[data-avis], .fr-row[data-pdv], .fr-row[data-pdvavis], .fr-row[data-notifpdv] { cursor: pointer; border-radius: 8px; transition: background .12s; }
.fr-row[data-dossier]:hover, .fr-row[data-avis]:hover, .fr-row[data-pdv]:hover, .fr-row[data-pdvavis]:hover, .fr-row[data-notifpdv]:hover { background: var(--surface-2); }
.fr-row .fr-ico { width: 34px; height: 34px; border-radius: 10px; background: var(--blue-soft); color: var(--blue); display: grid; place-items: center; flex: none; }
.fr-row .fr-t { flex: 1; }
.fr-row .fr-t b { display: block; font-size: 13.5px; color: var(--navy); }
.fr-row .fr-t span { font-size: 12px; color: var(--muted); }
.fr-badge { font-size: 10.5px; font-weight: 700; padding: 3px 8px; border-radius: 20px; }
.fr-badge.enCours { background: var(--blue-soft); color: var(--blue); }
.fr-badge.recupere { background: var(--vert-bg); color: var(--vert); }
.fr-badge.depose { background: var(--orange-bg); color: var(--orange); }
.fr-badge.refuse { background: var(--chip-2); color: var(--muted-text); }   /* échu = secondaire neutre (retour #2) */
/* Bande d'alertes en tête d'accueil (retour #12) : accent discret, l'urgence est portée par les pastilles internes. */
.fr-root .fr-alerts { border: 1px solid var(--line); }
.fr-root .fr-alerts .fr-lead { color: var(--navy); }
.fr-conseiller { background: linear-gradient(135deg, #16243F, #26375B); color: #fff; border-radius: 16px; padding: 16px; margin-bottom: 12px; }
.fr-conseiller h3 { color: #fff; margin: 0 0 4px; }
.fr-conseiller p { font-size: 12.5px; opacity: .85; margin: 0 0 12px; }
.fr-conseiller .btn { background: rgba(255,255,255,.16); color: #fff; }

@media (max-width: 820px) {
  .fr-scene { grid-template-columns: 1fr; }
  .fr-aside { position: static; height: auto; flex-direction: column; border-right: 0; border-bottom: 1px solid var(--line); }
  .fr-phone { margin: 16px auto; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Coque « app franchisé » — portage FIDÈLE de l'app iOS déployée
   (web/src/apps/franchise/styles.ts, repris de Theme.swift + PaladinBar.swift).
   TOUT est scopé sous .fr-root pour ne jamais toucher le desktop (qui réutilise
   .fr-row/.fr-ico/.fr-t). Ressort iOS : SPRING cubic-bezier(.32,1.06,.42,1).
   ══════════════════════════════════════════════════════════════════════════ */
.fr-root{
  --cream:#EEF1F5; --surface:#FFFFFF; --surface-2:#F5F7FA;
  --navy:#16243F; --navy-2:#26375B; --ink:#16243F; --ink-2:#4B5568; --muted:#666C7E;
  --muted-text:#4B5568;
  /* ACCENT = VERT DE MARQUE (conforme au logo ATELIA, retour Saleh) ; BLEU = liens/info ; --vert = succès. */
  --accent:#0B7A43; --accent-strong:#086437; --accent-soft:#E7F6EE; --brand-green:#2FBE6E;
  --blue:#2456C4; --blue-strong:#1D48A8; --blue-soft:#EAF0FC; --blue-bd:#D6E2FA; --blue-fill:#4C86E8;
  --rouge:#CB2E2E; --rouge-bg:#FBEBEB; --rouge-text:#CB2E2E; --rouge-bd:#F3D2D2;
  --orange:#96650F; --orange-bg:#FCF3E1; --orange-text:#96650F; --orange-bd:#F3E2BC;
  --vert:#187D4F; --vert-bg:#E7F5EE; --vert-text:#187D4F; --vert-bd:#CDEBDB;
  --deliveroo:#00998f; --line:#E3E7EE; --line-2:#EDF0F5; --chip-2:#E9ECF2;
  --r:20px; --r-sm:14px;
  --shadow:0 6px 22px rgba(22,36,63,.06); --shadow-sm:0 2px 8px rgba(22,36,63,.06);
  --font:'Plus Jakarta Sans',ui-sans-serif,system-ui,-apple-system,sans-serif;
  display:flex; width:100%; height:calc(100vh - var(--demobar-h)); min-height:600px; overflow:hidden;
  font-family:var(--font); color:var(--ink); -webkit-font-smoothing:antialiased; background:var(--cream);
}
.fr-root *{ box-sizing:border-box }

/* ── barre latérale (persona switcher) ── */
.fr-root .fr-aside{ position:static; flex:0 0 268px; height:100%; width:auto; background:var(--surface); border-right:1px solid var(--line); border-bottom:none; display:flex; flex-direction:column; padding:22px 18px; gap:6px; z-index:2 }
.fr-root .fr-brand{ display:flex; flex-direction:column; align-items:flex-start; gap:1px; padding:2px 6px 6px }
.fr-root .fr-brand .brand-word{ font-family:'Atelia Wordmark', var(--font); font-size:28px; line-height:1; letter-spacing:-.5px; display:inline-flex }
.fr-root .fr-brand .brand-word .w-ate{ color:var(--navy) }
.fr-root .fr-brand .brand-word .w-lia{ color:var(--brand-green) }
.fr-root .fr-brand .by{ display:block; font-size:11px; font-weight:600; color:var(--muted); margin-top:3px }
.fr-root .fr-switch-l{ font-size:10px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); margin:18px 6px 8px }
/* Bascule d'espace HORIZONTALE (contrôle segmenté) — cohérente avec Console/Réseau (retour Saleh). */
.fr-root .fr-switch{ display:grid; grid-template-columns:repeat(3,1fr); gap:4px; background:var(--surface-2); border:1px solid var(--line); border-radius:11px; padding:4px }
.fr-root .fr-persona{ display:flex; align-items:center; justify-content:center; gap:6px; width:100%; border:none; background:none; cursor:pointer; font-family:var(--font); font-size:12px; font-weight:700; color:var(--ink-2); border-radius:8px; padding:8px 4px; transition:background .16s ease, color .16s ease }
.fr-root .fr-persona:hover{ background:var(--surface) }
.fr-root .fr-persona.on{ background:var(--navy); color:#fff }
.fr-root .fr-persona .pi{ display:none }
.fr-root .fr-aside .foot{ margin-top:16px; padding:14px 8px 2px; border-top:1px solid var(--line); font-size:12.5px; color:var(--muted); line-height:1.45 }
.fr-root .fr-aside .foot b{ color:var(--ink-2); font-weight:700 }

/* ── scène : décor + téléphone centré ── */
.fr-root .fr-stage{ flex:1 1 auto; height:100%; overflow:auto; display:flex; flex-direction:column; align-items:center; justify-content:safe center; gap:16px; padding:26px 18px; background:radial-gradient(130% 90% at 50% -8%, #FFFFFF 0%, var(--cream) 48%, #EEEBE1 100%) }

/* ── cadre du téléphone ── */
.fr-root .fr-phone{ width:416px; height:872px; max-height:100%; margin:0; flex:0 0 auto; border-radius:56px; padding:13px; position:relative; background:linear-gradient(155deg,#23262E,#0B0C0F); box-shadow:0 2px 5px rgba(22,36,63,.10), 0 34px 80px rgba(22,36,63,.32), inset 0 0 0 2.5px rgba(255,255,255,.05), inset 0 0 0 6px #000 }
.fr-root .fr-screen{ position:relative; height:100%; width:100%; border-radius:42px; overflow:clip; background:var(--cream); display:flex; flex-direction:column }
.fr-root .fr-status{ position:relative; z-index:6; height:54px; flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; padding:18px 32px 0; font-weight:700; font-size:15px; color:var(--navy) }
.fr-root .fr-island{ position:absolute; top:12px; left:50%; transform:translateX(-50%); width:122px; height:35px; border-radius:20px; background:#000 }
.fr-root .fr-sig{ display:flex; align-items:center; gap:7px }

/* pile d'écrans en cross-fade */
.fr-root .fr-stack{ position:relative; flex:1 1 auto; min-height:0 }
.fr-root .fr-page{ position:absolute; inset:0; overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; scroll-padding-bottom:150px; padding:2px 18px 150px; opacity:0; pointer-events:none; transition:opacity .28s ease; -webkit-overflow-scrolling:touch }
.fr-root .fr-page.on{ opacity:1; pointer-events:auto }
.fr-root .fr-page::-webkit-scrollbar{ width:0; height:0 }

/* ── typographie ── */
.fr-root .fr-h1{ font-size:33px; font-weight:800; letter-spacing:-.7px; color:var(--navy); margin:16px 0 4px; line-height:1.05 }
/* Le changement d'onglet DÉPLACE le focus sur le titre de la page (lecteur d'écran : on annonce
   où l'on vient d'arriver). Ce titre porte tabindex="-1" : il n'est jamais atteint au clavier,
   seulement par ce déplacement programmé — on n'y peint donc AUCUN anneau, qui apparaissait
   comme un liseré bleu autour du <h1> après un simple clic de souris sur un onglet. */
.fr-root .fr-page h1[tabindex="-1"]:focus,
.fr-root .fr-page h1[tabindex="-1"]:focus-visible{ outline:none; box-shadow:none }
.fr-root .fr-sub{ font-size:14.5px; color:var(--muted); margin:0 0 2px; font-weight:500; line-height:1.35 }
.fr-root .fr-section{ font-size:20px; font-weight:800; letter-spacing:-.4px; color:var(--navy); margin:30px 2px 10px }
/* Layout global épuré (retour Saleh) : greeting discret + en-têtes de section sur le crème + grille métrique compacte 2 col (rythme iOS). */
.fr-root .fr-greet{ margin:14px 0 2px }
.fr-root .fr-greet-h{ font-size:25px; font-weight:800; letter-spacing:-.5px; color:var(--navy); margin:0; line-height:1.1 }
.fr-root .fr-greet-s{ font-size:14px; color:var(--muted); margin:3px 0 0; font-weight:500 }
.fr-root .fr-sechead{ font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin:28px 4px 12px }
.fr-root .fr-metrics{ display:grid; grid-template-columns:1fr 1fr; gap:12px }
/* Grille de QUATRE tuiles appariées : deux rangées pleines (2 × 2), toutes les rangées à la
   même hauteur. Sans cela, la quatrième tuile restait seule sur sa ligne, à côté d'un vide. */
.fr-root .fr-metrics.quatre{ grid-auto-rows:1fr }
.fr-root .fr-tile{ background:var(--surface); border-radius:var(--r-sm); padding:16px; box-shadow:var(--shadow); display:flex; flex-direction:column; min-width:0 }
.fr-root .fr-tile.wide{ grid-column:1 / -1 }
.fr-root .fr-tile .l{ font-size:13px; color:var(--muted); font-weight:600 }
.fr-root .fr-tile .v{ font-size:26px; font-weight:800; letter-spacing:-.6px; color:var(--navy); line-height:1.04; margin-top:3px }
.fr-root .fr-tile .v.big{ font-size:37px; letter-spacing:-1.1px; margin-top:4px }
.fr-root .fr-tile .v.vert{ color:var(--vert) }
.fr-root .fr-tile .s{ font-size:12.5px; color:var(--muted); margin-top:3px }
/* Ligne « ≈ X € / jour · N commandes / jour » : le séparateur de milliers est une espace
   INSÉCABLE (U+00A0) produite par le moteur de format. En gras et à 12,5 px elle se refermait
   au point qu'on lisait « 1187,91 € ». Cette ligne prend donc la taille de ses voisines (13 px),
   et son espace reprend sa largeur naturelle. Le moteur de format n'est pas touché. */
.fr-root .fr-tile .s.vert{ color:var(--vert-text); font-weight:700; font-size:13px; word-spacing:.06em }
/* Bandeau démo obligatoire mais DISCRET (retour Saleh : épuré) : fin, neutre, ne concurrence rien. */
.fr-root .fr-banner{ display:flex; gap:8px; align-items:center; background:var(--surface-2); border:none; border-radius:14px; padding:10px 14px; margin:14px 0 2px; color:var(--muted-text); font-size:12.5px; font-weight:600; line-height:1.3 }
.fr-root .fr-banner svg{ flex:0 0 auto; margin-top:1px }

.fr-root .fr-card{ background:var(--surface); border:none; border-radius:var(--r); padding:20px; margin-top:16px; margin-bottom:0; box-shadow:var(--shadow) }
.fr-root .fr-card.tint-vert{ background:var(--vert-bg); border-color:#CDE9DA }
.fr-root .fr-card.tint-rouge{ background:var(--rouge-bg); border-color:#F3D6D6 }
.fr-root .fr-card.tint-blue{ background:linear-gradient(160deg,#2E6BE6 0%,#2456C4 55%,#1D48A8 100%); border:none; color:#fff; box-shadow:0 6px 18px rgba(36,86,196,.20) }
.fr-root .fr-lead{ display:flex; align-items:center; gap:8px; color:var(--muted); font-size:13.5px; font-weight:600 }
.fr-root .fr-big{ font-size:43px; font-weight:800; letter-spacing:-1.5px; line-height:1.0; color:var(--navy); margin-top:6px }
.fr-root .fr-big.vert{ color:var(--vert) } .fr-root .fr-big.rouge{ color:var(--rouge) }
.fr-root .fr-note{ font-size:14px; color:var(--muted-text); margin-top:8px; line-height:1.36 }
.fr-root .fr-note.vert{ color:var(--vert-text); font-weight:700 }

.fr-root .fr-chips{ display:flex; gap:10px; overflow-x:auto; padding:14px 0 2px; scrollbar-width:none; cursor:grab; user-select:none }
.fr-root .fr-chips::-webkit-scrollbar{ display:none }
.fr-root .fr-chips.dragging{ cursor:grabbing }
.fr-root .fr-chips.dragging .fr-chip{ pointer-events:none }
.fr-root .fr-chip{ flex:0 0 auto; display:flex; align-items:center; gap:7px; border:none; background:var(--surface); color:var(--navy); border-radius:22px; padding:11px 18px; font-size:15px; font-weight:700; cursor:pointer; box-shadow:var(--shadow-sm); transition:transform .12s ease, background .18s ease, color .18s ease }
.fr-root .fr-chip:active{ transform:scale(.96) }
.fr-root .fr-chip.on{ background:var(--accent); color:#fff; box-shadow:none }
.fr-root .fr-chip:focus-visible{ outline:3px solid var(--accent); outline-offset:2px }
/* Puces d'ÉTAT des remboursements : elles passent à la ligne. */
.fr-root #fr-remb-chips{ flex-wrap:wrap; overflow-x:visible }
/* U-01 · Puces de RESTAURANT de l'Accueil : UNE rangée qu'on fait glisser, jamais à la ligne. Elle va
   jusqu'au bord de l'écran (marges négatives = la marge intérieure de la page, 18 px) : la dernière puce
   est coupée au bord, pas dans la marge. Seule la rangée défile ; la marge de défilement garde la
   première puce alignée sur le texte et une puce qui prend le focus entière à l'écran.
   D49 (28/09, Saleh) : de nouveau UNE seule rangée qui défile (la règle « passe à la ligne » du 27/09 est
   retirée) ; c'est la seule rangée de choix de restaurant de l'app. */
.fr-root #fr-acc-chips{ flex-wrap:nowrap; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x proximity; gap:8px; margin:0 -18px; padding:14px 18px 6px; scroll-padding-inline:18px }   /* Saleh 28/09 : une seule rangée qui défile horizontalement (au doigt ou à la souris), plus d'empilement */
.fr-root #fr-acc-chips .fr-chip{ white-space:nowrap; flex:0 0 auto; scroll-snap-align:start }
/* Puces de PÉRIODE : même famille, un cran plus discrètes que les puces de restaurant,
   pour que la hiérarchie « quand » puis « où » se lise d'un coup d'œil. */
.fr-root .fr-chips-per{ padding:12px 0 0 }
.fr-root .fr-chip.sm{ padding:8px 15px; font-size:13.5px; font-weight:700; min-height:40px }   /* UX-restaurant-26 : même hauteur que les puces plateforme */
/* Nom du point de vente porté par une carte de campagne (A02) : jamais une campagne anonyme. */
.fr-root .fr-pdvline{ display:flex; align-items:center; gap:6px; margin-top:5px; font-size:13px; font-weight:700; color:var(--muted-text) }
.fr-root .fr-pdvline svg{ flex:0 0 auto; color:var(--muted) }
.fr-root .fr-dot{ width:9px; height:9px; border-radius:50%; flex:0 0 auto }
.fr-root .fr-dot.on{ background:var(--vert) } .fr-root .fr-dot.off{ background:#C4C8D0 }
.fr-root .fr-live{ animation:frpulse 1s ease-in-out infinite }
@keyframes frpulse{ 0%,100%{ opacity:1 } 50%{ opacity:.4 } }

.fr-root .fr-grid2{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:14px }
.fr-root .fr-recap{ display:grid; grid-template-columns:1fr 1fr; gap:16px 12px; margin-top:0 }
.fr-root .fr-recap > div{ display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center }
.fr-root .fr-recap .fr-kpi{ width:100%; align-items:center; text-align:center; padding:11px 12px }
.fr-root .fr-kpi{ background:var(--surface); border:none; border-radius:var(--r); padding:18px; box-shadow:var(--shadow) }
.fr-root .fr-kpi.tint-rouge{ background:var(--rouge-bg); border-color:#F3D6D6 }
.fr-root .fr-kpi .v{ font-size:26px; font-weight:800; letter-spacing:-.5px; color:var(--navy) }
.fr-root .fr-kpi .v.vert{ color:var(--vert) } .fr-root .fr-kpi .v.rouge{ color:var(--rouge) }
.fr-root .fr-kpi .l{ font-size:14px; color:var(--muted-text); margin-top:3px; font-weight:600 }
.fr-root .fr-kpi .l.warn{ color:var(--orange-text); font-weight:700 } .fr-root .fr-kpi .l.vert{ color:var(--vert-text); font-weight:700 }

.fr-root .fr-mini{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:14px; background:none; border:0; padding:0 }
.fr-root .fr-mini > div{ background:var(--surface); border:none; border-radius:var(--r-sm); padding:16px 15px; box-shadow:var(--shadow) }
.fr-root .fr-mini .v{ font-size:19px; font-weight:800; letter-spacing:-.4px; color:var(--navy) } .fr-root .fr-mini .l{ font-size:12.5px; color:var(--muted-text); margin-top:2px; font-weight:600 }

.fr-root .fr-badge{ display:inline-flex; align-items:center; border-radius:999px; padding:5px 11px; font-size:12.5px; font-weight:800 }
.fr-root .fr-badge.enCours{ background:var(--blue-soft); color:var(--blue) }
.fr-root .fr-badge.depose{ background:var(--orange-bg); color:var(--orange-text) }
.fr-root .fr-badge.recupere{ background:var(--vert-bg); color:var(--vert-text) }
.fr-root .fr-badge.refuse{ background:var(--rouge-bg); color:var(--rouge-text) }
.fr-root .fr-plat{ display:inline-flex; align-items:center; gap:8px; font-size:15px; font-weight:700; color:var(--navy) }

/* En-tête « Note par PDV » + rappel du seuil. Le seuil est écrit EN CLAIR (« sous votre seuil
   d'alerte · 4,3 ★ ») : au doigt, un title ne s'ouvre jamais. La pastille complète ne tient pas
   à côté du titre à 390 px, elle prend donc sa propre ligne, sous un titre qui reste sur une seule. */
.fr-root .fr-seuilhead{ display:flex; flex-direction:column; align-items:flex-start; gap:7px }
.fr-root .fr-seuilhead .t{ font-size:19px; font-weight:800; color:var(--navy) }
/* Le titre lui-même reste sur une ligne ; la PORTÉE (« · tous mes PDV ») est un cran plus
   discrète et peut passer à la ligne suivante à 390 px sans casser le titre. */
.fr-root .fr-seuilhead .t b{ font-weight:800; white-space:nowrap }
.fr-root .fr-seuilhead .t .sc{ font-size:14.5px; font-weight:700; color:var(--muted); white-space:nowrap }
.fr-root .fr-badge.fr-seuilbadge{ background:var(--surface-2); color:var(--muted-text);
  font-size:11px; font-weight:700; padding:4px 10px; white-space:nowrap; max-width:100% }

.fr-root .fr-row{ display:block; padding:18px 0; border-bottom:1px solid var(--line-2) }
.fr-root .fr-row:last-child{ border-bottom:none }
.fr-root .fr-row .top{ display:flex; align-items:center; justify-content:space-between; gap:10px }
.fr-root .fr-row .mont{ font-size:19px; font-weight:800; letter-spacing:-.4px; margin-top:9px; color:var(--navy) }
.fr-root .fr-row .motif{ font-size:15px; color:var(--ink-2); margin-top:2px; font-weight:600 }
.fr-root .fr-row .suivi{ display:flex; gap:7px; align-items:center; font-size:13.5px; color:var(--muted-text); margin-top:9px }

.fr-root .fr-btn{ width:100%; border:none; border-radius:var(--r-sm); padding:16px; cursor:pointer; font-family:var(--font); font-size:16.5px; font-weight:700; color:#fff; background:var(--accent); display:flex; align-items:center; justify-content:center; gap:9px; margin-top:14px; transition:transform .12s ease, background .2s ease }
.fr-root .fr-btn:active{ transform:scale(.98) }
.fr-root .fr-btn.done{ background:var(--vert) }
.fr-root .fr-btn.ghost{ background:var(--surface); color:var(--navy); border:1px solid var(--line) }
.fr-root .fr-callout{ display:flex; gap:11px; align-items:flex-start; background:var(--surface-2); border:none; border-radius:var(--r-sm); padding:15px 16px; margin-top:14px; font-size:14.5px; color:var(--ink-2); line-height:1.42 }
.fr-root .fr-callout.blue{ background:var(--blue-soft); border-color:#CFE4F6; color:#1A5A8C }
.fr-root .fr-callout svg{ flex:0 0 auto; margin-top:1px }

.fr-root .fr-bar-pg{ height:9px; border-radius:6px; background:var(--line); overflow:hidden; margin-top:10px }
.fr-root .fr-bar-pg > i{ display:block; height:100%; background:var(--vert); border-radius:6px }
.fr-root .fr-steps{ display:flex; gap:8px; margin-top:14px }
.fr-root .fr-steps > div{ flex:1; text-align:center; font-size:12px; font-weight:700; color:var(--muted-text) }
.fr-root .fr-steps > div.on{ color:var(--vert-text) }
.fr-root .fr-steps .pip{ height:6px; border-radius:4px; background:var(--line); margin-bottom:6px }
.fr-root .fr-steps > div.on .pip{ background:var(--vert) }
.fr-root .fr-3stat{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:14px; text-align:center }
.fr-root .fr-3stat .v{ font-size:19px; font-weight:800; color:var(--navy) } .fr-root .fr-3stat .l{ font-size:12px; color:var(--muted-text); margin-top:2px }

.fr-root .fr-offer{ display:flex; align-items:center; gap:11px; padding:13px 15px; margin-bottom:10px; background:var(--surface-2); border:1px solid var(--line); border-radius:12px; font-size:16px; font-weight:500; color:var(--navy) }
.fr-root .fr-offer:last-child{ margin-bottom:0 }
.fr-root .fr-plats{ display:inline-flex; gap:6px }
.fr-root .fr-cardtitle{ font-size:19px; font-weight:800; letter-spacing:-.3px; color:var(--navy); margin-bottom:12px }

.fr-root .fr-stars{ letter-spacing:2px; font-size:15px; color:var(--orange) }
.fr-root .fr-noterow{ display:flex; align-items:center; justify-content:space-between; padding:15px 0; border-bottom:1px solid var(--line-2); gap:12px }
.fr-root .fr-noterow:last-child{ border-bottom:none }
.fr-root .fr-noterow .g{ font-size:18px; font-weight:800 } .fr-root .fr-noterow .g.ok{ color:var(--vert-text) } .fr-root .fr-noterow .g.ko{ color:var(--rouge-text) }
/* UX-RESTAURANT-3 (vague C) : ligne de campagne, libellé de mesure au-dessus de sa valeur, à droite ; sous le titre à 520 px et moins */
.fr-root .fr-camprow .fr-camptxt{ flex:1 1 auto; min-width:0 }
.fr-root .fr-camprow .fr-campmes{ flex:0 0 auto; display:flex; flex-direction:column; align-items:flex-end; text-align:right; gap:2px; max-width:45% }
.fr-root .fr-camprow .fr-camplib{ font-size:12px; font-weight:600; color:var(--muted-text) }
.fr-root .fr-camprow .fr-campmes .g{ font-size:15px; white-space:nowrap }
@media (max-width:520px){
  .fr-root .fr-camprow{ flex-direction:column; align-items:stretch; gap:8px }
  .fr-root .fr-camprow .fr-campmes{ align-items:flex-start; text-align:left; max-width:none }
}
/* même empilement dans le téléphone d'index.html (large écran, carte étroite) : la carte est un conteneur de requêtes */
.fr-root .fr-card:has(> .fr-camprow){ container-type:inline-size }
@container (max-width:480px){
  .fr-root .fr-camprow{ flex-direction:column; align-items:stretch; gap:8px }
  .fr-root .fr-camprow .fr-campmes{ align-items:flex-start; text-align:left; max-width:none }
}
.fr-root .fr-freq{ display:inline-flex; align-items:center; background:var(--orange-bg); color:var(--orange-text); border-radius:999px; padding:5px 11px; font-size:13px; font-weight:800; flex:0 0 auto }
.fr-root .fr-avis .q{ font-size:15.5px; color:var(--ink); font-weight:600; line-height:1.4 }
.fr-root .fr-avis .rep{ font-size:14px; color:var(--ink-2); background:var(--surface-2); border:1px solid var(--line); border-radius:12px; padding:12px; margin-top:10px; line-height:1.42 }
.fr-root .fr-pdvtag{ display:inline-flex; align-items:center; gap:6px; color:var(--muted-text); font-size:14px; font-weight:600 }
.fr-root .fr-legend{ display:flex; gap:16px; margin:2px 2px 12px; font-size:13px; color:var(--muted-text); font-weight:600 }
.fr-root .fr-legend span{ display:inline-flex; align-items:center; gap:7px }

/* ── barre flottante Liquid Glass ── */
.fr-root .fr-dock{ position:absolute; left:0; right:0; bottom:0; transform:none; z-index:8; padding:0 16px calc(env(safe-area-inset-bottom,0px) + 12px); display:flex; flex-direction:column; align-items:stretch; gap:12px; background:none; border:0; box-shadow:none; border-radius:0; pointer-events:none }
.fr-root .fr-dock > *{ pointer-events:auto }
/* Barre flottante : crème quasi-opaque, sans flou (fluidité — plus de repaint au scroll). */
.fr-root .glass{ background:rgba(247,245,239,.97); border:1px solid var(--line); box-shadow:0 4px 16px rgba(22,36,63,.12) }
.fr-root .fr-quick{ display:flex; flex-direction:column; align-items:flex-end; gap:10px; transform-origin:bottom right; transition:transform .34s cubic-bezier(.32,1.06,.42,1), opacity .2s ease }
.fr-root .fr-quick.hide{ transform:scale(.6); opacity:0; pointer-events:none; height:0; margin:0 }
.fr-root .fr-qa{ display:flex; align-items:center; gap:10px; border-radius:999px; padding:13px 18px; cursor:pointer; font-size:15px; font-weight:700; color:var(--ink); border:none; font-family:var(--font) }
.fr-root .fr-qa svg{ color:var(--navy) }
.fr-root .fr-pill{ display:flex; align-items:center; gap:11px; border-radius:999px; padding:14px 16px; cursor:pointer; font-size:16px; font-weight:700; color:var(--ink-2); overflow:hidden; transition:max-height .2s cubic-bezier(.32,1.06,.42,1), opacity .18s ease, padding .2s cubic-bezier(.32,1.06,.42,1); max-height:56px }
.fr-root .fr-pill.hide{ max-height:0; opacity:0; padding-top:0; padding-bottom:0; pointer-events:none; border:none }
.fr-root .fr-pill .sh{ width:28px; height:28px; border-radius:9px; background:var(--accent); color:#fff; display:flex; align-items:center; justify-content:center; flex:0 0 auto }
.fr-root .fr-row2{ display:flex; align-items:center; gap:8px }
.fr-root .fr-tabs{ display:flex; align-items:center; border-radius:999px; padding:6px 5px; gap:1px; overflow:hidden; transition:flex-grow .2s cubic-bezier(.32,1.06,.42,1), gap .2s cubic-bezier(.32,1.06,.42,1) }
.fr-root .fr-tabs.expanded{ flex:1 1 auto }
.fr-root .fr-tabs.collapsed{ flex:0 0 auto; gap:0 }
.fr-root .fr-tab{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; border:none; background:none; cursor:pointer; color:var(--ink-2); font-family:var(--font); font-weight:600; height:48px; border-radius:999px; position:relative; overflow:hidden; transition:width .2s cubic-bezier(.32,1.06,.42,1), opacity .12s ease-out, color .2s ease, background .12s ease-out }
.fr-root .fr-tabs.expanded .fr-tab{ flex:1 1 0; width:auto; min-width:0 }
.fr-root .fr-tabs.expanded .fr-tab.on{ background:var(--accent); color:#fff }
.fr-root .fr-tabs.collapsed .fr-tab{ width:0; opacity:0; height:42px; pointer-events:none }
.fr-root .fr-tabs.collapsed .fr-tab.on{ width:42px; opacity:1; pointer-events:auto; color:var(--accent) }
.fr-root .fr-tab .lbl{ font-size:9.5px; font-weight:700; letter-spacing:-.2px; line-height:1; white-space:nowrap; max-width:100%; transition:opacity .12s ease-out, height .2s ease }
.fr-root .fr-tabs.collapsed .fr-tab .lbl{ opacity:0; height:0 }
.fr-root .fr-plus{ width:50px; height:50px; border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; flex:0 0 auto; border:none; padding:0; background:var(--accent); box-shadow:0 6px 20px rgba(11,122,67,.30) }
.fr-root .fr-plus svg{ transition:transform .34s cubic-bezier(.32,1.06,.42,1); color:#fff }
.fr-root .fr-plus.open svg{ transform:rotate(45deg) }

/* ── assistant (plein cadre, monte du bas) ── */
.fr-root .fr-assistant{ position:absolute; inset:0; z-index:20; background:var(--cream); display:flex; flex-direction:column; transform:translateY(100%); opacity:0; transition:transform .36s cubic-bezier(.32,1.06,.42,1), opacity .28s ease }
.fr-root .fr-assistant.show{ transform:translateY(0); opacity:1 }
/* Fermeture de l'assistant (K11) : un VRAI bouton, nommé, d'au moins 44 × 44 px, au focus
   visible. Le mot « Fermer » est lu par les technologies d'assistance et masqué à l'œil :
   la cible tactile, elle, fait bien 44 px de côté. */
.fr-root .fr-assistant .close{ position:absolute; top:52px; right:18px; width:44px; height:44px; min-width:44px; min-height:44px; padding:0; border-radius:50%; background:var(--surface); border:1px solid var(--line); color:var(--navy); display:flex; align-items:center; justify-content:center; cursor:pointer; z-index:3; box-shadow:var(--shadow); font-family:var(--font) }
.fr-root .fr-assistant .close .lbl{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0 }
.fr-root .fr-assistant .close:focus-visible{ outline:3px solid var(--accent); outline-offset:3px }
.fr-root .fr-assistant .close:active{ transform:scale(.94) }

/* Récapitulatif d'une mise en place de campagne (A02). Il s'affiche dans la modale partagée,
   HORS de .fr-root : ses lignes ont donc leur propre classe, sans quoi libellé et valeur se
   retrouvaient collés (« Point de ventele réseau Restaurant 2 »). */
.fr-recap{ margin-top:12px; border-top:1px solid var(--line-2) }
.fr-recap-row{ display:flex; justify-content:space-between; gap:14px; padding:9px 0; border-bottom:1px solid var(--line-2); font-size:14px }
.fr-recap-row:last-child{ border-bottom:none }
.fr-recap-row .k{ color:var(--muted-text); font-weight:600 }
.fr-recap-row .v{ color:var(--navy); font-weight:700; text-align:right }

/* Contexte d'une conversation ouverte depuis un raccourci (A16) : sujet + point de vente + période. */
.fr-root .fr-actx{ display:flex; align-items:flex-start; gap:10px; background:var(--blue-soft); color:var(--navy); border-radius:var(--r); padding:12px 14px; margin:16px 0 0; font-size:13.5px; line-height:1.45 }
.fr-root .fr-actx svg{ flex:0 0 auto; margin-top:1px }
.fr-root .fr-actx b{ font-weight:800 }
.fr-root .fr-abody{ flex:1 1 auto; overflow-y:auto; padding:0 20px 20px }
.fr-root .fr-abody::-webkit-scrollbar{ width:0 }
.fr-root .fr-halo{ width:88px; height:88px; border-radius:50%; background:var(--surface); box-shadow:0 10px 26px rgba(22,36,63,.12); display:flex; align-items:center; justify-content:center; margin:72px auto 0 }
.fr-root .fr-aH1{ font-size:34px; font-weight:800; letter-spacing:-.6px; text-align:center; color:var(--navy); margin:22px 0 8px }
.fr-root .fr-aLead{ text-align:center; color:var(--muted-text); font-size:15.5px; font-weight:500; padding:0 30px }
.fr-root .fr-aIntro{ text-align:center; color:var(--ink-2); font-size:15px; padding:12px 24px 0; line-height:1.46 }
.fr-root .fr-qbtn{ display:flex; align-items:center; gap:12px; width:100%; text-align:left; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:14px 15px; margin-top:10px; cursor:pointer; font-family:var(--font); font-size:15px; font-weight:600; color:var(--navy); box-shadow:var(--shadow); transition:transform .12s ease }
.fr-root .fr-qbtn:active{ transform:scale(.98) }
.fr-root .fr-qbtn .qi{ width:34px; height:34px; border-radius:10px; display:flex; align-items:center; justify-content:center; flex:0 0 auto }
.fr-root .fr-inputbar{ flex:0 0 auto; padding:12px 18px calc(env(safe-area-inset-bottom,0px) + 16px); background:var(--cream) }
.fr-root .fr-input{ display:flex; align-items:center; gap:10px; background:var(--surface); border:1px solid var(--line); border-radius:26px; padding:6px 6px 6px 18px; box-shadow:var(--shadow) }
.fr-root .fr-input span{ flex:1; color:var(--muted); font-size:15px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.fr-root .fr-input .send{ width:44px; height:44px; border-radius:50%; background:var(--accent); color:#fff; display:flex; align-items:center; justify-content:center; flex:0 0 auto }

/* détail d'un dossier (plein cadre, monte du bas) */
.fr-root .fr-detail{ position:absolute; inset:0; z-index:18; background:var(--cream); display:flex; flex-direction:column; transform:translateY(100%); opacity:0; transition:transform .36s cubic-bezier(.32,1.06,.42,1), opacity .28s ease }
.fr-root .fr-detail.show{ transform:translateY(0); opacity:1 }
.fr-root .fr-detail .dhead{ flex:0 0 auto; display:flex; align-items:center; gap:12px; padding:56px 20px 10px }
.fr-root .fr-detail .back{ width:40px; height:40px; border-radius:50%; background:var(--surface); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; cursor:pointer; flex:0 0 auto; box-shadow:var(--shadow) }
.fr-root .fr-detail .dhead b{ font-size:20px; font-weight:800; letter-spacing:-.3px; color:var(--navy) }
.fr-root .fr-detail .dbody{ flex:1 1 auto; overflow-y:auto; padding:6px 18px 24px }
.fr-root .fr-detail .dbody::-webkit-scrollbar{ width:0 }
.fr-root .fr-drow{ display:flex; justify-content:space-between; gap:14px; padding:12px 0; border-bottom:1px solid var(--line-2); font-size:15px }
.fr-root .fr-drow:last-child{ border-bottom:none }
.fr-root .fr-drow .k{ color:var(--muted-text); font-weight:600 } .fr-root .fr-drow .v{ color:var(--navy); font-weight:700; text-align:right }

/* « Atelia réfléchit » + spinner + révélation */
.fr-root .fr-think{ display:flex; align-items:center; gap:13px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:16px 18px; margin-top:14px; box-shadow:var(--shadow) }
.fr-root .fr-spin{ width:24px; height:24px; border-radius:50%; border:3px solid var(--line); border-top-color:var(--navy); animation:frspin .8s linear infinite; flex:0 0 auto }
@keyframes frspin{ to{ transform:rotate(360deg) } }
.fr-root .fr-think .t b{ font-size:15px; font-weight:800; color:var(--navy) } .fr-root .fr-think .t div{ font-size:13.5px; color:var(--muted-text); margin-top:2px }
.fr-root .fr-reveal{ animation:frreveal .4s ease both }
@keyframes frreveal{ from{ opacity:0; transform:translateY(8px) } to{ opacity:1; transform:translateY(0) } }

/* accordéon */
.fr-root .fr-acc-head{ display:flex; align-items:center; justify-content:space-between; width:100%; background:none; border:none; cursor:pointer; font-family:var(--font); padding:0; color:var(--navy) }
.fr-root .fr-acc-head .chev{ transition:transform .28s cubic-bezier(.32,1.06,.42,1) } .fr-root .fr-acc-head.open .chev{ transform:rotate(90deg) }
.fr-root .fr-acc-body{ overflow:hidden; transition:max-height .34s cubic-bezier(.32,1.06,.42,1), opacity .24s ease; max-height:0; opacity:0 }
.fr-root .fr-acc-body.open{ max-height:520px; opacity:1 }

/* chat du copilote */
.fr-root .fr-chat{ display:flex; flex-direction:column; gap:12px; margin-top:6px }
.fr-root .fr-msg{ max-width:82%; padding:12px 15px; border-radius:18px; font-size:15px; line-height:1.44; animation:frreveal .32s ease both }
.fr-root .fr-msg.user{ align-self:flex-end; background:var(--accent); color:#fff; border-bottom-right-radius:6px }
.fr-root .fr-msg.ai{ align-self:flex-start; background:var(--surface); border:1px solid var(--line); color:var(--ink); border-bottom-left-radius:6px; box-shadow:var(--shadow) }
.fr-root .fr-msg.ai .who{ display:flex; align-items:center; gap:7px; font-size:12px; font-weight:800; color:var(--navy); margin-bottom:5px }
.fr-root .fr-typing{ align-self:flex-start; display:flex; gap:5px; background:var(--surface); border:1px solid var(--line); border-radius:18px; border-bottom-left-radius:6px; padding:14px 16px; box-shadow:var(--shadow) }
.fr-root .fr-typing i{ width:7px; height:7px; border-radius:50%; background:var(--muted); animation:frbounce 1.2s ease-in-out infinite }
.fr-root .fr-typing i:nth-child(2){ animation-delay:.18s } .fr-root .fr-typing i:nth-child(3){ animation-delay:.36s }
@keyframes frbounce{ 0%,60%,100%{ transform:translateY(0); opacity:.5 } 30%{ transform:translateY(-5px); opacity:1 } }
.fr-root .fr-follow{ display:flex; flex-direction:column; gap:8px; margin-top:2px; animation:frreveal .32s ease both }
.fr-root .fr-follow .fl{ align-self:flex-start; max-width:88%; text-align:left; background:var(--blue-soft); color:var(--blue-strong); border:1px solid var(--blue-bd); border-radius:16px; padding:10px 14px; font-size:14px; font-weight:600; cursor:pointer; font-family:var(--font) }
.fr-root .fr-follow .fl:active{ transform:scale(.98) }

@media (prefers-reduced-motion: reduce){
  .fr-root .fr-page, .fr-root .fr-assistant, .fr-root .fr-detail, .fr-root .fr-quick, .fr-root .fr-pill,
  .fr-root .fr-tabs, .fr-root .fr-tab, .fr-root .fr-plus svg, .fr-root .fr-acc-body, .fr-root .fr-acc-head .chev{ transition:none }
  .fr-root .fr-reveal, .fr-root .fr-msg, .fr-root .fr-follow, .fr-root .fr-live, .fr-root .fr-spin{ animation:none }
}

@media (max-width:900px){ .fr-root .fr-aside{ flex-basis:220px } }
@media (max-width:820px){
  .fr-root{ flex-direction:column; height:auto; min-height:0 }
  .fr-root .fr-aside{ flex:0 0 auto; width:100%; height:auto; flex-direction:row; align-items:center; border-right:none; border-bottom:1px solid var(--line); padding:12px 16px; gap:14px; overflow-x:auto }
  .fr-root .fr-switch-l, .fr-root .fr-aside .foot{ display:none }
  .fr-root .fr-brand{ padding:0 } .fr-root .fr-brand .by{ display:none }
  .fr-root .fr-switch{ flex-direction:row; gap:6px }
  .fr-root .fr-persona{ padding:9px 14px; white-space:nowrap }
  .fr-root .fr-persona .pi{ display:none }
  .fr-root .fr-stage{ padding:0 }
  .fr-root .fr-phone{ width:100%; max-width:412px; height:auto; min-height:640px; flex:1 1 auto; border-radius:0; padding:0; background:none; box-shadow:none }
  .fr-root .fr-screen{ border-radius:0 }
  /* UX-restaurant-37 : pas de fausse barre d'état en petit écran (même règle que mobile.css) */
  .fr-root .fr-status, .fr-root .fr-island{ display:none }
  .fr-root .fr-page{ padding-top:12px }
}

/* ══════════════════════════════════════════════════════════════════════════
   « Demander à Atelia » : le bouton nommé, sa feuille, et la trace d'une demande
   ──────────────────────────────────────────────────────────────────────────
   L'audit du 20/09 a relevé trois choses sur la barre du bas : le « + » ne disait
   pas ce qu'il ouvrait, la barre laissait voir le contenu défiler dessous, et un
   bouton « Demander… » cliqué reprenait son libellé d'origine — rien ne prouvait
   que la demande était partie. Les trois se règlent ici.
   ══════════════════════════════════════════════════════════════════════════ */

/* La barre d'onglets était transparente : les chiffres d'une carte passaient
   derrière les libellés et devenaient illisibles. Elle porte donc son propre
   fond plein (pas un rgba), sa bordure et son ombre. */
.fr-root .fr-tabs{
  background:var(--surface);
  border:1px solid var(--line);
  box-shadow:0 4px 16px rgba(22,36,63,.12);
}

/* Le bouton qui remplace le « + » : il porte son intention en toutes lettres et
   occupe toute la largeur, au-dessus de la barre. Hauteur 52 px — la cible
   tactile de référence est 44 px, et ce bouton est le point d'entrée de toutes
   les prestations. */
.fr-root .fr-ask{
  display:flex; align-items:center; justify-content:center; gap:9px;
  width:100%; min-height:52px; padding:14px 18px;
  border:none; border-radius:999px;
  background:var(--accent); color:#fff;
  font-family:var(--font); font-size:16px; font-weight:700; letter-spacing:-.2px;
  cursor:pointer;
  box-shadow:0 6px 20px rgba(11,122,67,.30);
  transition:transform .12s ease, background .2s ease;
}
.fr-root .fr-ask:active{ transform:scale(.98) }
.fr-root .fr-ask:focus-visible{ outline:3px solid var(--navy); outline-offset:3px }
.fr-root .fr-ask svg{ color:#fff; flex:0 0 auto }
/* Le chevron dit si la feuille est ouverte ou fermée, sans texte supplémentaire. */
.fr-root .fr-ask .chev{ font-size:13px; line-height:1; transition:transform .3s cubic-bezier(.32,1.06,.42,1) }
.fr-root .fr-ask.open .chev{ transform:rotate(180deg) }

/* La feuille des cinq prestations. Elle monte depuis le bouton et reste dans le
   cadre du téléphone : au-delà de huit lignes, elle défile au lieu de déborder
   sous la barre d'onglets. */
.fr-root .fr-sheet{
  display:flex; flex-direction:column;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:20px;
  box-shadow:var(--shadow-2);
  overflow-y:auto; overscroll-behavior:contain;
  max-height:min(62vh, 470px);
  transform-origin:bottom center;
  transition:transform .3s cubic-bezier(.32,1.06,.42,1), opacity .2s ease;
}
.fr-root .fr-sheet.hide{
  transform:scale(.92) translateY(10px); opacity:0;
  pointer-events:none; max-height:0; border-width:0; margin:0;
}
/* Le titre de la feuille pose la question à laquelle les lignes répondent. */
.fr-root .fr-sheet-h{
  position:sticky; top:0; z-index:1;
  padding:15px 18px 11px;
  background:var(--surface);
  border-bottom:1px solid var(--line-2);
  font-size:13px; font-weight:800; color:var(--navy); letter-spacing:-.2px;
}

/* Une ligne = une prestation : pictogramme, libellé, délai annoncé, chevron.
   48 px de haut au minimum, marges comprises. */
.fr-root .fr-sheetrow{
  display:flex; align-items:center; gap:12px;
  width:100%; min-height:56px; padding:11px 16px;
  border:none; border-bottom:1px solid var(--line-2);
  background:var(--surface); color:var(--navy);
  font-family:var(--font); text-align:left; cursor:pointer;
  transition:background .12s ease-out;
}
.fr-root .fr-sheetrow:last-child{ border-bottom:none }
.fr-root .fr-sheetrow:active{ background:var(--surface-2) }
.fr-root .fr-sheetrow:focus-visible{ outline:3px solid var(--accent); outline-offset:-3px }
.fr-root .fr-sheetrow .fr-ico{
  width:36px; height:36px; border-radius:11px; flex:0 0 auto;
  display:grid; place-items:center;
}
.fr-root .fr-sheetrow .fr-t{ flex:1 1 auto; min-width:0 }
.fr-root .fr-sheetrow .fr-t b{
  display:block; font-size:14.5px; font-weight:700; color:var(--navy);
  line-height:1.25; letter-spacing:-.2px;
}
/* Le délai est écrit sous le libellé : le gérant sait quand il aura sa réponse
   AVANT de demander, pas après. */
.fr-root .fr-sheetrow .fr-t span{
  display:block; margin-top:2px;
  font-size:12px; font-weight:600; color:var(--muted); line-height:1.3;
}
.fr-root .fr-sheetrow > svg:last-child{ color:var(--muted); flex:0 0 auto }

/* La trace qu'une demande a bien été envoyée. Elle remplace le bouton cliqué et
   ne redevient jamais « Demander » : c'est elle qui porte l'état et sa date. */
.fr-root .fr-etatdem{
  display:flex; align-items:center; gap:8px;
  margin-top:14px; padding:13px 16px;
  border:1px solid var(--vert-bd); border-radius:var(--r-sm);
  background:var(--vert-bg); color:var(--vert);
  font-size:14.5px; font-weight:700; letter-spacing:-.2px;
}
.fr-root .fr-etatdem svg{ color:var(--vert); flex:0 0 auto }
/* Dans une ligne de liste, la trace se fait discrète : elle informe, elle
   n'attire pas l'œil plus que le dossier qu'elle concerne. */
.fr-root .fr-row .fr-etatdem,
.fr-root .fr-avis .fr-etatdem{ margin-top:10px; padding:9px 12px; font-size:13px }

/* Surface mobile réelle : la feuille prend la largeur de l'écran et garde de la
   place sous elle pour le bouton et la barre d'onglets. */
@media (max-width: 760px){
  .fr-root .fr-sheet{ max-height:min(56vh, 430px) }
}

/* ============================================================================
   Cartes d'acte de l'Accueil (« Ce que je touche », « Repris par Uber »,
   « Visites sans commande », « Ma carte », « Note »).
   Ces boutons n'avaient AUCUNE règle : ils héritaient du <button> du navigateur,
   donc texte centré, libellé collé à sa valeur et chevron posé au milieu de la
   ligne (constat des juges, 20/09). Une ligne, trois blocs : l'icône, le couple
   libellé + valeur, puis le chevron tout à droite.
   ========================================================================== */
.fr-root .fr-acte{
  display:flex; align-items:center; gap:10px;
  width:100%; text-align:left;
  padding:10px 12px;
  margin:0; border:0; border-radius:12px;
  background:transparent; color:inherit; font:inherit;
  cursor:pointer; -webkit-appearance:none; appearance:none;
  transition:background .12s;
}
.fr-root .fr-acte + .fr-acte{ border-top:1px solid var(--line-2) }
.fr-root .fr-acte:hover{ background:var(--surface-2) }
.fr-root .fr-acte:focus-visible{ outline:2px solid var(--blue); outline-offset:2px }
.fr-root .fr-acte .fr-ico{
  width:34px; height:34px; border-radius:10px;
  display:grid; place-items:center; flex:0 0 auto;
}
/* Le libellé et la valeur sont deux blocs empilés : sans display:block ils se
   suivaient sur la même ligne, sans la moindre séparation. */
.fr-root .fr-acte .fr-t{
  flex:1 1 auto; min-width:0;
  display:flex; flex-direction:column; gap:2px; text-align:left;
}
.fr-root .fr-acte .fr-t b{
  display:block; font-size:14.5px; font-weight:700;
  color:var(--navy); letter-spacing:-.2px; line-height:1.25;
}
.fr-root .fr-acte .fr-t .fr-v,
.fr-root .fr-acte .fr-t > span{
  display:block; font-size:12.5px; line-height:1.35; color:var(--muted);
}
/* Le chevron ne flotte plus : il est le dernier bloc de la ligne, collé à droite. */
.fr-root .fr-acte .fr-chev{
  flex:0 0 auto; display:flex; align-items:center;
  color:var(--muted-text); margin-left:2px;
}
/* « Mes demandes en cours » vit SEUL, hors carte : il porte donc sa propre carte. */
.fr-root .fr-acte.solo{
  background:var(--surface); border:1px solid var(--line);
  border-radius:16px; box-shadow:var(--shadow);
  padding:13px 14px; margin-bottom:12px;
}
.fr-root .fr-acte.solo + .fr-acte{ border-top:0 }

/* ============================================================================
   M-101 · 01, partie 8 : quatre onglets + bouton rond Atelia, Accueil à lire,
   Bénéfice en cascade, Réputation sans réponse à écrire, Marketing en deux
   sous-onglets, remboursements en sous-page. Couleurs : UNIQUEMENT les variables
   et valeurs déjà présentes (01 : « on n'y touche pas, pas même en intensité »).
   ========================================================================== */
/* Barre du bas : les quatre onglets écrits en entier, et le bouton rond à part. */
.fr-root .fr-dockrow{ display:flex; align-items:center; gap:10px }
.fr-root .fr-dockrow .fr-tabs{ flex:1 1 auto; min-width:0 }
.fr-root .fr-dockrow .fr-tab{ flex:1 1 0; min-width:0; padding:0 2px; overflow:visible }
.fr-root .fr-dockrow .fr-tab.on{ background:var(--accent); color:#fff }
.fr-root .fr-dockrow .fr-tab .lbl{ font-size:11px; letter-spacing:-.15px }
.fr-root .fr-atelia{
  flex:0 0 auto; width:60px; height:60px; border-radius:50%;
  border:none; padding:0; cursor:pointer;
  background:var(--accent); color:#fff;
  font-family:var(--font); font-size:12.5px; font-weight:800; letter-spacing:-.2px;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 20px rgba(11,122,67,.30);
  transition:transform .12s ease, background .2s ease;
}
.fr-root .fr-atelia.open{ background:var(--accent-strong) }
.fr-root .fr-atelia:active{ transform:scale(.96) }
.fr-root .fr-atelia:focus-visible{ outline:3px solid var(--navy); outline-offset:3px }
/* Aperçu en lecture (fiche du franchiseur) : le bouton reste visible mais ne s'ouvre pas. */
.fr-root .fr-atelia:disabled{ cursor:not-allowed; opacity:1; background:var(--line); color:var(--muted-text); box-shadow:none }   /* UX-restaurant-36 : inactif en aperçu, et ça se voit ; UX-MATRICE-RESTAURANT-1 : opaque, rien ne se lit à travers */
.fr-root .fr-atelia:disabled:active{ transform:none }
/* La pastille de Marketing : le nombre de propositions en attente. */
.fr-root .fr-pastille{
  position:absolute; top:2px; left:calc(50% + 6px);
  min-width:17px; height:17px; padding:0 5px; border-radius:9px;
  background:var(--rouge); color:#fff;
  font-size:10.5px; font-weight:800; line-height:17px; text-align:center;
}
/* Les deux choix du bouton rond. */
.fr-root .fr-panel-h{ display:flex; align-items:center; justify-content:space-between; gap:10px }
.fr-root .fr-choix{ display:flex; flex-direction:column; gap:8px; padding:14px 16px; border-bottom:1px solid var(--line-2) }
.fr-root .fr-choix:last-child{ border-bottom:none }
.fr-root .fr-choix-t{ display:flex; align-items:center; gap:10px; font-size:15.5px; font-weight:800; color:var(--navy) }
.fr-root .fr-choix-t .fr-ico{ width:36px; height:36px; border-radius:11px; display:grid; place-items:center; flex:0 0 auto }
.fr-root .fr-choix-l{ display:flex; align-items:center; gap:10px; flex-wrap:wrap }
.fr-root .fr-tel{ font-size:21px; font-weight:800; letter-spacing:.3px; color:var(--accent); text-decoration:none; display:inline-flex; align-items:center; min-height:44px }   /* UX-RESTAURANT-16 : cible tactile de 44 px */
.fr-root .fr-mail{ font-size:14px; font-weight:600; color:var(--blue); text-decoration:none; display:inline-flex; align-items:center; min-height:44px }
.fr-root .fr-choix .h{ font-size:13px; line-height:1.4; color:var(--muted-text) }
.fr-root .fr-wa{ display:flex; align-items:center; justify-content:center; min-height:46px; padding:10px 14px; border-radius:999px; background:var(--accent); color:#fff; font-size:15px; font-weight:700; text-decoration:none; text-align:center }
.fr-root .fr-mini{ display:inline-flex; align-items:center; justify-content:center; gap:4px; min-height:32px; padding:5px 12px; border:1px solid var(--line); border-radius:999px; background:var(--surface-2); color:var(--navy); font-family:var(--font); font-size:13px; font-weight:700; cursor:pointer }
/* Accueil : la date de mise à jour, le bénéfice en chiffre phare, le chiffre d'affaires plus petit. */
.fr-root .fr-maj{ display:flex; align-items:center; gap:6px; margin:8px 2px 2px; font-size:12.5px; font-weight:600; line-height:1.35; color:var(--muted-text) }
.fr-root .fr-maj svg{ flex:0 0 auto }
.fr-root .fr-phare{ padding:18px }
.fr-root .fr-phare .l{ font-size:13px; font-weight:700; color:var(--muted-text) }
.fr-root .fr-phare .v{ margin-top:6px; font-size:40px; font-weight:800; letter-spacing:-1.2px; line-height:1.08; color:var(--navy) }
.fr-root .fr-phare .fr-ca{ margin-top:6px; font-size:15px; font-weight:600; color:var(--ink-2) }
.fr-root .fr-approx, .fr-root .fr-tag{ display:inline-block; border-radius:999px; background:var(--orange-bg); color:var(--orange-text); font-weight:700 }
.fr-root .fr-approx{ margin-top:8px; padding:3px 10px; font-size:12px }
.fr-root .fr-tag{ margin-left:6px; padding:1px 8px; font-size:11px; vertical-align:middle }
.fr-root button.fr-tile{ width:100%; border:none; text-align:left; font-family:var(--font); color:inherit; cursor:pointer; -webkit-appearance:none; appearance:none }
.fr-root button.fr-tile:focus-visible{ outline:2px solid var(--blue); outline-offset:2px }
.fr-root .fr-rembcarte{ margin-top:12px }
/* Alerte critique : la seule notification urgente. */
.fr-root .fr-critique{ display:flex; gap:12px; align-items:flex-start; background:var(--rouge-bg); border:1px solid var(--rouge-bd) }
.fr-root .fr-critique > svg{ color:var(--rouge); flex:0 0 auto; margin-top:2px }
.fr-root .fr-critique b{ display:block; font-size:15px; color:var(--rouge-text) }
.fr-root .fr-critique span{ display:block; margin-top:3px; font-size:14px; line-height:1.45; color:var(--ink-2) }
/* Sous-pages de l'Accueil : le retour. */
.fr-root .fr-retour{ display:inline-flex; align-items:center; gap:2px; margin:0 0 2px -4px; padding:8px 4px; border:none; background:none; cursor:pointer; font-family:var(--font); font-size:15px; font-weight:700; color:var(--accent) }
/* Remboursements : quatre états (gris, bleu clair, vert, rouge pâle). */
.fr-root .fr-badge.etat-attente{ background:var(--chip-2); color:var(--muted-text) }
.fr-root .fr-badge.etat-envoyee{ background:var(--blue-soft); color:var(--blue) }
.fr-root .fr-badge.etat-acceptee{ background:var(--vert-bg); color:var(--vert-text) }
.fr-root .fr-badge.etat-refusee{ background:var(--rouge-bg); color:var(--muted-text) }
.fr-root .fr-order{ font-size:15px; font-weight:800; color:var(--navy) }
.fr-root .fr-produits{ margin-top:6px; font-size:14px; line-height:1.4; color:var(--ink-2) }
.fr-root .fr-rembbas{ display:flex; justify-content:space-between; align-items:flex-end; gap:12px; margin-top:6px; font-size:12.5px; line-height:1.35; color:var(--muted-text) }
.fr-root .fr-rembbas b{ font-size:15px; color:var(--navy); white-space:nowrap }
/* Bénéfice : la cascade, ligne par ligne. */
.fr-root .fr-casc{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; padding:11px 0; border-bottom:1px solid var(--line-2) }
.fr-root .fr-casc .k{ min-width:0 }
.fr-root .fr-casc .k b{ display:block; font-size:15px; font-weight:700; color:var(--navy) }
.fr-root .fr-casc .k > span{ display:block; margin-top:3px; font-size:12.5px; line-height:1.35; color:var(--muted-text) }
.fr-root .fr-casc .v{ font-size:15px; font-weight:800; color:var(--navy); white-space:nowrap }
.fr-root .fr-casc.moins .v{ color:var(--rouge-text) }
.fr-root .fr-casc.total{ border-bottom:none; border-top:2px solid var(--line); margin-top:2px }
.fr-root .fr-casc.total .v{ font-size:18px; color:var(--vert-text) }
/* Réputation : les réponses publiées, le score de réussite. */
.fr-root .fr-reponse{ margin-top:10px; padding:11px 13px; border-radius:12px; background:var(--surface-2); font-size:14px; line-height:1.45; color:var(--ink-2) }
.fr-root .fr-reponse b{ display:block; margin-bottom:4px; font-size:13px; color:var(--navy) }
.fr-root .fr-reponse.attente{ font-weight:600; color:var(--muted-text) }
.fr-root .fr-paliers{ display:grid; grid-template-columns:repeat(5, 1fr); gap:4px; margin-top:8px }
.fr-root .fr-paliers span{ padding:7px 2px; border-radius:8px; background:var(--surface-2); color:var(--muted-text); font-size:11px; font-weight:700; text-align:center; line-height:1.2 }
.fr-root .fr-paliers span.on{ background:var(--accent); color:#fff }
/* Marketing : deux sous-onglets, la conversion, une proposition = date limite + trois réponses. */
.fr-root .fr-seg{ display:flex; gap:4px; margin:12px 0 4px; padding:4px; border:1px solid var(--line); border-radius:12px; background:var(--surface-2) }
.fr-root .fr-seg button{ flex:1 1 0; min-height:44px; padding:8px 6px; border:none; border-radius:9px; background:none; cursor:pointer; font-family:var(--font); font-size:14px; font-weight:700; color:var(--ink-2) }
.fr-root .fr-seg button.on{ background:var(--navy); color:#fff }
.fr-root .fr-conv .v{ font-size:22px; font-weight:800; letter-spacing:-.4px; color:var(--navy) }
.fr-root .fr-prop .top b{ font-size:16px; color:var(--navy) }
.fr-root .fr-pourquoi{ margin-top:8px; font-size:14px; line-height:1.45; color:var(--ink-2) }
.fr-root .fr-limite{ display:flex; align-items:flex-start; gap:7px; margin-top:12px; font-size:13px; font-weight:700; line-height:1.35; color:var(--orange-text) }
.fr-root .fr-limite svg{ flex:0 0 auto; margin-top:1px }
.fr-root .fr-rep3{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; margin-top:12px }
.fr-root .fr-rep3 .fr-btn{ margin-top:0; padding:13px 6px; font-size:15.5px }
.fr-root .fr-etatdem.refus{ border-color:var(--line); background:var(--surface-2); color:var(--muted-text) }
.fr-root .fr-etatdem.refus svg{ color:var(--muted-text) }
.fr-root .fr-panel-h small{ display:block; margin-top:2px; font-size:12px; font-weight:600; color:var(--muted-text); letter-spacing:0 }
.fr-root .fr-convl .fr-drow .v{ font-size:17px; font-weight:800; color:var(--navy) }
/* Les quatre périodes (ce mois, 7, 30, 90 jours) tiennent sur une ligne à toutes les largeurs :
   quatre colonnes égales, aucune puce coupée au bord de l'écran. */
.fr-root .fr-chips.fr-chips-per{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:8px; overflow:visible }
.fr-root .fr-chips.fr-chips-per .fr-chip{ justify-content:center; padding-left:4px; padding-right:4px; min-width:0; white-space:nowrap }

/* D-S12, U-02, U-06 · la rangée de tuiles sous la carte Bénéfice (Accueil) et les cartes du chiffre d'affaires et
   des commandes (onglet Bénéfice) gardent l'écart standard du mobile, 16 px, celui des .fr-card, entre elles aussi. */
.fr-root .fr-phare + .fr-metrics { margin-top: 16px; gap: 16px; }
/* U-14 · une puce par variable sous une proposition, et dans sa fenêtre de confirmation Oui / Non (hors de .fr-root) :
   le style .puces-dates existant, à la taille du texte de l'app. */
.puces-dates.fr-puces{ gap:6px; margin-top:10px }
.puces-dates.fr-puces .puce-date{ padding:4px 10px; font-size:13px; max-width:100% }

/* W-07 · alerte critique de l'Accueil : un vrai bouton, une ligne ; le détail et l'avis dans une couche qui défile. */
.fr-root button.fr-critique-btn{ width:100%; align-items:center; text-align:left; font-family:var(--font); cursor:pointer; -webkit-appearance:none; appearance:none }
.fr-root button.fr-critique-btn > b{ flex:1 1 auto; margin:0 }
.fr-root button.fr-critique-btn .fr-chev{ display:flex; margin-left:auto; color:var(--rouge-text) }
.fr-root button.fr-critique-btn:focus-visible{ outline:3px solid var(--rouge); outline-offset:2px }
.fr-alerte-avis{ max-height:45vh; overflow-y:auto; padding:12px 14px; border-radius:12px; background:var(--surface-2); border:1px solid var(--line) }
.fr-alerte-avis .top{ display:flex; justify-content:space-between; gap:10px; font-size:13px; font-weight:700; color:var(--muted-text) }
.fr-alerte-avis .q{ margin-top:8px; font-size:15px; line-height:1.45; color:var(--ink) }
/* W-11 · « En attente de réponse » : le texte des avis en italique, plus en gras. */
.fr-root [data-bloc="avis-attente"] .fr-avis .q{ font-style:italic; font-weight:400 }

/* ── Corrections de l'audit du 27/09 (écrivain E-restaurant) : jetons et classes existants seulement ── */
/* UX-restaurant-03 : la pile des messages vit dans le dock, au-dessus de la rangée d'onglets */
.fr-root .fr-toasts{ position:static; transform:none; left:auto; bottom:auto; width:auto; align-items:center }
.fr-root .fr-toasts:empty{ display:none }
/* UX-restaurant-10 : réponse publiée repliée (details natif) */
.fr-root details.fr-reponse > summary{ list-style:none; cursor:pointer }
.fr-root details.fr-reponse > summary::-webkit-details-marker{ display:none }
.fr-root details.fr-reponse > summary > span{ color:var(--accent); font-size:13px; font-weight:700 }
.fr-root details.fr-reponse[open] > summary > span{ display:none }
/* UX-restaurant-26 : zones tactiles d'au moins 40 px */
.fr-root .fr-retour{ min-height:40px }
.fr-root .fr-mini{ min-height:40px; min-width:40px }
/* UX-restaurant-36 : en aperçu, la fin de page reste au-dessus du bandeau (repli si body.apercu-bas n'est pas posé) */
@media (max-width:900px){ .fr-root.apercu .fr-page{ padding-bottom:210px } }
/* UX-restaurant-28 : carte Remboursements des pages plateformes (.fr-tpf, jamais la carte v25c) : même retrait que
   les tuiles (16 px, bord compris) et chevron hors du flux, pour que ses colonnes tombent sous celles des tuiles. */
.fr-root .fr-acte.solo.fr-rembcarte:has(> .fr-tpf){ position:relative; padding:15px }
.fr-root .fr-acte.solo.fr-rembcarte:has(> .fr-tpf) > .fr-chev{ position:absolute; top:15px; right:15px; margin:0 }
/* PM-17 / R-93 (ré-audit) : la légende « — » posée dans une carte-bouton (.fr-acte, js/app.js App.legendeNA) passe
   SOUS les blocs, pleine largeur, comme dans les cartes Bénéfice et CA ; elle ne fait plus colonne à côté des chiffres. */
.fr-root .fr-acte:has(> .na-legende){ flex-wrap:wrap }
.fr-root .fr-acte > .na-legende{ flex:1 0 100%; margin:-8px 0 0 }   /* 6 px sous le dernier bloc + 10 px d'écart de ligne − 8 = 8 px, comme dans les tuiles */
/* E2E-C02 (ré-audit) : dossier sans articles relevés : « article non relevé », en gris (jamais un produit deviné) */
.fr-root .fr-produits.non-releve{ color:var(--muted); font-style:italic }
/* ESSAI Saleh (28/09, 15 h 20) : une ligne de 3 puces à menu déroulant (période, restaurant, plateformes par logos). */
.fr-root .fr-fbar{ display:flex; gap:8px; align-items:flex-end; margin:14px 0 16px; flex-wrap:nowrap; position:relative; z-index:20 }
.fr-root .fr-dd{ position:relative; min-width:0; flex:0 1 auto }
.fr-root .fr-dd[data-dd="pdv"]{ flex:1 1 auto }
.fr-root .fr-ddb{ display:flex; align-items:center; gap:6px; width:100%; min-height:44px; border:none; background:var(--surface); color:var(--navy); border-radius:22px; padding:9px 14px; font:inherit; font-size:15px; font-weight:700; cursor:pointer; box-shadow:var(--shadow-sm) }
.fr-root .fr-dd.open .fr-ddb{ background:var(--accent); color:#fff; box-shadow:none }
.fr-root .fr-ddb:focus-visible{ outline:3px solid var(--accent); outline-offset:2px }
.fr-root .fr-ddt{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.fr-root .fr-ddc{ flex:0 0 auto; font-size:12px; opacity:.7 }
.fr-root .fr-ddlogos{ display:flex; gap:4px; align-items:center }
.fr-root .fr-logo{ display:block; width:auto; border-radius:6px }
.fr-root .fr-ddm{ position:absolute; top:calc(100% + 6px); left:0; min-width:200px; max-width:calc(100vw - 32px); background:var(--surface); border-radius:16px; box-shadow:var(--shadow); border:1px solid var(--line); padding:6px; display:flex; flex-direction:column; gap:2px }
.fr-root .fr-ddm[hidden]{ display:none }
.fr-root .fr-dd[data-dd="pf"] .fr-ddm{ left:auto; right:0 }
.fr-root .fr-ddi{ display:flex; align-items:center; gap:10px; width:100%; min-height:44px; border:none; background:transparent; color:var(--navy); border-radius:12px; padding:8px 12px; font:inherit; font-size:15px; font-weight:600; text-align:left; cursor:pointer }
.fr-root .fr-ddi:hover{ background:var(--surface-2) }
.fr-root .fr-ddi.on{ background:var(--accent-soft); color:var(--accent); font-weight:700 }
.fr-root .fr-ddi-pf .fr-logo + .fr-logo{ margin-left:-2px }
.fr-root .fr-ddl{ display:block; font-size:12px; font-weight:700; color:var(--muted); margin:0 0 5px 6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }