/* ==========================================================================
   Administration Celiow : feuille de style unique (docs/design/DESIGN-SYSTEM.md)
   Mobile d'abord (390 px), colonne latérale à partir de 900 px.
   Couleurs, rayons et ombre : uniquement les jetons du DS déclarés dans :root.
   Une seule ombre (var(--ombre)), aucun dégradé, aucune police téléchargée.

   CATALOGUE IMPOSÉ : les vues n'utilisent que ces classes (pas d'autre CSS).
   ------------------------------------------------------------------------
   Mise en page
     .page             Colonne de contenu d'un écran (720 px max, éléments espacés de 20 px).
     .page-titre       Titre h1 de l'écran (28 px, 700).
     .page-sous-titre  Texte d'introduction sous le titre (gris).
     .carte            Bloc blanc bordé, rayon 24, contenu espacé de 12 px.
     .vide             Message d'état vide (« Aucune commande pour l'instant »), avec action possible.
     .bloc-erreur      Bloc d'erreur (bordure rouge) avec bouton « Réessayer » ; jamais de faux vide.
     .masque-sr        Texte lu par les lecteurs d'écran seulement.
     .mono             Texte à chasse fixe (référence, identifiant, clé).
   Listes
     .liste            Liste bordée (ul/ol ou div) ; séparateurs entre éléments.
     .ligne            Élément cliquable d'une liste (a ou button), 56 px minimum.
                       Enfants : .ligne-titre et .ligne-meta à gauche ; tout autre enfant
                       (.badge, montant…) va à droite.
     .ligne-titre      Première ligne (16 px, 600).
     .ligne-meta       Ligne secondaire (14 px, gris).
     .recap            Récapitulatif bordé (rayon 18).
     .recap-ligne      Ligne du récapitulatif : 1er enfant libellé (gris), dernier enfant valeur (gras, à droite).
     .chrono           Chronologie verticale (ol).
     .chrono-etape     Étape de chronologie (li) avec point ; [aria-current] = étape courante.
   Filtres
     .chips            Rangée de filtres qui défile horizontalement.
     .chip             Filtre pilule (button) ; aria-pressed="true" = actif.
   Formulaires
     .champ            Groupe libellé + contrôle (input, select, textarea) + aide + erreur.
     .champ label      Libellé (14 px, 600).
     .aide             Texte d'aide sous un champ.
     .erreur-champ     Message d'erreur sous un champ (rouge) ; vide = sans hauteur.
     [aria-invalid=true]  Contrôle invalide : bordure rouge 2 px.
     .champ-code       Champ de code (6 chiffres ou code de secours) : 26 px, espacé, centré.
     .case             Label contenant une case à cocher : cible de 44 px.
   Boutons (zone tactile ≥ 44 px ; .btn, .btn-contour et .btn-accent ≥ 52 px)
     .btn              Bouton noir pilule.
     .btn-contour      Bouton blanc bordé (action secondaire), seul ou avec .btn ("btn btn-contour").
     .btn-accent       Bouton citron : la seule action principale d'un écran, seul ou avec .btn.
     .btn-lien         Lien d'action sans fond (« Utiliser un code de secours »).
     .btn-bloc         Pleine largeur (à combiner : "btn btn-bloc").
     [aria-busy=true]  Sur un bouton : indicateur d'envoi en cours.
     .barre-actions    Barre fixe en bas d'écran, au-dessus de la navigation ; le contenu n'est jamais masqué.
   Bandeaux et indicateurs
     .bandeau             Message en ligne avec point de couleur (à combiner avec une variante).
     .bandeau-attention   Point orange : à surveiller.
     .bandeau-info        Point noir : information.
     .bandeau-erreur      Bordure et point rouges : problème.
     .tuiles              Grille de tuiles de chiffres (2 colonnes en mobile).
     .tuile               Tuile (peut être un lien).
     .tuile-valeur        Chiffre de la tuile (montant, nombre).
     .tuile-libelle       Libellé de la tuile.
     .badge               Pastille de texte (13 px) ; combiner avec un statut :
     .statut-pending      En attente (point orange décoratif).
     .statut-paid         Payée (citron).
     .statut-failed       Échouée (rouge).
     .statut-cancelled    Annulée (gris).
     .statut-refunded     Remboursée (contour noir).
     .pastille-nav        Nombre sur l'onglet « À vérifier » (géré par la coquille).
     .squelette           Bloc de chargement (pulsation, immobile si mouvement réduit).
     .progression         Enveloppe d'un <progress> (envoi de fichier), avec texte au-dessus.
   Contenus
     .repliable        Section repliable sur <details> ; le <summary> fait 56 px.
     .feuille          Feuille modale (gérée par la coquille : ctx.feuille, ctx.confirmer).
     .feuille-titre    Titre de la feuille.
     .toast            Message bref (géré par la coquille : ctx.toast).
     .codes-secours    Liste des 10 codes de secours (grille, chasse fixe).
     .qr               Cadre blanc du QR code (img ou canvas à l'intérieur).
     .teinte-1 .teinte-2 .teinte-3 .teinte-4 .teinte-5 .teinte-6  Fond des visuels produits (teintes du DS).
     .apercu-public    Cadre d'aperçu de la carte et de la fiche publiques (img, h2/h3, p, .badge, .teinte-N).
     .demo-bandeau     Bandeau « Démonstration, aucune donnée réelle » (aperçu local seulement).

   CLASSES INTERNES DE LA COQUILLE (index.html, shell.js : ne pas employer dans les vues)
     .appli .entete .marque .logo .btn-icone .icone .nav-basse .onglet .onglet-icone
     .onglet-libelle .vue .vue-contenu .toasts .toast-succes .toast-erreur .toast-info
     .feuille-fond .feuille-entete .feuille-corps .feuille-etape .feuille-texte
     .feuille-actions .lien-evitement ; attributs data-mode, data-barre, data-feuille, data-forme.
     .demarrage-secours  Message statique de index.html dans #vue : visible après 15 s seulement
                         si les scripts n'ont pas vidé #vue (chargement bloqué).
   ========================================================================== */

