/* Administration — conforme à chart/charte-graphique-rendezen.md (couleurs : migration vers Indigo et corail à faire, § 1) */

@font-face {
  font-family: 'Inter';
  src: url('fonts/inter-latin-wght.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Couleurs */
  --color-primary: #222A5C;       /* indigo nuit (charte § 1) */
  --color-action: #3A46A8;        /* indigo : boutons, liens (blanc dessus 8,0:1) */
  --color-action-hover: #2E3890;
  --color-action-text: #FFFFFF;
  --color-accent: #ECEEFA;        /* indigo clair : sélections (cartes cochées, onglets, boutons activés) */
  --color-accent-text: #2E3890;   /* indigo foncé, lisible sur indigo clair (8,7:1) */
  --color-marque-accent: #E8735A; /* corail de la marque (lentille du logo, repères) : jamais de texte blanc dessus */
  --color-bg: #F6F6F9;
  --color-surface: #FFFFFF;
  --color-border: #E2E5EF;
  --color-text: #0F172A;
  --color-text-muted: #64748B;
  --color-title: var(--color-primary);

  /* Navigation */
  --nav-bg: var(--color-primary);
  --nav-text: #E3E6F5;
  --nav-text-muted: #A9AED6;
  --nav-hover: rgba(255, 255, 255, 0.08);
  --nav-actif-bg: rgba(255, 255, 255, 0.10);
  --nav-actif-text: #FFFFFF;

  /* Statuts */
  --status-confirmed: #15803D;
  --status-confirmed-bg: #DCFCE7;
  --status-cancelled: #B91C1C;
  --status-cancelled-bg: #FEE2E2;
  --status-pending: #B45309;
  --status-pending-bg: #FEF3C7;
  --status-unavailable: #64748B;
  --status-unavailable-bg: #F1F5F9;

  /* Typographie */
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Espacements */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;

  /* Rayons et ombres */
  --radius-sm: 8px;
  --radius-md: 12px;
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.08);

  color-scheme: light;
}

/* Mode nuit : thème du système, sauf si l'utilisateur force le mode jour… */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme=clair]) {
    --color-bg: #14172E;
    --color-surface: #1C2040;
    --color-action: #9AA5F2;
    --color-action-hover: #B7BFF6;
    --color-action-text: #14172E;
    --color-accent: #262C5A;
    --color-accent-text: #C9CEFA;
    --color-marque-accent: #F08C75;
    --color-border: #2E3358;
    --color-text: #E2E5F5;
    --color-text-muted: #A3A8C9;
    --color-title: #F3F4FB;

    --nav-bg: #1C2040;
    --nav-hover: rgba(255, 255, 255, 0.06);
    --nav-actif-bg: rgba(255, 255, 255, 0.08);

    --status-confirmed: #86EFAC;
    --status-confirmed-bg: #14532D;
    --status-cancelled: #FCA5A5;
    --status-cancelled-bg: #450A0A;
    --status-pending: #FCD34D;
    --status-pending-bg: #451A03;
    --status-unavailable: #94A3B8;
    --status-unavailable-bg: #2E3358;

    --shadow-sm: none;
    color-scheme: dark;
  }
}

/* …ou forcé par le bouton lune (cookie admin_theme, attribut data-theme) */
:root[data-theme=sombre] {
  --color-bg: #14172E;
  --color-surface: #1C2040;
  --color-action: #9AA5F2;
  --color-action-hover: #B7BFF6;
  --color-action-text: #14172E;
  --color-accent: #262C5A;
  --color-accent-text: #C9CEFA;
  --color-marque-accent: #F08C75;
  --color-border: #2E3358;
  --color-text: #E2E5F5;
  --color-text-muted: #A3A8C9;
  --color-title: #F3F4FB;

  --nav-bg: #1C2040;
  --nav-hover: rgba(255, 255, 255, 0.06);
  --nav-actif-bg: rgba(255, 255, 255, 0.08);

  --status-confirmed: #86EFAC;
  --status-confirmed-bg: #14532D;
  --status-cancelled: #FCA5A5;
  --status-cancelled-bg: #450A0A;
  --status-pending: #FCD34D;
  --status-pending-bg: #451A03;
  --status-unavailable: #94A3B8;
  --status-unavailable-bg: #2E3358;

  --shadow-sm: none;
  color-scheme: dark;
}

* { box-sizing: border-box; }
/* L'attribut hidden l'emporte toujours, même sur un élément stylé en flex ou grid */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { color: var(--color-title); font-weight: 600; line-height: 1.2; }
h1 { font-size: 28px; margin: 0 0 var(--space-2); }
h2 { font-size: 18px; margin: 0 0 var(--space-3); }

a { color: var(--color-action); }
a:hover { color: var(--color-action-hover); }

:focus-visible { outline: 2px solid var(--color-action); outline-offset: 2px; }

.icone { flex-shrink: 0; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); border: 0;
}

/* --- Structure --- */

.app { display: flex; min-height: 100vh; }

.sidebar {
  width: 248px;
  flex-shrink: 0;
  background: var(--nav-bg);
  color: var(--nav-text);
  display: flex;
  flex-direction: column;
  padding: var(--space-4) var(--space-3);
  position: sticky;
  top: 0;
  height: 100vh;
}

.sidebar-marque {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 600;
  font-size: 16px;
  margin-bottom: var(--space-5);
}

.marque-symbole { flex: none; }
.marque-lentille { fill: var(--color-marque-accent); }
.marque-texte { display: flex; flex-direction: column; line-height: 1.15; }
.marque-mot { font-size: 19px; font-weight: 800; letter-spacing: -0.02em; }
.marque-texte small { font-size: 12px; font-weight: 500; color: var(--nav-text-muted); letter-spacing: .02em; }

.logo-pastille {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  background: var(--color-action);
  color: var(--color-action-text);
}

.sidebar-nav { display: flex; flex-direction: column; gap: var(--space-1); }
.sidebar-nav a {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 40px;
  padding: var(--space-2) var(--space-2);
  border-radius: var(--radius-sm);
  color: var(--nav-text);
  font-weight: 500;
  text-decoration: none;
}
.sidebar-nav a:hover { background: var(--nav-hover); color: var(--nav-actif-text); }
.sidebar-nav a.actif { background: var(--nav-actif-bg); color: var(--nav-actif-text); box-shadow: inset 3px 0 0 var(--color-marque-accent); }
.sidebar-sous-menu { display: flex; flex-direction: column; gap: 2px; margin: 2px 0 var(--space-1) 30px; padding-left: var(--space-2); border-left: 1px solid rgba(255, 255, 255, 0.15); }
.sidebar-nav .sidebar-sous-menu a { min-height: 36px; padding: 6px var(--space-2); font-size: 14px; color: var(--nav-text-muted); background: none; }
.sidebar-nav .sidebar-sous-menu a:hover { color: var(--nav-actif-text); background: var(--nav-hover); }
.sidebar-nav .sidebar-sous-menu a.actif { color: var(--nav-actif-text); background: var(--nav-actif-bg); }


.zone { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.principal {
  flex: 1;
  padding: var(--space-5) var(--space-6);
}
.principal > * { max-width: 880px; }

.entete-page { margin-bottom: var(--space-4); }
.sous-titre { color: var(--color-text-muted); margin: 0; }

/* --- Cartes et formulaires --- */

.carte {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: var(--space-4);
  margin-bottom: var(--space-3);
}

.grille-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3) var(--space-4); }
.champ-large { grid-column: 1 / -1; }

.champ { display: flex; flex-direction: column; gap: var(--space-1); }
.champ label { font-size: 13px; font-weight: 500; }
.requis { color: var(--status-cancelled); }
.aide { margin: 0; color: var(--color-text-muted); font-size: 12px; }
.champ-erreur {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin: 0;
  color: var(--status-cancelled);
  font-size: 13px;
}

input[type=text], input[type=email], input[type=password], input[type=tel], input[type=url],
input[type=number], input[type=search], input[type=time], select {
  width: 100%;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font: inherit;
  background: var(--color-surface);
  color: var(--color-text);
}
input:not([type=radio]):not([type=checkbox]):focus, select:focus {
  outline: none;
  border-color: var(--color-action);
  box-shadow: 0 0 0 2px var(--color-action);
}
[aria-invalid=true] { border-color: var(--status-cancelled); }

.choix-radio { border: 0; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.option-radio {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.option-radio:hover { border-color: var(--color-action); }
.option-radio:has(input:checked) {
  border: 2px solid var(--color-action);
  padding: calc(var(--space-3) - 1px);
  background: var(--color-accent);
}
.option-radio input { margin-top: 3px; accent-color: var(--color-action); }
/* Pas d'anneau sur le bouton radio lui-même : la carte cochée porte déjà l'état.
   Anneau sur la carte seulement si le focus clavier arrive sur une option non cochée. */
.option-radio input:focus-visible { outline: none; }
.option-radio:has(input:focus-visible:not(:checked)) { box-shadow: 0 0 0 2px var(--color-action); }
.option-radio span { display: flex; flex-direction: column; gap: 2px; }
.option-radio strong { font-weight: 500; }
.option-radio small { color: var(--color-text-muted); font-size: 13px; }
.option-radio:has(input:checked) strong { color: var(--color-accent-text); }

.actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-3); }

