/* ============================================================
   PANEL JB IMMO — feuille de style (socle repris de RT Toiture)
   Thème MYDMC : sombre #1a1a1a / #2A2A2A, accent doré, verre dépoli
   (voir le bloc « THÈME VERRE DÉPOLI » en fin de fichier).
   Pensée pour un artisan qui ouvre ça deux fois par mois :
   gros clics, libellés explicites, aucune icône sans texte.
   ============================================================ */

:root {
  --ink: #141312;
  --ink-soft: rgba(255, 255, 255, 0.045);
  --slate-deep: #2a2a2a;
  --slate-mid: #333130;
  --line: rgba(255, 255, 255, 0.09);

  --copper: #c9a24c;
  --copper-bright: #dcb965;
  --copper-deep: #a8842f;

  --paper: #f6f1e9;
  --muted: #b5ada3;
  --faint: #8c847a;

  --ok: #4ea87a;
  --warn: #d9a441;
  --danger: #d9614f;

  --radius: 4px;
  --sidebar-w: 268px;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--ink);
  color: var(--paper);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--copper);
  text-decoration: none;
}

a:hover {
  color: var(--copper-bright);
}

:focus-visible {
  outline: 2px solid var(--copper-bright);
  outline-offset: 2px;
}

h1,
h2,
h3 {
  margin: 0;
  line-height: 1.2;
  font-weight: 700;
}

/* ============================================================
   MISE EN PAGE & NAVIGATION
   ------------------------------------------------------------
   Deux dispositions à partir d'un seul balisage :

   • Mobile  : barre du haut (☰ + titre de l'écran), menu latéral en
               tiroir, barre du bas à cinq raccourcis.
   • Desktop : le même menu, fixe à gauche ; barres du haut et du bas
               masquées.

   Toutes les zones tactiles font au moins 48 px de haut : le panel
   s'utilise sur un chantier, parfois avec des gants.
   ============================================================ */

:root {
  --barre-haut-h: 58px;
  --barre-bas-h: 64px;
  --menu-l: 300px;
  --tactile-min: 48px;
}

.layout {
  min-height: 100vh;
}

.main {
  padding: calc(var(--barre-haut-h) + 18px) 18px
           calc(var(--barre-bas-h) + 90px);
  max-width: 1080px;
}

/* ── Barre du haut (mobile) ──────────────────────────────── */

.barre-haut {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 40;
  height: var(--barre-haut-h);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 6px;
  background: var(--ink-soft);
  border-bottom: 1px solid var(--line);
}

.bouton-menu,
.bouton-fermer,
.barre-haut-lien {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--tactile-min);
  height: var(--tactile-min);
  flex-shrink: 0;
  border: none;
  background: transparent;
  color: var(--paper);
  cursor: pointer;
  border-radius: var(--radius);
}

.bouton-menu:hover,
.bouton-fermer:hover,
.barre-haut-lien:hover {
  background: var(--slate-deep);
  color: var(--copper-bright);
}

.barre-haut-titre {
  flex: 1;
  min-width: 0;
  font-size: 15px;
  font-weight: 600;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ico {
  width: 22px;
  height: 22px;
  display: block;
}

/* ── Menu latéral ────────────────────────────────────────── */

.menu-lateral {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 60;
  width: min(var(--menu-l), 88vw);
  background: var(--ink-soft);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;

  /* Fermé par défaut sur mobile ; la transition part de la gauche. */
  transform: translateX(-102%);
  transition: transform 0.26s cubic-bezier(0.22, 1, 0.36, 1);
}

.menu-lateral.ouvert {
  transform: none;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.5);
}

.menu-voile {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.menu-entete {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 8px 14px 18px;
  border-bottom: 1px solid var(--line);
}

.menu-marque {
  display: flex;
  align-items: center;
  gap: 11px;
  flex: 1;
  min-width: 0;
}

.menu-marque img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  flex-shrink: 0;
}

.menu-marque strong {
  display: block;
  font-size: 15px;
}

.menu-marque span span {
  display: block;
  font-size: 11px;
  color: var(--faint);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-top: 2px;
}

.menu-liste {
  flex: 1;
  padding: 8px 0 14px;
}

.menu-groupe {
  margin: 0;
  padding: 20px 18px 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--faint);
}

/* Une ligne de menu : icône, libellé, phrase d'aide, chevron. */
.menu-ligne {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 60px;
  padding: 10px 14px 10px 18px;
  color: var(--paper);
  transition: background 0.14s;
}

.menu-ligne:hover {
  background: var(--slate-deep);
  color: var(--paper);
}

.menu-ligne.actif {
  background: rgba(192, 130, 96, 0.12);
  box-shadow: inset 3px 0 0 var(--copper);
}

.menu-ligne.actif .menu-ligne-ico,
.menu-ligne.actif .menu-ligne-titre {
  color: var(--copper-bright);
}

.menu-ligne-ico {
  flex-shrink: 0;
  color: var(--muted);
  display: flex;
}

.menu-ligne-texte {
  flex: 1;
  min-width: 0;
}

.menu-ligne-titre {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.25;
}

.menu-ligne-aide {
  display: block;
  margin-top: 3px;
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--faint);
}

.menu-ligne-chevron {
  flex-shrink: 0;
  color: var(--line);
  display: flex;
}

.menu-ligne-chevron .ico {
  width: 16px;
  height: 16px;
}

.menu-ligne-simple {
  min-height: var(--tactile-min);
}

/* Chiffre des nouvelles demandes (menu, barre du bas). Rouge plus soutenu que --danger : le chiffre blanc, petit,
   reste lisible (5,6:1 au lieu de 3,6:1 ; même rouge que la pastille « Livraison »). Audit du 07.10.2026. */
.pastille {
  background: #c62828;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  border-radius: 999px;
  padding: 1px 7px;
  min-width: 20px;
  text-align: center;
  line-height: 1.5;
}

.menu-pied {
  border-top: 1px solid var(--line);
  padding: 14px 0 18px;
}

.menu-pied-user {
  margin: 0 0 8px;
  padding: 0 18px;
  font-size: 13px;
}

.menu-pied-user strong {
  display: block;
}

.menu-pied-user span {
  color: var(--faint);
  font-size: 12px;
}

.menu-version {
  margin: 10px 18px 0;
  font-size: 11px;
  color: var(--faint);
  opacity: 0.7;
}

.menu-pied .signature-mydmc {
  margin: 14px 18px 0;
}

/* ── Barre du bas (mobile) ───────────────────────────────── */

.barre-bas {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 40;
  height: var(--barre-bas-h);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  background: var(--ink-soft);
  border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
}

.barre-bas-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: none;
  background: transparent;
  color: var(--muted);
  font-family: inherit;
  font-size: 10.5px;
  cursor: pointer;
  padding: 0 2px;
  transition: color 0.14s;
}

.barre-bas-item:hover {
  color: var(--paper);
}

.barre-bas-item.actif {
  color: var(--copper);
}

.barre-bas-ico {
  position: relative;
  display: flex;
}

.barre-bas-libelle {
  line-height: 1;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pastille-flottante {
  position: absolute;
  top: -6px;
  right: -10px;
  font-size: 10px;
  padding: 0 5px;
  min-width: 17px;
}

/* ── Desktop : menu fixe, barres masquées ────────────────── */

@media (min-width: 900px) {
  .barre-haut,
  .barre-bas,
  .menu-voile,
  .bouton-fermer {
    display: none !important;
  }

  .menu-lateral {
    transform: none;
    box-shadow: none;
    width: var(--menu-l);
  }

  .main {
    margin-left: var(--menu-l);
    /* Sur un écran de travail, l'en-tête n'a pas besoin de respirer
       autant : ces pixels valent une demi-ligne de tableau. */
    padding: 20px 34px 90px;
  }

  .page-head {
    margin-bottom: 14px;
  }
}

/* ============================================================
   CARTES & FORMULAIRES
   ============================================================ */

/* L'attribut `hidden` doit toujours l'emporter.
   Sans cette règle, une classe qui pose `display: flex` — .actions-bar,
   .dz-preview — annule le `hidden` du navigateur : la barre « Ajouter
   ces photos » s'affichait alors en permanence, sans photo à ajouter. */
[hidden] {
  display: none !important;
}

.card {
  background: var(--ink-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 24px;
  margin-bottom: 20px;
}

.card > h2 {
  font-size: 17px;
  margin-bottom: 4px;
}

.card-hint {
  color: var(--muted);
  font-size: 13px;
  margin: 0 0 18px;
  max-width: 72ch;
}

.form-field {
  margin-bottom: 17px;
}

.form-field label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--paper);
}

.form-field input[type="text"],
.form-field input[type="email"],
.form-field input[type="tel"],
.form-field input[type="url"],
.form-field input[type="password"],
.form-field input[type="number"],
.form-field select,
.form-field textarea {
  width: 100%;
  background: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--paper);
  padding: 10px 13px;
  font-size: 14px;
  font-family: inherit;
  transition: border-color 0.16s;
}

.form-field textarea {
  resize: vertical;
  line-height: 1.65;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  border-color: var(--copper);
  outline: none;
}

.form-field .hint {
  display: block;
  font-size: 12px;
  color: var(--faint);
  margin-top: 5px;
}

.form-row {
  display: grid;
  gap: 0 18px;
  grid-template-columns: 1fr 1fr;
}

@media (max-width: 720px) {
  .form-row {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   BOUTONS
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  padding: 11px 20px;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.16s, border-color 0.16s, color 0.16s;
}

.btn-primary {
  background: var(--copper);
  color: var(--ink);
}

.btn-primary:hover {
  background: var(--copper-bright);
  color: var(--ink);
}

.btn-ghost {
  background: transparent;
  border-color: var(--line);
  color: var(--paper);
}

.btn-ghost:hover {
  border-color: var(--copper);
  color: var(--copper-bright);
}

.btn-danger {
  background: transparent;
  border-color: rgba(217, 97, 79, 0.45);
  color: #e89484;
}

.btn-danger:hover {
  background: var(--danger);
  border-color: var(--danger);
  color: #fff;
}

.btn-sm {
  padding: 9px 14px;
  font-size: 13px;
}

/* Sur mobile, tout ce qui se touche fait au moins 48 px de haut. */
@media (max-width: 899px) {
  .btn {
    min-height: var(--tactile-min);
  }

  .btn-sm {
    min-height: 42px;
  }

  .form-field input,
  .form-field select,
  .form-field textarea {
    min-height: var(--tactile-min);
    font-size: 16px; /* en dessous de 16px, iOS zoome à la mise au point */
  }

  .arrow-btn {
    width: var(--tactile-min);
    height: 42px;
  }

  .actions-bar .btn {
    flex: 1 1 auto;
  }
}

.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.actions-bar {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 8px;
}

/* Barre d'enregistrement collée en bas — toujours à portée de pouce.
   Sur mobile elle se cale AU-DESSUS de la barre de raccourcis, pour ne
   jamais être recouverte ni sortir de l'écran. */
.save-bar {
  position: sticky;
  bottom: calc(var(--barre-bas-h) + env(safe-area-inset-bottom));
  background: linear-gradient(to top, var(--ink) 62%, transparent);
  padding: 20px 0 16px;
  margin-top: 26px;
  z-index: 20;
}

.save-bar .btn {
  width: 100%;
  min-height: var(--tactile-min);
}

@media (min-width: 900px) {
  .save-bar {
    bottom: 0;
  }

  .save-bar .btn {
    width: auto;
  }
}

/* ============================================================
   ALERTES
   ============================================================ */

.alert {
  border-radius: var(--radius);
  padding: 13px 17px;
  margin-bottom: 20px;
  font-size: 14px;
  border: 1px solid;
}

.alert-success {
  background: rgba(78, 168, 122, 0.12);
  border-color: rgba(78, 168, 122, 0.4);
  color: #9fdcbd;
}

.alert-error {
  background: rgba(217, 97, 79, 0.12);
  border-color: rgba(217, 97, 79, 0.4);
  color: #f0a99c;
}

.alert-info {
  background: rgba(192, 130, 96, 0.1);
  border-color: rgba(192, 130, 96, 0.35);
  color: var(--copper-bright);
}

/* ============================================================
   TABLEAUX
   ============================================================ */

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.table th {
  text-align: left;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--faint);
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  font-weight: 700;
}

.table td {
  padding: 13px 12px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}

.table tr:last-child td {
  border-bottom: none;
}

.pill {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  letter-spacing: 0.04em;
}

.pill-ok {
  background: rgba(78, 168, 122, 0.16);
  color: #8fd3b2;
}

.pill-warn {
  background: rgba(217, 164, 65, 0.16);
  color: #e9c37c;
}

.pill-off {
  background: rgba(153, 163, 172, 0.14);
  color: var(--muted);
}

.pill-role {
  background: rgba(192, 130, 96, 0.16);
  color: var(--copper-bright);
}

/* ============================================================
   RÉALISATIONS — dépôt de photos + grille de cartes
   ============================================================ */

.dropzone {
  border: 2px dashed var(--line);
  border-radius: var(--radius);
  padding: 34px 24px;
  text-align: center;
  transition: border-color 0.18s, background 0.18s;
  cursor: pointer;
  display: block;
}

.dropzone:hover,
.dropzone.is-over {
  border-color: var(--copper);
  background: rgba(192, 130, 96, 0.06);
}

.dropzone-icon {
  font-size: 30px;
  line-height: 1;
  margin-bottom: 10px;
}

.dropzone strong {
  display: block;
  font-size: 16px;
  margin-bottom: 6px;
}

.dropzone span {
  color: var(--muted);
  font-size: 13px;
}

.dropzone input[type="file"] {
  display: none;
}

/* Aperçu des fichiers choisis, avant envoi */
.dz-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.dz-thumb {
  width: 84px;
  height: 84px;
  border-radius: var(--radius);
  object-fit: cover;
  border: 1px solid var(--line);
}

.realisations-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(288px, 1fr));
  gap: 18px;
}

.rea-card {
  background: var(--ink-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.rea-photo {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--slate-deep);
  overflow: hidden;
}

.rea-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.rea-position {
  position: absolute;
  top: 8px;
  left: 8px;
  background: rgba(16, 20, 24, 0.88);
  color: var(--copper-bright);
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
}

.rea-body {
  padding: 15px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 11px;
  flex: 1;
}

.rea-body .form-field {
  margin-bottom: 0;
}

.rea-tools {
  display: flex;
  align-items: center;
  gap: 7px;
  padding-top: 4px;
  margin-top: auto;
  border-top: 1px solid var(--line);
}

.arrow-btn {
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--paper);
  width: 34px;
  height: 32px;
  font-size: 15px;
  cursor: pointer;
  transition: border-color 0.16s, color 0.16s;
}

.arrow-btn:hover:not(:disabled) {
  border-color: var(--copper);
  color: var(--copper-bright);
}

.arrow-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.rea-tools .spacer {
  flex: 1;
}

/* État vide */
.empty-state {
  text-align: center;
  padding: 44px 24px;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--ink-soft);
}

.empty-state strong {
  display: block;
  color: var(--paper);
  font-size: 16px;
  margin-bottom: 7px;
}

/* ============================================================
   PRESTATIONS — liste dépliable + galerie par prestation
   ============================================================ */

.presta {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--ink);
  margin-bottom: 12px;
  overflow: hidden;
}

.presta[open] {
  border-color: rgba(192, 130, 96, 0.45);
}

.presta summary {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 18px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.presta summary::-webkit-details-marker {
  display: none;
}

.presta summary:hover {
  background: var(--slate-deep);
}

.presta-num {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--copper);
  font-size: 13px;
  flex-shrink: 0;
}

.presta-titre {
  font-weight: 600;
  flex: 1;
  min-width: 0;
}

.presta-meta {
  font-size: 12px;
  color: var(--faint);
  flex-shrink: 0;
}

.presta-corps {
  padding: 4px 18px 18px;
  border-top: 1px solid var(--line);
}

.presta-galerie {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 15px 16px;
  margin-top: 6px;
  background: var(--ink-soft);
}

.label-galerie {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 4px;
}

.photo-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.photo-item {
  position: relative;
  width: 104px;
  height: 78px;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  cursor: grab;
}

.photo-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

/* Pastille indiquant qu'une vignette est une vidéo. */
.photo-video-marque {
  position: absolute;
  bottom: 4px;
  left: 4px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(16, 20, 24, 0.85);
  color: var(--copper-bright);
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.photo-suppr {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: none;
  background: rgba(16, 20, 24, 0.85);
  color: var(--paper);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.16s;
}

.photo-suppr:hover {
  background: var(--danger);
}

/* Élément en cours de glissement */
.est-glisse {
  opacity: 0.45;
}

/* ============================================================
   APERÇU D'IMAGE DANS UN CHAMP
   ============================================================ */

.img-preview {
  margin-bottom: 9px;
  display: flex;
  align-items: center;
  gap: 13px;
}

.img-preview img {
  width: 108px;
  height: 78px;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--slate-deep);
}

.img-preview .path {
  font-size: 12px;
  color: var(--faint);
  word-break: break-all;
}

/* ============================================================
   TABLEAU DE BORD
   ============================================================ */

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 16px;
  margin-bottom: 26px;
}

