/* ============================================================
   PANEL CARROSSERIE DUBUIS — 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: #e8731a;
  --copper-bright: #f97316;
  --copper-deep: #c95e0f;

  --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);
}

.pastille {
  background: var(--danger);
  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.
   ============================================================ */

@font-face { font-family: "Hanken Grotesk"; src: url("fonts/hanken-grotesk-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; src: url("fonts/hanken-grotesk-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; src: url("fonts/hanken-grotesk-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Young Serif"; src: url("fonts/young-serif-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }

:root {
  --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: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", 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/fond-panel.jpg") center / cover no-repeat;
  filter: blur(48px) brightness(0.32) saturate(1.2);
}

h1, h2, .page-head h1 { font-family: "Young Serif", Georgia, serif; font-weight: 400; letter-spacing: 0; }

.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(232, 115, 26, 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: "Young Serif", Georgia, serif; font-weight: 400; 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(232, 115, 26, 0.16), rgba(232, 115, 26, 0.16)), var(--verre);
  border: 1px solid rgba(232, 115, 26, 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(232, 115, 26, 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(232, 115, 26, 0.16); border: 1px solid rgba(232, 115, 26, 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(232, 115, 26, 0.45); background: rgba(232, 115, 26, 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: "Young Serif", Georgia, serif; font-weight: 400; 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(232, 115, 26, 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(232, 115, 26, 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(232, 115, 26, 0.55); }
.resa-quand { font-family: "Young Serif", Georgia, 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(232, 115, 26, 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(232, 115, 26, 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: "Young Serif", Georgia, 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: "Young Serif", Georgia, 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; }
.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); }
.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: #e8731a;
  --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(232, 115, 26, 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(232, 115, 26, 0.45); }
.tdb-titre { font-family: "Young Serif", Georgia, serif; font-weight: 400; 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(232, 115, 26, 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(232, 115, 26, 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: "Young Serif", Georgia, serif; font-weight: 400; 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(232, 115, 26, 0.15); color: var(--copper-bright); }
.acces-bloc { border: 1px solid rgba(232, 115, 26, 0.35); border-radius: var(--radius); padding: 16px; margin: 6px 0 18px; background: rgba(232, 115, 26, 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(232, 115, 26, 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(232, 115, 26, 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; }
.rj-n { display: inline-block; min-width: 20px; padding: 0 6px; border-radius: 999px; background: var(--danger); 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(232, 115, 26, 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(232, 115, 26, 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)); }
.acces-carte { position: relative; display: block; min-height: 68px; padding: 12px 14px 12px 44px; border-radius: 16px; cursor: pointer;
  background: var(--verre); 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(232, 115, 26, 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(--faint); font-size: 12.5px; }
.acces-carte:has(input:checked) { border-color: var(--copper); background: rgba(232, 115, 26, 0.13); }
.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(0, 0, 0, 0.12); }
.acces-surmesure > .hint { margin: 0 0 6px; }
.acces-toujours { margin: 10px 0 0; font-size: 12.5px; }
.acces-resume { margin: 18px 0 12px; padding: 14px 16px; border-radius: 16px; border: 1px solid rgba(232, 115, 26, 0.55);
  background: var(--verre-fort); -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(232, 115, 26, .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(232, 115, 26, 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(232, 115, 26, 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(232, 115, 26, 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(232, 115, 26, .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(232, 115, 26, .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(232, 115, 26, .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(232, 115, 26, 0.45); background: rgba(232, 115, 26, 0.08); text-decoration: none; min-height: var(--tactile-min); }
.menu-contrat:hover, .menu-contrat.actif { background: rgba(232, 115, 26, 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); }