/* --- Boutons --- */

.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 40px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  font: inherit;
  font-weight: 500;
  cursor: pointer;
}
a.bouton { text-decoration: none; }
.bouton-principal { background: var(--color-action); color: var(--color-action-text); }
.bouton-principal:hover { background: var(--color-action-hover); color: var(--color-action-text); }
.bouton-secondaire { background: var(--color-surface); border-color: var(--color-border); color: var(--color-text); }
.bouton-secondaire:hover { border-color: var(--color-action); color: var(--color-text); }
.bouton-discret { background: none; color: var(--color-text-muted); padding: 0 var(--space-1); }
.bouton-discret:hover { color: var(--color-text); }
.bouton-large { width: 100%; }

/* --- Alertes (icône + texte, jamais la couleur seule) --- */

.alerte {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 12px var(--space-3);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-3);
  font-weight: 500;
}
.alerte-succes { background: var(--status-confirmed-bg); color: var(--status-confirmed); }
.alerte-erreur { background: var(--status-cancelled-bg); color: var(--status-cancelled); }
.alerte-attention { background: var(--status-pending-bg); color: var(--status-pending); }
.alerte-info { background: var(--color-accent); color: var(--color-accent-text); }

/* --- Badges de statut (pilule, icône + libellé) --- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px 10px 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}
.badge-succes { background: var(--status-confirmed-bg); color: var(--status-confirmed); }
.badge-attention { background: var(--status-pending-bg); color: var(--status-pending); }
.badge-erreur { background: var(--status-cancelled-bg); color: var(--status-cancelled); }
.badge-neutre { background: var(--status-unavailable-bg); color: var(--status-unavailable); }

/* --- Connexion agenda --- */

.carte-entete { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); }
.carte-entete h2 { margin: 0; }
.sous-section { font-size: 15px; margin: var(--space-4) 0 var(--space-2); }

.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; }

.details { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2) var(--space-4); margin: 0 0 var(--space-3); }
.details div { min-width: 0; }
.details dt { font-size: 13px; font-weight: 500; color: var(--color-text-muted); }
.details dd { margin: 0; overflow-wrap: anywhere; }

.permissions { list-style: none; margin: 0; padding: 0; border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
.permissions li { display: flex; align-items: center; gap: 12px; padding: 12px var(--space-3); }
.permissions li + li { border-top: 1px solid var(--color-border); }
.permissions span { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.permissions strong { font-weight: 500; }
.permissions small { color: var(--color-text-muted); overflow-wrap: anywhere; }
.permissions em { font-style: normal; font-size: 13px; font-weight: 500; white-space: nowrap; }
.permissions .accordee .icone, .permissions .accordee em { color: var(--status-confirmed); }
.permissions .manquante .icone, .permissions .manquante em { color: var(--status-cancelled); }
.permissions .optionnelle .icone, .permissions .optionnelle em { color: var(--status-unavailable); }

.actions-espacees { justify-content: space-between; }
.bouton-danger-discret { background: none; color: var(--status-cancelled); border-color: transparent; }
.bouton-danger-discret:hover { border-color: var(--status-cancelled); }

.guide { margin-bottom: var(--space-3); padding: 12px var(--space-3); background: var(--color-bg); border-radius: var(--radius-sm); }
.guide summary { cursor: pointer; font-weight: 500; color: var(--color-action); min-height: 24px; }
.guide ol { margin: var(--space-2) 0 0; padding-left: 20px; display: grid; gap: var(--space-2); color: var(--color-text-muted); }
.guide code, .guide pre { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; color: var(--color-text); }
.guide pre { margin: var(--space-2) 0 0; padding: var(--space-2); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm); white-space: pre-wrap; overflow-wrap: anywhere; }

input[type=date], input[type=file] { font: inherit; color: var(--color-text); }
input[type=date] {
  width: 100%; height: 40px; padding: 0 12px;
  border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface);
}
input[type=file] { padding: 8px 0; }

/* Un seul bloc de champs visible : celui du fournisseur coché */
.formulaire-connexion:not(:has(input[name=fournisseur][value=microsoft]:checked)) .bloc-microsoft,
.formulaire-connexion:not(:has(input[name=fournisseur][value=google]:checked)) .bloc-google,
.formulaire-connexion:not(:has(input[name=fournisseur][value=caldav]:checked)) .bloc-caldav,
/* CalDAV : les emails passent par le SMTP de l'organisation, pas par une « adresse d'envoi » du fournisseur */
.formulaire-connexion:has(input[name=fournisseur][value=caldav]:checked) .bloc-expediteur { display: none; }
.guide-serveurs { margin: 8px 0; padding-left: 18px; display: grid; gap: 4px; font-size: 14px; }
.grille-serree { gap: 12px; }

/* --- Sélecteur de langue : liste déroulante drapeau + nom (views/_preferences.php) --- */

.menu-langues { position: relative; }
.menu-langues summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 10px 0 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}
.menu-langues summary::-webkit-details-marker { display: none; }
.menu-langues summary:hover { background: var(--color-bg); }
.menu-langues summary > .icone { color: var(--color-text-muted); transition: transform .15s; }
.menu-langues[open] summary > .icone { transform: rotate(180deg); }
.menu-langues-liste {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 30;
  min-width: 100%;
  padding: 6px;
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  box-shadow: 0 12px 32px rgba(15, 23, 42, .14);
}
.menu-langues-liste button {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 0 12px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--color-text);
  font: inherit;
  font-size: 14px;
  white-space: nowrap;
  text-align: left;
  cursor: pointer;
}
.menu-langues-liste button:hover { background: var(--color-bg); }
.menu-langues-liste button[aria-current] { font-weight: 600; }
.menu-langues-liste button[aria-current]::after { content: "✓"; margin-left: auto; padding-left: 12px; color: var(--color-action); }
.drapeau { flex: none; border-radius: 3px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .08); }
@media (max-width: 640px) { .menu-langues-nom { display: none; } }

/* --- Barre du haut --- */

.topbar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--space-3);
  min-height: 72px;
  padding: var(--space-2) var(--space-6);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  z-index: 10;
}
.topbar-outils { display: flex; align-items: center; gap: var(--space-3); }
.topbar-separateur { width: 1px; align-self: stretch; margin: var(--space-2) 0; background: var(--color-border); }

.bouton-icone {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--color-text-muted);
  cursor: pointer;
}
.bouton-icone:hover { background: var(--color-bg); color: var(--color-text); }

/* Bouton lune en mode jour, soleil en mode nuit */
.bascule-theme .vers-clair { display: none; }
:root[data-theme=sombre] .bascule-theme .vers-sombre { display: none; }
:root[data-theme=sombre] .bascule-theme .vers-clair { display: inline-grid; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme=clair]) .bascule-theme .vers-sombre { display: none; }
  :root:not([data-theme=clair]) .bascule-theme .vers-clair { display: inline-grid; }
}

.menu-utilisateur { position: relative; }
.menu-utilisateur summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: var(--space-1) var(--space-2) var(--space-1) var(--space-1);
  border-radius: var(--radius-sm);
  cursor: pointer;
  list-style: none;
}
.menu-utilisateur summary::-webkit-details-marker { display: none; }
.menu-utilisateur summary:hover { background: var(--color-bg); }
.menu-utilisateur summary > .icone { color: var(--color-text-muted); transition: transform .15s; }
.menu-utilisateur[open] summary > .icone { transform: rotate(180deg); }

.avatar {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: var(--color-accent);
  color: var(--color-accent-text);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: .5px;
}
/* Photo de profil par-dessus les initiales */
.avatar { position: relative; overflow: hidden; }
.avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; background: var(--color-surface); }
.cellule-personne { display: flex; align-items: center; gap: 12px; }

.menu-utilisateur-nom { display: flex; flex-direction: column; line-height: 1.3; }
.menu-utilisateur-nom strong { font-weight: 500; font-size: 15px; color: var(--color-text); }
.menu-utilisateur-nom small { font-size: 13px; color: var(--color-text-muted); }

.menu-deroulant {
  position: absolute;
  right: 0;
  top: calc(100% + var(--space-2));
  min-width: 100%;
  width: max-content;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
  overflow: hidden;
}
.menu-deroulant a, .menu-deroulant button {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  min-height: 48px;
  padding: 0 var(--space-4);
  border: 0;
  background: none;
  color: var(--color-text);
  font: inherit;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
}
.menu-deroulant form + *, .menu-deroulant * + form { border-top: 1px solid var(--color-border); }
.menu-deroulant a:hover, .menu-deroulant button:hover { background: var(--color-bg); color: var(--color-action); }
.menu-deroulant .icone { color: var(--color-text-muted); }