:root {
  color-scheme: light;

  /* Couleurs du DS */
  --ink: #111111;
  --ink-hover: #444444;
  --paper: #FFFFFF;
  --ground: #F6F6F3;
  --soft: #F4F4F1;
  --line: #EAEAE6;
  --line-2: #DADAD5;
  --line-strong: #8A8A84;
  --muted: #5C5C58;
  --muted-2: #6B6B66;
  --body: #3D3D3A;
  --danger: #B3261E;
  --dim-on-ink: #BDBDB8;
  --muted-on-ink: #D6D6D1;
  --accent: #E4FF3A;
  --pending: #F2A900;
  --thumb-border: #E4E3DC;
  --teinte-1: #F1F0EA;
  --teinte-2: #EAF0F1;
  --teinte-3: #F1EAEE;
  --teinte-4: #EDF1EA;
  --teinte-5: #F1EEE6;
  --teinte-6: #ECEAF1;

  /* Ombre unique du DS (D9) */
  --ombre: 0 16px 32px rgba(0,0,0,0.08);

  /* Rayons : échelle fermée du DS (D10) */
  --r-pilule: 999px;
  --r-28: 28px;
  --r-24: 24px;
  --r-20: 20px;
  --r-18: 18px;
  --r-16: 16px;
  --r-14: 14px;
  --r-12: 12px;
  --r-10: 10px;
  --r-8: 8px;
  --r-5: 5px;
  --r-3: 3px;

  /* Polices : Geist absent du dépôt, repli système (aucun téléchargement) */
  --police: system-ui, -apple-system, "Segoe UI", sans-serif;
  --police-mono: ui-monospace, monospace;

  /* Gabarit */
  --gouttiere: 16px;
  --entete-h: 60px;
  --nav-h: 64px;
  --barre-h: 80px;
  --lateral: 232px;
  --bas-sur: env(safe-area-inset-bottom, 0px);
}

/* ---------- Base ---------- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html[data-feuille] { overflow: hidden; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--police);
  font-size: 16px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}
h1, h2, h3, h4 { margin: 0; overflow-wrap: anywhere; }
p { margin: 0; }
a { color: var(--ink); }
img { max-width: 100%; display: block; }
button, input, select, textarea { font-family: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
[tabindex="-1"]:focus:not(:focus-visible) { outline: none; }
.vue:focus { outline: none; }
/* Titre d'écran focalisé par la coquille après navigation : annoncé, sans anneau. */
.vue h1[tabindex="-1"]:focus { outline: none; }

