/* ============================================================================
 * Grand Consulting — Rendez-vous (version PHP). Design system GC (skill 2166) :
 * toutes les couleurs par variables CSS, modes jour / sombre / tactique.
 * ========================================================================== */
/* ── Mode Jour (par défaut) ──────────────────────────────────────────────── */
:root {
  --background:        #FFFFFF;
  --background-subtle: #F5F5F5;
  --background-muted:  #EBEBEB;
  --border:            #D4D4D4;
  --border-strong:     #A3A3A3;
  --text-primary:      #0A0A0A;
  --text-secondary:    #404040;
  --text-muted:        #737373;
  --text-disabled:     #A3A3A3;
  --accent:            #171717;
  --accent-hover:      #404040;
  --accent-text:       #FFFFFF;
  --success:           #166534;
  --success-bg:        #F0FDF4;
  --warning:           #92400E;
  --warning-bg:        #FFFBEB;
  --error:             #991B1B;
  --error-bg:          #FEF2F2;
  --info:              #1E3A5F;
  --info-bg:           #EFF6FF;

  --surface-inverse:         #1c1917;
  --surface-inverse-fg:      #f5f5f4;
  --overlay-scrim:           rgba(0, 0, 0, 0.6);
  --shadow-modal:            0 20px 40px rgba(0, 0, 0, 0.5);

  /* ── Bandeaux d'environnement ───────────────────────────────────────────── */
  --env-conception-bg: #fbbf24;
  --env-conception-fg: #1c1917;
  --env-staging-bg:    #fb923c;
  --env-staging-fg:    #1c1917;
  --env-production-bg: #166534;
  --env-production-fg: #f0fdf4;

  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'Courier New', Consolas, monospace;

  --space-1: 0.25rem;  --space-2: 0.5rem;   --space-3: 0.75rem;
  --space-4: 1rem;     --space-5: 1.25rem;  --space-6: 1.5rem;
  --space-8: 2rem;     --space-10: 2.5rem;  --space-12: 3rem;  --space-16: 4rem;

  --radius-sm: 0.25rem;  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;   --radius-xl: 0.75rem;  --radius-full: 9999px;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.10);

  --transition-fast: 100ms ease;
  --transition-base: 150ms ease;
}

/* ── Mode Sombre auto ────────────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root {
    --background:        #0A0A0A;
    --background-subtle: #171717;
    --background-muted:  #262626;
    --border:            #2E2E2E;
    --border-strong:     #525252;
    --text-primary:      #FAFAFA;
    --text-secondary:    #D4D4D4;
    --text-muted:        #A3A3A3;
    --text-disabled:     #525252;
    --accent:            #FAFAFA;
    --accent-hover:      #D4D4D4;
    --accent-text:       #0A0A0A;
    --success:           #4ADE80;
    --success-bg:        #052E16;
    --warning:           #FCD34D;
    --warning-bg:        #1C1400;
    --error:             #F87171;
    --error-bg:          #1C0000;
    --info:              #93C5FD;
    --info-bg:           #0C1A2E;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5);
  }
}

/* ── Override : Mode Jour forcé ──────────────────────────────────────────── */
html[data-theme="light"] {
  --background:        #FFFFFF;
  --background-subtle: #F5F5F5;
  --background-muted:  #EBEBEB;
  --border:            #D4D4D4;
  --border-strong:     #A3A3A3;
  --text-primary:      #0A0A0A;
  --text-secondary:    #404040;
  --text-muted:        #737373;
  --accent:            #171717;
  --accent-hover:      #404040;
  --accent-text:       #FFFFFF;
}

/* ── Override : Mode Sombre forcé ────────────────────────────────────────── */
html[data-theme="dark"] {
  --background:        #0A0A0A;
  --background-subtle: #171717;
  --background-muted:  #262626;
  --border:            #2E2E2E;
  --border-strong:     #525252;
  --text-primary:      #FAFAFA;
  --text-secondary:    #D4D4D4;
  --text-muted:        #A3A3A3;
  --accent:            #FAFAFA;
  --accent-hover:      #D4D4D4;
  --accent-text:       #0A0A0A;
}

