/* Espace client — variante 2b « Poste de travail ».
   Un outil, pas une vitrine : rail sombre, trame dense, et la zone de dépôt
   toujours à portée. Reprend la trame de console.css, qu'on charge avant. */

/* ── choix du catalogue pour un lien de suivi ────────────────────────── */
.nouveau-lien-form { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin: 0; }
.nouveau-lien-form .field { width: 220px; max-width: 100%; min-width: 0; }
.nouveau-lien-form .nouveau-lien-catalogue { width: 320px; }
.nouveau-lien-form .input, .nouveau-lien-form > .btn { min-height: 44px; }
.catalogue-choix { display: flex; align-items: center; gap: 10px; padding: 5px 10px; text-align: left; cursor: pointer; }
.catalogue-choix__titre { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.catalogue-choix > svg { flex: none; }
.catalogue-couverture {
  display: grid; place-items: center; flex: none; position: relative;
  width: 40px; height: 56px; background: var(--color-neutral-200);
  border: 1px solid var(--color-divider);
}
.catalogue-couverture::before { content: 'PDF'; font: 600 9px/1 var(--font-body); color: var(--color-neutral-700); }
.catalogue-couverture img { position: absolute; width: 100%; height: 100%; object-fit: contain; background: var(--color-surface); }
.catalogue-choix .catalogue-couverture { width: 24px; height: 32px; }
.catalogue-choix .catalogue-couverture::before { font-size: 7px; }
html:has(.catalogue-dialog[open]) { overflow: hidden; }
.catalogue-dialog {
  padding: 0; width: min(600px, calc(100% - 32px)); max-width: calc(100% - 32px);
  max-height: calc(100dvh - 32px); margin: auto; overflow: auto;
  border: 2px solid var(--color-text); background: var(--color-bg); color: var(--color-text);
  box-shadow: var(--shadow-lg);
}
.catalogue-dialog::backdrop { background: color-mix(in srgb, var(--color-neutral-900) 62%, transparent); }
.catalogue-dialog[open] { display: flex; flex-direction: column; overflow: hidden; }
.catalogue-dialog__tete, .catalogue-dialog__recherche, .catalogue-dialog__aide { flex-shrink: 0; }
.catalogue-dialog__tete { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; border-bottom: 2px solid var(--color-text); }
.catalogue-dialog__tete h2 { margin: 0; font-size: 22px; }
.catalogue-dialog__fermer { flex: none; width: 44px; height: 44px; padding: 0; justify-content: center; font-size: 24px; }
.catalogue-dialog__recherche { padding: 16px 20px 0; }
.catalogue-dialog__recherche .input { min-height: 44px; font-size: 16px; }
.catalogue-dialog__resultats { display: flex; flex-direction: column; min-height: 0; padding: 0 20px 16px; }
.catalogue-dialog__resultats > .btn { flex-shrink: 0; }
.catalogue-dialog__statut { flex-shrink: 0; min-height: 20px; margin: 12px 0; }
#catalogue-resultats { min-height: 0; max-height: min(400px, 45dvh); overflow-y: auto; overscroll-behavior: contain; }
.catalogue-option { display: flex; align-items: center; gap: 14px; padding: 10px 12px; border-bottom: 1px solid var(--color-divider); border-left: 3px solid transparent; cursor: pointer; }
.catalogue-option:hover, .catalogue-option.est-actif { background: var(--color-surface); border-left-color: var(--color-accent); }
.catalogue-option.est-actif { outline: 2px solid var(--color-accent); outline-offset: -2px; }
.catalogue-option[aria-selected="true"] { background: var(--color-accent-100); }
.catalogue-option__texte { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; overflow-wrap: anywhere; }
.catalogue-option__titre { font-size: 14px; font-weight: 600; }
.catalogue-option__texte .discret { font-size: 12px; color: var(--color-neutral-700); }
.catalogue-option__coche { flex: none; width: 16px; color: var(--color-accent-700); }
.catalogue-dialog__suite { width: 100%; min-height: 44px; justify-content: center; margin-top: 12px; }
.catalogue-dialog__aide { margin: 0; padding: 12px 20px; border-top: 1px solid var(--color-divider); }
@media (max-width: 600px) {
  .nouveau-lien-form .field, .nouveau-lien-form > .btn { width: 100%; }
  .catalogue-dialog__tete { padding: 12px; }
  .catalogue-dialog__tete h2 { font-size: 20px; }
  .catalogue-dialog__recherche { padding: 12px 12px 0; }
  .catalogue-dialog__resultats { padding: 0 12px 12px; }
  .catalogue-dialog__aide { padding: 12px; }
  .catalogue-option { gap: 10px; padding-inline: 8px; }
}

/* ── seuil (authentification) ─────────────────────────────────────────── */

.seuil {
  min-height: 100vh; min-height: 100svh; display: grid; place-items: center;
  background: var(--color-text); padding: 24px; position: relative;
  overflow-x: clip; overflow-y: auto; isolation: isolate;
}

.seuil-mur {
  /* Le plan dépasse le viewport avant sa rotation : ses quatre coins restent
     couverts, y compris sur un écran très large ou en orientation portrait. */
  position: fixed; top: 50%; left: 50%; width: 140%; height: 190%;
  transform: translate(-50%, -50%) rotate(9deg);
  display: flex; flex-direction: column; gap: 14px;
  justify-content: center; overflow: hidden; pointer-events: none;
}
.seuil-rangee {
  --largeur-couverture: clamp(96px, 7vmax, 180px);
  display: flex; gap: 14px; flex: none; width: max-content;
  will-change: transform;
}
.seuil-rangee span {
  display: block; flex: none; width: var(--largeur-couverture);
  aspect-ratio: 1055 / 1491;
  background-size: cover; background-position: center;
  background-color: var(--color-neutral-800);
  box-shadow: 0 8px 22px color-mix(in srgb, #000 32%, transparent);
}
/* Le mur dérive lentement, dans un sens puis l'autre. Une image fixe ferait
   décor ; une image trop vive ferait écran de veille. */
.seuil-rangee[data-sens="0"] { animation: derive-gauche var(--vitesse, 50s) linear infinite; }
.seuil-rangee[data-sens="1"] { animation: derive-droite var(--vitesse, 50s) linear infinite; }
/* Chaque rangée contient deux séries identiques. La demi-largeur augmentée de
   la moitié de la gouttière retombe exactement sur le début de la copie : la
   boucle ne saute pas et aucun bord vide ne traverse l'écran. */
@keyframes derive-gauche {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-50% - 7px)); }
}
@keyframes derive-droite {
  from { transform: translateX(calc(-50% - 7px)); }
  to { transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  .seuil-rangee { animation: none !important; }
}

.seuil-voile {
  position: fixed; inset: 0;
  background:
    radial-gradient(circle at 50% 48%, transparent 0 16%, rgb(20 19 18 / 18%) 54%, rgb(20 19 18 / 36%) 100%),
    color-mix(in srgb, #201e1d 78%, transparent);
}

.seuil-cadre {
  position: relative; width: min(420px, 100%); background: var(--color-bg);
  padding: 34px 38px 30px; box-shadow: var(--shadow-lg);
  border-top: 6px solid var(--color-accent);
}
.seuil-marque { display: flex; align-items: baseline; gap: 7px; margin-bottom: 28px; text-decoration: none; }
.seuil-marque svg { display: block; flex: none; }
.seuil-marque span { font: 800 21px/1 var(--font-heading); letter-spacing: -.02em; color: var(--color-text); }
.seuil-cadre h1 { font-size: 28px; letter-spacing: -.02em; margin: 0 0 8px; }
.seuil-chapeau {
  margin: 0 0 24px; font-size: 13.5px;
  color: color-mix(in srgb, var(--color-text) 68%, transparent);
}
.seuil-note {
  margin: 14px 0 0; font-size: 12px;
  color: color-mix(in srgb, var(--color-text) 58%, transparent);
}
.seuil-pied {
  margin-top: 18px; padding-top: 18px; display: flex; justify-content: space-between;
  gap: 14px; font-size: 13px; border-top: 1px solid var(--color-divider);
}
.seuil-attente {
  display: flex; align-items: center; gap: 12px;
  border: 2px solid var(--color-divider); padding: 14px 16px; font-size: 13px;
}
.seuil-attente > span:first-child {
  width: 8px; height: 8px; flex: none; background: var(--color-accent);
  animation: battement 1.6s ease-in-out infinite;
}
@keyframes battement { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

.force { display: flex; gap: 4px; margin: 10px 0 0; }
.force span { flex: 1; height: 4px; background: var(--color-neutral-300); }
.force[data-note="1"] span:nth-child(-n+1),
.force[data-note="2"] span:nth-child(-n+2),
.force[data-note="3"] span:nth-child(-n+3),
.force[data-note="4"] span:nth-child(-n+4) { background: var(--color-accent); }

/* ── départ vers Stripe ─────────────────────────────────────────────── */

.checkout-form {
  margin-top: 20px; align-items: flex-start; gap: 14px;
}
.checkout-etape,
.checkout-client-type {
  flex-basis: 100%; border: 0; padding: 0; margin: 4px 0 0;
}
.checkout-etape > legend,
.checkout-client-type > legend { padding: 0; margin-bottom: 10px; }
.checkout-cycle { margin-bottom: 12px; }
/* La carte doit loger le nom de l'offre et son point d'information sur la
   même ligne : en dessous de cette largeur, deux colonnes valent mieux que
   trois noms coupés en deux. */
.checkout-offres {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(172px, 1fr));
  gap: 10px;
}
.checkout-offre {
  display: grid; grid-template-columns: auto 1fr; gap: 0 10px;
  align-items: start; min-height: 0; padding: 14px 15px;
}
.checkout-offre:has(input:checked) { padding: 13px 14px; }
.checkout-offre-case { position: relative; }
.checkout-offre-case > .checkout-offre { height: 100%; }
/* Le point d'information vit hors du label : le pointer ne doit pas cocher
   l'offre quand on vient seulement lire ce qu'elle contient. */
.checkout-offre__info {
  position: absolute; top: 7px; right: 7px; z-index: 1;
  display: grid; place-items: center; width: 26px; height: 26px; padding: 0;
  border: 1px solid var(--color-divider); border-radius: 0;
  background: var(--color-bg);
  color: color-mix(in srgb, var(--color-text) 55%, transparent); cursor: pointer;
}
.checkout-offre__info:hover,
.checkout-offre__info:focus-visible {
  border-color: var(--color-accent); color: var(--color-accent);
}
.checkout-offre__nom { padding-right: 26px; }
.checkout-offre .dot { margin-top: 3px; }
.checkout-offre__nom { font: 800 15px/1 var(--font-heading); }
.checkout-offre .tarif-prix__barre { margin-top: 12px; font-size: 13px; }
.checkout-offre__prix { display: block; margin-top: 2px; white-space: nowrap; }
.checkout-offre__prix b {
  font: 800 25px/1 var(--font-heading); letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.checkout-offre__prix small { font-size: 11.5px; font-weight: 500; }
.checkout-offre__sous {
  display: block; margin-top: 5px; font-size: 11.5px; font-weight: 400;
  line-height: 1.4; color: color-mix(in srgb, var(--color-text) 62%, transparent);
}
.checkout-offre__arg {
  display: block; margin-top: 11px; padding-top: 10px;
  border-top: 1px solid var(--color-divider);
  font-size: 11.5px; font-weight: 400; line-height: 1.45;
}
.checkout-total {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  flex-basis: 100%; padding: 14px 16px;
  background: var(--color-text); color: #fff;
}
.checkout-total__lab {
  font: 800 10.5px/1.3 var(--font-heading); letter-spacing: .08em;
  text-transform: uppercase; color: var(--color-accent);
}
.checkout-total__valeur {
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
}
.checkout-total__valeur b {
  font: 800 30px/1 var(--font-heading); letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.checkout-total__valeur small {
  max-width: 280px; font-size: 11.5px; line-height: 1.4;
  color: color-mix(in srgb, #fff 62%, transparent);
}
/* ── détail des offres payantes ─────────────────────────────────────── */

html:has(.offres-dialog[open]) { overflow: hidden; }
.offres-dialog {
  padding: 0; width: min(880px, calc(100% - 32px)); max-width: calc(100% - 32px);
  max-height: calc(100dvh - 32px); margin: auto; overflow: hidden;
  border: 2px solid var(--color-text); background: var(--color-bg);
  color: var(--color-text); box-shadow: var(--shadow-lg);
}
.offres-dialog::backdrop { background: color-mix(in srgb, var(--color-neutral-900) 55%, transparent); }
.offres-dialog__cadre { display: flex; flex-direction: column; max-height: calc(100dvh - 36px); }
.offres-dialog__tete {
  display: flex; align-items: flex-start; gap: 16px; flex: none;
  padding: 12px 18px; border-bottom: 2px solid var(--color-text);
}
.offres-dialog__tete b { display: block; font: 800 20px/1.15 var(--font-heading); letter-spacing: -.02em; }
.offres-dialog__fermer {
  flex: none; display: grid; place-items: center; width: 44px; height: 44px;
  padding: 0; border: 0; border-radius: 0; background: transparent;
  color: var(--color-text); font: 400 24px/1 var(--font-body); cursor: pointer;
}
.offres-dialog__fermer:hover,
.offres-dialog__fermer:focus-visible { background: var(--color-surface); color: var(--color-accent); }
.offres-dialog__corps { min-height: 0; overflow: auto; padding: 14px 18px 16px; }
.offres-dialog__aide { margin: 0 0 8px; line-height: 1.5; }
.offres-colonnes {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px; align-items: stretch;
}
.offres-colonne {
  display: flex; flex-direction: column; padding: 14px 15px; cursor: pointer;
  border: 1px solid var(--color-divider); background: var(--color-bg); opacity: .72;
}
.offres-colonne:has(input:checked) {
  border: 2px solid var(--color-text); padding: 13px 14px;
  background: var(--color-surface); opacity: 1;
}
.offres-colonne input { position: absolute; opacity: 0; width: 0; height: 0; }
.offres-colonne:has(input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.offres-colonne__tete { display: flex; align-items: center; gap: 8px; min-height: 20px; }
.offres-colonne__tete b { font: 800 16px/1 var(--font-heading); }
.offres-colonne__avant { display: none; }
.offres-colonne:has(input:checked) .offres-colonne__avant { display: inline-flex; }
.offres-colonne__prix { display: block; margin-top: 10px; white-space: nowrap; }
.offres-colonne__prix b {
  font: 800 22px/1 var(--font-heading); letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.offres-colonne__prix small { font-size: 11px; font-weight: 500; }
.offres-colonne__sous {
  display: block; margin-top: 4px; font-size: 11px; line-height: 1.4;
  color: color-mix(in srgb, var(--color-text) 62%, transparent);
}
.offres-colonne__apports {
  display: grid; gap: 6px; margin-top: 12px; padding-top: 11px;
  border-top: 1px solid var(--color-divider);
}
.offres-apport {
  display: grid; grid-template-columns: 16px 1fr; gap: 0 7px;
  align-items: start; font-size: 11.5px; line-height: 1.4;
}
.offres-apport[data-herite] { font-weight: 700; }
.offres-apport__puce { font-weight: 800; color: var(--color-accent-700); }
.offres-apport[data-absent] { color: color-mix(in srgb, var(--color-text) 50%, transparent); }
.offres-apport[data-absent] .offres-apport__puce { color: inherit; }
.offres-dialog__socle-titre {
  margin: 14px 0 4px; padding-top: 11px; border-top: 2px solid var(--color-text);
  font: 800 11px/1.3 var(--font-heading); letter-spacing: .06em; text-transform: uppercase;
}
/* Deux colonnes larges plutôt que trois étroites : chaque ligne garde son
   intitulé et sa valeur côte à côte, comme le panneau « Ce que votre formule
   ouvre » de la même page. Le filet rattache la paire quand l'intitulé passe
   à la ligne. */
.offres-socle {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 0 24px;
}
.offres-socle__ligne {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; padding: 5px 0; border-bottom: 1px solid var(--color-divider);
  font-size: 11.5px; line-height: 1.35;
}
.offres-socle__ligne > span { min-width: 0; }
.offres-socle__ligne > b { flex: none; text-align: right; white-space: nowrap; }
.offres-dialog__pied {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap; flex: none;
  padding: 12px 18px; border-top: 2px solid var(--color-text);
  background: var(--color-surface);
}

/* Seule survit la variante de l'offre et de la périodicité cochées. Le
   montant annoncé suit donc la sélection même quand le script est absent. */
.checkout-zone:has(input[name="cycle"][value="annuel"]:checked) .checkout-var[data-cycle="mensuel"],
.checkout-zone:has(input[name="cycle"][value="mensuel"]:checked) .checkout-var[data-cycle="annuel"],
.checkout-zone:has(input[name="code"][value="pro"]:checked) .checkout-var[data-offre]:not([data-offre="pro"]),
.checkout-zone:has(input[name="code"][value="business"]:checked) .checkout-var[data-offre]:not([data-offre="business"]),
.checkout-zone:has(input[name="code"][value="distributeur"]:checked) .checkout-var[data-offre]:not([data-offre="distributeur"]),
.checkout-zone:has(input[name="offre_apercu"][value="pro"]:checked) .checkout-var[data-apercu]:not([data-apercu="pro"]),
.checkout-zone:has(input[name="offre_apercu"][value="business"]:checked) .checkout-var[data-apercu]:not([data-apercu="business"]),
.checkout-zone:has(input[name="offre_apercu"][value="distributeur"]:checked) .checkout-var[data-apercu]:not([data-apercu="distributeur"]) {
  display: none;
}
.checkout-client-choices {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px; max-width: 520px;
}
.checkout-client-choice {
  min-height: 58px; padding: 10px 12px;
  border: 1px solid var(--color-divider); background: var(--color-surface);
}
.checkout-client-choice:has(input:checked) {
  border: 2px solid var(--color-accent); padding: 9px 11px;
  background: var(--color-accent-100);
}
.checkout-client-choice b,
.checkout-client-choice small { display: block; }
.checkout-client-choice small {
  margin-top: 2px; font-size: 11.5px; font-weight: 400;
  color: color-mix(in srgb, var(--color-text) 62%, transparent);
}
.checkout-professional {
  flex-basis: 100%; max-width: 760px; padding: 16px 18px;
  border: 2px solid var(--color-divider); background: var(--color-surface);
}
/* La demande d'activation immédiate tient en une seule ligne : la phrase
   qui engage et le renvoi aux CGV, qui portent le détail du droit. */
.checkout-consent {
  flex-basis: 100%; max-width: 760px; padding: 12px 14px;
  border: 1px solid var(--color-divider); background: var(--color-surface);
  font-size: 12.5px; line-height: 1.45;
}
.checkout-professional { border-left: 5px solid var(--color-text); }
.checkout-professional > b { font: 800 16px/1.25 var(--font-heading); }
.checkout-professional p,
.checkout-consent > p {
  margin: 7px 0 0; font-size: 13px; line-height: 1.55;
  color: color-mix(in srgb, var(--color-text) 72%, transparent);
}
.checkout-required {
  padding: 5px 8px; background: var(--color-accent); color: #fff;
  font: 800 10.5px/1.2 var(--font-heading); letter-spacing: .03em;
  text-transform: uppercase;
}
.checkout-consent-check {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 0; padding: 0; border: 0; background: transparent;
}
.checkout-consent-check .dot {
  margin-top: 1px; border-radius: 2px; background: var(--color-bg);
}
.checkout-consent-check input:checked + .dot {
  border-color: var(--color-accent); background: var(--color-accent);
  box-shadow: inset 0 0 0 3px var(--color-bg);
}
.checkout-consent--error {
  border-color: var(--color-accent); background: var(--color-accent-100);
}
.checkout-consent-error {
  margin: 8px 0 0 !important; color: var(--color-accent-800) !important;
  font-weight: 700;
}
.checkout-submit { min-height: 44px; }
.checkout-next-step {
  align-self: center; max-width: 360px; font-size: 11.5px; line-height: 1.4;
  color: color-mix(in srgb, var(--color-text) 58%, transparent);
}

/* ── rail de l'espace ─────────────────────────────────────────────────── */

.rail-marque { gap: 8px; margin-bottom: 12px; }
.rail-marque svg { width: 22px; height: 22px; }
.rail-marque span { font-size: 23px; }

.rail-conso {
  margin-top: auto; padding-top: 16px;
  border-top: 1px solid color-mix(in srgb, #fff 22%, transparent);
}
.rail-conso .num { font-size: 12px; color: color-mix(in srgb, #fff 60%, transparent); }
.rail-conso .piste { height: 5px; background: color-mix(in srgb, #fff 24%, transparent); margin-top: 6px; }
.rail-conso .piste > div { height: 5px; background: var(--color-accent); }
.rail-conso .offre {
  font-size: 11.5px; margin-top: 10px;
  color: color-mix(in srgb, #fff 50%, transparent);
}
/* L'espace libre appartient au compteur : le pied le suit à écart fixe.
   (console.css garde margin-top:auto pour la console d'exploitation.) */
.rail-pied { margin-top: 26px; }
.rail-identite { overflow-wrap: anywhere; }
.rail-juridique { display: flex; flex-wrap: wrap; gap: 12px; }
.rail-contenu { display: contents; }
.rail-toggle {
  min-height: 44px; padding: 8px 12px; border: 1px solid #bab6b6;
  background: transparent; color: #fff; font: 600 14px/1.3 var(--font-heading);
  cursor: pointer;
}
.rail-toggle:hover { background: #444141; }
.rail-toggle:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }

/* Le menu tient dans l'écran, pas dans la page : il suit la fenêtre pendant
   que le contenu défile, et scrolle en interne si l'écran est trop court.
   Sous 1100 px, son panneau repliable conserve son propre défilement. */
@media (min-width: 1101px) {
  .rail {
    position: sticky; top: 0;
    height: 100vh; height: 100dvh; max-height: 100dvh;
    overflow-y: auto; overscroll-behavior: contain;
    scrollbar-width: thin;
  }
}

/* ── zone de dépôt permanente ─────────────────────────────────────────── */

.depot-espace {
  border: 2px dashed color-mix(in srgb, var(--color-text) 40%, transparent);
  background: var(--color-surface); padding: 24px 26px;
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
}
.depot-espace b {
  display: block; font: 800 26px/1.1 var(--font-heading);
  letter-spacing: -.02em; margin-bottom: 6px;
}
.depot-espace .num {
  font-size: 13px; color: color-mix(in srgb, var(--color-text) 62%, transparent);
}
.depot-espace input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.depot-espace[data-survol] { border-style: solid; border-color: var(--color-accent); background: var(--color-accent-100); }
.depot-espace[data-refus] { border-style: solid; border-color: var(--color-accent-700); }
.depot-espace[data-envoi] { border-style: solid; border-color: var(--color-text); }

/* ── reprendre ────────────────────────────────────────────────────────── */

.reprendre { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.reprise {
  border: 2px solid var(--color-divider); padding: 16px 18px;
  display: flex; gap: 14px; min-width: 0;
}
.reprise[data-ton="urgent"] { border-color: var(--color-accent); }
.reprise-vignette {
  width: 56px; height: 80px; flex: none; object-fit: cover;
  background: var(--color-neutral-300);
}
.reprise-titre { font-size: 14px; font-weight: 600; margin: 8px 0 4px; line-height: 1.25; }
.reprise-detail {
  font-size: 12px; margin-bottom: 10px;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
}

/* ── vignette de table ────────────────────────────────────────────────── */

.mini {
  width: 26px; height: 37px; object-fit: cover; display: block;
  background: var(--color-neutral-300);
}

/* Sur un écran large, la table ne doit pas créer de contexte de défilement :
   même un overflow horizontal à `auto` force l'autre axe à devenir scrollable
   et rogne les éléments qui dépassent. Le défilement n'est réactivé plus bas
   qu'aux largeurs où il est réellement nécessaire. */
.console-defile--catalogues {
  max-width: 100%; overflow: visible;
}
.console-bloc--catalogues { min-width: 0; overflow: visible; }
/* Géométrie d'une ligne : toutes les colonnes de données ont une largeur
   réservée ; seul le titre absorbe l'espace restant. Rétablir les gouttières
   extérieures ne comprime donc plus le contenu au hasard. */
.table-catalogues { min-width: 800px; table-layout: fixed; }
.table-catalogues--complete { min-width: 900px; }
.table-catalogues .col-couverture { width: 50px; }
.table-catalogues .col-titre { width: auto; }
.table-catalogues .col-pages { width: 62px; }
.table-catalogues .col-lectures { width: 108px; }
.table-catalogues .col-contacts { width: 88px; }
.table-catalogues .col-mur { width: 64px; }
.table-catalogues .col-date { width: 112px; }
.table-catalogues .col-etat { width: 180px; }
.table-catalogues .col-actions { width: 68px; }
/* Un statut long doit rester dans sa cellule, jamais couvrir les actions. */
.table-catalogues .chip {
  max-width: 100%; box-sizing: border-box;
  white-space: normal; overflow-wrap: anywhere; line-height: 1.3;
}
.table-catalogues th,
.table-catalogues td { vertical-align: middle; }
.table-catalogues td { padding-top: 10px; padding-bottom: 10px; }
/* console.css retire ces deux espacements sur les tables génériques. Ici ils
   sont nécessaires pour que la première vignette et le bouton ⋮ respirent. */
.table-catalogues th:first-child,
.table-catalogues td:first-child { padding-left: 12px; }
.table-catalogues th:last-child,
.table-catalogues td:last-child { padding-right: 12px; }
.cellule-titre-catalogue { padding-right: 18px; line-height: 1.25; }
.cellule-titre-catalogue > a { overflow-wrap: anywhere; }
.cellule-titre-catalogue .discret {
  margin-top: 3px; line-height: 1.25; overflow-wrap: anywhere;
}
/* Sur grand écran, la colonne d'actions participe normalement à la ligne :
   aucun masque ni ombre ne donne l'impression qu'elle est coupée. */
.lg .cellule-actions-catalogue {
  background: var(--color-bg); padding-left: 12px; padding-right: 12px;
  white-space: nowrap;
}

/* ── menu ⋮ d'un catalogue ────────────────────────────────────────────── */

.menu-catalogue { position: relative; }
.menu-catalogue__bouton {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; padding: 0;
  cursor: pointer; color: color-mix(in srgb, var(--color-text) 62%, transparent);
  background: transparent; border: 1px solid transparent;
  border-radius: var(--radius-md); list-style: none;
}
.menu-catalogue__bouton:hover,
.menu-catalogue__bouton[aria-expanded="true"] {
  color: var(--color-text);
  background: color-mix(in srgb, var(--color-text) 7%, transparent);
}
.menu-catalogue__liste {
  position: fixed; inset: auto; z-index: 30; margin: 0;
  min-width: 158px; padding: 4px;
  background: var(--color-bg); border: 1px solid var(--color-divider);
  box-shadow: 0 8px 22px rgba(32, 30, 29, 0.16);
}
/* `popover` place le menu dans la top layer du navigateur. Il n'est donc plus
   peint dans le tableau et aucun overflow d'un ancêtre ne peut le rogner. */
.menu-catalogue__liste[popover] { position: fixed; inset: auto; margin: 0; }
.menu-catalogue__lien {
  display: block; width: 100%; padding: 8px 12px; margin: 0;
  font: inherit; font-size: 14px; text-align: left; white-space: nowrap;
  color: var(--color-text); text-decoration: none; cursor: pointer;
  background: transparent; border: 0; border-radius: 0;
}
.menu-catalogue__lien:hover:not(:disabled),
.menu-catalogue__lien:focus-visible {
  background: var(--color-accent-100); color: var(--color-accent-800);
}
.menu-catalogue__lien:disabled { color: var(--color-neutral-700); cursor: not-allowed; }
.menu-catalogue__aide {
  max-width: 240px; margin: 0; padding: 0 12px 8px;
  text-align: left; white-space: normal; font-size: 12px; line-height: 1.5;
  color: var(--color-neutral-700);
}
.menu-catalogue__separateur { margin: 4px 0; border-top: 1px solid var(--color-divider); }
.menu-catalogue__lien--danger { color: var(--color-accent-700); }
.menu-catalogue__form { margin: 0; display: block; }

/* ── onglets d'un objet ───────────────────────────────────────────────── */

.onglets {
  display: flex; border-bottom: 2px solid var(--color-text); font-size: 14px;
  overflow-x: auto;
}
.onglets a {
  padding: 12px 20px; text-decoration: none; white-space: nowrap;
  color: color-mix(in srgb, var(--color-text) 65%, transparent);
  border-bottom: 3px solid transparent; margin-bottom: -2px;
}
.onglets a:hover { color: var(--color-text); }
.onglets a[aria-current] {
  font-weight: 800; color: var(--color-accent-800);
  background: var(--color-accent-100);
  border-bottom-color: transparent;
  box-shadow: inset 0 -5px 0 var(--color-accent);
}

/* ── en-tête d'un catalogue ───────────────────────────────────────────── */

.objet-tete {
  display: flex; align-items: flex-start; gap: 20px; padding: 20px 24px;
  border-bottom: 1px solid var(--color-divider); flex-wrap: wrap;
}
.objet-tete img {
  width: 66px; height: 94px; flex: none; object-fit: cover;
  border: 2px solid var(--color-text); background: var(--color-neutral-300);
}
.objet-tete h1 { margin: 0; font-size: 26px; letter-spacing: -.02em; }

/* .lab vit dans foliade.css : le dialog de partage l'utilise aussi
   sur les pages publiques, qui ne chargent pas cet habillage. */

.bloc-code {
  background: var(--color-text); color: #fff; padding: 14px 16px;
  font-size: 12.5px; line-height: 1.6; font-variant-numeric: tabular-nums;
  overflow-x: auto; white-space: pre-wrap; word-break: break-all;
}

.carte-action { border: 2px solid var(--color-divider); padding: 16px 18px; }
.carte-action b { display: block; font-size: 14px; font-weight: 700; margin-bottom: 6px; }
.carte-action p {
  margin: 0 0 12px; font-size: 12.5px;
  color: color-mix(in srgb, var(--color-text) 65%, transparent);
}

/* ── audience ─────────────────────────────────────────────────────────── */

.niveau {
  display: flex; align-items: baseline; gap: 12px; padding: 16px 24px 12px;
  flex-wrap: wrap;
}
.niveau .lab { color: var(--color-accent); margin: 0; }
.niveau h6 { margin: 0; }
.niveau span:last-child {
  font-size: 12px; color: color-mix(in srgb, var(--color-text) 55%, transparent);
}

.part { display: flex; align-items: center; gap: 10px; }
.part .piste { flex: 1; height: 6px; background: var(--color-neutral-300); }
.part .piste > div { height: 6px; background: var(--color-text); }
.part .num { font-size: 12.5px; width: 36px; text-align: right; }

.hausse { color: var(--color-accent-800); font-weight: 700; }
.baisse { color: color-mix(in srgb, var(--color-text) 55%, transparent); }

.pages-lues { display: flex; gap: 16px; align-items: flex-end; }
.pages-lues > div { flex: 1; min-width: 0; }
.pages-lues img {
  width: 100%; aspect-ratio: .707; object-fit: cover;
  border: 1px solid var(--color-divider); background: var(--color-neutral-300);
}
.pages-lues .piste { height: 8px; background: var(--color-neutral-300); margin-top: 8px; }
.pages-lues .piste > div { height: 8px; background: var(--color-accent); }
.pages-lues .num {
  font-size: 11.5px; margin-top: 6px;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
}

/* ── consommation d'une formule ───────────────────────────────────────── */

.quotas { font-size: 13px; }
.quotas > div { margin-bottom: 12px; }
.quotas .ligne { display: flex; justify-content: space-between; margin-bottom: 5px; }
.quotas .piste { height: 6px; background: var(--color-neutral-300); }
.quotas .piste > div { height: 6px; background: var(--color-text); }
.quotas .piste[data-plein] > div { background: var(--color-accent); }

/* ── responsive ───────────────────────────────────────────────────────── */

@media (max-width: 1100px), (pointer: coarse) {
  .menu-catalogue__bouton { width: 44px; height: 44px; }
  .menu-catalogue__lien { min-height: 44px; display: flex; align-items: center; }
}

@media (max-width: 1100px) {
  .rail { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px max(18px, env(safe-area-inset-right)) 12px max(18px, env(safe-area-inset-left)); }
  .rail[data-nav-ready] { position: sticky; top: 0; z-index: 50; }
  .rail-marque { margin: 0; min-height: 44px; align-items: center; justify-self: start; }
  .rail-toggle { min-width: 76px; }
  .rail-contenu { display: block; grid-column: 1 / -1; min-width: 0; }
  .rail-nav { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
  .rail-nav a { display: flex; align-items: center; min-height: 48px; padding: 12px; font-size: 16px; border-bottom: 1px solid #555; color: #ddd; }
  .rail-nav a[aria-current] { margin-left: 0; padding-left: 9px; }
  .rail-nav a:focus-visible, .rail-pied a:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }
  .rail-conso { padding-top: 12px; margin-top: 12px; }
  .rail-pied { display: block; margin-top: 16px; padding-top: 0; overflow-wrap: anywhere; }
  .rail-pied { font-size: 14px; }
  .rail-pied a { display: flex; align-items: center; min-height: 48px; padding: 12px 8px; }
  .rail-juridique { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
  .rail-deconnexion { margin-top: 8px; border: 1px solid #777; justify-content: center; }
  .rail .lang-select__control { color: #fff; background: #444141; }
  .reprendre { grid-template-columns: 1fr; }
  .pages-lues { overflow-x: auto; }
  .pages-lues > div { min-width: 84px; }
  .console-defile--catalogues {
    overflow-x: auto;
    overscroll-behavior-inline: contain;
  }
}

/* L'accueil passe en une colonne dès que son panneau de gauche ne peut plus
   garantir les 800 px nécessaires à une ligne lisible. Il n'y a donc pas de
   phase intermédiaire où les cellules sont tassées ou artificiellement crop. */
@media (min-width: 1101px) and (max-width: 1472px) {
  .console-2--catalogues-accueil { grid-template-columns: 1fr; }
  .console-2--catalogues-accueil > :first-child {
    border-right: 0; border-bottom: 2px solid var(--color-divider);
  }
}

@media (max-width: 760px) {
  .seuil { padding: 0; align-items: stretch; }
  .seuil-cadre { width: 100%; min-height: 100vh; padding: 28px 22px; }
  .seuil-mur { display: none; }
  .depot-espace { padding: 18px; }
  .depot-espace > .grow { flex-basis: 100%; }
  .depot-espace > .btn { width: 100%; }
  .depot-espace b { font-size: 20px; }
  .objet-tete { padding: 16px 18px; }
  .objet-tete > .btn,
  .objet-tete > form { flex: 1 1 150px; }
  .objet-tete > form > .btn { width: 100%; }
  .console-tete { padding: 10px 14px; gap: 10px; }
  .console-tete .input[type="search"] { width: min(100%, 260px) !important; }
  .console-bloc { padding: 18px; }
  .onglets a { padding: 11px 15px; }
  .niveau { padding: 14px 18px 10px; }
  .checkout-client-choices { grid-template-columns: 1fr; }
  .checkout-offres { grid-template-columns: 1fr; }
  .checkout-total { align-items: flex-start; gap: 10px; }
  .checkout-total__valeur small { max-width: none; }
  .checkout-professional,
  .checkout-consent { padding: 14px; }
  .checkout-submit { width: 100%; }
  .checkout-next-step { max-width: none; }
  .menu-catalogue__bouton { width: 44px; height: 44px; }
  .menu-catalogue__lien { min-height: 44px; display: flex; align-items: center; }
  .table-catalogues .col-actions { width: 68px; }
  .seuil .lang-select-float { position: absolute; top: 18px; right: 18px; }
  .seuil-marque { min-height: 44px; max-width: calc(100% - 172px); }
  .seuil-cadre { min-height: 100svh; }
}

@media (max-width: 600px) {
  /* À cette largeur, préserver la densité impose un défilement horizontal.
     L'action reste alors seule collée au bord, sans perdre sa gouttière. */
  .table-catalogues { min-width: 860px; }
  .table-catalogues--complete { min-width: 980px; }
  .lg .cellule-actions-catalogue {
    position: sticky; right: 0; z-index: 2;
    box-shadow: -8px 0 10px -10px rgba(32, 30, 29, 0.28);
  }
}

@media (max-width: 360px) {
  .seuil .lang-select-float { position: relative; inset: auto; padding: 12px 18px; justify-self: end; }
  .seuil-marque { max-width: none; }
}

@media (max-width: 480px) {
  .objet-tete > .btn,
  .objet-tete > form { flex-basis: 100%; }
  .objet-tete > .btn { width: 100%; }
  .seuil-pied { flex-direction: column; }
  .row > .input:not([type="color"]) { min-width: 0; }
}
/* Un choix explicite de place, sans interrompre le partage temporaire. */
.attente-place { margin: 16px 24px; padding: 20px; border: 2px solid var(--color-text); border-left: 6px solid var(--color-accent); }
.attente-place p { margin: 8px 0; }
.attente-place .btn { margin-top: 8px; }
.conserver { width: 100%; max-width: 820px; min-width: 0; padding: clamp(20px, 4vw, 48px); margin: 0 auto; box-sizing: border-box; }
.conserver h1 { margin: 8px 0 24px; font-size: clamp(26px, 4vw, 38px); line-height: 1.15; }
.conserver h2 { margin: 28px 0 12px; font-size: 22px; }
.conserver p { line-height: 1.6; }
.conserver__retour { display: inline-block; margin-bottom: 28px; }
.conserver__document { display: flex; align-items: center; gap: 16px; padding: 16px 0; border-block: 1px solid var(--color-divider); }
.conserver__document img, .conserver__option img { width: 42px; height: 58px; object-fit: cover; flex: none; }
.conserver__document div, .conserver__option span { min-width: 0; overflow-wrap: anywhere; }
.conserver__document span, .conserver__option small { display: block; margin-top: 5px; color: var(--color-neutral-600); }
.conserver__echeance { font-size: 14px; }
.conserver__liste { border: 0; padding: 0; margin: 24px 0; min-width: 0; }
.conserver__liste legend { font-weight: 700; margin-bottom: 12px; }
.conserver__option { display: flex; gap: 16px; align-items: center; padding: 16px; border: 1px solid var(--color-divider); margin-bottom: 8px; cursor: pointer; }
.conserver__option:has(input:checked) { border-color: var(--color-accent); box-shadow: inset 3px 0 var(--color-accent); }
.conserver__option:focus-within { outline: 2px solid var(--color-text); outline-offset: 2px; }
.conserver__option input { flex: none; width: 18px; height: 18px; accent-color: var(--color-accent); }
.conserver__actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0; }
.conserver__actions .btn, .attente-place .btn { white-space: normal; text-align: center; }
.conserver__choix { padding: 20px; border: 2px solid var(--color-text); display: grid; gap: 8px; overflow-wrap: anywhere; }
.conserver__alternative { padding-top: 20px; border-top: 1px solid var(--color-divider); font-size: 14px; }
@media (max-width: 560px) {
  .attente-place { margin: 12px; padding: 16px; }
  .conserver__actions { flex-direction: column; }
  .conserver__actions .btn { width: 100%; }
}

/* ── étagères digitales ─────────────────────────────────────────────── */
.onglets__badge { margin-left: 8px; vertical-align: 1px; }
.etageres-intro { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; border-bottom: 2px solid var(--color-text); }
.etageres-intro__texte { flex-basis: 360px; }
.etageres-intro__texte b { display: block; font: 800 18px/1.2 var(--font-heading); letter-spacing: -.01em; margin-bottom: 4px; }
.etageres-intro__texte p { margin: 0; font-size: 13.5px; max-width: 620px; }
.etageres-intro__chiffres { flex: 0 0 240px; }
.table-etageres { min-width: 860px; table-layout: fixed; }
.table-etageres .col-pile { width: 78px; }
.table-etageres .col-nb { width: 100px; }
.table-etageres .col-layout { width: 140px; }
.table-etageres .col-lectures { width: 110px; }
.table-etageres .col-date { width: 120px; }
.table-etageres .col-etat { width: 110px; }
.table-etageres .col-actions { width: 68px; }
.table-etageres th:first-child, .table-etageres td:first-child { padding-left: 12px; }
.table-etageres td { vertical-align: middle; }

/* Trois couvertures en éventail : la première devant. */
.etagere-pile { position: relative; width: 84px; height: 94px; flex: none; }
.etagere-pile img {
  position: absolute; top: 0; left: 0; width: 54px; height: 76px; object-fit: cover;
  border: 2px solid var(--color-text); background: var(--color-neutral-300);
}
.etagere-pile img:nth-child(2) { left: 15px; top: 4px; z-index: -1; }
.etagere-pile img:nth-child(3) { left: 30px; top: 8px; z-index: -2; }
.etagere-pile:empty { border: 2px dashed var(--color-divider); }
.etagere-pile--mini { width: 54px; height: 40px; }
.etagere-pile--mini img { width: 26px; height: 37px; border: 0; box-shadow: 0 1px 3px rgba(32, 30, 29, .3); }
.etagere-pile--mini img:nth-child(2) { left: 13px; top: 1.5px; }
.etagere-pile--mini img:nth-child(3) { left: 26px; top: 3px; }
.etagere-retour { color: inherit; text-decoration: none; font-weight: 600; }
.etagere-retour:hover { color: var(--color-accent); }

/* Contenu : la liste ordonnée des catalogues exposés. */
.etagere-rangs { display: flex; flex-direction: column; border-top: 2px solid var(--color-text); }
.etagere-rang { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--color-divider); }
.etagere-rang__numero { width: 18px; font-size: 12px; color: color-mix(in srgb, var(--color-text) 50%, transparent); }
.etagere-rang__texte { min-width: 0; line-height: 1.25; }
.etagere-rang__titre { font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.etagere-rang__absent { color: var(--color-accent-700); }
.etagere-rang__collection { flex: 0 0 132px; }
.etagere-rang__collection .input { min-height: 32px; padding: 4px 8px; font-size: 12.5px; }
.etagere-rang__actions { display: flex; gap: 2px; }
.etagere-rang__actions form { margin: 0; }
.etagere-rang__actions .btn { width: 32px; height: 32px; min-height: 0; padding: 0; }
.etagere-ajouts { display: flex; flex-direction: column; }
.etagere-ajout { margin: 0; }
.etagere-ajout__bouton {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 7px 8px;
  border: 0; border-bottom: 1px solid var(--color-divider); background: none;
  font: inherit; color: inherit; text-align: left; cursor: pointer;
}
.etagere-ajout__bouton:hover, .etagere-ajout__bouton:focus-visible { background: var(--color-accent-100); }
.etagere-ajout__bouton img { width: 22px; height: 31px; object-fit: cover; background: var(--color-neutral-300); flex: none; }
.etagere-ajout__titre { min-width: 0; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.etagere-ajout__plus { font: 800 12px/1 var(--font-heading); color: var(--color-accent-700); white-space: nowrap; }

/* Apparence : dispositions, planches, polices. */
.seg--plein { display: flex; width: 100%; }
.seg--plein .seg-opt { flex: 1; justify-content: center; white-space: nowrap; }
.etagere-tuiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.etagere-tuile {
  display: flex; flex-direction: column; gap: 8px; padding: 9px; cursor: pointer;
  border: 1px solid var(--color-divider); background: var(--color-surface); color: var(--color-text);
}
.etagere-tuile input { position: absolute; opacity: 0; width: 0; height: 0; }
.etagere-tuile:hover { border-color: var(--color-text); }
.etagere-tuile:has(input:checked) { border-color: var(--color-text); background: var(--color-text); color: var(--color-bg); }
.etagere-tuile:has(input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.etagere-tuile__nom { font: 800 12px/1.2 var(--font-heading); }
.etagere-tuile__scene {
  height: 54px; padding: 6px; background: var(--color-neutral-200);
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; align-items: end;
}
.etagere-tuile:has(input:checked) .etagere-tuile__scene { background: rgba(255, 255, 255, .12); }
.etagere-tuile__scene i { display: block; height: 100%; background: currentColor; opacity: .55; }
.etagere-tuile__scene[data-scene="rayonnage"] i { height: 70%; box-shadow: 0 3px 0 0 currentColor; }
.etagere-tuile__scene[data-scene="liste"] { align-content: space-between; }
.etagere-tuile__scene[data-scene="liste"] i { grid-column: 1 / -1; height: 9px; background: linear-gradient(90deg, currentColor 0 14%, transparent 14% 20%, currentColor 20% 70%, transparent 70%); }
.etagere-tuile__scene[data-scene="liste"] i:nth-child(4) { display: none; }
.etagere-tuile__scene[data-scene="coverflow"] i:nth-child(1) { height: 60%; opacity: .3; transform: skewY(12deg); }
.etagere-tuile__scene[data-scene="coverflow"] i:nth-child(2) { grid-column: 2 / 4; margin: 0 16%; opacity: .7; }
.etagere-tuile__scene[data-scene="coverflow"] i:nth-child(3) { height: 60%; opacity: .3; transform: skewY(-12deg); }
.etagere-tuile__scene[data-scene="coverflow"] i:nth-child(4) { display: none; }
.etagere-tuile__scene[data-scene="vedette"] i:nth-child(1) { grid-column: 1 / 3; opacity: .7; }
.etagere-tuile__scene[data-scene="vedette"] i:nth-child(2), .etagere-tuile__scene[data-scene="vedette"] i:nth-child(3) { height: 46%; opacity: .45; }
.etagere-tuile__scene[data-scene="vedette"] i:nth-child(4) { display: none; }
.etagere-tuile__scene[data-scene="kiosque"] { grid-template-rows: 3px 1fr; align-items: stretch; }
.etagere-tuile__scene[data-scene="kiosque"]::before { content: ""; grid-column: 1 / -1; height: 3px; background: currentColor; opacity: .7; }
.etagere-tuile__scene[data-scene="kiosque"] i { height: 16px; align-self: start; opacity: .5; }
.etagere-planches { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.etagere-planche {
  display: flex; flex-direction: column; gap: 6px; padding: 7px; cursor: pointer;
  border: 1px solid var(--color-divider); background: var(--color-surface); color: inherit;
}
.etagere-planche input { position: absolute; opacity: 0; width: 0; height: 0; }
.etagere-planche:hover { border-color: var(--color-text); }
.etagere-planche:has(input:checked) { border-color: var(--color-text); box-shadow: inset 0 0 0 1px var(--color-text); }
.etagere-planche:has(input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.etagere-planche__apercu { display: block; filter: drop-shadow(0 4px 3px rgba(0, 0, 0, .3)); }
.etagere-planche__haut { display: block; height: 10px; clip-path: polygon(6% 0, 94% 0, 100% 100%, 0 100%); }
.etagere-planche__face { display: block; height: 7px; }
.etagere-planche__nom { font: 700 11.5px/1.15 var(--font-heading); }
.etagere-planche__famille { font-size: 10px; margin-top: -4px; }
.etagere-planche-couleur { grid-template-columns: 36px minmax(0, 1fr); gap: 6px; align-self: end; }
.etagere-couleurs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
/* Étagères : trois couleurs en lignes (étiquette, pastille, hexa lisible) ; le panneau est trop
   étroit pour trois cartes côte à côte. */
.etagere-couleurs { grid-template-columns: 1fr; gap: 6px; }
.etagere-couleurs .theme-color { display: grid; grid-template-columns: 84px minmax(0, 1fr); align-items: center; gap: 12px; padding: 8px 12px; }
.etagere-couleurs .theme-color > label { margin: 0; font-size: 13px; color: var(--color-text); }
.etagere-couleurs .theme-color-control { grid-template-columns: 36px 112px; gap: 8px; }
.etagere-couleurs .theme-color-picker { min-height: 34px; }
.etagere-couleurs .theme-color-value { min-height: 34px; }
.etagere-retablir { min-height: 30px; padding: 4px 8px; font-size: 12px; }
.etagere-fond-apercu { background-size: cover; background-position: center; filter: grayscale(1); }
.etagere-roles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.etagere-role {
  display: flex; flex-direction: column; gap: 6px; min-height: 74px; padding: 10px 12px;
  border: 1px solid var(--color-divider); background: var(--color-surface); color: inherit;
  font: inherit; text-align: left; cursor: pointer;
}
.etagere-role:hover, .etagere-role[aria-expanded="true"] { border-color: var(--color-text); }
.etagere-role:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.etagere-role__famille { font-size: 19px; font-weight: 600; line-height: 1.1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.etagere-picker { margin-top: 8px; border: 1px solid var(--color-text); background: var(--color-bg); }
.etagere-picker__tete { display: flex; gap: 8px; padding: 10px; border-bottom: 1px solid var(--color-divider); }
.etagere-picker__tete .input { flex: 1; min-height: 36px; }
.etagere-picker__tete .btn { width: 36px; padding: 0; }
.etagere-picker__cats { display: flex; gap: 4px; padding: 8px 10px; border-bottom: 1px solid var(--color-divider); flex-wrap: wrap; }
.etagere-picker__cats button {
  padding: 4px 9px; border: 1px solid var(--color-divider); background: transparent; color: var(--color-text);
  font: 700 11.5px/1 var(--font-heading); cursor: pointer;
}
.etagere-picker__cats button[aria-pressed="true"] { border-color: var(--color-text); background: var(--color-text); color: var(--color-bg); }
.etagere-picker__liste { max-height: 288px; overflow: auto; }
.etagere-police {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; align-items: center;
  gap: 2px 10px; width: 100%; padding: 9px 12px; border: 0; border-bottom: 1px solid var(--color-divider);
  background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.etagere-police:hover, .etagere-police:focus-visible { background: var(--color-accent-100); }
.etagere-police[aria-current="true"] { background: var(--color-accent-100); }
.etagere-police__nom { font-size: 17px; font-weight: 500; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.etagere-police__exemple { font-size: 10.5px; grid-column: 1; }
.etagere-police__cat { grid-column: 2; grid-row: 1 / 3; font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; }
.etagere-police--libre { display: block; background: var(--color-accent-100); color: var(--color-accent-800); font: 700 13px/1.2 var(--font-heading); }
.etagere-picker__aide { margin: 0; padding: 8px 12px; border-top: 1px solid var(--color-divider); }
.etagere-partages { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.etagere-partages .btn { justify-content: flex-start; }

/* L'aperçu : un écran de bureau ou un téléphone, réduit à la largeur de la colonne. */
.etagere-appareil { background: var(--color-bg); }
.etagere-appareil .seg-opt { padding: 3px 9px; font-size: 11px; }
.etagere-scene { aspect-ratio: auto; display: flex; justify-content: center; }
.etagere-scene .apercu-iframe { position: relative; transform-origin: 50% 0; }
@media (max-width: 760px) {
  .etagere-tuiles, .etagere-couleurs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .etagere-planches { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .etagere-roles, .etagere-partages { grid-template-columns: 1fr; }
  .etagere-rang { flex-wrap: wrap; }
  .etagere-rang__collection { flex-basis: 100%; }
  .etageres-intro__chiffres { flex-basis: 100%; }
}

/* ── Apparence étendue (Lot 1) : thème, fond, contrôles, invites, logo ── */
.theme-choix {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
}
.theme-choix__lab { font-size: 12px; color: color-mix(in srgb, var(--color-text) 70%, transparent); }
.theme-choix__select {
  position: relative; display: inline-flex; align-items: center; gap: 8px;
  min-width: 220px; min-height: 36px; padding: 0 0 0 10px;
  background: #fff; border: 1px solid var(--color-divider);
}
.theme-choix__select .input {
  flex: 1; min-width: 0; min-height: 34px; border: 0; background: transparent;
  font-weight: 600; padding-left: 4px;
}
.theme-choix__select:focus-within { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.theme-bande { display: inline-flex; gap: 2px; flex: none; }
.theme-bande i {
  display: block; width: 8px; height: 14px; background: var(--color-neutral-300);
  border: 1px solid color-mix(in srgb, var(--color-text) 12%, transparent);
}
.theme-choix__note { flex-basis: 100%; line-height: 1.5; }
.theme-choix__note b { font-weight: 700; color: var(--color-text); }

.fond-bloc { margin-top: 14px; }
.fond-bloc[hidden] { display: none; }
.fond-reglages { gap: 14px; margin-top: 14px; }
.theme-color--lie .theme-color-control { grid-template-columns: 42px minmax(0, 1fr); align-items: center; }
.theme-color-temoin {
  display: block; width: 42px; min-height: 38px; border: 1px solid var(--color-divider);
  background: var(--picker-color, var(--color-neutral-300));
}
.depot-fond { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 12px; }
.depot-fond__apercu {
  flex: none; width: 120px; height: 68px; display: grid; place-items: center;
  font-size: 11px; border: 1px solid var(--color-divider);
  background: var(--color-neutral-200) center / cover no-repeat;
}
.depot-fond__champ { flex: 1 1 200px; display: flex; flex-direction: column; gap: 6px; }
.depot-fond__champ .radio { margin-top: 4px; }

.curseur__lab { display: flex !important; justify-content: space-between; gap: 10px; }
.curseur__lab output { color: var(--color-text); }
.curseur--court { max-width: 240px; margin-top: 14px; }
.curseur__piste {
  -webkit-appearance: none; appearance: none; width: 100%; height: 16px; margin: 0;
  background: transparent; cursor: pointer;
}
.curseur__piste:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.curseur__piste::-webkit-slider-runnable-track { height: 4px; background: var(--color-neutral-300); }
.curseur__piste::-moz-range-track { height: 4px; background: var(--color-neutral-300); }
.curseur__piste::-moz-range-progress { height: 4px; background: var(--color-text); }
.curseur__piste::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 14px; height: 14px; margin-top: -5px;
  border-radius: 0; border: 2px solid var(--color-bg); background: var(--color-text);
}
.curseur__piste::-moz-range-thumb {
  width: 10px; height: 10px; border-radius: 0; border: 2px solid var(--color-bg); background: var(--color-text);
}

.cases { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; }
.cases .radio { margin: 0; }
.radio--eteint { color: color-mix(in srgb, var(--color-text) 55%, transparent); }
.reglage-duo { gap: 14px; margin-top: 14px; }
.reglage .colonnes.col-2 > .field + .field { margin-top: 0; }

.tuiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.tuiles--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tuile {
  display: flex; flex-direction: column; gap: 8px; padding: 9px; cursor: pointer;
  border: 1px solid var(--color-divider); background: var(--color-surface); color: var(--color-text);
}
.tuile input { position: absolute; opacity: 0; width: 0; height: 0; }
.tuile:hover { border-color: var(--color-text); }
.tuile:has(input:checked) { border-color: var(--color-text); background: var(--color-text); color: var(--color-bg); }
.tuile:has(input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.tuile__nom { display: flex; justify-content: space-between; align-items: center; gap: 6px; font: 800 12px/1.2 var(--font-heading); }
.tuile__coche { display: none; width: 8px; height: 8px; background: var(--color-accent); flex: none; }
.tuile:has(input:checked) .tuile__coche { display: block; }
.tuile__scene {
  height: 54px; padding: 6px; background: var(--color-neutral-200);
  display: flex; align-items: center; justify-content: center; gap: 5px;
}
.tuile:has(input:checked) .tuile__scene { background: rgba(255, 255, 255, .12); }
.tuile__page { position: relative; display: block; width: 26px; height: 38px; background: currentColor; opacity: .55; }
.tuile:has(input:checked) .tuile__page { opacity: .75; }
.tuile__fleche { display: none; font: 800 12px/1 var(--font-heading); font-style: normal; }
.tuile__scene[data-scene="coin"] .tuile__page { width: 34px; height: 42px; }
.tuile__scene[data-scene="coin"] .tuile__page::after {
  content: ""; position: absolute; right: 0; bottom: 0; border-style: solid;
  border-width: 0 0 14px 14px; border-color: transparent transparent var(--color-neutral-200) transparent;
}
.tuile:has(input:checked) .tuile__scene[data-scene="coin"] .tuile__page::after { border-color: transparent transparent var(--color-text) transparent; }
.tuile__scene[data-scene="fleches"] .tuile__fleche { display: inline; }
.tuile__scene[data-scene="survol"] .tuile__fleche { display: inline; opacity: .35; }
.tuile__scene[data-scene="aucune"] .tuile__page { width: 34px; height: 42px; }

.ouverture { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 14px; }
.ouverture .field + .field { margin-top: 0; }

.coins { display: grid; grid-template-columns: repeat(4, 44px); gap: 6px; }
.coin { position: relative; display: block; width: 44px; height: 36px; cursor: pointer; border: 1px solid var(--color-divider); background: var(--color-surface); }
.coin input { position: absolute; opacity: 0; width: 0; height: 0; }
.coin i { position: absolute; width: 12px; height: 6px; background: var(--color-text); }
.coin--haut-gauche i { left: 5px; top: 5px; }
.coin--haut-droite i { right: 5px; top: 5px; }
.coin--bas-gauche i { left: 5px; bottom: 5px; }
.coin--bas-droite i { right: 5px; bottom: 5px; }
.coin:hover { border-color: var(--color-text); }
.coin:has(input:checked) { border-color: var(--color-text); background: var(--color-text); }
.coin:has(input:checked) i { background: var(--color-accent); }
.coin:has(input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: 2px; }

.field--separe { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--color-divider); }
.field--reserve .fichier, .field--reserve .depot-logo__apercu { opacity: .45; }
.field label .chip { margin-left: 6px; vertical-align: middle; }
.reserve-note { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 6px; color: color-mix(in srgb, var(--color-text) 70%, transparent); }
.reserve-note a { font: 800 12px/1 var(--font-heading); color: var(--color-accent); text-decoration: none; }
.reserve-note a:hover { text-decoration: underline; }
.depot-logo__apercu--carre { width: 34px; height: 34px; padding: 3px; font-size: 9px; }
.depot-logo__apercu--carre img { max-height: 100%; }

.dialogue {
  width: min(92vw, 480px); padding: 0; border: 2px solid var(--color-text);
  background: var(--color-bg); color: var(--color-text); box-shadow: var(--shadow-lg);
}
.dialogue::backdrop { background: rgba(32, 30, 29, .55); }
.dialogue__cadre { margin: 0; padding: 22px 24px; }
.dialogue__cadre h2 { margin: 0 0 8px; font-size: 20px; letter-spacing: -.02em; }
.dialogue__cadre .field { margin-top: 12px; }

/* Aperçu : sélecteur d'appareil dans la tête de fenêtre, scène téléphone centrée. */
.apercu-appareil { flex: none; background: var(--color-bg); }
.apercu-appareil .seg-opt { padding: 3px 9px; font-size: 11px; }
.apercu-scene--mobile { aspect-ratio: auto; display: flex; justify-content: center; }
.apercu-scene--mobile .apercu-iframe { position: relative; transform-origin: 50% 0; }
.apercu-fenetre--simple { box-shadow: none; }
@media (max-width: 760px) {
  .apercu-appareil { display: none; }
}

/* Sommaire : lignes éditables, poignée, rang, titre, page, retirer. */
.console-2--sommaire { grid-template-columns: minmax(0, 1fr) 420px; }
.avis-annulable {
  display: flex; align-items: center; flex-wrap: wrap; gap: 12px; padding: 10px 12px; margin-bottom: 12px;
  border-left: 3px solid var(--color-accent); background: color-mix(in srgb, var(--color-accent) 7%, transparent);
  font-size: 13px;
}
.avis-annulable > span { flex: 1; min-width: 200px; }
.sommaire-lignes { border-top: 2px solid var(--color-text); }
.sommaire-ligne {
  display: grid; grid-template-columns: 20px 32px minmax(0, 1fr) 72px 32px; gap: 10px;
  align-items: center; padding: 6px 0; border-bottom: 1px solid var(--color-divider);
}
.sommaire-ligne--saisie { opacity: .5; }
.sommaire-ligne__poignee { display: grid; place-items: center; color: color-mix(in srgb, var(--color-text) 45%, transparent); cursor: grab; }
.sommaire-ligne__rang { font-size: 12px; color: color-mix(in srgb, var(--color-text) 50%, transparent); }
.sommaire-ligne .input { min-height: 32px; padding: 4px 8px; font-size: 13.5px; }
.sommaire-ligne input[name="page"] { text-align: right; }
.sommaire-ligne__retirer { width: 32px; height: 32px; min-height: 0; padding: 0; font-size: 18px; line-height: 1; }

/* Thèmes de marque : miniature, nom, résumé, actions. */
.themes-liste { border-top: 2px solid var(--color-text); }
.theme-ligne {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center;
  padding: 12px 0; border-bottom: 1px solid var(--color-divider);
}
.theme-ligne--reserve { opacity: .45; }
.theme-mini { display: grid; grid-template-columns: repeat(4, 14px); grid-template-rows: 14px 14px; gap: 2px; width: 62px; }
.theme-mini i { display: block; border: 1px solid color-mix(in srgb, var(--color-text) 20%, transparent); }
.theme-mini__bande { grid-column: 1 / -1; }
.theme-mini__bande--image { background-image: repeating-linear-gradient(135deg, rgba(0, 0, 0, .12) 0 3px, transparent 3px 6px) !important; }
.theme-mini--vide i { border: 1px dashed color-mix(in srgb, var(--color-text) 50%, transparent); background: transparent; }
.theme-ligne__texte { min-width: 0; }
.theme-ligne__nom { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 14px; font-weight: 600; }
.theme-ligne__nom .chip { flex: none; white-space: nowrap; }
.theme-ligne__resume { display: block; margin-top: 2px; font-size: 12px; color: color-mix(in srgb, var(--color-text) 60%, transparent); }
.theme-ligne__actions { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
.theme-ligne__actions form { margin: 0; }
.theme-ligne__actions .btn { min-height: 30px; padding: 6px 10px; font-size: 12px; }
.theme-ligne__supprimer { color: var(--color-accent-700); }
@media (max-width: 980px) {
  .console-2--sommaire { grid-template-columns: minmax(0, 1fr); }
  .console-2--sommaire > :first-child { border-right: 0; border-bottom: 2px solid var(--color-divider); }
}
@media (max-width: 760px) {
  .tuiles--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cases { grid-template-columns: 1fr; }
  .ouverture { grid-template-columns: 1fr; }
  .theme-ligne { grid-template-columns: auto minmax(0, 1fr); }
  .theme-ligne__actions { grid-column: 1 / -1; justify-content: flex-start; }
  .sommaire-ligne { grid-template-columns: 20px 28px minmax(0, 1fr) 64px 32px; gap: 6px; }
}

/* ── Enrichir : scène de travail, bibliothèque, inspecteur ─────────────── */
.enrichir { display: flex; flex-direction: column; height: calc(100vh - 214px); min-height: 520px; }
.enrichir-corps { min-height: 0; }
.enrichir-tete { display: flex; align-items: center; gap: 12px; height: 48px; padding: 0 16px; border-bottom: 2px solid var(--color-text); background: var(--color-bg); }
.enrichir-tete > b { font: 800 15px/1 var(--font-title); }
.enrichir-etat { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--color-text-muted); }
.enrichir-etat i { width: 7px; height: 7px; background: var(--color-text); }
.enrichir-etat[data-ton="accent"] i { background: var(--color-accent); }
.enrichir-etat[data-ton="attente"] i { background: var(--color-neutral-400); }
.enrichir-etat[data-ton="erreur"] { color: var(--color-accent-700); font-weight: 600; }
.enrichir-etat[data-ton="erreur"] i { background: var(--color-accent-700); }
.enrichir-histo { display: inline-flex; border: 1px solid var(--color-neutral-400); }
.enrichir-histo .btn { border: 0; width: 36px; height: 34px; padding: 0; display: grid; place-items: center; }
.enrichir-histo .btn + .btn { border-left: 1px solid var(--color-neutral-400); }
.enrichir-ico { padding: 0; width: 32px; height: 32px; display: grid; place-items: center; }
.enrichir-appareil .seg-opt { font-size: 12px; padding: 5px 10px; }
.enrichir-avis { margin: 12px 16px 0; }
.enrichir-corps { flex: 1; min-height: 0; display: grid; grid-template-columns: 320px minmax(0, 1fr) 300px; }
.enrichir[data-mode="edition"] .enrichir-corps { grid-template-columns: 132px minmax(0, 1fr) 300px; }
.enrichir-gauche { border-right: 2px solid var(--color-neutral-400); overflow: auto; background: var(--color-bg); }
.enrichir[data-mode="edition"] .enrichir-gauche { background: var(--color-surface); }
.enrichir-premier { padding: 20px 22px; display: flex; flex-direction: column; gap: 16px; }
.enrichir-titre { display: block; font: 800 16px/1.2 var(--font-title); letter-spacing: -0.01em; }
.biblio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.biblio-tuile { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-height: 74px; padding: 9px 7px; border: 1px solid var(--color-neutral-400); background: var(--color-surface); color: var(--color-text); font: inherit; text-align: left; cursor: pointer; min-width: 0; }
.biblio-tuile > span:first-of-type { font: 800 11.5px/1.2 var(--font-title); letter-spacing: -0.01em; overflow-wrap: normal; }
.biblio-tuile:hover { border-color: var(--color-text); }
.biblio-tuile--armee { border-color: var(--color-accent); box-shadow: inset 0 0 0 1px var(--color-accent); }
.biblio-tuile[data-ouvert=""] { color: var(--color-text-muted); }
.biblio-tuile--compacte { min-height: 0; gap: 4px; padding: 7px; }
.biblio-tuile--compacte > span:first-of-type { font-size: 10px; }
.biblio--popover { position: absolute; right: 16px; bottom: 74px; z-index: 5; width: 236px; padding: 6px; background: var(--color-bg); border: 2px solid var(--color-text); box-shadow: 0 12px 32px rgba(45, 43, 43, 0.22); gap: 4px; }
.trouve { padding: 12px 14px; border: 2px solid var(--color-text); }
.trouve > b { display: block; font: 800 13px/1.3 var(--font-title); }
.trouve-lignes { margin-top: 8px; font-size: 13px; }
.trouve-ligne { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--color-neutral-400); }
.trouve-ligne:last-child { border-bottom: 0; }
.trouve-ligne > span:last-child { display: flex; gap: 4px; }
.btn-mini { font-size: 11px; padding: 6px 8px; min-height: 0; }
.btn.accent { color: var(--color-accent); }
.enrichir-pages { padding: 10px; display: flex; flex-direction: column; gap: 10px; }
.enrichir-filtre .input { font-size: 11px; padding: 4px 6px; min-height: 0; }
.planches { display: flex; flex-direction: column; gap: 10px; }
.planche { position: relative; padding: 5px; border: 2px solid transparent; background: transparent; font: inherit; color: inherit; cursor: pointer; text-align: center; }
.planche--courante { border-color: var(--color-text); background: var(--color-bg); }
.planche--estompee { opacity: 0.4; }
.planche-vues { display: flex; justify-content: center; gap: 2px; height: 60px; }
.planche-vues i { width: 44px; height: 60px; background: #fff center / cover; border: 1px solid rgba(32, 30, 29, 0.25); }
.planche-lib { display: block; margin-top: 4px; font-size: 10.5px; color: var(--color-text-muted); }
.planche-badge { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 4px; display: grid; place-items: center; background: var(--color-accent); color: #fff; font: 800 10.5px/1 var(--font-title); }
.suggestions { display: flex; flex-direction: column; height: 100%; }
.suggestions-tete { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 2px solid var(--color-text); }
.suggestions-tete b { flex: 1; font: 800 14px/1.2 var(--font-title); }
.suggestions-filtres { display: flex; flex-wrap: wrap; gap: 4px; padding: 10px 16px; border-bottom: 1px solid var(--color-neutral-400); }
.chip-filtre { padding: 4px 8px; border: 1px solid var(--color-neutral-400); background: transparent; font: 11.5px/1 var(--font-body); color: var(--color-text); cursor: pointer; }
.chip-filtre--on { border-color: var(--color-text); background: var(--color-text); color: var(--color-bg); }
.suggestions-lignes { flex: 1; overflow: auto; padding: 0 16px; }
.sugg-ligne { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 5px 0; border-bottom: 1px solid var(--color-neutral-400); font-size: 13px; }
.sugg-ligne--ignoree { opacity: 0.6; }
.sugg-vue { width: 32px; height: 44px; background: #fff center / cover; border: 1px solid rgba(32, 30, 29, 0.3); }
.sugg-texte { min-width: 0; display: flex; flex-direction: column; }
.sugg-extrait { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sugg-actions { display: flex; align-items: center; gap: 4px; font-size: 12px; }
.sugg-ok { display: flex; align-items: center; gap: 6px; font-weight: 600; }
.sugg-ok i { width: 16px; height: 16px; background: var(--color-text); }
.suggestions-pied { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-top: 2px solid var(--color-text); background: var(--color-surface); }
.enrichir-scene { position: relative; background: var(--color-neutral-300); overflow: hidden; min-height: 420px; }
.enrichir-scene-info { position: absolute; left: 12px; top: 12px; z-index: 2; font-size: 11px; color: var(--color-text-muted); }
.enrichir-cadre { position: absolute; inset: 0; overflow: hidden; }
.enrichir-iframe { position: absolute; left: 0; top: 0; width: 1280px; height: 800px; border: 0; transform-origin: 0 0; background: #fff; }
.enrichir-bandeau { position: absolute; left: 16px; right: 16px; top: 16px; z-index: 3; display: flex; align-items: center; gap: 12px; padding: 8px 12px; background: var(--color-text); color: #fff; font-size: 12.5px; }
.enrichir-bandeau i { width: 8px; height: 8px; background: var(--color-accent); flex: none; }
.enrichir-bandeau > span { flex: 1; }
.enrichir-bandeau .btn-ghost { color: #fff; border: 1px solid rgba(255, 255, 255, 0.4); font-size: 11px; padding: 6px 9px; }
.enrichir-bandeau .btn-primary { font-size: 11px; padding: 6px 9px; }
.enrichir-mobile-avis { position: absolute; left: 12px; right: 12px; top: 10px; z-index: 3; display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: var(--color-text); color: #fff; font-size: 12px; line-height: 1.35; }
.enrichir-synchro { position: absolute; left: 12px; right: 76px; bottom: 12px; z-index: 3; display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: var(--color-bg); border: 1px solid var(--color-neutral-400); font-size: 12px; }
.enrichir-synchro i { width: 8px; height: 8px; background: var(--color-text); flex: none; }
.enrichir-synchro > span { flex: 1; }
.enrichir-plus { position: absolute; right: 16px; bottom: 16px; z-index: 4; width: 44px; height: 44px; display: grid; place-items: center; border: 0; background: var(--color-accent); color: #fff; box-shadow: 0 3px 10px rgba(45, 43, 43, 0.3); cursor: pointer; }
.inspecteur { border-left: 2px solid var(--color-neutral-400); background: var(--color-bg); overflow: auto; font-size: 13px; }
.inspecteur-tete { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 2px solid var(--color-text); }
.inspecteur-tete b { flex: 1; font: 800 13px/1.2 var(--font-title); text-transform: uppercase; letter-spacing: 0.04em; }
.inspecteur-vide p { padding: 16px 14px; line-height: 1.5; }
.inspecteur-reserve { padding: 12px 14px; border-bottom: 1px solid var(--color-neutral-400); }
.inspecteur-reserve p { margin: 0 0 8px; line-height: 1.5; }
.inspecteur-form--reserve .inspecteur-champs { opacity: 0.45; }
.inspecteur-champs { padding: 12px 14px; display: flex; flex-direction: column; gap: 12px; }
.inspecteur-pied { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--color-neutral-400); }
.enrichir-retirer { color: var(--color-accent-700); }
.insp-champ { display: flex; flex-direction: column; gap: 5px; }
.insp-champ--separe { border-top: 1px solid var(--color-neutral-400); padding-top: 12px; }
.insp-label { display: flex; justify-content: space-between; font-size: 12px; color: var(--color-text-muted); }
.insp-oblig { font-size: 11px; color: var(--color-text-muted); }
.insp-champ--vide .insp-oblig { color: var(--color-accent-700); }
.insp-lien { margin-left: auto; padding: 0; border: 0; background: none; font: 600 12px/1 var(--font-body); color: var(--color-accent-700); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.insp-label .insp-droite + .insp-lien { margin-left: 10px; }
.insp-aide { line-height: 1.4; }
.insp-champ .input { min-height: 34px; font-size: 13px; }
.insp-champ textarea.input { min-height: 60px; resize: vertical; }
.insp-radios { display: flex; flex-direction: column; gap: 4px; }
.insp-radios .radio { min-height: 30px; }
/* Segments de l'inspecteur : une grille aux cases égales (--seg-n colonnes), les libellés
   longs passent à la ligne dans leur case au lieu de rejeter la dernière option seule. */
.seg--insp { display: grid; grid-template-columns: repeat(var(--seg-n, 3), minmax(0, 1fr)); gap: 1px; border-radius: 0; background: var(--color-neutral-400); border-color: var(--color-neutral-400); }
.seg--insp .seg-opt { justify-content: center; text-align: center; white-space: normal; min-height: 30px; padding: 5px 6px; border-left: 0; background: var(--color-bg); font-size: 12px; line-height: 1.25; }
.seg--insp .chip { margin-left: 5px; font-size: 8.5px; padding: 2px 4px; }
.insp-fichier { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.insp-geo { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.insp-geo span { display: flex; flex-direction: column; gap: 2px; }
.insp-geo i { font-size: 10px; font-style: normal; color: var(--color-text-muted); }
.insp-geo .input { min-height: 30px; padding: 3px 6px; font-size: 12px; min-width: 0; }
.insp-plage { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center; }
.insp-deux { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.insp-mots { padding: 8px 10px; background: #fff; border: 1px solid var(--color-neutral-400); font-size: 12.5px; line-height: 1.45; }
.insp-fournisseur { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.insp-fournisseur i { width: 8px; height: 8px; background: var(--color-text); }
.insp-rappel { padding: 10px 12px; border: 1px solid var(--color-neutral-400); background: var(--color-surface); font-size: 12.5px; line-height: 1.5; }
.insp-erreurs { display: flex; flex-direction: column; gap: 4px; padding: 8px 10px; background: color-mix(in srgb, var(--color-accent-700) 10%, transparent); border-left: 3px solid var(--color-accent-700); font-size: 12px; color: var(--color-accent-700); }
.input--synchro { background: var(--color-surface); }
.pastilles { display: flex; flex-wrap: wrap; gap: 4px; }
.pastille { padding: 4px 8px; border: 1px solid var(--color-neutral-400); background: transparent; font: 11.5px/1.2 var(--font-body); color: var(--color-text); cursor: pointer; }
.pastille--on { border-color: var(--color-text); background: var(--color-text); color: var(--color-bg); }
.pastilles--petites .pastille { font-size: 11px; padding: 3px 7px; cursor: default; }
.pastilles--grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.pastilles--grille .pastille { min-height: 30px; padding: 5px 4px; text-align: center; }
.insp-champ .curseur__piste { margin-top: 2px; }
.reponse-champ { display: flex; flex-direction: column; gap: 3px; }
.inspecteur-pied .btn { white-space: nowrap; }
.galerie-lignes, .etapes, .reponses { border-top: 2px solid var(--color-text); }
.galerie-ligne { display: grid; grid-template-columns: 14px 44px minmax(0, 1fr) 24px; gap: 8px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--color-neutral-400); }
.galerie-ligne--deplacee { background: var(--color-accent-50, #fff2ef); }
.galerie-poignee { color: var(--color-text-muted); cursor: grab; }
.galerie-vue { position: relative; width: 44px; height: 32px; background: var(--color-surface) center / cover; border: 1px solid rgba(32, 30, 29, 0.3); cursor: pointer; }
.galerie-vue i { position: absolute; left: -1px; top: -1px; padding: 2px 3px; background: var(--color-accent); color: #fff; font: 800 9px/1 var(--font-title); font-style: normal; white-space: nowrap; }
.galerie-ligne .input { min-height: 30px; font-size: 12px; padding: 3px 7px; }
.etape { display: grid; grid-template-columns: 14px 22px minmax(0, 1fr) 34px 24px; gap: 8px; align-items: start; padding: 8px 0; border-bottom: 1px solid var(--color-neutral-400); }
.etape-num { width: 22px; height: 22px; display: grid; place-items: center; background: var(--color-accent); color: #fff; font: 800 11px/1 var(--font-title); }
.etape textarea.input { min-height: 0; padding: 4px 7px; font-size: 12px; resize: none; }
.reponse { padding: 8px 0; border-bottom: 1px solid var(--color-neutral-400); display: flex; flex-direction: column; gap: 5px; }
.reponse-tete { display: flex; gap: 4px; align-items: center; }
.reponse-tete .input { min-height: 30px; font-size: 12.5px; padding: 3px 7px; }
.reponse-fleche { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--color-text-muted); }
.reponse-fleche .input { min-height: 26px; font-size: 11.5px; padding: 2px 7px; }
.reponse-detail { display: flex; flex-direction: column; gap: 5px; }
.reponse-detail .input { min-height: 28px; font-size: 12px; padding: 3px 7px; }
.dialogue--large .dialogue__cadre { width: min(520px, 100%); }
.publier-compteurs { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--color-neutral-400); margin: 14px 0; }
.publier-compteurs > div { padding: 10px 12px; }
.publier-compteurs > div + div { border-left: 1px solid var(--color-neutral-400); }
.publier-compteurs b { display: block; font: 800 22px/1 var(--font-title); }
.publier-compteurs span { font-size: 12px; color: var(--color-text-muted); }
.publier-lignes { border-top: 2px solid var(--color-text); max-height: 40vh; overflow: auto; }
.publier-ligne { display: grid; grid-template-columns: 70px 1fr auto; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--color-neutral-400); align-items: center; font-size: 13.5px; }
.publier-chip { font: 800 10px/1 var(--font-title); letter-spacing: 0.06em; text-transform: uppercase; padding: 4px 6px; text-align: center; }
.publier-chip[data-ton="sombre"] { background: var(--color-text); color: var(--color-bg); }
.publier-chip[data-ton="gris"] { background: var(--color-neutral-300); }
.publier-chip[data-ton="vide"] { border: 1px solid var(--color-neutral-400); }
.publier-retire { color: var(--color-text-muted); text-decoration: line-through; }
.publier-bloques { margin-top: 12px; color: var(--color-accent-700); }
.remap-pages { border-top: 2px solid var(--color-text); font-size: 13px; }
.remap-page { display: grid; grid-template-columns: 1fr 24px 1fr auto; gap: 8px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--color-neutral-400); }
.remap-page--perdue { background: color-mix(in srgb, var(--color-accent) 7%, transparent); }
.remap-lignes { border-top: 2px solid var(--color-text); }
.remap-ligne { display: grid; grid-template-columns: 36px minmax(0, 1fr) 120px auto; gap: 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--color-neutral-400); font-size: 13px; }
.remap-ligne img { width: 36px; height: 48px; object-fit: cover; background: #fff; border: 1px solid var(--color-neutral-400); }
.remap-ligne__texte { min-width: 0; display: flex; flex-direction: column; }
.remap-ligne__texte b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.remap-ligne .seg-opt { font-size: 12px; padding: 5px 9px; }
table.interactions td, table.interactions th { vertical-align: middle; }
.chip[data-ton="gris"] { background: var(--color-neutral-300); }
.chip[data-ton="vide"] { border: 1px solid var(--color-neutral-400); color: var(--color-text-muted); }
@media (max-width: 1100px) {
  .enrichir-corps, .enrichir[data-mode="edition"] .enrichir-corps { grid-template-columns: 132px minmax(0, 1fr); }
  .inspecteur { grid-column: 1 / -1; border-left: 0; border-top: 2px solid var(--color-text); }
}
@media (max-width: 760px) {
  .enrichir-tete { flex-wrap: wrap; height: auto; padding: 10px 14px; }
  .enrichir-appareil, .enrichir-histo { display: none; }
  .enrichir-corps, .enrichir[data-mode="edition"] .enrichir-corps { display: flex; flex-direction: column; }
  .enrichir-gauche { border-right: 0; border-bottom: 1px solid var(--color-neutral-400); max-height: 40vh; }
  .enrichir[data-mode="edition"] .enrichir-pages { flex-direction: row; overflow-x: auto; }
  .enrichir[data-mode="edition"] .planches { flex-direction: row; }
  .enrichir[data-mode="edition"] .planche-vues { height: 42px; }
  .enrichir[data-mode="edition"] .planche-vues i { width: 30px; height: 42px; }
  .enrichir-scene { height: 330px; min-height: 0; flex: none; }
  /* La synchronisation des étiquettes se pilote depuis un ordinateur (ou l'inspecteur). */
  .enrichir-synchro { display: none; }
  .inspecteur { border-top: 2px solid var(--color-text); font-size: 14px; }
  .insp-champ .input { min-height: 44px; font-size: 16px; }
  .remap-ligne { grid-template-columns: 36px minmax(0, 1fr); }
}

/* ── Cases à cocher ────────────────────────────────────────────────────── */
/* Le composant .radio sert aussi aux cases : une case se dessine carrée et cochée,
   un rond plein voudrait dire « un choix parmi d'autres ». */
.radio input[type="checkbox"] + .dot { border-radius: 3px; }
.radio input[type="checkbox"]:checked + .dot {
  box-shadow: none;
  background: var(--color-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / 11px 11px no-repeat;
}

/* ── Étagères : contenu ─────────────────────────────────────────────────── */
/* Un catalogue par rang, son titre entier sur la première ligne, la collection sur la seconde. */
.etagere-rang { display: grid; grid-template-columns: 18px 26px minmax(0, 1fr) auto; grid-template-areas: "num mini texte actions" ". . collection collection"; gap: 6px 12px; align-items: center; }
.etagere-rang__numero { grid-area: num; }
.etagere-rang .mini { grid-area: mini; }
.etagere-rang__texte { grid-area: texte; }
.etagere-rang__actions { grid-area: actions; }
.etagere-rang__collection { grid-area: collection; flex: none; display: flex; align-items: center; gap: 8px; }
.etagere-rang__collection > span { flex: none; font-size: 11.5px; color: var(--color-text-muted); }
.etagere-rang__collection .input { flex: 1; min-width: 0; max-width: 220px; }
.reglage-actions .btn { flex: none; white-space: nowrap; }

/* ── Cartes de couleur : alignées quelle que soit leur place dans la grille ─ */
/* La règle générique « .field + .field » des réglages décalait la deuxième carte. */
.reglage .theme-color-grid .field, .reglage .theme-color-grid .field + .field { margin-top: 0; }
/* Langues du lecteur : deux colonnes, les noms ne se coupent plus. */
.reglage .theme-language-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* ── Dépôt d'image ─────────────────────────────────────────────────────── */
/* Même geste que le dépôt de PDF : une zone en pointillés qui reçoit le fichier
   glissé ou cliqué, l'aperçu de l'image en place à gauche. */
/* « .field > label » impose bloc, 12 px et gris à toute étiquette directe : la zone reprend la main. */
.depot-image, .field > .depot-image { position: relative; display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px; align-items: center; margin: 0; padding: 12px; border: 2px dashed color-mix(in srgb, var(--color-text) 40%, transparent); background: var(--color-surface); color: var(--color-text); font-size: 12.5px; cursor: pointer; }
.depot-image input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.depot-image:hover { border-color: var(--color-text); }
.depot-image:focus-within { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.depot-image[data-survol] { border-style: solid; border-color: var(--color-accent); background: var(--color-accent-100); }
.depot-image[data-refus] { border-style: solid; border-color: var(--color-accent-700); }
.depot-image__apercu { width: 96px; height: 64px; display: grid; place-items: center; overflow: hidden; border: 1px solid var(--color-divider); background: var(--color-neutral-200) center / cover no-repeat; color: var(--color-text-muted); }
.depot-image__vide { display: grid; place-items: center; font-size: 11px; text-align: center; }
.depot-image__apercu img { max-width: 86%; max-height: 80%; object-fit: contain; }
.depot-image__texte { display: flex; flex-direction: column; gap: 3px; min-width: 0; font-size: 12.5px; line-height: 1.35; color: var(--color-text); }
.depot-image__texte b { font: 800 14px/1.2 var(--font-heading); letter-spacing: -0.01em; }
.depot-image__aide { color: var(--color-text-muted); }
.depot-image__lien { color: var(--color-accent-700); text-decoration: underline; text-underline-offset: 2px; }
.depot-image__nom { color: var(--color-text-muted); overflow-wrap: anywhere; }
.depot-image--rempli .depot-image__nom { color: var(--color-text); }
.depot-image--logo .depot-image__apercu, .depot-image--carre .depot-image__apercu { background-color: #fff; background-size: contain; }
.depot-image--carre, .field > .depot-image--carre { grid-template-columns: 64px minmax(0, 1fr); }
.depot-image--carre .depot-image__apercu { width: 64px; height: 64px; }
.depot-image:has(input:disabled) { cursor: default; opacity: 0.55; }
.field--reserve .depot-image { opacity: 0.45; }
.depot-fond { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
@media (max-width: 480px) {
  .depot-image, .field > .depot-image { grid-template-columns: 1fr; }
  .depot-image__apercu { width: 100%; }
}