/* --- Pages publiques (connexion, invitation, erreurs) : panneau de marque + formulaire --- */

.page-publique { min-height: 100vh; }
.acces { display: grid; grid-template-columns: minmax(340px, 5fr) 7fr; min-height: 100vh; }

.acces-marque {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-6);
  padding: var(--space-6) clamp(var(--space-4), 4vw, 64px);
  background: var(--nav-bg);
  color: var(--nav-text);
}
.acces-marque .sidebar-marque { margin: 0; position: relative; z-index: 1; }
.acces-accroche { position: relative; z-index: 1; display: grid; gap: var(--space-4); max-width: 30rem; }
.acces-titre { margin: 0; font-size: clamp(26px, 2.6vw, 36px); font-weight: 700; line-height: 1.18; letter-spacing: -0.02em; color: #FFFFFF; text-wrap: balance; }
.acces-atouts { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.acces-atouts li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; color: var(--nav-text); }
.acces-atouts .icone { flex: none; margin-top: 1px; color: var(--color-marque-accent); }
/* Motif : le symbole en très grand, en filigrane, coupé par le bord du panneau */
.acces-motif { position: absolute; top: -14%; right: -26%; width: 88%; max-width: 620px; color: rgba(255, 255, 255, 0.10); pointer-events: none; }
.acces-motif-lentille { fill: var(--color-marque-accent); opacity: 0.22; }

.acces-formulaire { position: relative; display: grid; place-items: center; padding: 96px var(--space-4) var(--space-6); background: var(--color-bg); }
.acces-formulaire .page-publique-outils { position: absolute; top: var(--space-3); right: var(--space-3); display: flex; align-items: center; gap: var(--space-2); }
.acces-carte { width: 100%; max-width: 400px; }
.acces-carte h1 { font-size: 28px; margin-bottom: var(--space-4); }
.acces-carte .formulaire { display: flex; flex-direction: column; gap: var(--space-3); }
.acces-carte .alerte { margin-bottom: var(--space-3); }

@media (max-width: 860px) {
  .acces { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .acces-marque { padding: var(--space-4) var(--space-3); gap: var(--space-3); }
  .acces-titre { font-size: 20px; }
  .acces-atouts { display: none; }
  .acces-motif { width: 240px; top: -70px; right: -80px; }
  .acces-formulaire { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); padding: var(--space-3) var(--space-3) var(--space-5); }
  .acces-formulaire .page-publique-outils { position: static; align-self: flex-end; }
}

/* --- Éléments communs des listes --- */

.entete-avec-action { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-3); flex-wrap: wrap; }
.entete-avec-action > div { flex: 1 1 360px; }
.principal > .entete-avec-action { max-width: none; }
.fil { margin: 0 0 var(--space-2); font-size: 13px; }
.fil a { text-decoration: none; }
.secondaire { display: block; color: var(--color-text-muted); font-size: 13px; }
.lien-fort { font-weight: 500; color: var(--color-text); text-decoration: none; }
.lien-fort:hover { color: var(--color-action); }
.avec-icone { display: inline-flex; align-items: center; gap: var(--space-1); }
.time, input[type=time] { font-feature-settings: "tnum" 1; }
.espace-haut { margin-top: var(--space-4); }
.bouton-petit { min-height: 40px; padding: 0 12px; font-size: 13px; }
.bouton-danger { background: var(--status-cancelled); color: #fff; }
.bouton-danger:hover { filter: brightness(0.9); }
fieldset.sans-cadre { border: 0; padding: 0; margin: 0; min-width: 0; }
fieldset[disabled] input, fieldset[disabled] select { opacity: .7; cursor: not-allowed; }

/* Carte repliable (<details>) : le titre sert de bouton */
.carte-depliable > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: var(--space-2); min-height: 40px; }
.carte-depliable > summary::-webkit-details-marker { display: none; }
.carte-depliable > summary::before { content: '▸'; color: var(--color-text-muted); transition: transform .15s; }
.carte-depliable[open] > summary::before { transform: rotate(90deg); }
.carte-depliable > summary h2 { margin: 0; }
.carte-depliable[open] > summary { margin-bottom: var(--space-3); }
.zone-danger > summary h2 { color: var(--status-cancelled); }

/* État vide */
.etat-vide { text-align: center; padding: var(--space-6) var(--space-4); }
.etat-vide-icone {
  display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 50%;
  background: var(--color-accent); color: var(--color-accent-text); margin-bottom: var(--space-3);
}
.etat-vide p { color: var(--color-text-muted); max-width: 420px; margin: 0 auto var(--space-4); }

/* --- Tableau des agendas --- */

.principal > .carte-tableau { max-width: none; }
.carte-tableau { padding: 0; overflow: hidden; }
.tableau { width: 100%; border-collapse: collapse; }
.tableau th {
  text-align: left; font-size: 13px; font-weight: 500; color: var(--color-text-muted);
  padding: 12px var(--space-3); border-bottom: 1px solid var(--color-border); background: var(--color-bg);
}
.tableau td { padding: 12px var(--space-3); border-bottom: 1px solid var(--color-border); vertical-align: middle; }
.tableau tr:last-child td { border-bottom: 0; }
.tableau tr.inactif td > *:not(.cellule-actions *) { opacity: .6; }
.tableau .badge { margin-left: var(--space-1); }
.cellule-actions { text-align: right; white-space: nowrap; }
.cellule-actions form { display: inline; }
.cellule-actions .form-suppression { display: inline-flex; }
/* Boutons et formulaires de la cellule alignés sur la même ligne (liens, formulaires inline, bouton icône) */
.cellule-actions > * { vertical-align: middle; }
/* La fenêtre de confirmation n'hérite pas de la mise en forme de la cellule (nowrap, alignement à droite) */
.cellule-actions .dialogue { white-space: normal; text-align: left; }
.cellule-actions > * + * { margin-left: var(--space-1); }

.jours { display: inline-flex; gap: 2px; }
.jour {
  display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 6px;
  font-size: 12px; font-weight: 500; color: var(--status-unavailable); background: var(--status-unavailable-bg);
}
.jour.ouvert { background: var(--color-accent); color: var(--color-accent-text); }

/* --- Ajout depuis l'annuaire --- */

.recherche { display: flex; align-items: center; gap: var(--space-2); position: relative; margin-bottom: var(--space-3); }
.recherche input { padding-left: 36px; }
.recherche-icone { position: absolute; left: 12px; color: var(--color-text-muted); display: inline-flex; }

.liste-personnes {
  list-style: none; margin: var(--space-2) 0 0; padding: 0;
  border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  max-height: 480px; overflow-y: auto;
}
.liste-personnes li + li { border-top: 1px solid var(--color-border); }
.personne { display: flex; align-items: center; gap: 12px; padding: var(--space-2) var(--space-3); min-height: 56px; cursor: pointer; }
.personne:hover { background: var(--color-bg); }
.personne:has(input:checked) { background: var(--color-accent); }
.personne.deja { cursor: default; opacity: .7; }
.personne input { width: 18px; height: 18px; accent-color: var(--color-action); }
.personne-texte { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.personne-texte strong { font-weight: 500; }
.personne-texte small { color: var(--color-text-muted); font-size: 13px; overflow-wrap: anywhere; }
.avatar-petit { width: 36px; height: 36px; font-size: 13px; }

.barre-collante {
  position: sticky; bottom: 0; background: var(--color-surface);
  padding: var(--space-3) 0 0; margin-top: 0;
}

/* --- Réglages d'un agenda --- */

.champ-prefixe { display: flex; align-items: center; }
.champ-prefixe > span {
  height: 40px; display: inline-grid; place-items: center; padding: 0 10px;
  border: 1px solid var(--color-border); border-right: 0; border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  background: var(--color-bg); color: var(--color-text-muted);
}
.champ-prefixe input { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }

.interrupteur { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; }
.interrupteur input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--color-action); }
.interrupteur span { display: flex; flex-direction: column; }
.interrupteur strong { font-weight: 500; font-size: 15px; }
.interrupteur small { color: var(--color-text-muted); font-size: 13px; }

.semaine { border: 1px solid var(--color-border); border-radius: var(--radius-sm); margin: var(--space-3) 0 0; }
.jour-ligne {
  display: grid; grid-template-columns: 170px 1fr auto; align-items: start;
  gap: var(--space-3); padding: 12px var(--space-3);
}
.jour-ligne + .jour-ligne { border-top: 1px solid var(--color-border); }
.jour-ligne.en-erreur { background: var(--status-cancelled-bg); }
.jour-erreur { grid-column: 1 / -1; }

