/* ==========================================================================
   Passerelle — système visuel
   Précision d'un tableau de bord Stripe, retenue et espace d'Apple.
   Une couleur d'accent, des filets plutôt que des boîtes, Geist partout.
   ========================================================================== */

@font-face {
  font-family: 'Geist';
  src: url('polices/geist.woff2') format('woff2');
  font-weight: 300 700; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Geist Mono';
  src: url('polices/geist-mono.woff2') format('woff2');
  font-weight: 400 600; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --police: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --fond: #ffffff;
  --fond-doux: #f6f9fc;
  --survol: #f3f4f7;
  --encre: #0a2540;
  --encre-2: #425466;
  --encre-3: #8a92a2;
  --filet: #eceef2;
  --bord: #dde0e7;

  --accent: #635bff;
  --accent-fonce: #4f46e5;
  --accent-doux: #efeeff;
  --anneau: 0 0 0 4px rgba(99, 91, 255, .18);

  --vert: #0f7a43;   --vert-doux: #e4f6ec;
  --bleu: #2459d6;   --bleu-doux: #e9f0fe;
  --ambre: #8c4f00;  --ambre-doux: #fff2d6;
  --rouge: #c21f40;  --rouge-doux: #ffebee;
  --gris: #5a6272;   --gris-doux: #eff1f4;

  --r-s: 6px; --r: 8px; --r-l: 12px; --r-xl: 16px;
  --ombre-1: 0 1px 2px rgba(10, 37, 64, .05);
  --ombre-2: 0 1px 2px rgba(10, 37, 64, .04), 0 6px 16px rgba(10, 37, 64, .06);
  --ombre-3: 0 2px 8px rgba(10, 37, 64, .06), 0 24px 56px rgba(10, 37, 64, .12);
  --laterale: 240px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--fond); color: var(--encre);
  font: 400 14px/1.5 var(--police); letter-spacing: -.003em;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'ss01' on;
}
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-fonce); }
h1, h2, h3 { margin: 0; color: var(--encre); font-weight: 600; }
h1 { font-size: 28px; line-height: 1.2; letter-spacing: -.028em; }
h2 { font-size: 16px; line-height: 1.4; letter-spacing: -.012em; }
h3 { font-size: 14px; line-height: 1.4; }
p { margin: 0; }
code, .mono { font-family: var(--mono); font-size: .92em; letter-spacing: 0; }
::selection { background: var(--accent-doux); }
svg.icone { flex: none; display: block; }

/* --------------------------------------------------------------------------
   Coquille de l'application : barre latérale + contenu
   -------------------------------------------------------------------------- */