.masque-sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.lien-evitement {
  position: absolute;
  left: var(--gouttiere);
  top: 8px;
  z-index: 70;
  min-height: 44px;
  padding: 10px 18px;
  border: 0;
  border-radius: var(--r-pilule);
  background: var(--ink);
  color: var(--paper);
  font-size: 15px;
  font-weight: 600;
  transform: translateY(-200%);
}
.lien-evitement:focus { transform: none; }

.icone { flex: none; display: block; }

/* ---------- En-tête ---------- */

.entete {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: var(--entete-h);
  padding: 8px 8px 8px var(--gouttiere);
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.marque {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  min-width: 0;
  color: var(--ink);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-decoration: none;
}
.logo {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: var(--r-8);
  background: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.logo::after {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: var(--r-3);
  background: var(--accent);
}
.btn-icone {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--r-pilule);
  background: transparent;
  color: var(--ink);
}
.btn-icone:hover { background: var(--soft); }
.btn-icone[aria-current="page"] { background: var(--soft); }

/* ---------- Navigation : barre basse (mobile), colonne latérale (≥ 900 px) ---------- */

.nav-basse {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  height: calc(var(--nav-h) + var(--bas-sur));
  padding: 0 0 var(--bas-sur);
  background: var(--paper);
  border-top: 1px solid var(--line);
}
.onglet {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 0;
  height: calc(var(--nav-h) - 1px);
  padding: 4px 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
}
.onglet-icone {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 30px;
  border-radius: var(--r-pilule);
}
.onglet-libelle { max-width: 100%; white-space: nowrap; letter-spacing: -0.01em; }
@media (max-width: 359px) {
  .onglet-libelle { font-size: 11px; letter-spacing: -0.02em; }
  .onglet-icone { width: 48px; }
}
.onglet:hover { color: var(--ink); }
.onglet[aria-current="page"] { color: var(--ink); font-weight: 700; }
.onglet[aria-current="page"] .onglet-icone { background: var(--accent); }

.pastille-nav {
  position: absolute;
  top: -4px;
  left: calc(50% + 6px);
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--r-pilule);
  background: var(--danger);
  color: var(--paper);
  font-size: 12px;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
}

/* ---------- Zone de vue ---------- */

.vue {
  display: block;
  padding: 20px var(--gouttiere) 40px;
}
body[data-mode="prive"] .vue {
  padding-bottom: calc(var(--nav-h) + var(--bas-sur) + 32px);
}
body[data-mode="prive"] .vue[data-barre],
body[data-mode="prive"] .vue:has(.barre-actions) {
  padding-bottom: calc(var(--nav-h) + var(--bas-sur) + var(--barre-h) + 32px);
}
body[data-mode="public"] .vue[data-barre],
body[data-mode="public"] .vue:has(.barre-actions) {
  padding-bottom: calc(var(--bas-sur) + var(--barre-h) + 32px);
}
.vue-contenu { min-width: 0; }

.page {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  min-width: 0;
}
.page-titre {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
}
.page-sous-titre {
  margin-top: -8px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.5;
}

.carte {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  padding: 20px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-24);
}
.carte > h2, .carte > h3 { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; }

.mono {
  font-family: var(--police-mono);
  font-size: 0.95em;
  overflow-wrap: anywhere;
}

/* ---------- Listes ---------- */

.liste {
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-18);
  overflow: hidden;
}
.liste > * + * { border-top: 1px solid var(--line); }
.liste > li { margin: 0; }