/* ── Mode Tactique (admin uniquement) ────────────────────────────────────── */
html[data-theme="tactical"] {
  --background:        #000000;
  --background-subtle: #0A0A0A;
  --background-muted:  #111111;
  --border:            #3D0000;
  --border-strong:     #7F0000;
  --text-primary:      #FF2222;
  --text-secondary:    #CC1111;
  --text-muted:        #881111;
  --text-disabled:     #440000;
  --accent:            #FF0000;
  --accent-hover:      #CC0000;
  --accent-text:       #000000;
  --success:           #00FF44;
  --success-bg:        #001A00;
  --warning:           #FFAA00;
  --warning-bg:        #1A0800;
  --error:             #FF0000;
  --error-bg:          #1A0000;
  --info:              #FF6666;
  --info-bg:           #1A0000;
  --font-sans: 'JetBrains Mono', 'Courier New', Consolas, monospace;
  --shadow-sm: 0 1px 2px rgba(255, 0, 0, 0.1);
  --shadow-md: 0 4px 6px rgba(255, 0, 0, 0.15);
  --shadow-lg: 0 10px 15px rgba(255, 0, 0, 0.2);
}

html[data-theme="tactical"] body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background-image: repeating-linear-gradient(
    0deg, transparent, transparent 2px,
    rgba(255, 0, 0, 0.03) 2px, rgba(255, 0, 0, 0.03) 4px
  );
}

html[data-theme="tactical"] h1,
html[data-theme="tactical"] h2,
html[data-theme="tactical"] h3 {
  text-transform: uppercase;
  letter-spacing: 0.15em;
}


*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; color: var(--text-primary); background: var(--background);
  font-family: var(--font-sans); line-height: 1.5;
}
a { color: inherit; }
h1 { font-size: 1.6rem; margin: 0; line-height: 1.25; }
h2 { font-size: 1.2rem; margin: 0; }
h3 { font-size: 1rem; margin: 0; }
p { margin: 0; }
input, select, textarea, button { font: inherit; }
input, select, textarea { color: var(--text-primary); background: var(--background); }

/* ── Mise en page ─────────────────────────────────────────────────────────── */
.conteneur { width: 100%; max-width: 64rem; margin-inline: auto; padding-inline: var(--space-4); }
.etroit { max-width: 32rem; margin-inline: auto; }
.moyen { max-width: 48rem; }
.pile { display: flex; flex-direction: column; gap: var(--space-4); }
.pile-petit { display: flex; flex-direction: column; gap: var(--space-2); }
.pile-grand { display: flex; flex-direction: column; gap: var(--space-8); }
.ligne { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.entre { justify-content: space-between; }
.debut { align-items: flex-start; }
.grille { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
@media (min-width: 640px) {
  .grille-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grille-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .carte-type { flex-direction: row !important; justify-content: space-between; gap: var(--space-4) !important; }
}
.defile-x { overflow-x: auto; }
main { padding-block: var(--space-8) var(--space-16); }

/* ── En-tête et pied ──────────────────────────────────────────────────────── */
.entete { border-bottom: 1px solid var(--border); background: var(--background); }
.entete .conteneur { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); padding-block: var(--space-3); }
.marque { font-weight: 600; text-decoration: none; }
.nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); font-size: 0.875rem; }
.nav a { color: var(--text-secondary); text-decoration: none; }
.nav a:hover { color: var(--text-primary); text-decoration: underline; }
.nav form { margin: 0; }
.pied { border-top: 1px solid var(--border); padding-block: var(--space-6); font-size: 0.75rem; color: var(--text-muted); display: flex; flex-wrap: wrap; gap: var(--space-4); }

.bandeau-mode { position: sticky; top: 0; z-index: 50; text-align: center; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; padding: var(--space-2) var(--space-4); }
.bandeau-mode--conception { background: var(--env-conception-bg); color: var(--env-conception-fg); }
.bandeau-mode--staging { background: var(--env-staging-bg); color: var(--env-staging-fg); }
.bandeau-mode--production { background: var(--env-production-bg); color: var(--env-production-fg); }