/* Interrupteur du jour (case à cocher stylée, role=switch) */
.interrupteur-jour { display: flex; align-items: center; gap: 12px; min-height: 40px; cursor: pointer; }
.interrupteur-jour input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.glissiere {
  position: relative; width: 36px; height: 20px; flex-shrink: 0; border-radius: 999px;
  background: var(--color-border); transition: background .15s;
}
.glissiere::after {
  content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%;
  background: #fff; box-shadow: var(--shadow-sm); transition: transform .15s;
}
.interrupteur-jour input:checked + .glissiere { background: var(--color-action); }
.interrupteur-jour input:checked + .glissiere::after { transform: translateX(16px); }
.interrupteur-jour input:focus-visible + .glissiere { outline: 2px solid var(--color-action); outline-offset: 2px; }
.jour-nom { font-weight: 500; }

.jour-plages { display: flex; align-items: flex-start; gap: var(--space-2); flex-wrap: wrap; min-height: 40px; }
.jour-ferme { display: none; align-self: center; color: var(--color-text-muted); }
.plages { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.plage { display: flex; align-items: center; gap: var(--space-1); }
.plage input[type=time] { width: 116px; padding: 0 8px; }
.plage-retirer, .plage-ajouter, .copier summary { width: 40px; height: 40px; border-radius: var(--radius-sm); }

/* Jour désactivé : on affiche « Fermé » à la place des plages */
.jour-ligne:has(.interrupteur-jour input:not(:checked)) .plages,
.jour-ligne:has(.interrupteur-jour input:not(:checked)) .plage-ajouter,
.jour-ligne:has(.interrupteur-jour input:not(:checked)) .copier { display: none; }
.jour-ligne:has(.interrupteur-jour input:not(:checked)) .jour-ferme { display: inline; }
.jour-ligne:has(.interrupteur-jour input:not(:checked)) .jour-nom { color: var(--color-text-muted); }

/* « Copier sur… » */
.copier { position: relative; }
.copier summary { list-style: none; display: inline-grid; place-items: center; cursor: pointer; color: var(--color-text-muted); }
.copier summary::-webkit-details-marker { display: none; }
.copier summary:hover { background: var(--color-bg); color: var(--color-text); }
.copier .popover {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 5; width: 240px;
  display: flex; flex-direction: column; gap: var(--space-1);
  padding: var(--space-3); background: var(--color-surface);
  border: 1px solid var(--color-border); border-radius: var(--radius-sm); box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
}
.copier .popover p { margin: 0 0 var(--space-1); font-size: 13px; font-weight: 500; }
.copier .popover label { display: flex; align-items: center; gap: var(--space-2); min-height: 32px; cursor: pointer; }
.copier .popover input { width: 16px; height: 16px; accent-color: var(--color-action); }
.copier .popover .bouton { margin-top: var(--space-2); }

.tableau-compact { border: 1px solid var(--color-border); border-radius: var(--radius-sm); margin: var(--space-2) 0; }
.tableau-compact td, .tableau-compact th { padding: 8px 12px; }
.carte > .actions { margin-top: var(--space-3); }

/* Hébergeur DNS détecté */
.hebergeur-dns { border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: var(--space-3); margin: var(--space-3) 0; background: var(--color-bg); }
.hebergeur-dns-titre { display: flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-2); color: var(--status-confirmed); }
.hebergeur-dns-titre span { color: var(--color-text); }
.etapes { margin: 0 0 var(--space-3); padding-left: 20px; display: grid; gap: var(--space-1); }