.ligne {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-auto-flow: row dense;
  align-items: center;
  column-gap: 12px;
  row-gap: 2px;
  width: 100%;
  min-height: 56px;
  margin: 0;
  padding: 12px 16px;
  border: 0;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  text-align: left;
  text-decoration: none;
}
.ligne > * { grid-column: 2; justify-self: end; text-align: right; }
.ligne > .ligne-titre, .ligne > .ligne-meta { grid-column: 1; justify-self: stretch; text-align: left; }
a.ligne:hover, button.ligne:hover { background: var(--ground); }
.ligne:focus-visible { outline-offset: -3px; }
.ligne-titre {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.ligne-meta {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.recap {
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-18);
}
.recap-ligne {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 4px 16px;
  margin: 0;
  padding: 14px 18px;
}
.recap-ligne + .recap-ligne { border-top: 1px solid var(--line); }
.recap-ligne > :first-child { color: var(--muted); font-size: 15px; }
.recap-ligne > :last-child { margin-left: auto; font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.recap-ligne > :first-child:last-child { margin-left: 0; text-align: left; }

.chrono {
  list-style: none;
  margin: 0;
  padding: 0;
}
.chrono-etape {
  position: relative;
  margin: 0;
  padding: 0 0 18px 28px;
  color: var(--body);
  font-size: 15px;
}
.chrono-etape::before {
  content: "";
  position: absolute;
  left: 0;
  top: 5px;
  width: 12px;
  height: 12px;
  border-radius: var(--r-pilule);
  background: var(--paper);
  border: 2px solid var(--line-strong);
}
.chrono-etape::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 21px;
  bottom: 2px;
  width: 2px;
  background: var(--line);
}
.chrono-etape:last-child { padding-bottom: 0; }
.chrono-etape:last-child::after { display: none; }
.chrono-etape[aria-current]::before { background: var(--ink); border-color: var(--ink); }
.chrono-etape[aria-current] { color: var(--ink); font-weight: 600; }

/* ---------- Filtres ---------- */

.chips {
  display: flex;
  gap: 8px;
  margin: 0 calc(-1 * var(--gouttiere));
  padding: 2px var(--gouttiere) 6px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: none;
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-pilule);
  background: var(--paper);
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}
.chip:hover { border-color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }

/* ---------- Formulaires ---------- */

.champ {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.champ label { font-size: 14px; font-weight: 600; }
.champ input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.champ select,
.champ textarea {
  width: 100%;
  max-width: 100%;
  min-height: 52px;
  padding: 15px 16px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-14);
  background: var(--paper);
  color: var(--ink);
  font-size: 16px;
  line-height: 20px;
}
.champ input[type="file"] { max-width: 100%; font-size: 15px; }
.champ textarea { min-height: 120px; line-height: 1.5; resize: vertical; }
.champ input::placeholder, .champ textarea::placeholder { color: var(--muted-2); opacity: 1; }
.champ input:hover, .champ select:hover, .champ textarea:hover { border-color: var(--ink); }
.champ input:focus, .champ select:focus, .champ textarea:focus { outline: 2px solid var(--ink); outline-offset: 1px; }
.champ input:disabled, .champ select:disabled, .champ textarea:disabled,
.champ input[readonly], .champ textarea[readonly] {
  background: var(--soft);
  color: var(--muted);
  cursor: not-allowed;
}
.aide { color: var(--muted); font-size: 14px; line-height: 1.5; }
.erreur-champ { color: var(--danger); font-size: 14px; font-weight: 500; line-height: 1.4; }
.erreur-champ:empty { display: none; }
[aria-invalid="true"] { border: 2px solid var(--danger) !important; }
.champ input[aria-invalid="true"], .champ select[aria-invalid="true"], .champ textarea[aria-invalid="true"] { padding: 14px 15px; }
[aria-invalid="true"]:focus { outline-color: var(--danger) !important; }

.champ-code,
.champ input.champ-code {
  min-height: 60px;
  padding-left: calc(16px + 0.4em);
  font-family: var(--police);
  font-size: 26px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.4em;
  text-align: center;
}

.case {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-height: 44px;
  padding: 10px 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  cursor: pointer;
}
.champ .case { font-size: 16px; font-weight: 500; }
.case input[type="checkbox"], .case input[type="radio"] {
  flex: none;
  width: 24px;
  height: 24px;
  margin: 0;
  accent-color: var(--ink);
  cursor: pointer;
}

/* ---------- Boutons ---------- */