/* ── Composants ───────────────────────────────────────────────────────────── */
.carte { background: var(--background-subtle); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: var(--space-6); }
a.carte { display: flex; flex-direction: column; gap: var(--space-1); text-decoration: none; transition: border-color var(--transition-base); }
a.carte:hover { border-color: var(--border-strong); }
.muet { color: var(--text-muted); }
.secondaire { color: var(--text-secondary); }
.petit { font-size: 0.875rem; }
.tres-petit { font-size: 0.75rem; }
.gras { font-weight: 600; }
.majuscule-initiale::first-letter { text-transform: uppercase; }
.lien { color: var(--text-primary); text-decoration: underline; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  background: var(--accent); color: var(--accent-text); border: 1px solid var(--accent); border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-5); font-weight: 600; cursor: pointer; text-decoration: none; transition: background var(--transition-base);
}
.btn:hover { background: var(--accent-hover); }
.btn:disabled { opacity: 0.6; cursor: not-allowed; }
.btn-secondaire {
  display: inline-flex; align-items: center; justify-content: center; background: transparent; color: var(--text-primary);
  border: 1px solid var(--border-strong); border-radius: var(--radius-lg); padding: var(--space-2) var(--space-4); cursor: pointer; text-decoration: none;
}
.btn-secondaire:hover { background: var(--background-muted); }
.btn-secondaire.actif, .btn-secondaire[aria-current] { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }
.etiquette { display: block; font-size: 0.875rem; font-weight: 500; color: var(--text-secondary); margin-bottom: var(--space-1); }
.champ { width: 100%; padding: var(--space-3); font-size: 16px; border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--background); color: var(--text-primary); }
.champ:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.champ-heure { padding: 0.4rem; width: auto; }
.case { display: flex; gap: var(--space-2); align-items: flex-start; font-size: 0.875rem; }
.case input { margin-top: 0.25rem; }
.aide { font-size: 0.75rem; color: var(--text-muted); margin-top: var(--space-1); }
.alerte-ok   { background: var(--success-bg); color: var(--success); border-radius: var(--radius-md); padding: var(--space-3); }
.alerte-err  { background: var(--error-bg);   color: var(--error);   border-radius: var(--radius-md); padding: var(--space-3); }
.alerte-info { background: var(--info-bg);    color: var(--info);    border-radius: var(--radius-md); padding: var(--space-3); }
.pastille { display: inline-block; font-size: 0.75rem; padding: 2px var(--space-2); border-radius: var(--radius-full); background: var(--background-muted); color: var(--text-secondary); }
.pastille-err { background: var(--error-bg); color: var(--error); }
.avatar { width: 3.5rem; height: 3.5rem; flex: none; border-radius: var(--radius-full); background: var(--accent); color: var(--accent-text); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.25rem; }
.tableau { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.tableau th, .tableau td { text-align: left; padding: var(--space-2); border-bottom: 1px solid var(--border); vertical-align: top; }
.tableau th { color: var(--text-muted); font-weight: 500; }
.etapes { display: flex; gap: var(--space-4); font-size: 0.875rem; list-style: none; padding: 0; margin: 0; }
.etapes li { color: var(--text-muted); }
.etapes li[aria-current] { color: var(--text-primary); font-weight: 600; }
.recap { display: grid; grid-template-columns: auto 1fr; gap: var(--space-2) var(--space-4); margin: 0; }
.recap dt { color: var(--text-muted); }
.recap dd { margin: 0; }
details > summary { cursor: pointer; }
form { margin: 0; }

/* ── Sélecteur de thème ───────────────────────────────────────────────────── */
.theme { display: inline-flex; gap: var(--space-1); background: var(--background-subtle); border: 1px solid var(--border); border-radius: var(--radius-full); padding: var(--space-1); }
.theme button { background: transparent; border: none; cursor: pointer; width: 32px; height: 32px; border-radius: var(--radius-full); font-size: 16px; }
.theme button:hover { background: var(--background-muted); }
.theme button[aria-pressed="true"] { background: var(--accent); color: var(--accent-text); }