/* Accueil : mise en route */
.mise-en-route { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.mise-en-route li { display: flex; align-items: center; gap: 12px; padding: 12px var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
.mise-en-route-etat { display: inline-flex; color: var(--status-unavailable); }
.mise-en-route li.faite .mise-en-route-etat { color: var(--status-confirmed); }
.mise-en-route-texte { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.mise-en-route-texte strong { font-weight: 500; }
.mise-en-route li.faite .mise-en-route-texte strong { color: var(--color-text-muted); }
.mise-en-route-texte small { color: var(--color-text-muted); font-size: 13px; }

.fuseau-navigateur { align-self: flex-start; color: var(--color-action); }
.fuseau-navigateur:hover { color: var(--color-action-hover); }

/* Apparence : logo */
.logo-zone { display: grid; grid-template-columns: 280px 1fr; gap: var(--space-4); align-items: start; }
.logo-apercu {
  display: grid; place-items: center; min-height: 140px; padding: var(--space-3);
  border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  /* damier : rend visible la transparence du logo */
  background: repeating-conic-gradient(var(--color-bg) 0% 25%, var(--color-surface) 0% 50%) 50% / 16px 16px;
}
.logo-apercu img { max-width: 100%; max-height: 100px; height: auto; width: auto; }
.logo-apercu.vide span { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); color: var(--color-text-muted); font-size: 13px; }
.logo-actions { display: flex; flex-direction: column; gap: var(--space-2); align-items: flex-start; }
.actions-gauche { justify-content: flex-start; }

/* --- Personnalisation › Apparence --- */

/* Polices proposées aux pages de réservation (aperçus) */
@font-face { font-family: 'Page Inter'; src: url('fonts/pages/inter.woff2') format('woff2'); font-weight: 100 1000; font-display: swap; }
@font-face { font-family: 'Page Plus Jakarta Sans'; src: url('fonts/pages/plus-jakarta-sans.woff2') format('woff2'); font-weight: 100 1000; font-display: swap; }
@font-face { font-family: 'Page Manrope'; src: url('fonts/pages/manrope.woff2') format('woff2'); font-weight: 100 1000; font-display: swap; }
@font-face { font-family: 'Page IBM Plex Sans'; src: url('fonts/pages/ibm-plex-sans.woff2') format('woff2'); font-weight: 100 1000; font-display: swap; }
@font-face { font-family: 'Page DM Sans'; src: url('fonts/pages/dm-sans.woff2') format('woff2'); font-weight: 100 1000; font-display: swap; }


.apparence { display: flex; flex-direction: column; gap: var(--space-3); }
/* Encarts dans le fieldset (lecture seule possible) : même espacement que directement dans le formulaire */
.apparence > fieldset.sans-cadre { display: flex; flex-direction: column; gap: var(--space-3); }
.principal > .apparence { max-width: 1240px; }
.apparence > * { max-width: none; }
.apparence .grille-2 > .champ { min-width: 0; }
.apparence input[type=file] { max-width: 100%; }
.apparence .carte > .champ + .champ { margin-top: var(--space-3); }
.apparence .entete-page { margin-bottom: 0; }
/* Boutons collés au bord droit (la règle « > div » de .entete-avec-action ne doit pas les étirer) */
.entete-avec-action > .actions-entete { flex: 0 0 auto; display: flex; gap: var(--space-2); flex-wrap: wrap; justify-content: flex-end; margin-left: auto; }
.apparence .carte { margin-bottom: 0; }
textarea {
  width: 100%; padding: 10px 12px; border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  font: inherit; background: var(--color-surface); color: var(--color-text); resize: vertical;
}
textarea:focus { outline: none; border-color: var(--color-action); box-shadow: 0 0 0 2px var(--color-action); }
.champ-titre { font-size: 13px; font-weight: 500; }
.case { display: flex; align-items: center; gap: var(--space-2); font-size: 14px; cursor: pointer; min-height: 32px; }
.case input { width: 16px; height: 16px; accent-color: var(--color-action); }

/* Choix de la mise en page : cartes radio */
.choix-mises { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); margin-top: var(--space-3); }
.choix-mise {
  position: relative; display: flex; flex-direction: column; gap: 10px; padding: 12px; cursor: pointer;
  border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface);
}
.choix-mise:hover { border-color: var(--color-action); }
.choix-mise input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choix-mise:has(input:checked) { border: 2px solid var(--color-action); padding: 11px; box-shadow: 0 0 0 3px var(--color-accent); }
.choix-mise:has(input:focus-visible) { outline: 2px solid var(--color-action); outline-offset: 3px; }
.choix-mise-titre { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.choix-mise-titre strong { font-weight: 600; }
.choix-mise-badge { display: none; }
.choix-mise:has(input:checked) .choix-mise-badge { display: inline-flex; }
.choix-mise small { color: var(--color-text-muted); font-size: 13px; line-height: 1.45; }

/* Vignettes schématiques (teintées par la couleur choisie) */
.vignette {
  --v-accent: var(--apercu-accent, #0f766e);
  --v-clair: color-mix(in srgb, var(--apercu-secondaire, var(--v-accent)) 32%, #fff);
  height: 140px; border-radius: var(--radius-sm); background: #E2E8F0; box-sizing: border-box;
  display: flex; flex-direction: column; position: relative; overflow: hidden;
}
/* Barre de marque commune : logo à gauche, réseaux à droite */
.vignette .v-barre { flex: 0 0 16px; display: flex; align-items: center; justify-content: space-between; padding: 0 8px; background: #fff; border-bottom: 1px solid #E2E8F0; }
.vignette .v-logo { width: 26px; height: 6px; border-radius: 2px; background: #475569; }
.vignette .v-points { display: flex; gap: 3px; }
.vignette .v-points span { width: 6px; height: 6px; border-radius: 50%; border: 1px solid var(--v-accent); }
.vignette .v-contenu { flex: 1; min-height: 0; position: relative; display: flex; gap: 6px; padding: 8px; }
.vignette span { display: block; }
.vignette-a .v-panneau { flex: 0 0 34%; background: #fff; border-radius: 6px; overflow: hidden; display: flex; flex-direction: column; gap: 4px; padding-bottom: 6px; }
.vignette-a .v-bandeau { height: 30%; background: var(--v-clair); }
.vignette-a .v-rond { width: 18px; height: 18px; border-radius: 50%; background: #1C1B19; margin: -12px 0 0 6px; border: 2px solid #fff; }
.vignette .v-ligne { height: 5px; width: 70%; margin-left: 6px; background: #CBD5E1; border-radius: 3px; }
.vignette .v-ligne.courte { width: 50%; background: #E2E8F0; }
.vignette-a .v-calendrier { flex: 1; background: #fff; border-radius: 6px; padding: 8px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 3px; align-content: start; }
.vignette-a .v-calendrier span { height: 14px; border-radius: 3px; background: #F1F5F9; }
.vignette .libre { background: var(--v-clair) !important; }
.vignette .choisi { background: var(--v-accent) !important; }
.vignette-b { background: #fff; }
.vignette-b .v-contenu { padding: 0; flex-direction: column; }
.vignette-b .v-hero { height: 55%; background: color-mix(in srgb, var(--apercu-secondaire, var(--v-accent)) 55%, #1a1a1a); }
.vignette-b .v-carte { position: absolute; left: 18%; right: 18%; top: 22%; bottom: 8%; background: #fff; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); padding: 8px; display: flex; flex-direction: column; gap: 5px; }
.vignette-b .v-etapes, .vignette-b .v-jours { display: flex; gap: 3px; }
.vignette-b .v-etapes span { flex: 1; height: 5px; border-radius: 3px; background: #E2E8F0; }
.vignette-b .v-etapes .fait { background: var(--v-accent); }
.vignette-b .v-jours span { flex: 1; height: 16px; border-radius: 4px; background: #F1F5F9; }
.vignette-b .v-bouton { margin-top: auto; height: 10px; border-radius: 4px; background: var(--v-accent); }
.vignette-c { background: #fff; }
.vignette-c .v-contenu { flex-direction: column; }
.vignette-c .v-profil { display: flex; align-items: center; gap: 6px; }
.vignette-c .v-carre { width: 16px; height: 16px; border-radius: 50%; background: #1C1B19; }
.vignette-c .v-profil .v-ligne { width: 40%; margin: 0; }
.vignette-c .v-semaine { flex: 1; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; border: 1px solid #E2E8F0; border-radius: 4px; padding: 3px; }
.vignette-c .v-semaine > span { display: flex; flex-direction: column; gap: 2px; }
.vignette-c .v-semaine > span > span { height: 9px; border-radius: 2px; }

/* Colonnes réglages / aperçu */
.apparence-colonnes { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: flex-start; }
.apparence-reglages { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.apparence-apercu { flex: 1 1 340px; min-width: 0; position: sticky; top: 88px; display: flex; flex-direction: column; gap: var(--space-3); }
.apparence-apercu .carte-entete { margin-bottom: 0; }

/* Couleur */
.nuances { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.nuance { width: 40px; height: 40px; border-radius: 50%; border: 0; cursor: pointer; background: var(--nuance); }
.nuance[aria-pressed=true] { box-shadow: 0 0 0 3px var(--color-surface), 0 0 0 5px var(--nuance); }
.nuance-perso { position: relative; width: 40px; height: 40px; border-radius: 50%; overflow: hidden; cursor: pointer;
  background: conic-gradient(#ef4444, #f59e0b, #22c55e, #06b6d4, #6366f1, #d946ef, #ef4444); }
.nuance-perso input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.champ-code { width: 140px; margin-left: var(--space-2); }
.code-couleur { position: relative; }
.code-couleur input { padding-left: 38px; }
.code-pastille { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; border-radius: 5px;
  background: var(--pastille, transparent); box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.15); }

.couleur-secondaire { margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--color-border); display: flex; flex-direction: column; gap: var(--space-2); }
.couleur-secondaire:not(:has([data-avec-secondaire]:checked)) .couleur-secondaire-choix { opacity: .4; pointer-events: none; }
.apparence .sous-section { margin: 0 0 var(--space-2); }

/* Police */
.choix-polices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); margin-top: var(--space-3); }
.choix-police { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); cursor: pointer; }
.choix-police:hover { border-color: var(--color-action); }
.choix-police input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choix-police:has(input:checked) { border: 2px solid var(--color-action); padding: 11px 13px; background: var(--color-accent); }
.choix-police:has(input:focus-visible) { outline: 2px solid var(--color-action); outline-offset: 2px; }
.police-nom { font-size: 12px; font-weight: 500; color: var(--color-text-muted); }
.police-echantillon { font-size: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; color: var(--color-text); font-variant-numeric: tabular-nums; }
.police-auto { font-size: 14px; font-weight: 400; color: var(--color-text-muted); }

/* Images */
.image-apercu { height: 96px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); display: grid; place-items: center; overflow: hidden; }
.image-apercu-logo { background: repeating-conic-gradient(var(--color-bg) 0% 25%, var(--color-surface) 0% 50%) 50% / 16px 16px; padding: 8px; }
.image-apercu-logo img { max-width: 100%; max-height: 80px; }
.image-apercu-bandeau img { width: 100%; height: 100%; object-fit: cover; }
.image-apercu.vide { border-style: dashed; color: var(--color-text-muted); font-size: 13px; text-align: center; padding: 8px; }

/* Aperçu en direct */
.bascule { display: inline-flex; border: 1px solid var(--color-border); border-radius: var(--radius-sm); overflow: hidden; }
.bascule button { height: 36px; padding: 0 12px; border: 0; background: var(--color-surface); color: var(--color-text-muted); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; }
.bascule button[aria-pressed=true] { background: var(--color-accent); color: var(--color-accent-text); }
.apercu-fond { background: var(--color-bg); border-radius: var(--radius-sm); padding: var(--space-3); display: flex; justify-content: center; }
.apercu-ecran {
  font-family: var(--apercu-police, var(--police-mise));
  --a: var(--apercu-accent, #0f766e); --a-clair: color-mix(in srgb, var(--apercu-secondaire, var(--a)) 32%, #fff);
  width: 100%; background: #fff; color: #1C1B19; border-radius: 10px; overflow: hidden;
  box-shadow: 0 4px 16px rgba(15,23,42,0.12); transition: width .2s;
}
.apercu-ecran.mobile { width: 190px; }
.ap-bandeau { position: relative; height: 48px; background: var(--a-clair) center / cover no-repeat; }
.ap-barre { height: 26px; display: flex; align-items: center; justify-content: space-between; padding: 0 10px; background: #fff; border-bottom: 1px solid #E2E8F0; }
.ap-logo { height: 16px; max-width: 80px; object-fit: contain; }
.ap-logo-texte { font-size: 9px; font-weight: 700; }
.ap-reseaux { display: flex; gap: 3px; }
.ap-reseaux span { width: 9px; height: 9px; border-radius: 3px; border: 1px solid var(--apercu-secondaire, #CBD5E1); }
.ap-corps { position: relative; z-index: 1; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.ap-profil { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.ap-rond { width: 30px; height: 30px; border-radius: 50%; background: #1C1B19; border: 3px solid #fff; flex-shrink: 0; }
.ap-ligne { height: 4px; width: 80%; background: #E2E8F0; border-radius: 3px; }
.ap-jours { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
.ap-jours span { height: 12px; border-radius: 3px; background: #F1F5F9; }
.ap-jours .libre { background: var(--a-clair); }
.ap-jours .choisi { background: var(--a); }
.ap-bouton { height: 22px; border-radius: 6px; background: var(--a); }
/* B : bandeau haut et sombre, carte flottante */
.apercu-b .ap-bandeau { height: 70px; background-color: color-mix(in srgb, var(--apercu-secondaire, var(--a)) 55%, #1a1a1a); }
.apercu-b .ap-corps { margin: -30px 10px 10px; background: #fff; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); position: relative; }
/* C : pas de photo, en-tête fin, semaine en colonnes hautes */
.apercu-c .ap-bandeau { display: none; }

.apercu-c .ap-jours span { height: 26px; }
/* Police par défaut de chaque mise en page dans l'aperçu */
.apercu-a { --police-mise: 'Page Plus Jakarta Sans'; }
.apercu-b { --police-mise: 'Page Manrope'; }
.apercu-c { --police-mise: 'Page IBM Plex Sans'; }
/* A : profil sur le bandeau */
.apercu-a .ap-profil { margin-top: -22px; align-items: flex-end; }
.apercu-a .ap-profil strong { padding-bottom: 2px; }

/* Widget */
.widget-bloc { border-top: 1px solid var(--color-border); padding-top: var(--space-3); display: flex; flex-direction: column; gap: var(--space-2); }
.widget-bloc .sous-section { margin: 0; }
.code-widget {
  margin: 0; padding: 12px; border-radius: var(--radius-sm); background: #14172E; color: #FBE0D9;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; line-height: 1.5;
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.widget-bloc .bouton { align-self: flex-start; }

/* Barre d'actions de bas de page : action destructrice à gauche, enregistrement à droite */
.barre-actions { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-2); }
.barre-actions > .bouton-principal { margin-left: auto; }
.form-suppression { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.bouton-danger-contour { background: var(--color-surface); color: var(--status-cancelled); border: 1px solid var(--status-cancelled); }
.bouton-danger-contour:hover { background: var(--status-cancelled-bg); }
.dialogue { max-width: 460px; width: calc(100% - 32px); border: 0; border-radius: var(--radius-md); padding: var(--space-4); background: var(--color-surface); color: var(--color-text); box-shadow: 0 20px 60px rgba(15, 23, 42, 0.3); }
.dialogue::backdrop { background: rgba(15, 23, 42, 0.45); }
.dialogue h2 { margin-bottom: var(--space-2); }
.dialogue p { color: var(--color-text-muted); margin: 0 0 var(--space-4); }
.dialogue .actions { margin: 0; }

/* --- Mobile --- */

@media (max-width: 760px) {
  .app { flex-direction: column; }
  .sidebar { width: auto; height: auto; position: static; padding: var(--space-3); }
  .sidebar-marque { margin-bottom: var(--space-3); }
  .sidebar-nav { flex-direction: row; flex-wrap: wrap; }
  .sidebar-sous-menu { flex-direction: row; margin: 0; padding: 0; border: 0; }
  .topbar { padding: var(--space-2) var(--space-3); min-height: 64px; gap: var(--space-2); }
  .menu-utilisateur-nom { display: none; }
  .principal { padding: var(--space-4) var(--space-3); }
  h1 { font-size: 22px; }
  .grille-2, .choix-radio, .details, .logo-zone, .choix-mises, .choix-polices { grid-template-columns: 1fr; }
  .apparence-apercu { position: static; }
  .jour-ligne { grid-template-columns: 1fr auto; }
  .jour-plages { grid-column: 1 / -1; grid-row: 2; }
  .plage input[type=time] { width: 104px; }
  /* Tableau -> cartes empilées */
  .tableau thead { display: none; }
  .tableau, .tableau tbody, .tableau tr, .tableau td { display: block; width: 100%; }
  .tableau tr { padding: var(--space-2) 0; border-bottom: 1px solid var(--color-border); }
  .tableau tr:last-child { border-bottom: 0; }
  .tableau td { border: 0; padding: 6px var(--space-3); }
  .tableau td[data-libelle]::before { content: attr(data-libelle); display: block; font-size: 12px; color: var(--color-text-muted); }
  .cellule-actions { text-align: left; white-space: normal; }
  .actions-espacees { flex-direction: column-reverse; align-items: stretch; }
  .actions-espacees .bouton { width: 100%; }
  .carte { padding: var(--space-3); }
}

/* Héritage des réglages de l'organisation (Services\Heritage) : selon l'interrupteur « Personnaliser »,
   on montre le résumé des valeurs héritées OU les champs de l'agenda — en CSS seul (:has), sans JavaScript. */
.heritage { display: flex; flex-direction: column; gap: 12px; margin: 4px 0 16px; }
.heritage-resume {
  padding: 12px 16px; border: 1px dashed var(--color-border); border-radius: 10px;
  background: var(--color-bg); font-size: 14px;
}
.heritage-titre { margin: 0 0 6px; color: var(--color-text-muted); font-size: 13px; font-weight: 500; }
.heritage-resume ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.bloc-herite:has(> .heritage .heritage-case:not(:checked)) > .bloc-perso { display: none; }
.bloc-herite:has(> .heritage .heritage-case:checked) > .heritage .heritage-resume { display: none; }

/* Langues de la page (agendas/_langues.php) : autres langues visibles seulement si « multilingue » est coché */
.multilingue { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
.langues-autres { border: 0; padding: 0 0 0 30px; margin: 0; min-width: 0; }
.langues-autres legend { padding: 0; margin-bottom: 8px; font-weight: 500; font-size: 14px; }
.cases-langues { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.multilingue:not(:has(.multilingue-case:checked)) .langues-autres { display: none; }

/* Apparence › Textes : un onglet par langue (radios ; le masquage des autres langues est dans la vue) */
.onglets-langues { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 16px; border-bottom: 1px solid var(--color-border); }
.onglet-langue { position: relative; cursor: pointer; }
.onglet-langue input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.onglet-langue span { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border-bottom: 2px solid transparent; margin-bottom: -1px; color: var(--color-text-muted); font-weight: 500; font-size: 14px; }
.onglet-langue input:checked + span { color: var(--color-text); border-bottom-color: var(--color-action); }
.onglet-langue input:focus-visible + span { outline: 2px solid var(--color-action); outline-offset: -2px; border-radius: 6px; }
.a-traduire { font-size: 11px; font-weight: 500; padding: 1px 6px; border-radius: 999px; background: var(--status-pending-bg); color: var(--status-pending); }
/* La langue principale choisie ne figure pas dans « Autres langues proposées » (codes de Reservation\Langue::LANGUES) */
.langues-reglage:has(#langue_principale option[value="fr"]:checked) .cases-langues [data-langue="fr"],
.langues-reglage:has(#langue_principale option[value="en"]:checked) .cases-langues [data-langue="en"],
.langues-reglage:has(#langue_principale option[value="es"]:checked) .cases-langues [data-langue="es"],
.langues-reglage:has(#langue_principale option[value="de"]:checked) .cases-langues [data-langue="de"],
.langues-reglage:has(#langue_principale option[value="it"]:checked) .cases-langues [data-langue="it"],
.langues-reglage:has(#langue_principale option[value="nl"]:checked) .cases-langues [data-langue="nl"] { display: none; }

/* Onglets de page (Agendas › Réglages globaux) : liens, l'onglet courant porte aria-current */
.onglets { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 var(--space-3); border-bottom: 1px solid var(--color-border); }
.onglets a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; margin-bottom: -1px; border-bottom: 2px solid transparent;
  color: var(--color-text-muted); font-weight: 500; font-size: 15px; text-decoration: none; }
.onglets a:hover { color: var(--color-text); }
.onglets a[aria-current] { color: var(--color-text); border-bottom-color: var(--color-action); }

/* Bouton par défaut invisible (touche Entrée = Enregistrer dans un formulaire qui contient d'autres boutons d'envoi) */
.bouton-defaut { position: absolute; width: 1px; height: 1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); }

/* Éditeur du formulaire client (agendas/_formulaire_client.php) */
.fc-fixes { list-style: none; margin: var(--space-2) 0 var(--space-1); padding: 0; border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
.fc-fixes li { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 6px 16px; }
.fc-fixes li + li { border-top: 1px solid var(--color-border); }
.fc-fixes select { width: auto; min-width: 180px; }
.fc-champs { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; counter-reset: fc; }
.fc-champ { padding: 16px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-bg); }
.fc-champ.en-erreur { border-color: var(--status-cancelled); }
.fc-entete { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.fc-type { font-weight: 600; font-size: 14px; color: var(--color-title); counter-increment: fc; }
.fc-type::before { content: counter(fc) "."; margin-right: 2px; color: var(--color-text-muted); }
.fc-actions { display: flex; gap: 4px; }
.fc-actions .bouton-icone:disabled { opacity: .35; cursor: default; }
.fc-supprimer:hover { color: var(--status-cancelled); }
.fc-traductions { margin-top: 12px; }
.fc-traductions summary { cursor: pointer; font-size: 14px; font-weight: 500; color: var(--color-action); min-height: 32px; display: inline-flex; align-items: center; }
.fc-langue { border: 0; padding: 12px 0 0; margin: 0; min-width: 0; }
.fc-langue legend { font-weight: 600; font-size: 13px; color: var(--color-text-muted); padding: 0; }
.fc-vide { margin: var(--space-3) 0 0; color: var(--color-text-muted); font-size: 14px; }
.fc-ajout { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 8px 12px; margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px dashed var(--color-border); }
.fc-ajout label { width: 100%; font-weight: 500; font-size: 14px; }
.fc-ajout select { width: auto; min-width: 200px; }

/* Logos des fournisseurs d'agenda (public/assets/logos/, SVG officiels) : décoratifs, le nom est toujours affiché */
.option-fournisseur { align-items: center; }
.logo-fournisseur { flex: none; width: 28px; height: 28px; }
.logo-fournisseur-petit { flex: none; width: 20px; height: 20px; }

/* Encart « Calendrier relié » (agendas/_calendrier.php) : champs du compte propre seulement si coché */
.encart-calendrier .choix-compte { margin-bottom: var(--space-2); }
.encart-calendrier form:not(:has(input[name=compte][value=propre]:checked)) .compte-propre { display: none; }

/* Changement de fournisseur d'agendas : avertissement + confirmation, seulement si un autre que l'actuel est coché */
.changement-fournisseur { display: none; margin-top: var(--space-3); }
.formulaire-connexion:has(input[name=fournisseur]:not([data-actuel]):checked) .changement-fournisseur,
.changement-fournisseur.en-erreur { display: block; }

/* Pages d'accès : sous-titre, lien « Mot de passe oublié ? » à droite du libellé, lien de retour */
.sous-titre-acces { margin: calc(-1 * var(--space-3)) 0 var(--space-4); }
.label-avec-lien { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-2); }
.label-avec-lien a { font-size: 13px; }
.lien-retour { margin: var(--space-4) 0 0; font-size: 14px; }
.champ-piege { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* Connexion / inscription avec Microsoft ou Google (views/auth/_sso.php) */
.sso { display: grid; gap: 10px; margin-bottom: var(--space-3); }
.bouton-sso { justify-content: center; gap: 10px; background: var(--color-surface); }
.bouton-sso img { flex: none; }
.sso-ou { display: flex; align-items: center; gap: 12px; margin: 6px 0 0; color: var(--color-text-muted); font-size: 13px; }
.sso-ou::before, .sso-ou::after { content: ""; flex: 1; height: 1px; background: var(--color-border); }

/* --- Mobile : barre de navigation fixe en bas + menu complet en panneau (views/layout.php) --- */
.topbar-marque, .barre-mobile { display: none; }

@media (max-width: 760px) {
  .sidebar { display: none; }
  .topbar-marque { display: flex; margin-right: auto; color: var(--color-title); text-decoration: none; }
  .topbar-marque .sidebar-marque { margin: 0; }
  .topbar-marque .marque-symbole { width: 32px; height: 32px; }
  .topbar-marque .marque-mot { font-size: 17px; }
  .topbar-marque .marque-texte small { display: none; }
  .principal { padding-bottom: calc(104px + env(safe-area-inset-bottom, 0px)); }

  .barre-mobile {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    display: grid; grid-template-columns: repeat(5, 1fr); align-items: end;
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
    background: var(--nav-bg); color: var(--nav-text-muted);
    box-shadow: 0 -6px 20px rgba(15, 23, 42, 0.18);
  }
  .barre-mobile > a { display: grid; justify-items: center; gap: 3px; min-height: 52px; padding: 6px 2px 2px; border-radius: 10px;
    color: inherit; text-decoration: none; font-size: 11px; font-weight: 500; text-align: center; line-height: 1.2; position: relative; }
  .barre-mobile > a.actif { color: #FFFFFF; }
  .barre-mobile > a.actif::before { content: ""; position: absolute; top: -6px; left: 30%; right: 30%; height: 3px; border-radius: 0 0 3px 3px; background: var(--color-marque-accent); }
  .barre-mobile > a:focus-visible, .menu-mobile summary:focus-visible .menu-mobile-bouton { outline: 2px solid #FFFFFF; outline-offset: 2px; }

  /* Bouton « Menu » : rond corail (touche de marque), en relief au centre */
  .menu-mobile { display: grid; justify-items: center; }
  .menu-mobile summary { list-style: none; cursor: pointer; display: grid; place-items: center; min-height: 52px; }
  .menu-mobile summary::-webkit-details-marker { display: none; }
  .menu-mobile-bouton { width: 56px; height: 56px; margin-top: -22px; border-radius: 50%; display: grid; place-items: center;
    background: var(--color-marque-accent); color: #22264A; box-shadow: 0 6px 16px rgba(15, 23, 42, 0.30), 0 0 0 4px var(--nav-bg); }
  .menu-mobile .fermer, .menu-mobile[open] .ouvrir { display: none; }
  .menu-mobile[open] .fermer { display: grid; }

  /* Panneau : le menu complet, au-dessus de la barre ; l'ombre étendue assombrit la page derrière */
  .menu-mobile-panneau { position: fixed; left: 0; right: 0; bottom: calc(64px + env(safe-area-inset-bottom, 0px)); z-index: -1;
    max-height: calc(100vh - 140px); overflow-y: auto; padding: var(--space-4) var(--space-3) var(--space-3);
    background: var(--nav-bg); border-radius: 20px 20px 0 0; box-shadow: 0 0 0 100vmax rgba(15, 23, 42, 0.45); }
  .menu-mobile-panneau .sidebar-nav { display: flex; flex-direction: column; flex-wrap: nowrap; gap: 2px; }
  .menu-mobile-panneau .sidebar-sous-menu { flex-direction: column; margin: 2px 0 var(--space-1) 30px; padding-left: var(--space-2); border-left: 1px solid rgba(255, 255, 255, 0.15); }
  .menu-mobile-panneau .sidebar-nav a { min-height: 44px; }
}

/* Rubriques inaccessibles tant que l'organisation n'existe pas : grisées, cadenas, pas de lien (views/layout.php) */
.sidebar-nav .verrouille { display: flex; align-items: center; gap: var(--space-2); min-height: 40px; padding: 8px 12px; border-radius: var(--radius-sm);
  color: var(--nav-text-muted); opacity: .55; cursor: not-allowed; font-size: 15px; }
.sidebar-nav .verrouille .verrou { margin-left: auto; display: inline-flex; }
.nav-aide { display: flex; gap: 8px; align-items: flex-start; margin: var(--space-3) 0 0; padding: 10px 12px; border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.06); color: var(--nav-text-muted); font-size: 13px; line-height: 1.4; }
.nav-aide .icone { flex: none; margin-top: 1px; color: var(--color-marque-accent); }
.barre-mobile > .verrouille { display: grid; justify-items: center; gap: 3px; min-height: 52px; padding: 6px 2px 2px; font-size: 11px; font-weight: 500;
  text-align: center; line-height: 1.2; color: var(--nav-text-muted); opacity: .45; position: relative; cursor: not-allowed; }
.barre-mobile > .verrouille .verrou { position: absolute; top: 2px; right: 22%; }

/* Accueil : étapes qui attendent l'organisation (cadenas, pas de bouton) */
.mise-en-route li.bloquee { opacity: .6; }
.mise-en-route-bloquee { font-size: 13px; color: var(--color-text-muted); white-space: nowrap; }

/* Guides pas à pas (Connexion agenda) */
.guide-prerequis { display: flex; gap: 8px; align-items: flex-start; margin: var(--space-2) 0; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--color-accent); color: var(--color-accent-text); font-size: 14px; }
.guide-prerequis .icone { flex: none; margin-top: 2px; }
.guide-etapes { margin: var(--space-3) 0 0; padding-left: 22px; display: grid; gap: var(--space-3); }
.guide-etapes li::marker { font-weight: 600; color: var(--color-title); }
.guide-etapes strong { display: block; font-weight: 600; color: var(--color-title); }
.guide-etapes p { margin: 4px 0 0; color: var(--color-text-muted); font-size: 14px; }
.guide-liens { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.guide-code { display: flex; gap: 10px; align-items: flex-start; flex-wrap: wrap; margin-top: 8px; }
.guide-code pre { flex: 1 1 280px; min-width: 0; margin: 0; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--color-bg); border: 1px solid var(--color-border); font-size: 12px; white-space: pre-wrap; word-break: break-all; }

/* Sélection du menu : une seule marque pour la page courante.
   Parent d'une page en sous-menu : seulement le texte en blanc (pas de fond ni de barre) ;
   page courante d'un sous-menu : texte blanc gras + trait corail posé sur la ligne verticale du sous-menu. */
.sidebar-nav > a.actif:not([aria-current]) { background: none; box-shadow: none; color: var(--nav-actif-text); font-weight: 600; }
.sidebar-nav .sidebar-sous-menu a { position: relative; }
.sidebar-nav .sidebar-sous-menu a.actif { background: none; box-shadow: none; color: var(--nav-actif-text); font-weight: 600; }
.sidebar-nav .sidebar-sous-menu a.actif::before { content: ""; position: absolute; left: calc(-1 * var(--space-2) - 2px); top: 8px; bottom: 8px; width: 3px; border-radius: 3px; background: var(--color-marque-accent); }
.sidebar-nav .sidebar-sous-menu a:not(.actif):hover { color: var(--nav-text); }

/* Aide : liste des tutoriels et page tutoriel (sommaire collant + étapes) */
.aide-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: var(--space-3); }
.aide-tuile { display: flex; align-items: center; gap: var(--space-3); color: var(--color-text); text-decoration: none; }
.aide-tuile:hover { border-color: var(--color-action); }
.aide-tuile span { flex: 1; display: grid; gap: 2px; }
.aide-tuile strong { color: var(--color-title); }
.aide-tuile small { color: var(--color-text-muted); }
.aide-tuile > .icone { transform: rotate(-90deg); color: var(--color-text-muted); }
.tutoriel { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: var(--space-4); align-items: start; margin-top: var(--space-3); }
.tutoriel-sommaire { position: sticky; top: 88px; }
.tutoriel-sommaire h2 { font-size: 15px; margin: 0 0 var(--space-2); }
.tutoriel-sommaire ol { margin: 0; padding-left: 20px; display: grid; gap: 6px; font-size: 14px; }
.tutoriel-contenu { display: grid; gap: var(--space-3); min-width: 0; }
.tutoriel-etape { scroll-margin-top: 88px; }
.tutoriel-etape h2 { margin: 0; font-size: 19px; }
.tutoriel-etape > p { margin: var(--space-2) 0 0; max-width: 70ch; }
.tutoriel-titre { display: flex; align-items: center; gap: 12px; }
.tutoriel-numero { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--color-action); color: var(--color-action-text); font-weight: 700; font-size: 15px; }
.tutoriel-liste { margin: var(--space-2) 0; padding-left: 20px; display: grid; gap: 6px; }
.tutoriel-etape .guide-liens { margin-top: var(--space-3); }
.tutoriel-problemes { margin: var(--space-2) 0 0; display: grid; gap: var(--space-3); }
.tutoriel-problemes dt { font-weight: 600; color: var(--color-title); }
.tutoriel-problemes dd { margin: 4px 0 0; color: var(--color-text-muted); max-width: 70ch; }
.lien-tutoriel { display: flex; align-items: center; gap: 8px; margin: 0 0 var(--space-3); font-size: 14px; }
@media (max-width: 900px) { .tutoriel { grid-template-columns: 1fr; } .tutoriel-sommaire { position: static; } }

.sommaire-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 14px; }
.sommaire-liste a { display: flex; gap: 8px; align-items: baseline; padding: 4px 0; }
.sommaire-numero { flex: none; min-width: 20px; height: 20px; border-radius: 50%; display: inline-grid; place-items: center; background: var(--color-accent); color: var(--color-accent-text); font-size: 12px; font-weight: 600; text-decoration: none; }
/* Menu du compte : la page en cours, même marque que le menu latéral (texte affirmé + trait corail) */
.menu-deroulant a[aria-current] { font-weight: 600; color: var(--color-title); box-shadow: inset 3px 0 0 var(--color-marque-accent); }
.sommaire-liste a { text-decoration: none; }
.sommaire-liste .sommaire-libelle { text-decoration: underline; text-underline-offset: 2px; }
.sommaire-liste a:hover .sommaire-libelle { text-decoration-thickness: 2px; }

/* Rubrique courante sans sous-menu : même marque que les sous-rubriques (pas de fond, trait corail court) */
.sidebar-nav > a { position: relative; }
.sidebar-nav > a.actif[aria-current] { background: none; box-shadow: none; color: var(--nav-actif-text); font-weight: 600; }
.sidebar-nav > a.actif[aria-current]::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 3px; background: var(--color-marque-accent); }

/* Vignettes D (conversation), E (prochaines disponibilités), F (moments de la journée) */
.vignette-d { background: #fff; }
.vignette-d .v-panneau-etroit { flex: 0 0 26%; background: #F8FAFC; border-radius: 6px; display: flex; flex-direction: column; gap: 4px; padding: 6px 0; }
.vignette-d .v-rond { width: 16px; height: 16px; border-radius: 50%; background: #1C1B19; margin: 0 0 2px 6px; }
.vignette-d .v-fil { flex: 1; display: flex; flex-direction: column; gap: 5px; padding: 4px; }
.vignette-d .v-bulle { height: 12px; width: 70%; border-radius: 6px 6px 6px 2px; background: #F1F5F9; border: 1px solid #E2E8F0; }
.vignette-d .v-bulle.courte { width: 50%; }
.vignette-d .v-bulle.moi { align-self: flex-end; width: 40%; border-radius: 6px 6px 2px 6px; background: var(--v-accent); border-color: var(--v-accent); }
.vignette-d .v-pastilles { display: flex; gap: 3px; }
.vignette-d .v-pastilles span { width: 18px; height: 9px; border-radius: 9px; background: var(--v-clair); }
.vignette-e { background: #fff; }
.vignette-e .v-contenu, .vignette-f .v-contenu { flex-direction: column; gap: 4px; }
.vignette-e .v-profil { display: flex; align-items: center; gap: 6px; }
.vignette-e .v-carre { width: 14px; height: 14px; border-radius: 50%; background: #1C1B19; }
.vignette-e .v-profil .v-ligne { width: 40%; margin: 0; }
.vignette-e .v-prochain { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 5px 6px; border-radius: 5px; background: var(--v-clair); }
.vignette-e .v-prochain .v-ligne { margin: 0; width: 40%; background: rgba(0,0,0,.18); }
.vignette-e .v-bouton-mini { width: 26px; height: 8px; border-radius: 3px; background: var(--v-accent); }
.vignette-e .v-rangee { display: flex; align-items: center; gap: 6px; padding-top: 3px; border-top: 1px solid #F1F5F9; }
.vignette-e .v-rangee .v-ligne { margin: 0; width: 18%; }
.vignette-e .v-heures { flex: 1; display: flex; gap: 3px; }
.vignette-e .v-heures span { flex: 1; height: 9px; border-radius: 3px; }
.vignette-f { background: #fff; }
.vignette-f .v-contenu { padding: 0 0 6px; }
.vignette-f .v-entete-f { height: 26px; background: linear-gradient(120deg, var(--v-accent), color-mix(in srgb, var(--v-accent) 60%, #000)); }
.vignette-f .v-ruban { display: flex; gap: 3px; padding: 0 6px; }
.vignette-f .v-ruban span { flex: 1; height: 18px; border-radius: 4px; background: #F1F5F9; }
.vignette-f .v-moments { flex: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; padding: 0 6px; }
.vignette-f .v-moments > span { display: flex; flex-direction: column; gap: 3px; padding: 3px; border: 1px solid #E2E8F0; border-radius: 4px; }
.vignette-f .v-moments > span > span { height: 8px; border-radius: 2px; }

/* Aperçu en direct pour D, E, F */
.apercu-d { --police-mise: 'Page DM Sans'; }
.apercu-e { --police-mise: 'Page Inter'; }
.apercu-f { --police-mise: 'Page Manrope'; }
.apercu-d .ap-bandeau, .apercu-e .ap-bandeau { display: none; }
.ap-fil, .ap-prochain { display: none; }
.apercu-d .ap-fil { display: flex; flex-direction: column; gap: 6px; }
.ap-fil span { width: 60%; height: 16px; border-radius: 9px 9px 9px 3px; background: #F1F5F9; }
.ap-fil .moi { align-self: flex-end; width: 34%; border-radius: 9px 9px 3px 9px; background: var(--a); }
.apercu-d .ap-ligne { display: none; }
.apercu-d .ap-jours { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.apercu-d .ap-jours span { height: 14px; border-radius: 999px; }
.apercu-d .ap-jours span:nth-child(n+6), .apercu-d .ap-bouton { display: none; }
.apercu-e .ap-prochain { display: flex; justify-content: space-between; align-items: center; padding: 8px; border-radius: 6px; background: var(--a-clair); }
.ap-prochain span:first-child { width: 45%; height: 6px; border-radius: 3px; background: rgba(0,0,0,.2); }
.ap-prochain span:last-child { width: 50px; height: 14px; border-radius: 4px; background: var(--a); }
.apercu-e .ap-jours { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.apercu-f .ap-bandeau { height: 44px; background-color: var(--a); }
.apercu-f .ap-jours span { height: 20px; }

/* Listes à puces simples (Mesure d'audience) */
.liste-puces { margin: 0; padding-left: 1.2em; display: flex; flex-direction: column; gap: var(--space-2); color: var(--color-text-muted); }

/* Bandeau du super admin : organisation gérée ou « connecté en tant que » (views/layout.php) */
.bandeau-plateforme { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-3); padding: 10px 14px;
  border-radius: var(--radius-sm); background: var(--color-accent); color: var(--color-accent-text); border: 1px solid var(--color-accent-text); font-weight: 500; }
.bandeau-plateforme span { flex: 1; min-width: 200px; }
.bandeau-plateforme form { margin: 0; }
.recherche-plateforme { display: flex; gap: var(--space-2); margin-bottom: var(--space-3); flex-wrap: wrap; }
.recherche-plateforme input { flex: 1 1 260px; min-height: 40px; padding: 0 12px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-text); font: inherit; }