.btn, .btn-contour, .btn-accent {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 14px 24px;
  border: 1px solid var(--ink);
  border-radius: var(--r-pilule);
  background: var(--ink);
  color: var(--paper);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.btn:hover { background: var(--ink-hover); border-color: var(--ink-hover); color: var(--paper); }
.btn-contour, .btn.btn-contour {
  background: var(--paper);
  border-color: var(--line-2);
  color: var(--ink);
}
.btn-contour:hover, .btn.btn-contour:hover { background: var(--soft); border-color: var(--ink); color: var(--ink); }
.btn-accent, .btn.btn-accent {
  background: var(--accent);
  border-color: var(--ink);
  color: var(--ink);
}
.btn-accent:hover, .btn.btn-accent:hover { background: var(--ink); border-color: var(--ink); color: var(--accent); }
.btn-lien {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 12px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-size: 15px;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.btn-lien:hover { color: var(--ink-hover); }
.btn-bloc { display: flex; width: 100%; }
.btn:disabled, .btn-contour:disabled, .btn-accent:disabled, .btn-lien:disabled, .chip:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.btn:disabled:hover { background: var(--ink); border-color: var(--ink); }
.btn-contour:disabled:hover, .btn.btn-contour:disabled:hover { background: var(--paper); border-color: var(--line-2); }
.btn-accent:disabled:hover, .btn.btn-accent:disabled:hover { background: var(--accent); color: var(--ink); }
[aria-busy="true"].btn, [aria-busy="true"].btn-contour, [aria-busy="true"].btn-accent { cursor: progress; }
.btn[aria-busy="true"]::after, .btn-contour[aria-busy="true"]::after, .btn-accent[aria-busy="true"]::after {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: var(--r-pilule);
  animation: tourne 0.7s linear infinite;
}

.barre-actions {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(var(--nav-h) + var(--bas-sur));
  z-index: 25;
  display: flex;
  gap: 12px;
  min-height: var(--barre-h);
  padding: 13px var(--gouttiere);
  background: var(--paper);
  border-top: 1px solid var(--line);
}
body[data-mode="public"] .barre-actions { bottom: 0; padding-bottom: calc(13px + var(--bas-sur)); }
.barre-actions > * { flex: 1 1 0; min-width: 0; }

/* ---------- Bandeaux ---------- */

.bandeau {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 8px 12px;
  padding: 14px 16px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-16);
  background: var(--paper);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.45;
}
.bandeau::before {
  content: "";
  flex: none;
  width: 10px;
  height: 10px;
  margin-top: 0.45em;
  border-radius: var(--r-pilule);
  background: var(--ink);
}
.bandeau > * { flex: 1 1 200px; min-width: 0; }
.bandeau > .btn, .bandeau > .btn-contour, .bandeau > .btn-accent, .bandeau > .btn-lien { flex: 0 0 auto; }
.bandeau-attention { background: var(--ground); }
.bandeau-attention::before { background: var(--pending); }
.bandeau-info { background: var(--soft); border-color: var(--line); }
.bandeau-info::before { background: var(--ink); }
.bandeau-erreur { border: 2px solid var(--danger); padding: 13px 15px; }
.bandeau-erreur::before { background: var(--danger); }

/* ---------- Tuiles ---------- */

.tuiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.tuile {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding: 16px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-18);
  color: var(--ink);
  text-decoration: none;
}
a.tuile:hover { border-color: var(--ink); }
.tuile-valeur {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.tuile-libelle { color: var(--muted); font-size: 14px; line-height: 1.35; }

/* ---------- Badges et statuts ---------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 4px 10px;
  border: 1px solid transparent;
  border-radius: var(--r-pilule);
  background: var(--soft);
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
}
.statut-pending { background: var(--paper); border-color: var(--line-2); }
.statut-pending::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: var(--r-pilule);
  background: var(--pending);
}
.statut-paid { background: var(--accent); border-color: var(--ink); color: var(--ink); }
.statut-failed { background: var(--paper); border-color: var(--danger); color: var(--danger); }
.statut-cancelled { background: var(--soft); border-color: var(--line-2); color: var(--muted); }
.statut-refunded { background: var(--paper); border-color: var(--ink); color: var(--ink); }

/* ---------- États ---------- */

.squelette {
  display: block;
  min-height: 20px;
  border-radius: var(--r-12);
  background: var(--soft);
  color: transparent;
  animation: pulsation 1.4s ease-in-out infinite;
}
.squelette[data-forme="titre"] { width: 60%; height: 34px; }
.squelette[data-forme="bloc"] { height: 96px; border-radius: var(--r-18); }
.squelette[data-forme="ligne"] { height: 64px; border-radius: var(--r-16); }

.vide {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 32px 20px;
  border: 1px dashed var(--line-2);
  border-radius: var(--r-18);
  background: var(--paper);
  color: var(--muted);
  font-size: 15px;
  text-align: center;
}
.vide > .btn, .vide > .btn-contour, .vide > .btn-accent { align-self: stretch; }

.bloc-erreur {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0;
  padding: 18px;
  border: 2px solid var(--danger);
  border-radius: var(--r-18);
  background: var(--paper);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.45;
}

/* ---------- Repliable, progression ---------- */

.repliable {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-18);
}
.repliable > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 56px;
  padding: 14px 18px;
  font-size: 17px;
  font-weight: 600;
  list-style: none;
  cursor: pointer;
  border-radius: var(--r-18);
}
.repliable > summary::-webkit-details-marker { display: none; }
.repliable > summary::after {
  content: "+";
  flex: none;
  font-size: 24px;
  font-weight: 500;
  line-height: 1;
}
.repliable[open] > summary::after { content: "\2212"; }
.repliable[open] > summary { border-bottom: 1px solid var(--line); border-bottom-left-radius: var(--r-3); border-bottom-right-radius: var(--r-3); }
.repliable > :not(summary) { margin: 16px 18px; }
.repliable > :not(summary):last-child { margin-bottom: 18px; }
/* Un corps .page (fiche produit) garde sa mise en colonne, mais pas width:100%,
   qui ajouterait les marges latérales et ferait déborder la section. */