.app { display: grid; grid-template-columns: var(--laterale) minmax(0, 1fr); min-height: 100vh; }
.laterale {
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  display: flex; flex-direction: column; gap: 18px;
  padding: 18px 12px 14px; background: var(--fond-doux); border-right: 1px solid var(--filet);
}
.logo { display: flex; align-items: center; gap: 10px; padding: 4px 8px; color: var(--encre); font-weight: 600; font-size: 15px; letter-spacing: -.02em; }
.logo:hover { color: var(--encre); }
.marque { width: 28px; height: 28px; border-radius: 8px; background: var(--encre); color: #fff; display: grid; place-items: center; }
.espace { padding: 10px; border-radius: var(--r-l); background: var(--fond); box-shadow: 0 0 0 1px var(--filet), var(--ombre-1); }
.espace-nom { font-weight: 600; font-size: 13.5px; letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.espace-mode { display: flex; align-items: center; gap: 6px; margin-top: 3px; font-size: 12px; color: var(--encre-2); }
.espace-mode:hover { color: var(--encre); }
.point { width: 7px; height: 7px; border-radius: 50%; background: var(--encre-3); flex: none; }
.point-vert { background: #1fb66b; box-shadow: 0 0 0 3px rgba(31, 182, 107, .14); }
.point-ambre { background: #f0a720; box-shadow: 0 0 0 3px rgba(240, 167, 32, .16); }
.point-gris { background: #b8bfcb; }
.nav { display: flex; flex-direction: column; gap: 1px; }
.nav-titre { margin: 14px 10px 4px; font-size: 11.5px; font-weight: 500; color: var(--encre-3); }
.nav a { display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 10px; border-radius: var(--r); color: var(--encre-2); font-weight: 500; font-size: 13.5px; }
.nav a:hover { background: var(--survol); color: var(--encre); }
.nav a.actif { background: var(--fond); color: var(--encre); box-shadow: 0 0 0 1px var(--filet), var(--ombre-1); }
.nav a.actif svg { color: var(--accent); }
.nav .compteur { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--ambre-doux); color: var(--ambre); font-size: 11.5px; font-weight: 600; display: grid; place-items: center; }
.nav .point { margin-left: auto; }
.laterale-bas { margin-top: auto; display: flex; flex-direction: column; gap: 10px; }
.mise-en-route { display: block; padding: 12px; border-radius: var(--r-l); background: var(--fond); box-shadow: 0 0 0 1px var(--filet), var(--ombre-1); color: var(--encre); }
.mise-en-route:hover { color: var(--encre); box-shadow: 0 0 0 1px var(--bord), var(--ombre-2); }
.mise-en-route strong { display: block; font-size: 13px; font-weight: 600; }
.mise-en-route span { font-size: 12px; color: var(--encre-2); }
progress.jauge { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 4px; margin-top: 9px; border: 0; border-radius: 4px; background: var(--gris-doux); overflow: hidden; color: var(--accent); }
progress.jauge::-webkit-progress-bar { background: var(--gris-doux); border-radius: 4px; }
progress.jauge::-webkit-progress-value { background: var(--accent); border-radius: 4px; transition: width .3s; }
progress.jauge::-moz-progress-bar { background: var(--accent); border-radius: 4px; }
.utilisateur { display: flex; align-items: center; gap: 10px; padding: 6px 8px; }
a.avatar:hover { color: var(--accent-fonce); background: #e3e6ff; }
.avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--accent-doux); color: var(--accent); display: grid; place-items: center; font-size: 11.5px; font-weight: 600; flex: none; }
.utilisateur-nom { font-size: 13px; font-weight: 500; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.utilisateur-liens { display: flex; gap: 10px; font-size: 12px; }
.utilisateur-liens a, .utilisateur-liens button { color: var(--encre-3); }
.utilisateur-liens a:hover, .utilisateur-liens button:hover { color: var(--encre); }
.utilisateur form { margin: 0; }
.laterale-legal { display: flex; gap: 12px; margin: 0; padding: 0 8px; font-size: 11.5px; }
.laterale-legal a, .pied-simple a { color: var(--encre-3); }
.laterale-legal a:hover, .pied-simple a:hover { color: var(--encre); }
.pied-simple { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; font-size: 12.5px; }

.principal { min-width: 0; }
.page { max-width: 1120px; margin: 0 auto; padding: 36px 48px 72px; animation: apparaitre .32s cubic-bezier(.2, .7, .2, 1) both; }
.page-etroite { max-width: 760px; }

/* --------------------------------------------------------------------------
   En-têtes de page, sections
   -------------------------------------------------------------------------- */
.entete { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 28px; }
.entete-titre { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.entete .sous-titre { color: var(--encre-2); font-size: 14px; }
.entete .actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.retour { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--encre-2); margin-bottom: 14px; }
.retour:hover { color: var(--encre); }
.montant-titre { font-size: 34px; font-weight: 600; letter-spacing: -.035em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.ligne-titre { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.section { margin-top: 40px; }
.section:first-child { margin-top: 0; }
.section-entete { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--filet); margin-bottom: 4px; }
.section-entete a { font-size: 13px; font-weight: 500; }
.section-aide { color: var(--encre-2); font-size: 13px; margin-top: 2px; }
.aide { color: var(--encre-2); font-size: 13px; }
.discret { color: var(--encre-3); }
.vide { padding: 28px 0; color: var(--encre-2); }
.vide strong { display: block; color: var(--encre); font-weight: 600; margin-bottom: 2px; }
.nombre { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fort { font-weight: 600; }

/* --------------------------------------------------------------------------
   Chiffres clés (accueil)
   -------------------------------------------------------------------------- */
.chiffres { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--filet); border-bottom: 1px solid var(--filet); }
.chiffre { display: flex; flex-direction: column; gap: 4px; padding: 20px 24px 20px 0; color: var(--encre); position: relative; }
.chiffre + .chiffre { padding-left: 24px; }
.chiffre + .chiffre::before { content: ''; position: absolute; left: 0; top: 20px; bottom: 20px; width: 1px; background: var(--filet); }
.chiffre:hover { color: var(--encre); }
.chiffre:hover .chiffre-valeur { color: var(--accent); }
.chiffre-libelle { font-size: 13px; color: var(--encre-2); font-weight: 500; display: flex; align-items: center; gap: 6px; }
.chiffre-valeur { font-size: 26px; font-weight: 600; letter-spacing: -.03em; font-variant-numeric: tabular-nums; line-height: 1.2; transition: color .15s; }
.chiffre-detail { font-size: 12.5px; color: var(--encre-3); }
.chiffre-alerte .chiffre-valeur { color: var(--rouge); }

/* --------------------------------------------------------------------------
   Listes d'actions (« À faire »)
   -------------------------------------------------------------------------- */
.liste { list-style: none; margin: 0; padding: 0; }
.liste > li { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--filet); }
.liste > li:last-child { border-bottom: 0; }
.liste .rond { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--gris-doux); color: var(--gris); }
.liste .rond.ambre { background: var(--ambre-doux); color: var(--ambre); }
.liste .rond.rouge { background: var(--rouge-doux); color: var(--rouge); }
.liste .rond.accent { background: var(--accent-doux); color: var(--accent); }
.liste .rond.vert { background: var(--vert-doux); color: var(--vert); }
.liste .texte { flex: 1; min-width: 0; }
.liste .texte strong { display: block; font-weight: 500; }
.liste .texte span { color: var(--encre-2); font-size: 13px; }
.liste .fin { margin-left: auto; display: flex; align-items: center; gap: 12px; flex: none; }
.liste.activite > li { padding: 10px 0; align-items: flex-start; }
.liste.activite .rond { width: 26px; height: 26px; }
.liste.activite .texte { font-size: 13.5px; }
.liste.activite .texte a { color: var(--encre); }
.liste.activite .texte a:hover { color: var(--accent); }
.liste.activite .texte span { display: block; font-size: 12.5px; color: var(--encre-3); }

/* --------------------------------------------------------------------------
   Tableaux
   -------------------------------------------------------------------------- */
.cadre-tableau { overflow-x: auto; margin: 0 -8px; }
.tableau { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13.5px; }
.tableau th { text-align: left; font-weight: 500; font-size: 12.5px; color: var(--encre-3); padding: 10px 8px; border-bottom: 1px solid var(--filet); white-space: nowrap; }
.tableau td { padding: 13px 8px; border-bottom: 1px solid var(--filet); vertical-align: middle; }
.tableau tbody tr:last-child td { border-bottom: 0; }
.tableau tbody tr[data-lien] { cursor: pointer; }
.tableau tbody tr:hover td { background: var(--fond-doux); }
.tableau td:first-child, .tableau th:first-child { padding-left: 8px; }
.tableau th.nombre, .tableau td.nombre { text-align: right; }
.tableau .montant { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tableau .principal-cellule { color: var(--encre); font-weight: 500; }
.tableau .secondaire { color: var(--encre-2); }
.tableau .mono { color: var(--encre-2); }
.tableau.saisie td { padding: 6px 4px; }
.tableau.saisie input { width: 100%; min-width: 64px; }
.tableau.saisie td:first-child { width: 44%; }
.tableau.saisie td:last-child { width: 44px; }

/* --------------------------------------------------------------------------
   Badges
   -------------------------------------------------------------------------- */
.pastille { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: 6px; font-size: 12px; font-weight: 500; white-space: nowrap; letter-spacing: 0; }
.pastille svg { width: 12px; height: 12px; }
.ton-ok { background: var(--vert-doux); color: var(--vert); }
.ton-info { background: var(--bleu-doux); color: var(--bleu); }
.ton-accent { background: var(--accent-doux); color: var(--accent); }
.ton-attention { background: var(--ambre-doux); color: var(--ambre); }
.ton-danger { background: var(--rouge-doux); color: var(--rouge); }
.ton-neutre { background: var(--gris-doux); color: var(--gris); }
.jours { margin-left: 6px; font-size: 12px; color: var(--encre-3); font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   Onglets à pastilles (filtres) et recherche
   -------------------------------------------------------------------------- */
.filtres { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.onglets { display: flex; gap: 6px; flex-wrap: wrap; }
.onglets a { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 15px; font-size: 13px; font-weight: 500; color: var(--encre-2); box-shadow: inset 0 0 0 1px var(--filet); }
.onglets a:hover { color: var(--encre); box-shadow: inset 0 0 0 1px var(--bord); }
.onglets a.actif { background: var(--encre); color: #fff; box-shadow: none; }
.onglets a .n { font-size: 12px; color: var(--encre-3); font-variant-numeric: tabular-nums; }
.onglets a.actif .n { color: rgba(255, 255, 255, .62); }
.recherche { position: relative; display: flex; align-items: center; }
.recherche svg { position: absolute; left: 10px; color: var(--encre-3); pointer-events: none; }
.recherche input[type=search] { padding-left: 34px; width: 250px; height: 34px; font-size: 13.5px; }
.pied-liste { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 14px; font-size: 13px; }
.pagination { display: flex; gap: 8px; }

/* --------------------------------------------------------------------------
   Boutons
   -------------------------------------------------------------------------- */
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 34px; padding: 0 14px; border: 0; border-radius: var(--r);
  font: 500 13.5px/1 var(--police); letter-spacing: -.005em; white-space: nowrap; cursor: pointer;
  background: var(--fond); color: var(--encre);
  box-shadow: 0 0 0 1px var(--bord), 0 1px 2px rgba(10, 37, 64, .06);
  transition: background .12s, box-shadow .12s, transform .08s, color .12s;
}
.bouton:hover { color: var(--encre); background: var(--fond-doux); }
.bouton:active { transform: scale(.985); }
.bouton:focus-visible { outline: none; box-shadow: 0 0 0 1px var(--accent), var(--anneau); }
.bouton:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.bouton-principal { background: var(--accent); color: #fff; box-shadow: 0 1px 2px rgba(51, 65, 230, .3), inset 0 1px 0 rgba(255, 255, 255, .14); }
.bouton-principal:hover { background: var(--accent-fonce); color: #fff; }
.bouton-noir { background: var(--encre); color: #fff; box-shadow: 0 1px 2px rgba(10, 37, 64, .3); }
.bouton-noir:hover { background: #262c3d; color: #fff; }
.bouton-discret { background: transparent; box-shadow: none; color: var(--encre-2); }
.bouton-discret:hover { background: var(--survol); color: var(--encre); }
.bouton-danger { color: var(--rouge); }
.bouton-danger:hover { background: var(--rouge-doux); color: var(--rouge); }
.bouton-grand { height: 42px; padding: 0 20px; font-size: 14.5px; border-radius: 10px; }
.bouton-large { width: 100%; }
.lien-bouton { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; color: var(--accent); }
.lien-bouton:hover { color: var(--accent-fonce); }
form.en-ligne { display: inline; margin: 0; }

/* --------------------------------------------------------------------------
   Formulaires
   -------------------------------------------------------------------------- */
.champ { display: flex; flex-direction: column; gap: 6px; }
.champ + .champ { margin-top: 16px; }
label, .etiquette { font-size: 13px; font-weight: 500; color: var(--encre); }
.etiquette-aide { font-weight: 400; color: var(--encre-3); }
input[type=text], input:not([type]), input[type=email], input[type=password], input[type=search], input[type=date], input[type=number], input[type=url], input[type=tel], select, textarea {
  width: 100%; height: 40px; padding: 0 12px; border-radius: var(--r);
  border: 1px solid var(--bord); background: var(--fond); color: var(--encre);
  font: 400 14px/1.4 var(--police); letter-spacing: -.003em;
  transition: border-color .12s, box-shadow .12s;
}
textarea { height: auto; min-height: 84px; padding: 10px 12px; resize: vertical; }
select { appearance: none; -webkit-appearance: none; padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238a92a2' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; }
input::placeholder, textarea::placeholder { color: #a9afbb; }
input:hover, select:hover, textarea:hover { border-color: #c9cdd6; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: var(--anneau); }
input[readonly], input:disabled, select:disabled { background: var(--fond-doux); color: var(--encre-2); }
input.mono { font-family: var(--mono); font-size: 13.5px; }
.indication { font-size: 12.5px; color: var(--encre-3); }
.indication .icone, p .icone { display: inline-block; vertical-align: -2px; margin-right: 3px; }
p.indication { margin-top: 14px; }
.case.confirmation-reel { display: none; margin-top: 12px; padding: 12px 14px; border-radius: var(--r); background: var(--ambre-doux); color: #5c3500; }
.champ:has(input[value="reel"]:checked) .case.confirmation-reel { display: flex; }
.champ > .bouton { align-self: flex-start; }
.bouton-desactive { opacity: .45; pointer-events: none; }
.champ + .champ, form > .champ + .champ { margin-top: 26px; }
.grille-champs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; }
.grille-champs .pleine { grid-column: 1 / -1; }
.grille-champs .champ + .champ { margin-top: 0; }
.actions-formulaire { display: flex; gap: 10px; align-items: center; margin-top: 24px; flex-wrap: wrap; }
.champ-bouton { display: flex; gap: 8px; }
.champ-bouton input { flex: 1; min-width: 0; }

/* Groupes à la manière des Réglages d'Apple */
.groupe { border-radius: var(--r-l); box-shadow: 0 0 0 1px var(--filet), var(--ombre-1); background: var(--fond); }
.groupe + .groupe { margin-top: 24px; }
.groupe-entete { padding: 18px 22px 0; }
.groupe-entete p { color: var(--encre-2); font-size: 13px; margin-top: 3px; }
.groupe-corps { padding: 18px 22px 22px; }
.groupe-pied { padding: 14px 22px; border-top: 1px solid var(--filet); display: flex; justify-content: flex-end; gap: 10px; background: var(--fond-doux); border-radius: 0 0 var(--r-l) var(--r-l); }
.rangee { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 14px 22px; }
.rangee + .rangee { border-top: 1px solid var(--filet); }
.rangee-texte strong { display: block; font-weight: 500; }
.rangee-texte span { font-size: 13px; color: var(--encre-2); }
.cles { display: grid; grid-template-columns: minmax(130px, max-content) 1fr; gap: 10px 24px; font-size: 13.5px; margin: 0; }
.cles dt { color: var(--encre-2); }
.cles dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }

.visuellement-cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
select[data-remplir-service] { margin-top: 8px; }

.vide-grand { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 48px 24px 56px; border-radius: var(--r-xl); background: var(--fond-doux); box-shadow: inset 0 0 0 1px var(--filet); }
.vide-grand .schema { width: 100%; max-width: 420px; margin-bottom: 18px; }
.vide-grand h2 { font-size: 20px; letter-spacing: -.02em; }
.vide-grand p { color: var(--encre-2); max-width: 440px; margin-bottom: 10px; }
.valeur-droite { text-align: right; font-size: 13.5px; }
.champ-date { width: auto; min-width: 170px; }
.espace-haut { margin-top: 16px; }
form.relier { display: flex; gap: 8px; align-items: center; }
form.relier select { width: 220px; height: 34px; }
.rangee .segments { flex: none; }

.rangee-champs { align-items: flex-start; }
.paire { display: flex; gap: 8px; flex: 0 1 380px; }
.paire select { flex: 0 0 160px; }
.champ-unite { display: flex; align-items: center; gap: 10px; }
.champ-unite input { width: 110px; }
.champ-unite span { color: var(--encre-2); }
.liste.equipe { padding: 4px 22px 8px; }
.groupe .liste .texte span { font-weight: 400; }
.liste.equipe li.inactif { opacity: .55; }
details.repli.repli-groupe { margin: 0; border-top: 1px solid var(--filet); }
details.repli.repli-groupe > summary { padding: 14px 22px; color: var(--accent); font-size: 13.5px; }
details.repli.repli-groupe > .repli-corps { padding: 0 22px 22px; }

/* Contrôle segmenté */
.segments { display: inline-flex; padding: 3px; border-radius: 10px; background: var(--gris-doux); gap: 2px; }
.segments label { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 14px; border-radius: 8px; font-size: 13px; font-weight: 500; color: var(--encre-2); cursor: pointer; }
.segments input { position: absolute; opacity: 0; pointer-events: none; }
.segments label:has(input:checked) { background: var(--fond); color: var(--encre); box-shadow: 0 1px 2px rgba(10, 37, 64, .1), 0 0 0 .5px rgba(10, 37, 64, .06); }
.segments label:has(input:focus-visible) { box-shadow: var(--anneau); }

/* Cartes de choix */
.choix { display: grid; gap: 10px; }
.choix-carte { position: relative; display: flex; gap: 14px; align-items: flex-start; padding: 16px; border-radius: var(--r-l); cursor: pointer; box-shadow: 0 0 0 1px var(--bord); transition: box-shadow .12s, background .12s; }
.choix-carte:hover { box-shadow: 0 0 0 1px #c9cdd6, var(--ombre-1); }
.choix-carte input { position: absolute; opacity: 0; pointer-events: none; }
.choix-carte .coche { width: 18px; height: 18px; border-radius: 50%; flex: none; margin-top: 1px; box-shadow: inset 0 0 0 1.5px #c3c8d2; transition: box-shadow .12s; }
.choix-carte:has(input:checked) { box-shadow: 0 0 0 1.5px var(--accent); background: #fbfbff; }
.choix-carte:has(input:checked) .coche { box-shadow: inset 0 0 0 5.5px var(--accent); }
.choix-carte:has(input:focus-visible) { box-shadow: 0 0 0 1.5px var(--accent), var(--anneau); }
.choix-carte strong { display: block; font-weight: 600; font-size: 14px; }
.choix-carte span { color: var(--encre-2); font-size: 13px; font-weight: 400; }
.choix-carte:has(input:disabled) { opacity: .5; cursor: not-allowed; box-shadow: 0 0 0 1px var(--filet); }

/* Interrupteur */
.interrupteur { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; }
.interrupteur input { appearance: none; -webkit-appearance: none; flex: none; width: 36px; height: 22px; margin: 0; border-radius: 11px; background: #d9dce3; position: relative; cursor: pointer; transition: background .16s; }
.interrupteur input::after { content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(10, 37, 64, .25); transition: transform .18s cubic-bezier(.2, .7, .2, 1); }
.interrupteur input:checked { background: var(--accent); }
.interrupteur input:checked::after { transform: translateX(14px); }
.interrupteur input:focus-visible { box-shadow: var(--anneau); }
.interrupteur strong { display: block; font-weight: 500; font-size: 14px; color: var(--encre); }
.interrupteur span { display: block; color: var(--encre-2); font-size: 13px; font-weight: 400; }
.case { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; font-weight: 400; cursor: pointer; }
.case input { width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--accent); flex: none; }

/* --------------------------------------------------------------------------
   Messages, encadrés
   -------------------------------------------------------------------------- */
.message { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--r-l); margin-bottom: 18px; font-size: 13.5px; }
.message svg { margin-top: 1px; }
.message-ok { background: var(--vert-doux); color: #0b5e33; }
.message-info { background: var(--bleu-doux); color: #1b4398; }
.message-erreur { background: var(--rouge-doux); color: #9b1733; }
.encadre { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; border-radius: var(--r-l); margin: 0 0 24px; }
.encadre .encadre-icone { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; flex: none; }
.encadre strong { display: block; font-weight: 600; margin-bottom: 2px; }
.encadre p, .encadre li { font-size: 13.5px; }
.encadre ul { margin: 6px 0 0; padding-left: 18px; }
.encadre li + li { margin-top: 3px; }
.encadre-attention { background: var(--ambre-doux); color: #5c3500; }
.encadre-attention .encadre-icone { background: rgba(140, 79, 0, .1); color: var(--ambre); }
.encadre-danger { background: var(--rouge-doux); color: #8a1530; }
.encadre-danger .encadre-icone { background: rgba(194, 31, 64, .1); color: var(--rouge); }
.encadre-info { background: var(--bleu-doux); color: #1b4398; }
.encadre-info .encadre-icone { background: rgba(36, 89, 214, .1); color: var(--bleu); }
.encadre-neutre { background: var(--fond-doux); color: var(--encre-2); box-shadow: inset 0 0 0 1px var(--filet); }
.encadre-neutre .encadre-icone { background: var(--gris-doux); color: var(--gris); }
.encadre .actions { margin-left: auto; align-self: center; }
.bandeau-mode { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--encre-2); margin-bottom: 26px; }
.bandeau-mode a { font-weight: 500; }

/* Repliables */
details.repli { border-top: 1px solid var(--filet); }
details.repli > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 0; font-weight: 500; }
details.repli > summary::-webkit-details-marker { display: none; }
details.repli > summary::after { content: ''; width: 8px; height: 8px; border-right: 1.6px solid var(--encre-3); border-bottom: 1.6px solid var(--encre-3); transform: rotate(45deg) translate(-2px, -2px); transition: transform .18s; }
details.repli[open] > summary::after { transform: rotate(225deg) translate(-2px, -2px); }
details.repli > .repli-corps { padding: 0 0 20px; }

/* --------------------------------------------------------------------------
   Mise en page en deux colonnes (détail d'une facture)
   -------------------------------------------------------------------------- */
.colonnes { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 48px; align-items: start; }
.colonne-cote .bloc + .bloc { margin-top: 28px; }
.bloc h2 { font-size: 14px; margin-bottom: 12px; }
.bloc .cles { grid-template-columns: 1fr; gap: 2px; }
.bloc .cles dt { font-size: 12.5px; color: var(--encre-3); margin-top: 10px; }
.bloc .cles dt:first-child { margin-top: 0; }

/* Totaux sous les lignes */
.totaux { display: grid; grid-template-columns: 1fr auto; gap: 6px 32px; margin: 14px 0 0 auto; max-width: 300px; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.totaux dt { color: var(--encre-2); }
.totaux dd { margin: 0; text-align: right; }
.totaux dt:last-of-type, .totaux dd:last-of-type { font-weight: 600; color: var(--encre); padding-top: 6px; border-top: 1px solid var(--filet); }
.totaux-saisie { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 860px) { .totaux-saisie { grid-template-columns: 1fr 1fr; } }
.actions-secondaires { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--filet); }
.liste-simple { margin: 0; padding-left: 18px; color: var(--encre-2); font-size: 13.5px; }
.liste-simple li + li { margin-top: 4px; }
details.repli-compact { border-top: 0; margin-top: 10px; }
details.repli-compact > summary { padding: 6px 0; font-size: 13px; color: var(--accent); }
details.repli-compact > .repli-corps { display: flex; flex-direction: column; gap: 10px; padding-bottom: 4px; }
details.repli-compact .actions-formulaire { margin-top: 4px; }
.lien-bloc { margin-top: 12px; font-size: 13px; }
.lien-bloc a { display: inline-flex; align-items: center; gap: 4px; }
.colonne-principale > .section:first-child, .colonne-principale > details:first-child + .section { margin-top: 0; }

/* Chronologie */
.chrono { list-style: none; margin: 0; padding: 0; position: relative; }
.chrono li { position: relative; padding: 0 0 18px 26px; }
.chrono li::before { content: ''; position: absolute; left: 5px; top: 7px; width: 8px; height: 8px; border-radius: 50%; background: #c3c8d2; box-shadow: 0 0 0 3px var(--fond); }
.chrono li::after { content: ''; position: absolute; left: 8.5px; top: 18px; bottom: 0; width: 1px; background: var(--filet); }
.chrono li:last-child::after { display: none; }
.chrono li.fait::before { background: var(--vert); }
.chrono li.alerte::before { background: var(--rouge); }
.chrono li.courant::before { background: var(--accent); box-shadow: 0 0 0 3px var(--fond), 0 0 0 6px var(--accent-doux); }
.chrono strong { display: block; font-weight: 500; font-size: 13.5px; }
.chrono span { font-size: 12.5px; color: var(--encre-3); }

/* Dépôt de fichiers */
.depot-fichiers { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; min-height: 220px; padding: 32px; border-radius: var(--r-xl); background: var(--fond-doux); box-shadow: inset 0 0 0 1.5px var(--bord); cursor: pointer; transition: background .15s, box-shadow .15s; }
.depot-fichiers:hover, .depot-fichiers.survol { background: #f4f5ff; box-shadow: inset 0 0 0 1.5px var(--accent); }
.depot-fichiers input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.depot-fichiers .depot-icone { width: 48px; height: 48px; border-radius: 14px; background: var(--fond); display: grid; place-items: center; color: var(--accent); box-shadow: 0 0 0 1px var(--filet), var(--ombre-2); }
.depot-fichiers strong { font-size: 15px; font-weight: 600; }
.depot-fichiers span { color: var(--encre-2); font-size: 13px; }
.depot-fichiers.depot-compact { min-height: 150px; padding: 24px; }
.progression { display: flex; align-items: center; gap: 14px; }
.progression progress.jauge { flex: 1; margin: 0; height: 6px; }
.utilisateur-texte { min-width: 0; }

/* --------------------------------------------------------------------------
   Schéma « Stripe — Passerelle — Chorus Pro »
   -------------------------------------------------------------------------- */
.schema { display: grid; grid-template-columns: auto 1fr auto 1fr auto; align-items: center; gap: 10px; }
.schema-noeud { display: flex; flex-direction: column; align-items: center; gap: 7px; font-size: 12px; font-weight: 500; color: var(--encre-2); }
.schema-pastille { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--fond); color: var(--encre-3); box-shadow: 0 0 0 1px var(--filet), var(--ombre-1); transition: color .3s, box-shadow .3s; }
.schema-noeud.ok .schema-pastille { color: var(--encre); box-shadow: 0 0 0 1px var(--bord), var(--ombre-2); }
.schema-noeud.schema-centre .schema-pastille { background: var(--encre); color: #fff; box-shadow: var(--ombre-2); }
.schema-liaison { position: relative; height: 2px; margin-bottom: 26px; background-image: linear-gradient(90deg, #cfd3db 50%, transparent 50%); background-size: 8px 2px; border-radius: 2px; }
.schema-liaison.ok { background: var(--accent); }
.schema-liaison.ok::after { content: ''; position: absolute; top: -2px; left: 0; width: 6px; height: 6px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px var(--accent); animation: circuler 2.6s cubic-bezier(.45, 0, .55, 1) infinite; }
.schema-liaison.ok.retour::after { animation-direction: reverse; }

/* Variante verticale (colonne du parcours) */
.schema-vertical { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
.schema-vertical .schema-noeud { flex-direction: row; align-items: center; gap: 12px; font-size: 13px; color: var(--encre); }
.schema-vertical .schema-pastille { width: 36px; height: 36px; border-radius: 11px; }
.schema-vertical .schema-etat { margin-left: auto; font-size: 12px; font-weight: 400; color: var(--encre-3); }
.schema-vertical .schema-noeud.ok .schema-etat { color: var(--vert); }
.schema-vertical .schema-liaison { width: 2px; height: 26px; margin: 4px 0 4px 17px; background-image: linear-gradient(180deg, #cfd3db 50%, transparent 50%); background-size: 2px 7px; }
.schema-vertical .schema-liaison.ok { background: var(--accent); }
.schema-vertical .schema-liaison.ok::after { top: 0; left: -2px; animation: circuler-v 2.4s cubic-bezier(.45, 0, .55, 1) infinite; }
.schema-titre { font-size: 11.5px; font-weight: 500; color: var(--encre-3); margin-bottom: 12px; }

/* --------------------------------------------------------------------------
   Parcours de mise en route
   -------------------------------------------------------------------------- */
.parcours { background: var(--fond); }
.parcours-haut { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; height: 64px; padding: 0 28px; background: rgba(255, 255, 255, .86); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid var(--filet); }
.parcours-corps { display: grid; grid-template-columns: 300px minmax(0, 1fr); min-height: calc(100vh - 64px); }
.parcours-gauche { padding: 40px 28px; border-right: 1px solid var(--filet); background: var(--fond-doux); display: flex; flex-direction: column; gap: 36px; }
.etapes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.etapes li { position: relative; }
.etapes li:not(:last-child)::after { content: ''; position: absolute; left: 13px; top: 36px; height: calc(100% - 32px); width: 1.5px; background: var(--filet); }
.etapes li.fait:not(:last-child)::after { background: var(--accent); opacity: .35; }
.etapes a { display: flex; align-items: center; gap: 12px; padding: 6px 0 22px; color: var(--encre-2); font-weight: 500; font-size: 14px; }
.etapes a:hover { color: var(--encre); }
.etape-num { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; flex: none; font-size: 12.5px; font-weight: 600; background: var(--fond); color: var(--encre-3); box-shadow: inset 0 0 0 1.5px var(--bord); }
.etapes li.fait .etape-num { background: var(--accent); color: #fff; box-shadow: none; }
.etapes li.ignore .etape-num { background: var(--gris-doux); box-shadow: none; }
.etapes li.courant a { color: var(--encre); }
.etapes li.courant .etape-num { box-shadow: inset 0 0 0 1.5px var(--accent), 0 0 0 4px var(--accent-doux); color: var(--accent); background: var(--fond); }
.etape-etat { margin-left: auto; font-size: 12px; font-weight: 400; color: var(--encre-3); }
.parcours-droite { padding: 56px 64px 96px; }
.parcours-contenu { max-width: 600px; animation: apparaitre .36s cubic-bezier(.2, .7, .2, 1) both; }
.surtitre { font-size: 13px; font-weight: 500; color: var(--accent); margin-bottom: 10px; }
.parcours-contenu h1 { font-size: 32px; letter-spacing: -.034em; margin-bottom: 10px; }
.chapeau { font-size: 15.5px; line-height: 1.55; color: var(--encre-2); margin-bottom: 32px; }
.sous-etapes { list-style: none; margin: 0 0 28px; padding: 0; counter-reset: se; border-radius: var(--r-l); box-shadow: 0 0 0 1px var(--filet); }
.sous-etapes li { counter-increment: se; display: flex; gap: 14px; padding: 16px 18px; }
.sous-etapes li + li { border-top: 1px solid var(--filet); }
.sous-etapes li::before { content: counter(se); width: 22px; height: 22px; border-radius: 50%; flex: none; display: grid; place-items: center; font-size: 12px; font-weight: 600; background: var(--gris-doux); color: var(--encre-2); margin-top: 1px; }
.sous-etapes strong { display: block; font-weight: 600; font-size: 13.5px; }
.sous-etapes p { color: var(--encre-2); font-size: 13px; margin-top: 2px; }
.sous-etapes a { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 500; margin-top: 6px; }
.reussite { display: flex; gap: 16px; align-items: center; padding: 18px 20px; border-radius: var(--r-l); background: var(--vert-doux); margin-bottom: 28px; }
.reussite .rond { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--vert); color: #fff; flex: none; }
.reussite strong { display: block; font-weight: 600; color: #0b5e33; }
.reussite span { font-size: 13px; color: #2d6e4b; }
.navigation-parcours { display: flex; align-items: center; gap: 12px; margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--filet); }
.navigation-parcours .bouton-principal { margin-left: auto; }
.recapitulatif { list-style: none; margin: 0 0 28px; padding: 0; border-radius: var(--r-l); box-shadow: 0 0 0 1px var(--filet); }
.recapitulatif li { display: flex; align-items: center; gap: 12px; padding: 14px 18px; }
.recapitulatif li + li { border-top: 1px solid var(--filet); }
.recapitulatif .valeur { margin-left: auto; color: var(--encre-2); font-size: 13px; text-align: right; }

/* --------------------------------------------------------------------------
   Pages simples (connexion, erreur)
   -------------------------------------------------------------------------- */
.simple { min-height: 100vh; display: grid; place-items: center; align-content: center; gap: 18px; padding: 24px;
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(99, 91, 255, .08), transparent 60%),
    radial-gradient(800px 500px at 100% 100%, rgba(10, 37, 64, .04), transparent 60%),
    var(--fond-doux); }
.carte-simple { width: 100%; max-width: 400px; padding: 40px 36px 36px; border-radius: 20px; background: var(--fond); box-shadow: 0 0 0 1px var(--filet), var(--ombre-3); animation: apparaitre .4s cubic-bezier(.2, .7, .2, 1) both; }
.carte-simple .marque { width: 40px; height: 40px; border-radius: 11px; margin-bottom: 22px; }
.carte-simple h1 { font-size: 24px; margin-bottom: 6px; }
.carte-simple .chapeau { font-size: 14px; margin-bottom: 26px; }
.carte-simple .bouton { margin-top: 22px; }

/* --------------------------------------------------------------------------
   Animations
   -------------------------------------------------------------------------- */
@keyframes apparaitre { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes circuler-v { 0% { top: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { top: calc(100% - 6px); opacity: 0; } }
@keyframes circuler { 0% { left: 0; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { left: calc(100% - 6px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* PDF */
.apercu-pdf { width: 100%; height: 720px; border: 0; border-radius: var(--r-l); box-shadow: 0 0 0 1px var(--filet); background: var(--fond-doux); }

/* --------------------------------------------------------------------------
   Écrans étroits
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .colonnes { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .parcours-droite { padding: 40px 36px 80px; }
}
@media (max-width: 860px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .laterale { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 16px; border-right: 0; border-bottom: 1px solid var(--filet); }
  .espace { padding: 6px 10px; }
  .nav { order: 3; width: 100%; flex-direction: row; overflow-x: auto; gap: 4px; }
  .nav a { flex: none; height: 32px; }
  .nav-titre { display: none; }
  .laterale-bas { margin: 0 0 0 auto; flex-direction: row; }
  .mise-en-route, .utilisateur-texte, .laterale-legal { display: none; }
  .utilisateur { padding: 0; }
  .espace { box-shadow: none; background: transparent; padding: 0 4px; }
  .nav, .etapes { scrollbar-width: none; }
  .nav::-webkit-scrollbar, .etapes::-webkit-scrollbar { display: none; }
  .page { padding: 24px 18px 56px; }
  .chiffres { grid-template-columns: 1fr 1fr; }
  .chiffre { padding: 16px 12px 16px 0; }
  .chiffre:nth-child(3) { padding-left: 0; }
  .chiffre:nth-child(3)::before { display: none; }
  .chiffre:nth-child(n+3) { border-top: 1px solid var(--filet); }
  .chiffre-valeur { font-size: 21px; }
  .grille-champs { grid-template-columns: minmax(0, 1fr); } /* 1fr seul s'élargirait au tableau des lignes */
  .rangee { flex-direction: column; align-items: flex-start; }
  .paire { width: 100%; flex-basis: auto; }
  .valeur-droite { text-align: left; }
  form.relier select { width: 100%; }
  .liste .fin { flex-wrap: wrap; }
  .liste:not(.activite) > li { flex-wrap: wrap; }
  .liste:not(.activite) .texte { flex: 1 1 calc(100% - 46px); }
  .liste:not(.activite) .fin { width: calc(100% - 46px); margin-left: 46px; justify-content: flex-start; }
  form.relier { flex: 1 1 auto; min-width: 0; }
  form.relier select { flex: 1 1 auto; min-width: 0; }
  .parcours-corps { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; align-content: start; }
  .parcours-schema { display: none; }
  .parcours-gauche { padding: 18px; border-right: 0; border-bottom: 1px solid var(--filet); gap: 18px; }
  .etapes { flex-direction: row; overflow-x: auto; gap: 14px; }
  .etapes li::after { display: none; }
  .etapes a { padding: 0; white-space: nowrap; font-size: 13px; }
  .etape-etat { display: none; }
  .parcours-gauche .schema { display: none; }
  .parcours-droite { padding: 28px 18px 64px; }
  .parcours-contenu h1 { font-size: 26px; }
  .recherche input { width: 100%; }
  .filtres { flex-direction: column; align-items: stretch; }
  .cles { grid-template-columns: 1fr; gap: 2px 0; }
  .cles dt { margin-top: 8px; }
  .apercu-pdf { height: 520px; }
}
@media print {
  .laterale, .actions, .retour, form { display: none !important; }
  .app { display: block; }
}

/* --------------------------------------------------------------------------
   Souscriptions : bouton « S'abonner avec Chorus Pro »
   -------------------------------------------------------------------------- */
.integration {
  display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 8px; padding: 8px;
  border-radius: var(--r-l); background: var(--fond); box-shadow: 0 0 0 1px var(--filet), var(--ombre-1);
}
.integration-code { min-width: 0; padding: 14px 14px 0; }
.integration-etape { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font-weight: 500; }
.integration-etape span {
  flex: none; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%;
  background: var(--encre); color: #fff; font-size: 11px; font-weight: 600;
}
.integration-etape + .bloc-code, .integration-etape + .champ-bouton { margin-bottom: 22px; }
.bloc-code { position: relative; border-radius: var(--r); background: var(--encre); }
.bloc-code pre {
  margin: 0; padding: 15px 104px 15px 16px; overflow-x: auto;
  font: 12.5px/1.65 var(--mono); color: #dfe3ee; white-space: pre-wrap; overflow-wrap: anywhere;
}
.bloc-code .bouton { position: absolute; top: 9px; right: 9px; background: rgba(255, 255, 255, .08); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); }
.bloc-code .bouton:hover { background: rgba(255, 255, 255, .16); color: #fff; }
.bouton-petit { height: 28px; padding: 0 10px; gap: 6px; font-size: 12.5px; }
details.repli.repli-integration { margin: 0 -14px; padding: 0 14px; }
.repli-integration code { padding: 1px 5px; border-radius: 4px; background: var(--fond-doux); box-shadow: inset 0 0 0 1px var(--filet); font-size: 12px; }
.repli-integration .cles { grid-template-columns: minmax(120px, max-content) 1fr; }
.integration-apercu {
  display: flex; flex-direction: column; min-width: 0; border-radius: var(--r);
  background-color: var(--fond-doux);
  background-image: radial-gradient(circle at 1px 1px, #d9dce5 1px, transparent 0);
  background-size: 14px 14px;
}
.integration-apercu-titre { padding: 12px 14px 0; font-size: 12px; font-weight: 500; color: var(--encre-3); }
.integration-apercu-scene { flex: 1; display: grid; place-items: center; min-height: 150px; padding: 22px 16px; }
.integration-apercu-note { padding: 0 14px 2px; font-size: 12.5px; color: var(--encre-2); text-align: center; }
.integration-apercu-note:last-child { padding-bottom: 14px; }
.presentation-bouton { gap: 12px; }
/* Un bouton par offre Stripe */
.carte-bouton { margin-bottom: 20px; scroll-margin-top: 24px; }
.carte-bouton-entete { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 2px 10px; }
.carte-bouton-titre { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; min-width: 0; }
.carte-bouton-titre strong { font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.carte-bouton-actions { display: flex; align-items: center; gap: 8px; flex: none; }
.carte-bouton:target .integration { box-shadow: 0 0 0 1.5px var(--accent), var(--anneau); }
.carte-bouton ~ details.repli.repli-integration { margin: 0; padding: 0 2px; }
.cellule-action { text-align: right; white-space: nowrap; }
.nowrap { white-space: nowrap; }
.nowrap .sous-cellule { white-space: normal; }
.choix-ligne { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.maquette-bouton { margin-bottom: 12px; padding: 26px 36px; border-radius: var(--r-l); background: var(--fond); box-shadow: 0 0 0 1px var(--filet), var(--ombre-2); }
.maquette-bouton-rendu {
  display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 22px 0 18px; border-radius: 10px;
  background: var(--encre); color: #fff; font-size: 15px; font-weight: 600; letter-spacing: -.01em;
  box-shadow: 0 1px 2px rgba(10, 37, 64, .14), 0 8px 20px rgba(10, 37, 64, .12);
}
.points-bouton { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; margin: 2px 0 18px; padding: 0; list-style: none; font-size: 13px; color: var(--encre-2); }
.points-bouton li { display: inline-flex; align-items: center; gap: 7px; }
.points-bouton svg { color: var(--encre-3); }
.sous-cellule { display: block; margin-top: 1px; font-size: 12.5px; color: var(--encre-3); }
.tableau .sous-cellule.mono { color: var(--encre-3); font-size: 12px; }
.champ-couleur { display: flex; align-items: center; gap: 10px; height: 40px; }
.champ-couleur input[type=color] { width: 46px; height: 36px; padding: 3px; border: 1px solid var(--bord); border-radius: var(--r-s); background: var(--fond); cursor: pointer; }
.champ-couleur input[type=color]::-webkit-color-swatch-wrapper { padding: 0; }
.champ-couleur input[type=color]::-webkit-color-swatch { border: 0; border-radius: 4px; }
.champ-couleur input[type=color]::-moz-color-swatch { border: 0; border-radius: 4px; }
.reglages-bouton + .groupe { margin-top: 24px; }
.groupe-cles { padding: 16px 22px 20px; }
.groupe-decision { margin-bottom: 24px; }
.actions-ligne { flex: none; display: flex; align-items: center; gap: 8px; }
.repli-refus { position: relative; }
.repli-refus > summary { list-style: none; }
.repli-refus > summary::-webkit-details-marker { display: none; }
.repli-refus[open] > summary { background: var(--survol); color: var(--encre); }
.refus {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 5; display: flex; gap: 8px; width: 400px; max-width: 80vw; padding: 10px;
  border-radius: var(--r-l); background: var(--fond); box-shadow: 0 0 0 1px var(--filet), var(--ombre-3);
}
.refus input { flex: 1; min-width: 0; }
@media (max-width: 900px) {
  .integration { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .tableau .col-secondaire { display: none; }
  .bloc-code pre { padding-right: 16px; padding-top: 48px; }
  .groupe-decision .rangee { flex-direction: column; align-items: stretch; }
  .actions-ligne { justify-content: flex-end; }
  .refus { right: auto; left: 0; }
}

/* --------------------------------------------------------------------------
   Guides pas à pas (tâches sur un site partenaire : PISTE, Chorus Pro, Stripe)
   -------------------------------------------------------------------------- */
.sous-etape-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin-top: 10px; }
.sous-etapes .sous-etape-actions a { margin-top: 0; }
.aide-guides { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 16px; font-size: 13px; color: var(--encre-2); }
.aide-guides .lien-bouton, .indication .lien-bouton, .aide .lien-bouton { display: inline-flex; align-items: center; gap: 5px; font-weight: 500; }
.lien-bouton .icone { flex: none; }
body:has(dialog.guide[open]) { overflow: hidden; }

dialog.guide {
  width: min(640px, calc(100vw - 32px)); max-height: min(88vh, 900px); padding: 0; border: 0; border-radius: var(--r-xl);
  background: var(--fond); color: var(--encre); box-shadow: 0 2px 8px rgba(10, 37, 64, .08), 0 32px 80px rgba(10, 37, 64, .24);
  overflow: hidden; flex-direction: column;
}
dialog.guide[open] { display: flex; animation: guide-entree .24s cubic-bezier(.2, .8, .2, 1); }
dialog.guide::backdrop { background: rgba(10, 37, 64, .42); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
dialog.guide.guide-a-gauche { margin-left: 24px; margin-right: auto; }
dialog.guide.guide-a-gauche::backdrop { background: rgba(10, 37, 64, .12); backdrop-filter: none; -webkit-backdrop-filter: none; }
@keyframes guide-entree { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }

.guide-tete { flex: none; padding: 20px 24px 14px; border-bottom: 1px solid var(--filet); }
.guide-tete-ligne { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.guide-tete form { margin: 0; }
.guide-site { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--encre); }
.guide-site-icone { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: var(--fond-doux); color: var(--encre-2); box-shadow: inset 0 0 0 1px var(--filet); }
.guide-adresse { font-weight: 400; color: var(--encre-3); }
.guide-adresse::before { content: '·'; margin: 0 6px 0 2px; }
.guide-fermer { display: grid; place-items: center; width: 32px; height: 32px; margin-right: -6px; border: 0; border-radius: 8px; background: none; color: var(--encre-3); cursor: pointer; }
.guide-fermer:hover { background: var(--survol); color: var(--encre); }
.guide-fermer:focus-visible { outline: none; box-shadow: var(--anneau); }
.guide-tete h2:focus { outline: none; }
.guide-tete h2 { margin-top: 12px; font-size: 20px; letter-spacing: -.02em; }
.guide-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; margin-top: 4px; font-size: 12.5px; color: var(--encre-3); }
.guide-meta span, .guide-meta a { display: inline-flex; align-items: center; gap: 5px; }
.guide-avancement { display: flex; align-items: center; gap: 10px; margin-top: 12px; font-size: 12px; color: var(--encre-3); font-variant-numeric: tabular-nums; }
.guide-avancement .jauge { flex: 1; }

.guide-corps { flex: 1; min-height: 0; overflow-y: auto; padding: 18px 24px 8px; overscroll-behavior: contain; }
.guide-chapeau { color: var(--encre-2); }
.guide-video { margin: 14px 0 6px; border-radius: var(--r-l); overflow: hidden; background: var(--fond-doux); box-shadow: 0 0 0 1px var(--filet); }
.guide-video video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; }
.guide-prealables { margin-top: 14px; padding: 12px 14px; border-radius: var(--r); background: var(--fond-doux); box-shadow: inset 0 0 0 1px var(--filet); font-size: 13px; }
.guide-prealables strong { display: block; font-weight: 600; margin-bottom: 4px; }
.guide-prealables ul { margin: 0; padding-left: 18px; color: var(--encre-2); }
.guide-prealables li + li { margin-top: 3px; }

.guide-etapes { list-style: none; margin: 18px 0 0; padding: 0; }
.guide-etape { display: flex; gap: 14px; padding: 14px 0; }
.guide-etape + .guide-etape { border-top: 1px solid var(--filet); }
.guide-coche { position: relative; flex: none; width: 26px; height: 26px; margin-top: -1px; cursor: pointer; }
.guide-coche input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.guide-numero {
  display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: var(--gris-doux); color: var(--encre-2); font-size: 12px; font-weight: 600; transition: background-color .15s, color .15s;
}
.guide-coche:hover .guide-numero { background: var(--accent-doux); color: var(--accent); }
.guide-coche input:focus-visible + .guide-numero { box-shadow: var(--anneau); }
.guide-coche input:checked + .guide-numero { background: var(--vert); color: #fff; font-size: 0; }
.guide-coche input:checked + .guide-numero::after {
  content: ''; width: 10px; height: 5px; margin-top: -2px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg);
}
.guide-etape:has(input:checked) .guide-etape-titre { color: var(--encre-3); }
.guide-etape-contenu { min-width: 0; flex: 1; }
.guide-etape-titre { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; }
.guide-facultatif { padding: 1px 7px; border-radius: 999px; background: var(--gris-doux); color: var(--encre-2); font-size: 11.5px; font-weight: 500; }
.guide-etape-contenu > p { margin-top: 3px; color: var(--encre-2); font-size: 13.5px; }
.guide-etape-contenu strong:not(.guide-etape-titre) { color: var(--encre); font-weight: 600; }

.guide-champs { display: grid; gap: 8px; margin: 10px 0 0; }
.guide-champ { padding: 10px 12px; border-radius: var(--r); background: var(--fond-doux); box-shadow: inset 0 0 0 1px var(--filet); }
.guide-champ dt { font-size: 12px; font-weight: 500; color: var(--encre-3); }
.guide-champ dd { margin: 2px 0 0; display: flex; flex-direction: column; gap: 4px; }
.guide-valeur { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.guide-valeur .mono { font-size: 13.5px; color: var(--encre); overflow-wrap: anywhere; }
.guide-aide { font-size: 12.5px; color: var(--encre-2); }

.guide-droits { list-style: none; margin: 10px 0 0; padding: 0; border-radius: var(--r); box-shadow: 0 0 0 1px var(--filet); }
.guide-droits li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 12px; font-size: 13.5px; }
.guide-droits li + li { border-top: 1px solid var(--filet); }
.guide-anglais { color: var(--encre-3); font-size: 12.5px; margin-left: 4px; }

.guide-liens { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 8px; }
.guide-liens a { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 500; }
.guide-note { display: flex; gap: 8px; margin: 6px 0 12px; padding: 10px 12px; border-radius: var(--r); background: var(--bleu-doux); color: #1d3f8f; font-size: 13px; }
.guide-note .icone { margin-top: 2px; }

.guide-pied {
  flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap;
  padding: 14px 24px; border-top: 1px solid var(--filet); background: var(--fond-doux);
}
.guide-retour { display: flex; align-items: flex-start; gap: 7px; flex: 1 1 260px; font-size: 12.5px; color: var(--encre-2); }
.guide-retour .icone { margin-top: 2px; color: var(--encre-3); }
.guide-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.guide-actions form { margin: 0; }

@media (max-width: 640px) {
  dialog.guide { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0; }
  dialog.guide.guide-a-gauche { margin: 0; }
  .guide-tete { padding: 16px 18px 12px; }
  .guide-corps { padding: 16px 18px 8px; }
  .guide-pied { padding: 12px 18px calc(12px + env(safe-area-inset-bottom)); }
  .guide-actions { width: 100%; }
  .guide-actions form, .guide-actions .bouton-principal { flex: 1; }
  .guide-actions .bouton-principal { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { dialog.guide[open] { animation: none; } }

/* Logo Mistral AI : fichier officiel, sur fond blanc ou neutre, sans cadre ; sa marge est dans le fichier (mistral.ai/brand). */
.logo-mistral { display: inline-block; vertical-align: middle; flex: none; }
.par-mistral { display: inline-flex; align-items: center; gap: 2px; white-space: nowrap; color: var(--encre); font-weight: 500; }
.indication .par-mistral { margin-right: 1px; }
/* Dans un titre d'interrupteur ou de chronologie, la mention suit le titre (pas le style des sous-textes). */
.interrupteur .par-mistral, .chrono .par-mistral { display: inline-flex; color: inherit; font-size: inherit; font-weight: inherit; }

/* Liens sous un formulaire (connexion, mot de passe oublié) et page d'erreur */
.lien-bas { margin-top: 18px; text-align: center; font-size: 13.5px; }
.page-erreur .aide { margin-top: 6px; }
.actions-erreur { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }

/* Fenêtre de confirmation (à la place de celle du navigateur) */
dialog.confirmation { border: 0; border-radius: var(--r-xl); padding: 24px; width: min(440px, calc(100vw - 32px)); box-shadow: var(--ombre-3); color: var(--encre); background: var(--fond); }
dialog.confirmation[open] { animation: guide-entree .2s cubic-bezier(.2, .8, .2, 1); }
dialog.confirmation::backdrop { background: rgba(10, 37, 64, .38); }
.confirmation-texte { margin: 0 0 22px; font-size: 15px; line-height: 1.5; }
.confirmation-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 10px; }
.bouton-danger-plein { background: var(--rouge); color: #fff; }
.bouton-danger-plein:hover { background: var(--rouge); color: #fff; filter: brightness(.94); }

/* --------------------------------------------------------------------------
   Inscription et abonnement
   -------------------------------------------------------------------------- */
.carte-simple.carte-large { max-width: 940px; padding: 40px 40px 36px; }
.inscription { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 44px; align-items: start; }
.inscription .chapeau { margin-bottom: 22px; }
.offres-choix { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; border: 0; min-width: 0; }
.offres-choix .choix-carte { align-items: center; }
.choix-carte .prix { margin-left: auto; text-align: right; white-space: nowrap; }
.choix-carte .prix strong { font-size: 18px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.choix-carte .prix span { display: block; font-size: 12px; color: var(--encre-3); }
.garanties { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 8px; font-size: 13px; color: var(--encre-2); }
.garanties li { display: flex; gap: 8px; align-items: center; }
.garanties .icone { color: var(--vert); flex: none; }
.inscription-etapes { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.inscription-etapes li { display: flex; gap: 12px; align-items: flex-start; }
.inscription-etapes strong { display: block; font-size: 14px; }
.inscription-etapes span:not(.inscription-puce) { display: block; font-size: 13px; color: var(--encre-2); }
.inscription-puce { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--accent-doux); color: var(--accent); font-size: 12.5px; font-weight: 600; }
.inscription-tarifs { margin-top: 26px; padding: 16px 18px; border-radius: var(--r-l); background: var(--fond-doux); box-shadow: inset 0 0 0 1px var(--filet); }
.inscription-tarifs ul { list-style: none; margin: 8px 0 10px; padding: 0; display: grid; gap: 6px; }
.inscription-tarifs li { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; color: var(--encre-2); }
.inscription-tarifs li strong { color: var(--encre); font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.inscription-tarifs li small { font-size: 11.5px; font-weight: 400; color: var(--encre-3); }
.inscription-compte { padding-top: 6px; }
.inscription-compte .champ + .champ { margin-top: 16px; }
.inscription-compte .case.cgv { margin-top: 18px; }
.indication.securite { text-align: center; margin-top: 12px; }
.piege { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.chiffres.chiffres-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.abonnement-courant { margin-bottom: 8px; }
.abonnement-resume { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding: 22px 22px 0; }
.abonnement-resume h2 { font-size: 20px; letter-spacing: -.02em; margin-top: 2px; }
.abonnement-resume .etiquette-aide { font-size: 12.5px; }
.abonnement-prix { color: var(--encre); font-weight: 500; margin-top: 4px; font-variant-numeric: tabular-nums; }
.abonnement-dates { display: grid; gap: 10px; margin: 0; font-size: 13px; text-align: right; }
.abonnement-dates dt { color: var(--encre-3); font-size: 12.5px; }
.abonnement-dates dd { margin: 0; color: var(--encre); font-weight: 500; }
.conso { padding: 20px 22px 22px; }
.conso-chiffres { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.conso-valeur { font-size: 30px; font-weight: 600; letter-spacing: -.03em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.conso-sur { color: var(--encre-2); }
.conso-reste { margin-left: auto; color: var(--encre-3); font-size: 13px; font-variant-numeric: tabular-nums; }
.conso progress.jauge { height: 8px; margin-top: 12px; }
.conso-note { margin-top: 10px; font-size: 13px; color: var(--encre-2); }
progress.jauge.jauge-ambre::-webkit-progress-value { background: #e39410; }
progress.jauge.jauge-ambre::-moz-progress-bar { background: #e39410; }
progress.jauge.jauge-rouge::-webkit-progress-value { background: var(--rouge); }
progress.jauge.jauge-rouge::-moz-progress-bar { background: var(--rouge); }

.offres-grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 18px; }
.offre { display: flex; flex-direction: column; gap: 12px; padding: 22px; border-radius: var(--r-l); background: var(--fond); box-shadow: 0 0 0 1px var(--filet), var(--ombre-1); }
.offre-actuelle { box-shadow: 0 0 0 1.5px var(--accent), var(--ombre-2); }
.offre-nom { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-weight: 600; }
.offre-prix { font-size: 30px; font-weight: 600; letter-spacing: -.03em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.offre-prix span { margin-left: 6px; font-size: 13px; font-weight: 400; letter-spacing: 0; color: var(--encre-2); }
.offre-volume { color: var(--encre-2); font-size: 13.5px; }
.offre-volume strong { color: var(--encre); font-weight: 600; }
.offre form { margin-top: auto; padding-top: 6px; }
.lien-icone { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.lien-icone + .lien-icone { margin-left: 12px; }
.aide-abonnement { list-style: none; padding: 0; margin-top: 12px; }
.aide-abonnement li + li { margin-top: 8px; }
.aide-abonnement strong { color: var(--encre); font-weight: 600; }
.mise-en-route .jauge-ambre, .mise-en-route .jauge-rouge { margin-top: 9px; }

@media (max-width: 860px) {
  .carte-simple.carte-large { padding: 30px 20px 26px; }
  .inscription { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .offres-grille { grid-template-columns: minmax(0, 1fr); }
  .abonnement-dates { text-align: left; }
  .conso-reste { margin-left: 0; width: 100%; }
}

/* --------------------------------------------------------------------------
   Fenêtre « offre » : ce qui débloque les dépôts réels (essai consommé,
   plafond atteint, abonnement terminé ou impayé), avec l'offre qui convient.
   -------------------------------------------------------------------------- */
dialog.fenetre-offre {
  width: min(720px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 22px 26px 20px; border: 0; border-radius: var(--r-xl);
  background: var(--fond); color: var(--encre); box-shadow: 0 2px 8px rgba(10, 37, 64, .08), 0 32px 80px rgba(10, 37, 64, .24); overflow-y: auto;
}
dialog.fenetre-offre:has(.fenetre-offre-choix-seule), dialog.fenetre-offre:not(:has(.fenetre-offre-choix)) { width: min(480px, calc(100vw - 32px)); }
dialog.fenetre-offre[open] { animation: guide-entree .24s cubic-bezier(.2, .8, .2, 1); }
dialog.fenetre-offre::backdrop { background: rgba(10, 37, 64, .42); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
body:has(dialog.fenetre-offre[open]) { overflow: hidden; }
.fenetre-offre-tete { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.fenetre-offre-tete form { margin: 0; }
.fenetre-offre-icone { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: var(--accent-doux); color: var(--accent); }
.fenetre-offre-icone-alerte { background: var(--ambre-doux); color: var(--ambre); }
dialog.fenetre-offre h2 { font-size: 21px; letter-spacing: -.02em; }
.fenetre-offre-texte { margin: 8px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--encre-2); }
.fenetre-offre-choix { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 20px; }
.fenetre-offre-choix-seule { grid-template-columns: minmax(0, 1fr); }
.fenetre-offre-carte { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 16px; border-radius: var(--r-l); box-shadow: 0 0 0 1px var(--filet); }
.fenetre-offre-carte-recommandee { box-shadow: 0 0 0 1.5px var(--accent), 0 8px 24px rgba(99, 91, 255, .12); }
.fenetre-offre-nom { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 14px; font-weight: 600; }
.fenetre-offre-nom .pastille { position: absolute; top: -11px; left: 14px; height: 22px; padding: 0 8px; font-size: 11.5px; box-shadow: 0 0 0 2px var(--fond); }
.fenetre-offre-prix { font-size: 26px; font-weight: 600; letter-spacing: -.03em; white-space: nowrap; }
.fenetre-offre-prix span { margin-left: 5px; font-size: 12.5px; font-weight: 400; letter-spacing: 0; color: var(--encre-3); }
.fenetre-offre-volume { font-size: 13px; color: var(--encre-2); }
.fenetre-offre-carte form { margin: auto 0 0; padding-top: 10px; }
.fenetre-offre-action { margin: 20px 0 0; }
.fenetre-offre-pied { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-top: 18px; font-size: 12.5px; color: var(--encre-3); }
.fenetre-offre-pied p { margin: 0; }
.fenetre-offre-liens { display: flex; align-items: center; gap: 16px; margin-left: auto; }
.fenetre-offre-liens form { margin: 0; }
.fenetre-offre-liens a, .fenetre-offre-liens .lien-bouton { font-size: 13px; }
@media (max-width: 640px) {
  dialog.fenetre-offre { padding: 16px 16px 14px; }
  dialog.fenetre-offre h2 { font-size: 19px; }
  .fenetre-offre-choix { grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 16px; }
  .fenetre-offre-carte { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 12px; padding: 12px 14px; }
  .fenetre-offre-carte .fenetre-offre-prix { grid-column: 2; grid-row: 1 / span 2; font-size: 20px; text-align: right; }
  .fenetre-offre-carte .fenetre-offre-prix span { display: block; margin: 0; }
  .fenetre-offre-carte form { grid-column: 1 / -1; padding-top: 8px; }
  .fenetre-offre-liens { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) { dialog.fenetre-offre[open] { animation: none; } }

/* --------------------------------------------------------------------------
   Téléphone : listes en cartes (au lieu de tableaux qui débordent), saisie
   des lignes empilée, encadrés dont le bouton passe sous le texte.
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .cadre-tableau:has(> .liste-mobile) { margin: 0; overflow: visible; }
  .liste-mobile thead { display: none; }
  .liste-mobile, .liste-mobile tbody { display: block; }
  .liste-mobile tr { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 10px; padding: 13px 0; border-bottom: 1px solid var(--filet); }
  .liste-mobile tbody tr:last-child { border-bottom: 0; }
  .liste-mobile td { display: block; padding: 0; border: 0; text-align: left; min-width: 0; }
  .liste-mobile tbody tr:hover td { background: none; }
  .liste-mobile td:first-child { padding-left: 0; }

  /* Factures : montant et statut, puis l'acheteur, puis numéro, date et origine. */
  .liste-factures td:nth-child(1) { order: 1; flex: 1 1 auto; font-size: 15px; }
  .liste-factures td:nth-child(2) { order: 2; }
  .liste-factures td:nth-child(4) { order: 3; flex: 1 1 100%; color: var(--encre); font-weight: 500; }
  .liste-factures td:nth-child(3), .liste-factures td:nth-child(5), .liste-factures td:nth-child(6) { order: 4; font-size: 12.5px; color: var(--encre-3); }
  .liste-factures td:nth-child(3) .principal-cellule { color: var(--encre-2); font-weight: 400; }
  #table-lot td:nth-child(5) { flex: 1 1 100%; }

  /* Imports : la date, puis l'avancement et le montant déposé. */
  .liste-lots td:nth-child(1) { order: 1; flex: 1 1 100%; }
  .liste-lots td:nth-child(3) { order: 2; }
  .liste-lots td:nth-child(4) { order: 3; margin-left: auto; font-weight: 600; }
  .liste-lots td:nth-child(2) { display: none; }

  /* Clients : le nom et Stripe, puis le SIRET et ce qu'exige l'acheteur. */
  .liste-clients td:nth-child(1) { order: 1; flex: 1 1 auto; }
  .liste-clients td:nth-child(4) { order: 2; }
  .liste-clients td:nth-child(2) { order: 3; flex: 1 1 100%; font-size: 12.5px; }
  .liste-clients td:nth-child(3) { order: 4; }
  .liste-clients td:nth-child(5) { display: none; }
  .liste-clients td:nth-child(4) .discret { display: none; }
  .liste-clients td .discret:only-child { display: none; }

  /* Factures de l'abonnement : la date et le montant, puis le numéro, le statut et le PDF. */
  .liste-abo td:nth-child(1) { order: 1; flex: 1 1 auto; }
  .liste-abo td:nth-child(3) { order: 2; }
  .liste-abo td:nth-child(2) { order: 3; font-size: 12.5px; }
  .liste-abo td:nth-child(4) { order: 4; }
  .liste-abo td:nth-child(5) { order: 5; margin-left: auto; }

  /* Lignes d'une facture : la désignation, puis quantité, prix, remise et TVA côte à côte. */
  .tableau.saisie thead { display: none; }
  .tableau.saisie, .tableau.saisie tbody { display: block; }
  .tableau.saisie tr { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) auto; gap: 6px; padding: 8px 0; border-bottom: 1px solid var(--filet); }
  .tableau.saisie td { display: block; padding: 0; border: 0; width: auto; }
  .tableau.saisie td:first-child { grid-column: 1 / -1; width: auto; }
  .tableau.saisie td:last-child { width: auto; }
  .tableau.saisie input { min-width: 0; }

  .encadre { flex-wrap: wrap; }
  .encadre > div:not(.actions) { flex: 1 1 calc(100% - 44px); min-width: 0; }
  .encadre .actions { margin-left: 44px; align-self: flex-start; }

  .cadre-tableau:has(> .saisie) { margin: 0; }
}