.stat {
  background: var(--ink-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 19px 20px;
}

.stat .value {
  font-size: 30px;
  font-weight: 800;
  color: var(--copper);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.stat .label {
  font-size: 13px;
  color: var(--muted);
  margin-top: 8px;
}

.quick-links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
}

.quick-link {
  display: block;
  background: var(--ink-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 17px 19px;
  color: var(--paper);
  transition: border-color 0.16s, transform 0.16s;
}

.quick-link:hover {
  border-color: var(--copper);
  color: var(--paper);
  transform: translateY(-2px);
}

.quick-link strong {
  display: block;
  margin-bottom: 4px;
}

.quick-link span {
  font-size: 13px;
  color: var(--muted);
}

/* ============================================================
   MESSAGES REÇUS
   ============================================================ */

.msg {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--ink-soft);
  margin-bottom: 13px;
  overflow: hidden;
}

/* Un message non lu est signalé par un badge « Non lu » explicite dans son
   en-tête (voir views/sections/messages.php) plutôt que par un simple
   liseré de couleur : c'est lisible sans avoir à deviner le code couleur. */
.msg.non-lu {
  border-color: rgba(192, 130, 96, 0.45);
}

.msg summary {
  padding: 15px 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 13px;
  flex-wrap: wrap;
  list-style: none;
}

.msg summary::-webkit-details-marker {
  display: none;
}

.msg summary .who {
  font-weight: 600;
}

.msg summary .when {
  color: var(--faint);
  font-size: 13px;
  margin-left: auto;
}

.msg-body {
  padding: 0 18px 18px;
  border-top: 1px solid var(--line);
  padding-top: 16px;
}

.msg-body dl {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 7px 14px;
  margin: 0 0 15px;
  font-size: 14px;
}

.msg-body dt {
  color: var(--faint);
}

.msg-body .texte {
  white-space: pre-wrap;
  background: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
  line-height: 1.7;
}

/* ============================================================
   CONNEXION
   ============================================================ */

.login-wrap {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
}

.login-card {
  width: 100%;
  max-width: 400px;
  background: var(--ink-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 36px 32px;
}

.login-card img {
  width: 62px;
  height: 62px;
  object-fit: contain;
  margin-bottom: 18px;
}

.login-card h1 {
  font-size: 21px;
  margin-bottom: 6px;
}

.login-card .sub {
  color: var(--muted);
  font-size: 14px;
  margin: 0 0 26px;
}

/* ============================================================
   CONNEXION EN DEUX ÉTAPES — saisie du code reçu par email
   ============================================================ */

.champ-code {
  font-size: 30px !important;
  letter-spacing: 0.42em;
  text-align: center;
  font-variant-numeric: tabular-nums;
  padding: 14px 10px !important;
  font-weight: 700;
}

.champ-code::placeholder {
  letter-spacing: 0.3em;
  color: var(--faint);
  font-weight: 400;
}

.case-a-cocher {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  margin: 4px 0 20px;
  cursor: pointer;
  font-size: 13px;
  line-height: 1.5;
}

.case-a-cocher input {
  margin-top: 3px;
  width: 17px;
  height: 17px;
  accent-color: var(--copper);
  flex-shrink: 0;
  cursor: pointer;
}

.case-a-cocher em {
  display: block;
  font-style: normal;
  color: var(--faint);
  font-size: 12px;
  margin-top: 3px;
}

.liens-secondaires {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.lien-bouton {
  background: none;
  border: none;
  padding: 0;
  color: var(--copper);
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.lien-bouton:hover {
  color: var(--copper-bright);
}

/* ============================================================
   SOUS-BLOC REPLIABLE (réglages secondaires d'une carte)
   ============================================================ */

.sous-bloc {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin: 4px 0 14px;
  background: var(--ink-soft);
}

.sous-bloc summary {
  padding: 12px 15px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  list-style: none;
  min-height: var(--tactile-min);
  display: flex;
  align-items: center;
}

.sous-bloc summary::-webkit-details-marker {
  display: none;
}

.sous-bloc summary::before {
  content: "▸";
  margin-right: 9px;
  color: var(--copper);
  transition: transform 0.16s;
  display: inline-block;
}

.sous-bloc[open] summary::before {
  transform: rotate(90deg);
}

.sous-bloc summary:hover {
  color: var(--paper);
}

.sous-bloc-corps {
  padding: 4px 15px 12px;
  border-top: 1px solid var(--line);
}

/* ============================================================
   ONGLETS

   Écran « Page contact », d'après l'éditeur Duda : Champs /
   Soumission / Intégrations. Sans JavaScript, tous les volets
   restent visibles — on ne cache jamais un réglage derrière un
   script qui pourrait ne pas se charger.
   ============================================================ */

.onglets {
  display: flex;
  gap: 4px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.onglet {
  flex-shrink: 0;
  padding: 12px 18px;
  min-height: var(--tactile-min);
  border: none;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--faint);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.16s, border-color 0.16s;
}

.onglet:hover {
  color: var(--paper);
}

.onglet.actif {
  color: var(--copper);
  border-bottom-color: var(--copper);
}

/* ============================================================
   TABLEAU COMPACT — « une information = une ligne »

   Règle générale du panel : un réglage tient sur une ligne, jamais
   dans une carte, sauf s'il porte une image. Sept champs de
   formulaire doivent tenir sur un écran sans défiler ; en cartes,
   il en fallait trois.
   ============================================================ */

/* Sur un écran de portable, chaque pixel au-dessus du tableau est une
   ligne de moins visible : on resserre l'en-tête de page et la carte qui
   entoure un tableau compact. */
.card:has(.tableau-compact) {
  padding: 16px 18px;
}

.card:has(.tableau-compact) > h2 {
  margin-bottom: 2px;
}

.tableau-compact {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

/* En-tête : le texte d'aide n'est écrit QU'UNE FOIS, ici. Répété sous
   chaque ligne, il triplait la hauteur du tableau pour ne rien
   apprendre de plus. */
.tableau-entete {
  display: grid;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  background: var(--slate-deep);
  border-bottom: 1px solid var(--line);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--faint);
}

.ligne-compacte {
  display: grid;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  padding: 6px 10px;
  border-bottom: 1px solid var(--line);
  background: var(--ink);
}

.ligne-compacte:last-child {
  border-bottom: none;
}

.ligne-compacte:hover {
  background: var(--ink-soft);
}

/* Colonnes du tableau des champs.
   Type et largeur partagent une cellule : ils décrivent tous deux la
   FORME du champ, et les garder ensemble permet de les déplacer d'un
   bloc sur mobile. */
.grille-champs {
  grid-template-columns: 34px minmax(110px, 1fr) 218px 88px 96px 104px;
}

.grille-champs > .cellule-type {
  display: flex;
  gap: 6px;
}

.grille-champs > .cellule-type select:first-child {
  flex: 1 1 auto;
}

.grille-champs > .cellule-type select:last-child {
  flex: 0 0 84px;
}

/* Menus déroulants dans une ligne de tableau : même gabarit que les
   champs texte, sans la hauteur d'un champ de formulaire classique. */
.ligne-compacte select {
  width: 100%;
  padding: 8px 6px;
  font-size: 13px;
  background: var(--ink-soft);
  border: 1px solid transparent;
  border-radius: var(--radius);
  color: var(--paper);
  font-family: inherit;
}

.ligne-compacte select:hover {
  border-color: var(--line);
}

.ligne-compacte select:focus {
  border-color: var(--copper);
  outline: none;
}

/* Ligne supplémentaire : options d'une liste, texte d'un consentement.
   Elle ne s'affiche que pour les types qui en ont besoin — les autres
   champs gardent leur ligne unique. */
.ligne-extra {
  padding: 10px 14px 12px 48px;
  border-bottom: 1px solid var(--line);
  background: var(--ink-soft);
}

.ligne-extra label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 5px;
}

.ligne-extra textarea {
  width: 100%;
  background: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--paper);
  padding: 8px 10px;
  font-size: 13px;
  font-family: inherit;
  resize: vertical;
}

.ligne-extra textarea:focus {
  border-color: var(--copper);
  outline: none;
}

.ligne-extra .hint {
  display: block;
  margin-top: 5px;
  font-size: 12px;
  color: var(--faint);
}

.ligne-extra code {
  background: var(--slate-deep);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 12px;
}

/* Les deux bascules sont groupées dans le balisage pour pouvoir être
   déplacées ensemble sur mobile. Sur desktop, `display: contents` les
   rend transparentes : leurs enfants redeviennent des cellules de la
   grille, chacune dans sa colonne. */
.grille-champs > .cellule-bascules {
  display: contents;
}

/* Colonnes d'une liste d'adresses : poignée · adresse · flèches + corbeille */
.grille-adresses {
  grid-template-columns: 34px 1fr 110px;
}

/* ── Éditeur de texte riche ────────────────────────────────── */

.champ-riche .editeur {
  background: var(--ink);
  border-radius: 0 0 var(--radius) var(--radius);
}

/* Quill pose ses propres bordures claires : on les repeint aux couleurs
   du panel plutôt que de charger un second thème. */
.champ-riche .ql-toolbar.ql-snow {
  border: 1px solid var(--line);
  border-radius: var(--radius) var(--radius) 0 0;
  background: var(--slate-deep);
  padding: 7px 8px;
}

.champ-riche .ql-container.ql-snow {
  border: 1px solid var(--line);
  border-top: none;
  border-radius: 0 0 var(--radius) var(--radius);
  font-family: inherit;
  font-size: 14.5px;
}

.champ-riche .ql-editor {
  min-height: var(--editeur-h, 260px);
  max-height: 420px;
  color: var(--paper);
  line-height: 1.65;
  padding: 14px 16px;
}

.champ-riche .ql-editor.ql-blank::before {
  color: var(--faint);
  font-style: normal;
}

.champ-riche .ql-editor h2 {
  font-size: 19px;
  font-weight: 700;
  margin: 18px 0 8px;
  color: var(--paper);
}

.champ-riche .ql-editor h3 {
  font-size: 16px;
  font-weight: 600;
  margin: 14px 0 6px;
  color: var(--paper);
}

.champ-riche .ql-editor a {
  color: var(--copper);
}

/* Icônes et libellés de la barre d'outils, en clair sur fond sombre. */
.champ-riche .ql-snow .ql-stroke { stroke: var(--muted); }
.champ-riche .ql-snow .ql-fill { fill: var(--muted); }
.champ-riche .ql-snow .ql-picker-label { color: var(--muted); }

.champ-riche .ql-snow .ql-toolbar button:hover .ql-stroke,
.champ-riche .ql-snow button.ql-active .ql-stroke,
.champ-riche .ql-snow .ql-picker-label:hover { stroke: var(--copper-bright); color: var(--copper-bright); }

.champ-riche .ql-snow .ql-toolbar button:hover .ql-fill,
.champ-riche .ql-snow button.ql-active .ql-fill { fill: var(--copper-bright); }

/* Les menus déroulants de Quill s'ouvrent en clair par défaut. */
.champ-riche .ql-snow .ql-picker-options {
  background: var(--slate-deep);
  border-color: var(--line);
}

.champ-riche .ql-snow .ql-picker-item { color: var(--muted); }
.champ-riche .ql-snow .ql-picker-item:hover { color: var(--copper-bright); }

/* La petite fenêtre d'ajout de lien. */
.champ-riche .ql-snow .ql-tooltip {
  background: var(--slate-deep);
  border-color: var(--line);
  color: var(--paper);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5);
}

.champ-riche .ql-snow .ql-tooltip input[type="text"] {
  background: var(--ink);
  border: 1px solid var(--line);
  color: var(--paper);
  border-radius: var(--radius);
  padding: 6px 8px;
}

/* Le textarea reste dans le formulaire, mais devient invisible dès que
   l'éditeur a pris la main. */
.editeur-source.editeur-cache {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ── Tableau de bord ───────────────────────────────────────── */

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

@media (max-width: 720px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.stat-carte {
  background: var(--ink-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 18px;
  color: inherit;
  display: block;
}

a.stat-carte:hover {
  border-color: var(--copper);
}

.stat-valeur {
  font-size: 30px;
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.stat-copper {
  color: var(--copper-bright);
}

.stat-libelle {
  margin-top: 4px;
  font-size: 12.5px;
  color: var(--faint);
}

/* Courbe des visites : un SVG de trente points ne justifie pas
   d'embarquer une bibliothèque de graphiques. */
.courbe {
  width: 100%;
  height: 140px;
  display: block;
  margin-top: 10px;
}

.courbe-aire {
  fill: rgba(192, 130, 96, 0.14);
  stroke: none;
}

.courbe-trait {
  fill: none;
  stroke: var(--copper);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.courbe-axe {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--faint);
  margin-top: 6px;
}

.grille-toppage {
  grid-template-columns: 1fr 120px 46px;
  min-height: 42px;
}

.toppage-nom {
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.toppage-barre {
  display: block;
  height: 6px;
  border-radius: 999px;
  background: var(--slate-deep);
  overflow: hidden;
}

.toppage-barre span {
  display: block;
  height: 100%;
  background: var(--copper);
}

.toppage-valeur {
  text-align: right;
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.derniere-demande {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--ink);
}

.derniere-demande .hint {
  display: block;
  margin-top: 2px;
}

/* ── Écran Référencement ───────────────────────────────────── */

/* Page · titre · description, une ligne par page. */
.grille-seo {
  grid-template-columns: 190px 1fr 1fr;
  align-items: start;
}

.grille-seo.ligne-compacte {
  padding: 10px;
}

.cellule-page {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 13px;
  padding-top: 6px;
}

.cellule-page a {
  font-size: 12px;
  color: var(--faint);
}

.cellule-page a:hover {
  color: var(--copper);
}

.cellule-seo {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Compteur de caractères : vert tant qu'on tient dans ce que Google
   affiche, orange au-delà. Pas de rouge — un titre long reste valide,
   il est seulement tronqué. */
.compteur {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  padding: 2px 7px;
  border-radius: 999px;
  white-space: nowrap;
}

.compteur-ok {
  color: var(--ok);
  background: rgba(78, 168, 122, 0.14);
}

.compteur-long {
  color: var(--warn);
  background: rgba(217, 164, 65, 0.16);
}

.compteur-auto {
  color: var(--faint);
  background: var(--slate-deep);
}

.liste-titre .compteur {
  margin-left: 8px;
  vertical-align: middle;
}

/* Aperçu du résultat Google : voir ce que verra l'internaute vaut
   mieux que compter des caractères dans sa tête. */
.apercu-google {
  margin-top: 18px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  max-width: 600px;
}

.apercu-url {
  font-size: 12px;
  color: #202124;
  margin-bottom: 2px;
}

.apercu-titre {
  font-size: 18px;
  line-height: 1.3;
  color: #1a0dab;
  margin-bottom: 3px;
}

.apercu-desc {
  font-size: 13px;
  line-height: 1.5;
  color: #4d5156;
}

@media (max-width: 900px) {
  .grille-seo {
    grid-template-columns: 1fr;
    row-gap: 8px;
  }
}

/* ── Écran Coordonnées ─────────────────────────────────────── */

/* Téléphones et emails : poignée · libellé · valeur · principal · actions */
.grille-tel {
  grid-template-columns: 34px 150px 1fr 104px 108px;
}

/* Adresses postales : quatre champs, donc une grille plus large. */
.grille-adr {
  grid-template-columns: 34px 96px 1fr 1fr 134px 104px 108px;
}

/* Réseaux : poignée · type · lien · libellé · actions */
.grille-res {
  grid-template-columns: 34px 136px 1fr 150px 108px;
}

/* Horaires : un jour par ligne. */
.grille-jour {
  grid-template-columns: 150px 1fr 132px;
}

.cellule-jour {
  display: flex;
  align-items: center;
  gap: 9px;
}

.cellule-jour .bascule-compacte {
  justify-content: flex-start;
}

.jour-nom {
  font-size: 14px;
  font-weight: 600;
}

.cellule-plages {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.cellule-plages .plage {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 0;
}

.cellule-plages .plage input[type="time"] {
  min-width: 96px;
  flex: 0 0 auto;
}

.cellule-plages .bouton-corbeille {
  width: 30px;
  height: 30px;
}

@media (max-width: 900px) {
  /* En dessous, chaque tableau à colonnes multiples repasse en blocs :
     une grille à sept colonnes n'a pas de sens sur un téléphone. */
  .grille-tel,
  .grille-adr,
  .grille-res,
  .grille-jour {
    grid-template-columns: 34px 1fr;
    row-gap: 6px;
  }

  .grille-tel > *,
  .grille-adr > *,
  .grille-res > *,
  .grille-jour > * {
    grid-column: 2;
  }

  .grille-tel > .poignee,
  .grille-adr > .poignee,
  .grille-res > .poignee,
  .grille-jour > .cellule-jour {
    grid-column: 1 / -1;
  }

  .grille-jour > .cellule-jour {
    grid-column: 1 / -1;
  }
}

.ligne-compacte input[type="text"],
.ligne-compacte input[type="email"],
.ligne-compacte input[type="url"] {
  width: 100%;
  margin: 0;
  padding: 8px 10px;
  font-size: 14px;
  background: var(--ink-soft);
  border: 1px solid transparent;
  border-radius: var(--radius);
  color: var(--paper);
  font-family: inherit;
}

.ligne-compacte input:hover {
  border-color: var(--line);
}

.ligne-compacte input:focus {
  border-color: var(--copper);
  background: var(--ink);
  outline: none;
}

.ligne-compacte .poignee {
  width: 34px;
  height: 40px;
}

.ligne-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
}

.ligne-actions .arrow-btn,
.ligne-actions .bouton-corbeille {
  width: 32px;
  height: 32px;
}

/* Verrou : un champ que le client ne peut pas décocher. */
.cellule-verrou {
  font-size: 12px;
  color: var(--faint);
  text-align: center;
}

/* ── Bascule compacte ─────────────────────────────────────── */
/* Même mécanique que .bascule, sans le bloc de texte : dans un
   tableau, l'en-tête de colonne dit déjà de quoi il s'agit. */

.bascule-compacte {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  cursor: pointer;
}

.bascule-compacte input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.bascule-compacte .bascule-piste {
  flex-shrink: 0;
}

.bascule-compacte-texte {
  font-size: 12px;
  color: var(--faint);
  /* Masqué sur desktop : l'en-tête de colonne le dit déjà. Réaffiché
     sur mobile, où le tableau n'a plus d'en-tête. */
  display: none;
}

@media (max-width: 720px) {
  .bascule-compacte-texte {
    display: inline;
  }

  .bascule-compacte {
    justify-content: flex-start;
  }
}

/* ── Deux colonnes côte à côte ────────────────────────────── */
.deux-colonnes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

@media (max-width: 860px) {
  .deux-colonnes {
    grid-template-columns: 1fr;
    gap: 0;
  }
}

/* ── Options avancées ─────────────────────────────────────── */
.avance {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-top: 16px;
}

.avance > summary {
  cursor: pointer;
  padding: 13px 15px;
  font-size: 14px;
  font-weight: 600;
  color: var(--copper);
  list-style: none;
}

.avance > summary::-webkit-details-marker {
  display: none;
}

.avance > summary::before {
  content: "▸ ";
  display: inline-block;
  transition: transform 0.15s;
}

.avance[open] > summary::before {
  content: "▾ ";
}

.avance-corps {
  padding: 4px 15px 10px;
  border-top: 1px solid var(--line);
}

/* ── Mobile : l'intitulé au-dessus, les réglages en dessous ── */
@media (max-width: 720px) {
  .tableau-entete {
    display: none;
  }

  /* Sur mobile : intitulé en haut, type et largeur ensuite, bascules
     et flèches en bas. Une ligne de tableau à sept colonnes n'existe
     pas sur un téléphone. */
  .grille-champs {
    grid-template-columns: 34px 1fr auto;
    grid-template-areas:
      "poignee intitule fleches"
      ".       type     type"
      ".       reglages reglages";
    row-gap: 6px;
    padding: 10px;
  }

  .grille-champs > .poignee       { grid-area: poignee; }
  .grille-champs > .cellule-nom   { grid-area: intitule; }
  .grille-champs > .ligne-actions { grid-area: fleches; }
  .grille-champs > .cellule-type  { grid-area: type; display: flex; gap: 8px; }
  .grille-champs > .cellule-bascules {
    grid-area: reglages;
    display: flex;
    gap: 18px;
  }

  .ligne-extra {
    padding-left: 14px;
  }

  .grille-adresses {
    grid-template-columns: 34px 1fr auto;
  }
}

/* ============================================================
   LISTE DYNAMIQUE — socle partagé
   ------------------------------------------------------------
   Téléphones, emails, adresses, réseaux, champs de formulaire,
   plages horaires : même apparence et mêmes gestes partout.
   ============================================================ */

.liste-titre {
  font-size: 15px;
  margin: 22px 0 4px;
}

/* Dans une carte qui fait office d'écran entier, 22 px entre chaque
   sous-titre finissent par coûter une ligne de contenu. */
.volet .card > .liste-titre {
  margin: 14px 0 2px;
}

.volet .card > .liste-titre + .card-hint {
  margin-top: 0;
  margin-bottom: 6px;
}

.liste-dyn {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.liste-item {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--ink);
  overflow: hidden;
}

.liste-item-barre {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px 6px 4px;
  border-bottom: 1px solid var(--line);
  background: var(--ink-soft);
}

.liste-item-resume {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.liste-item-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.liste-item-corps {
  padding: 14px 15px 4px;
}

/* La poignée : seule zone qui déclenche le déplacement. Le reste de la
   carte reste sélectionnable et défilable normalement. */
.poignee {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--tactile-min);
  height: var(--tactile-min);
  flex-shrink: 0;
  color: var(--faint);
  cursor: grab;
  border-radius: var(--radius);
  touch-action: none; /* indispensable : sans cela iOS défile au lieu de glisser */
}

.poignee:hover {
  color: var(--copper);
  background: var(--slate-deep);
}

.poignee:active {
  cursor: grabbing;
}

.bouton-corbeille {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--tactile-min);
  height: 40px;
  flex-shrink: 0;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: transparent;
  color: var(--faint);
  cursor: pointer;
  transition: color 0.16s, background 0.16s;
}

.bouton-corbeille:hover {
  color: #fff;
  background: var(--danger);
}

.bouton-modifier {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--tactile-min);
  height: 40px;
  flex-shrink: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: transparent;
  color: var(--text);
  cursor: pointer;
  transition: color 0.16s, border-color 0.16s;
}

.bouton-modifier:hover,
.bouton-modifier[aria-expanded="true"] {
  color: var(--copper);
  border-color: var(--copper);
}

/* ------------------------------------------------------------
   VUE COMPACTE DES RÉALISATIONS

   Une ligne de 80 px : vignette, titre, poignée. On trie d'abord,
   on légende ensuite — trier vingt-deux cartes plein écran au doigt
   est impraticable, on ne voit jamais où l'on va déposer.
   ------------------------------------------------------------ */

.rea-ligne {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--ink);
  overflow: hidden;
}

.rea-ligne.masquee .rea-ligne-barre {
  opacity: 0.5;
}

.rea-ligne-barre {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 8px 8px 2px;
  min-height: 80px;
}

.rea-vignette {
  position: relative;
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--slate-deep);
}

.rea-vignette img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Le numéro de position : le client trie à l'aveugle sinon, surtout
   quand il remonte une photo de la vingtième à la deuxième place. */
.rea-position {
  position: absolute;
  inset: auto auto 0 0;
  z-index: 1;
  padding: 1px 6px;
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  background: var(--copper);
  border-radius: 0 var(--radius) 0 0;
}

.rea-ligne-texte {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.rea-ligne-titre,
.rea-ligne-meta {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rea-ligne-titre {
  font-size: 14px;
  font-weight: 600;
}

.rea-ligne-meta {
  font-size: 12px;
  color: var(--faint);
}

.rea-ligne-actions {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}

.rea-ligne-detail {
  padding: 14px 15px 4px;
  border-top: 1px solid var(--line);
  background: var(--ink-soft);
}

/* Sur téléphone, les quatre boutons se rangent en carré 2×2 : en file
   ils rogneraient le titre, en colonne ils feraient une ligne de 130 px
   et l'on ne verrait plus que trois réalisations à l'écran. */
@media (max-width: 560px) {
  /* La liste déborde de la carte : sur un écran de 375 px, ces 2 × 14 px
     sont la différence entre un titre lisible et un « Photo s… ». */
  .liste-dyn.compacte {
    margin-left: -14px;
    margin-right: -14px;
  }

  .rea-ligne-actions {
    display: grid;
    grid-template-columns: repeat(2, 30px);
    gap: 4px;
  }

  .rea-ligne-actions .arrow-btn,
  .rea-ligne-actions .bouton-modifier,
  .rea-ligne-actions .bouton-corbeille {
    width: 30px;
    height: 30px;
  }

  .rea-vignette {
    width: 52px;
    height: 52px;
  }

  /* La poignée se rétrécit mais garde ses 44 px de haut : la cible
     tactile reste conforme, et le titre gagne la place perdue. */
  .rea-ligne-barre > .poignee {
    width: 30px;
  }

  .rea-ligne-barre {
    gap: 8px;
    padding-left: 0;
  }
}

/* Pendant un déplacement : on fige la sélection de texte et le
   défilement parasite. */
body.glisse-en-cours {
  user-select: none;
  -webkit-user-select: none;
}

.est-glisse {
  opacity: 0.55;
  outline: 2px dashed var(--copper);
  outline-offset: -2px;
}

/* ============================================================
   AFFICHER / MASQUER LE MOT DE PASSE

   L'enveloppe et le bouton sont créés par app.js autour de CHAQUE
   champ de type password. Sans les règles ci-dessous, le bouton
   tombait sous le champ, en carré blanc non stylé — c'est ce qu'on
   voyait sur l'écran de connexion.
   ============================================================ */

.champ-mdp {
  position: relative;
  display: block;
}

.champ-mdp input {
  width: 100%;
  /* Place réservée au bouton, pour que la saisie ne passe pas dessous. */
  padding-right: 52px;
}

.bouton-oeil {
  position: absolute;
  top: 50%;
  right: 4px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--tactile-min);
  height: var(--tactile-min);
  padding: 0;
  border: none;
  border-radius: var(--radius);
  background: transparent;
  color: var(--faint);
  cursor: pointer;
  transition: color 0.16s;
}

.bouton-oeil svg {
  width: 20px;
  height: 20px;
}

.bouton-oeil:hover,
.bouton-oeil[aria-pressed="true"] {
  color: var(--copper);
}

.bouton-oeil:focus-visible {
  outline: 2px solid var(--copper);
  outline-offset: -2px;
}

/* ============================================================
   BASCULE OUI / NON
   ============================================================ */

.bascule {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  cursor: pointer;
  margin-bottom: 14px;
  min-height: var(--tactile-min);
  padding: 6px 0;
}

.bascule input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.bascule-piste {
  position: relative;
  flex-shrink: 0;
  width: 46px;
  height: 27px;
  border-radius: 999px;
  background: var(--slate-mid);
  border: 1px solid var(--line);
  transition: background 0.18s, border-color 0.18s;
  margin-top: 2px;
}

.bascule-pastille {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: var(--faint);
  transition: transform 0.18s, background 0.18s;
}

/* ⚠ Les DEUX variantes, .bascule et .bascule-compacte.
   Ce sélecteur ne couvrait que .bascule : les bascules compactes du
   tableau des champs restaient visuellement éteintes quel que soit
   leur état réel. La valeur changeait bien en base, mais rien ne le
   montrait — donc le client croyait que le clic ne marchait pas. */
.bascule input:checked + .bascule-piste,
.bascule-compacte input:checked + .bascule-piste {
  background: rgba(192, 130, 96, 0.3);
  border-color: var(--copper);
}

.bascule input:checked + .bascule-piste .bascule-pastille,
.bascule-compacte input:checked + .bascule-piste .bascule-pastille {
  transform: translateX(19px);
  background: var(--copper);
}

.bascule input:focus-visible + .bascule-piste,
.bascule-compacte input:focus-visible + .bascule-piste {
  outline: 2px solid var(--copper-bright);
  outline-offset: 2px;
}

.bascule-texte {
  font-size: 14px;
  line-height: 1.4;
  padding-top: 4px;
}

.bascule-texte em {
  display: block;
  font-style: normal;
  font-size: 12px;
  color: var(--faint);
  margin-top: 2px;
}

/* ============================================================
   HORAIRES — un bloc par jour, façon Google Business
   ============================================================ */

.jour {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--ink);
  padding: 10px 15px 14px;
  margin-bottom: 10px;
}

.jour-ouvert {
  border-color: rgba(192, 130, 96, 0.35);
}

.jour-entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.jour-entete .bascule {
  margin-bottom: 0;
}

.jour-entete .bascule-texte {
  font-weight: 600;
}

.jour-plages {
  margin-top: 10px;
  padding-left: 57px; /* aligné sous le libellé du jour */
}

@media (max-width: 720px) {
  .jour-plages {
    padding-left: 0;
  }

  /* Sur un écran de 375 px, tout doit tenir sur une ligne : deux heures
     lisibles, la flèche, la corbeille. On resserre les écarts et la
     corbeille plutôt que de renvoyer celle-ci sur une deuxième ligne,
     où elle doublerait la hauteur de la semaine entière. */
  .plage {
    gap: 5px;
  }

  .plage input[type="time"] {
    min-width: 96px;
  }

  .plage .bouton-corbeille {
    width: 34px;
  }
}

.plage {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

/* Le champ « heure » natif dessine ses propres chiffres ET une petite
   horloge à droite. Trop étroit, il tronque l'heure en « 07:0 » sans
   rien dire — d'où un padding resserré et une largeur plancher. */
.plage input[type="time"] {
  background: var(--ink-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--paper);
  padding: 9px 6px;
  font-size: 15px;
  font-family: inherit;
  font-variant-numeric: tabular-nums;
  min-height: var(--tactile-min);
  flex: 1 1 auto;
  min-width: 108px;
}

.plage input[type="time"]:focus {
  border-color: var(--copper);
  outline: none;
}

.plage-tiret {
  color: var(--faint);
  flex-shrink: 0;
}


/* ============================================================
   THÈME VERRE DÉPOLI — voulu par David (28.09.2026)
   Fond sombre chaud, avec une photo floutée du restaurant derrière ;
   cartes, menu latéral et barres en verre. Accent doré MYDMC.
   ============================================================ */

/* Police du panel MYDMC : SATOSHI (Indian Type Foundry / Fontshare, licence ITF FFL — fonts/Satoshi-FFL.txt),
   choisie par David le 06.10.2026 : gras pour les titres, normal pour le texte. Fichiers OFFICIELS tels quels
   (la licence interdit de les convertir ou de les alléger). */
@font-face { font-family: "Satoshi"; src: url("fonts/Satoshi-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("fonts/Satoshi-Italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("fonts/Satoshi-Medium.woff2") format("woff2"); font-weight: 500 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("fonts/Satoshi-Bold.woff2") format("woff2"); font-weight: 700 900; font-style: normal; font-display: swap; }
/* Young Serif : seulement pour l'aperçu du pop-up, qui imite le site du restaurant. */
@font-face { font-family: "Young Serif"; src: url("fonts/young-serif-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }

/* Gris des petits textes (aides, dates, adresses, en-têtes de tableau…) : sur le verre posé sur la photo, l'ancien
   #8c847a tombait à 2-4:1, mesuré au pixel (outils/controle-contrastes.js, 07.10.2026). Plus clair, il reste en
   retrait de --muted. */
:root {
  --faint: #aaa298;
  --verre: rgba(255, 255, 255, 0.055);
  --verre-fort: rgba(255, 255, 255, 0.085);
  --verre-bord: rgba(255, 255, 255, 0.1);
  --flou: blur(22px) saturate(140%);
  --radius: 14px;
  --arrondi-carte: 22px;
}

body {
  font-family: "Satoshi", Helvetica, Arial, sans-serif;
  background: #141312;
}

/* La photo du restaurant, très floutée et assombrie, sous tout le panel. */
body::before {
  content: "";
  position: fixed;
  inset: -40px;
  z-index: -1;
  background: #141312 url("/images/../uploads/pages/photo-20260622153438-944535.jpg") center / cover no-repeat;
  /* 07.10.2026 (David : « oui ») : 0.32 → 0.24, textes plus lisibles sur une photo claire (mesure au pixel). */
  filter: blur(48px) brightness(0.24) saturate(1.2);
}

h1, h2, .page-head h1 { font-family: "Satoshi", Helvetica, Arial, sans-serif; font-weight: 700; letter-spacing: -0.015em; }

.card,
.menu-lateral,
.barre-haut,
.onglets,
.liste-item,
.login-card {
  background: var(--verre);
  border: 1px solid var(--verre-bord);
  -webkit-backdrop-filter: var(--flou);
  backdrop-filter: var(--flou);
}

.card { border-radius: var(--arrondi-carte); box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25); }
.liste-item { border-radius: 16px; }
.login-card { border-radius: 26px; }

.menu-lateral { background: rgba(20, 19, 18, 0.6); border-right: 1px solid var(--verre-bord); }
.menu-ligne { border-radius: 12px; margin: 1px 8px; }
.menu-ligne.actif { background: rgba(201, 162, 76, 0.14); }
.menu-groupe { color: var(--copper); opacity: 0.85; }

/* Onglets en pilule : moins de défilement, un écran = quelques onglets. */
.onglets {
  display: inline-flex;
  max-width: 100%;
  gap: 4px;
  padding: 5px;
  border-radius: 999px;
  border-bottom: 1px solid var(--verre-bord);
}
.onglet { border: 0; border-radius: 999px; padding: 10px 18px; min-height: 42px; }
.onglet.actif { background: var(--copper); color: #1a1714; border: 0; }

.btn { border-radius: 999px; }
.btn-primary { background: var(--copper); color: #1a1714; }
.btn-ghost { border-color: var(--verre-bord); background: var(--verre); }

.form-field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.form-field select,
.form-field textarea {
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid var(--verre-bord);
  border-radius: 12px;
}

.save-bar { background: none; }
.save-bar .btn { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); }

.alert { border-radius: 14px; -webkit-backdrop-filter: var(--flou); backdrop-filter: var(--flou); }

/* ---- Tableau de bord ---- */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 18px; }
.kpi { background: var(--verre); border: 1px solid var(--verre-bord); border-radius: 18px; padding: 16px 18px; -webkit-backdrop-filter: var(--flou); backdrop-filter: var(--flou); }
.kpi strong { display: block; font-size: 28px; font-family: "Satoshi", Helvetica, Arial, sans-serif; font-weight: 700; color: var(--paper); line-height: 1.1; }
.kpi span { font-size: 13px; color: var(--muted); }
.raccourci-menu {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  background: linear-gradient(0deg, rgba(201, 162, 76, 0.16), rgba(201, 162, 76, 0.16)), var(--verre);
  border: 1px solid rgba(201, 162, 76, 0.45);
}
.alerte-orange { color: #f0b35a; font-weight: 600; }
.barres { display: grid; gap: 8px; }
.barre-ligne { display: grid; grid-template-columns: minmax(110px, 1.2fr) 3fr auto; gap: 10px; align-items: center; font-size: 14px; }
.barre-fond { height: 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.07); overflow: hidden; }
.barre-plein { height: 100%; border-radius: 999px; background: var(--copper); }
.courbe { width: 100%; height: 120px; }
.courbe path.aire { fill: rgba(201, 162, 76, 0.16); }
.courbe path.ligne { fill: none; stroke: var(--copper); stroke-width: 2; }
.grille-2 { display: grid; gap: 18px; }
@media (min-width: 1000px) { .grille-2 { grid-template-columns: 1fr 1fr; } }

/* ---- Blocs de cartes (façon Chez Zio) ---- */
.bloc-carte { position: relative; padding: 18px 20px; margin-bottom: 14px; }
.bloc-carte.masquee { opacity: 0.6; }
.bloc-carte.masquee .etat-carte { opacity: 1; }
/* État sur le site (Visible / Bientôt disponible / Masquée) — David, 30.09.2026. */
.etat-carte { margin-top: 12px; }
.choix-mode.etat-choix { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.etat-choix .choix-mode-item { padding: 10px 12px; }
.etat-bas { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin-top: 8px; }
.etat-bas .etat-texte { flex: 1 1 240px; margin: 0; }
.etat-carte:not(:has(input[value="bientot"]:checked)) .etat-texte { display: none; }
.info-carte { margin: 10px 0 0; padding: 9px 12px; border-radius: 12px; font-size: 13.5px; background: rgba(255, 255, 255, 0.05); color: var(--muted); }
.info-carte.ok { background: rgba(78, 168, 122, 0.15); color: #aee3c4; }
.info-carte.attention { background: rgba(240, 179, 90, 0.15); color: #f0c878; }
@media (max-width: 640px) {
    /* iPhone : les trois états côte à côte, en version courte. */
    .choix-mode.etat-choix { grid-template-columns: repeat(3, 1fr); gap: 6px; }
    .etat-choix .choix-mode-item { flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 9px 6px; font-size: 13px; }
    .etat-choix .choix-mode-item input { margin: 0; }
    .etat-choix .choix-mode-item em { display: none; }
}
/* Nouveau fonctionnement des cartes (David, 30.09.2026 soir). */
.bandeau-programme { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 0 0 16px; padding: 14px 16px; border-radius: 16px;
    background: rgba(201, 162, 76, 0.16); border: 1px solid rgba(201, 162, 76, 0.55); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25); }
.bandeau-programme-icone { font-size: 22px; line-height: 1; }
.bandeau-programme-texte { flex: 1 1 260px; font-size: 15px; color: var(--paper); }
.confirmer-page { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 10px; padding: 11px 13px; border-radius: 12px;
    background: rgba(224, 96, 80, 0.14); border: 1px solid rgba(224, 96, 80, 0.45); font-size: 14px; flex-basis: 100%; }
.confirmer-page strong { flex: 1 1 240px; font-weight: 600; }
/* Dans la barre d'enregistrement collée en bas (éditeur) : question au-dessus des boutons, fond opaque. */
.save-bar .confirmer-page { order: -1; margin: 0 0 4px; background: #3a211a; border-color: rgba(224, 96, 80, 0.7); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45); }
.save-bar .confirmer-page .btn { width: auto !important; }
.version-bloc { margin-top: 12px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--verre-bord); background: rgba(0, 0, 0, 0.16); }
.version-bloc.nouvelle { border-color: rgba(201, 162, 76, 0.45); background: rgba(201, 162, 76, 0.06); }
.version-bloc h4 { margin: 0 0 8px; font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--faint); font-weight: 600; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.choix-mode.choix-quand { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin-bottom: 8px; }
.choix-quand .choix-mode-item { padding: 10px 12px; }
.version-appliquer:not(:has(input[name="quand"][value="programme"]:checked)) .version-date { display: none; }
.attente-carte:not(:has(input[name="etat"][value="bientot"]:checked)) .attente-texte { display: none; }
.attente-carte .attente-texte { margin: 0 0 8px; }
.imprimer-menu { display: grid; gap: 10px; margin-top: 14px; }
.zone-sensible { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--verre-bord); }
.ligne-brouillon { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.qr-carte { display: flex; gap: 14px; align-items: center; margin-top: 12px; padding: 10px 12px; border-radius: 14px; border: 1px dashed var(--verre-bord); font-size: 13.5px; }
.qr-carte img { width: 72px; height: 72px; border-radius: 8px; background: #fff; flex-shrink: 0; }
.qr-carte .qr-adresse { color: var(--muted); font-size: 12.5px; word-break: break-all; }
.qr-carte .btn { margin-top: 6px; }
.bloc-carte-tete { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.bloc-carte-tete h3 { margin: 0; font-family: "Satoshi", Helvetica, Arial, sans-serif; font-weight: 700; font-size: 20px; }
.etiquette { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; background: rgba(255, 255, 255, 0.08); color: var(--muted); }
.etiquette.ok { background: rgba(78, 168, 122, 0.18); color: #7fd3a5; }
.etiquette.or { background: rgba(201, 162, 76, 0.2); color: var(--copper-bright); }
.etiquette.alerte { background: rgba(240, 179, 90, 0.18); color: #f0b35a; }
.bouton-fichier { position: relative; overflow: hidden; }
.bouton-fichier input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; font-size: 0; }
.bloc-carte details summary { cursor: pointer; color: var(--muted); font-size: 14px; margin-top: 12px; }
.ligne-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 14px; }

/* ---- Glisser-déposer ---- */
.triable > * { touch-action: pan-y; }
.poignee-glisser {
  display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 12px;
  color: var(--muted); cursor: grab; touch-action: none; user-select: none; background: rgba(255, 255, 255, 0.05);
}
.poignee-glisser:active { cursor: grabbing; }
.en-deplacement { opacity: 0.35; }
.fantome { position: fixed; pointer-events: none; z-index: 100; opacity: 0.92; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); }
.galerie-panel { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.vignette { position: relative; border-radius: 16px; overflow: hidden; aspect-ratio: 1; background: rgba(0, 0, 0, 0.3); border: 1px solid var(--verre-bord); }
.vignette img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.vignette .poignee-glisser { position: absolute; left: 8px; top: 8px; background: rgba(0, 0, 0, 0.55); color: #fff; }
.vignette .bouton-corbeille { position: absolute; right: 8px; top: 8px; }
.vignette-ajout { display: grid; place-items: center; text-align: center; border: 1px dashed rgba(201, 162, 76, 0.5); color: var(--copper-bright); font-weight: 600; font-size: 14px; padding: 10px; cursor: pointer; }
.aide-ordre { font-size: 13px; color: var(--muted); margin: 10px 0 0; }

/* ---- Horaires ---- */
.horaires-table { width: 100%; border-collapse: separate; border-spacing: 0 6px; }
.horaires-table td { padding: 4px 6px; vertical-align: middle; }
.horaires-table input[type="time"] { background: rgba(0, 0, 0, 0.28); border: 1px solid var(--verre-bord); border-radius: 10px; color: var(--paper); padding: 8px; font: inherit; min-width: 104px; }
@media (max-width: 720px) {
  .horaires-table tr { display: grid; grid-template-columns: 1fr auto; gap: 6px; padding: 10px 0; border-bottom: 1px solid var(--verre-bord); }
  .horaires-table td.plages { grid-column: 1 / -1; }
}

/* ---- Réservations ---- */
.resa { display: grid; grid-template-columns: 1fr auto; gap: 6px 16px; align-items: start; padding: 16px 18px; margin-bottom: 10px; }
.resa.nouvelle { border-color: rgba(201, 162, 76, 0.55); }
.resa-quand { font-family: "Satoshi", Helvetica, Arial, sans-serif; font-size: 19px; }
.resa-meta { color: var(--muted); font-size: 14px; }
.resa-message { grid-column: 1 / -1; background: rgba(0, 0, 0, 0.22); border-radius: 12px; padding: 10px 12px; font-size: 14px; white-space: pre-line; }
.resa .ligne-actions { grid-column: 1 / -1; margin-top: 4px; }

/* ---- Aperçu du pop-up ---- */
.apercu-popup { max-width: 360px; border-radius: 26px; overflow: hidden; background: #f6f1e9; color: #2b2622; }
.apercu-popup img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.apercu-popup div { padding: 20px; }
.apercu-popup h3 { font-family: "Young Serif", Georgia, serif; font-weight: 400; font-size: 22px; margin: 0 0 8px; color: #2b2622; }
.apercu-popup p { margin: 0 0 14px; color: #6b6259; white-space: pre-line; }
.apercu-popup span { display: inline-block; background: #b5552f; color: #fff; border-radius: 999px; padding: 10px 18px; font-weight: 600; font-size: 14px; }
.progression { margin-top: 10px; display: grid; gap: 6px; font-size: 13px; color: var(--copper-bright); }

/* Barres fixes : verre plus opaque, sinon le contenu passe à travers. */
.barre-bas, .barre-haut { background: rgba(22, 20, 18, 0.82); -webkit-backdrop-filter: var(--flou); backdrop-filter: var(--flou); border-color: var(--verre-bord); }
.ligne-actions { justify-content: flex-start; }
.page-head h1 { font-size: clamp(26px, 6vw, 34px); line-height: 1.15; }
.menu-marque img { height: 40px; width: auto; }

/* ---- Barre latérale : principaux visibles, domaines dépliables (« + ») ---- */
.menu-domaine { margin: 6px 8px 0; border-top: 1px solid var(--verre-bord); padding-top: 4px; }
.menu-domaine-titre {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  list-style: none; cursor: pointer; padding: 12px 10px; border-radius: 12px;
  font-size: 13px; font-weight: 600; letter-spacing: 0.02em; color: var(--muted);
}
.menu-domaine-titre::-webkit-details-marker { display: none; }
.menu-domaine-titre:hover { background: rgba(255, 255, 255, 0.05); color: var(--paper); }
.menu-domaine-plus { position: relative; width: 22px; height: 22px; border-radius: 999px; background: rgba(201, 162, 76, 0.16); }
.menu-domaine-plus::before, .menu-domaine-plus::after {
  content: ""; position: absolute; left: 6px; right: 6px; top: 10px; height: 2px; border-radius: 2px; background: var(--copper);
  transition: transform 0.25s;
}
.menu-domaine-plus::after { transform: rotate(90deg); }
.menu-domaine[open] .menu-domaine-plus::after { transform: rotate(0deg); }
.menu-domaine[open] .menu-domaine-titre { color: var(--copper-bright); }
.menu-ligne-sous { margin-left: 14px !important; padding-top: 8px; padding-bottom: 8px; min-height: 0; }
.menu-ligne-sous .menu-ligne-titre { font-size: 14px; font-weight: 500; }
.choix-mode { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.choix-mode-item { display: flex; gap: 10px; align-items: flex-start; padding: 14px; border-radius: 16px; border: 1px solid var(--verre-bord); background: rgba(255, 255, 255, 0.04); cursor: pointer; }
.choix-mode-item:has(input:checked) { border-color: var(--copper); background: rgba(201, 162, 76, 0.12); }
.choix-mode-item input { accent-color: var(--copper); margin-top: 3px; }
.choix-mode-item span { display: grid; }
.choix-mode-item em { font-style: normal; font-size: 13px; color: var(--muted); }

/* ---- Éditeur de carte ---- */
.menu-editeur .plats { display: grid; gap: 10px; margin: 12px 0; }
@media (min-width: 1100px) { .menu-editeur[data-gabarit="menus"] .plats { grid-template-columns: 1fr 1fr; } }
.plat-edit { padding: 12px 14px; border-radius: 16px; }
.plat-edit-tete { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.plat-edit-tete .plat-titre { flex: 1; font-family: "Satoshi", Helvetica, Arial, sans-serif; font-size: 18px; color: var(--copper-bright); background: transparent; border: 0; border-bottom: 1px dashed var(--verre-bord); padding: 4px 2px; }
.plat-edit-actions { margin-left: auto; display: flex; gap: 6px; }
.plat-edit-champs { display: grid; gap: 8px; grid-template-columns: 1fr 1fr; }
.plat-edit-champs label { display: grid; gap: 4px; font-size: 12px; color: var(--muted); }
.plat-edit-champs label.large { grid-column: 1 / -1; }
.plat-edit-champs input, .plat-edit-champs textarea, .rubrique-edit-tete input, .menu-editeur .form-field input, .menu-editeur select {
  background: rgba(0, 0, 0, 0.28); border: 1px solid var(--verre-bord); border-radius: 10px; color: var(--paper); padding: 9px 10px; font: inherit; font-size: 15px; width: 100%;
}
.plat-edit-champs .prix-champ input { font-weight: 700; color: var(--copper-bright); }
/* « Texte seul, sans prix » : une simple phrase, les prix disparaissent. */
.plat-edit-champs label.texte-seul { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--paper); cursor: pointer; }
.plat-edit-champs label.texte-seul input { width: 18px; height: 18px; margin: 0; accent-color: var(--copper); }
.plat-edit-champs label.texte-seul small { color: var(--faint); }
.plat-edit:has([data-texte-seul]:checked) .prix-champ,
.plat-edit:has([data-texte-seul]:checked) .prix-demi-champ { display: none !important; }
.menu-editeur[data-gabarit="carte"] .seul-menus { display: none !important; }
.menu-editeur[data-gabarit="menus"] .seul-carte { display: none !important; }
.menu-editeur[data-gabarit="carte"] .plat-edit-tete .poignee-glisser + .plat-edit-actions { margin-left: auto; }
.rubrique-edit-tete { display: flex; gap: 10px; align-items: center; }
.rubrique-edit-tete input { font-family: "Satoshi", Helvetica, Arial, sans-serif; font-size: 18px; }
.menu-editeur[data-gabarit="menus"] [data-supprimer-rubrique] { display: none; }
.barre-menu { display: flex; flex-wrap: wrap; gap: 8px; }
.barre-menu .btn { width: auto !important; }

/* ============================================================
   FORMULAIRE › CHAMPS : une ligne par champ (texte + réglages)
   ============================================================ */
.champ-resa {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px 22px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
}
.champ-resa:last-of-type { border-bottom: 0; }
.champ-resa .form-field { margin-bottom: 8px; }
.champ-resa-reglages {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 150px;
}
@media (max-width: 720px) {
  .champ-resa { grid-template-columns: 1fr; }
  .champ-resa-reglages { flex-direction: row; flex-wrap: wrap; min-width: 0; }
}
/* Ici aucun en-tête de colonne ne dit ce que fait l'interrupteur :
   son texte (« Ouvert », « Affiché », « Obligatoire ») reste visible. */
.champ-resa .bascule-compacte-texte,
.horaires-table .bascule-compacte-texte {
  display: inline;
  font-size: 13px;
  color: inherit;
}
.champ-resa .bascule-compacte,
.horaires-table .bascule-compacte { justify-content: flex-start; }

/* ============================================================
   ÉDITEUR DE CARTES — anciens menus
   ============================================================ */
.anciens-menus > summary { cursor: pointer; list-style: none; display: flex; gap: 10px; align-items: center; }
.anciens-menus > summary::-webkit-details-marker { display: none; }
.anciens-barre { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: end; margin: 6px 0 4px; }
.anciens-barre label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 600; }
.anciens-barre select, .anciens-barre input { min-width: 240px; }
.anciens-statut { min-height: 1.4em; font-size: 13px; font-weight: 600; margin: 6px 0; }
.ancien-jour { border-top: 1px solid rgba(0, 0, 0, 0.07); padding: 10px 0; }
.ancien-jour > summary { cursor: pointer; padding: 4px 0; }
.anciens-plats { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; margin: 10px 0; }
.ancien-plat { display: flex; justify-content: space-between; gap: 10px; padding: 12px 14px; border-radius: 16px;
  background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1); }
.ancien-plat > div:first-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 13px; }
.ancien-plat small { opacity: 0.75; }
.ancien-titre { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; opacity: 0.6; }
.ancien-actions { display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; gap: 8px; }
.ancien-prix { font-weight: 700; font-size: 13px; }
@keyframes plat-rempli { from { box-shadow: 0 0 0 3px var(--copper); } to { box-shadow: 0 0 0 0 transparent; } }
.plat-rempli { animation: plat-rempli 1.6s ease-out; }
@media (max-width: 720px) {
  .anciens-barre select, .anciens-barre input { min-width: 0; width: 100%; }
  .anciens-barre label { width: 100%; }
}

/* Tableau de bord : clics détaillés par appareil */
.barres-app .barre-ligne { row-gap: 2px; }
.barres-app .barre-fond { display: flex; overflow: hidden; }
.barres-app .barre-plein { border-radius: 0; }
.barres-app .barre-plein:first-child { border-radius: 999px 0 0 999px; }
.barres-app .barre-plein:last-child { border-radius: 0 999px 999px 0; }
.barres-app .barre-plein:only-child { border-radius: 999px; }
.barre-detail { grid-column: 2 / -1; font-size: 11.5px; opacity: 0.7; }
.app-mobile { background: #e0b25c !important; }
.app-tablette { background: #7fb3a6 !important; }
.app-ordinateur { background: #a7a2e0 !important; }
.app-inconnu { background: rgba(255, 255, 255, 0.25) !important; }
.legende-app { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: 12px; opacity: 0.85; margin: -4px 0 10px; }
.legende-app span { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 4px; }

/* ============================================================
   ÉDITEUR DE CARTE — en ligne / prochain, calendrier, aperçu
   ============================================================ */
.etat-menus { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 18px; }
.etat-case { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; border-radius: var(--arrondi-carte, 22px);
  border: 1px solid var(--verre-bord, var(--line)); background: var(--verre, var(--ink-soft)); }
.etat-case strong { font-size: 17px; }
.etat-case span:not(.etat-etiquette) { font-size: 13.5px; color: var(--muted); }
.etat-case a, .etat-case em { font-size: 13px; margin-top: 4px; }
.etat-case .btn { align-self: flex-start; margin-top: 8px; }
.etat-etiquette { align-self: flex-start; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 3px 10px; border-radius: 999px; }
.etat-en-ligne { border-color: rgba(78, 168, 122, 0.45); }
.etat-en-ligne .etat-etiquette { background: rgba(78, 168, 122, 0.2); color: #8fdcb2; }
.etat-programme { border-color: rgba(217, 164, 65, 0.5); }
.etat-programme .etat-etiquette { background: rgba(217, 164, 65, 0.2); color: #f0c878; }
.etat-vide .etat-etiquette { background: rgba(217, 97, 79, 0.18); color: #f19a8b; }

.edite { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; padding: 5px 12px; border-radius: 999px; margin-bottom: 8px; }
.edite-en-ligne { background: rgba(78, 168, 122, 0.2); color: #8fdcb2; }
.edite-programme { background: rgba(217, 164, 65, 0.22); color: #f0c878; }
.edite-brouillon { background: rgba(255, 255, 255, 0.12); color: var(--paper); }
.bandeau-prog a { margin-left: 8px; }

.cal-tete { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cal-tete h2 { min-width: 170px; text-align: center; }
.cal-tete input[type="search"] { margin-left: auto; min-width: 220px; }
.cal-legende { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12.5px; color: var(--muted); margin: 10px 0 12px; }
.cal-legende span { display: inline-flex; align-items: center; gap: 6px; }
/* Pastilles d'état de la légende SEULEMENT (audit du 07.10.2026) : sans « .cal-legende », ces deux règles écrasaient le
   chiffre rouge des nouvelles demandes du menu (même classe .pastille) → fond transparent, 10 px de haut. */
.cal-legende .pastille { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.pastille-ancien, .type-ancien { --c: rgba(255, 255, 255, 0.35); }
.pastille-en_ligne, .type-en_ligne { --c: #4ea87a; }
.pastille-programme, .type-programme { --c: #d9a441; }
.pastille-vide { --c: transparent; border: 1px dashed var(--muted); }
.cal-legende .pastille { background: var(--c); }
.cal-grille { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal-entete { text-align: center; font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--faint); padding-bottom: 2px; }
.cal-jour { position: relative; min-height: 64px; padding: 7px 8px; border-radius: 12px; text-align: left; cursor: pointer;
  display: flex; flex-direction: column; justify-content: space-between; gap: 4px;
  background: rgba(255, 255, 255, 0.035); border: 1px solid rgba(255, 255, 255, 0.07); color: var(--paper); font: inherit; }
.cal-jour:hover:not(:disabled) { border-color: var(--copper); }
.cal-jour:disabled { opacity: 0.35; cursor: default; }
.cal-num { font-weight: 700; font-size: 14px; }
.cal-info { font-size: 11px; line-height: 1.2; color: var(--muted); }
.cal-jour.type-ancien, .cal-jour.type-en_ligne, .cal-jour.type-programme { border-left: 4px solid var(--c); }
.cal-jour.type-en_ligne { background: rgba(78, 168, 122, 0.14); }
.cal-jour.type-en_ligne .cal-info { color: #8fdcb2; font-weight: 700; }
.cal-jour.type-programme { background: rgba(217, 164, 65, 0.14); }
.cal-jour.type-programme .cal-info { color: #f0c878; font-weight: 700; }
.cal-jour.type-vide { border-style: dashed; }
.cal-jour.type-vide .cal-info { color: var(--copper); opacity: 0; transition: opacity .15s; }
.cal-jour.type-vide:hover .cal-info, .cal-jour.type-vide:focus-visible .cal-info { opacity: 1; }
.cal-jour.aujourdhui { box-shadow: 0 0 0 2px var(--copper); }
.cal-jour.choisi { outline: 2px solid var(--paper); outline-offset: 1px; }
.cal-jour.trouve { box-shadow: 0 0 0 2px #f0c878; background: rgba(240, 200, 120, 0.18); }
.cal-jour.estompe { opacity: 0.35; }
.cal-detail { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.cal-detail-tete { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.cal-detail-tete h3 { margin: 0; font-size: 17px; }
.cal-cible { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; margin-top: 10px; }
.cal-cible select { min-width: 240px; }

.editeur-grille { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; align-items: start; }
.editeur-apercu { display: none; }
.apercu-tete { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.apercu-etat { font-size: 12px; color: var(--faint); }
.apercu-fermer { margin-left: auto; }
.apercu-feuille { position: relative; overflow: hidden; border-radius: 10px; background: #fff; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45); }
.apercu-feuille iframe { position: absolute; top: 0; left: 0; border: 0; transform-origin: 0 0; background: #fff; }
@media (min-width: 1280px) {
  .editeur-grille { grid-template-columns: minmax(0, 1fr) minmax(340px, 38%); }
  .editeur-apercu { display: block; position: sticky; top: 18px; }
  .apercu-fermer, .apercu-ouvrir { display: none !important; }
}
@media (max-width: 1279px) {
  .editeur-apercu.ouvert { display: block; position: fixed; inset: 0; z-index: 200; overflow: auto; padding: 14px;
    background: rgba(12, 11, 10, 0.94); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
  body.apercu-ouvert { overflow: hidden; }
}

.teintes-choix { display: flex; flex-wrap: wrap; gap: 10px; }
.teinte { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 86px; cursor: pointer; text-align: center; }
.teinte input { position: absolute; opacity: 0; width: 0; height: 0; }
.teinte-rond { width: 44px; height: 44px; border-radius: 50%; border: 2px solid transparent; transition: transform .15s; }
.teinte input:checked + .teinte-rond { border-color: var(--paper); transform: scale(1.08); }
.teinte input:focus-visible + .teinte-rond { outline: 2px solid var(--copper); outline-offset: 2px; }
.teinte-nom { font-size: 11.5px; line-height: 1.2; color: var(--muted); }
.aide-liste { font-weight: 400; font-size: 11px; color: var(--faint); }

@media (max-width: 720px) {
  .etat-menus { grid-template-columns: 1fr; }
  .cal-grille { gap: 3px; }
  .cal-jour { min-height: 48px; padding: 4px 5px; border-radius: 9px; }
  .cal-info { font-size: 9.5px; }
  .cal-jour.type-vide .cal-info { display: none; }
  .cal-tete input[type="search"] { margin-left: 0; width: 100%; min-width: 0; }
  .cal-cible select { min-width: 0; width: 100%; }
}

/* Pipette du modèle Couleur : le sélecteur natif couvre la pastille. */
.teinte-pipette { position: relative; overflow: hidden; outline: 2px dashed rgba(255,255,255,.35); outline-offset: 2px; }
.teinte-pipette input[type="color"] { position: absolute; inset: -6px; width: calc(100% + 12px); height: calc(100% + 12px); opacity: 0; cursor: pointer; border: 0; padding: 0; }
/* Pastilles de couleur : plus fortes que le style général des libellés. */
.form-field .teintes-choix .teinte { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 92px; margin: 0; font-weight: 400; }
.form-field .teintes-choix .teinte-rond { display: block; flex: 0 0 44px; width: 44px; height: 44px; border-radius: 50%; }
.form-field .teintes-choix .teinte-nom { display: block; }

/* Menu du jour : champs sur toute la largeur (sinon « Salade du j… »). */
.menu-editeur[data-gabarit="menus"] .plat-edit-champs label { grid-column: 1 / -1; }
.menu-editeur[data-gabarit="menus"] .plat-edit-champs label.prix-champ { grid-column: auto; }
.plat-edit-actions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
/* Avec l'aperçu à droite, un menu garde au moins 340 px de large :
   2 colonnes seulement si la place le permet, sinon 1. */
.editeur-gauche .plats { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)) !important; }
/* Menu du jour : pas de « catégorie » à nommer (réservé aux cartes). */
.menu-editeur[data-gabarit="menus"] .rubrique-edit-tete { display: none; }

/* Cartes & menus : photos des incontournables */
.incontournables { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; margin: 10px 0 4px; }
.incontournable { display: flex; gap: 12px; align-items: center; padding: 10px; border-radius: 16px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.09); }
.incontournable img, .incontournable-vide { width: 64px; height: 64px; border-radius: 12px; object-fit: cover; flex: 0 0 64px; }
.incontournable-vide { display: grid; place-items: center; background: rgba(255, 255, 255, 0.08); font-weight: 700; color: var(--copper); }
.incontournable > div { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; font-size: 13.5px; }
.retirer-photo { font-size: 12px; color: var(--muted); display: flex; gap: 6px; align-items: center; }

/* Mot de passe oublié (29.09.2026) : lien bien visible sous « Se connecter ». */
.lien-oubli { margin: 18px 0 0; text-align: center; }
.lien-oubli a { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* ============================================================
   STATISTIQUES — module commun MYDMC (29.09.2026) : période,
   comparaison, mois par mois, boutons importants en haut.
   ============================================================ */
.periode-barre { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 4px 0 6px; }
.periode-pilules { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 5px; border-radius: 999px; background: var(--verre, rgba(255,255,255,.055)); border: 1px solid var(--verre-bord, rgba(255,255,255,.1)); }
.periode-pilule { padding: 8px 16px; border-radius: 999px; color: var(--paper); font-size: 14px; font-weight: 600; min-height: 38px; display: inline-flex; align-items: center; }
.periode-pilule:hover { background: rgba(255, 255, 255, 0.07); color: var(--paper); }
.periode-pilule.actif { background: var(--copper); color: #14100d; }
.periode-libre { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; }
.periode-libre label { display: inline-flex; align-items: center; gap: 6px; }
.periode-libre input[type="date"] { background: rgba(0, 0, 0, 0.28); border: 1px solid var(--verre-bord, rgba(255,255,255,.1)); border-radius: 10px; color: var(--paper); padding: 7px 10px; font: inherit; color-scheme: dark; }
.periode-texte { margin: 0 0 14px; }
.variation { display: inline-block; font-size: 12px; font-weight: 700; padding: 2px 7px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); color: var(--muted); vertical-align: middle; font-family: inherit; }
.variation.hausse { background: rgba(78, 168, 122, 0.18); color: #7fd1a6; }
.variation.baisse { background: rgba(217, 97, 79, 0.18); color: #f0a092; }
.kpi .variation { margin-left: 4px; }
.clics-cles { border-color: rgba(255, 255, 255, 0.18); }
.clics-cles .barre-ligne strong { white-space: nowrap; }
.courbe path.ligne-visiteurs { fill: none; stroke: #7fb3a6; stroke-width: 2; stroke-dasharray: 5 4; }
.legende-courbe { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: 12px; color: var(--muted); margin: 8px 0 0; }
.legende-courbe span { display: inline-block; width: 16px; height: 3px; border-radius: 2px; }
.legende-courbe .l-vues { background: var(--copper); }
.legende-courbe .l-visiteurs { background: #7fb3a6; }
.tableau-defile { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tableau-mois { width: 100%; border-collapse: collapse; font-size: 14px; white-space: nowrap; }
.tableau-mois th, .tableau-mois td { padding: 9px 12px; text-align: right; border-bottom: 1px solid var(--verre-bord, rgba(255,255,255,.1)); }
.tableau-mois th:first-child, .tableau-mois td:first-child { text-align: left; }
.tableau-mois thead th { font-size: 12px; font-weight: 600; color: var(--muted); }
.tableau-mois tbody tr:first-child th, .tableau-mois tbody tr:first-child td { color: var(--copper-bright); font-weight: 600; }
.kpi-grand { font-size: 40px; line-height: 1; margin: 6px 0 8px; font-family: inherit; }
a.lien-carte { color: var(--paper); display: block; }
a.lien-carte:hover { border-color: var(--copper); }
.barre-fond, .barre-plein { display: block; }
.barres-app .barre-fond { display: flex; }
@media (max-width: 640px) {
  .barre-ligne { grid-template-columns: minmax(90px, 1fr) 2fr auto; }
  .periode-libre { width: 100%; }
}

/* Réservations : type de demande (29.09.2026) */
.filtre-type { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 5px; border-radius: 999px; background: var(--verre); border: 1px solid var(--verre-bord); }
.filtre-type small { opacity: .7; font-weight: 500; }
.etiquette.type-question { background: rgba(127, 179, 166, 0.2); color: #a9d8cc; }
.etiquette.type-groupe { background: rgba(167, 162, 224, 0.2); color: #c9c5f2; }

/* ============================================================
   TABLEAU DE BORD EN CASES (David, 29.09.2026) — module commun MYDMC.
   Maquette validée : ~/SITES/_MAQUETTES/tableau-de-bord-cases.html.
   Classes préfixées « tdb- » : aucun effet sur le reste du panel.
   ============================================================ */
:root {
  /* Catégories de provenance des visites */
  --src-moteurs: #c9a24c;
  --src-maps: #7fb3a6;
  --src-reseaux: #e08a6a;
  --src-ia: #6ec6e8;
  --src-autres: #a7a2e0;
  --src-direct: #8f8880;
}
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tdb-comparer label { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; }
.tdb-comparer input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--copper); }
.tdb-periode { margin-top: 22px; }

.tdb-tete { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 8px 0 12px; }
.tdb-tete h2 { font-size: 22px; }
.tdb-barre-edition {
  position: sticky; top: calc(var(--barre-haut-h) + 8px); z-index: 20;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px;
  margin: 0 0 14px; padding: 10px 12px 10px 18px; border-radius: 999px;
  background: rgba(40, 34, 26, 0.9); border: 1px solid rgba(201, 162, 76, 0.5);
  -webkit-backdrop-filter: var(--flou); backdrop-filter: var(--flou); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}
@media (min-width: 900px) { .tdb-barre-edition { top: 12px; } }
.tdb-barre-edition p { margin: 0; font-size: 13.5px; }
.tdb-barre-boutons { display: flex; gap: 8px; }
@media (max-width: 640px) { .tdb-barre-edition { border-radius: 20px; } .tdb-barre-boutons { width: 100%; } .tdb-barre-boutons .btn { flex: 1; } }

/* Les cases : 2 colonnes sur iPhone, 3 puis 4 sur grand écran */
.tdb-cases { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 14px; }
@media (min-width: 700px) { .tdb-cases { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1250px) { .tdb-cases { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tdb-case {
  position: relative; display: flex; flex-direction: column; gap: 6px; min-width: 0;
  background: var(--verre); border: 1px solid var(--verre-bord); border-radius: 20px;
  -webkit-backdrop-filter: var(--flou); backdrop-filter: var(--flou); padding: 16px 16px 14px;
}
.tdb-case.large { grid-column: span 2; container-type: inline-size; }
.tdb-case.ouverte { grid-column: 1 / -1; border-color: rgba(201, 162, 76, 0.45); }
.tdb-titre { font-family: "Satoshi", Helvetica, Arial, sans-serif; font-weight: 700; font-size: 17px; line-height: 1.2; padding-right: 44px; margin: 0; }
.tdb-chiffre { font-size: 34px; font-weight: 600; line-height: 1; letter-spacing: -0.01em; margin-top: 4px; font-variant-numeric: tabular-nums; }
.tdb-chiffre small { font-size: 14px; font-weight: 500; color: var(--muted); letter-spacing: 0; margin-left: 6px; }
.tdb-bas { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 12.5px; color: var(--faint); }
.tdb-sans-histo { flex-basis: 100%; font-size: 12px; font-style: italic; color: var(--faint); }
.tdb-var { display: inline-flex; align-items: center; gap: 3px; font-size: 13px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.tdb-var.hausse { background: rgba(78, 168, 122, 0.18); color: #7fd1a6; }
.tdb-var.baisse { background: rgba(217, 97, 79, 0.18); color: #f0a092; }
.tdb-var.petite { font-size: 11.5px; padding: 1px 6px; }
.tdb-types { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.tdb-types .etiquette { font-size: 11.5px; padding: 2px 9px; }
.tdb-plus {
  position: absolute; top: 10px; right: 10px; width: 40px; height: 40px; padding: 0; border-radius: 999px;
  display: grid; place-items: center; cursor: pointer;
  border: 1px solid var(--verre-bord); background: rgba(201, 162, 76, 0.14); color: var(--copper-bright);
}
.tdb-plus:hover { border-color: var(--copper); }
.tdb-plus svg { transition: transform 0.2s; }
.tdb-plus[aria-expanded="true"] svg { transform: rotate(45deg); }

/* Provenance : barre empilée + légende */
.tdb-pile { display: flex; height: 12px; border-radius: 999px; overflow: hidden; margin: 8px 0 6px; background: rgba(255, 255, 255, 0.07); }
.tdb-pile span { display: block; height: 100%; }
.tdb-pile span + span { box-shadow: -1px 0 0 rgba(20, 19, 18, 0.6); }
.tdb-sources { display: grid; gap: 4px 16px; grid-template-columns: 1fr; font-size: 13.5px; }
@container (min-width: 480px) { .tdb-sources { grid-template-columns: 1fr 1fr; } }
.tdb-source { display: flex; align-items: center; gap: 8px; min-width: 0; }
.tdb-source .nom { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tdb-point { display: inline-block; width: 10px; height: 10px; border-radius: 3px; flex: none; margin-right: 6px; vertical-align: -1px; }
.tdb-source .tdb-point { margin-right: 0; }

/* Détail « + » */
.tdb-detail { margin-top: 12px; padding-top: 14px; border-top: 1px solid var(--verre-bord); display: grid; gap: 18px; }
.tdb-detail[hidden] { display: none; }
@media (min-width: 1000px) { .tdb-detail { grid-template-columns: 1fr 1fr; } .tdb-pleine { grid-column: 1 / -1; } }
.tdb-detail h4 { margin: 0 0 8px; font-size: 13px; font-weight: 600; color: var(--muted); letter-spacing: 0.02em; }
.tdb-explication { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 10px 12px; border-radius: 14px; background: rgba(255, 255, 255, 0.05); font-size: 14px; }
.tdb-explication svg { flex: none; margin-top: 2px; color: var(--copper-bright); }
.tdb-barres { display: grid; gap: 8px; }
.tdb-barre { display: grid; grid-template-columns: minmax(90px, auto) 1fr auto; gap: 10px; align-items: center; font-size: 14px; }
.tdb-barre-fond { height: 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.07); overflow: hidden; }
.tdb-barre-plein { height: 100%; border-radius: 999px; background: var(--copper); }
.tdb-barre strong { font-size: 13.5px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tdb-mois { width: 100%; border-collapse: collapse; font-size: 13.5px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tdb-mois th, .tdb-mois td { padding: 7px 10px; text-align: right; border-bottom: 1px solid var(--verre-bord); }
.tdb-mois th:first-child, .tdb-mois td:first-child { text-align: left; }
.tdb-mois thead th { font-size: 12px; font-weight: 600; color: var(--muted); }
.tdb-mois .sous th { font-weight: 400; color: var(--muted); padding-left: 26px; }
.tdb-graph { display: block; width: 100%; height: 110px; }
.tdb-graph .plein { fill: var(--copper); }
.tdb-graph .vide { fill: rgba(255, 255, 255, 0.07); }
.tdb-graph .avant { fill: none; stroke: #7fb3a6; stroke-width: 1.6; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; }
.tdb-axe { display: flex; justify-content: space-between; margin-top: 2px; font-size: 11px; color: var(--faint); }
.tdb-legende { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 6px; font-size: 12px; color: var(--muted); }
.tdb-legende .trait::before { content: ""; display: inline-block; width: 14px; height: 3px; margin-right: 6px; border-radius: 2px; vertical-align: 3px; background: var(--copper); }
.tdb-legende .trait.avant::before { background: #7fb3a6; }

/* Mode « Personnaliser » (comme l'écran d'accueil d'un iPhone) */
.tdb-masquer, .tdb-deplacer { display: none; }
.tdb.edition .tdb-plus { display: none; }
.tdb.edition .tdb-masquer {
  display: grid; place-items: center; position: absolute; top: -9px; left: -9px; z-index: 2; width: 32px; height: 32px; padding: 0;
  border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.25); background: #3a3530; color: var(--paper); cursor: pointer; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}
.tdb.edition .tdb-masquer:hover { background: #b5552f; }
.tdb.edition .tdb-deplacer { display: flex; gap: 6px; margin-top: 8px; }
.tdb-fleche { width: 40px; height: 36px; border-radius: 12px; border: 1px solid var(--verre-bord); background: rgba(0, 0, 0, 0.25); color: var(--paper); font-size: 15px; cursor: pointer; }
.tdb-fleche:hover:not(:disabled) { border-color: var(--copper); color: var(--copper-bright); }
.tdb-fleche:disabled { opacity: 0.25; cursor: default; }
.tdb.edition .tdb-cases .tdb-case {
  cursor: grab; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  border-style: dashed; border-color: rgba(201, 162, 76, 0.5); animation: tdb-frisson 0.9s ease-in-out infinite alternate;
}
.tdb.edition .tdb-cases .tdb-case:nth-child(2n) { animation-delay: -0.45s; }
.tdb.edition .tdb-case.en-deplacement { opacity: 0.3; animation: none; }
@keyframes tdb-frisson { from { transform: rotate(-0.5deg); } to { transform: rotate(0.5deg); } }
.tdb-fantome { position: fixed; z-index: 100; pointer-events: none; opacity: 0.95; transform: scale(1.04) rotate(1deg); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55); }

/* Grille « Ajouter une case » */
.tdb-ajout h3 { font-family: "Satoshi", Helvetica, Arial, sans-serif; font-weight: 700; font-size: 19px; margin: 0 0 4px; }
.tdb-tuiles { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 10px; }
@media (min-width: 700px) { .tdb-tuiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1250px) { .tdb-tuiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tdb-tuile { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 12px 12px 10px; border-radius: 16px; background: rgba(255, 255, 255, 0.035); border: 1px dashed rgba(255, 255, 255, 0.18); }
.tdb-tuile[hidden] { display: none; }
.tdb-tuile strong { font-size: 14.5px; line-height: 1.25; }
.tdb-tuile p { flex: 1; margin: 0; font-size: 12.5px; line-height: 1.4; color: var(--muted); }
.tdb-tuile .btn { align-self: flex-start; min-height: 36px; padding: 7px 12px; font-size: 13px; }
.tdb-lien-stats { display: inline-flex; margin: 4px 0 20px; font-weight: 600; font-size: 15px; }
@media (prefers-reduced-motion: reduce) { .tdb-plus svg { transition: none; } .tdb.edition .tdb-cases .tdb-case { animation: none; } }

/* Formulaire › E-mails : aperçu des e-mails HTML (30.09.2026) */
.apercus-courriels { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.apercus-courriels figure { margin: 0; }
.apercus-courriels figcaption { font-size: 13px; margin: 0 0 6px; }
.apercus-courriels small { color: var(--muted); }
.apercus-courriels iframe { width: 100%; height: 620px; border: 0; border-radius: 14px; background: #fff; }
.form-field input[type="color"] { height: 44px; padding: 4px; }

/* ── Accès par rubrique (Comptes & accès, 30.09.2026) ─────────── */
.pill-acces { background: rgba(201, 162, 76, 0.15); color: var(--copper-bright); }
.acces-bloc { border: 1px solid rgba(201, 162, 76, 0.35); border-radius: var(--radius); padding: 16px; margin: 6px 0 18px; background: rgba(201, 162, 76, 0.04); min-width: 0; }
.acces-bloc legend { font-weight: 600; padding: 0 6px; }
.acces-bloc[disabled] { display: none; }
.acces-formules { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 16px; }
.acces-formule { position: relative; }
.acces-formule input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.acces-formule span { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--ink); font-size: 13px; }
.acces-formule input:checked + span { border-color: var(--copper); background: rgba(201, 162, 76, 0.16); color: var(--copper-bright); }
.acces-formule input:focus-visible + span { outline: 2px solid var(--copper); outline-offset: 2px; }
.acces-corps { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 20px; align-items: start; }
@media (max-width: 900px) { .acces-corps { grid-template-columns: 1fr; } }
.acces-arbre { display: grid; gap: 2px; }
.acces-ligne { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 4px; min-height: 44px; margin: 0; cursor: pointer; }
.acces-ligne:hover { background: rgba(255, 255, 255, 0.03); }
.acces-ligne input { width: 20px; height: 20px; accent-color: var(--copper); flex: none; }
.acces-ligne small { color: var(--faint); font-size: 12px; margin-left: auto; text-align: right; }
.acces-groupe { margin-top: 8px; border-top: 1px solid var(--line); padding-top: 12px; font-weight: 600; }
.acces-enfant { padding-left: 38px; }
.acces-ligne:has(input:disabled) { opacity: 0.5; cursor: default; }
.acces-verrou { cursor: default; opacity: 0.6; padding-left: 38px; }
.acces-verrou:hover { background: none; }
.acces-apercu .hint { margin: 0 0 8px; }
.acces-telephone { border: 1px solid var(--line); border-radius: 18px; background: linear-gradient(#1b1918, #121110); padding: 12px 10px; }
.acces-m-ligne { padding: 9px 8px; }
.acces-m-ligne b { display: block; font-weight: 500; }
.acces-m-ligne small { color: var(--faint); font-size: 12px; }
.acces-m-groupe { display: flex; justify-content: space-between; align-items: center; padding: 10px 8px; border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; }
.acces-m-groupe i { font-style: normal; width: 20px; height: 20px; border-radius: 50%; background: rgba(201, 162, 76, 0.2); color: var(--copper); display: grid; place-items: center; }
.acces-m-vide { color: var(--danger); font-size: 13px; padding: 8px; margin: 0; }

/* Comptes sur téléphone : une fiche par compte, une information par ligne
   (le tableau à 6 colonnes débordait de l'écran). */
@media (max-width: 720px) {
  .table-comptes thead { display: none; }
  .table-comptes, .table-comptes tbody, .table-comptes tr, .table-comptes td { display: block; width: 100%; }
  .table-comptes tr { border-bottom: 1px solid var(--line); padding: 10px 0; }
  .table-comptes td { border: 0; padding: 4px 0; }
  .table-comptes td:nth-child(2)::before { content: "Identifiant : "; color: var(--faint); }
  .table-comptes td:nth-child(4)::before { content: "Accès : "; color: var(--faint); }
}
/* Accès sur téléphone : l'aide passe sous le libellé, qui garde sa largeur. */
@media (max-width: 560px) {
  .acces-ligne { flex-wrap: wrap; }
  .acces-ligne small { margin-left: 30px; flex-basis: 100%; text-align: left; }
  .acces-verrou small { margin-left: 0; }
}

/* ── Réservations par jour + Messages (David, 30.09.2026 ; standard 2.1) ── */
.rj-bascule { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 5px; max-width: 520px; margin: 0 0 14px;
  border: 1px solid var(--verre-bord); border-radius: 18px; background: var(--verre); }
.rj-bascule a { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; border-radius: 13px;
  color: var(--muted); font-size: 16px; font-weight: 650; text-decoration: none; }
.rj-bascule a.resas.actif { background: var(--copper); color: #1a1714; }
.rj-bascule a.messages.actif { background: #9fd0e6; color: #10232c; }
/* Compteurs de l'écran : même rouge que le chiffre du menu (.pastille) ; blanc sur --danger = 3,6:1 (07.10.2026). */
.rj-n { display: inline-block; min-width: 20px; padding: 0 6px; border-radius: 999px; background: #c62828; color: #fff; font-size: 11.5px; line-height: 19px; text-align: center; }
.rj-barre { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.rj-filtres { display: inline-flex; gap: 4px; padding: 4px; border: 1px solid var(--verre-bord); border-radius: 999px; background: var(--verre); max-width: 100%; }
.rj-filtres a { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 8px 14px; border-radius: 999px; color: var(--muted);
  font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.rj-filtres a.actif { background: var(--copper); color: #1a1714; }
.rj-filtres.messages a.actif { background: #9fd0e6; color: #10232c; }
.rj-filtres a.actif .rj-n { background: #1a1714; color: var(--copper-bright); }
.rj-barre form { margin-left: auto; }
@media (max-width: 600px) {
  .rj-filtres { display: flex; width: 100%; justify-content: space-between; }
  .rj-filtres a { padding: 8px 10px; font-size: 13px; }
  .rj-barre form { margin-left: 0; }
}
.rj-jour { margin: 22px 0 8px; }
.rj-titre { position: sticky; top: 0; z-index: 5; margin: 0 -10px 6px; padding: 8px 10px; border-radius: 12px;
  background: rgba(20, 19, 18, 0.72); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
@media (max-width: 899px) { .rj-titre { top: var(--barre-haut-h, 56px); } }
.rj-titre h2 { margin: 0; font-size: 19px; font-weight: 650; font-family: inherit; }
.rj-titre p { margin: 2px 0 0; font-size: 13px; color: var(--muted); }
.rj-titre p strong { color: var(--paper); font-weight: 600; }
.rj-rel { color: var(--copper-bright); }
.rj-attente { color: var(--warn); }
.rj-jour.passe .rj-titre h2 { color: var(--muted); }
.rj-jour-msg .rj-titre h2 { color: #9fd0e6; }
.rj-fiche, .rj-message { display: grid; grid-template-columns: 74px 1fr auto; gap: 4px 14px; align-items: start; padding: 14px 16px; margin-bottom: 8px;
  background: var(--verre); border: 1px solid var(--verre-bord); border-radius: 16px; }
.rj-fiche.nouvelle { border-color: rgba(201, 162, 76, 0.55); }
.rj-fiche.refusee { opacity: 0.62; }
.rj-message { grid-template-columns: 40px 1fr auto; border-color: rgba(94, 160, 190, 0.3); background: rgba(94, 160, 190, 0.06); }
.rj-message.nouvelle { border-color: rgba(94, 160, 190, 0.65); }
.rj-heure { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.2; }
.rj-heure small { display: block; font-size: 12px; font-weight: 500; color: var(--faint); }
.rj-qui strong { font-size: 16px; margin-left: 4px; }
.rj-message .rj-qui strong { margin-left: 0; }
.rj-meta { color: var(--muted); font-size: 13px; overflow-wrap: anywhere; }
.rj-bulle { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: rgba(94, 160, 190, 0.2); color: #9fd0e6; font-size: 17px; }
.etiquette.rj-statut.msg { background: rgba(94, 160, 190, 0.25); color: #bfe3f2; }
.rj-par, .rj-texte, .rj-actions, .rj-large { grid-column: 2 / -1; }
.rj-par { font-size: 13px; font-weight: 600; color: var(--muted); }
.rj-par.confirmee { color: #8fd6ae; }
.rj-par.refusee { color: #f1a497; }
.rj-par span { font-weight: 400; color: var(--faint); }
.rj-texte { background: rgba(0, 0, 0, 0.22); border-radius: 10px; padding: 8px 10px; font-size: 14px; white-space: pre-line; }
.rj-actions { margin-top: 4px; }
.rj-suppr { margin-left: auto; }
.rj-plus { text-align: center; margin-top: 16px; }
@media (max-width: 600px) {
  .rj-fiche { grid-template-columns: 1fr auto; }
  .rj-heure small { display: inline; margin-left: 6px; }
  .rj-qui, .rj-par, .rj-texte, .rj-actions, .rj-large { grid-column: 1 / -1; }
  .rj-fiche .rj-statut { grid-column: 2; grid-row: 1; justify-self: end; }
  .rj-message .rj-qui { grid-column: 2; }
  .rj-message .rj-statut { grid-column: 3; grid-row: 1; justify-self: end; }
  .rj-message .rj-texte, .rj-message .rj-actions, .rj-message .rj-par, .rj-message .rj-large { grid-column: 1 / -1; }
}
.tdb-a-traiter { display: flex; align-items: baseline; gap: 10px; color: var(--paper); text-decoration: none; padding: 4px 0; }
.tdb-a-traiter .kpi-grand { margin: 0; min-width: 44px; }
.tdb-a-traiter.messages .kpi-grand { color: #9fd0e6; }
.tdb-a-traiter:hover { color: var(--copper-bright); }
.rj-jour-msg .rj-rel { color: inherit; }

/* ── « Ajouter un compte » (maquette validée le 30.09.2026) : verre flouté ── */
.etape-creation { display: flex; align-items: center; gap: 10px; margin: 22px 0 10px; font-weight: 650; font-size: 16px; }
.etape-creation span { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: rgba(201, 162, 76, 0.2); color: var(--copper-bright); font-size: 13px; }
.acces-cartes { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; margin: 12px 0 14px; }
.acces-cartes.deux { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
/* Cartes des formules : verre SOMBRE (et non clair) — sur une photo claire (Grotto, Chang Thai, RT), la phrase de
   chaque carte tombait à 2-3:1 ; avec ce fond elle reste au-dessus de 4,5:1 (mesure au pixel, 07.10.2026). */
.acces-carte { position: relative; display: block; min-height: 68px; padding: 12px 14px 12px 44px; border-radius: 16px; cursor: pointer;
  background: rgba(20, 19, 18, 0.45); border: 1px solid var(--verre-bord); -webkit-backdrop-filter: var(--flou); backdrop-filter: var(--flou);
  transition: border-color 0.15s ease, background-color 0.15s ease; }
.acces-carte:hover { border-color: rgba(201, 162, 76, 0.45); }
.acces-carte input { position: absolute; left: 15px; top: 15px; width: 18px; height: 18px; margin: 0; accent-color: var(--copper); }
.acces-carte strong { display: block; font-size: 15px; }
.acces-carte small { display: block; margin-top: 2px; color: var(--muted); font-size: 12.5px; }
.acces-carte:has(input:checked) { border-color: var(--copper); background: linear-gradient(rgba(201, 162, 76, 0.13), rgba(201, 162, 76, 0.13)), rgba(20, 19, 18, 0.45); }
.acces-carte:has(input:focus-visible) { outline: 2px solid var(--copper); outline-offset: 2px; }
.acces-corps.sans-apercu { grid-template-columns: 1fr; }
.acces-surmesure { border: 1px dashed var(--verre-bord); border-radius: 14px; padding: 10px 12px; background: rgba(20, 19, 18, 0.45); }
.acces-surmesure > .hint { margin: 0 0 6px; }
.acces-toujours { margin: 10px 0 0; font-size: 12.5px; }
/* Le « Sur mesure » et le résumé « Avant de créer » : même verre sombre que les cartes (lisibles sur photo claire). */
.acces-resume { margin: 18px 0 12px; padding: 14px 16px; border-radius: 16px; border: 1px solid rgba(201, 162, 76, 0.55);
  background: rgba(20, 19, 18, 0.45); -webkit-backdrop-filter: var(--flou); backdrop-filter: var(--flou); }
.acces-resume:empty { display: none; }
.acces-resume h3 { margin: 0 0 6px; font-size: 12.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--copper-bright); }
.acces-resume p { margin: 4px 0; }
.acces-resume-manque { color: #f1a497; }
.form-creation [data-creer][disabled] { opacity: 0.55; cursor: not-allowed; }
#message-comptes:focus { outline: none; }
/* Création : l'étape 2 porte déjà le titre ; celui du cadre reste pour les lecteurs d'écran. */
.form-creation .acces-bloc > legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ============================================================
   FEUILLE DU MENU DU JOUR — bloc « Présentation », barres d'écriture,
   aperçu en direct (client, Grotto et Poste, 01.10.2026).
   ============================================================ */
.feuille-reglages { margin-top: 6px; }
.feuille-ligne { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 12px; font-size: 14px; }
.segments { display: inline-flex; background: rgba(0, 0, 0, .25); border: 1px solid var(--line); border-radius: 12px; padding: 3px; gap: 3px; }
.segments button { border: 0; background: transparent; color: var(--paper); font: inherit; font-size: 14px; padding: 8px 14px; border-radius: 9px; cursor: pointer; }
.segments button[aria-pressed="true"] { background: var(--copper); color: #1a120b; font-weight: 600; }
.feuille-teintes { display: inline-flex; gap: 6px; align-items: center; }
.feuille-teintes[hidden] { display: none; }
.feuille-teinte { width: 28px; height: 28px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0; position: relative; overflow: hidden; }
.feuille-teinte[aria-pressed="true"] { border-color: #fff; }
.feuille-teinte-libre { background: conic-gradient(#d9614f, #d9a441, #4ea87a, #3f5b74, #7c2f36, #d9614f); }
.feuille-teinte-libre input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.feuille-devise { display: inline-flex; gap: 6px; align-items: center; }
.feuille-devise select { width: auto; padding: 6px 10px; }
.feuille-devise input { width: 90px; padding: 6px 10px; }
.feuille-modeles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 14px; }
.feuille-modele { border: 1px solid var(--line); background: rgba(0, 0, 0, .25); color: var(--paper); border-radius: 10px; padding: 5px; cursor: pointer; font: inherit; font-size: 12px; line-height: 1.2; text-align: center; }
.feuille-modele .mini { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; height: 28px; padding: 4px; margin-bottom: 4px; border-radius: 5px; background: #fff; position: relative; overflow: hidden; }
.feuille-modele .mini i { border: 1px solid #e3d9cb; border-radius: 3px; }
.feuille-modele[data-feuille-modele="logo"] .mini i { border-color: #b5552f; }
.feuille-modele[data-feuille-modele="couleur"] .mini i { border-color: #5e7a5f; background: #eef2ee; }
.feuille-modele[data-feuille-modele="maison"] .mini::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 10px; background: linear-gradient(170deg, transparent 40%, #d8d2cc 41%); }
.feuille-modele[aria-pressed="true"] { border-color: var(--copper); box-shadow: 0 0 0 2px var(--copper) inset; }
.feuille-deux { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
@media (max-width: 520px) { .feuille-deux { grid-template-columns: 1fr; } .feuille-modeles { grid-template-columns: repeat(2, 1fr); } }
.feuille-image { border: 1px solid var(--line); background: rgba(0, 0, 0, .25); border-radius: 12px; padding: 10px; display: grid; gap: 8px; }
.feuille-image .haut { display: flex; align-items: center; gap: 10px; }
.feuille-image .haut img, .feuille-image .mini-fond { width: 56px; height: 40px; object-fit: contain; flex: none; background: #fff center / contain no-repeat; border-radius: 7px; display: grid; place-items: center; color: #999; font-size: 11px; }
.feuille-image .haut strong { display: block; font-size: 14px; }
.feuille-image .haut small { color: var(--muted); font-size: 12px; }
.feuille-image .bas { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.feuille-image .bas select { width: auto; padding: 6px 8px; }
.feuille-reglages textarea[data-feuille-note] { min-height: 76px; }
.note-reglage { font-size: 13px; color: var(--copper-bright); background: rgba(201, 162, 76, .1); border-radius: 10px; padding: 8px 12px; margin: 4px 0 0; }

/* Barre d'écriture : taille · G · I · couleur · P */
.outils { display: inline-flex; gap: 4px; align-items: center; flex: none; }
/* Carte à rubriques : pas de réglage d'écriture (il sert à la feuille du menu du jour). */
/* Carte à rubriques : les barres seulement quand « Présentation et écriture » est ouverte (David, 01.10.2026). */
.menu-editeur[data-gabarit="carte"]:not(.ecriture-ouverte) .outils { display: none; }
.outils select { width: 60px; padding: 4px 6px; font-size: 13px; border-radius: 8px; min-height: 0; }
.outils .outil { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--line); background: rgba(0, 0, 0, .3); color: var(--paper); cursor: pointer; padding: 0; font-size: 14px; display: inline-grid; place-items: center; }
.outils .outil-g { font-weight: 700; }
.outils .outil-i { font-style: italic; font-family: Georgia, serif; }
.outils .outil-p { font-weight: 700; font-family: Georgia, serif; }
.outils .outil[aria-pressed="true"] { background: var(--copper); border-color: var(--copper); color: #1a120b; }
.outils .outil.choisi { border-color: var(--copper); }
.outils .outil-couleur span { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .25); }
label.tete-champ, .form-field label[for="f_titre"]:has(.outils) { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.plat-edit-champs label:has(> .outils) { grid-template-columns: 1fr auto; align-items: center; }
.plat-edit-champs label:has(> .outils) > input, .plat-edit-champs label:has(> .outils) > textarea { grid-column: 1 / -1; }
.menu-editeur[data-gabarit="menus"] .plat-edit-champs label.prix-champ:has(> .outils) { grid-column: 1 / -1; }
.plat-edit-champs label.prix-champ:has(> .outils) > input { max-width: 200px; }
.plat-edit-tete:has(> .outils) { flex-wrap: wrap; }
.plat-edit-tete > .outils { order: 5; flex-basis: 100%; justify-content: flex-end; }
.outils-legende { font-size: 12px; color: var(--muted); font-style: normal; margin-right: 6px; }

/* Fenêtres couleur / police */
.feuille-pop { position: absolute; z-index: 300; width: 290px; background: var(--slate-deep); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 14px 44px rgba(0, 0, 0, .55); padding: 10px; color: var(--paper); }
.feuille-pop h4, .feuille-pop h5 { margin: 6px 4px 6px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 400; }
.pop-couleurs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.pop-couleur { height: 42px; border-radius: 10px; border: 2px solid transparent; cursor: pointer; color: #fff; font-size: 10px; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 3px; }
.pop-couleur[aria-pressed="true"] { border-color: #fff; }
.pop-polices { max-height: 330px; overflow-y: auto; }
.pop-police { display: block; width: 100%; text-align: left; background: transparent; border: 0; color: var(--paper); font-size: 19px; padding: 6px 8px; border-radius: 8px; cursor: pointer; }
.pop-police:hover, .pop-police[aria-pressed="true"] { background: rgba(255, 255, 255, .08); }
.pop-bas { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 10px; font-size: 13px; color: var(--muted); }
.pop-bas label { display: flex; align-items: center; gap: 8px; }
.pop-bas input[type="color"] { width: 42px; height: 30px; border: 0; background: none; padding: 0; }

/* Aperçu de la feuille (colonne de droite) */
.feuille-format { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); margin-left: auto; }
.feuille-format select { width: auto; padding: 4px 8px; }
.feuille-cadre { background: #8a817a; border-radius: 12px; padding: 10px; }
.feuille-cadre iframe { display: block; width: 100%; border: 0; background: transparent; }
.feuille-etat { margin: 10px 0 0; padding: 9px 12px; border-radius: 10px; font-size: 13px; background: rgba(255, 255, 255, .05); }
.feuille-etat:empty { display: none; }
.feuille-etat.ok { background: rgba(78, 168, 122, .16); color: #a8e0b5; }
.feuille-etat.reduit { background: rgba(217, 164, 65, .16); color: #f2cf8f; }
.feuille-etat.erreur { background: rgba(217, 97, 79, .16); color: #f3a89b; }
.feuille-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 12px; }
.feuille-apercu .hint { text-align: center; margin-top: 8px; }

/* ============================================================
   MENU DU JOUR : UN JOUR = UN MENU (David, 01.10.2026)
   Même verre dépoli que le reste du panel.
   ============================================================ */
.calendrier-menus[data-mode="jour"] .cal-jour { min-height: 78px; display: flex; flex-direction: column; gap: 2px; }
.cal-etat { align-self: flex-start; font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 6px; background: rgba(255, 255, 255, 0.08); color: var(--muted); }
.cal-jour.type-en_ligne .cal-etat { background: rgba(78, 168, 122, 0.22); color: #8fdcb2; }
.cal-jour.type-programme .cal-etat { background: rgba(217, 164, 65, 0.22); color: #f0c878; }
.cal-jour.type-vide .cal-etat { background: transparent; color: var(--copper); padding: 0; }
.calendrier-menus[data-mode="jour"] .cal-info { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-weight: 400; }
.calendrier-menus[data-mode="jour"] .cal-jour.type-vide .cal-info { opacity: 1; }
.calendrier-menus[data-mode="jour"] .cal-jour.type-programme .cal-info { color: #f0c878; font-weight: 400; }
.calendrier-menus[data-mode="jour"] .cal-jour.type-en_ligne .cal-info { color: #c8ecd6; font-weight: 400; }
.calendrier-menus[data-mode="jour"] .cal-jour.choisi { outline: 3px solid var(--copper); outline-offset: 1px; }
@media (max-width: 700px) {
  .calendrier-menus[data-mode="jour"] .cal-jour { min-height: 56px; }
  .calendrier-menus[data-mode="jour"] .cal-info { display: none; }
  .cal-etat { font-size: 9.5px; padding: 0 3px; }
}

.jour-menu { border-color: rgba(201, 162, 76, 0.45); }
.jour-tete { display: flex; align-items: center; gap: 10px; }
.jour-tete h2 { flex: 1; margin: 0; text-align: center; }
.jour-nav-off { opacity: 0.3; pointer-events: none; }
.jour-statut { text-align: center; margin: 6px 0 0; font-size: 14px; color: var(--muted); }
.jour-statut.statut-en-ligne { color: #8fdcb2; }
.jour-statut.statut-pret { color: #f0c878; }
.jour-depart { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 14px 0 4px; padding: 12px 14px; border-radius: 16px; border: 1px dashed rgba(240, 200, 120, 0.45); background: rgba(240, 200, 120, 0.08); font-size: 14px; }
.jour-depart[hidden] { display: none; }
.jour-depart select { width: auto; padding: 6px 10px; }
.jour-quand-titre { margin: 16px 0 8px; font-size: 15px; }
.jour-puces { display: flex; flex-wrap: wrap; gap: 8px; }
.jour-puce { display: grid; gap: 1px; text-align: left; padding: 10px 14px; border-radius: 14px; border: 1px solid var(--verre-bord); background: rgba(255, 255, 255, 0.04); color: var(--paper); font: inherit; cursor: pointer; }
.jour-puce small { color: var(--muted); font-size: 12px; }
.jour-puce:hover:not(:disabled) { border-color: var(--copper); }
.jour-puce[aria-pressed="true"] { border-color: var(--copper); background: rgba(201, 162, 76, 0.14); box-shadow: 0 0 0 1px var(--copper) inset; }
.jour-puce:disabled { opacity: 0.35; cursor: not-allowed; }
.jour-autre { margin-top: 10px; }
.jour-autre[hidden] { display: none; }
.jour-phrase { margin: 14px 0 0; padding: 12px 14px; border-radius: 14px; background: rgba(78, 168, 122, 0.12); color: #c8ecd6; font-size: 15px; }
.jour-phrase b { color: #fff; }
.jour-phrase.attention { background: rgba(217, 97, 79, 0.14); color: #f3a89b; }
.barre-jour { flex-wrap: wrap; }

/* « Copier sur d'autres jours » : fenêtre en verre dépoli */
.copier-voile { position: fixed; inset: 0; z-index: 250; display: grid; place-items: center; padding: 16px; background: rgba(10, 9, 8, 0.6); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.copier-voile[hidden] { display: none; }
.copier-boite { width: min(560px, 100%); max-height: calc(100vh - 32px); overflow: auto; display: grid; gap: 12px; }
.copier-boite h2 { margin: 0; }
.copier-mois { margin: 6px 0 4px; font-weight: 700; text-transform: capitalize; }
.copier-semaine { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.copier-jour { padding: 8px 0; border-radius: 10px; border: 1px solid var(--verre-bord); background: rgba(255, 255, 255, 0.04); color: var(--paper); font: inherit; font-size: 13px; cursor: pointer; }
.copier-jour.deja { color: #f0c878; }
.copier-jour[aria-pressed="true"] { background: var(--copper); border-color: var(--copper); color: #1a120b; font-weight: 700; }
.copier-jour:disabled { opacity: 0.25; cursor: default; }

/* 👁 Voir en grand : la feuille en plein écran (verre sombre) */
.feuille-grand { position: fixed; inset: 0; z-index: 260; display: flex; flex-direction: column; background: rgba(12, 11, 10, 0.88); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.feuille-grand[hidden] { display: none; }
.feuille-grand-barre { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--verre-bord); background: rgba(22, 20, 18, 0.82); }
.feuille-grand-barre strong { flex: 1; min-width: 180px; }
.feuille-grand-corps { flex: 1; overflow: auto; padding: 12px; text-align: center; }
.feuille-grand-corps iframe { border: 0; background: transparent; display: inline-block; }
body.feuille-grand-ouverte { overflow: hidden; }
.feuille-cadre { cursor: zoom-in; }
/* Barre du bas du menu du jour : boutons secondaires en verre OPAQUE (lisibles par-dessus le formulaire). */
.barre-jour .btn-ghost { background: rgba(30, 27, 24, 0.94); -webkit-backdrop-filter: var(--flou); backdrop-filter: var(--flou); }
/* Aperçu à droite (grand écran) : la barre du bas reste sous la colonne de gauche, l'aperçu et ses boutons restent libres. */
@media (min-width: 1280px) {
  .barre-jour { margin-right: calc(max(340px, 38%) + 22px); }
}
.save-bar.barre-jour { background: rgba(22, 20, 18, 0.9); -webkit-backdrop-filter: var(--flou); backdrop-filter: var(--flou); border: 1px solid var(--verre-bord); border-radius: 18px; padding: 10px 12px; margin-bottom: 10px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); }
/* Quand l'afficher : un calendrier (jour) + une heure, déjà remplis (David, 01.10.2026). */
.jour-quand { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.jour-champ { display: grid; gap: 5px; font-size: 13px; color: var(--muted); }
.jour-champ input { min-width: 170px; font-size: 16px; padding: 10px 12px; }
.jour-champ input[type="time"] { min-width: 120px; }
.jour-tout-de-suite { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 14px; border: 1px solid var(--verre-bord); background: rgba(255, 255, 255, 0.04); cursor: pointer; font-size: 14px; color: var(--paper); }
.jour-tout-de-suite input { width: 18px; height: 18px; accent-color: var(--copper); margin: 0; }
.jour-tout-de-suite small { color: var(--muted); }
.jour-tout-de-suite:has(input:checked) { border-color: var(--copper); background: rgba(201, 162, 76, 0.14); }
.jour-quand.tout-de-suite .jour-champ { opacity: 0.4; }
.jour-champ input { background: rgba(0, 0, 0, 0.28); border: 1px solid var(--verre-bord); color: var(--paper); border-radius: 12px; color-scheme: dark; font: inherit; font-size: 16px; }
.jour-champ input:focus { outline: 2px solid var(--copper); outline-offset: 1px; }

/* ============================================================
   AUTRES CARTES (chasse, été, Saint-Valentin…) — David, 01.10.2026
   Nom libre, versions, période et présentation REPLIÉES (Jose voit
   d'abord l'essentiel), écriture de chaque titre de rubrique.
   ============================================================ */
details.bloc-repli { padding: 0; }
details.bloc-repli > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 16px 20px; min-height: var(--tactile-min); }
details.bloc-repli > summary::-webkit-details-marker { display: none; }
details.bloc-repli > summary::after { content: "▾"; margin-left: auto; color: var(--muted); transition: transform .2s; }
details.bloc-repli[open] > summary::after { transform: rotate(180deg); }
details.bloc-repli > summary h2 { margin: 0; }
details.bloc-repli > summary .resume { color: var(--copper-bright); font-size: 14px; }
details.bloc-repli > .dedans { padding: 0 20px 18px; }
.carte-nom label { display: block; font-weight: 600; margin-bottom: 6px; }
.carte-nom-ligne { display: flex; gap: 8px; flex-wrap: wrap; }
.carte-nom-ligne input { flex: 1; min-width: 220px; font-size: 17px; background: rgba(0, 0, 0, .28); border: 1px solid var(--verre-bord); color: var(--paper); border-radius: 12px; padding: 10px 14px; min-height: var(--tactile-min); }
.versions-carte h2 { margin-top: 0; }
.versions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 760px) { .versions { grid-template-columns: 1fr; } }
.version { border-radius: 16px; padding: 12px 14px; border: 1px solid var(--verre-bord); background: rgba(0, 0, 0, .16); }
.version p { margin: 4px 0; font-size: 14px; }
.etiquette-version { display: inline-block; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; padding: 3px 9px; border-radius: 99px; margin-bottom: 6px; }
.version.en-ligne .etiquette-version { background: rgba(78, 168, 122, .16); color: #8fd3ad; }
.version.nouvelle .etiquette-version { background: rgba(217, 164, 65, .16); color: var(--warn); }
.periode-choix { grid-template-columns: 1fr 1fr; }
@media (max-width: 760px) { .periode-choix { grid-template-columns: 1fr; } }
.periode-details { margin-top: 12px; }
.periode-dates { align-items: flex-end; }
.case-annee { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--verre-bord); background: rgba(0, 0, 0, .2); min-height: var(--tactile-min); cursor: pointer; }
.case-annee input { accent-color: var(--copper); width: 18px; height: 18px; }
#periode input[type="date"] { color-scheme: dark; }
.mini-mois { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 10px; }
@media (max-width: 560px) { .mini-mois { grid-template-columns: 1fr; } }
.mini-mois .mois p { margin: 0 0 6px; font-weight: 600; text-transform: capitalize; }
.mini-mois .sem { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; font-size: 12.5px; text-align: center; }
.mini-mois .sem span { padding: 5px 0; border-radius: 7px; }
.mini-mois .sem .entete { font-size: 10.5px; text-transform: uppercase; color: var(--faint); }
.mini-mois .sem .dans { background: rgba(78, 168, 122, .3); color: #fff; }
.mini-mois .sem .bord { background: var(--ok); font-weight: 700; }
.mini-mois .sem .auj { box-shadow: 0 0 0 1.5px var(--copper) inset; }
.phrase-periode { margin: 14px 0 0; padding: 12px 14px; border-radius: 14px; background: rgba(78, 168, 122, .13); color: #c8ecd6; }
.phrase-periode strong { color: #fff; }
.phrase-periode em { color: var(--muted); }
.phrase-periode.attention { background: rgba(217, 97, 79, .15); color: #f3a89b; }
.explication { margin: 10px 0 0; padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, .05); color: var(--muted); font-size: 13.5px; }
.explication strong { color: var(--paper); }
#periode .sous-titre { margin: 16px 0 8px; font-size: 15px; }
#periode .segments button:disabled { opacity: .4; cursor: default; }
.site-mock { margin-top: 10px; border-radius: 16px; background: #f6f1e9; color: #2b2622; padding: 16px 18px; }
.site-mock h3 { font-family: Georgia, serif; font-weight: 400; font-size: 21px; margin: 0 0 6px; color: #2b2622; }
.site-mock p { margin: 6px 0; font-size: 14.5px; color: #6b6259; }
.site-mock p.petit { font-size: 12.5px; color: #8c847a; }
.site-mock strong { color: #2b2622; }
.site-mock .lien { display: inline-block; margin-top: 8px; background: #B5552F; color: #fff; border-radius: 99px; padding: 8px 16px; font-weight: 600; font-size: 14px; }
.site-mock .badge { display: inline-block; background: rgba(181, 85, 47, .12); color: #9E4626; border-radius: 99px; padding: 2px 9px; font-size: 12px; font-weight: 600; }
.site-mock .bouton-carte { display: flex; justify-content: space-between; align-items: center; gap: 10px; border: 1px dashed #b5ada3; border-radius: 18px; padding: 12px 16px; color: #8c847a; }
/* Présentation repliée : les barres d'écriture n'apparaissent qu'avec elle (Jose voit d'abord ses plats). */
.menu-editeur[data-gabarit="carte"]:not(.ecriture-ouverte) [data-rubriques] .outils { display: none !important; }
/* Toute carte autre que le menu du jour (ex. « Proposition du chef » en menus encadrés) : même règle. */
.menu-editeur:has([data-presentation]):not(.ecriture-ouverte) .outils { display: none !important; }
.menu-editeur[data-gabarit="carte"] .rubrique-edit-tete { flex-wrap: wrap; }
.outils-rub .outils-legende { color: var(--faint); }
.outils-rub.propre .outils-legende { color: var(--copper-bright); }
.outil-retour { font-size: 15px; }
.feuille-garde-image { margin-bottom: 12px; }
.feuille-garde-image .haut img { width: 56px; height: 56px; object-fit: contain; background: #fff; border-radius: 8px; }
/* Aperçu d'une carte à rubriques : page par page, on fait défiler. */
.menu-editeur[data-gabarit="carte"] .apercu-feuille { background: #8a817a; max-height: 74vh; overflow-y: auto; cursor: zoom-in; }
/* Période d'une carte : OUVERTE, en haut (David, 01.10.2026 22:50) — « Toujours » ou « Du … au … ». */
.periode-carte { border-color: rgba(201, 162, 76, .45); }
.periode-carte h2 { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-top: 0; }
.periode-carte h2 .resume { font-family: inherit; font-size: 14px; color: var(--copper-bright); }
.periode-options { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 10px; }
.periode-options > summary { cursor: pointer; color: var(--muted); font-size: 14px; min-height: var(--tactile-min); display: flex; align-items: center; }
.periode-options[open] > summary { color: var(--paper); margin-bottom: 10px; }

/* ============================================================
   LOT 2 — mise en page par page (David, 01.10.2026)
   ============================================================ */
.onglets-pages { position: sticky; top: calc(var(--barre-haut-h, 0px) + 6px); z-index: 6; display: flex; gap: 8px; overflow-x: auto; padding: 10px; margin: 0 0 14px; border-radius: 18px; background: rgba(22, 18, 16, .88); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid var(--verre-bord); }
@media (min-width: 1024px) { .onglets-pages { top: 8px; } }
.onglet-page { flex: none; text-align: left; border: 1px solid var(--verre-bord); background: rgba(0, 0, 0, .25); color: var(--paper); border-radius: 14px; padding: 8px 12px; cursor: pointer; min-width: 120px; min-height: var(--tactile-min); font: inherit; }
.onglet-page strong { display: block; font-size: 14px; }
.onglet-page small { display: block; color: var(--muted); font-size: 11.5px; max-width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.onglet-page[aria-pressed="true"] { border-color: var(--copper); background: rgba(201, 162, 76, .16); box-shadow: 0 0 0 1.5px var(--copper) inset; }
.onglet-page.toutes { min-width: auto; }
.note-garde { margin: 0 0 14px; padding: 14px 16px; border-radius: 16px; border: 1px dashed var(--verre-bord); background: rgba(0, 0, 0, .18); display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.mise-en-page { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 4px 0 10px; padding: 8px 10px; border-radius: 12px; background: rgba(201, 162, 76, .08); font-size: 13.5px; }
.mise-en-page .mise-titre { color: var(--copper-bright); font-weight: 600; margin-right: 4px; }
.mise-en-page .coche-page { display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px; border-radius: 10px; border: 1px solid var(--verre-bord); background: rgba(0, 0, 0, .2); cursor: pointer; min-height: 40px; }
.mise-en-page .coche-page input { accent-color: var(--copper); width: 17px; height: 17px; }
.mise-en-page .segments button { font-size: 13px; padding: 6px 10px; }
.rubrique-edit.rubrique-suite { border-style: dashed; }
.rubrique-edit.rubrique-suite::before { content: "↪ Suite de la page d'avant"; display: block; color: var(--warn); font-size: 13px; margin-bottom: 6px; }

/* Système de réservation (Réserver › Comment vos clients réservent, 05.10.2026) : une ligne par choix. */
.systeme-resa { display: grid; grid-template-columns: 22px 1fr auto; gap: 2px 12px; align-items: start; padding: 14px 4px; border-bottom: 1px solid rgba(255, 255, 255, 0.07); cursor: pointer; }
.systeme-resa input { margin-top: 4px; accent-color: var(--copper); }
.systeme-resa-titre { font-weight: 600; }
.systeme-resa-aide { grid-column: 2 / 4; }
.systeme-resa:last-of-type { border-bottom: 0; }

/* Livraison en ligne (05.10.2026) : choix de la couleur du bouton */
.choix-couleurs { display: flex; gap: 18px; flex-wrap: wrap; }
.choix-couleur { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.pastille-livraison { width: 22px; height: 22px; border-radius: 50%; display: inline-block; }
.pastille-livraison-rouge { background: #c62828; }
.pastille-livraison-or { background: var(--copper); }
.pastille-livraison-contour { border: 2px solid var(--copper); }

/* Champs natifs lisibles partout (dates, heures, listes) : jamais de texte noir sur fond sombre (David, 05.10.2026). */
:root { color-scheme: dark; }
.form-field input[type="date"],
.form-field input[type="time"],
.form-field input[type="datetime-local"],
.form-field input[type="month"],
.form-field input[type="week"],
.form-field input[type="search"] {
  width: 100%;
  color: var(--paper);
  padding: 10px 13px;
  font-size: 14px;
  font-family: inherit;
}
select option, select optgroup { background: #1b1916; color: var(--paper); }
.form-field input::placeholder, .form-field textarea::placeholder { color: rgba(255, 255, 255, 0.38); }
.form-field input:disabled, .form-field select:disabled, .form-field textarea:disabled { color: var(--muted); }

/* Contrat & interventions (05.10.2026) : compteur de la période, une intervention = une ligne. */
.contrat-compteur { display: grid; gap: 12px; }
.contrat-periode { margin: 0; color: var(--muted); font-size: 14px; }
.contrat-periode strong { color: var(--paper); }
.contrat-chiffres { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.contrat-chiffre { display: block; font-size: 26px; font-weight: 800; color: var(--paper); line-height: 1.1; font-variant-numeric: tabular-nums; }
.contrat-reste { color: var(--copper-bright); }
.contrat-libelle { display: block; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-top: 4px; }
.contrat-jauge { height: 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.contrat-jauge span { display: block; height: 100%; border-radius: 999px; background: var(--ok); }
.contrat-alerte { border-color: rgba(217, 164, 65, 0.55); }
.contrat-alerte .contrat-jauge span { background: var(--warn); }
.contrat-alerte .contrat-reste { color: #f0b35a; }
.contrat-message { margin: 0; color: #f0b35a; font-weight: 600; font-size: 14px; }
.contrat-agence { margin: 0; padding-top: 10px; border-top: 1px dashed var(--line); font-size: 13px; color: var(--muted); }
.contrat-agence strong { color: #e9c37c; }
.contrat-ajout { padding: 14px 18px; }
.contrat-ajout > summary { list-style: none; display: inline-flex; cursor: pointer; }
.contrat-ajout > summary::-webkit-details-marker { display: none; }
.contrat-ajout[open] > summary { margin-bottom: 14px; }
.contrat-form .form-row { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.contrat-liste { margin-bottom: 18px; }
.contrat-ligne { display: grid; grid-template-columns: 92px 130px 1fr auto auto; gap: 6px 14px; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--line); font-size: 14px; }
.contrat-ligne:last-child { border-bottom: 0; }
.contrat-attente { background: rgba(217, 164, 65, 0.05); }
.contrat-date { color: var(--muted); font-variant-numeric: tabular-nums; }
.contrat-desc { color: var(--paper); line-height: 1.45; }
.contrat-desc small, .contrat-temps small { color: var(--muted); font-size: 12px; }
.contrat-temps { text-align: right; white-space: nowrap; display: grid; }
.contrat-etat { justify-self: end; }
.contrat-etat form { margin: 0; }
.contrat-detail { grid-column: 1 / -1; }
.contrat-detail > summary { cursor: pointer; color: var(--muted); font-size: 13px; padding: 2px 0; }
.contrat-detail[open] { padding: 10px 0 4px; }
.contrat-trace-ligne { font-size: 13px; color: var(--muted); margin: 8px 0 12px; }
.contrat-ligne-mise { grid-template-columns: 92px 1fr auto; }
.contrat-ligne-trace { grid-template-columns: 130px 170px 1fr; }
.contrat-ligne-info { grid-template-columns: 1fr auto; }
.contrat-ligne-info span { color: var(--muted); }
.contrat-total td { font-weight: 700; border-top: 1px solid var(--line); }
.contrat-membre { display: grid; grid-template-columns: 1fr auto auto; gap: 16px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
@media (max-width: 720px) {
  .contrat-chiffre { font-size: 21px; }
  .contrat-ligne { grid-template-columns: auto 1fr auto; }
  .contrat-ligne .contrat-date { grid-column: 1; grid-row: 1; }
  .contrat-ligne .contrat-type { grid-column: 2; grid-row: 1; }
  .contrat-ligne .contrat-desc { grid-column: 1 / -1; grid-row: 2; }
  .contrat-ligne .contrat-etat { grid-column: 1 / 3; grid-row: 3; justify-self: start; }
  .contrat-ligne .contrat-temps { grid-column: 3; grid-row: 3; }
  .contrat-ligne .contrat-detail { grid-row: 4; }
  .contrat-ligne-mise .contrat-desc { grid-column: 2 / -1; }
  .contrat-ligne-mise .contrat-etat { grid-column: 1 / -1; }
  .contrat-ligne-trace { grid-template-columns: 1fr; }
  .contrat-ligne-info { grid-template-columns: 1fr; }
  .contrat-membre { grid-template-columns: 1fr; gap: 4px; }
  .contrat-table th, .contrat-table td { padding: 10px 6px; font-size: 13px; }
}
/* Interventions : les 3 plus récentes, puis « Voir plus » qui déplie le reste (05.10.2026) */
.contrat-plus > summary { list-style: none; cursor: pointer; display: flex; justify-content: center; padding: 12px 14px; border-bottom: 1px solid var(--line); color: var(--copper-bright); font-weight: 600; font-size: 14px; min-height: var(--tactile-min); align-items: center; }
.contrat-plus > summary::-webkit-details-marker { display: none; }
.contrat-plus > summary:hover { background: var(--ink-soft); }
.contrat-plus .contrat-voir-moins, .contrat-plus[open] .contrat-voir-plus { display: none; }
.contrat-plus[open] .contrat-voir-moins { display: inline; }
.contrat-plus:not([open]) > summary { border-bottom: 0; }
/* Bouton « Contrat MYDMC » du menu : à part, comme « Réglages », bien visible (David, 05.10.2026) */
.menu-contrat { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 10px 8px 0; padding: 12px 12px; border-radius: 12px;
  border: 1px solid rgba(201, 162, 76, 0.45); background: rgba(201, 162, 76, 0.08); text-decoration: none; min-height: var(--tactile-min); }
.menu-contrat:hover, .menu-contrat.actif { background: rgba(201, 162, 76, 0.16); border-color: var(--copper); }
.menu-contrat-titre { font-size: 13px; font-weight: 700; letter-spacing: 0.02em; color: var(--copper-bright); }
.menu-contrat-reste { font-size: 12px; font-weight: 600; color: var(--paper); background: rgba(255, 255, 255, 0.08); padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.menu-contrat-alerte .menu-contrat-reste { background: rgba(217, 164, 65, 0.22); color: #f0b35a; }
/* Contrat : dates calculées automatiquement (05.10.2026) */
.contrat-calcul { margin: 6px 0 4px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.contrat-calcul-titre { margin: 0; padding: 10px 14px; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--line); background: rgba(255, 255, 255, 0.03); }
.contrat-calcul .contrat-ligne strong { color: var(--paper); }

/* Module artisan (05.10.2026) : pièces jointes des devis en vignettes ; listes longues repliées (une ligne par élément). */
.devis-photos { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.devis-photo { display: grid; gap: 4px; width: 132px; text-decoration: none; }
.devis-photo img, .devis-photo > span { width: 132px; height: 96px; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.04); display: grid; place-items: center; font-size: 28px; }
.devis-photo small { font-size: 11px; color: var(--muted); line-height: 1.3; }
.devis-photo:hover img { border-color: var(--copper); }
.liste-repliable .liste-item:not(.ouvert) .liste-item-corps { display: none; }
.liste-repliable .liste-item-resume { cursor: pointer; display: flex; align-items: center; gap: 10px; }
.liste-repliable .liste-item-resume::after { content: "Modifier"; margin-left: auto; font-size: 12px; color: var(--copper-bright); font-weight: 600; }
.liste-repliable .liste-item.ouvert .liste-item-resume::after { content: "Fermer"; }
.liste-vignette { width: 34px; height: 34px; border-radius: 8px; object-fit: cover; flex-shrink: 0; border: 1px solid var(--line); }

/* Comptes & accès : droits du Contrat MYDMC des comptes de l'équipe (06.10.2026) */
.droits-contrat { font-size: 12px; color: var(--muted); margin-top: 6px; }
.droits-contrat-form { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 6px; }
.droits-contrat-creation { margin: 4px 0 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; }
/* Contrat : durée en deux listes ; périodes dépliables ; temps réel à la demande (MYDMC) */
.contrat-duree-listes { display: flex; gap: 8px; }
.contrat-duree-listes select { width: auto; min-width: 96px; }
.contrat-reel-bascule { margin-bottom: 10px; }
.contrat-periodes .contrat-reel { display: none; }
.contrat-periodes.avec-reel .contrat-reel { display: inline; color: var(--muted); }
.contrat-periode-tete, .contrat-periode > summary, .contrat-periode-total { display: grid; grid-template-columns: 1fr 90px 90px 90px 28px; gap: 10px; align-items: center; padding: 12px 14px; }
.contrat-periodes:not(.avec-reel) .contrat-periode-tete, .contrat-periodes:not(.avec-reel) .contrat-periode > summary, .contrat-periodes:not(.avec-reel) .contrat-periode-total { grid-template-columns: 1fr 90px 90px 28px; }
.contrat-periode-tete { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); border-bottom: 1px solid var(--line); }
.contrat-periode { border-bottom: 1px solid var(--line); }
.contrat-periode > summary { list-style: none; cursor: pointer; font-size: 14px; }
.contrat-periode > summary::-webkit-details-marker { display: none; }
.contrat-periode > summary:hover { background: var(--ink-soft); }
.contrat-plus-icone { position: relative; width: 22px; height: 22px; border-radius: 999px; background: rgba(201, 162, 76, 0.16); justify-self: end; }
.contrat-plus-icone::before, .contrat-plus-icone::after { content: ""; position: absolute; left: 6px; right: 6px; top: 10px; height: 2px; border-radius: 2px; background: var(--copper); transition: transform 0.25s; }
.contrat-plus-icone::after { transform: rotate(90deg); }
.contrat-periode[open] .contrat-plus-icone::after { transform: rotate(0deg); }
.contrat-periode-detail { display: grid; grid-template-columns: 92px 1fr 70px 70px; gap: 6px 12px; padding: 8px 14px 8px 28px; font-size: 13px; border-top: 1px dashed var(--line); }
.contrat-periodes:not(.avec-reel) .contrat-periode-detail { grid-template-columns: 92px 1fr 70px; }
.contrat-periode-detail strong, .contrat-periode-detail .contrat-reel { text-align: right; }
.contrat-periode-vide { padding: 4px 28px 12px; margin: 0; }
.contrat-periode-total { font-weight: 700; }
@media (max-width: 720px) {
  .contrat-periode-tete, .contrat-periode > summary, .contrat-periode-total { grid-template-columns: 1fr 64px 64px 22px !important; font-size: 13px; }
  .contrat-periodes.avec-reel .contrat-periode-tete, .contrat-periodes.avec-reel .contrat-periode > summary, .contrat-periodes.avec-reel .contrat-periode-total { grid-template-columns: 1fr 58px 58px 58px 22px !important; }
  .contrat-periode-detail { grid-template-columns: 1fr 58px !important; padding-left: 18px; }
  .contrat-periode-detail .contrat-date { grid-column: 1 / -1; }
  .contrat-periodes.avec-reel .contrat-periode-detail { grid-template-columns: 1fr 58px 58px !important; }
}
.droits-contrat-form .bascule-compacte-texte { display: inline; position: static; width: auto; height: auto; clip: auto; overflow: visible; white-space: nowrap; font-size: 12px; color: var(--paper); margin-left: 6px; }
.droits-contrat-form .bascule-compacte { display: inline-flex; align-items: center; }
.contrat-envoi .case-a-cocher { display: flex; gap: 8px; align-items: center; margin: 6px 0; }
.contrat-apercu { margin: 10px 0 14px; }
.contrat-apercu > summary { cursor: pointer; color: var(--copper-bright); font-weight: 600; font-size: 14px; }
.contrat-apercu iframe { width: 100%; height: 640px; border: 1px solid var(--line); border-radius: 12px; background: #f4f2ee; margin-top: 8px; }
.contrat-envois { margin-top: 10px; }
/* Satoshi : titres des domaines du menu en petites capitales espacées (David, 06.10.2026 : « jouer avec les gras ou majuscules »). */
.menu-domaine-titre { text-transform: uppercase; letter-spacing: 0.1em; font-size: 11.5px; font-weight: 700; }

/* ── Contrat : plusieurs contrats par client + texte de l'e-mail modifiable (David, 06.10.2026) ── */
.contrat-liste-contrats { margin: 10px 0 14px; }
.contrat-un-contrat { border: 1px solid var(--verre-bord); border-radius: 14px; background: var(--verre); margin-bottom: 8px; }
.contrat-un-contrat summary { display: grid; grid-template-columns: minmax(200px, 1.1fr) 2fr auto 22px; gap: 6px 14px; align-items: center;
  padding: 12px 16px; cursor: pointer; list-style: none; font-size: 14px; color: var(--muted); }
.contrat-un-contrat summary::-webkit-details-marker { display: none; }
.contrat-un-dates { color: var(--paper); font-weight: 700; font-variant-numeric: tabular-nums; }
.contrat-un-dates em { font-style: normal; font-weight: 500; color: var(--muted); }
.contrat-un-contrat.statut-en_cours { border-color: rgba(120, 200, 140, 0.45); }
.contrat-un-contrat.statut-termine summary { opacity: 0.75; }
.contrat-un-contrat .contrat-form-contrat { padding: 4px 16px 16px; border-top: 1px solid var(--verre-bord); }
.contrat-ajout-contrat { margin: 6px 0 4px; }
.contrat-ajout-contrat > summary { display: inline-flex; list-style: none; cursor: pointer; }
.contrat-ajout-contrat > summary::-webkit-details-marker { display: none; }
.contrat-ajout-contrat[open] > summary { margin-bottom: 10px; }
.contrat-ajout-contrat .contrat-form-contrat { padding: 14px 16px; border: 1px solid var(--verre-bord); border-radius: 14px; background: var(--verre); }
.contrat-form-contrat .ligne-actions { margin-top: 12px; }
.contrat-texte-mail textarea { min-height: 96px; }
.contrat-apercu-cadre { width: 100%; height: 620px; border: 0; border-radius: 12px; background: #f4f2ee; margin-top: 4px; }
@media (max-width: 700px) {
  .contrat-un-contrat summary { grid-template-columns: 1fr auto; }
  .contrat-un-contrat summary > span:nth-child(2) { grid-column: 1 / -1; grid-row: 2; font-size: 13px; }
  .contrat-un-contrat summary .contrat-plus-icone { display: none; }
  .contrat-apercu-cadre { height: 560px; }
}

/* ==========================================================================================================
   CORRECTIFS UI DU NOYAU (11.10.2026, standard §6 — David) : plus aucun débordement, fenêtre de confirmation
   commune, boutons d'envoi de fichiers. (Fichiers à part : correctifs-noyau-ui/ du chantier module-promotions.)
   ========================================================================================================== */

/* 1. Zéro débordement : les colonnes passent l'une sous l'autre quand la place manque, les champs restent dans
      leur cadre (un champ de fichier ou une liste longue ne poussent plus la colonne hors de la carte). */
.form-row { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.form-row > *, .form-field, .card, .card > * { min-width: 0; }
input, select, textarea { max-width: 100%; }
.btn { max-width: 100%; }
td form, td details, td details > div { min-width: 0; max-width: 100%; }
td select, td input:not([type="checkbox"]):not([type="radio"]) { min-width: 0; width: 100%; max-width: 22rem; }
td .btn { white-space: normal; text-align: center; }

/* 2. Fenêtre de confirmation commune : verre dépoli, centrée, texte sur 1–2 lignes, boutons côte à côte. */
dialog.mconf { margin: auto; padding: 0; border: 0; background: transparent; color: var(--paper); max-width: min(540px, calc(100vw - 32px)); width: 100%; overflow: visible; }
dialog.mconf::backdrop { background: rgba(8, 7, 6, 0.55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.mconf-boite { padding: 22px 22px 18px; border-radius: 18px; border: 1px solid var(--verre-bord, rgba(255, 255, 255, 0.12));
  background: rgba(30, 28, 25, 0.82); -webkit-backdrop-filter: blur(22px) saturate(1.3); backdrop-filter: blur(22px) saturate(1.3);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55); animation: mconf-entree 0.16s ease-out; }
.mconf-texte { margin: 0 0 16px; font-size: 16px; line-height: 1.45; font-weight: 600; overflow-wrap: anywhere; text-wrap: pretty; }
.mconf-texte:has(+ .mconf-detail) { margin-bottom: 6px; }
.mconf-detail { margin: 0 0 16px; font-size: 13.5px; line-height: 1.45; color: var(--muted); text-wrap: pretty; }
.mconf-actions { display: flex; gap: 10px; }
.mconf-actions .btn { flex: 1 1 0; min-height: var(--tactile-min, 48px); justify-content: center; white-space: normal; }
.mconf-plusieurs { flex-wrap: wrap; }
.mconf-plusieurs .btn { flex: 1 1 160px; }
@keyframes mconf-entree { from { opacity: 0; transform: translateY(6px) scale(0.98); } }
@media (prefers-reduced-motion: reduce) { .mconf-boite { animation: none; } }

/* 3. Boutons d'envoi de fichiers : vignette ou icône, nom du fichier, « Remplacer » / « Retirer ». Le vrai champ est
      posé par-dessus, invisible : clic, clavier, lecteur d'écran et glisser-déposer restent ceux du navigateur. */
.champ-fichier { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; min-width: 0; max-width: 100%; padding: 10px 12px; border-radius: 14px; container-type: inline-size;
  border: 1px dashed rgba(255, 255, 255, 0.22); background: rgba(255, 255, 255, 0.04); transition: border-color 0.15s, background 0.15s; }
.champ-fichier:hover, .champ-fichier.survol { border-color: var(--copper-bright); background: rgba(255, 255, 255, 0.07); }
.champ-fichier:focus-within { outline: 2px solid var(--paper); outline-offset: 2px; }
.champ-fichier:not([data-vide]) { border-style: solid; }
.champ-fichier-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; z-index: 1; font-size: 0; }
.champ-fichier-vue { display: flex; align-items: center; gap: 12px; flex: 1 1 200px; }
.champ-fichier-vignette { flex: none; width: 48px; height: 48px; border-radius: 9px; display: grid; place-items: center; overflow: hidden;
  background: rgba(255, 255, 255, 0.07); color: var(--copper-bright); border: 1px solid rgba(255, 255, 255, 0.1); }
.champ-fichier-vignette svg { width: 26px; height: 26px; }
.champ-fichier-vignette img { width: 100%; height: 100%; object-fit: cover; }
.champ-fichier-textes { display: grid; gap: 2px; min-width: 0; flex: 1 1 auto; }
.champ-fichier-nom { font-size: 14.5px; font-weight: 600; color: var(--paper); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.champ-fichier-detail { font-size: 12.5px; color: var(--muted); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.champ-fichier-bouton { flex: none; pointer-events: none; }
.champ-fichier-retirer { position: relative; z-index: 2; flex: none; margin-left: auto; }
.champ-fichier-retirer[hidden] { display: none; }
@container (max-width: 400px) { .champ-fichier-bouton { display: none; } }