.repliable > .page { width: auto; }

.progression {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 14px;
  color: var(--muted);
}
.progression progress {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 12px;
  border: 0;
  border-radius: var(--r-pilule);
  background: var(--soft);
  color: var(--ink);
  overflow: hidden;
}
.progression progress::-webkit-progress-bar { background: var(--soft); border-radius: var(--r-pilule); }
.progression progress::-webkit-progress-value { background: var(--ink); border-radius: var(--r-pilule); }
.progression progress::-moz-progress-bar { background: var(--ink); border-radius: var(--r-pilule); }

/* ---------- Feuille modale ---------- */

.feuille-fond {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 8px;
  padding-bottom: calc(8px + var(--bas-sur));
}
.feuille-fond::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--ink);
  opacity: 0.45;
}
.feuille {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 520px;
  max-height: calc(100vh - 16px);
  max-height: calc(100dvh - 16px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 8px 20px 20px;
  background: var(--paper);
  border-radius: var(--r-24);
  box-shadow: var(--ombre);
}
.feuille:focus { outline: none; }
.feuille-entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-right: -12px;
  min-height: 52px;
}
.feuille-titre {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.feuille-corps, .feuille-etape {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.feuille-texte { color: var(--body); font-size: 16px; line-height: 1.5; }
.feuille-texte:focus { outline: none; }
.feuille-actions { display: flex; flex-direction: column; gap: 10px; }

/* ---------- Toasts ---------- */

.toasts {
  position: fixed;
  left: var(--gouttiere);
  right: var(--gouttiere);
  bottom: calc(16px + var(--bas-sur));
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
}
body[data-mode="prive"] .toasts { bottom: calc(var(--nav-h) + var(--bas-sur) + 12px); }
.toast {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 480px;
  padding: 14px 18px;
  border-radius: var(--r-16);
  background: var(--ink);
  color: var(--paper);
  outline: 1px solid var(--ink-hover);
  box-shadow: var(--ombre);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  pointer-events: auto;
  animation: apparition 0.2s ease-out;
}
.toast::before {
  content: "";
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: var(--r-pilule);
  background: var(--paper);
}
.toast-succes::before { background: var(--accent); }
.toast-erreur::before { background: var(--danger); }
.toast-info::before { background: var(--paper); }
/* Feuille ouverte : ses boutons sont en bas de l'écran (mobile). Les toasts montent en haut et
   laissent passer les doigts, pour qu'un message récent ne cache ni ne bloque « Retirer », « Enregistrer »…
   (« html[data-feuille] body » : plus fort que les positions mobile et ordinateur ci-dessus et ci-dessous.) */
html[data-feuille] body .toasts {
  top: calc(12px + env(safe-area-inset-top, 0px));
  bottom: auto;
}
html[data-feuille] body .toast { pointer-events: none; }

/* ---------- Activation, aperçu, démonstration ---------- */

.codes-secours {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.codes-secours > * {
  padding: 10px 8px;
  border-radius: var(--r-10);
  background: var(--soft);
  font-family: var(--police-mono);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-align: center;
  overflow-wrap: anywhere;
}

.qr {
  align-self: center;
  width: 100%;
  max-width: 272px;
  padding: 16px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-16);
}
.qr img, .qr canvas {
  display: block;
  width: 100%;
  height: auto;
  image-rendering: pixelated;
}

.teinte-1 { background-color: var(--teinte-1); }
.teinte-2 { background-color: var(--teinte-2); }
.teinte-3 { background-color: var(--teinte-3); }
.teinte-4 { background-color: var(--teinte-4); }
.teinte-5 { background-color: var(--teinte-5); }
.teinte-6 { background-color: var(--teinte-6); }

.apercu-public {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  padding: 16px;
  background: var(--paper);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-24);
  color: var(--ink);
}
.apercu-public img,
.apercu-public .teinte-1, .apercu-public .teinte-2, .apercu-public .teinte-3,
.apercu-public .teinte-4, .apercu-public .teinte-5, .apercu-public .teinte-6 {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--r-16);
  border: 1px solid var(--thumb-border);
}
.apercu-public h2 { font-size: 26px; font-weight: 700; letter-spacing: -0.035em; line-height: 1.1; }
.apercu-public h3 { font-size: 17px; font-weight: 600; line-height: 1.3; }
.apercu-public p { color: var(--muted); font-size: 15px; line-height: 1.5; }
.apercu-public ul { margin: 0; padding-left: 20px; color: var(--body); font-size: 15px; }
.apercu-public .badge { align-self: flex-start; background: var(--accent); }

.demo-bandeau {
  position: relative;
  z-index: 35;
  padding: 8px var(--gouttiere);
  background: var(--accent);
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
  font-size: 14px;
  font-weight: 600;
  text-align: center;
}

/* Secours de démarrage : bloc statique de #vue, vidé par la coquille au premier rendu.
   Invisible pendant 15 s, puis visible si les scripts ne l'ont pas retiré (3G lente, script
   bloqué). Aucune dépendance au mouvement : animation de durée nulle, seul le délai compte. */
.demarrage-secours {
  visibility: hidden;
  animation: demarrage-secours-apparait 0s linear 15s forwards;
  max-width: 720px;
  margin: 0 auto;
  padding: 18px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-18);
  background: var(--paper);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.45;
  text-align: center;
}
/* Sans JavaScript, le message <noscript> suffit. */
@media (scripting: none) {
  .demarrage-secours { display: none; }
}

/* ---------- Animations ---------- */

@keyframes pulsation { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } }
@keyframes tourne { to { transform: rotate(360deg); } }
@keyframes apparition { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes demarrage-secours-apparait { to { visibility: visible; } }

@media (prefers-reduced-motion: reduce) {
  .squelette { animation: none !important; opacity: 1; }
  .toast { animation: none !important; }
  .btn[aria-busy="true"]::after, .btn-contour[aria-busy="true"]::after, .btn-accent[aria-busy="true"]::after {
    animation-duration: 2s !important;
  }
}

/* ---------- Écrans moyens ---------- */

@media (min-width: 600px) {
  .tuiles { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
  .page-titre { font-size: 32px; }
}

/* ---------- Grand écran : colonne latérale ---------- */

@media (min-width: 900px) {
  :root { --gouttiere: 24px; }
  .entete { padding-left: 24px; padding-right: 16px; }
  .marque { font-size: 20px; }
  .nav-basse {
    top: var(--entete-h);
    right: auto;
    width: var(--lateral);
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px 12px;
    border-top: 0;
    border-right: 1px solid var(--line);
  }
  .onglet {
    flex-direction: row;
    justify-content: flex-start;
    gap: 12px;
    height: auto;
    min-height: 52px;
    padding: 8px 12px;
    border-radius: var(--r-14);
    font-size: 15px;
    text-align: left;
  }
  .onglet-icone { width: 40px; height: 32px; }
  .onglet[aria-current="page"] { background: var(--ground); }
  .pastille-nav { left: calc(50% + 4px); }
  body[data-mode="prive"] .vue { margin-left: var(--lateral); padding: 32px var(--gouttiere) 48px; }
  body[data-mode="prive"] .vue[data-barre],
  body[data-mode="prive"] .vue:has(.barre-actions) { padding-bottom: calc(var(--barre-h) + 48px); }
  body[data-mode="public"] .vue { padding-top: 48px; }
  body[data-mode="public"] .page { max-width: 460px; }
  body[data-mode="prive"] .barre-actions { left: var(--lateral); bottom: 0; padding-bottom: calc(13px + var(--bas-sur)); }
  .barre-actions > * { flex: 0 1 240px; }
  .barre-actions { justify-content: flex-end; }
  body[data-mode="prive"] .toasts { left: calc(var(--lateral) + 24px); bottom: 24px; }
  .feuille-fond { align-items: center; padding: 24px; }
  .feuille { padding: 12px 28px 28px; }
}